From a788587df42c5f809c6b2247b7afb2cf5d4c91eb Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 7 May 2024 15:59:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=87=8C=E6=BA=90=E7=9A=84=E8=83=BD?=
 =?UTF-8?q?=E7=AE=A1=E5=A4=A7=E5=B1=8F=E5=9F=BA=E7=A1=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_enm_ly.vue | 1198 ++++++++++++++++++++++++++
 1 file changed, 1198 insertions(+)
 create mode 100644 src/views/bigScreen/index_enm_ly.vue

diff --git a/src/views/bigScreen/index_enm_ly.vue b/src/views/bigScreen/index_enm_ly.vue
new file mode 100644
index 00000000..ee993b56
--- /dev/null
+++ b/src/views/bigScreen/index_enm_ly.vue
@@ -0,0 +1,1198 @@
+<template>
+	<div class="dashboard">
+		<header>
+			<div class="title_left"></div>
+			<h1 class="title">{{ factoryName }}</h1>
+			<h2 class="title_right">数据更新: {{ updateTime }}</h2>
+		</header>
+		<div class="left_main animate__animated animate__zoomIn">
+			<div class="panel">
+				<div class="panel_title">本月全厂主要数据</div>
+				<el-row :gutter="16" style="height: 72px; margin-top: 4px">
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/elec.png"
+								style="height: 24px; vertical-align: middle"
+							/>动力电消耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								factoryData.elec_consume
+							}}</span>
+							<span class="panel_unit">(kW·h)</span>
+						</div>
+					</el-col>
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/coal.png"
+								style="height: 24px; vertical-align: bottom"
+							/>煤粉消耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								factoryData.pcoal_consume
+							}}</span>
+							<span class="panel_unit">(t)</span>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row :gutter="16" style="height: 72px; margin-top: 4px">
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/water.png"
+								style="height: 24px; vertical-align: bottom"
+							/>工业水消耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								factoryData.water_consume
+							}}</span>
+							<span class="panel_unit">(t)</span>
+						</div>
+					</el-col>
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/cair.png"
+								style="height: 24px; vertical-align: bottom"
+							/>压缩空气消耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								factoryData.cair_consume
+							}}</span>
+							<span class="panel_unit">(t)</span>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+		<div class="model">
+			<div id="loadingScreen">
+				<el-progress
+					type="circle"
+					:percentage="loadedPercent"
+					:width="220"
+					status="warning"
+				>
+					<template #default="{ percentage }">
+						<div
+							style="
+								font-size: 30px;
+								color: white;
+								font-weight: bold;
+							"
+						>
+							{{ percentage }}%
+						</div>
+						<div
+							style="
+								font-size: 18px;
+								color: white;
+								margin-top: 10px;
+							"
+						>
+							工厂模型加载中
+						</div>
+					</template>
+				</el-progress>
+				<!-- 工厂模型加载中.....{{ loadedPercent }}% -->
+			</div>
+			<Cesium ref="cesiumDiv" />
+			<div class="bottom_enp"></div>
+			<!-- <canvas id="renderCanvas"></canvas> -->
+		</div>
+		<div class="right_main">
+			<div class="panel">
+				<div class="panel_title">
+					今日工段主要数据-{{ activeSectionName }}
+				</div>
+				<el-row :gutter="16" style="height: 72px; margin-top: 4px">
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/elec.png"
+								style="height: 24px; vertical-align: middle"
+							/>单位产品电耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								sectionData.elec_consume_unit
+							}}</span>
+							<span class="panel_unit">(kW·h)</span>
+						</div>
+					</el-col>
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/total_production.png"
+								style="height: 24px; vertical-align: middle"
+							/>产品产量
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								sectionData.total_production
+							}}</span>
+							<span class="panel_unit">(t)</span>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row :gutter="16" style="height: 72px; margin-top: 4px">
+					<el-col :span="12" class="panel_item">
+						<div class="panel_label">
+							<img
+								src="img/run_rate.png"
+								style="height: 24px; vertical-align: middle"
+							/>
+							运转率
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								sectionData.run_rate
+							}}</span>
+							<span class="panel_unit">(%)</span>
+						</div>
+					</el-col>
+					<el-col :span="12" class="panel_item" v-if="showKgcet">
+						<div class="panel_label">
+							<img
+								src="img/coal.png"
+								style="height: 24px; vertical-align: bottom"
+							/>单位产品标煤耗
+						</div>
+						<div class="pannel_number">
+							<span class="panel_value">{{
+								sectionData.coal_consume_unit
+							}}</span>
+							<span class="panel_unit">(kgce/t)</span>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+		<div class="dropdown">
+			<div
+				class="dropdown-item"
+				v-for="(val, index) in sectionNames"
+				:key="val"
+				@click="handleSectionClick(val, index)"
+				:class="{ active: activeSection === index }"
+			>
+				{{ val }}
+			</div>
+		</div>
+		<div class="left_other animate__animated animate__backInLeft">
+			<div class="panel">
+				<div class="panel_title">动力电消耗趋势图</div>
+				<div class="chart" id="chart1"></div>
+			</div>
+			<div class="panel">
+				<div class="panel_title">工业水/原煤消耗趋势图</div>
+				<div class="chart" id="chart2"></div>
+			</div>
+			<div class="panel">
+				<div class="panel_title">压缩空气消耗趋势图</div>
+				<div class="chart" id="chart3"></div>
+			</div>
+		</div>
+		<div class="right_other">
+			<div class="panel">
+				<div class="panel_title">单位产品电耗趋势图</div>
+				<div class="chart" id="chart4"></div>
+			</div>
+			<div class="panel">
+				<div class="panel_title">产品产量趋势图</div>
+				<div class="chart" id="chart5"></div>
+			</div>
+			<div class="panel">
+				<div class="panel_title">运转率趋势图</div>
+				<div class="chart" id="chart6"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import tool from "@/utils/tool";
+import config from "@/config";
+import * as echarts from "echarts";
+import Cesium from "./cesiumtest.vue";
+import "animate.css";
+export default {
+	components: {
+		Cesium,
+	},
+	data() {
+		return {
+			query: {
+				year_s: 2023,
+				month_s: 8,
+				type: "month_s",
+				page: 0,
+			},
+			factoryData: {},
+			sectionData: {},
+			nowDay: 1,
+			factoryName: "0",
+			initialAlpha: -Math.PI / 0.89,
+			initialBeta: Math.PI / 3.3,
+			initialRadius: 18,
+			initialTarget: null,
+			// scene: null,
+			// myui: null,
+			is_mainviewpoint: false,
+			resizeTimeout: null,
+			// engine: null,
+			loadedPercent: 0,
+			sectionNames: {
+				0: "石灰石破碎",
+				1: "原料磨",
+				2: "回转窑",
+				3: "余热发电",
+				4: "煤磨",
+			},
+			showKgcet: true,
+			currentLightMesh: null,
+			activeSection: 2,
+			activeSectionName: "回转窑",
+			updateTime: "",
+			basicOption: {
+				color: "rgb(1,235,239)",
+				backgroundColor: "",
+				xAxis: {
+					data: ["一月", "二月", "三月", "四月", "五月", "六月"],
+				},
+				yAxis: { type: "value" },
+				series: [
+					{
+						name: "销量",
+						type: "bar",
+						barwidth: 10,
+						label: {
+							show: true,
+							position: "top",
+						},
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(
+								0,
+								0,
+								0,
+								1,
+								[
+									{ offset: 0, color: "#83bff6" },
+									{ offset: 0.5, color: "#188df0" },
+									{ offset: 1, color: "#188df0" },
+								]
+							),
+						},
+						emphasis: {
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{ offset: 0, color: "#2378f7" },
+										{ offset: 0.7, color: "#2378f7" },
+										{ offset: 1, color: "#83bff6" },
+									]
+								),
+							},
+						},
+						data: [],
+					},
+				],
+				grid: {
+					// 让图表占满容器
+					top: "10%",
+					left: "12%",
+					right: "0px",
+					bottom: "15%",
+				},
+			},
+			year_start: 0,
+			end_time: "",
+			start_time: "",
+			xAxisData: [],
+			arrMonth: [],
+			chart1Option: {},
+			chart2Option: {},
+			chart3Option: {},
+			chart4Option: {},
+			chart5Option: {},
+			chart6Option: {},
+			seriesData1: [0, 0, 0, 0, 0, 0],
+			seriesData2: [0, 0, 0, 0, 0, 0],
+			seriesData2_2: [0, 0, 0, 0, 0, 0],
+			seriesData3: [0, 0, 0, 0, 0, 0],
+			seriesData3_2: [0, 0, 0, 0, 0, 0],
+			seriesData4: [0, 0, 0, 0, 0, 0],
+			seriesData5: [0, 0, 0, 0, 0, 0],
+			seriesData6: [0, 0, 0, 0, 0, 0],
+			path: "ws://49.232.14.174:2226/ws/my/?token=",
+			ws: null,
+			mgroupValues: {
+				石灰石破碎: { total: "0", elec: "0" },
+				原料磨: { total: "0", elec: "0" },
+				煤磨: { total: "0", elec: "0" },
+				回转窑: { total: "0", elec: "0" },
+				余热发电: { total: "0", elec: "0" },
+			},
+			sectionDatas: {
+				回转窑: {
+					elec_consume_unit: 29,
+					total_production: 2541,
+					coal_consume_unit: 105,
+					run_rate: 100,
+					charts_ele: [30, 29, 28, 31, 28, 16],
+					charts_prod: [2530, 2698, 2600, 2550, 2610, 2000],
+					charts_rate: [100, 100, 100, 100, 100, 100],
+				},
+				石灰石破碎: {
+					elec_consume_unit: 4,
+					total_production: 1523,
+					coal_consume_unit: "",
+					run_rate: 100,
+					charts_ele: [3, 6, 4, 7, 5, 3],
+					charts_prod: [2015, 2698, 2904, 2550, 2610, 1200],
+					charts_rate: [100, 100, 100, 100, 100, 100],
+				},
+				原料磨: {
+					elec_consume_unit: 15,
+					total_production: 3230,
+					coal_consume_unit: "",
+					run_rate: 100,
+					charts_ele: [16, 15, 17, 15, 16, 10],
+					charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
+					charts_rate: [100, 100, 100, 100, 100, 100],
+				},
+				余热发电: {
+					elec_consume_unit: 35,
+					total_production: 3063,
+					coal_consume_unit: "",
+					run_rate: 100,
+					charts_ele: [35, 37, 36, 37, 36, 20],
+					charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
+					charts_rate: [100, 100, 100, 100, 100, 100],
+				},
+				煤磨: {
+					elec_consume_unit: 2,
+					total_production: 1000,
+					coal_consume_unit: "",
+					run_rate: 100,
+					charts_ele: [1, 3, 2, 3, 2, 1],
+					charts_prod: [1052, 1462, 1268, 1389, 1156, 800],
+					charts_rate: [100, 100, 100, 100, 100, 100],
+				},
+			},
+		};
+	},
+	mounted() {
+		var that = this;
+		this.initCharts();
+		this.addListener();
+		let myDate = new Date();
+		let year = myDate.getFullYear();
+		let month = myDate.getMonth() + 1;
+		let day = myDate.getDate();
+		that.nowDay = day;
+		that.query.year_s = year;
+		that.query.month_s = month;
+		that.updateTime =
+			myDate.getFullYear() +
+			"-" +
+			(myDate.getMonth() + 1) +
+			"-" +
+			myDate.getDate() +
+			" " +
+			myDate.getHours() +
+			":" +
+			myDate.getMinutes() +
+			":" +
+			myDate.getSeconds();
+		this.initDomStyle();
+		this.factoryName = that.$TOOL.data.get("BASE_INFO").base.base_name;
+		this.$nextTick(() => {
+			this.$API.enm.enstat
+				.req({ type: "month_s", month_s: month, year_s: year, page: 0 })
+				.then((res1) => {
+					console.log("工段数据：", res1);
+					res1.forEach((item) => {
+						if (item.mgroup_name == "石灰石破碎") {
+							that.mgroupValues.石灰石破碎.total =
+								item.total_production + "";
+							that.mgroupValues.石灰石破碎.elec =
+								item.elec_consume_unit + "";
+						} else if (item.mgroup_name == "原料磨") {
+							that.mgroupValues.原料磨.total =
+								item.total_production + "";
+							that.mgroupValues.原料磨.elec =
+								item.elec_consume_unit + "";
+						} else if (item.mgroup_name == "煤磨") {
+							that.mgroupValues.煤磨.total =
+								item.total_production + "";
+							that.mgroupValues.煤磨.elec =
+								item.elec_consume_unit + "";
+						} else if (item.mgroup_name == "回转窑") {
+							that.mgroupValues.回转窑.total =
+								item.total_production + "";
+							that.mgroupValues.回转窑.elec =
+								item.elec_consume_unit + "";
+						} else if (item.mgroup_name == "余热发电") {
+							that.mgroupValues.余热发电.total =
+								item.total_production + "";
+							that.mgroupValues.余热发电.elec =
+								item.elec_consume_unit + "";
+						}
+					});
+				});
+			setTimeout(function () {
+				// that.initFactory();
+			}, 1000);
+		});
+		let month1 = month > 9 ? month : "0" + month;
+		let end_time = year + "-" + month1 + "-01 10:00:00";
+		let year_s = year;
+		if (month < 6) {
+			year_s = year - 1;
+		}
+		let arr = [],
+			xAxisData = [];
+		let monthItem = month;
+		for (let i = 0; i < 6; i++) {
+			arr.push(monthItem);
+			if (monthItem === 1) {
+				monthItem = 12;
+			} else {
+				monthItem--;
+			}
+		}
+		arr.reverse();
+		for (let i = 0; i < 6; i++) {
+			let item = arr[i] + "月";
+			xAxisData.push(item);
+		}
+		// 模拟数据
+		xAxisData = ["1.19", "1.20", "1.21", "1.22", "1.23", "1.24"];
+		let month0 = arr[0] > 9 ? arr[0] : "0" + arr[0];
+		let start_time = year_s + "-" + month0 + "-01 10:00:00";
+		that.arrMonth = arr;
+		that.year_start = year_s;
+		that.xAxisData = xAxisData;
+		that.start_time = start_time;
+		that.end_time = end_time;
+		this.getFactoryData();
+		this.getSectionData();
+		this.getDayData();
+		// this.init();
+		setTimeout(() => {
+			this.getMockData();
+		}, 1000);
+	},
+	beforeUnmount() {
+		// 性能优化
+		const canvas = document.getElementById("renderCanvas");
+		if (canvas) {
+			canvas.parentNode.removeChild(canvas);
+		}
+	},
+	methods: {
+		// 动态绑定Class
+		bindClass(type) {
+			let classInfo = {
+				socketDom: true,
+				redColor: false,
+				orangeColor: false,
+				yellowColor: false,
+				blueColor: true,
+			};
+			if (type == "") {
+				classInfo.redColor = true;
+			}
+			return classInfo;
+		},
+		init() {
+			var that = this;
+			if (typeof WebSocket === "undefined") {
+				alert("您的浏览器不支持socket");
+			} else {
+				this.ws = new WebSocket(this.path + tool.data.get("TOKEN"));
+				//监听是否连接成功
+				this.ws.onopen = () => {
+					// console.log("socket连接成功");
+					setTimeout(() => {
+						that.ws.send(JSON.stringify({ type: "event" }));
+					}, 500);
+				};
+
+				//接听服务器发回的信息并处理展示
+				this.ws.onmessage = (msg) => {
+					let data = JSON.parse(msg.data);
+					console.log(data);
+					if (data.type == "event") {
+						that.bindClass();
+					}
+					if (data.type == "ticket") {
+					}
+					if (data.type == "remaind") {
+					}
+				};
+				// 监听并处理error事件
+				this.ws.onerror = function (error) {
+					console.log("ws断开,尝试重连");
+					// setTimeout(() => {
+					//   this.ws = null;
+					//   this.init()
+					// }, 5000)
+				};
+			}
+		},
+		getMessage(msg) {
+			console.log(msg);
+		},
+		close() {
+			if (this.ws) {
+				this.ws.close();
+				this.ws = null;
+				console.log("socket已经关闭");
+			}
+		},
+		compare(property) {
+			return function (a, b) {
+				return a[property] - b[property];
+			};
+		},
+		getMockData() {
+			let that = this;
+			this.factoryData = {
+				elec_consume: 10983267,
+				pcoal_consume: 9500,
+				water_consume: 12825,
+				cair_consume: 676534,
+			};
+			this.mgroupValues = {
+				电石渣: { total: 1523, elec: 4 },
+				原料磨: { total: 3230, elec: 15 },
+				煤磨: { total: 420, elec: 36 },
+				回转窑: { total: 2541, elec: 29 },
+				水泥磨: { total: 3063, elec: 35 },
+				水泥包装: { total: 1000, elec: 2 },
+			};
+			this.sectionData = this.sectionDatas[this.activeSectionName];
+			setInterval(() => {
+				this.factoryData.elec_consume += Math.floor(Math.random() * 10);
+				this.factoryData.pcoal_consume += Math.floor(
+					Math.random() * 10
+				);
+				this.factoryData.water_consume += Math.floor(
+					Math.random() * 10
+				);
+				this.factoryData.cair_consume += Math.floor(Math.random() * 10);
+				this.sectionDatas[this.activeSectionName].total_production +=
+					Math.floor(Math.random() * 10);
+				this.sectionDatas[this.activeSectionName].elec_consume_unit +=
+					Math.floor(Math.random() * 1);
+				this.sectionDatas[this.activeSectionName].charts_ele[5] =
+					this.sectionDatas[this.activeSectionName].elec_consume_unit;
+				this.sectionDatas[this.activeSectionName].charts_prod[5] =
+					this.sectionDatas[this.activeSectionName].total_production;
+				let data = new Date();
+				that.updateTime =
+					data.getFullYear() +
+					"-" +
+					(data.getMonth() + 1) +
+					"-" +
+					data.getDate() +
+					" " +
+					data.getHours() +
+					":" +
+					data.getMinutes() +
+					":" +
+					data.getSeconds();
+			}, 10000);
+		},
+
+		getFactoryData() {
+			var that = this;
+			that.$API.enm.enstat2.req(that.query).then((res) => {
+				if (res.length > 0) {
+					that.factoryData = res[0];
+				} else {
+				}
+			});
+			//图表数据
+			let obj = {};
+			obj.type = "month_s";
+			obj.start_time = that.start_time;
+			obj.end_time = that.end_time;
+			obj.page = 0;
+			this.$API.enm.enstat2.req(obj).then((res1) => {
+				let list0 = res1.sort(this.compare("month_s"));
+				let list = list0.sort(this.compare("year_s"));
+				let seriesData1 = [0, 0, 0, 0, 0, 0],
+					seriesData2 = [0, 0, 0, 0, 0, 0],
+					seriesData3 = [0, 0, 0, 0, 0, 0],
+					seriesData3_2 = [0, 0, 0, 0, 0, 0];
+				list.forEach((item) => {
+					let index = that.arrMonth.indexOf(item.month_s);
+					seriesData1[index] = Number(item.elec_consume);
+					seriesData2[index] = Number(item.pcoal_consume);
+					seriesData3[index] = Number(item.water_consume);
+					seriesData3_2[index] = Number(item.cair_consume);
+				});
+				that.seriesData1 = seriesData1;
+				that.seriesData2 = seriesData2;
+				that.seriesData3 = seriesData3;
+				that.seriesData3_2 = seriesData3_2;
+				// 模拟数据
+				that.seriesData1 = [
+					303468, 303524, 312095, 305684, 307468, 223420,
+				];
+				that.chart1Option.yAxis.min = 200000;
+				that.seriesData2 = [425, 430, 436, 430, 443, 340];
+				that.seriesData2_2 = [586, 560, 576, 555, 543, 205];
+				that.chart2Option.yAxis.min = 100;
+				that.seriesData3 = [20456, 24783, 21430, 22354, 25531, 15687];
+				// that.seriesData3 = [586, 560, 576, 555, 543, 205]
+				that.chart3Option.yAxis.min = 15000;
+				that.initCharts();
+			});
+		},
+		getSectionData() {
+			var that = this;
+			let obj = {};
+			obj.type = "month_s";
+			obj.start_time = that.start_time;
+			obj.end_time = that.end_time;
+			obj.mgroup__name = that.activeSectionName;
+			obj.page = 0;
+			this.$API.enm.enstat.req(obj).then((res) => {
+				let list0 = res.sort(this.compare("month_s"));
+				let list = list0.sort(this.compare("year_s"));
+				let seriesData4 = [0, 0, 0, 0, 0, 0],
+					seriesData5 = [0, 0, 0, 0, 0, 0],
+					seriesData6 = [0, 0, 0, 0, 0, 0];
+				list.forEach((item) => {
+					let index = that.arrMonth.indexOf(item.month_s);
+					seriesData4[index] = Number(item.elec_consume_unit);
+					seriesData5[index] = Number(item.total_production);
+					seriesData6[index] = Number(item.run_rate);
+				});
+				that.seriesData4 = seriesData4;
+				that.seriesData5 = seriesData5;
+				that.seriesData6 = seriesData6;
+				// 模拟数据
+				that.seriesData4 = this.sectionDatas.回转窑.charts_ele;
+				that.seriesData5 = this.sectionDatas.回转窑.charts_prod;
+				that.seriesData6 = this.sectionDatas.回转窑.charts_rate;
+				// that.chart4Option.yAxis.min = 200000;
+				// that.seriesData5 = [425, 430, 436, 430, 443, 340];
+				// that.chart5Option.yAxis.min = 300;
+				// that.seriesData6 = [586, 560, 576, 555, 543, 205]
+				// that.chart6Option.yAxis.min = 500;
+				that.initCharts1();
+			});
+		},
+		getDayData() {
+			var that = this;
+			let obj = {};
+			obj.type = "day_s";
+			obj.year_s = that.query.year_s;
+			obj.month_s = that.query.month_s;
+			obj.day_s = that.nowDay;
+			obj.mgroup__name = that.activeSectionName;
+			obj.page = 0;
+			this.$API.enm.enstat.req(obj).then((res) => {
+				that.sectionData = res[0];
+			});
+		},
+		initCharts() {
+			let that = this;
+			function deepCopy(obj) {
+				return JSON.parse(JSON.stringify(obj));
+			}
+			// 初始化所有表格
+			that.basicOption.xAxis.data = that.xAxisData;
+			that.chart1Option = deepCopy(that.basicOption);
+			that.chart1Option.series = [
+				{
+					name: "电耗",
+					type: "bar",
+					barWidth: 15,
+					label: {
+						show: true,
+						position: "top",
+					},
+					emphasis: {
+						focus: "series",
+					},
+					data: that.seriesData1,
+				},
+			];
+			that.setChart("chart1", that.chart1Option);
+			this.chart2Option = deepCopy(that.basicOption);
+			this.chart2Option.series[0].type = "line";
+			(this.chart2Option.series[1] = {
+				name: "工业水",
+				type: "line",
+				barWidth: 15,
+				label: {
+					show: true,
+					position: "top",
+				},
+				emphasis: {
+					focus: "series",
+				},
+				data: that.seriesData2_2,
+			}),
+				(this.chart2Option.series[0].data = that.seriesData2);
+			this.setChart("chart2", this.chart2Option);
+			this.chart3Option = deepCopy(that.basicOption);
+			this.chart3Option.series = [
+				{
+					name: "压缩空气",
+					type: "bar",
+					barWidth: 15,
+					emphasis: {
+						focus: "series",
+					},
+					data: that.seriesData3,
+				},
+			];
+			this.setChart("chart3", this.chart3Option);
+		},
+		initCharts1() {
+			let that = this;
+			function deepCopy(obj) {
+				return JSON.parse(JSON.stringify(obj));
+			}
+			that.basicOption.xAxis.data = that.xAxisData;
+			this.chart4Option = deepCopy(that.basicOption);
+			this.chart4Option.series[0].type = "bar";
+			this.chart4Option.series[0].barWidth = 20;
+			this.chart4Option.series[0].data = that.seriesData4;
+			this.setChart("chart4", this.chart4Option);
+			this.chart5Option = deepCopy(that.basicOption);
+			this.chart5Option.series[0].type = "line";
+			this.chart5Option.series[0].data = that.seriesData5;
+			this.setChart("chart5", this.chart5Option);
+			this.chart6Option = deepCopy(that.basicOption);
+			this.chart6Option.series[0].type = "bar";
+			this.chart6Option.series[0].barWidth = 20;
+			this.chart6Option.series[0].data = that.seriesData6;
+			this.setChart("chart6", this.chart6Option);
+		},
+		addListener() {
+			var that = this;
+			window.addEventListener("resize", function () {
+				// 如果已经有 resizeTimeout，清除它
+				if (this.resizeTimeout) {
+					clearTimeout(this.resizeTimeout);
+				}
+				// 设置一个新的 resizeTimeout，延迟调整样式
+				this.resizeTimeout = setTimeout(function () {
+					that.initDomStyle();
+				}, 300); // 延迟 300 毫秒，可以根据需要调整
+			});
+		},
+		initDomStyle() {
+			// 获取窗口的总高度
+			var windowHeight = window.innerHeight;
+			var windowWidth = window.innerWidth;
+			// 获取目标元素
+			var dashboard = document.getElementsByClassName("dashboard")[0];
+			var left_main = document.getElementsByClassName("left_main")[0];
+			var left_other = document.getElementsByClassName("left_other")[0];
+			var right_main = document.getElementsByClassName("right_main")[0];
+			var right_other = document.getElementsByClassName("right_other")[0];
+			var model = document.getElementsByClassName("model")[0];
+			if (windowWidth > 960) {
+				dashboard.style.overflow = "hidden";
+				// 设置目标元素的高度
+				left_main.style.position = "absolute";
+				left_main.style.width = "22%";
+				right_main.style.position = "absolute";
+				right_main.style.width = "22%";
+				left_other.style.position = "absolute";
+				left_other.style.width = "22%";
+				right_other.style.position = "absolute";
+				right_other.style.width = "22%";
+				model.style.position = "absolute";
+				model.style.height = windowHeight - 3 + "px";
+				model.style.top = 0;
+				var chartHeight = (windowHeight - 400) / 3 + "px";
+				var charts = document.getElementsByClassName("chart");
+				for (var i = 0; i < charts.length; i++) {
+					var chart = charts[i];
+					chart.style.height = chartHeight;
+				}
+			} else {
+				dashboard.style.overflow = "auto";
+				var chartHeight = windowWidth * 0.6;
+				left_main.style.position = "static";
+				left_main.style.width = "100%";
+				right_main.style.position = "static";
+				right_main.style.width = "100%";
+				left_other.style.position = "static";
+				left_other.style.width = "100%";
+				right_other.style.position = "static";
+				right_other.style.width = "100%";
+				model.style.position = "relative";
+				model.style.height = chartHeight;
+				var charts = document.getElementsByClassName("chart");
+				for (var i = 0; i < charts.length; i++) {
+					var chart = charts[i];
+					chart.style.height = chartHeight;
+				}
+			}
+			if (this.engine != null) {
+				this.engine.resize();
+			}
+			this.resizeChart("chart1");
+			this.resizeChart("chart2");
+			this.resizeChart("chart3");
+			this.resizeChart("chart4");
+			this.resizeChart("chart5");
+			this.resizeChart("chart6");
+		},
+		resizeChart(name) {
+			// 根据name resize chart
+			var myChart = echarts.getInstanceByDom(
+				document.getElementById(name)
+			);
+			if (myChart != undefined) {
+				// console.log(name + ' :resize')
+				myChart.resize();
+			}
+		},
+		setChart(name, option = null) {
+			// 根据name 渲染数据, option需填写，否则option为模拟数据
+			var myChart = echarts.getInstanceByDom(
+				document.getElementById(name)
+			);
+			if (myChart == undefined) {
+				myChart = echarts.init(document.getElementById(name), "dark", {
+					renderer: "svg",
+				});
+			}
+			if (option == null) {
+				option = Object.assign({}, this.basicOption);
+			}
+
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) {}
+			}, 500);
+		},
+		handleSectionClick(val, index) {
+			let that = this;
+			this.activeSectionName = val;
+			this.activeSection = index;
+			if (val == "回转窑") {
+				this.showKgcet = true;
+			} else {
+				this.showKgcet = false;
+			}
+			let obj = {};
+			obj.type = "month_s";
+			obj.start_time = that.start_time;
+			obj.end_time = that.end_time;
+			obj.mgroup__name = val;
+			obj.page = 0;
+			this.$API.enm.enstat.req(obj).then((res) => {
+				let list0 = res.sort(this.compare("month_s"));
+				let list = list0.sort(this.compare("year_s"));
+				let seriesData4 = [0, 0, 0, 0, 0, 0],
+					seriesData5 = [0, 0, 0, 0, 0, 0],
+					seriesData6 = [0, 0, 0, 0, 0, 0];
+				list.forEach((item) => {
+					let index = that.arrMonth.indexOf(item.month_s);
+					seriesData4[index] = Number(item.elec_consume_unit);
+					seriesData5[index] = Number(item.total_production);
+					seriesData6[index] = Number(item.run_rate);
+				});
+				that.seriesData4 = seriesData4;
+				that.seriesData5 = seriesData5;
+				that.seriesData6 = seriesData6;
+				//模拟数据
+				that.seriesData4 =
+					this.sectionDatas[this.activeSectionName].charts_ele;
+				that.seriesData5 =
+					this.sectionDatas[this.activeSectionName].charts_prod;
+				that.seriesData6 =
+					this.sectionDatas[this.activeSectionName].charts_rate;
+				that.initCharts1();
+				const element_main = document.querySelector(".right_main");
+				element_main.classList.add(
+					"animate__animated",
+					"animate__fadeIn"
+				);
+				element_main.addEventListener("animationend", () => {
+					// 移除属性
+					element_main.classList.remove("animate__fadeIn");
+				});
+				const element = document.querySelector(".right_other");
+				element.classList.add("animate__animated", "animate__fadeIn");
+				element.addEventListener("animationend", () => {
+					// 移除属性
+					element.classList.remove("animate__fadeIn");
+				});
+				// const sectionUI = this.myui.getControlByName(val + "_rect");
+				// sectionUI.onPointerDownObservable.notifyObservers();
+			});
+		},
+		getMgroupChartData(name) {
+			let that = this;
+			this.sectionData = this.sectionDatas[this.activeSectionName];
+			//模拟数据
+			that.seriesData4 =
+				this.sectionDatas[this.activeSectionName].charts_ele;
+			that.seriesData5 =
+				this.sectionDatas[this.activeSectionName].charts_prod;
+			that.seriesData6 =
+				this.sectionDatas[this.activeSectionName].charts_rate;
+			that.initCharts1();
+			console.log(this.sectionData, this.activeSectionName);
+			// 模拟数据
+			// var that = this;
+			// let obj = {};
+			// obj.type = 'month_s';
+			// obj.start_time = that.start_time;
+			// obj.end_time = that.end_time;
+			// obj.mgroup__name = name;
+			// obj.page = 0;
+			// this.$API.enm.enstat.req(obj).then((res) => {
+			//   let list0 = res.sort(this.compare('month_s'));
+			//   let list = list0.sort(this.compare('year_s'));
+			//   let seriesData4 = [0, 0, 0, 0, 0, 0],
+			//     seriesData5 = [0, 0, 0, 0, 0, 0],
+			//     seriesData6 = [0, 0, 0, 0, 0, 0];
+			//   list.forEach(item => {
+			//     let index = that.arrMonth.indexOf(item.month_s);
+			//     seriesData4[index] = Number(item.elec_consume_unit)
+			//     seriesData5[index] = Number(item.total_production)
+			//     seriesData6[index] = Number(item.run_rate)
+			//   })
+			//   that.seriesData4 = seriesData4;
+			//   that.seriesData5 = seriesData5;
+			//   that.seriesData6 = seriesData6;
+			//   that.initCharts1();
+			// })
+		},
+	},
+	unmounted() {
+		this.close();
+	},
+};
+</script>
+<style scoped>
+.dashboard {
+	background-color: black;
+	/* background-color: #0b2e4a; */
+	font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC",
+		"Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue",
+		Helvetica, Arial, sans-serif;
+}
+
+header {
+	position: relative;
+	z-index: 10;
+	height: 50px;
+	/* 调整头部高度 */
+	background-image: url("/public/img/header.png");
+	/* 替换为实际的背景图片路径 */
+	background-size: cover;
+	background-position: center;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.title_left {
+	flex: 1;
+}
+
+.title {
+	flex: 1;
+	text-align: center;
+	color: white;
+	font-size: 24px;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.title_right {
+	flex: 1;
+	font-size: 20px;
+	color: white;
+	text-align: right;
+}
+
+.model {
+	top: 0;
+	width: 100%;
+	background-image: url("/public/img/bj.png");
+	background-size: cover;
+}
+
+#renderCanvas {
+	width: 100%;
+	height: 100%;
+}
+
+#loadingScreen {
+	position: absolute;
+	width: 100%;
+	top: 260px;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30px;
+}
+
+.left_main,
+.right_main {
+	z-index: 10;
+	position: absolute;
+	top: 40px;
+	width: 20%;
+}
+
+.right_main {
+	right: 0;
+}
+
+.left_other,
+.right_other {
+	position: absolute;
+	top: 240px;
+	width: 20%;
+}
+
+.right_other {
+	right: 0;
+}
+
+.panel {
+	padding: 4px 8px;
+	overflow: auto;
+	background: linear-gradient(#99fffe, #99fffe) left -3px top 0,
+		linear-gradient(#99fffe, #99fffe) left -3px top -3px,
+		linear-gradient(#99fffe, #99fffe) right -3px top 0,
+		linear-gradient(#99fffe, #99fffe) right -3px top -3px,
+		linear-gradient(#99fffe, #99fffe) left -3px bottom 0,
+		linear-gradient(#99fffe, #99fffe) left -3px bottom -3px,
+		linear-gradient(#99fffe, #99fffe) right -3px bottom 0,
+		linear-gradient(#99fffe, #99fffe) right -3px bottom -3px;
+	background-color: rgba(0, 34, 51, 0.5);
+	background-repeat: no-repeat;
+	background-size: 20px 20px, 20px 20px;
+	background-size: 3px 16px, 16px 3px;
+	border: 1px solid transparent;
+	margin: 6px 6px;
+}
+
+.panel_title {
+	height: 30px;
+	margin-bottom: 4px;
+	font-size: 18px;
+	font-weight: bold;
+	color: #fff;
+}
+
+.panel_item {
+	color: #fff;
+	padding: 6px;
+	background: linear-gradient(
+		40deg,
+		rgba(11, 101, 140, 0.451),
+		rgba(0, 34, 48, 0.335)
+	);
+}
+
+.panel_label {
+	font-size: 16px;
+	margin-bottom: 6px;
+}
+
+.pannel_number {
+	position: relative;
+}
+
+.panel_value {
+	padding-left: 1em;
+	font-size: 20px;
+	font-weight: bold;
+	text-align: right;
+}
+
+.panel_unit {
+	right: 5px;
+	color: #aebfe9;
+	font-size: 12px;
+	text-align: right;
+	position: absolute;
+}
+
+.chart {
+	width: 100%;
+	height: 220px;
+}
+
+.dropdown {
+	/* top: 20%;
+    font-size: 18px;
+    right: 22%;
+    position: absolute; */
+	bottom: 3%;
+	font-size: 18px;
+	left: 50%;
+	position: absolute;
+	transform: translateX(-50%);
+}
+
+/* .dropdown-item {
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    color: white;
+    background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 25, 36, 0.335));
+    border-radius: 5%;
+    margin-bottom: 6px;
+    border: 1px solid  #99fffe;
+  }
+*/
+.dropdown-item {
+	text-decoration: none;
+	display: inline-block;
+	color: white;
+	width: 8vw;
+	height: 3.4vw;
+	font-size: 1vw;
+	text-align: center;
+	background: url(./../../../public/img/menu.png) no-repeat;
+	background-size: 100%;
+	line-height: 3.7vw;
+	margin: 0 0.1vw 0.1vw 0.1vw;
+}
+
+.dropdown-item:hover,
+.dropdown-item.active {
+	/* background-color: #ddd; */
+	width: 8.2vw;
+	height: 3.5vw;
+	font-size: 1vw;
+	line-height: 3.7vw;
+	margin: 0;
+	text-decoration: none;
+	display: inline-block;
+	color: white;
+	text-align: center;
+	background: url(./../../../public/img/menu_active.png) no-repeat;
+	background-size: 100%;
+}
+</style>