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">
				<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>
	import companyHeader from '../common/companyHeader.vue'
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		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};`
			},
			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;

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