From b4a6e3d811e49f670ec356d45009f64aea14e0d3 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 10:02:37 +0800
Subject: [PATCH 01/11] =?UTF-8?q?fix:=E7=94=9F=E4=BA=A7=E6=8A=A5=E5=91=8Ar?=
 =?UTF-8?q?eport=E4=B8=AD=E5=9B=BE=E6=A0=87=E9=A2=9C=E8=89=B2=E5=8F=8A?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AF=B9=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/enm_cogeneration/report.vue |   4 +-
 src/views/enm_limestone/report.vue    |   4 +-
 src/views/enm_rmbase/report.vue       | 222 +++-----------------------
 3 files changed, 26 insertions(+), 204 deletions(-)

diff --git a/src/views/enm_cogeneration/report.vue b/src/views/enm_cogeneration/report.vue
index 20da4af1..4d482a59 100644
--- a/src/views/enm_cogeneration/report.vue
+++ b/src/views/enm_cogeneration/report.vue
@@ -298,7 +298,7 @@ let yAxis = [
 		axisLine: {
 			show: true,
 			lineStyle: {
-				color: colors[2],
+				color: colors[3],
 			},
 		},
 		axisLabel: {
@@ -313,7 +313,7 @@ let yAxis = [
 		axisLine: {
 			show: true,
 			lineStyle: {
-				color: colors[4],
+				color: colors[2],
 			},
 		},
 		axisLabel: {
diff --git a/src/views/enm_limestone/report.vue b/src/views/enm_limestone/report.vue
index 1f329d49..a540ff70 100644
--- a/src/views/enm_limestone/report.vue
+++ b/src/views/enm_limestone/report.vue
@@ -279,13 +279,13 @@ let yAxis = [
 	},
 	{
 		type: "value",
-		name: "分布电耗(KW.h)",
+		name: "分布电耗(KW.h/t)",
 		position: "right",
 		alignTicks: true,
 		axisLine: {
 			show: true,
 			lineStyle: {
-				color: colors[3],
+				color: colors[1],
 			},
 		},
 		axisLabel: {
diff --git a/src/views/enm_rmbase/report.vue b/src/views/enm_rmbase/report.vue
index d458b86e..932cf244 100644
--- a/src/views/enm_rmbase/report.vue
+++ b/src/views/enm_rmbase/report.vue
@@ -279,10 +279,10 @@ let yAxis = [
 	},
 	{
 		type: "value",
-		name: "运转率 (%)",
-		position: "right",
+		name: "台时产量（t/h）",
+		position: "left",
 		alignTicks: true,
-		offset: 80,
+		offset: 70,
 		axisLine: {
 			show: true,
 			lineStyle: {
@@ -295,9 +295,10 @@ let yAxis = [
 	},
 	{
 		type: "value",
-		name: "分布电耗(KW.h/t)",
+		name: "运转率 (%)",
 		position: "right",
 		alignTicks: true,
+		offset: 80,
 		axisLine: {
 			show: true,
 			lineStyle: {
@@ -310,10 +311,9 @@ let yAxis = [
 	},
 	{
 		type: "value",
-		name: "台时产量（t/h）",
-		position: "left",
+		name: "分布电耗(KW.h/t)",
+		position: "right",
 		alignTicks: true,
-		offset: 70,
 		axisLine: {
 			show: true,
 			lineStyle: {
@@ -391,19 +391,19 @@ export default {
 						data: [],
 					},
 					{
-						name: "运转率",
-						type: "line",
+						name: "台时产量",
+						type: "bar",
 						yAxisIndex: 1,
 						data: [],
 					},
 					{
-						name: "分布电耗",
-						type: "bar",
+						name: "运转率",
+						type: "line",
 						yAxisIndex: 2,
 						data: [],
 					},
 					{
-						name: "台时产量",
+						name: "分布电耗",
 						type: "bar",
 						yAxisIndex: 3,
 						data: [],
@@ -434,19 +434,19 @@ export default {
 						data: [],
 					},
 					{
-						name: "运转率",
-						type: "line",
+						name: "台时产量",
+						type: "bar",
 						yAxisIndex: 1,
 						data: [],
 					},
 					{
-						name: "分布电耗",
-						type: "bar",
+						name: "运转率",
+						type: "line",
 						yAxisIndex: 2,
 						data: [],
 					},
 					{
-						name: "台时产量",
+						name: "分布电耗",
 						type: "bar",
 						yAxisIndex: 3,
 						data: [],
@@ -490,203 +490,25 @@ export default {
 						data: [],
 					},
 					{
-						name: "运转率",
-						type: "line",
+						name: "台时产量",
+						type: "bar",
 						yAxisIndex: 1,
 						data: [],
 					},
 					{
-						name: "分布电耗",
-						type: "bar",
+						name: "运转率",
+						type: "line",
 						yAxisIndex: 2,
 						data: [],
 					},
 					{
-						name: "台时产量",
+						name: "分布电耗",
 						type: "bar",
 						yAxisIndex: 3,
 						data: [],
 					},
 				],
 			},
-			dataX: [],
-			dataY: [],
-			dataY2: [],
-			option: {
-				color: [
-					"#647bfe",
-					"#8698fe",
-					"#a9b6fe",
-					"#cbd3fe",
-					"#91CC75",
-					"#EE6666",
-				],
-				tooltip: {
-					trigger: "axis",
-					axisPointer: {
-						type: "cross",
-					},
-				},
-				grid: {
-					right: "20%",
-					left: "20%",
-				},
-				toolbox: {
-					feature: {
-						dataView: { show: true, readOnly: false },
-						restore: { show: true },
-						saveAsImage: { show: true },
-					},
-				},
-				legend: {
-					data: [
-						"总产量",
-						"台时产量",
-						"运转率",
-						"分布电耗",
-						"单位产品标煤耗",
-						"成本",
-					],
-				},
-				xAxis: [
-					{
-						type: "category",
-						axisTick: {
-							alignWithLabel: true,
-						},
-						// prettier-ignore
-						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-					},
-				],
-				yAxis: [
-					{
-						type: "value",
-						name: "产量 (t)",
-						position: "right",
-						alignTicks: true,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: colors[0],
-							},
-						},
-						axisLabel: {
-							formatter: "{value}",
-						},
-					},
-					{
-						type: "value",
-						name: "运转率 (%)",
-						position: "right",
-						alignTicks: true,
-						offset: 80,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: colors[1],
-							},
-						},
-						axisLabel: {
-							formatter: "{value}",
-						},
-					},
-					{
-						type: "value",
-						name: "成本(元)",
-						position: "right",
-						alignTicks: true,
-						offset: 160,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: colors[2],
-							},
-						},
-						axisLabel: {
-							formatter: "{value}",
-						},
-					},
-					{
-						type: "value",
-						name: "分布电耗(KW.h)",
-						position: "left",
-						alignTicks: true,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: colors[3],
-							},
-						},
-						axisLabel: {
-							formatter: "{value} ",
-						},
-					},
-					{
-						type: "value",
-						name: "标煤耗 (t)",
-						position: "left",
-						alignTicks: true,
-						offset: 80,
-						min: 0,
-						max: 180,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: colors[4],
-							},
-						},
-						axisLabel: {
-							formatter: "{value}",
-						},
-					},
-				],
-				series: [
-					{
-						name: "总产量",
-						type: "bar",
-						yAxisIndex: 0,
-						data: [
-							100, 120, 110, 130, 140, 120, 110, 120, 100, 150,
-							120, 160,
-						],
-					},
-					{
-						name: "台时产量",
-						type: "bar",
-						data: [
-							2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6,
-							20.0, 6.4, 3.3,
-						],
-					},
-					{
-						name: "运转率",
-						type: "bar",
-						yAxisIndex: 1,
-						data: [
-							2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7,
-							18.8, 6.0, 2.3,
-						],
-					},
-					{
-						name: "分布电耗",
-						type: "line",
-						yAxisIndex: 2,
-						data: [
-							2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0,
-							16.5, 12.0, 6.2,
-						],
-					},
-					{
-						name: "单位产品标煤耗",
-						type: "bar",
-						yAxisIndex: 2,
-						data: [
-							2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0,
-							16.5, 12.0, 6.2,
-						],
-					},
-				],
-			},
 		};
 	},
 

From 72cab70f23576d79c1d474989cf226d50eda8fa6 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 11:20:42 +0800
Subject: [PATCH 02/11] =?UTF-8?q?fix:em=E4=B8=AD=E8=AE=A1=E9=87=8F?=
 =?UTF-8?q?=E7=89=A9=E6=96=99=E5=8F=96=E6=B6=88=E7=B1=BB=E5=9E=8B=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/em/mpoint_form.vue | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/views/em/mpoint_form.vue b/src/views/em/mpoint_form.vue
index aaec0640..2701037d 100644
--- a/src/views/em/mpoint_form.vue
+++ b/src/views/em/mpoint_form.vue
@@ -160,7 +160,10 @@
 							</el-form-item>
 						</el-col>
 						<el-col :md="12" :sm="24">
-							<el-form-item label="关联环保字段" label-width="120">
+							<el-form-item
+								label="关联环保字段"
+								label-width="120"
+							>
 								<el-select
 									v-model="form.enp_field"
 									clearable
@@ -181,14 +184,17 @@
 							</el-form-item>
 						</el-col>
 						<el-col :md="12" :sm="24">
-							<el-form-item label="报告排序" prop="report_sortstr">
+							<el-form-item
+								label="报告排序"
+								prop="report_sortstr"
+							>
 								<el-input
 									v-model="form.report_sortstr"
 									clearable
 								></el-input>
 							</el-form-item>
 						</el-col>
-						<el-divider/>
+						<el-divider />
 						<el-col :md="12" :sm="24">
 							<el-form-item label="所监测设备">
 								<el-select
@@ -232,7 +238,7 @@
 								label="状态量表达式"
 								label-width="100"
 							>
-							<el-input
+								<el-input
 									v-model="form.ep_rs_expr"
 									clearable
 								></el-input>
@@ -243,21 +249,19 @@
 								label="影响测点编号"
 								label-width="100"
 							>
-							<el-input
+								<el-input
 									v-model="form.mpoint_affect"
 									clearable
 								></el-input>
 							</el-form-item>
 						</el-col>
-						<el-divider/>
+						<el-divider />
 						<el-col :md="12" :sm="24">
 							<el-form-item
 								label="是否代表所分配工段数据"
 								label-width="220"
 							>
-								<el-switch
-									v-model="form.is_rep_mgroup"
-								/>
+								<el-switch v-model="form.is_rep_mgroup" />
 							</el-form-item>
 						</el-col>
 						<el-col :md="12" :sm="24">
@@ -378,11 +382,9 @@ export default {
 	methods: {
 		//获取集合列表
 		getMgroup() {
-			this.$API.mtm.mgroup.list
-				.req({ page: 0 })
-				.then((res) => {
-					this.mgroupOptions = res;
-				});
+			this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
+				this.mgroupOptions = res;
+			});
 		},
 		//获取设备列表
 		getEquipment() {
@@ -394,11 +396,9 @@ export default {
 		},
 		//获取产品列表
 		getMaterial() {
-			this.$API.mtm.material.list
-				.req({ page: 0, type__in: "0, 30" })
-				.then((res) => {
-					this.materials = res;
-				});
+			this.$API.mtm.material.list.req({ page: 0 }).then((res) => {
+				this.materials = res;
+			});
 		},
 		mgroupChange(e) {
 			this.form.mgroups_allocate.push({ mgroup: e, ratio: 1 });

From bf8812452ff6d020a3969f9161d531c7835fdb25 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 14:46:47 +0800
Subject: [PATCH 03/11] =?UTF-8?q?fix:=E5=A4=A7=E5=B1=8F=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js               |   11 -
 src/views/bigScreen/index_enm.vue | 3050 ++++++++++++++++-------------
 2 files changed, 1716 insertions(+), 1345 deletions(-)

diff --git a/src/config/route.js b/src/config/route.js
index fa716293..772bef1e 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -227,17 +227,6 @@ const routes = [
             },
             "component": "enm_limestone/handoverLog"
           },
-          {
-            "name": "limestone_logDetail",
-            "path": "/enm_limestone/logDetail",
-            "meta": {
-              "title": "日志详情",
-              "icon": "el-icon-document-copy",
-              "perms": ["enm_limestone"],
-              "hidden": true
-            },
-            "component": "enm_limestone/logDetail"
-          },
         ]
       },
       //原料磨
diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue
index a7f3b02a..a61a0630 100644
--- a/src/views/bigScreen/index_enm.vue
+++ b/src/views/bigScreen/index_enm.vue
@@ -1,1410 +1,1792 @@
 <template>
-  <div class="dashboard">
-    <header>
-      <div class="title_left"></div>
-      <h1 class="title">托克逊建材厂能管系统</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>
-      <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>
+	<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>
+			<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 tool from "@/utils/tool";
+import config from "@/config";
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs"
-import * as BABYLON_GUI from "babylonjs-gui"
-import * as BABYLON_GRID from "@/utils/gridMaterial"
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
-import 'babylonjs-loaders';
-import 'animate.css';
+import * as BABYLON from "babylonjs";
+import * as BABYLON_GUI from "babylonjs-gui";
+import * as BABYLON_GRID from "@/utils/gridMaterial";
+import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
+import "babylonjs-loaders";
+import "animate.css";
 export default {
-  data() {
-    return {
-      query: {
-        year_s: 2023,
-        month_s: 8,
-        type: 'month_s',
-        page: 0
-      },
-      factoryData: {},
-      sectionData: {},
-      nowDay: 1,
-      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: {
-        "干渣库_primitive0": "电石渣",
-        "原料磨及废气处理_primitive0": "原料磨",
-        "窑": "回转窑",
-        "煤粉制备_primitive1": "煤磨",
-        "水泥磨房_primitive0": "水泥磨",
-        "水泥储存及散装库_primitive2": "水泥包装",
-        // "停车场": "停车场"
-      },
-      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' },
-        水泥包装: { 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: 36,
-          total_production: 420,
-          coal_consume_unit: '',
-          run_rate: 100,
-          charts_ele: [35, 37, 36, 37, 36, 20],
-          charts_prod: [426, 445, 425, 449, 438, 265],
-          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.$nextTick(() => {
-      this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
-        console.log('工段数据：', res1)
-        // debugger
-        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 + '';
-          } 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)
-        }
+	data() {
+		return {
+			query: {
+				year_s: 2023,
+				month_s: 8,
+				type: "month_s",
+				page: 0,
+			},
+			factoryData: {},
+			sectionData: {},
+			nowDay: 1,
+			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: {
+				干渣库_primitive0: "电石渣",
+				原料磨及废气处理_primitive0: "原料磨",
+				窑: "回转窑",
+				煤粉制备_primitive1: "煤磨",
+				水泥磨房_primitive0: "水泥磨",
+				水泥储存及散装库_primitive2: "水泥包装",
+				// "停车场": "停车场"
+			},
+			factoryName: "",
+			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" },
+				水泥包装: { 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: 36,
+					total_production: 420,
+					coal_consume_unit: "",
+					run_rate: 100,
+					charts_ele: [35, 37, 36, 37, 36, 20],
+					charts_prod: [426, 445, 425, 449, 438, 265],
+					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.factoryName = that.$TOOL.data.get("BASE_INFO").base.base_name;
+		this.initDomStyle();
+		this.$nextTick(() => {
+			this.$API.enm.enstat
+				.req({ type: "month_s", month_s: month, year_s: year, page: 0 })
+				.then((res1) => {
+					console.log("工段数据：", res1);
+					// debugger
+					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 + "";
+						} 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') {
+				//接听服务器发回的信息并处理展示
+				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);
+		},
 
-          } if (data.type == 'remaind') {
+		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];
+			// var renderCanvas = document.getElementById('renderCanvas');
+			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);
+			}
 
-          }
-        };
-        // 监听并处理error事件
-        this.ws.onerror = function (error) {
-          console.log('ws断开,尝试重连')
-          // setTimeout(() => {
-          //   this.ws = null;
-          //   this.init()
-          // }, 5000)
-        }
-      }
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) {}
+			}, 500);
+		},
+		initFactory() {
+			var that = this;
+			const canvas = document.getElementById("renderCanvas"); // Get the canvas element
+			const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
+			BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI =
+				function () {};
+			BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
+				document.getElementById("loadingScreen").style.display = "none";
+			};
 
-    },
-    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)
-    },
+			engine.displayLoadingUI();
+			// Add your code here matching the playground format
+			const createScene = function () {
+				const scene = new BABYLON.Scene(engine);
+				scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
+				const ground = BABYLON.MeshBuilder.CreateGround("ground", {
+					width: 100,
+					height: 100,
+				});
+				const groundMaterial = new BABYLON_GRID.GridMaterial(
+					"groundMaterial",
+					scene
+				);
+				groundMaterial.majorUnitFrequency = 5;
+				groundMaterial.minorUnitVisibility = 0.5;
+				groundMaterial.gridRatio = 2;
+				// groundMaterial.opacity = 0.99;
+				ground.material = groundMaterial;
+				ground.position.y = -0.1;
 
-    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];
-      // var renderCanvas = document.getElementById('renderCanvas');
-      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;
-        }
+				// 加载背景图片
+				// const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
+				const camera = new BABYLON.ArcRotateCamera(
+					"camera",
+					that.initialAlpha,
+					that.initialBeta,
+					that.initialRadius,
+					new BABYLON.Vector3(0, 0, 1.2)
+				);
+				that.initialTarget = camera.getTarget();
+				camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
+				camera.attachControl(canvas, true);
+				camera.maxZ = 1000; // 调整适当的值
+				// 相机限制
+				camera.lowerRadiusLimit = 6;
+				camera.upperRadiusLimit = 18;
 
-      }
-      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;
-        }
+				// 灯光
+				const light = new BABYLON.HemisphericLight(
+					"light",
+					new BABYLON.Vector3(1, 1, 0)
+				);
+				light.intensity = 1.6;
 
-      }
-      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)
-      }
+				// skybox
+				const skybox = BABYLON.MeshBuilder.CreateBox(
+					"skyBox",
+					{ size: 150 },
+					scene
+				);
+				var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial(
+					"skyMaterial",
+					scene
+				);
+				skyboxMaterial.backFaceCulling = false;
+				skybox.material = skyboxMaterial;
+				/*
+				 * Keys:
+				 * - 1: Day
+				 * - 2: Evening
+				 * - 3: Increase Luminance
+				 * - 4: Decrease Luminance
+				 * - 5: Increase Turbidity
+				 * - 6: Decrease Turbidity
+				 * - 7: Move horizon to -50
+				 * - 8: Restore horizon to 0
+				 */
+				var setSkyConfig = function (property, from, to) {
+					var keys = [
+						{ frame: 0, value: from },
+						{ frame: 100, value: to },
+					];
 
-      setTimeout(() => {
-        try {
-          myChart.setOption(option);
-        } catch (error) { }
-      }, 500)
-    },
-    initFactory() {
-      var that = this;
-      const canvas = document.getElementById("renderCanvas"); // Get the canvas element
-      const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
-      BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
-      }
-      BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
-        document.getElementById("loadingScreen").style.display = "none";
-      }
+					var animation = new BABYLON.Animation(
+						"animation",
+						property,
+						100,
+						BABYLON.Animation.ANIMATIONTYPE_FLOAT,
+						BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
+					);
+					animation.setKeys(keys);
 
-      engine.displayLoadingUI();
-      // Add your code here matching the playground format
-      const createScene = function () {
-        const scene = new BABYLON.Scene(engine);
-        scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); 
-        const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
-        const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
-        groundMaterial.majorUnitFrequency = 5;
-        groundMaterial.minorUnitVisibility = 0.5;
-        groundMaterial.gridRatio = 2;
-        // groundMaterial.opacity = 0.99;
-        ground.material = groundMaterial;
-        ground.position.y = -0.1
+					scene.stopAnimation(skybox);
+					scene.beginDirectAnimation(
+						skybox,
+						[animation],
+						0,
+						100,
+						false,
+						1
+					);
+				};
 
-        // 加载背景图片
-        // const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
-        const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
-        that.initialTarget = camera.getTarget();
-        camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
-        camera.attachControl(canvas, true);
-        camera.maxZ = 1000; // 调整适当的值
-        // 相机限制
-        camera.lowerRadiusLimit = 6;
-        camera.upperRadiusLimit = 18;
+				window.addEventListener("keydown", function (evt) {
+					switch (evt.keyCode) {
+						case 49:
+							setSkyConfig(
+								"material.inclination",
+								skyboxMaterial.inclination,
+								0
+							);
+							break; // 1
+						case 50:
+							setSkyConfig(
+								"material.inclination",
+								skyboxMaterial.inclination,
+								-0.5
+							);
+							break; // 2
 
-        // 灯光
-        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
-        light.intensity = 1.6;
+						case 51:
+							setSkyConfig(
+								"material.luminance",
+								skyboxMaterial.luminance,
+								0.1
+							);
+							break; // 3
+						case 52:
+							setSkyConfig(
+								"material.luminance",
+								skyboxMaterial.luminance,
+								1.0
+							);
+							break; // 4
 
-        // skybox
-        const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
-        var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
-        skyboxMaterial.backFaceCulling = false;
-        skybox.material = skyboxMaterial;
-        /*
-          * Keys:
-          * - 1: Day
-          * - 2: Evening
-          * - 3: Increase Luminance
-          * - 4: Decrease Luminance
-          * - 5: Increase Turbidity
-          * - 6: Decrease Turbidity
-            * - 7: Move horizon to -50
-            * - 8: Restore horizon to 0
-          */
-        var setSkyConfig = function (property, from, to) {
-          var keys = [
-            { frame: 0, value: from },
-            { frame: 100, value: to }
-          ];
+						case 53:
+							setSkyConfig(
+								"material.turbidity",
+								skyboxMaterial.turbidity,
+								40
+							);
+							break; // 5
+						case 54:
+							setSkyConfig(
+								"material.turbidity",
+								skyboxMaterial.turbidity,
+								5
+							);
+							break; // 6
 
-          var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
-          animation.setKeys(keys);
+						case 55:
+							setSkyConfig(
+								"material.cameraOffset.y",
+								skyboxMaterial.cameraOffset.y,
+								50
+							);
+							break; // 7
+						case 56:
+							setSkyConfig(
+								"material.cameraOffset.y",
+								skyboxMaterial.cameraOffset.y,
+								0
+							);
+							break; // 8
+						default:
+							break;
+					}
+				});
 
-          scene.stopAnimation(skybox);
-          scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1);
-        };
+				// Set to Day
+				setSkyConfig(
+					"material.inclination",
+					skyboxMaterial.inclination,
+					0
+				);
 
-        window.addEventListener("keydown", function (evt) {
-          switch (evt.keyCode) {
-            case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1
-            case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2
+				// 全屏GUI
+				const advancedTexture =
+					BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI(
+						"myUI"
+					);
+				that.myui = advancedTexture;
+				// 创建一个高亮层
+				const highlightLayer = new BABYLON.HighlightLayer(
+					"highlightLayer",
+					scene
+				);
+				// 主控制区
+				var control_main = new BABYLON_GUI.StackPanel();
+				control_main.isVertical = false;
+				control_main.top = "-40%";
+				control_main.left = "-20%";
+				advancedTexture.addControl(control_main);
 
-            case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3
-            case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4
+				var button_main = BABYLON_GUI.Button.CreateSimpleButton(
+					"button_main",
+					"主视角"
+				);
+				button_main.width = "80px";
+				button_main.height = "30px";
+				button_main.color = "white";
+				button_main.cornerRadius = 20;
+				button_main.background = "green";
+				control_main.addControl(button_main);
+				button_main.onPointerClickObservable.add(() => {
+					if (
+						camera.alpha != that.initialAlpha ||
+						camera.beta != that.initialBeta ||
+						camera.radius != that.initialRadius
+					) {
+						var cameraPosition = new BABYLON.Vector3(
+							0 +
+								that.initialRadius *
+									Math.sin(that.initialBeta) *
+									Math.cos(that.initialAlpha),
+							0 + that.initialRadius * Math.cos(that.initialBeta),
+							0 +
+								that.initialRadius *
+									Math.sin(that.initialBeta) *
+									Math.sin(that.initialAlpha)
+						);
+						var ease = new BABYLON.CubicEase();
+						ease.setEasingMode(
+							BABYLON.EasingFunction.EASINGMODE_EASEINOUT
+						);
+						BABYLON.Animation.CreateAndStartAnimation(
+							"at6",
+							camera,
+							"position",
+							45,
+							200,
+							camera.position,
+							cameraPosition,
+							0,
+							ease
+						);
+						BABYLON.Animation.CreateAndStartAnimation(
+							"at61",
+							camera,
+							"target",
+							45,
+							200,
+							camera.target,
+							that.initialTarget,
+							0,
+							ease
+						);
+					}
+				});
 
-            case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5
-            case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6
+				// 高亮显示mesh名
+				const mesh_rect = new BABYLON_GUI.Rectangle("mesh_rect");
+				mesh_rect.width = "100px";
+				mesh_rect.height = "25px";
+				mesh_rect.background = "orange";
+				mesh_rect.alpha = 0.6;
+				mesh_rect.isVisible = false;
+				advancedTexture.addControl(mesh_rect);
 
-            case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7
-            case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break;  // 8
-            default: break;
-          }
-        });
+				var mesh_name = new BABYLON_GUI.TextBlock("mesh_name");
+				mesh_name.text = "";
+				mesh_name.color = "white";
+				mesh_name.fontSize = "14px";
+				mesh_rect.addControl(mesh_name);
+				var remoteGlbUrl = config.HOST_URL + "/media/model/factory.glb";
+				// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
+				BABYLON.SceneLoader.Append(
+					remoteGlbUrl,
+					"",
+					scene,
+					function (scene) {
+						// debugger;
+						// console.log(scene)
+						// console.table(scene.meshes)
+						// 判断字符串是否包含中文------   /[\u4E00-\u9FA5]+/g.test(str)
+						for (let key in that.sectionNames) {
+							const value = that.sectionNames[key];
+							const mesh = scene.getMeshByName(key);
+							if (mesh) {
+								//建筑标签
+								const rect1 = new BABYLON_GUI.Rectangle(
+									value + "_rect"
+								);
+								rect1.width = "60px";
+								rect1.height = "30px";
+								rect1.cornerRadius = 4;
+								rect1.color = "Orange";
+								rect1.thickness = 2;
+								rect1.background = "green";
+								rect1.isPointerBlocker = true; // 防止点击穿透
+								advancedTexture.addControl(rect1);
+								var label = new BABYLON_GUI.TextBlock(
+									value + "_label"
+								);
+								label.text = value;
+								label.color = "white";
+								label.fontSize = "14px";
+								rect1.addControl(label);
+								rect1.linkWithMesh(mesh);
+								rect1.linkOffsetY = -30;
+								if (value == "电石渣") {
+									rect1.linkOffsetY = -200;
+									var line = new BABYLON_GUI.Line();
+									line.lineWidth = 4;
+									line.color = "Orange";
+									line.y1 = 10;
+									line.y2 = 15;
+									line.linkOffsetY = -15;
+									line.dash = [3, 3];
+									advancedTexture.addControl(line);
+									line.linkWithMesh(mesh);
+									let connectedControl =
+										advancedTexture.getControlByName(
+											"电石渣_rect"
+										);
+									line.connectedControl = connectedControl;
+									// line.connectedControl = rect1;
+									// line.connectedControl = data_view;
+								}
+								rect1.onPointerDownObservable.add(() => {
+									const mesh = rect1.linkedMesh;
+									if (camera.target != mesh.position) {
+										// console.log('fly to')
+										// 计算新的相机位置
+										let position =
+											mesh._parentNode._position;
+										if (mesh._parentNode.id == "__root__") {
+											position = mesh.position;
+										}
+										const cameraPosition =
+											new BABYLON.Vector3(
+												mesh.position.x +
+													9 *
+														Math.sin(camera.beta) *
+														Math.cos(Math.PI),
+												mesh.position.y +
+													9 * Math.cos(camera.beta),
+												mesh.position.z +
+													9 *
+														Math.sin(camera.beta) *
+														Math.sin(Math.PI)
+											);
+										var ease = new BABYLON.CubicEase();
+										ease.setEasingMode(
+											BABYLON.EasingFunction
+												.EASINGMODE_EASEINOUT
+										);
+										BABYLON.Animation.CreateAndStartAnimation(
+											"at5",
+											camera,
+											"position",
+											45,
+											200,
+											camera.position,
+											cameraPosition,
+											0,
+											ease
+										);
+										BABYLON.Animation.CreateAndStartAnimation(
+											"at51",
+											camera,
+											"target",
+											45,
+											200,
+											camera.target,
+											position,
+											0,
+											ease
+										);
+									}
+									// let dataViewName = rect1.name.split('_')[0] + '_data_view';
+									let dataViewName = rect1.name.split("_")[0];
+									that.activeSectionName = dataViewName;
+									that.activeSection = 2;
+									that.getMgroupChartData(dataViewName);
+									let dataView =
+										advancedTexture.getControlByName(
+											dataViewName
+										);
+									if (dataView) {
+										// // 在这里进行矩形的操作
+										dataView.isVisible = true;
+									}
+								});
+								// 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件
+								const data_view = new BABYLON_GUI.StackPanel(
+									value + "_data_view"
+								);
+								data_view.width = "200px"; // StackPanel的宽度
+								data_view.height = "140px";
+								data_view.thickness = 1;
+								data_view.background = "rgba(0, 34, 51, 0.5)"; //暗色
+								let mgroupName = new BABYLON_GUI.TextBlock(
+									value + "_label"
+								);
+								mgroupName.height = "30px";
+								mgroupName.width = "120px";
+								mgroupName.color = "white";
+								mgroupName.text = value;
+								mgroupName.shadowColor = "#66b1ff";
+								mgroupName.shadowBlur = 5;
+								mgroupName.shadowOffsetX = -2;
+								mgroupName.shadowOffsetY = 2;
+								data_view.addControl(mgroupName);
+								const mgroup = new BABYLON_GUI.Rectangle(
+									"mgroup"
+								);
+								mgroup.height = "3px";
+								mgroup.width = "160px";
+								mgroup.thickness = 0;
+								mgroup.background = "rgba(44, 237, 255, 0.45)";
+								data_view.addControl(mgroup);
+								var grid = new BABYLON_GUI.Grid("grid");
+								grid.width = "200px";
+								grid.height = "70px";
+								grid.paddingLeft = 1;
+								var wd = 2;
+								var hd = 2;
+								for (let i = 0; i < wd; i++) {
+									grid.addRowDefinition(1 / wd);
+								}
+								for (let j = 0; j < hd; j++) {
+									grid.addColumnDefinition(1 / hd);
+								}
+								for (let i = 0; i < wd; i++) {
+									for (let j = 0; j < hd; j++) {
+										var rc = new BABYLON_GUI.TextBlock(
+											"rc" + i + j
+										);
+										rc.width = "100%";
+										// rc.height = "100%";
+										rc.thickness = 0;
+										if (j == 0 && i == 0) {
+											rc.width = "120px";
+											rc.text = "产品产量：";
+											rc.color = "white";
+											rc.fontSize = "16px";
+										} else if (j == 0 && i == 1) {
+											rc.width = "120px";
+											rc.color = "white";
+											rc.fontSize = "16px";
+											rc.text = "单位产品电耗：";
+										} else if (j == 1 && i == 0) {
+											// rc.text = that.mgroupValues[value].total;
+											rc.text =
+												that.mgroupValues[value].total;
+											rc.width = "80px";
+											rc.fontSize = "18px";
+											rc.color = "rgb(44,237,255)";
+										} else if (j == 1 && i == 1) {
+											// rc.text = that.mgroupValues[value].total;
+											rc.text =
+												that.mgroupValues[value].elec;
+											rc.width = "80px";
+											rc.fontSize = "18px";
+											rc.color = "rgb(44,237,255)";
+										}
+										grid.addControl(rc, i, j);
+									}
+								}
+								data_view.addControl(grid);
+								var mgroup_close =
+									BABYLON_GUI.Button.CreateSimpleButton(
+										"mgroup_close" + value,
+										"关闭"
+									);
+								mgroup_close.width = "70px";
+								mgroup_close.height = "25px";
+								mgroup_close.color = "white";
+								mgroup_close.cornerRadius = 15;
+								mgroup_close.fontSize = "12px";
+								mgroup_close.background = "rgb(44,237,255,.5)";
+								mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
+								mgroup_close.onPointerClickObservable.add(
+									() => {
+										console.log("data_view", data_view);
+										data_view.isVisible = false;
+									}
+								);
+								data_view.addControl(mgroup_close);
+								// 将StackPanel添加到GUI系统中
+								advancedTexture.addControl(data_view);
+								data_view.linkWithMesh(mesh);
+								data_view.linkOffsetY = -120;
+								if (value == "电石渣") {
+									data_view.linkOffsetY = -290;
+								}
+							}
+						}
+						engine.hideLoadingUI();
+					},
+					function (evt) {
+						var loadedPercent = 0;
+						if (evt.lengthComputable) {
+							loadedPercent = parseInt(
+								(evt.loaded * 100) / evt.total
+							);
+						} else {
+							var dlCount = evt.loaded / (1024 * 1024);
+							loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
+						}
+						that.loadedPercent = loadedPercent;
+					}
+				);
 
-        // Set to Day
-        setSkyConfig("material.inclination", skyboxMaterial.inclination, 0);
+				// 自动旋转checkbox
+				var checkbox = new BABYLON_GUI.Checkbox();
+				checkbox.width = "20px";
+				checkbox.height = "20px";
+				checkbox.isChecked = false;
+				checkbox.marginLeft = "16px";
+				checkbox.color = "green";
+				checkbox.onIsCheckedChangedObservable.add(function (value) {
+					if (value) {
+						camera.useAutoRotationBehavior = true;
+					} else {
+						camera.useAutoRotationBehavior = false;
+					}
+				});
+				control_main.addControl(checkbox);
 
-        // 全屏GUI
-        const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
-        that.myui = advancedTexture;
-        // 创建一个高亮层
-        const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
-        // 主控制区
-        var control_main = new BABYLON_GUI.StackPanel();
-        control_main.isVertical = false
-        control_main.top = '-40%';
-        control_main.left = '-20%';
-        advancedTexture.addControl(control_main);
+				var header = new BABYLON_GUI.TextBlock();
+				header.text = "自动旋转";
+				header.width = "80px";
+				header.textHorizontalAlignment =
+					BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+				header.color = "white";
+				control_main.addControl(header);
+				// 工段数据checkbox
+				var checkbox1 = new BABYLON_GUI.Checkbox();
+				checkbox1.width = "20px";
+				checkbox1.height = "20px";
+				checkbox1.isChecked = true;
+				checkbox1.marginLeft = "16px";
+				checkbox1.color = "green";
+				checkbox1.onIsCheckedChangedObservable.add(function (value) {
+					// debugger;
+					if (value) {
+						for (let key in that.sectionNames) {
+							let name = that.sectionNames[key] + "_data_view";
+							console.log(name);
+							let dataView =
+								advancedTexture.getControlByName(name);
+							dataView.isVisible = true;
+						}
+					} else {
+						for (let key in that.sectionNames) {
+							let name = that.sectionNames[key] + "_data_view";
+							console.log(name);
+							let dataView =
+								advancedTexture.getControlByName(name);
+							dataView.isVisible = false;
+						}
+					}
+				});
+				control_main.addControl(checkbox1);
 
-        var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
-        button_main.width = "80px"
-        button_main.height = "30px";
-        button_main.color = "white";
-        button_main.cornerRadius = 20;
-        button_main.background = "green";
-        control_main.addControl(button_main)
-        button_main.onPointerClickObservable.add(() => {
-          if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
-            var cameraPosition = new BABYLON.Vector3(
-              0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
-              0 + that.initialRadius * Math.cos(that.initialBeta),
-              0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
-            );
-            var ease = new BABYLON.CubicEase();
-            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-            BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
-            BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
-          }
-        })
+				var header1 = new BABYLON_GUI.TextBlock();
+				header1.text = "工段数据";
+				header1.width = "80px";
+				header1.textHorizontalAlignment =
+					BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+				header1.color = "white";
+				control_main.addControl(header1);
 
-        // 高亮显示mesh名
-        const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
-        mesh_rect.width = "100px";
-        mesh_rect.height = "25px";
-        mesh_rect.background = 'orange';
-        mesh_rect.alpha = 0.6;
-        mesh_rect.isVisible = false;
-        advancedTexture.addControl(mesh_rect);
+				// 添加抓取事件
+				canvas.addEventListener("mousemove", (event) => {
+					// 使用 scene.pick 检测鼠标拾取
+					const pickResult = scene.pick(
+						scene.pointerX,
+						scene.pointerY
+					);
+					if (that.currentLightMesh) {
+						mesh_rect.isVisible = false;
+						highlightLayer.removeAllMeshes();
+					}
+					if (pickResult.hit) {
+						const mesh = pickResult.pickedMesh;
+						highlightLayer.removeAllMeshes();
+						if (
+							/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) &&
+							mesh.name !== "地面1" &&
+							mesh.name !== "绿地" &&
+							mesh.name !== "停车场"
+						) {
+							// 在选中的 mesh 上添加高亮效果
+							highlightLayer.addMesh(
+								mesh,
+								new BABYLON.Color3(1, 1, 0.5)
+							);
+							that.currentLightMesh = mesh;
+							mesh_rect.linkWithMesh(mesh);
+							let name = mesh.name.split("_")[0];
+							mesh_name.text = name;
+							mesh_rect.isVisible = true;
+						}
+					}
+				});
+				// checkbox.isChecked = true; //默认开启自动旋转
+				return scene;
+			};
 
-        var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
-        mesh_name.text = "";
-        mesh_name.color = 'white';
-        mesh_name.fontSize = '14px';
-        mesh_rect.addControl(mesh_name);
-        var remoteGlbUrl = config.HOST_URL + "/media/model/factory.glb";
-        // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
-        BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
-          // debugger;
-          // console.log(scene)
-          // console.table(scene.meshes)
-          // 判断字符串是否包含中文------   /[\u4E00-\u9FA5]+/g.test(str)
-          for (let key in that.sectionNames) {
-            const value = that.sectionNames[key];
-            const mesh = scene.getMeshByName(key);
-            if (mesh) {
-              //建筑标签
-              const rect1 = new BABYLON_GUI.Rectangle(value + '_rect');
-              rect1.width = "60px";
-              rect1.height = "30px";
-              rect1.cornerRadius = 4;
-              rect1.color = "Orange";
-              rect1.thickness = 2;
-              rect1.background = "green";
-              rect1.isPointerBlocker = true; // 防止点击穿透
-              advancedTexture.addControl(rect1);
-              var label = new BABYLON_GUI.TextBlock(value + '_label');
-              label.text = value;
-              label.color = 'white';
-              label.fontSize = '14px';
-              rect1.addControl(label);
-              rect1.linkWithMesh(mesh);
-              rect1.linkOffsetY = -30;
-              if (value == '电石渣') {
-                rect1.linkOffsetY = -200;
-                var line = new BABYLON_GUI.Line();
-                line.lineWidth = 4;
-                line.color = "Orange";
-                line.y1 = 10;
-                line.y2 = 15;
-                line.linkOffsetY = -15;
-                line.dash = [3, 3];
-                advancedTexture.addControl(line);
-                line.linkWithMesh(mesh);
-                let connectedControl = advancedTexture.getControlByName('电石渣_rect')
-                line.connectedControl = connectedControl;
-                // line.connectedControl = rect1;  
-                // line.connectedControl = data_view; 
-              }
-              rect1.onPointerDownObservable.add(() => {
+			const scene = createScene(); //Call the createScene function
+			// // scene.debugLayer.show()
 
-                const mesh = rect1.linkedMesh;
-                if (camera.target != mesh.position) {
-                  // console.log('fly to')
-                  // 计算新的相机位置
-                  let position = mesh._parentNode._position
-                  if (mesh._parentNode.id == '__root__') {
-                    position = mesh.position
-                  }
-                  const cameraPosition = new BABYLON.Vector3(
-                    mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
-                    mesh.position.y + 9 * Math.cos(camera.beta),
-                    mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
-                  );
-                  var ease = new BABYLON.CubicEase();
-                  ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                  BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
-                  BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
-                }
-                // let dataViewName = rect1.name.split('_')[0] + '_data_view';
-                let dataViewName = rect1.name.split('_')[0];
-                that.activeSectionName = dataViewName;
-                that.activeSection = 2;
-                that.getMgroupChartData(dataViewName);
-                let dataView = advancedTexture.getControlByName(dataViewName);
-                if (dataView) {
-                  // // 在这里进行矩形的操作
-                  dataView.isVisible = true;
-                }
-              });
-              // 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件
-              const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
-              data_view.width = '200px'; // StackPanel的宽度
-              data_view.height = '140px';
-              data_view.thickness = 1;
-              data_view.background = 'rgba(0, 34, 51, 0.5)';//暗色
-              let mgroupName = new BABYLON_GUI.TextBlock(value + '_label');
-              mgroupName.height = "30px";
-              mgroupName.width = "120px";
-              mgroupName.color = "white";
-              mgroupName.text = value;
-              mgroupName.shadowColor = '#66b1ff';
-              mgroupName.shadowBlur = 5;
-              mgroupName.shadowOffsetX = -2;
-              mgroupName.shadowOffsetY = 2;
-              data_view.addControl(mgroupName);
-              const mgroup = new BABYLON_GUI.Rectangle('mgroup');
-              mgroup.height = "3px";
-              mgroup.width = "160px";
-              mgroup.thickness = 0;
-              mgroup.background = 'rgba(44, 237, 255, 0.45)';
-              data_view.addControl(mgroup);
-              var grid = new BABYLON_GUI.Grid("grid");
-              grid.width = '200px';
-              grid.height = '70px';
-              grid.paddingLeft = 1;
-              var wd = 2;
-              var hd = 2;
-              for (let i = 0; i < wd; i++) {
-                grid.addRowDefinition(1 / wd);
-              }
-              for (let j = 0; j < hd; j++) {
-                grid.addColumnDefinition(1 / hd);
-              }
-              for (let i = 0; i < wd; i++) {
-                for (let j = 0; j < hd; j++) {
-                  var rc = new BABYLON_GUI.TextBlock("rc" + i + j);
-                  rc.width = "100%";
-                  // rc.height = "100%";
-                  rc.thickness = 0;
-                  if (j == 0 && i == 0) {
-                    rc.width = "120px";
-                    rc.text = "产品产量：";
-                    rc.color = "white";
-                    rc.fontSize = '16px';
-                  } else if (j == 0 && i == 1) {
-                    rc.width = "120px";
-                    rc.color = "white";
-                    rc.fontSize = '16px';
-                    rc.text = "单位产品电耗：";
-                  } else if (j == 1 && i == 0) {
-                    // rc.text = that.mgroupValues[value].total;
-                    rc.text = that.mgroupValues[value].total;
-                    rc.width = "80px";
-                    rc.fontSize = '18px';
-                    rc.color = "rgb(44,237,255)";
-                  } else if (j == 1 && i == 1) {
-                    // rc.text = that.mgroupValues[value].total;
-                    rc.text = that.mgroupValues[value].elec;
-                    rc.width = "80px";
-                    rc.fontSize = '18px';
-                    rc.color = "rgb(44,237,255)";
-                  }
-                  grid.addControl(rc, i, j);
-                }
-              }
-              data_view.addControl(grid);
-              var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
-              mgroup_close.width = "70px"
-              mgroup_close.height = "25px";
-              mgroup_close.color = "white";
-              mgroup_close.cornerRadius = 15;
-              mgroup_close.fontSize = '12px';
-              mgroup_close.background = 'rgb(44,237,255,.5)';
-              mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
-              mgroup_close.onPointerClickObservable.add(() => {
-                console.log('data_view', data_view)
-                data_view.isVisible = false;
-              })
-              data_view.addControl(mgroup_close);
-              // 将StackPanel添加到GUI系统中
-              advancedTexture.addControl(data_view);
-              data_view.linkWithMesh(mesh);
-              data_view.linkOffsetY = -120;
-              if (value == '电石渣') {
-                data_view.linkOffsetY = -290;
-              }
-            }
-          }
-          engine.hideLoadingUI()
-        },
-          function (evt) {
-            var loadedPercent = 0;
-            if (evt.lengthComputable) {
-              loadedPercent = parseInt(evt.loaded * 100 / evt.total);
-            } else {
-              var dlCount = evt.loaded / (1024 * 1024);
-              loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
-            }
-            that.loadedPercent = loadedPercent;
-          })
-
-        // 自动旋转checkbox
-        var checkbox = new BABYLON_GUI.Checkbox();
-        checkbox.width = "20px";
-        checkbox.height = "20px";
-        checkbox.isChecked = false;
-        checkbox.marginLeft = '16px'
-        checkbox.color = "green";
-        checkbox.onIsCheckedChangedObservable.add(function (value) {
-          if (value) {
-            camera.useAutoRotationBehavior = true;
-          } else {
-            camera.useAutoRotationBehavior = false;
-          }
-        });
-        control_main.addControl(checkbox);
-
-        var header = new BABYLON_GUI.TextBlock();
-        header.text = "自动旋转";
-        header.width = "80px";
-        header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        header.color = "white";
-        control_main.addControl(header);
-        // 工段数据checkbox
-        var checkbox1 = new BABYLON_GUI.Checkbox();
-        checkbox1.width = "20px";
-        checkbox1.height = "20px";
-        checkbox1.isChecked = true;
-        checkbox1.marginLeft = '16px'
-        checkbox1.color = "green";
-        checkbox1.onIsCheckedChangedObservable.add(function (value) {
-          // debugger;
-          if (value) {
-            for (let key in that.sectionNames) {
-              let name = that.sectionNames[key] + '_data_view';
-              console.log(name)
-              let dataView = advancedTexture.getControlByName(name);
-              dataView.isVisible = true;
-            }
-          } else {
-            for (let key in that.sectionNames) {
-              let name = that.sectionNames[key] + '_data_view';
-              console.log(name)
-              let dataView = advancedTexture.getControlByName(name);
-              dataView.isVisible = false;
-            }
-          }
-        });
-        control_main.addControl(checkbox1);
-
-        var header1 = new BABYLON_GUI.TextBlock();
-        header1.text = "工段数据";
-        header1.width = "80px";
-        header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        header1.color = "white";
-        control_main.addControl(header1);
-
-        // 添加抓取事件
-        canvas.addEventListener('mousemove', (event) => {
-          // 使用 scene.pick 检测鼠标拾取
-          const pickResult = scene.pick(scene.pointerX, scene.pointerY);
-          if (that.currentLightMesh) {
-            mesh_rect.isVisible = false;
-            highlightLayer.removeAllMeshes();
-          }
-          if (pickResult.hit) {
-            const mesh = pickResult.pickedMesh;
-            highlightLayer.removeAllMeshes();
-            if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') {
-              // 在选中的 mesh 上添加高亮效果
-              highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
-              that.currentLightMesh = mesh;
-              mesh_rect.linkWithMesh(mesh);
-              let name = mesh.name.split('_')[0];
-              mesh_name.text = name;
-              mesh_rect.isVisible = true;
-            }
-          }
-        });
-        // checkbox.isChecked = true; //默认开启自动旋转
-        return scene;
-      };
-
-      const scene = createScene(); //Call the createScene function
-      // // scene.debugLayer.show()
-
-      // // Register a render loop to repeatedly render the scene
-      engine.runRenderLoop(function () {
-        scene.render();
-      });
-      this.engine = engine;
-      this.scene = scene;
-      // Watch for browser/canvas resize events
-      window.addEventListener("resize", function () {
-        engine.resize();
-      });
-    },
-    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();
-  },
-}
+			// // Register a render loop to repeatedly render the scene
+			engine.runRenderLoop(function () {
+				scene.render();
+			});
+			this.engine = engine;
+			this.scene = scene;
+			// Watch for browser/canvas resize events
+			window.addEventListener("resize", function () {
+				engine.resize();
+			});
+		},
+		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;
+	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;
+	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;
+	flex: 1;
 }
 
 .title {
-  flex: 1;
-  text-align: center;
-  color: white;
-  font-size: 24px;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+	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;
+	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;
+	top: 0;
+	width: 100%;
+	background-image: url("/public/img/bj.png");
+	background-size: cover;
 }
 
 #renderCanvas {
-  width: 100%;
-  height: 100%
+	width: 100%;
+	height: 100%;
 }
 
 #loadingScreen {
-  position: absolute;
-  width: 100%;
-  top: 260px;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 30px;
+	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%;
+	z-index: 10;
+	position: absolute;
+	top: 40px;
+	width: 20%;
 }
 
 .right_main {
-  right: 0;
+	right: 0;
 }
 
 .left_other,
 .right_other {
-  position: absolute;
-  top: 240px;
-  width: 20%;
+	position: absolute;
+	top: 240px;
+	width: 20%;
 }
 
 .right_other {
-  right: 0
+	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;
+	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;
+	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));
+	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;
+	font-size: 16px;
+	margin-bottom: 6px;
 }
 
 .pannel_number {
-  position: relative;
+	position: relative;
 }
 
 .panel_value {
-  padding-left: 1em;
-  font-size: 20px;
-  font-weight: bold;
-  text-align: right;
+	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;
+	right: 5px;
+	color: #aebfe9;
+	font-size: 12px;
+	text-align: right;
+	position: absolute;
 }
 
 .chart {
-  width: 100%;
-  height: 220px;
+	width: 100%;
+	height: 220px;
 }
 
 .dropdown {
-  /* top: 20%;
+	/* top: 20%;
     font-size: 18px;
     right: 22%;
     position: absolute; */
-  bottom: 3%;
-  font-size: 18px;
-  left: 50%;
-  position: absolute;
-  transform: translateX(-50%);
+	bottom: 3%;
+	font-size: 18px;
+	left: 50%;
+	position: absolute;
+	transform: translateX(-50%);
 }
 
 /* .dropdown-item {
@@ -1419,32 +1801,32 @@ header {
   }
 */
 .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;
+	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%;
+	/* 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>
\ No newline at end of file
+</style>

From 56b2d8de891f6d686fef3430510e0bbcac7286bd Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 14:48:03 +0800
Subject: [PATCH 04/11] =?UTF-8?q?fix:=E6=97=A5=E5=BF=97=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/config/route.js b/src/config/route.js
index 772bef1e..9d3b3a73 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -296,7 +296,6 @@ const routes = [
             "meta": {
               "title": "日志详情",
               "icon": "el-icon-document-copy",
-              "perms": ["enm_rm"],
               "hidden": true
             },
             "component": "enm_rm/logDetail"

From 44f3e3fc682bd5aef9b5d47d5d421e6a8736199f Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 16:27:52 +0800
Subject: [PATCH 05/11] =?UTF-8?q?fix:=E8=AE=BE=E5=A4=87=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/em/ecate.vue      | 296 +++++++++++++++++++++---------------
 src/views/em/ecate_form.vue | 167 ++++++++++++++++++++
 2 files changed, 342 insertions(+), 121 deletions(-)
 create mode 100644 src/views/em/ecate_form.vue

diff --git a/src/views/em/ecate.vue b/src/views/em/ecate.vue
index 8832f9e4..b479e502 100644
--- a/src/views/em/ecate.vue
+++ b/src/views/em/ecate.vue
@@ -1,126 +1,180 @@
 <template>
-    <el-container>
-        <el-header>
-            <div class="left-panel">
-                <el-button type="primary" icon="el-icon-plus" v-auth="'ecate.create'" @click="add"></el-button>
-            </div>
-        </el-header>
-        <el-main class="nopadding">
-            <scTable ref="table" :apiObj="apiObj" row-key="id" stripe :query="query">
-                <el-table-column type="index" width="50" />
-                <el-table-column label="名称" prop="name" show-overflow-tooltip>
-                </el-table-column>
-                <el-table-column label="编码" prop="code" show-overflow-tooltip></el-table-column>
-                <el-table-column label="类型" show-overflow-tooltip>
-                    <template #default="scope">
-                        <span>{{ typeOptions_[scope.row.type] }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="是否用于安全" show-overflow-tooltip>
-                    <template #default="scope">
-                        <el-icon v-if="scope.row.is_for_safe" color="green">
-                            <CircleCheckFilled />
-                        </el-icon>
-                    </template>
-                </el-table-column>
-                <el-table-column label="是否用于环保" show-overflow-tooltip>
-                    <template #default="scope">
-                        <el-icon v-if="scope.row.is_for_enp" color="green">
-                            <CircleCheckFilled />
-                        </el-icon>
-                    </template>
-                </el-table-column>
-                <el-table-column label="是否为车辆" show-overflow-tooltip>
-                    <template #default="scope">
-                        <el-icon v-if="scope.row.is_car" color="green">
-                            <CircleCheckFilled />
-                        </el-icon>
-                    </template>
-                </el-table-column>
-            </scTable>
-        </el-main>
-    </el-container>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button
+					type="primary"
+					icon="el-icon-plus"
+					v-auth="'ecate.create'"
+					@click="add"
+				></el-button>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable
+				ref="table"
+				:apiObj="apiObj"
+				row-key="id"
+				stripe
+				:query="query"
+			>
+				<el-table-column type="index" width="50" />
+				<el-table-column label="名称" prop="name" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column
+					label="编码"
+					prop="code"
+					show-overflow-tooltip
+				></el-table-column>
+				<el-table-column label="类型" show-overflow-tooltip>
+					<template #default="scope">
+						<span>{{ typeOptions_[scope.row.type] }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="是否用于安全" show-overflow-tooltip>
+					<template #default="scope">
+						<el-icon v-if="scope.row.is_for_safe" color="green">
+							<CircleCheckFilled />
+						</el-icon>
+					</template>
+				</el-table-column>
+				<el-table-column label="是否用于环保" show-overflow-tooltip>
+					<template #default="scope">
+						<el-icon v-if="scope.row.is_for_enp" color="green">
+							<CircleCheckFilled />
+						</el-icon>
+					</template>
+				</el-table-column>
+				<el-table-column label="是否为车辆" show-overflow-tooltip>
+					<template #default="scope">
+						<el-icon v-if="scope.row.is_car" color="green">
+							<CircleCheckFilled />
+						</el-icon>
+					</template>
+				</el-table-column>
+				<el-table-column
+					label="操作"
+					fixed="right"
+					align="left"
+					width="100"
+				>
+					<template #default="scope">
+						<el-button
+							link
+							type="primary"
+							@click="table_edit(scope.row)"
+							v-auth="'equipment.update'"
+						>
+							编辑
+						</el-button>
+						<el-popconfirm
+							title="确定删除吗？"
+							@confirm="table_del(scope.row)"
+							v-auth="'equipment.delete'"
+						>
+							<template #reference>
+								<el-button link type="danger">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+		<save-dialog
+			v-if="dialog.save"
+			ref="saveDialog"
+			@success="handleSaveSuccess"
+			@closed="dialog.save = false"
+		></save-dialog>
+	</el-container>
 </template>
 <script>
+import saveDialog from "./ecate_form.vue";
 export default {
-    data() {
-        return {
-            apiObj: this.$API.em.ecate.list,
-            query: {},
-            typeOptions_: {
-                10: '生产设备',
-                20: '计量设备',
-                30: '治理设备',
-                40: '监测设备',
-                50: '监控设备',
-            },
-            typeOptions: [
-                { id: 10, name: '生产设备' },
-                { id: 20, name: '计量设备' },
-                { id: 30, name: '治理设备' },
-                { id: 40, name: '监测设备' },
-                { id: 50, name: '监控设备' }
-            ],
-        };
-    },
-    methods: {
-        //添加
-        add() {
-            this.dialog.save = true;
-            this.$nextTick(() => {
-                this.$refs.saveDialog.open("add", 20);
-            });
-        },
-        //编辑
-        table_edit(row) {
-            this.dialog.save = true;
-            this.$nextTick(() => {
-                this.$refs.saveDialog.open("edit", 20).setData(row);
-            });
-        },
-        //删除
-        async table_del(row) {
-            this.$API.em.equipment.delete
-                .req(row.id)
-                .then((res) => {
-                    this.$message.success("删除成功");
-                    this.$refs.table.refresh();
-                })
-                .catch((err) => {
-                    return err;
-                });
-        },
-        //提交检验
-        submit() {
-            this.$refs.dialogForm.validate(async (valid) => {
-                if (valid) {
-                    this.isSaveing = true;
-                    this.$API.em.echeckrecord.create.req(this.form).then(res => {
-                        this.visible = false;
-                        this.isSaveing = false;
-                        this.$message.success("操作成功");
-                        this.$refs.drawer_table.refresh();
-                        this.$refs.table.refresh();
-                    }).catch(() => {
-                        this.isSaveing = false;
-                    })
-                }
-            });
-        },
-        //本地更新数据
-        handleSaveSuccess(data, mode) {
-            if (mode == "add") {
-                this.$refs.table.refresh();
-            } else if (mode == "edit") {
-                this.$refs.table.refresh();
-            }
-        },
-        handleQuery() {
-            this.$refs.table.queryData(this.query)
-        },
-        resetQuery() {
-            this.query = {};
-        },
-    },
+	name: "设备类型",
+	components: {
+		saveDialog,
+	},
+	data() {
+		return {
+			apiObj: this.$API.em.ecate.list,
+			query: {},
+			typeOptions_: {
+				10: "生产设备",
+				20: "计量设备",
+				30: "治理设备",
+				40: "监测设备",
+				50: "监控设备",
+			},
+			dialog: {
+				save: false,
+			},
+			typeOptions: [
+				{ id: 10, name: "生产设备" },
+				{ id: 20, name: "计量设备" },
+				{ id: 30, name: "治理设备" },
+				{ id: 40, name: "监测设备" },
+				{ id: 50, name: "监控设备" },
+			],
+		};
+	},
+	methods: {
+		//添加
+		add() {
+			this.dialog.save = true;
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open("add");
+			});
+		},
+		//编辑
+		table_edit(row) {
+			this.dialog.save = true;
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open("edit").setData(row);
+			});
+		},
+		//删除
+		async table_del(row) {
+			this.$API.em.ecate.delete
+				.req(row.id)
+				.then((res) => {
+					this.$message.success("删除成功");
+					this.$refs.table.refresh();
+				})
+				.catch((err) => {
+					return err;
+				});
+		},
+		//提交检验
+		submit() {
+			this.$refs.dialogForm.validate(async (valid) => {
+				if (valid) {
+					this.isSaveing = true;
+					this.$API.em.echeckrecord.create
+						.req(this.form)
+						.then((res) => {
+							this.visible = false;
+							this.isSaveing = false;
+							this.$message.success("操作成功");
+							this.$refs.drawer_table.refresh();
+							this.$refs.table.refresh();
+						})
+						.catch(() => {
+							this.isSaveing = false;
+						});
+				}
+			});
+		},
+		//本地更新数据
+		handleSaveSuccess(data, mode) {
+			this.$refs.table.refresh();
+		},
+		handleQuery() {
+			this.$refs.table.queryData(this.query);
+		},
+		resetQuery() {
+			this.query = {};
+		},
+	},
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/em/ecate_form.vue b/src/views/em/ecate_form.vue
new file mode 100644
index 00000000..2a7ec819
--- /dev/null
+++ b/src/views/em/ecate_form.vue
@@ -0,0 +1,167 @@
+<template>
+	<el-dialog
+		:title="titleMap[mode]"
+		v-model="visible"
+		:size="1000"
+		destroy-on-close
+		@closed="$emit('closed')"
+	>
+		<el-container v-loading="loading">
+			<el-main style="padding: 0 20px 20px 20px">
+				<el-form
+					ref="dialogForm"
+					:model="form"
+					:rules="rules"
+					:disabled="mode == 'show'"
+					label-width="120px"
+				>
+					<el-row>
+						<el-col :md="12" :sm="24">
+							<el-form-item label="名称" prop="name">
+								<el-input
+									v-model="form.name"
+									clearable
+								></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :md="12" :sm="24" prop="type">
+							<el-form-item label="类型">
+								<el-select
+									v-model="form.type"
+									style="width: 100%"
+								>
+									<el-option
+										v-for="e in eqTypeEnum.values"
+										:key="e.key"
+										:value="e.key"
+										:label="e.text"
+									></el-option>
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :md="12" :sm="24">
+							<el-form-item label="编号">
+								<el-input
+									v-model="form.code"
+									clearable
+								></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row>
+						<el-col :md="12" :sm="24">
+							<el-form-item label="是否用于安全">
+								<el-switch v-model="form.is_for_safe" />
+							</el-form-item>
+						</el-col>
+						<el-col :md="12" :sm="24">
+							<el-form-item label="是否用于环保">
+								<el-switch v-model="form.is_for_enp" />
+							</el-form-item>
+						</el-col>
+						<el-col :md="12" :sm="24">
+							<el-form-item label="是否为车辆">
+								<el-switch v-model="form.is_car" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</el-main>
+			<el-footer>
+				<el-button type="primary" :loading="isSaveing" @click="submit"
+					>保存</el-button
+				>
+				<el-button @click="visible = false">取消</el-button>
+			</el-footer>
+		</el-container>
+	</el-dialog>
+</template>
+
+<script>
+import { eqTypeEnum } from "@/utils/enum.js";
+export default {
+	emits: ["success", "closed"],
+	data() {
+		return {
+			eqTypeEnum,
+			loading: false,
+			mode: "add",
+			titleMap: {
+				add: "新增",
+				edit: "编辑",
+				show: "查看",
+			},
+			form: {
+				name: "",
+				code: "",
+				type: 10,
+				is_for_safe: false,
+				is_for_enp: false,
+				is_car: false,
+			},
+			rules: {
+				name: [{ required: true, message: "请输入类型名称" }],
+				type: [{ required: true, message: "请请选择设备类型" }],
+			},
+			visible: false,
+			isSaveing: false,
+		};
+	},
+	mounted() {},
+	methods: {
+		//显示
+		open(mode = "add") {
+			this.mode = mode;
+			this.visible = true;
+			return this;
+		},
+		//表单提交方法
+		submit() {
+			this.$refs.dialogForm.validate(async (valid) => {
+				if (valid) {
+					this.isSaveing = true;
+					if (this.mode == "add") {
+						this.$API.em.ecate.create
+							.req(this.form)
+							.then((res) => {
+								this.isSaveing = false;
+								this.$emit("success");
+								this.visible = false;
+								this.$message.success("操作成功");
+							})
+							.catch((res) => {
+								this.isSaveing = false;
+							});
+					} else if (this.mode == "edit") {
+						this.$API.em.ecate.update
+							.req(this.form.id, this.form)
+							.then((res) => {
+								this.isSaveing = false;
+								this.$emit("success");
+								this.visible = false;
+								this.$message.success("操作成功");
+							})
+							.catch((res) => {
+								this.isSaveing = false;
+							});
+					}
+				}
+			});
+		},
+		//表单注入数据
+		setData(data) {
+			Object.assign(this.form, data);
+		},
+		//设置过滤项
+		setFilters(filters) {
+			this.selectionFilters = filters;
+		},
+	},
+};
+</script>
+
+<style>
+.formItem {
+	width: 100%;
+}
+</style>

From 267cfe4733b43702bc1b8d13760cfb0d8ed69071 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 17:10:48 +0800
Subject: [PATCH 06/11] =?UTF-8?q?fix:=E5=A2=9E=E5=8A=A0=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E5=85=AC=E5=BC=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js                       |  10 +++
 src/views/enm_base/formulaSetting.vue     | 104 ++++++++++++++++++++++
 src/views/enm_base/settings/calculate.vue |  52 +++++++++++
 3 files changed, 166 insertions(+)
 create mode 100644 src/views/enm_base/formulaSetting.vue
 create mode 100644 src/views/enm_base/settings/calculate.vue

diff --git a/src/config/route.js b/src/config/route.js
index 9d3b3a73..3bf60ab7 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -2366,6 +2366,16 @@ const routes = [
               "perms": ["enm_base"]
             },
             "component": "enm_base/material"
+          },
+          {
+            "name": "formula",
+            "path": "/enm_base/formula",
+            "meta": {
+              "title": "计算公式",
+              "icon": "el-icon-grid",
+              "perms": ["enm_base"]
+            },
+            "component": "enm_base/formulaSetting"
           }
         ]
       },
diff --git a/src/views/enm_base/formulaSetting.vue b/src/views/enm_base/formulaSetting.vue
new file mode 100644
index 00000000..d208b984
--- /dev/null
+++ b/src/views/enm_base/formulaSetting.vue
@@ -0,0 +1,104 @@
+<template>
+	<el-container class="page-user">
+		<el-aside style="width: 240px">
+			<el-container>
+				<el-main class="nopadding">
+					<el-menu class="menu" :default-active="page">
+						<el-menu-item-group
+							v-for="group in menu"
+							:key="group.groupName"
+							:title="group.groupName"
+						>
+							<el-menu-item
+								v-for="item in group.list"
+								:key="item.component"
+								:index="item.component"
+								@click="openPage"
+							>
+								<el-icon v-if="item.icon"
+									><component :is="item.icon"
+								/></el-icon>
+								<template #title>
+									<span>{{ item.title }}</span>
+								</template>
+							</el-menu-item>
+						</el-menu-item-group>
+					</el-menu>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main>
+			<Suspense>
+				<template #default>
+					<component :is="page" />
+				</template>
+				<template #fallback>
+					<el-skeleton :rows="3" />
+				</template>
+			</Suspense>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+
+export default {
+	name: "userCenter",
+	components: {
+		calculate: defineAsyncComponent(() =>
+			import("./settings/calculate.vue")
+		),
+	},
+	data() {
+		return {
+			form: {},
+			menu: [
+				{
+					groupName: "配置",
+					list: [
+						{
+							icon: "el-icon-platform",
+							title: "计算系数",
+							component: "calculate",
+						},
+					],
+				},
+			],
+			userData: {},
+			page: "calculate",
+		};
+	},
+	//路由跳转进来 判断from是否有特殊标识做特殊处理
+	beforeRouteEnter(to, from, next) {
+		next((vm) => {
+			if (from.is) {
+				//删除特殊标识，防止标签刷新重复执行
+				delete from.is;
+				//执行特殊方法
+				vm.$alert("路由跳转过来后含有特殊标识，做特殊处理", "提示", {
+					type: "success",
+					center: true,
+				})
+					.then(() => {})
+					.catch(() => {});
+			}
+		});
+	},
+	mounted() {
+		this.getSysConfig();
+	},
+	methods: {
+		openPage(item) {
+			this.page = item.index;
+		},
+
+		getSysConfig() {
+			this.$API.system.config.getInfo.req().then((res) => {
+				this.form = res.base;
+			});
+		},
+	},
+};
+</script>
+<style scoped></style>
diff --git a/src/views/enm_base/settings/calculate.vue b/src/views/enm_base/settings/calculate.vue
new file mode 100644
index 00000000..92788481
--- /dev/null
+++ b/src/views/enm_base/settings/calculate.vue
@@ -0,0 +1,52 @@
+<template>
+	<el-container>
+		<el-main>
+			<el-card header="计算系数" shadow="hover">
+				<el-form>
+					<el-form-item label="料号系数">
+						<el-input-number
+							v-model="form.enm_lhxs"
+							controls-position="right"
+							placeholder="料号系数"
+						></el-input-number>
+					</el-form-item>
+
+					<el-form-item style="float: right">
+						<el-button
+							type="primary"
+							:loading="saveLoading"
+							@click="submitForm"
+							>保存</el-button
+						>
+					</el-form-item>
+				</el-form>
+			</el-card>
+		</el-main>
+	</el-container>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			saveLoading: false,
+			form: {
+				enm_lhxs: "",
+			},
+		};
+	},
+	mounted() {},
+	methods: {
+		submitForm() {
+			this.saveLoading = true;
+			this.$API.system.config.update
+				.req(this.form)
+				.then((res) => {
+					this.saveLoading = false;
+				})
+				.catch((res) => {
+					this.saveLoading = false;
+				});
+		},
+	},
+};
+</script>

From 09e83c9fc04f71f89cf8423fd0730e64eef5c4c8 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 6 May 2024 17:10:48 +0800
Subject: [PATCH 07/11] =?UTF-8?q?fix:=E5=9B=9E=E8=BD=AC=E7=AA=91=E4=BA=A4?=
 =?UTF-8?q?=E6=8E=A5=E7=8F=AD=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js                       |  10 +++
 src/views/enm_base/formulaSetting.vue     | 104 ++++++++++++++++++++++
 src/views/enm_base/settings/calculate.vue |  52 +++++++++++
 src/views/enm_kilnbase/handoverLog.vue    |   2 +-
 4 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 src/views/enm_base/formulaSetting.vue
 create mode 100644 src/views/enm_base/settings/calculate.vue

diff --git a/src/config/route.js b/src/config/route.js
index 9d3b3a73..3bf60ab7 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -2366,6 +2366,16 @@ const routes = [
               "perms": ["enm_base"]
             },
             "component": "enm_base/material"
+          },
+          {
+            "name": "formula",
+            "path": "/enm_base/formula",
+            "meta": {
+              "title": "计算公式",
+              "icon": "el-icon-grid",
+              "perms": ["enm_base"]
+            },
+            "component": "enm_base/formulaSetting"
           }
         ]
       },
diff --git a/src/views/enm_base/formulaSetting.vue b/src/views/enm_base/formulaSetting.vue
new file mode 100644
index 00000000..d208b984
--- /dev/null
+++ b/src/views/enm_base/formulaSetting.vue
@@ -0,0 +1,104 @@
+<template>
+	<el-container class="page-user">
+		<el-aside style="width: 240px">
+			<el-container>
+				<el-main class="nopadding">
+					<el-menu class="menu" :default-active="page">
+						<el-menu-item-group
+							v-for="group in menu"
+							:key="group.groupName"
+							:title="group.groupName"
+						>
+							<el-menu-item
+								v-for="item in group.list"
+								:key="item.component"
+								:index="item.component"
+								@click="openPage"
+							>
+								<el-icon v-if="item.icon"
+									><component :is="item.icon"
+								/></el-icon>
+								<template #title>
+									<span>{{ item.title }}</span>
+								</template>
+							</el-menu-item>
+						</el-menu-item-group>
+					</el-menu>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main>
+			<Suspense>
+				<template #default>
+					<component :is="page" />
+				</template>
+				<template #fallback>
+					<el-skeleton :rows="3" />
+				</template>
+			</Suspense>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+
+export default {
+	name: "userCenter",
+	components: {
+		calculate: defineAsyncComponent(() =>
+			import("./settings/calculate.vue")
+		),
+	},
+	data() {
+		return {
+			form: {},
+			menu: [
+				{
+					groupName: "配置",
+					list: [
+						{
+							icon: "el-icon-platform",
+							title: "计算系数",
+							component: "calculate",
+						},
+					],
+				},
+			],
+			userData: {},
+			page: "calculate",
+		};
+	},
+	//路由跳转进来 判断from是否有特殊标识做特殊处理
+	beforeRouteEnter(to, from, next) {
+		next((vm) => {
+			if (from.is) {
+				//删除特殊标识，防止标签刷新重复执行
+				delete from.is;
+				//执行特殊方法
+				vm.$alert("路由跳转过来后含有特殊标识，做特殊处理", "提示", {
+					type: "success",
+					center: true,
+				})
+					.then(() => {})
+					.catch(() => {});
+			}
+		});
+	},
+	mounted() {
+		this.getSysConfig();
+	},
+	methods: {
+		openPage(item) {
+			this.page = item.index;
+		},
+
+		getSysConfig() {
+			this.$API.system.config.getInfo.req().then((res) => {
+				this.form = res.base;
+			});
+		},
+	},
+};
+</script>
+<style scoped></style>
diff --git a/src/views/enm_base/settings/calculate.vue b/src/views/enm_base/settings/calculate.vue
new file mode 100644
index 00000000..92788481
--- /dev/null
+++ b/src/views/enm_base/settings/calculate.vue
@@ -0,0 +1,52 @@
+<template>
+	<el-container>
+		<el-main>
+			<el-card header="计算系数" shadow="hover">
+				<el-form>
+					<el-form-item label="料号系数">
+						<el-input-number
+							v-model="form.enm_lhxs"
+							controls-position="right"
+							placeholder="料号系数"
+						></el-input-number>
+					</el-form-item>
+
+					<el-form-item style="float: right">
+						<el-button
+							type="primary"
+							:loading="saveLoading"
+							@click="submitForm"
+							>保存</el-button
+						>
+					</el-form-item>
+				</el-form>
+			</el-card>
+		</el-main>
+	</el-container>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			saveLoading: false,
+			form: {
+				enm_lhxs: "",
+			},
+		};
+	},
+	mounted() {},
+	methods: {
+		submitForm() {
+			this.saveLoading = true;
+			this.$API.system.config.update
+				.req(this.form)
+				.then((res) => {
+					this.saveLoading = false;
+				})
+				.catch((res) => {
+					this.saveLoading = false;
+				});
+		},
+	},
+};
+</script>
diff --git a/src/views/enm_kilnbase/handoverLog.vue b/src/views/enm_kilnbase/handoverLog.vue
index d40cfbc4..bdb8db27 100644
--- a/src/views/enm_kilnbase/handoverLog.vue
+++ b/src/views/enm_kilnbase/handoverLog.vue
@@ -256,7 +256,7 @@ export default {
 	name: "sflog",
 	data() {
 		return {
-			apiObj: this.$API.wpm.sflog.list,
+			apiObj: null,
 			apiObj2: null,
 			query: {
 				shift: "",

From d67ed6ce743a9ab3337121dec4359b0f57a34330 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 7 May 2024 11:19:08 +0800
Subject: [PATCH 08/11] =?UTF-8?q?fix:=E8=B7=AF=E7=94=B1=E5=8F=98=E5=8A=A8?=
 =?UTF-8?q?=EF=BC=8C=E5=B0=86=E6=97=A5=E5=BF=97=E8=AF=A6=E6=83=85=E6=8F=90?=
 =?UTF-8?q?=E5=88=B0enm=5Fbase=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/config/route.js b/src/config/route.js
index 3bf60ab7..23b87b33 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -10,7 +10,8 @@ const routes = [
     "meta": {
       "title": "工作台",
       "icon": "el-icon-home-filled",
-      "type": "menu"
+      "type": "menu",
+      "perms": ["home"]
     },
     "children": [
       //首页
@@ -290,16 +291,6 @@ const routes = [
             },
             "component": "enm_rm/handoverLog"
           },
-          {
-            "name": "logDetail",
-            "path": "/enm_rm/logDetail",
-            "meta": {
-              "title": "日志详情",
-              "icon": "el-icon-document-copy",
-              "hidden": true
-            },
-            "component": "enm_rm/logDetail"
-          },
         ]
       },
       //原料磨——基础
@@ -2367,6 +2358,16 @@ const routes = [
             },
             "component": "enm_base/material"
           },
+          {
+            "name": "logDetail",
+            "path": "/enm_rm/logDetail",
+            "meta": {
+              "title": "日志详情",
+              "icon": "el-icon-document-copy",
+              "hidden": true
+            },
+            "component": "enm_rm/logDetail"
+          },
           {
             "name": "formula",
             "path": "/enm_base/formula",

From e166bd7950907b181183eccec7dca35cea4d717a Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 7 May 2024 11:25:58 +0800
Subject: [PATCH 09/11] =?UTF-8?q?fix:=E8=B7=AF=E7=94=B1=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=EF=BC=88=E7=88=B6=E7=BA=A7=E4=B8=A5=E6=A0=BC=E5=A4=A7=E4=BA=8E?=
 =?UTF-8?q?=E5=AD=90=E7=BA=A7=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 65e8bee7..7d46d67d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,9 +114,8 @@ router.sc_getMenu = () => {
 	userMenu = treeFilter(userRoutes, node => {
 		return node.meta.perms ? node.meta.perms.filter(item => permissions.indexOf(item) > -1).length > 0 : true
 	});
-	// let userMenu = checkRoute(userRoutes, permissions)
-	// var menu = [...userMenu, ...apiMenu]
-	return userMenu
+	let menus = checkRoute(userMenu, permissions)
+	return menus
 }
 
 //转换
@@ -229,19 +228,21 @@ function checkRoute(routes, perms) {
 					}
 				}
 			}
-		}
-		else if (routes[i].children) {
-			for (var m = 0; m < routes[i].children.length; m++) {
-				let child = routes[i].children[m]
-				console.log(m, child)
-				if (child.meta && child.meta.perms) {
-					let has = hasPerm(child.meta.perms, perms)
-					if (!has) {
-						routes[i].children.splice(m, 1)
-					}
-				}
+		}else{
+				routes.splice(i, 1)
 			}
-		}
+		// else if (routes[i].children) {
+		// 	for (var m = 0; m < routes[i].children.length; m++) {
+		// 		let child = routes[i].children[m]
+		// 		console.log(m, child)
+		// 		if (child.meta && child.meta.perms) {
+		// 			let has = hasPerm(child.meta.perms, perms)
+		// 			if (!has) {
+		// 				routes[i].children.splice(m, 1)
+		// 			}
+		// 		}
+		// 	}
+		// }
 	}
 	return routes
 }

From 248b15440ee36186f04690401e5b09ce11c6b3ed Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 7 May 2024 15:58:17 +0800
Subject: [PATCH 10/11] =?UTF-8?q?fix:=E5=8E=BB=E6=8E=89=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E7=9A=84=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/config/route.js b/src/config/route.js
index cbff7345..a49596e4 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -2378,16 +2378,6 @@ const routes = [
             },
             "component": "enm_base/formulaSetting"
           },
-          {
-            "name": "formula",
-            "path": "/enm_base/formula",
-            "meta": {
-              "title": "计算公式",
-              "icon": "el-icon-grid",
-              "perms": ["enm_base"]
-            },
-            "component": "enm_base/formulaSetting"
-          }
         ]
       },
       //每月配置

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 11/11] =?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>