jn_app/pages/report/index.vue

<template>
	<view class="report">
		<company-header></company-header>
		<view class="report_main">
			<view class="report_DataAll" v-for="(item,index) in reportProgressData" :key="index">
				<uni-row class="report_Data flex justify-between">
					<uni-col :span="8" class="report_Data_1 flex">
						<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
						<text>{{item.inPower}}</text>
					</uni-col>
					<uni-col :span="8" class="report_Data_2">
						<text>{{item.name}}</text>
					</uni-col>
					<uni-col :span="8" class="report_Data_3 flex justify-end">
						<text>{{item.allPower}}</text>
					</uni-col>
				</uni-row>
				<view class="report_Data_msg">
					<view class="show_msg" :style="showProgress(item)">

					</view>
				</view>
			</view>
			<view class="yearTab">
				<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
					:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
			</view>
			<view class="reportTable">
				<uni-table ref="table" border emptyText="暂无更多数据" width="100%">
					<uni-tr>
						<uni-th align="center">性能指标</uni-th>
						<uni-th width="125" align="center">数据</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td>{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.value }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bulletinappBulletinApi
	} from '../../api/report.js'
	import companyHeader from '../common/companyHeader.vue'
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		data() {
			return {
				reportProgressData: [],
				yearTab: 'day',
				yearData: [],
				tableData: [],
				reportDataAll: {}
			}
		},
		created() {
			this.getReportData()
			this.yearData = [{
					nameZN: '日简报',
					nameEN: 'day',
					showColor: true
				},
				{
					nameZN: '月简报',
					nameEN: 'month',
					showColor: false
				},
				{
					nameZN: '年简报',
					nameEN: 'year',
					showColor: false

				}
			]
		},
		methods: {
			showProgress(item) {
				return `width: ${item.progress};`
			},
			changeYearTab(item) {
				this.tableData = []
				this.yearData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.yearTab = it.nameEN
					}
				})
				for (let i in this.reportDataAll) {
					let obj = {}
					if (this.yearTab === 'day' && i.indexOf('日') > -1) {
						obj = {
							name: i,
							value: this.reportDataAll[i]
						}
						this.tableData.push(obj)
					}
					if (this.yearTab === 'month' && i.indexOf('月') > -1) {
						obj = {
							name: i,
							value: this.reportDataAll[i]
						}
						this.tableData.push(obj)
					}
					if (this.yearTab === 'year' && i.indexOf('年') > -1) {
						obj = {
							name: i,
							value: this.reportDataAll[i]
						}
						this.tableData.push(obj)
					}
				}
			},
			getReportData() {
				let that = this
				that.tableData = []
				that.reportDataAll = {}
				bulletinappBulletinApi({
					wpId: 'KGDL_FGS0'
				}).then(res => {
					if (res && res.data) {
						that.reportDataAll = res.data
						let datas = res.data
						let nowDay = that.getDayOfYear()
						let nowPro = nowDay / 365 * 100
						that.reportProgressData = [{
								inPower: datas['年发电量'] + '万kWh',
								allPower: datas['年计划发电量'] + '万kWh',
								progress: datas['年完成率'],
								name: '年发电量'
							},
							{
								inPower: nowDay + '天',
								allPower: '365天',
								progress: nowPro + '%',
								name: '日历进度'
							},
							{
								inPower: '日历进程',
								allPower: '年发电量',
								progress: datas['年完成率'],
								name: '完成度'
							},
						]
						for (let i in datas) {
							let obj = {}
							if (that.yearTab === 'day' && i.indexOf('日') > -1) {
								obj = {
									name: i,
									value: datas[i]
								}
								that.tableData.push(obj)
							}
						}
					}
				})
			},
			getDayOfYear() {
				var date = new Date();
				var start = new Date(date.getFullYear(), 0, 0);
				var diff = (date - start) + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000);
				var oneDay = 1000 * 60 * 60 * 24;
				var dayOfYear = Math.floor(diff / oneDay);
				return dayOfYear;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.report {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.report_main {
			padding: 0 20px;

			.report_DataAll {
				margin-top: 10px;

				.report_Data {
					.report_Data_1 {
						image {
							width: 18px;
							height: 18px;
						}

						text {
							margin-left: 5px;
							font-size: 28upx;
							color: #A49EAC;
							position: relative;
							top: 0px;
						}
					}

					.report_Data_2 {
						text {
							font-size: 32upx;
							color: #A49EAC;
						}
					}

					.report_Data_3 {
						text {
							font-size: 28upx;
							color: #A49EAC;
						}
					}
				}

				.report_Data_msg {
					width: 100%;
					height: 20px;
					border-radius: 5px;
					background: #0B143E;

					.show_msg {
						height: 20px;
						background: #00BC6F;
						border-radius: 5px 0 0 5px;
					}
				}
			}

			.yearTab {
				width: 99%;
				height: 30px;
				border-radius: 5px;
				background: #0B143E;
				margin-top: 20px;

				text {
					display: inline-block;
					width: 33%;
					height: 30px;
					text-align: center;
					color: #4287FF;
					line-height: 30px;
				}

				text:nth-of-type(1) {
					border-radius: 5px 0 0 5px;
				}

				text:nth-of-type(3) {
					border-radius: 0 5px 5px 0;
				}
			}

			.reportTable {
				width: 100%;
				margin-top: 10px;

				.table--border {
					border: 1px solid rgba(255, 255, 255, 0.3);
				}

				.uni-table {
					background-color: rgba(255, 255, 255, 0);

					.uni-table-tr {
						.table--border {
							border: 1px solid rgba(255, 255, 255, 0.3);
						}

						.uni-table-th {
							background-color: #2E336D;
						}

						.uni-table-th,
						.uni-table-td {
							color: #fff;
							font-size: 26upx;

						}

						.uni-table-th:nth-of-type(1) {
							background-color: #6C4B9E;
						}
					}

					.uni-table-tr:hover {
						background-color: rgba(255, 255, 255, 0);
					}
				}
			}
		}
	}
</style>