jn_app/pages/home/stationIndex.vue

<template>
	<view class="home">
		<view class="box-bg">
			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
				@clickLeft="back" />
		</view>
		<view class="home_main">
			<view class="main_time">
				<view class="mesTime">
					<image src="../../static/jnImage/indexPage/time.png"></image>
					<text>{{timeData.year}}年{{timeData.month}}月{{timeData.day}}日</text>
					<text>{{timeData.week}}</text>
					<text>{{timeData.hour}}{{timeData.minute}}</text>
				</view>
				<view class="mesAll">
					<uni-row class="mesEx">
						<uni-col :span="12" v-for="(item,index) in mesExData" :key="index">
							<view class="mesEx_left flex">
								<view class="mesEx_left_top">
									<text class="nameSty">{{item.leftName}}</text>
								</view>
								<view class="mesEx_left_end">
									<text>{{item.leftValue}}</text>
									<text>{{item.leftCode}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="windpowerCl">
						<uni-col :span="12" v-for="(item,index) in windPowerData" :key="index">
							<view class="windpowerMsg">
								<view class="windpowerMsg_com flex justify-between">
									<text style="font-size: 28upx">{{item.name}}</text>
									<text>{{item.code}}</text>
								</view>
								<view class="windpowerMsg_Data">
									<text>{{item.value}}</text>
								</view>
								<view class="windpowerMsg_com flex justify-between">
									<text>min:{{item.min}}</text>
									<text>max:{{item.max}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<view class="windMsg" v-if="stationWpid.indexOf('_FDC') > -1">
						<view class="flex justify-center" style="margin-bottom: 6px;" @click="watchWindStatus('wind')">
							<view class="windMsg_title">
								<image src="../../static/jnImage/indexPage/wancheng.png" mode=""></image>
								<text>风机状态</text>
							</view>
						</view>
						<view class="windMsg_main">
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_jieru.png" mode=""></image>
										<text>接入</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(powerstatusData.jr_fj_ts)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_daiji.png" mode=""></image>
										<text>待机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_djnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_bingwang.png" mode=""></image>
										<text>并网</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_yxnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_guzhang.png" mode=""></image>
										<text>故障</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_gznum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_jianxiu.png" mode=""></image>
										<text>检修</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_jxnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_xiandian.png" mode=""></image>
										<text>限电</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_xdnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_shoulei.png" mode=""></image>
										<text>受累</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_slnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_lixian.png" mode=""></image>
										<text>离线</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.fd_lxnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="powerMsg" v-else>
						<view class="flex justify-center" style="margin-bottom: 6px;" @click="watchWindStatus('power')">
							<view class="windMsg_title">
								<image src="../../static/jnImage/indexPage/wancheng.png" mode=""></image>
								<text>光伏状态</text>
							</view>
						</view>
						<view class="windMsg_main">
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_jieru.png" mode=""></image>
										<text>接入</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(powerstatusData.jr_gf_jzts+powerstatusData.jr_gf_zcts)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_daiji.png" mode=""></image>
										<text>待机</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_djnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_bingwang.png" mode=""></image>
										<text>并网</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_yxnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_guzhang.png" mode=""></image>
										<text>故障</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_gznum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_jianxiu.png" mode=""></image>
										<text>检修</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_jxnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_xiandian.png" mode=""></image>
										<text>限电</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_xdnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
							<view class="windMsg_main_msg flex justify-between">
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_shoulei.png" mode=""></image>
										<text>受累</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_slnum)}}</text>
										<text>台</text>
									</view>
								</view>
								<view class="windMsgSty flex">
									<view class="windMsgSty_left">
										<image src="../../static/jnImage/indexPage/jn_lixian.png" mode=""></image>
										<text>离线</text>
									</view>
									<view class="windMsgSty_right flex justify-between">
										<text>{{Math.ceil(windstatusData.gf_lxnum)}}</text>
										<text>台</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="matrix">
						<view class="matrixItem" v-if="stationWpid.indexOf('_FDC') > -1"
							v-for="(item,index) in windData" :key="index">
							<view class="matrixText">{{item.wpname}}</view>
							<uni-row class="matrixItemRow">
								<uni-col :span="3" v-for="(itv,index) in item.wtlist" :key="index">
									<view class="matrixItemRowOne" :style="getColor(itv)">{{itv.wtname}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view class="matrixItem" v-if="stationWpid.indexOf('_GDC') > -1"
							v-for="(item,index) in powerData" :key="index">
							<view class="matrixText">{{item.wpname}}</view>
							<uni-row class="matrixItemRow">
								<uni-col :span="3" v-for="(itv,index) in item.wtlist" :key="index">
									<view class="matrixItemRowOne" :style="getColor(itv)">{{itv.wtname}}</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
		</view>
		<station-bar ref="stationBar"></station-bar>
	</view>
</template>
<script>
	import stationBar from '../common/stationTab.vue'
	import {
		windPowerDataApi
	} from '../../api/common.js'
	import {
		cockpitMonitor,
		stationCaldataApi
	} from '../../api/home.js'
	export default {
		onLoad: function(e) {

		},
		components: {
			stationBar
		},
		data() {
			return {
				stationName: '',
				stationWpid: '',
				stationTab: '',
				mesExData: [],
				windPowerData: [],
				windstatusData: [],
				powerstatusData: [],
				windData: [],
				powerData: [],
				timeData: {},
			}
		},
		created() {
			this.stationName = uni.getStorageSync('stationName')
			this.stationWpid = uni.getStorageSync('stationWpid')
			this.getTimeDaya()
			this.getHomeData()
			this.getHomeDataTwo()
			if (this.stationWpid.indexOf('_FDC') > -1) {
				this.getwindPowerData("0", "-1");
			} else {
				this.getwindPowerData("0", "-2");
			}
		},
		mounted() {
			this.$refs.stationBar.showTab = '首页'
		},
		methods: {
			getColor(itv) {
				switch (Math.ceil(itv.status)) {
					case 0:
						return "background: #1d99ff";
					case 1:
						return "background: #05bb4c";
					case 2:
						return "background: #ba3237";
					case 3:
						return "background: #e17e23";
					case 4:
						return "background: #c531c7";
					case 5:
						return "background: #fff";
					case 6:
						return "background: #606769";
				}
			},
			//获取时间
			getTimeDaya() {
				let currentDate = new Date()
				this.timeData.year = currentDate.getFullYear()
				this.timeData.month = currentDate.getMonth() + 1
				this.timeData.day = currentDate.getDate()
				this.timeData.hour = currentDate.getHours() + ':'
				this.timeData.minute = currentDate.getMinutes() < 10 ? '0' + currentDate.getMinutes() : currentDate
					.getMinutes()
				this.timeData.week = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')[currentDate.getDay()]
			},
			//获取首页整体数据
			getHomeData() {
				let that = this
				cockpitMonitor({
					wpId: that.stationWpid
				}).then(res => {
					if (res.data) {
						if (res.data.cblpoint) {
							that.powerstatusData = res.data.cblpoint
						}
						if (res.data.mxztmap) {
							that.windstatusData = res.data.mxztmap
						}
					}
				})
			},
			getHomeDataTwo() {
				let that = this
				stationCaldataApi({
					wpid: that.stationWpid
				}).then(res => {
					if (res.data.data) {
						let datas = res.data.data
						that.mesExData = [{
								leftName: '容量',
								leftValue: Math.ceil(datas.zzjrl / 1000),
								leftCode: '(WM)',
							},
							{
								leftName: '安全天数',
								leftValue: Math.ceil(datas.aqts),
								leftCode: '(天)',
							},
							{
								leftName: '日发电量',
								leftValue: Math.ceil(datas.rfdl),
								leftCode: '(万kWh)'
							},
							{
								leftName: '利用小时',
								leftValue: Math.ceil(datas.ylyxs + datas.nlyxs),
								leftCode: '(万kWh)'
							},
							{
								leftName: '月发电量',
								leftValue: Math.ceil(datas.yfdl),
								leftCode: '(万kWh)'
							},
							{
								leftName: '年发电量',
								leftValue: Math.ceil(datas.nfdl),
								leftCode: '(万kWh)'
							},
						]
						that.windPowerData = [{
							name: '风速',
							value: Math.ceil(datas.sspjfsgzd),
							code: '(m/s)',
							min: 6,
							max: 8
						}, {
							name: '日照强度',
							value: 0,
							code: '(m/s)',
							min: 6,
							max: 20
						}, {
							name: '功率',
							value: datas.yggl,
							code: '(万kW)',
							min: 0,
							max: 200
						}, {
							name: '负荷率',
							value: Math.ceil(datas.fhl),
							code: '(万kW)',
							min: 0,
							max: 500
						}]
					}
				})
			},
			getwindPowerData(type1, type2) {
				let that = this
				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 => {
									if (that.stationWpid === item.wpid) {
										if (type2 === "-1") {
											that.windData.push(item)
										} else {
											that.powerData.push(item)
										}
									}
								})
							}

						} else {
							this.windData = [];
							this.powerData = [];
						}
					});
			},
			back() {
				this.$tab.switchTab('/pages/home/index')
			},
			stationTabXY(it) {
				this.stationTab = it
			}
		}
	}
</script>

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

	.home {
		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;
				}
			}
		}

		.home_main {
			padding: 0 20px;

			.main_time {
				margin-top: 10px;

				.mesTime {
					display: flex;
					padding: 3px 0;
					border-bottom: 1px solid rgba(255, 255, 255, 0.25);

					image {
						width: 20px;
						height: 20px;
					}

					text {
						font-size: 34upx;
						color: #fff;
						margin-left: 15px;
					}

					text:nth-of-type(3) {
						position: relative;
						top: 3px;
					}

				}

				.mesAll {
					padding-bottom: 60px;

					.mesEx {
						// display: flex;
						line-height: 30px;
						color: #fff;

						.mesEx_left {
							width: 100%;
							border-bottom: 1px solid rgba(255, 255, 255, 0.25);
							padding: 3px 0;

							.mesEx_left_top {
								width: 40%;
								font-size: 28upx;

								.nameSty {
									width: 100%;
									display: inline-block;
									position: relative;
									text-align-last: justify;
									text-align: justify;

								}
							}

							.mesEx_left_end {
								width: 56%;
								margin: 0 10px;
								display: flex;
								justify-content: space-between;

								text:nth-of-type(1) {
									font-size: 34upx;
								}

								text:nth-of-type(2) {
									font-size: 20upx;
									color: #92949B;
								}
							}

						}


					}

					.windpowerCl {
						.windpowerMsg {
							margin-top: 10px;
							padding: 5px 10px;
							color: #fff;
							background-image: url('../../static/jnImage/indexPage/windpower.png');
							background-repeat: no-repeat;
							background-size: cover;

							.windpowerMsg_com {
								text {
									font-size: 24upx;
									color: #AFB2C1;
								}
							}

							.windpowerMsg_Data {
								margin: 5px;
								text-align: center;
								font-size: 40upx;
							}
						}
					}



					.windMsg,
					.powerMsg {
						margin-top: 15px;

						.windMsg_title {
							width: 40%;
							height: 30px;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 6px 13px;
							background: rgba(51, 57, 118, 0.7);
							border-radius: 5px;

							image {
								width: 18px;
								height: 18px;
							}

							text {
								margin-left: 5px;
								font-size: 34upx;
								color: #fff;

							}
						}

						.windMsg_main {
							.windMsg_main_msg {
								margin-bottom: 8px;

								.windMsgSty {
									padding: 5px 8px;
									width: 49%;
									background: #3F4572;
									border-radius: 5px;

									.windMsgSty_left {
										width: 49%;
										height: 32px;

										image {
											width: 32px;
											height: 32px;
										}

										text {
											width: 100px;
											display: inline-block;
											color: #9A9BA6;
											font-size: 28upx;
											margin-left: 10px;
											position: relative;
											top: -26px;
											left: 28px;
										}

										.fourFont {
											top: -38px;
										}
									}

									.windMsgSty_right {
										width: 49%;
										position: relative;
										top: 9px;

										text:nth-of-type(1) {
											margin-left: 5px;
											width: 50%;
											font-size: 34upx;
											color: #fff;
										}

										text:nth-of-type(2) {
											font-size: 28upx;
											color: #9A9BA6;
										}
									}
								}
							}
						}
					}

					.matrix {
						.matrixItem {
							margin-top: 10px;

							.matrixText {
								font-size: 32upx;
								color: #9A9BA6;
							}

							.matrixItemRow {
								.matrixItemRowOne {
									width: 100%;
									height: 30px;
									background-color: #2675F6;
									text-align: center;
									line-height: 30px;
									color: #fff;
									font-size: 24upx;
									border-radius: 5px;
									// margin: 1px 2px;
									border: 1px solid #202246;
								}
							}
						}
					}
				}
			}
		}
	}
</style>