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

<template>
	<div>
		<div class="btn-group-tabs">
			<BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
		</div>
		<div class="wind-site-home">
			<div class="mg-b-16">
				<btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
			</div>
			<row>
				<wind-site-weather :time="nowTime" :data="tqmap" />
				<panel-3 class="wind-site-info">
					<row align="middle">
						<div class="info-item">
							<div class="text">装机容量</div>
							<div class="value">{{ jczbmap.zjrl }}</div>
							<div class="text">MW</div>
						</div>
						<div class="info-item">
							<div class="text">日发电量</div>
							<div class="value">{{ jczbmap.rfdl }}</div>
							<div class="text">万KWh</div>
						</div>
						<div class="info-item">
							<div class="text">月发电量</div>
							<div class="value">{{ jczbmap.yfdl }}</div>
							<div class="text">万KWh</div>
						</div>
						<div class="info-item">
							<div class="text">年发电量</div>
							<div class="value">{{ jczbmap.nfdl }}</div>
							<div class="text">万KWh</div>
						</div>
						<div class="info-item">
							<div class="text">月利用小时</div>
							<div class="value">{{ jczbmap.ylyxs }}</div>
							<div class="text">小时</div>
						</div>
						<div class="info-item">
							<div class="text">年利用小时</div>
							<div class="value">{{ jczbmap.nlyxs }}</div>
							<div class="text">小时</div>
						</div>
						<div class="info-item">
							<div class="text">实时风速</div>
							<div class="value">{{ jczbmap.ssfs }}</div>
							<div class="text">m/s</div>
						</div>
						<div class="info-item">
							<div class="text">实时功率</div>
							<div class="value">{{ jczbmap.sjgl }}</div>
							<div class="text">MW</div>
						</div>
					</row>
				</panel-3>
				<panel-3 class="wind-running-info">
					<row align="middle">
						<div class="fengji">
							<div class="fengji-icon svg-icon svg-icon-white">
								<svg-icon class="" svgid="svg-风机" />
							</div>
							<div class="info">
								<div class="text green">接入风机</div>
								<div class="value">{{ jczbmap.jrts }}</div>
							</div>
						</div>
						<div class="situation">
							<row class="icon-status">
								<div class="status">
									<span class="svg-icon svg-icon-green">
										<svg-icon svgid="svg-standby" />
									</span>
									<span class="text green">
										待机
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-purple">
										<svg-icon svgid="svg-normal-power" />
									</span>
									<span class="text purple">
										运行
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-pink">
										<svg-icon svgid="svg-limit-power" />
									</span>
									<span class="text pink">
										限电
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-red">
										<svg-icon svgid="svg-gz-downtime" />
									</span>
									<span class="text red">
										故障
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-orange">
										<svg-icon svgid="svg-jx-downtime" />
									</span>
									<span class="text orange">
										检修
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-gray">
										<svg-icon svgid="svg-offline" />
									</span>
									<span class="text gray">
										离线
									</span>
								</div>
								<div class="status">
									<span class="svg-icon svg-icon-white">
										<svg-icon svgid="svg-intranet-involvement" />
									</span>
									<span class="text white">
										受累
									</span>
								</div>
							</row>
							<row>
								<div class="status">
									<span class="value">
										{{ jczbmap.djnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.zcfdnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.xdjclnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.gztjnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.jxtjnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.dwslnum }}
									</span>
								</div>
								<div class="status">
									<span class="value">
										{{ jczbmap.lxnum }}
									</span>
								</div>
							</row>
						</div>
					</row>
				</panel-3>
			</row>
			<div class="first-info mg-t-16 mg-b-16">
				<div style="flex:0 1 450px;">
					<panel title="场站">
						<station height="18.519vh" />
					</panel>
				</div>
				<div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
					<panel title="72小时功率曲线图">
						<multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value"
							:units="Powertrend.units" :showLegend="true" />
					</panel>
				</div>
				<div class="mg-l-16" style="flex:0 0 400px;">
					<panel class="light-matrix-panel">
						<light-matrix :list="fjmap" />
					</panel>
				</div>
			</div>
			<row>
				<Col :span="8">
				<panel title="日度损失电量分析">
					<dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData"
						height="21.296vh" />
				</panel>
				</Col>
				<Col :span="8">
				<panel title="月度损失电量分析">
					<dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData"
						height="21.296vh" />
				</panel>
				</Col>
				<Col :span="8">
				<panel title="年度损失电量分析">
					<dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData"
						height="21.296vh" />
				</panel>
				</Col>
			</row>
			<row>
				<Col :span="8">
				<panel title="日度损失电量分析">
					<hover-bar-chart :list="dayLost" height="21.296vh" />
				</panel>
				</Col>
				<Col :span="8">
				<panel title="日发电量对比">
					<multiple-bar-line-chart height="21.296vh" :barData="CompleteElectricity.data"
						:units="CompleteElectricity.units" :lineData="CompleteElectricity.lineData"/>
				</panel>
				</Col>
				<Col :span="8">
				<panel title="月发电量对比">
					<multiple-bar-line-chart height="21.296vh" :barData="MonthCompare.data"
						:units="MonthCompare.units" :lineData="MonthCompare.lineData"/>
				</panel>
				</Col>
			</row>
		</div>
	</div>
</template>

<script>
	import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
	import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
	import MultipleBarLineChart from "../../../../components/chart/combination/multiple-bar-line-chart.vue";
	import MultipleLineChart from "../../../../components/chart/line/double-line-chart.vue";
	import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
	import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
	import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
	import Col from "../../../../components/coms/grid/col.vue";
	import Row from "../../../../components/coms/grid/row.vue";
	import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
	import Panel from "../../../../components/coms/panel/panel.vue";
	import Panel3 from "../../../../components/coms/panel/panel3.vue";
	import LightMatrix from "./light-matrix.vue";
	import Station from "./Station.vue";
	import WindSiteWeather from "./wind-site-weather.vue";

	import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";

	export default {
		// 名称
		name: "WindSiteHome",
		// 使用组件
		components: {
			BtnGroup2,
			WindSiteWeather,
			Row,
			Col,
			Panel,
			DualPieChart,
			MultipleLineChart,
			Panel3,
			SvgIcon,
			HoverBarChart,
			MultipleBarChart,
			NormalLineChart,
			LightMatrix,
			BtnGroupDouble,
			Station,
			MultipleBarLineChart
		},
		// 数据
		data() {
			return {
				timmer: null, // 计时器
				timmer2: null,
				nowTime: "", // 时间
				fjmap: [], // 分机矩阵
				tqmap: {}, // 天气数据
				glvos: {}, // 72小时功率曲线图
				wxssmap: {}, // 五项损失饼图数据
				jczbmap: {}, // 顶部基础数据
				dayLost: [], // 日度损失电量分析柱状图
				donePower: [], // 完成电量柱状图
				// 饼图数据
				pieChartData: {
					// 日度
					dayData: [{
						title: "",
						value: [],
					}, ],
					// 月度
					monthData: [{
						title: "",
						value: [],
					}, ],
					// 年度
					yearData: [{
						title: "",
						value: [],
					}, ],
				},
				// 完成电量
				CompleteElectricity: {
					data: [{
							title: "发电量",
							yAxisIndex: 0,
							value: [],
						},
						{
							title: "预测电量",
							yAxisIndex: 0,
							value: [],
						},
					],
					units: ["(万KWh)", ""],
				},

				// 4小时功率曲线图
				Powertrend: {
					value: [{
						title: "",
						value: [],
					}, ],
				},
				// 月发电量对比
				MonthCompare: {
					data: [{
							title: "月发电量",
							yAxisIndex: 0,
							value: [],
						},
						{
							title: "月预测电量",
							yAxisIndex: 0,
							value: [],
						},
					],
					units: ["(万KWh)", ""],
				},
				
				selectIndex: 0,
				rowIndex: 0,
				btnGroupsss: [{
						icon: "svg-wind-site",
						btns: [],
					},
					{
						icon: "svg-photovoltaic",
						btns: [],
					},
				],
			};
		},
		// 函数
		methods: {
			getWp() {
				let that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "powercompare/windfarmAllAjax",
					success(res) {
						let btnGroups = [{
								icon: "svg-wind-site",
								btns: [],
							},
							{
								icon: "svg-photovoltaic",
								btns: [],
							},
						];

						res.data.forEach((ele, index) => {
							if (ele.id.indexOf("FDC") !== -1) {
								btnGroups[0].btns.push({
									text: ele.name,
									code: ele.id,
								});
							} else {
								btnGroups[1].btns.push({
									text: ele.name,
									code: ele.id,
								});
							}
						});

						that.btnGroupsss = btnGroups;
						that.renderBtnActiveIndex();
					},
				});
			},

			renderBtnActiveIndex() {
				this.btnGroupsss.forEach((pEle, pIndex) => {
					pEle.btns.forEach((cEle, cIndex) => {
						if (cEle.code === this.wpId) {
							this.rowIndex = pIndex;
							this.selectIndex = cIndex;
						}
					});
				});
			},

			select(res) {
				this.$router.replace({
					path: `/monitor/windsite/home/${res.code}`,
				});
			},
			// 根据风机状态码返回对应 class
			getColor(fjzt) {
				switch (fjzt) {
					case 0:
						return "green";
					case 1:
						return "purple";
					case 2:
						return "red";
					case 3:
						return "gray";
					case 4:
						return "orange";
					case 5:
						return "purple";
					case 6:
						return "write";
				}
			},
			// 请求服务
			requestData(showLoading) {
				this.requestWpInfo(showLoading);

			},

			// 获取场站监视数据
			requestWpInfo(showLoading) {
				let that = this;
				that.API.requestData({
					showLoading,
					method: "POST",
					subUrl: "monitor/findWpInfoBywpId",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						if (res.data) {
							that.tqmap = res.data.tqmap;
							let fjmap = [];
							let keys = ["value2", "value1", "value5", "value4", "value7", "value6", "value9"];
							let Powertrend = {
								// 图表所用单位
								units: ["(万KWh)", "(风速)"],
								value: [{
										title: "实发功率",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "理论功率",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "保证功率",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "4小时预测功率",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "24小时预测功率",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "平均风速",
										smooth: true, // 使用单位
										value: [],
									},
									{
										title: "最有功率律",
										smooth: true, // 使用单位
										value: [],
									},
								],
							};

							let dayPieChartKey = [{
									key: "gzssdl",
									name: "故障损失电量",
								},
								{
									key: "jxssdl",
									name: "检修损失电量",
								},
								{
									key: "qfssdl",
									name: "性能损失电量",
								},
								{
									key: "slssdl",
									name: "受累损失电量",
								},
								{
									key: "xdssdl",
									name: "限电损失电量",
								},
							];

							// 饼图 1 数据
							let dayData = [];

							// 饼图 2 数据
							let monthData = [];

							// 饼图 2 数据
							let yearData = [];

							res.data.fjjzmap.fjmap[0].forEach((ele) => {
								fjmap.push({
									tag: ele.wtnum,
									wtId: ele.wtId,
									wpId: ele.wpId,
									color: that.getColor(ele.fjzt),
								});
							});

							keys.forEach((key, keyIndex) => {
								res.data.glvos.forEach((ele) => {
									Powertrend.value[keyIndex].value.push({
										text: new Date(ele.time).formatDate("hh:mm"),
										value: ele[key],
									});
								});
							});

							dayPieChartKey.forEach((ele) => {
								dayData.push({
									value: res.data.wxssmap["r" + ele.key],
									unit: "万kwh",
									name: ele.name,
								});

								monthData.push({
									value: res.data.wxssmap["y" + ele.key] || 0,
									unit: "万kwh",
									name: ele.name,
								});

								yearData.push({
									value: res.data.wxssmap["n" + ele.key] || 0,
									unit: "万kwh",
									name: ele.name,
								});
							});

							that.fjmap = fjmap;
							that.Powertrend = Powertrend;
							that.jczbmap = res.data.jczbmap;
							that.pieChartData = {
								dayData,
								monthData,
								yearData,
							};
						} else {
							that.fjmap = [];
							that.Powertrend = {};
							that.jczbmap = {};
							that.pieChartData = {
								dayData: [],
								monthData: [],
								yearData: [],
							};
						}

					},
				});
			},

			// 获取日度损失电量分析
			requestLoss(showLoading) {
				let that = this;
				that.API.requestData({
					showLoading,
					method: "POST",
					subUrl: "monitor/findLossWpBar",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						let dayLost = [];
						res.data.forEach((ele) => {
							dayLost.push({
								text: ele.timestr,
								value: ele.value1,
							});
						});
						that.dayLost = dayLost;
					},
				});
			},

			// 获取完成电量
			requestPower(showLoading) {
				let that = this;
				that.API.requestData({
					showLoading,
					method: "POST",
					subUrl: "monitor/findPowerWpBar",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						let data = [{
								title: "发电量",
								yAxisIndex: 0,
								value: [],
							},
							{
								title: "预测电量",
								yAxisIndex: 0,
								value: [],
							},
						];
						
						let lineData = {
						  name: "风速",
						  unit: "km",
						  data: [],
						};
						
						res.data.forEach((ele) => {
							data[0].value.push({
								text: ele.timestr,
								value: ele.value1 || 0,
							});
							data[1].value.push({
								text: ele.timestr,
								value: ele.value2 || 0,
							});
							lineData.data.push(ele.value3 || 0);
						});

						that.CompleteElectricity.data = data;
						that.CompleteElectricity.lineData = lineData;
					},
				});
			},

			// 获取月发电量对比
			requestMonthPower(showLoading) {
				let that = this;
				that.API.requestData({
					showLoading,
					method: "POST",
					subUrl: "monitor/findMonthPowerWpBar",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						
						let data = [{
								title: "月发电量",
								yAxisIndex: 0,
								value: [],
							},
							{
								title: "月预测电量",
								yAxisIndex: 0,
								value: [],
							},
						];
						let lineData = {
						  name: "风速",
						  unit: "km",
						  data: [],
						};
						
						res.data.forEach((ele) => {
							data[0].value.push({
								text: ele.timestr,
								value: ele.value1,
							});
							data[1].value.push({
								text: ele.timestr,
								value: ele.value2,
							});
							lineData.data.push(ele.value3 || 0);
						});

						that.MonthCompare.data = data;
						that.MonthCompare.lineData = lineData;
					},
				});
			},
		},

		created() {
			let that = this;
			that.wpId = that.$route.params.wpId;
			that.$nextTick(() => {
				that.getWp();
				that.requestData(false);
				that.requestLoss(false);
				that.requestPower(false);
				that.requestMonthPower(false);
				that.timmer = setInterval(() => {
					that.requestData(false);
				}, 60000);
				that.timmer2 = setInterval(() => {
					that.nowTime = new Date().formatDate("hh:mm:ss");
				}, 1000);
			});
		},

		mounted() {},

		unmounted() {
			clearInterval(this.timmer);
			clearInterval(this.timmer2);
			this.timmer = null;
			this.timmer2 = null;
		},
		watch: {
			$route(res) {
				this.wpId = res.params.wpId;
				if (res.params.wpId) {
					this.requestData(false);
					this.renderBtnActiveIndex();
				}
			},
		},
	};
</script>

<style lang="less">
	.wind-site-home {
		.first-info {
			display: flex;
		}

		.wind-site-info {
			margin-left: 0.7407vh;
			flex: 1 0 auto;
			padding: 8px;

			&>.row {
				height: 100%;
			}

			.info-item {
				text-align: center;
				flex: 1;

				.value {
					font-size: 14px;
					margin: 8px 0;
				}

				.text {
					font-size: 12px;
					color: @gray;
				}
			}
		}

		.wind-running-info {
			margin-left: 8px;
			padding: 8px;
			flex: 1 1 auto;

			&>.row {
				height: 100%;
			}

			.fengji {
				display: flex;
				align-content: center;
				flex: 0 0 auto;

				.fengji-icon {
					padding: 12px;
					border-radius: 50%;
					box-shadow: inset 1.5px -1px 1px 0px @green;

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

				.info {
					width: 60px;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.text {
						text-align: center;
						font-size: 12px;
						margin-bottom: 1.111vh;
					}

					.value {
						text-align: center;
						font-size: 24px;
					}
				}
			}

			.situation {
				flex: 1 1 auto;
				margin-left: 1.481vh;

				.row+.row {
					margin: 0;
				}

				.status {
					flex: 1;
					// width: 75px;
					display: flex;
					// align-items: center;
					justify-content: center;
					padding: 4px 0;

					svg {
						width: 18px;
						height: 18px;
						margin-right: 4px;
					}

					.text {
						font-size: 12px;
						flex: auto;
					}

					.value {
						text-align: center;
						font-size: 12px;
						padding-right: 0.741vh;
					}
				}

				.icon-status {
					.text {
						font-size: 12px;
						font-weight: 600;
					}
				}
			}
		}

		.light-matrix-panel {
			height: 100%;

			.panel-body {
				height: 100%;
			}
		}
	}

	.btn-group-tabs {
		display: flex;
		flex-direction: row;
	}
</style>