jn_app/pages/report/index.vue

<template>
	<view class="report">
		<view class="home_header">
			<view class="header_message" @click="changeMsg">
				<image src="../../static/jnImage/indexPage/alarmSet.png"></image>
			</view>
			<view class="header_title">
				<!-- <image src="../../static/jnImage/loginPage/logo.png" mode=""></image> -->
				<text class="titleName">发电场站生产实时运营管理平台</text>
			</view>
			<view class="header_more">
				<image src="../../static/jnImage/indexPage/moreNew.png"></image>
			</view>
		</view>
		<view class="report_main">
			<view class="report_DataAll" v-for="(item,index) in reportProgressData" :key="index">
				<view class="report_Data flex justify-between">
					<view class="report_Data_1 flex">
						<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
						<text>{{item.inPower}}</text>
					</view>
					<view class="report_Data_2">
						<text>{{item.name}}</text>
					</view>
					<view class="report_Data_3">
						<text>{{item.allPower}}</text>
					</view>
				</view>
				<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="45" align="center">数据</uni-th>
						<uni-th width="45" align="center">数据</uni-th>
						<uni-th width="45" 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.data1 }}</uni-td>
						<uni-td align="center">{{ item.data2 }}</uni-td>
						<uni-td align="center">{{ item.data3 }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {},
		data() {
			return {
				reportProgressData: [],
				yearTab: 'day',
				yearData: [],
				tableData: []
			}
		},
		created() {
			this.tableData = [{
					name: '指标一',
					data1: '2.8',
					data2: '3.6',
					data3: '4.8'
				},
				{
					name: '指标二',
					data1: '2.8',
					data2: '3.6',
					data3: '4.8'
				},
				{
					name: '指标三',
					data1: '2.8',
					data2: '3.6',
					data3: '4.8'
				},
			]
			this.reportProgressData = [{
						inPower: '961万kWh',
						allPower: '1865万kWh',
						progress: '70%',
						name: '年发电量'
					},
					{
						inPower: '171天',
						allPower: '365天',
						progress: '56%',
						name: '日历进度'
					},
					{
						inPower: '日历进程',
						allPower: '年发电量',
						progress: '65%',
						name: '完成度'
					},
				],
				this.yearData = [{
						nameZN: '日简报',
						nameEN: 'day',
						showColor: true
					},
					{
						nameZN: '月简报',
						nameEN: 'month',
						showColor: false
					},
					{
						nameZN: '年简报',
						nameEN: 'year',
						showColor: false

					}
				]
		},
		methods: {
			showProgress(item) {
				return `width: ${item.progress};`
			},
			changeMsg() {
				this.$tab.navigateTo('/pages/common/uniNavBar')
			},
			changeYearTab(item) {
				this.yearData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.yearTab = it.nameEN
					}
				})
			},
		}
	}
</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;

		.home_header {
			width: calc(100% -32px);
			display: flex;
			justify-content: space-between;
			height: 60px;
			padding-top: 16px;
			// position: fixed;

			.header_message {
				width: 15%;

				image {
					position: relative;
					top: 5px;
					left: 10px;
					width: 25px;
					height: 25px;
				}
			}

			.header_title {
				width: 70%;
				position: relative;
				left: 5px;

				image {
					width: 28px;
					height: 22px;
					position: relative;
					top: 5px;
				}

				.titleName {
					line-height: 20px;
					font-size: 36upx;
					font-family: FZZhengHeiS-M-GB;
					font-weight: 600;
					color: #fff;
					position: relative;
					top: 8px;
				}
			}

			.header_more {
				width: 15%;
				position: relative;
				top: 10px;
				left: 10px;

				image {
					width: 25px;
					height: 15px;
				}
			}
		}

		.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>