sis_zhfx/src/views/WindSite/pages/GeneralAppearance.vue

<template>
	<div class="general-appearance">
		<div class="btn-group-tabs">
			<BtnGroup2 :btnGroups="btnGroups" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
		</div>
		<div class="panel-title">
			<div class="panel-title-name">
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/black.png" />
					<span class="sub-title gray">接入台数</span>
					<span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/green.png" />
					<span class="sub-title green">待机台数</span>
					<span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/blue.png" />
					<span class="sub-title blue">并网台数</span>
					<span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/purple.png" />
					<span class="sub-title pink">限电台数</span>
					<span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/red.png" />
					<span class="sub-title red">故障台数</span>
					<span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/orange.png" />
					<span class="sub-title orange">检修台数</span>
					<span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
				</div>
				<div class="sub-title-item">
					<img src="../../../assets/map/fan/black.png" />
					<span class="sub-title gray">离线台数</span>
					<span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
				</div>
			</div>
			<div class="query-actions btnR" v-if="wpId == 'PL01_GC' || wpId == 'PL02_GC'">
				<button class="btn" :class="wpId == 'PL01_GC'?'green':''" @click="pl('PL01_GC')">平罗一期</button>
				<button class="btn" :class="wpId == 'PL02_GC'?'green':''" @click="pl('PL02_GC')">平罗二期</button>
			</div>
		</div>
		<div>
			<MHS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MHS_FDC'" />
			<NSS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'NSS_FDC'" />
			<QS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'QS_FDC'" />
			<SBQ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'SBQ_FDC'" />
			<XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
			<XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
			<DWK class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'DWK_GDC'" />
			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL_GDC'" />
			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL2_GDC'" />
			<MCH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MCH_GDC'" />
			<HZJ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'HZJ_GDC'" />
		</div>
	</div>
</template>

<script>
	import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
	import MHS from "../components/generalappearance/mhs.vue";
	import NSS from "../components/generalappearance/nss.vue";
	import QS from "../components/generalappearance/qs.vue";
	import SBQ from "../components/generalappearance/sbq.vue";
	import XS from "../components/generalappearance/xs.vue";
	import XH from "../components/generalappearance/xh.vue";
	import DWK from "../components/generalappearance/dwk.vue";
	import PL1 from "../components/generalappearance/pl1.vue";
	import PL2 from "../components/generalappearance/pl2.vue";
	import MCH from "../components/generalappearance/mch.vue";
	import HZJ from "../components/generalappearance/hzj.vue";
	export default {
		// 名称
		name: "GeneralAppearance",
		// 使用组件
		components: {
			BtnGroup2,
			MHS,
			NSS,
			QS,
			SBQ,
			XS,
			XH,
			DWK,
			PL1,
			PL2,
			MCH,
			HZJ
		},
		// 数据
		data() {
			return {
				timmer: undefined,
				wpId: undefined, //场站
				wpnumMap: {}, //风机监视数量
				fjmap: [], //场站风机详情
				zmmap: {},
				selectIndex: 0,
				rowIndex: 0,
				btnGroups: [{
						icon: "svg-wind-site",
						btns: [],
					},
					{
						icon: "svg-photovoltaic",
						btns: [],
					},
				],
			};
		},
		created() {
			let that = this;
			that.wpId = that.$route.params.wpId;
			that.$nextTick(() => {
				that.getWp();
				that.timmer = setInterval(() => {
					that.requestData();
				}, that.$store.state.websocketTimeSec);
			});
		},
		// 函数
		methods: {
			select(res) {
				this.$router.replace({
					path: `/monitor/windsite/generalappearance/${res.code}`,
				});
			},
			getWp() {
				let that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "powercompare/windfarmAllAjax",
					success(res) {
						let btnGroup = [{
								icon: "svg-wind-site",
								btns: [],
							},
							{
								icon: "svg-photovoltaic",
								btns: [],
							},
						];

						res.data.forEach((ele, index) => {
							if (ele.id.indexOf("FDC") !== -1) {
								btnGroup[0].btns.push({
									text: ele.name,
									code: ele.id,
								});
							} else {
								btnGroup[1].btns.push({
									text: ele.name,
									code: ele.id,
								});
								// if(ele.id == 'PL_GDC'){
								// 	btnGroup[1].btns.push({
								// 	  text: '平罗二期光伏电站',
								// 	  code: 'PL2_GDC',
								// 	});
								// }
							}
						});

						that.btnGroups = btnGroup;
						that.renderBtnActiveIndex();
					},
				});
			},
			requestData() {
				let that = this;
				that.API.requestData({
					method: "POST",
					subUrl: "monitor/findGeneralAppearance",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						if (res.code == 200) {
							that.wpnumMap = res.data.fczbmap.jczbmap;
							that.fjmap = res.data.fjmap[0];
							that.zmmap = res.data.zmmap;
						}
					},
				});
			},
			renderBtnActiveIndex() {
				this.btnGroups.forEach((pEle, pIndex) => {
					pEle.btns.forEach((cEle, cIndex) => {
						if (cEle.code === this.wpId) {
							this.rowIndex = pIndex;
							this.selectIndex = cIndex;
						}
					});
				});
			},
			pl(a) { //单指平罗2个总貌
				this.$router.replace({
					path: `/monitor/windsite/generalappearance/${a}`,
				});
			}
		},
		unmounted() {
			clearInterval(this.timmer);
			this.timmer = null;
		},
		watch: {
			$route(res) {
				this.wpId = res.params.wpId;
				if (res.params.wpId) {
					this.requestData();
					this.renderBtnActiveIndex();
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.general-appearance {
		width: 100%;
		height: calc(100vh - 90px);
		display: flex;
		flex-direction: column;

		.btn-group-tabs {
			display: flex;
			flex-direction: row;
		}

		.btnR {
			flex: 1;
			text-align: end;
		}

		.general-appearance-body {
			flex-grow: 1;
		}

		.panel-title {
			width: 100%;
			background-color: fade(@darkgray, 40%);
			margin-top: 1.481vh;
			padding: 6px;
			display: flex;
			align-items: center;

			.panel-title-name {
				color: @green;
				display: flex;
				align-items: center;
				line-height: 0;
				font-size: 0;

				i,
				span {
					margin: 0 0 0 1.481vh;
					line-height: 0;
					font-size: 13px;
				}
			}

			.sub-title-item {
				display: flex;
				align-items: center;
				margin-left: 16px;

				.sub-title {
					font-size: 13px;
					margin-left: 6px;
				}

				.sub-count {
					font-size: 13px;
					font-weight: 500;
				}

				img {
					height: 31px;
				}
			}
		}
	}
</style>