jn_app/pages/common/windStatusPage.vue

<template>
	<view class="windStatus">
		<view class="box-bg">
			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationTit"
				@clickLeft="back" />
		</view>
		<view class="windPowerStatus">
			<view class="windStatusMain" v-if="statusFrom === 'wind'">
				<view class="windAllStatus flex justify-between">
					<view class="statusAllName" v-for="(item, index) in statusAll" :key="index" :style="backSty(item)">
						{{item.name}}
					</view>
				</view>
				<view class="windAllStatusData" v-for="(item, index) in windData" :key="index">
					<view class="statusOneName">{{item.name}}</view>
					<view class="statusAllValue flex justify-between">
						<view class="statusOneVal" :style="`color: ${colorAll[index]}`"
							v-for="(itv, index) in item.value" :key="index">
							{{itv}}
						</view>
					</view>
				</view>
			</view>
			<view class="windStatusMain" v-else>
				<view class="windAllStatus flex justify-between">
					<view class="statusAllName" v-for="(item, index) in statusAll" :key="index" :style="backSty(item)">
						{{item.name}}
					</view>
				</view>
				<view class="windAllStatusData" v-for="(item, index) in powerData" :key="index">
					<view class="statusOneName">{{item.name}}</view>
					<view class="statusAllValue flex justify-between">
						<view class="statusOneVal" :style="`color: ${colorAll[index]}`"
							v-for="(itv, index) in item.value" :key="index">
							{{itv}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		windPowerDataApi
	} from '../../api/common.js'
	export default {
		onLoad: function(e) {
			this.statusFrom = e.status
		},
		data() {
			return {
				stationTit: '',
				statusFrom: '',
				statusAll: [],
				windData: [],
				powerData: [],
				colorAll: ['#1d99ff', '#05bb4c', '#ba3237', '#e17e23', '#c531c7', '#fff', '#606769']
			}
		},
		created() {
			this.stationTit = this.statusFrom === 'wind' ? '各风场状态' : '各电站状态'
			this.statusAll = [{
					name: '待机',
					color: '#1d99ff'
				},
				{
					name: '运行',
					color: '#05bb4c'
				},
				{
					name: '故障',
					color: '#ba3237'
				},
				{
					name: '检修',
					color: '#e17e23'
				},
				{
					name: '限电',
					color: '#c531c7'
				},
				{
					name: '受累',
					color: '#fff'
				},
				{
					name: '离线',
					color: '#606769'
				},
			]

			this.requestData("0", "-1");
			this.requestData("0", "-2");
		},
		mounted() {},
		methods: {
			requestData(type1, type2) {
				windPowerDataApi({
						company: type1,
						type: type2
					})
					.then((res) => {
						if (Object.values(res.data.data).length) {
							if (res.data.data.powerVos.length > 0) {
								res.data.data.powerVos.forEach(item => {
									let obj = {
										name: item.wpname,
										value: [Math.ceil(item.djts), Math.ceil(item.bwts), Math.ceil(
												item
												.gzts), Math.ceil(item.jxts), Math.ceil(item.xdts),
											Math.ceil(item.slts), Math.ceil(item.lxts)
										]
									}
									if (type2 === "-1") {
										this.windData.push(obj)
									} else {
										this.powerData.push(obj)
									}
								})
							}

						} else {
							this.windData = [];
							this.powerData = [];
						}
					});
			},
			backSty(item) {
				let backSty = ''
				if (item.name === '受累') {
					backSty = `color: #000;background-color: ${item.color};`
				} else {
					backSty = `background-color: ${item.color};`
				}
				return backSty
			},
			back() {
				this.$tab.switchTab('/pages/home/index')
			},
		}
	}
</script>

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

	.windStatus {
		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;

		.box-bg {
			width: 100vw;
			padding: 0;

			.uni-navbar {
				.uni-navbar__content {
					padding: 5px 0;
					height: 50px;
				}
			}
		}

		.windPowerStatus {
			padding: 0 20px;

			.windStatusMain {
				margin-top: 20px;

				.windAllStatus {
					width: 100%;

					.statusAllName {
						border-right: 2px solid #202246;
						text-align: center;
						line-height: 23px;
						color: #fff;
						font-size: 24upx;
						width: 14%;
						height: 23px;
					}
				}

				.windAllStatusData {
					.statusOneName {
						margin-top: 10px;
						font-size: 28upx;
						color: #B2B5C5;
					}

					.statusAllValue {
						width: 100%;
						margin-top: 5px;

						.statusOneVal {
							border-right: 2px solid #202246;
							text-align: center;
							line-height: 23px;
							color: #fff;
							font-size: 24upx;
							width: 14%;
							height: 23px;
							background-color: rgba(63, 69, 114, 0.7);
						}
					}
				}
			}
		}
	}
</style>