From 3ed7c5f9b181e07a2d65c889d9428f3b2c011eb1 Mon Sep 17 00:00:00 2001
From: zty <zty18395607196@163.com>
Date: Fri, 20 Jun 2025 10:15:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=87=8C=E6=BA=90?=
 =?UTF-8?q?=E7=99=BD=E7=81=B0=E7=BA=BF=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js                    |   32 +
 src/views/bigScreen/index_enm_bh.vue   | 2507 ++++++++++++++++++++++++
 src/views/enm_coal/report_bh.vue       | 1114 +++++++++++
 src/views/enm_kilnbase/report_lybh.vue | 1290 ++++++++++++
 src/views/fac_cal/mpointstat.vue       |    1 +
 src/views/home/llm_chat.vue            |  150 ++
 6 files changed, 5094 insertions(+)
 create mode 100644 src/views/bigScreen/index_enm_bh.vue
 create mode 100644 src/views/enm_coal/report_bh.vue
 create mode 100644 src/views/enm_kilnbase/report_lybh.vue
 create mode 100644 src/views/home/llm_chat.vue

diff --git a/src/config/route.js b/src/config/route.js
index c4b1e90a..86acc2d9 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -567,6 +567,16 @@ const routes = [
 						},
 						component: "enm_coal/report",
 					},
+					{
+						name: "coal_report_bh",
+						path: "/enm_coal/report_bh",
+						meta: {
+							title: "生产报告",
+							// icon: "el-icon-document",
+							perms: ["enm_coal"],
+						},
+						component: "enm_coal/report_bh",
+					},
 					{
 						name: "coal_power",
 						path: "/enm_coal/power",
@@ -756,6 +766,16 @@ const routes = [
 						},
 						component: "enm_kilnbase/report",
 					},
+					{
+						name: "kilnbase_report_lybh",
+						path: "/enm_kilnbase/report_lybh",
+						meta: {
+							title: "生产报告",
+							// icon: "el-icon-document",
+							perms: ["enm_kilnbase"],
+						},
+						component: "enm_kilnbase/report_lybh",
+					},
 					{
 						name: "kilnbase_power",
 						path: "/enm_kilnbase/power",
@@ -3271,6 +3291,18 @@ const routes = [
 		},
 		component: "bigScreen/index_enm_ly",
 	},
+	//凌源白灰线大屏
+	{
+		path: "/bigScreenly_bh",
+		name: "bigScreenly_bh",
+		meta: {
+			title: "数智大屏",
+			icon: "el-icon-platform",
+			perms: ["bigScreenly"],
+			fullpage: true,
+		},
+		component: "bigScreen/index_enm_bh",
+	},
 	//光子科技——数据大屏
 	{
 		path: "/bigScreenP",
diff --git a/src/views/bigScreen/index_enm_bh.vue b/src/views/bigScreen/index_enm_bh.vue
new file mode 100644
index 00000000..77ad72d3
--- /dev/null
+++ b/src/views/bigScreen/index_enm_bh.vue
@@ -0,0 +1,2507 @@
+<template>
+	<div class="container">
+		<header class="pageHeader">
+			<span class="top-line top-line-left"></span>
+			{{ bigScreenName }}
+			<span class="top-line top-line-right"></span>
+			<div class="backHomeBtn" style="right: 100px;" @click.prevent="backHome">退出大屏</div>
+		</header>
+		<div id="model" class="model">
+			<div class="top_block">
+				<div class="top_block_time">
+					<img src="img/photon_top_line.png" />
+					{{ currentDay }}{{ currentWeek }}{{ currentTime }}
+					<img
+						src="img/photon_top_line.png"
+						style="transform: rotateY(180deg)"
+					/>
+				</div>
+				<div class="totalNumContnier">
+					<div class="totalNumWrap totalNum_orange">
+						<img class="" src="img/number_bg_orange.png" />
+						<span class="totalNumText">本月石灰产量</span>
+						<div class="totalNumber">
+							{{ totalData.shuliao }}
+						</div>
+					</div>
+					<div class="totalNumWrap totalNumWrap_green">
+						<img src="img/number_bg_green.png" />
+						<span class="totalNumText">本月煤粉产量</span>
+						<div class="totalNumber">
+							{{ totalData.meimo }}
+						</div>
+					</div>
+					<!-- <div class="totalNumWrap totalNum_blue">
+						<img src="img/number_bg_blue.png" />
+						<span class="totalNumText">本月水泥出厂</span>
+						<div class="totalNumber">
+							{{ totalData.out_cement }}
+						</div>
+					</div> -->
+				</div>
+			</div>
+			<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>
+			</div>
+			<canvas id="renderCanvas"></canvas>
+		</div>
+		<div class="left_block">
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>本月产量</div>
+				</div>
+				<div class="itemBody" id="line1"></div>
+			</div>
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>本月台时</div>
+				</div>
+				<div class="itemBody itemBodyCircle">
+					<div
+						class="item_circle"
+						v-for="item in rateData"
+						:key="item.name"
+					>
+						<el-progress
+							class="elProgress"
+							type="circle"
+							:stroke-width="15"
+							:percentage="item.rate"
+							:color="colors"
+						>
+							<!-- <template > -->
+								<span class="percentage-value"
+									>{{ item.value }}t/h</span
+								>
+								<p class="percentage-label">{{ item.name }}</p>
+							<!-- </template> -->
+						</el-progress>
+					</div>
+				</div>
+			</div>
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>本月工序电量</div>
+				</div>
+				<div class="itemBody" id="line2"></div>
+			</div>
+			<!-- <div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>数据采集</div>
+				</div>
+				<div class="itemBody itemBodyFlex">
+					<div
+						id="pieChart"
+						style="width: 100px; height: 300px"
+					></div>
+					<el-table
+						id="elTable"
+						style="width: 250px"
+						:data="tableData"
+						:header-cell-style="{
+							'text-align': 'center',
+							color: '#fff',
+						}"
+						:cell-style="{ 'text-align': 'center', color: '#fff' }"
+					>
+						<el-table-column
+							prop="code"
+							label="位号"
+						></el-table-column>
+						<el-table-column label="数值">
+							<template #default="scope">
+								{{ scope.row.last_data.last_val }}
+							</template>
+						</el-table-column>
+						<el-table-column label="状态" width="50">
+							<template #default="scope">
+								<div
+									v-if="scope.row.gather_state == 0"
+									class="successCircle"
+								></div>
+								<div v-else class="warningCircle"></div>
+							</template>
+						</el-table-column>
+					</el-table>
+				</div>
+			</div> -->
+		</div>
+		<div class="right_block">
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>本月烧成电量</div>
+				</div>
+				<div class="itemBody itemBodyFlex">
+					<div id="radar" style="height: 100%"></div>
+					<div class="bodyList">
+						<table>
+							<tbody>
+								<tr class="bodyListItem tableHeader">
+									<th class="bodyListItem_name">点位</th>
+									<th class="bodyListItem_name">
+										电耗<span
+											style="
+												color: #fff;
+												font-weight: 500;
+												font-size: 12px;
+											"
+											>kW·h</span
+										>
+									</th>
+								</tr>
+								<tr
+									v-for="item in elecData"
+									:key="item"
+									class="bodyListItem bodyListItemBg"
+								>
+									<td class="bodyListItem_name">
+										{{ item.name }}
+									</td>
+									<td class="bodyListItem_num">
+										{{ item.value }}
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>本月能源消耗</div>
+				</div>
+				<div class="itemBody" id="line3"></div>
+			</div>
+			<div class="flexItem">
+				<div class="itemTitle">
+					<div class="itemTitleIcon"></div>
+					<div>能源数据</div>
+				</div>
+				<div class="itemBody" style="padding: 5%">
+					<div class="elecItem">
+						<div class="elecItem_wrap">
+							<span>本月单位电耗</span>
+							<p class="elec_number">
+								{{ (Number(hotData.elec_consume_unit)).toFixed(2) }}
+								<span class="elec_unit">kW·h</span>
+							</p>
+						</div>
+					</div>
+					<div class="elecItem">
+						<div class="elecItem_wrap">
+							<span>本年单位电耗</span>
+							<p class="elec_number">
+								{{ (Number(hotData.coal_consume_unit)).toFixed(2) }}
+								<span class="elec_unit">kW·h</span>
+							</p>
+						</div>
+					</div>
+					<!-- <div class="elecItem">
+						<div class="elecItem_wrap">
+							<span>煤磨综合电耗</span>
+							<p class="elec_number">
+								{{ (Number(hotData.sn_cen_consume_unit)).toFixed(2)}}
+								<span class="elec_unit">kgce/t</span>
+							</p>
+						</div>
+					</div> -->
+					<!-- <div class="elecItem">
+						<div class="elecItem_wrap">
+							<span>煤磨综合能耗</span>
+							<p class="elec_number">
+								{{ (Number(hotData.sn_cen_consume_unit)).toFixed(2)}}
+								<span class="elec_unit">kgce/t</span>
+							</p>
+						</div>
+					</div> -->
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import * as echarts from "echarts";
+import value from "./../enm_energy/value.vue";
+import config from "@/config";
+import "animate.css";
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
+export default {
+	beforeRouteLeave(to, from, next) {
+// 页面离开时刷新页面
+ 	window.location.reload();
+	next(); 
+ 	},
+	components: { value },
+	data() {
+		return {
+			colors: [
+				{ color: "#f95050", percentage: 20 },
+				{ color: "#e6a23c", percentage: 40 },
+				{ color: "#1989fa", percentage: 60 },
+				{ color: "#02f5f2", percentage: 80 },
+				{ color: "#5cb87a", percentage: 100 },
+			],
+			KHData: [],
+			SMData: [],
+			IMData: [],
+			factoryName: "",
+			// initialAlpha: 2.73,
+			// initialBeta: 1.24,
+			// initialRadius: 8,
+			initialAlpha: 4.03,
+			initialBeta: 1,
+			initialRadius: 9.5,
+			initialTarget: null,
+			resizeTimeout: null,
+			loadedPercent: 0,
+			currentLightMesh: null,
+			infoVisibel: false,
+			clickVisible: false,
+			percentage: 25,
+			updateTime: "2023-08-17 16:00:00",
+			yurefadianId: "",
+			currentTime: "",
+			currentWeek: "",
+			currentYear: "",
+			currentMonth: "",
+			currentDay: "",
+			timerTime: null,
+			timerData: null,
+			start_date: "",
+			end_date: "",
+			dialogData: {
+				deptName: "",
+			},
+			currentData: {
+				deptName: "",
+			},
+			deptName: "入窑生料",
+			heightTimer: null,
+			count_shuliao: 0,
+			count_meihao: 0,
+			count_elec: 0,
+			blockTableHeight: 0,
+			xAxisDate: [],
+			linearGradientColors: [
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(255, 255, 0)",
+					},
+					{
+						offset: 1,
+						color: "rgb(255, 255, 0)",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(0, 221, 255)",
+					},
+					{
+						offset: 1,
+						color: "rgb(77, 119, 255)",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(255, 162, 255)",
+					},
+					{
+						offset: 1,
+						color: "rgb(116, 21, 219)",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(255, 0, 135)",
+					},
+					{
+						offset: 1,
+						color: "rgb(135, 0, 157)",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(255, 191, 0)",
+					},
+					{
+						offset: 1,
+						color: "rgb(224, 62, 76)",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(246, 5, 213)",
+					},
+					{
+						offset: 1,
+						color: "rgb(244, 130, 9 )",
+					},
+				]),
+				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{
+						offset: 0,
+						color: "rgb(18, 6, 248)",
+					},
+					{
+						offset: 1,
+						color: "rgb(6, 248, 80)",
+					},
+				]),
+			],
+			sectionNames: {
+				电石渣堆棚: "电石渣",
+				原料磨及废气处理: "原料磨",
+				窑: "回转窑",
+				窑头: "煤磨",
+				水泥配料库: "水泥磨",
+				水泥储存及散装库: "水泥包装",
+			},
+			totalData: {
+				shuliao: 0,
+				meimo: 0,
+				out_cement: 0,
+			},
+			rateData: [
+                { name: "煤磨", value: 0, rate:0 },
+				{ name: "回转窑", value: 0, rate:0 },
+				// { name: "原料磨", value: 0, rate:0 },			
+				// { name: "水泥磨", value: 0 , rate:0 },
+			],
+			elecData: [
+				// { name: "电石渣工序", value: 0 },
+				// { name: "生料辅料工序", value: 0 },
+				{ name: "高温风机", value: 0 },
+				{ name: "磨球主电机", value: 0 },
+				{ name: "窑尾高温风机", value: 0 },
+				// { name: "水泥包装工序", value: 0 },
+			],
+			hotData: {
+				elec_consume_unit: 0, //本月单位电耗
+				coal_consume_unit: 0, //本年单位电耗
+			},
+			dicData:{
+				b_sl_elec:0,
+				b_sl_coal:0,
+				b_sl_enegy:0,
+				b_sn_enegy:0,
+				b_sn_elec:0,
+				b_snbz_elec:0,
+			},
+			tableData: [],
+			tezhongData: [],
+			option: {
+				// color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						type: "cross",
+						label: {
+							backgroundColor: "#6a7985",
+						},
+					},
+					textStyle: {
+						color: "#02f5f2",
+					},
+					backgroundColor: "rgba(255,255,255,0.3)",
+				},
+				legend: {
+					icon: "stack",
+					top: 5,
+					right: 5,
+					data: [],
+				},
+				grid: {
+					left: "2%",
+					right: "4%",
+					bottom: "5%",
+					containLabel: true,
+				},
+				xAxis: {
+					type: "category",
+					data: [],
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+					splitLine: {
+						show: false,
+					},
+				},
+				yAxis: [
+					{
+						name: "",
+						type: "value",
+						position: "left",
+						alignTicks: true,
+						nameTextStyle: {
+							color: "#ffffff",
+						},
+						axisLabel: {
+							color: "#ffffff",
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								type: "dashed", //y轴分割线类型
+								color: "rgba(102,102,102,0.9)",
+								width: 1,
+							},
+						},
+					},
+					{
+						name: "",
+						type: "value",
+						position: "right",
+						alignTicks: true,
+						nameTextStyle: {
+							color: "#00DDFF",
+						},
+						axisLabel: {
+							color: "#00DDFF",
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								type: "dashed", //y轴分割线类型
+								color: "rgba(102,102,102,0.9)",
+								width: 1,
+							},
+						},
+					}
+				],
+				series: [],
+			},
+			radarSeriesData: [0, 0, 0, 0, 0],
+			radarOption: {
+				radar: {
+					indicator: [
+                        { name: "高温风机" },
+						{ name: "磨球" },
+						// { name: "电石渣工序" },
+						// { name: "生料辅料工序" },
+						{ name: "窑尾高温风机" },
+						// { name: "水泥包装工序" },
+					],
+					name: {
+						textStyle: {
+							padding: [15, 15], // 控制文字padding
+						},
+					},
+					nameGap: 2,
+					radius: 63, //缩放
+					center: ["50%", "50%"], //位置
+					// shape: "circle",
+					splitNumber: 4,
+					axisName: {
+						color: "#2adbbc",
+						padding: [10, 10],
+					},
+					splitLine: {
+						lineStyle: {
+							color: [
+								"rgba(238, 197, 102, 0.1)",
+								"rgba(238, 197, 102, 0.2)",
+								"rgba(238, 197, 102, 0.4)",
+								"rgba(238, 197, 102, 0.7)",
+								"rgba(238, 197, 102, 1)",
+							].reverse(),
+						},
+					},
+					splitArea: {
+						show: false,
+					},
+					axisLine: {
+						lineStyle: {
+							color: "rgba(238, 197, 102, 0.5)",
+						},
+					},
+				},
+				series: {
+					name: "工序电耗",
+					type: "radar",
+					lineStyle: {
+						width: 1,
+						opacity: 0.5,
+					},
+					data: [
+						{
+							value: [120, 118, 130, 100, 99],
+							name: "Data C",
+							// symbol: "rect",
+							symbolSize: 5,
+							lineStyle: {
+								type: "dashed",
+							},
+							//点的颜色
+							itemStyle: {
+								color: "#ffa500",
+							},
+							areaStyle: {
+								opacity: 0.7,
+								color: new echarts.graphic.RadialGradient(
+									0.1,
+									0.6,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgb(241, 56, 4)",
+										},
+										{
+											offset: 1,
+											color: "rgb(12, 35, 196)",
+										},
+									]
+								),
+							},
+							label: {
+								show: true,
+								color: "#df6d14",
+								formatter: function (params) {
+									return params.value;
+								},
+							},
+						},
+					],
+				},
+			},
+			intervalId1:null,
+			intervalId2:null,
+			intervalId3:null,
+		};
+	},
+	mounted() {
+		loadBabylon().then(()=>{
+			this.initView()
+		})
+	},
+	beforeUnmount() {
+		// 清除所有定时器，避免内存泄漏
+		if (this.timerTime) {
+		clearInterval(this.timerTime);}
+		if (this.timerOther) {
+		clearInterval(this.timerOther);}
+		if(this.intervalId1!==null){
+			clearInterval(this.intervalId1);
+		}
+		if(this.intervalId2!==null){
+			clearInterval(this.intervalId2);
+		}
+		if(this.intervalId3!==null){
+			clearInterval(this.intervalId3);
+		}
+	},
+	methods: {
+		initView() {
+			let that = this;
+		that.bigScreenName =
+			that.$TOOL.data.get("BASE_INFO").base.base_name;
+		that.showTime();
+		that.addListener();
+		//一天的毫秒数
+		let nowDate = new Date();
+		let year = nowDate.getFullYear();
+		let month = nowDate.getMonth() + 1;
+		let day = nowDate.getDate();
+		let days = new Date(year, month, 0).getDate();
+		// month = month < 10 ? "0" + month : month;
+		that.currentYear = year;
+		that.currentMonth = month;
+		that.currentDay = day;
+		let datelist = [];
+		let tezhongData = [];
+		function getRandomNumber(min, max) {
+			return Math.floor(Math.random() * (max - min + 1)) + min;
+		}
+		for (let i = 0; i < days; i++) {
+			datelist.push(i + 1);
+		}
+		for (let i = 0; i < day; i++) {
+			let randomNumber = getRandomNumber(50, 5000);
+			tezhongData.push(randomNumber);
+		}
+		that.tezhongData = tezhongData;
+		that.option.xAxis.data = datelist;
+		that.xAxisDate = datelist;
+		that.$nextTick(() => {
+			that.initDomStyle();
+			that.initFactory();
+			this.productNum();
+			this.waterAirData();
+			this.getMonthData();
+			this.eqRate();
+			this.generation();//本月能源数据
+			this.getDicData();//获取字典数据
+			this.proceElec();
+			this.qualAnalys();
+			this.dataCollect();
+			that.timerTime = setInterval(() => {
+				that.showTime();
+			}, 1000);
+			that.timerOther = setInterval(() => {
+				that.initializeData();
+			}, 180000); // 3分钟更新一次
+		});
+		},
+		backHome(){
+			// this.$router.push({ name: "user" });
+			this.$router.go(-1);
+		},
+		initializeData() {
+			this.productNum();
+			this.waterAirData();
+			this.getMonthData();
+			this.eqRate();
+			this.generation();
+			this.proceElec();
+			this.qualAnalys();
+			this.dataCollect();
+		},
+		productNum() {
+				let that = this;
+				// 初始化option1和图表
+				let option1 = that.deepCopy(that.option);
+				let chartDom = document.getElementById("line1");
+				let myChart = echarts.init(chartDom);
+
+				let seriesData = new Array(31).fill(0); // 假设有31天的数据，初始化为0
+				let seriesData1 = new Array(31).fill(0);
+				let seriesData2 = new Array(31).fill(0);
+
+				// 获取回转窑数据
+				this.$API.mtm.mgroup.list.req({ page: 0, search: "回转窑" }).then((res) => {
+					that.huihzuanyaoId = res[0]?.id;
+					let query = {
+						page: 0,
+						year_s: that.currentYear,
+						month_s: that.currentMonth,
+						type: "day_s",
+						mgroup: that.huihzuanyaoId,
+					};
+					return this.$API.enm.enstat.req(query);
+				}).then((response) => {
+					response.forEach((item) => {
+						let ind = item.day_s - 1;
+						seriesData[ind] = item.total_production || 0; // 防止空数据
+						
+					});
+				}).then(() => {
+					// 获取水泥磨数据
+					return this.$API.mtm.mgroup.list.req({ page: 0, search: "煤磨" });
+				}).then((res) => {
+					that.shuinimoId = res[0]?.id;
+					let query = {
+						page: 0,
+						year_s: that.currentYear,
+						month_s: that.currentMonth,
+						type: "day_s",
+						mgroup: that.shuinimoId,
+					};
+					return this.$API.enm.enstat.req(query);
+				}).then((response) => {
+					response.forEach((item) => {
+						let ind = item.day_s - 1;
+						seriesData1[ind] = item.total_production || 0;
+					});
+				}).then(() => {
+					// 获取水泥包装数据
+					return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥包装" });
+				}).then((res) => {
+					that.shuinimoId = res[0]?.id;
+					let query = {
+						page: 0,
+						year_s: that.currentYear,
+						month_s: that.currentMonth,
+						type: "day_s",
+						mgroup: that.shuinimoId,
+					};
+					return this.$API.enm.enstat.req(query);
+				}).then((response) => {
+					let maxId;
+					response.forEach((item) => {
+						let ind = item.day_s - 1;
+						maxId = ind;
+						seriesData2[ind] = item.total_production || 0;
+					});
+					// 更新图表数据
+					option1.color = ['#FFFF00','#CC00FF', '#FFBF00']
+					option1.legend.data = [
+				{
+					name: "石灰(t)",
+					textStyle: {
+						color: "#fff",
+					},
+					borderRadius: 2,
+					itemStyle: {
+						color: that.linearGradientColors[0],
+					},
+				},
+				{
+					name: "煤粉(t)",
+					textStyle: {
+						color: "#fff",
+					},
+					borderRadius: 2,
+					itemStyle: {
+						color: that.linearGradientColors[2],
+					},
+				},
+				// {
+				// 	name: "出厂水泥(t)",
+				// 	textStyle: {
+				// 		color: "#fff",
+				// 	},
+				// 	borderRadius: 2,
+				// 	itemStyle: {
+				// 		color: that.linearGradientColors[4],
+				// 	},
+				// },
+			];
+					option1.series = [
+						{
+							name: "石灰(t)",
+							type: "line",
+							smooth: true,
+							lineStyle: {
+								width: 0,	
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.8,
+								color: that.linearGradientColors[0],
+							},
+							emphasis: {
+								focus: "series",
+							},
+							data: seriesData,
+						},
+						{
+							name: "煤粉(t)",
+							type: "line",
+							smooth: true,
+							lineStyle: {
+								width: 0,
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.8,
+								color: that.linearGradientColors[2],
+							},
+							emphasis: {
+								focus: "series",
+							},
+							data: seriesData1,
+						},
+						// {
+						// 	name: "出厂水泥(t)",
+						// 	type: "line",
+						// 	smooth: true,
+						// 	lineStyle: {
+						// 		width: 0,
+						// 	},
+						// 	showSymbol: false,
+						// 	areaStyle: {
+						// 		opacity: 0.8,
+						// 		color: that.linearGradientColors[4],
+						// 	},
+						// 	emphasis: {
+						// 		focus: "series",
+						// 	},
+						// 	data: seriesData2,
+						// },
+					];
+					myChart.setOption(option1);
+					let index2 = 0;
+					if(that.intervalId1 !== null){
+						clearInterval(that.intervalId1);
+						that.intervalId1 = null;
+					}
+					that.intervalId1 = setInterval(function () {
+						if (index2 <= maxId) {
+							myChart.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+							});
+							myChart.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index2,
+							});
+							myChart.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index2,
+							});
+							index2++;
+						} else {
+							index2 = 0;
+						}
+					}, 2000);
+				});
+				},
+		getMonthData() {
+		    				// 获取回转窑数据
+				let that = this;
+				this.$API.mtm.mgroup.list.req({ page: 0, search: "回转窑" }).then((res) => {
+					that.huihzuanyaoId = res[0]?.id; //回转窑id
+					let query = {
+						page: 0,
+						year_s: that.currentYear,
+						month_s: that.currentMonth,
+						type: "month_s",
+						mgroup: that.huihzuanyaoId,
+					};
+					return this.$API.enm.enstat.req(query);
+				}).then((response) => {
+				    response.forEach((item) => {
+				        if (item.month_s == that.currentMonth) {
+							that.totalData.shuliao = item.total_production; //总产量
+						}
+				    })
+				}).then(() => {
+				    // 获取煤磨数据
+					return this.$API.mtm.mgroup.list.req({ page: 0, search: "煤磨" });
+				}).then((res) => {
+				    that.shuinimoId = res[0]?.id; 
+					let query = {
+						page: 0,
+						year_s: that.currentYear,
+						month_s: that.currentMonth,
+						type: "month_s",
+						mgroup: that.shuinimoId,
+					};
+					return that.$API.enm.enstat.req(query);
+                }).then((response)=>{
+                    response.forEach((item) => {
+				        if (item.month_s == that.currentMonth) {
+							that.totalData.meimo = item.total_production; //总产量
+						}
+				    })
+                })
+			},
+		waterAirData() {
+			let that = this;
+			// 初始化option2和图表
+			let option3 = that.deepCopy(that.option); // 假设你有this.option作为基础配置
+			let chartDom = document.getElementById("line2");
+			let myChart = echarts.init(chartDom);
+
+			// 初始化各个series数据数组
+			let seriesData1 = new Array(31).fill(0); 
+			let seriesData3 = new Array(31).fill(0); 
+
+			// 定义查询参数的生成函数
+			function generateQuery(mpointId) {
+				return {
+					page: 0,
+					year: that.currentYear,
+					month: that.currentMonth,
+					type: "day",
+					mpoint: mpointId,
+				};
+			}
+			function generateQueryMgroup(mgroupId) {
+				return {
+					page: 0,
+					year_s: that.currentYear,
+					month_s: that.currentMonth,
+					type: "day_s",
+					mgroup: mgroupId,
+				};
+			}
+			// 第一个API查询
+			let query1 = generateQueryMgroup("3854338262768619520");
+			this.$API.enm.enstat.req(query1).then((response) => {
+				//反转response数据
+				// response.reverse();
+				response.forEach((item) => {
+						let ind = item.day_s - 1;
+						seriesData1[ind] = item.elec_consume || 0;
+				});
+				
+				// 第二个API查询
+				let query2 = generateQueryMgroup("3854338094887559168");
+				return this.$API.enm.enstat.req(query2);
+				
+			}).then((response) => {
+				let maxId;	
+				response.forEach((item) => {	
+						let ind = item.day_s - 1;					
+						seriesData3[ind] = item.elec_consume || 0;
+						maxId = ind;
+				});
+				// 第三个API查询
+				// let query3 = generateQuery("3853763443597520896");
+				// response.reverse();
+				// return this.$API.enm.mpointstat.list.req(query3);
+			// 更新图表数据
+			option3.color = ['#FFBF00','#6495ED', '#CC00FF']
+			option3.legend.data = [
+			{
+					name: "烧成工序(kWh)",
+					textStyle: {
+						color: "#fff",
+					},
+					borderRadius: 2,
+					itemStyle: {
+						color: that.linearGradientColors[0],
+					},
+				},
+				{
+					name: "煤粉工序(kWh)",
+					textStyle: {
+						color: "#fff",
+					},
+					borderRadius: 2,
+					itemStyle: {
+						color: that.linearGradientColors[1],
+					},
+				},
+				
+			];
+			option3.series = [
+				{
+				name: '烧成工序(kWh)',
+				type: 'line',
+				data: seriesData1,
+				lineStyle: {
+					color: that.linearGradientColors[0],
+				},
+				},
+				{
+				name: '煤粉工序(kWh)',
+				type: 'line',
+				data: seriesData3,
+				lineStyle: {
+					color: that.linearGradientColors[1],
+				},
+				},
+			]
+			myChart.setOption(option3); // 设置更新后的图表
+			let index3 = 0;
+			if(that.intervalId2 !== null){
+				clearInterval(that.intervalId2);
+				that.intervalId2 = null;
+			}
+			that.intervalId2 = setInterval(function () {
+				if (index3 <= maxId) {
+					myChart.dispatchAction({
+					type: "downplay",
+					seriesIndex: 0,
+					});
+					myChart.dispatchAction({
+					type: "highlight",
+					seriesIndex: 0,
+					dataIndex: index3,
+					});
+					myChart.dispatchAction({
+					type: "showTip",
+					seriesIndex: 0,
+					dataIndex: index3,
+					});
+					index3++;
+				} else {
+					index3 = 0;
+				}
+				}, 2000);
+			});
+		},
+			//水泥磨
+		getShiNengMouData() {
+			let that = this;
+			let query = {};
+			query.page = 0;
+			query.year_s = that.currentYear;
+			query.month_s = that.currentMonth;
+			query.type = "month_s";
+			this.$API.enm.enstat.req(query).then((response) => {
+			
+		})	
+		},
+		//台时产量
+		eqRate() {
+			let that = this;
+			let query = {};
+			query.page = 0;
+			query.year_s = that.currentYear;
+			query.month_s = that.currentMonth;
+			query.type = "month_s";
+			this.$API.enm.enstat.req(query).then((response) => {
+				let seriesData = [];
+				let data = response;
+				data.forEach((item) => {
+					if (item.mgroup_name == "回转窑") {
+						that.rateData[0].value = item.production_hour
+						that.rateData[0].rate = item.run_rate
+						;
+					} else if (item.mgroup_name == "煤磨") {
+						that.rateData[1].value = item.production_hour
+						that.rateData[1].rate = item.run_rate
+						;}
+					// } else if (item.mgroup_name == "原料磨") {
+					// 	that.rateData[2].value = item.production_hour
+					// 	that.rateData[2].rate = item.run_rate
+					// 	;
+					// } else if (item.mgroup_name == "水泥磨") {
+					// 	that.rateData[3].value = item.production_hour
+					// 	that.rateData[3].rate = item.run_rate
+					// 	};
+				});
+			});
+		},
+		generation() {
+			let that = this;
+			this.$API.mtm.mgroup.list
+				.req({ page: 0, search: "回转窑" })
+				.then((res) => {
+					that.yurefadianId = res[0].id;
+					let params = {};
+					params.page = 0;
+					params.year_s = that.currentYear;
+					params.month_s = that.currentMonth;
+					params.type = "month_s";
+					params.mgroup = that.yurefadianId;
+					this.$API.enm.enstat.req(params).then((ress) => {
+						that.hotData.elec_consume_unit =Number(ress[0].elec_consume_unit).toFixed(2);
+						// that.hotData.coal_consume_unit =Number(ress[0].coal_consume_unit).toFixed(2);
+					});
+					params.type = "year_s";
+					params.month_s = null;
+					this.$API.enm.enstat.req(params).then((ress) => {
+						that.hotData.coal_consume_unit =Number(ress[0].elec_consume_unit).toFixed(2);
+					});
+				});
+			// this.$API.mtm.mgroup.list
+			// .req({ page: 0, search: "煤磨" })
+			// .then((res) => {
+			// 	that.yurefadianId = res[0].id;
+			// 	let params = {};
+			// 	params.page = 0;
+			// 	params.year_s = that.currentYear;
+			// 	params.month_s = that.currentMonth;
+			// 	params.type = "month_s";
+			// 	params.mgroup = that.yurefadianId;
+			// 	this.$API.enm.enstat.req(params).then((ress) => {
+			// 		that.hotData.cen_consume_unit =Number(ress[0].cen_consume_unit).toFixed(2);
+			// 		that.hotData.sn_cen_consume_unit = Number(ress[0].sn_cen_consume_unit).toFixed(2);
+			// 	});
+			// });
+		},
+		//获取本月能源数据字典数据
+		getDicData(){
+			let that = this;
+			this.$API.system.dict.list.req({ type__code: "big_data",page:0 }).then((res) => {
+				that.dicData = {};
+				res.forEach((item, index) => {
+				    that.dicData[item.code] = Number(item.value).toFixed(2);
+				})
+			});
+		},
+		//工序电耗
+		proceElec() {
+			let that = this;
+			let seriesData = [0, 0, 0]; // 初始化数组
+
+			function generateQuery(mpointId) {
+				return {
+				year: that.currentYear,
+				month: that.currentMonth,
+				type: "month",
+				mpoint: mpointId,
+				};
+			}
+
+			let query1 = generateQuery("3853763443194867712");
+			let query2 = generateQuery("3853763443379417088");
+			let query3 = generateQuery("3853763443597520896");
+
+			// 第一个请求
+			that.$API.enm.mpointstat.list.req(query1).then((res1) => {
+				res1.results.forEach((item) => {
+				seriesData[0] = item.val || 0;
+				that.elecData[0].value = item.val || 0;
+				});
+
+				// 第二个请求
+				return that.$API.enm.mpointstat.list.req(query2);
+			}).then((res2) => {
+				res2.results.forEach((item) => {
+				seriesData[1] = item.val || 0;
+				that.elecData[1].value = item.val || 0;
+				});
+
+				// 第三个请求
+				return that.$API.enm.mpointstat.list.req(query3);
+			}).then((res3) => {
+				res3.results.forEach((item) => {
+				seriesData[2] = item.val || 0;
+				that.elecData[2].value = item.val || 0;
+				});
+				// 设置图表
+				that.radarOption.series.data[0].value = seriesData;
+
+				let radarDom = document.getElementById("radar");
+				let radarChart = echarts.init(radarDom);
+				radarChart.setOption(that.radarOption);
+			}).catch((error) => {
+				console.error("请求失败：", error);
+			});
+		},
+		
+		//能源消耗
+		qualAnalys() {
+			let that = this;
+			// 初始化option2和图表
+			let option5 = that.deepCopy(that.option); // 假设你有this.option作为基础配置
+			let chartDom = document.getElementById("line3");
+			let myChart = echarts.init(chartDom);
+
+			// 初始化各个series数据数组
+			let seriesData = new Array(31).fill(0); 
+			let seriesData1 = new Array(31).fill(0); 
+
+			// 定义查询参数的生成函数
+			function generateQuery(mgroupId) {
+				return {
+					page: 0,
+					year_s: that.currentYear,
+					month_s: that.currentMonth,
+					type: "day_s",
+					mgroup: mgroupId,
+				};
+			}
+			function generateQueryMpoint(mpointId) {
+				return {
+					page: 0,
+					type: "day_s",
+					year_s: that.currentYear,
+					month_s: that.currentMonth,
+					mpoint: mpointId,
+				};
+			}
+			// 第一个API查询 白灰线电量数据
+			let query1 = generateQueryMpoint("3853763443714961408");
+			let query2 = generateQueryMpoint("3853763444235055104");
+			this.$API.enm.mpointstat.list.req(query1).then((response) => {
+				response.forEach((item) => {
+                let ind = item.day_s - 1;
+                seriesData[ind] = item.val || 0;
+				});
+				return this.$API.enm.mpointstat.list.req(query2)
+			}).then((response) => {
+				response.forEach((item) => {
+                let ind = item.day_s - 1;
+                seriesData1[ind] = item.val || 0;
+			})
+		}).then(() => {
+				let maxId;
+			    // response.forEach((item) => {
+				// 	let ind = item.day_s - 1;
+					maxId = 31;
+				// 		seriesData1[ind] = item.val || 0;
+			    // 	});
+				// 更新图表数据
+                
+				option5.color = ['#CC00FF', '#FFBF00']
+				option5.legend.data = [
+					{
+						name: "烧成系统配电变压器(kW·h)",
+						textStyle: {
+							color: "#fff",
+						},
+						borderRadius: 2,
+						itemStyle: {
+							color: that.linearGradientColors[2],
+						},
+					},
+					{
+						name: "废气系统配电变压器(kW·h)",
+						textStyle: {
+							color: "#fff",
+						},
+						borderRadius: 2,
+						itemStyle: {
+							color:that.linearGradientColors[4],
+						},
+					},
+				];
+				option5.series = [
+					{
+					name: '烧成系统配电变压器(kW·h)',
+					type: 'line',
+					yAxisIndex: 0,
+					data: seriesData,
+					smooth: true,
+					showSymbol: false,
+					areaStyle: {
+						opacity: 0.8,
+						color: that.linearGradientColors[2],
+					},
+					lineStyle: {
+						color: that.linearGradientColors[2],
+					},
+					emphasis: {
+						focus: "series",
+					},
+					},
+					
+					{
+					name: '废气系统配电变压器(kW·h)',
+					type: 'line',
+					yAxisIndex: 1,
+					data: seriesData1,
+					smooth: true,
+					showSymbol: false,
+							areaStyle: {
+								opacity: 0.8,
+								color: that.linearGradientColors[4],
+							},
+					lineStyle: {
+						color: that.linearGradientColors[4],
+					},
+					emphasis: {
+								focus: "series",
+							},
+					},
+				];
+				// option5.xAxis.data = that.datelist;
+				myChart.setOption(option5); // 设置更新后的图表
+				let index3 = 0;
+				if(that.intervalId3 !== null){
+					clearInterval(that.intervalId3);
+					that.intervalId3 = null;
+				}
+				that.intervalId3 = setInterval(function () {
+				if (index3 <= maxId) {
+					myChart.dispatchAction({
+					type: "downplay",
+					seriesIndex: 0,
+					});
+					myChart.dispatchAction({
+					type: "highlight",
+					seriesIndex: 0,
+					dataIndex: index3,
+					});
+					myChart.dispatchAction({
+					type: "showTip",
+					seriesIndex: 0,
+					dataIndex: index3,
+					});
+					index3++;
+				} else {
+					index3 = 0;
+				}
+				}, 2000);
+			});
+		},
+		//数据采集——设备运行状态
+		dataCollect() {
+			let that = this;
+			let params = {
+				enabled: true,
+				type: 10,
+				page: 0,
+				query: "{ id, name, code, last_data, gather_state }",
+			};
+			that.tableData = [];
+			function getTypeof(variable) {
+				return typeof variable;
+			}
+			that.$API.enm.mpoint.list.req(params).then((res) => {
+				let success_num = 0;
+				let error_num = 0;
+				res.forEach((item, index) => {
+					if (item.gather_state == 0) {
+						success_num++;
+					} else {
+						error_num++;
+					}
+					if (item.last_data.last_val) {
+						if (getTypeof(item.last_data.last_val) == "number") {
+							item.last_data.last_val.toFixed(2);
+						}
+					}
+					that.tableData.push(item);
+				});
+			});
+		},
+		showTime() {
+			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
+			this.currentWeek = this.$TOOL.dateFormat(new Date(), "week");
+			this.currentDay = this.$TOOL.dateFormat(
+				new Date(),
+				"yyyy年MM月dd日"
+			);
+		},
+		addListener() {
+			var that = this;
+			window.addEventListener("resize", function () {
+				if (this.resizeTimeout) {
+					clearTimeout(this.resizeTimeout);
+				}
+				// 设置一个新的 resizeTimeout，延迟调整样式
+				this.resizeTimeout = setTimeout(function () {
+					that.initDomStyle();
+				}, 300); // 延迟 300 毫秒，可以根据需要调整
+			});
+		},
+		initDomStyle() {
+			let that = this;
+			// 获取窗口的总高度
+			var windowHeight = window.innerHeight;
+			var windowWidth = window.innerWidth;
+			var container = document.getElementsByClassName("container")[0];
+			var model = document.getElementsByClassName("model")[0];
+			var left_block = document.getElementsByClassName("left_block")[0];
+			var right_block = document.getElementsByClassName("right_block")[0];
+			var radarChart = document.getElementById("radar");
+			if (windowWidth > 960) {
+				container.style.overflow = "hidden";
+				container.style.height = windowHeight + "px";
+				model.style.position = "absolute";
+				model.style.height = windowHeight - 3 + "px";
+				model.style.top = 0;
+				left_block.style.position = "absolute";
+				left_block.style.width = "25%";
+				// left_block.style.display = "none";
+				right_block.style.position = "absolute";
+				right_block.style.width = "25%";
+				// right_block.style.display = "none";
+				var itemHeight = Math.round((windowHeight - 150) / 3);
+				var itemBodyHeight = itemHeight - 40;
+				var flexItems = document.getElementsByClassName("flexItem");
+				var itemBodys = document.getElementsByClassName("itemBody");
+				for (var i = 0; i < flexItems.length; i++) {
+					var flexItem = flexItems[i];
+					flexItem.style.height = itemHeight + "px";
+				}
+				for (var i = 0; i < itemBodys.length; i++) {
+					var itemBody = itemBodys[i];
+					itemBody.style.height = itemBodyHeight + "px";
+				}
+				// elTable.style.height = itemBodyHeight - 20 + "px";
+				let pieWidth = Math.round(windowWidth / 100) * 22 - 180;
+				let radarWidth = Math.round(windowWidth / 100) * 22 - 130;
+				// pieChart.style.width = pieWidth + "px";
+				radarChart.style.width = radarWidth + "px";
+			} else {
+				container.style.overflow = "auto";
+				var chartHeight = windowWidth * 0.6;
+				model.style.position = "relative";
+				model.style.height = chartHeight;
+			}
+			if (that.engine != null) {
+				that.engine.resize();
+			}
+			that.resizeChart("line1");
+			// that.resizeChart("pieChart");
+			that.resizeChart("radar");
+			that.resizeChart("line2");
+			that.resizeChart("line3");
+		},
+		resizeChart(name) {
+			// 根据name resize chart
+			var myChart = echarts.getInstanceByDom(
+				document.getElementById(name)
+			);
+			if (myChart != undefined) {
+				myChart.resize();
+			}
+		},
+		initFactory() {
+			let 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";
+			};
+
+			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: 50,
+					height: 50,
+				});
+				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;
+
+				// 加载背景图片
+				const backgroundImage = new BABYLON.Layer(
+					"",
+					"img/photon_bg.png",
+					scene,
+					true
+				);
+				// 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.45, 1.588, 1.93)
+					new BABYLON.Vector3(-0.588, -0.3, 0.5)
+				);
+				that.camera = camera;
+				that.initialTarget = camera.getTarget();
+				camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
+				camera.attachControl(canvas, true);
+				camera.maxZ = 1000; // 调整适当的值
+				// 相机限制
+				camera.lowerRadiusLimit = 8;
+				camera.upperRadiusLimit = 20;
+
+				// 灯光
+				const light = new BABYLON.HemisphericLight(
+					"light",
+					new BABYLON.Vector3(1, 1, 0)
+				);
+				light.intensity = 1.8;
+
+				// 全屏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 = "-15%";
+				advancedTexture.addControl(control_main);
+
+				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(() => {
+					that.flyToMesh();
+				});
+
+				// 高亮显示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);
+
+				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/ly.glb";
+
+				BABYLON.SceneLoader.Append(
+					remoteGlbUrl,
+					"",
+					scene,
+					function (scene) {
+						// 判断字符串是否包含中文------   /[\u4E00-\u9FA5]+/g.test(str)
+						for (let key in that.sectionNames) {
+							const value = that.sectionNames[key];
+							const mesh = scene.getMeshByName(key);
+							if (mesh) {
+								// that.createImgLabel(value, mesh);
+								that.getMgroupChartData(value, mesh);
+
+								// // 创建一个工段数据展示panel
+								const info = {
+									name: value,
+									rows: [
+										{
+											label: "产品产量(t)",
+											field: "total_production",
+											value: 100,
+										},
+										{
+											label: "运转率(%)",
+											field: "run_rate",
+											value: 100,
+										},
+										{
+											label: "单位电耗(kW·h)",
+											field: "elec_consume_unit",
+											value: 100,
+										},
+									],
+								};
+								// that.createDetailPanel(info, mesh);
+							}
+						}
+						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) {
+					if (value) {
+						for (let key in that.sectionNames) {
+							let name = that.sectionNames[key] + "_data_detail";
+							let dataView =
+								advancedTexture.getControlByName(name);
+							dataView.isVisible = true;
+						}
+					} else {
+						for (let key in that.sectionNames) {
+							let name = that.sectionNames[key] + "_data_detail";
+							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();
+					}
+				});
+				return scene;
+			};
+
+			const scene = createScene();
+			// scene.debugLayer.show();
+			engine.runRenderLoop(function () {
+				scene.render();
+			});
+			this.engine = engine;
+			this.scene = scene;
+			window.addEventListener("resize", function () {
+				engine.resize();
+			});
+		},
+		flyToMesh(mesh = undefined) {
+			// 不传mesh默认回到初始位置
+			let that = this;
+			const camera = that.camera;
+			if (mesh == undefined) {
+				if (
+					camera.alpha != that.initialAlpha ||
+					camera.beta != that.initialBeta ||
+					camera.radius != that.initialRadius
+				) {
+					let 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)
+					);
+					let position = that.initialTarget;
+					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
+					);
+				}
+			} else if (camera.target != mesh.position) {
+				console.log("fly to");
+				// 计算新的相机位置
+				let position = mesh._parentNode._position;
+				if (mesh._parentNode.id == "__root__") {
+					position = mesh.position;
+				}
+				let 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
+				);
+			}
+		},
+		createImgLabel(value, mesh) {
+			let that = this;
+			let imgUrl = "";
+			if (value == "石灰石破碎") {
+				imgUrl = "img/ly/ps.png";
+			} else if (value == "原料磨") {
+				imgUrl = "img/ly/ylm.png";
+			} else if (value == "煤磨") {
+				imgUrl = "img/ly/mm.png";
+			} else if (value == "回转窑") {
+				imgUrl = "img/ly/hzy.png";
+			} else if (value == "余热发电") {
+				imgUrl = "img/ly/yrfd.png";
+			}
+			var image = new BABYLON_GUI.Image(value + "_img", imgUrl);
+			image.width = "40px";
+			image.height = "40px";
+			image.linkOffsetY = -30;
+			that.myui.addControl(image);
+			image.linkWithMesh(mesh);
+			image.onPointerDownObservable.add(() => {
+				that.flyToMesh(mesh);
+			});
+		},
+		getMgroupChartData(value, mesh) {
+			//value:工段名称,mesh:模块
+			let that = this;
+			//根据名称获取工段数据
+			let query = {
+				mgroup__name: value,
+				type: "month_s",
+				year_s: that.currentYear,
+				month_s: that.currentMonth,
+				page: 0,
+				query: "{total_production,run_rate,elec_consume_unit,production_elec_unit}",
+			};
+			that.$API.enm.enstat.req(query).then((res) => {
+				let info = {
+					name: value,
+					rows: [],
+				};
+				if (value == "余热发电") {
+					info.rows = [
+						{
+							label: "发电量(kW·h)",
+							field: "total_production",
+							value: res[0].total_production,
+						},
+						{
+							label: "运转率(%)",
+							field: "run_rate",
+							value: res[0].run_rate,
+						},
+						{
+							label: "发电量(kW·h/t)",
+							field: "production_elec_unit",
+							value: res[0].production_elec_unit
+								? res[0].production_elec_unit
+								: "0.00",
+						},
+					];
+				} else {
+					info.rows = [
+						{
+							label: "产品产量(t)",
+							field: "total_production",
+							value: res[0].total_production,
+						},
+						{
+							label: "运转率(%)",
+							field: "run_rate",
+							value: res[0].run_rate,
+						},
+						{
+							label: "单位电耗(kW·h)",
+							field: "elec_consume_unit",
+							value: res[0].elec_consume_unit,
+						},
+					];
+				}
+
+				that.createDetailPanel(info, mesh);
+			});
+		},
+		// 创建3D数据展示层GUI
+		createDetailPanel(info, mesh) {
+			let that = this;
+			//背景框
+			const data_view = new BABYLON_GUI.StackPanel(
+				info.name + "_data_detail"
+			);
+			data_view.width = "240px"; // StackPanel的宽度
+			// data_view.height = "140px";
+			data_view.padding = "20px";
+			data_view.boxShow = "10px";
+			data_view.shadowBlur = 20; // 阴影模糊度
+			data_view.shadowOffsetX = 0; // 阴影水平偏移
+			data_view.shadowOffsetY = 5; // 阴影垂直偏移v
+			data_view.background = "rgba(0, 34, 51, 0.1)"; //暗色
+			// 头部蓝线
+			const mgroup_line = new BABYLON_GUI.Rectangle(info.name + "_line");
+			mgroup_line.height = "3px";
+			mgroup_line.width = "240px";
+			mgroup_line.thickness = 0;
+			mgroup_line.shadowBlur = 15; // 阴影模糊度
+			mgroup_line.shadowOffsetX = 0; // 阴影水平偏移
+			mgroup_line.shadowOffsetY = 0; // 阴影垂直偏移v
+			mgroup_line.shadowColor = "rgba(44, 237, 255, 0.2)";
+			mgroup_line.background = "rgba(44, 237, 255, 0.2)";
+			data_view.addControl(mgroup_line);
+
+			const titleImg = new BABYLON_GUI.Image();
+			//工序名
+			const header = new BABYLON_GUI.StackPanel(info.name + "_header");
+			header.width = "200px";
+			header.height = "60px";
+			// header.background = "rgba(0, 34, 51, 0.6)";
+			header.isVertical = false;
+
+			const mgroupName = new BABYLON_GUI.TextBlock(info.name + "_label");
+			mgroupName.height = "30px";
+			mgroupName.width = "175px";
+			mgroupName.color = "yellow"; //工序名字体颜色
+			mgroupName.text = info.name;
+			mgroupName.textHorizontalAlignment = 0;
+			mgroupName.paddingLeft = "8px";
+			header.addControl(mgroupName);
+
+			const mgroup_close = BABYLON_GUI.Button.CreateSimpleButton(
+				info.name + "_close",
+				"X"
+			);
+			mgroup_close.width = "25px";
+			mgroup_close.height = "25px";
+			mgroup_close.color = "rgba(255,165,0,0.7)";
+			mgroup_close.cornerRadius = 16;
+			mgroup_close.fontSize = "12px";
+			mgroup_close.thickness = 0;
+			// mgroup_close.background = "white";
+			mgroup_close.onPointerClickObservable.add(() => {
+				data_view.isVisible = false;
+			});
+			header.addControl(mgroup_close);
+			data_view.addControl(header);
+
+			info.rows.forEach((item, index) => {
+				const row = new BABYLON_GUI.StackPanel(
+					info.name + `_${item.field}` + "_row"
+				);
+				row.width = "200px";
+				row.height = "30px";
+				row.isVertical = false;
+
+				const field = new BABYLON_GUI.TextBlock(
+					info.name + `_${item.field}` + "_label"
+				);
+				field.width = "120px";
+				field.height = "30px";
+				field.color = "rgba(243,226,13,1)"; //字体颜色
+				field.fontSize = 14;
+				field.text = item.label;
+				field.textHorizontalAlignment = 0;
+				field.paddingLeft = "8px";
+				row.addControl(field);
+
+				const valx = new BABYLON_GUI.TextBlock(
+					info.name + `_${item.field}` + "_value"
+				);
+				valx.width = "80px";
+				valx.height = "30px";
+				valx.color = "yellow"; //字体颜色
+				valx.fontSize = 14;
+				valx.text = item.value;
+				valx.textHorizontalAlignment =
+					BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
+				valx.paddingRight = "8px";
+				row.addControl(valx);
+				data_view.addControl(row);
+			});
+			data_view.isVisible = false;
+			// 将StackPanel添加到GUI系统中
+			that.myui.addControl(data_view);
+			data_view.linkWithMesh(mesh);
+			data_view.linkOffsetY = -120;
+		},
+		deepCopy(obj) {
+			return JSON.parse(JSON.stringify(obj));
+		},
+	},
+};
+</script>
+<style scoped>
+@font-face {
+	font-family: "myfont";
+	/* 字体名称 */
+	src: url("../../utils/youShe.ttf");
+	/* 字体文件相对路径 */
+}
+.backHomeBtn{
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	 font-size: 22px;
+	 border-bottom: 2px solid rgba(54, 217, 187, 1);
+}
+.container {
+	background: url("/public/img/photon_bg.png") no-repeat;
+	background-size: cover;
+	height: 100%;
+	position: relative;
+}
+/* header-start */
+.pageHeader {
+	font-size: 32px;
+	background: none;
+	border-bottom: none;
+	position: relative;
+	display: block;
+	text-align: center;
+	color: #ffffff;
+	padding: 1px;
+	font-family: "myfont";
+	background: url("/public/img/photon_header.png") no-repeat;
+	background-size: 100% 100%;
+	z-index: 100;
+	height: 80px;
+}
+
+.top-line {
+	height: 1px;
+	width: 3%;
+	position: absolute;
+	bottom: 5px;
+	background: rgba(54, 217, 187, 1);
+}
+
+.top-line-left {
+	left: 24%;
+}
+
+.top-line-right {
+	right: 24%;
+}
+/* header-end */
+/* 模型上方的三个统计数及时间--start */
+.top_block {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	top: 80px;
+}
+.top_block_time {
+	margin: 5px 0 50px 0;
+	color: #fff;
+	font-size: 12px;
+	font-weight: bold;
+}
+.totalNumContnier {
+	display: flex;
+	width: fit-content;
+	margin: auto;
+}
+
+.totalNumWrap {
+	margin: 0 10px;
+	position: relative;
+}
+
+.totalNumWrap > img {
+	width: 10vw;
+}
+
+.totalNumWrap_green > .totalNumber {
+	color: rgb(5, 245, 2);
+}
+
+.totalNum_orange > .totalNumber {
+	color: orange;
+}
+
+.totalNum_blue > .totalNumber {
+	color: rgb(2, 245, 242);
+}
+
+.totalNumber {
+	font-size: 25px;
+	font-weight: bold;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.totalNumText {
+	color: #fff;
+	font-weight: bold;
+	font-size: 0.7vw;
+	position: absolute;
+	top: -6px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+/* 模型上方的三个统计数及时间--end */
+/*  */
+.left_block,
+.right_block {
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	padding: 10px 20px 0 20px;
+}
+.left_block {
+	left: 0;
+}
+.right_block {
+	right: 0;
+}
+.flexItem {
+	margin-bottom: 10px;
+}
+
+.itemTitle {
+	color: #fff;
+	height: 40px;
+	padding-left: 10px;
+	font-size: 16px;
+	line-height: 40px;
+	font-weight: bold;
+	background: url("/public/img/photon_title.png");
+	background-size: 100% 100%;
+	display: flex;
+}
+
+.itemTitleIcon {
+	width: 20px;
+	height: 20px;
+	margin-top: 10px;
+	margin-right: 5px;
+	display: inline-block;
+	animation: rotate 3s infinite;
+	transform-origin: center center;
+	background: url("/public/img/photon_title_icon.png");
+	background-size: 100% 100%;
+}
+.itemBody {
+	width: 100%;
+	background: rgba(9, 31, 43, 0.5);
+	border-radius: 20px;
+	margin-top: 5px;
+}
+.bodyList {
+	width: 200px;
+	height: 100%;
+	color: #ffffff;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+}
+.bodyListItem {
+	font-size: 1vh;
+	border: 1px solid #02f5f2;
+	height: 16%;
+	border-radius: 15px;
+	text-align: center;
+}
+.bodyListItemBg {
+	background: rgba(2, 245, 242, 0.18);
+}
+.tableHeader {
+	color: #02f5f2;
+	font-size: 1.1vh;
+}
+.bodyListItem_name {
+	width: 60px;
+	padding: 0.5vh 0;
+	font-size: 12px;
+}
+.bodyListItem_num {
+	width: 65px;
+	font-size: 12px;
+}
+.itemBodyFlex {
+	display: flex;
+}
+.itemBodyCircle {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding-top: 5vh;
+}
+.item_circle {
+	width: 49%;
+	text-align: center;
+}
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	25% {
+		transform: rotate(90deg);
+	}
+
+	50% {
+		transform: rotate(180deg);
+	}
+
+	75% {
+		transform: rotate(270deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.row-item {
+	height: 40px !important;
+	line-height: 40px !important;
+}
+
+#scrollTable > .hader {
+	background: rgb(10, 63, 68) !important;
+	background-color: #0a3f44 !important;
+}
+
+.model {
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#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;
+}
+
+.numberFont {
+	font-size: 22px;
+	font-weight: bold;
+}
+
+.numberUnit {
+	font-size: 12px;
+}
+
+#dashbordProcess .el-progress-circle {
+	height: 60px !important;
+	width: 60px !important;
+}
+
+.el-progress--circle .el-progress__text {
+	display: block;
+	margin-top: 1px;
+	color: #fff;
+	font-size: 20px !important;
+	font-weight: bold !important;
+}
+
+.inforBlock {
+	left: 60%;
+	top: 30%;
+	width: 420px;
+	height: 150px;
+	position: absolute;
+	font-weight: 500;
+	color: #fff;
+	padding: 20px;
+	font-size: 14px;
+	box-sizing: border-box;
+	background: linear-gradient(
+		to bottom left,
+		rgba(25, 154, 118, 0.5),
+		rgba(31, 44, 50, 0.5)
+	);
+}
+
+.inforBlock.clickBlock {
+	left: 50%;
+	width: 520px;
+	height: 225px;
+	padding: 40px;
+	font-size: 16px;
+	transform: translateX(-50%);
+}
+
+.inforBlock > .border_corner {
+	z-index: 2500;
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: rgba(0, 0, 0, 0);
+	border: 2px solid rgba(54, 217, 187, 1);
+}
+
+.inforBlock > .border_left_top {
+	top: 0;
+	left: 0;
+	border-right: none;
+	border-bottom: none;
+}
+
+.inforBlock > .border_right_top {
+	top: 0;
+	right: 0;
+	border-left: none;
+	border-bottom: none;
+}
+
+.inforBlock > .border_left_bottom {
+	bottom: 0;
+	left: 0;
+	border-right: none;
+	border-top: none;
+}
+
+.inforBlock > .border_right_bottom {
+	bottom: 0;
+	right: 0;
+	border-left: none;
+	border-top: none;
+}
+
+.inforBlock > .title {
+	font-size: 20px;
+	font-weight: 600;
+	position: absolute;
+	top: -45px;
+	text-align: center;
+	width: 100%;
+	left: 0;
+}
+
+.inforBlock > .infoCantier {
+	display: flex;
+}
+
+.infoCantier > .leftBlock {
+	width: 100px;
+	display: flex;
+	flex-direction: column;
+	margin-right: 30px;
+}
+
+.infoCantier > .rightBlock {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.infoCantier > .rightBlock > .countWrap {
+	display: flex;
+	justify-content: space-between;
+	width: 280px;
+	margin-top: 10px;
+}
+
+.percentage-value {
+	display: block;
+	margin-top: 6px;
+	font-size: 1.5vh;
+	color: #02f5f2;
+	font-weight: bold;
+}
+.percentage-label {
+	color: #ffffff;
+	font-size: 1.2vh;
+}
+.circle_bottom_text {
+	color: #02f5f2;
+	font-size: 0.8vw;
+}
+
+.elecItem {
+	color: #ffffff;
+	font-size: 20px;
+	margin-top: 10px;
+	height: 30%;
+	width: 50%;
+	font-size: 1.2vh;
+	display: inline-block;
+}
+.elecItem_wrap {
+	display: flex;
+	flex-direction: column;
+	border-left: 5px solid rgba(53, 156, 193, 0.66);
+	padding-left: 10px;
+	border-radius: 5px;
+}
+.elec_number {
+	color: rgb(2, 245, 242);
+	font-weight: bold;
+	font-size: 1.4vh;
+	padding-top: 5px;
+}
+.elec_unit {
+	font-size: 0.9vh;
+	color: #ffffff;
+	font-weight: 500;
+}
+.elecItem span {
+  font-size: 17px; /* 修改文字大小 */
+}
+
+.elec_number {
+  font-size: 17px; 
+}
+
+.elec_unit {
+  font-size: 17px; /* 修改单位的文字大小 */
+}
+
+.successState {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background: #00ff00;
+}
+.warningState {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background: #0000ff;
+}
+/* // 表格——el-table 去除背景颜色*/
+
+.successCircle {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background: #02f5f2;
+}
+.warningCircle {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background: rgb(255, 0, 135);
+}
+:deep(.el-table),
+:deep(.el-table__body),
+:deep(.el-table .el-table__body-wrapper) {
+    background: transparent !important;
+}
+
+:deep(.el-table .el-table__header-wrapper) {
+    background: rgba(32, 93, 74, 0.83);
+}
+
+:deep(.el-table .el-table__body-wrapper) {
+    background: rgba(46, 139, 155, 0.48);
+}
+
+:deep(.el-table th),
+:deep(.el-table tr),
+:deep(.el-table tr:hover) {
+    background-color: transparent;
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
+    background-color: transparent;
+}
+
+/* 清除鼠标移入效果 */
+:deep(.el-table__body tr.hover-row > td) {
+    background-color: transparent;
+}
+
+/* 行底边线 */
+:deep(.el-table .el-table__body-wrapper :deep(.el-table td.el-table__cell)),
+:deep(.el-table th.el-table__cell.is-leaf) {
+    background: transparent;
+}
+
+:deep(.el-table td.el-table__cell),
+:deep(.el-table th.el-table__cell.is-leaf) {
+    border-bottom: 1px solid rgba(25, 111, 115, 0.82);
+}
+
+/* 改变radio选中时的样式 */
+:deep(.el-radio.elRadio > .el-radio__label) {
+    color: #ffffff;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+    background: #13f1df;
+    border-color: #13f1df;
+}
+
+:deep(.el-table__inner-wrapper:before) {
+    background-color: rgba(0, 0, 0, 0);
+}
+/* 改变radio选中时的样式 */
+</style>
diff --git a/src/views/enm_coal/report_bh.vue b/src/views/enm_coal/report_bh.vue
new file mode 100644
index 00000000..d782ce32
--- /dev/null
+++ b/src/views/enm_coal/report_bh.vue
@@ -0,0 +1,1114 @@
+<template>
+	<div class="app-container">
+		<el-header>
+			<div class="left-panel">
+				<el-select
+                    v-model="query.type"
+                    placeholder="查询类型"
+                    clearable
+                    class="headerSearch"
+                    @change="typeCange"
+                >
+				<el-option
+                    v-for="item in options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                    ></el-option>
+				</el-select>
+				<el-date-picker
+					v-model="query.day"
+					type="date"
+					value-format="YYYY-MM-DD"
+					format="YYYY-MM-DD"
+					placeholder="天"
+					v-if="query.type==0"
+					style="margin-right: 6px"
+				/>
+				<el-date-picker
+                    v-model="query.month"
+                    type="month"
+                    value-format="YYYY-MM"
+                    format="YYYY-MM"
+                    placeholder="查询月份"
+                    v-if="query.type==1"
+                    class="headerSearch"
+                />
+				<el-date-picker
+				v-model="query.year"
+                    type="year"
+                    value-format="YYYY"
+                    format="YYYY"
+                    placeholder="查询年份"
+                    v-if="query.type==2"
+                    class="headerSearch"
+					/>
+				<el-button
+					type="primary"
+					icon="el-icon-search"
+					@click="dateChange"
+				></el-button>
+				<el-button
+					type="primary"
+					@click="exportExcel()"
+					:loading="exportLoading"
+					v-auth="'export_excel'"
+					>导出xlsx
+				</el-button>
+				<el-button type="primary" @click="handlePrint">打印 </el-button>
+			</div>
+		</el-header>
+		<el-card style="margin-top: 5px">
+			<div class="printWrap">
+				<div ref="print" id="myReport" class="printContainer">
+					<table
+						border="1"
+						width="1035"
+						cellspacing="0"
+						:key="timeStamp"
+						id="myTable"
+						class="myTable"
+					>
+						<thead class="myTableHead">
+							<tr>
+								<th colspan="10">煤磨工序生产报告</th>
+							</tr>
+							<tr>
+								<th colspan="2">参数</th>
+								<th>本日</th>
+								<th>昨日</th>
+								<th>本月</th>
+								<th>本年</th>
+								<th @click="goToTarget('3626253231757619200')"
+								style="font-weight: bold; color: #1CD6DD; font-size: 18px;">月目标值</th>
+								<th>月完成度</th>
+								<th @click="goToTarget('3626253231757619200')">年目标值</th>
+								<th>年完成度</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item, index) in tableDatas" :key="item">
+								<td
+									class="numCell"
+									v-if="index == 0 || index == 2 || index == 4" 
+									rowspan="2"
+								>
+									{{ item[0] }}
+								</td>
+								
+								<!-- <td class="numCell">{{ item[1] }}</td> -->
+								<td
+									class="numCell hoursItem"
+									@click="itemClick('hour_s', item)"
+								>
+									{{ item[1] }}
+								</td>
+								<td
+									class="numCell hoursItem"
+									@click="itemClick('hour_s', item)"
+								>
+									{{ item[2] }}
+								</td>
+								<td
+									class="numCell daysItem"
+									@click="itemClick('day_s', item)"
+								>
+									{{ item[3] }}
+								</td>
+								<td
+									class="numCell monthItem"
+									@click="itemClick('month_s', item)"
+								>
+									{{ item[4] }}
+								</td>
+								<td
+									class="numCell yearItem"
+									@click="itemClick('year_s', item)"
+								>
+									{{ item[5] }}
+								</td>
+								<td class="numCell">{{ item[6]}}</td>
+								<td class="numCell">{{ item[7] }}</td>
+								<td class="numCell">{{ item[8]}}</td>
+								<td class="numCell">{{ item[9] }}</td>
+							</tr>
+						</tbody>
+					</table>
+					<!-- <div class="radioWrap">
+						<el-radio-group
+							v-model="typeRadio"
+							@change="typeRadioChange"
+						>
+							<el-radio-button label="day">小时</el-radio-button>
+							<el-radio-button label="month"
+								>按日</el-radio-button
+							>
+							<el-radio-button label="year">按月</el-radio-button>
+						</el-radio-group>
+						<div style="position: absolute; right: 20px">
+							<el-date-picker
+								v-model="searchDate"
+								type="date"
+								value-format="YYYY-MM-DD"
+								formatter="YYYY-MM-DD"
+								placeholder="选择日期"
+								v-if="typeRadio == 'day'"
+								@change="dateChange"
+							></el-date-picker>
+							<el-date-picker
+								v-model="searchDate"
+								type="month"
+								value-format="YYYY-MM"
+								formatter="YYYY-MM"
+								placeholder="选择月"
+								v-if="typeRadio == 'month'"
+								@change="dateChange"
+							></el-date-picker>
+							<el-date-picker
+								v-if="typeRadio == 'year'"
+								v-model="searchDate"
+								type="year"
+								value-format="YYYY"
+								formatter="YYYY"
+								placeholder="选择年"
+								@change="dateChange"
+							></el-date-picker>
+						</div>
+					</div> -->
+					<div class="chartWrap" v-show="query.type == 0">
+						<div class="chartTitle">本日生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionHour"
+						></scEcharts>
+					</div>
+					<div class="chartWrap" v-show="query.type == 1">
+						<div class="chartTitle">本月生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionDay"
+						></scEcharts>
+					</div>
+					<div class="chartWrap" v-show="query.type == 2">
+						<div class="chartTitle">本年生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionMonth"
+						></scEcharts>
+					</div>
+				</div>
+			</div>
+			<charts
+				v-if="asynDialog"
+				:type="type"
+				:title="title"
+				:cate="cate"
+				:apiObj="apiObj"
+				:mgroup="query.mgroup"
+				:modelValue="modelValue"
+				:showClose="showClose"
+				:echartType="echartType"
+				@closed="asynDialog = false"
+			></charts>
+		</el-card>
+	</div>
+</template>
+<script>
+const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4", "#91d024"];
+let tooltip = {
+	show: true,
+	trigger: "axis",
+	axisPointer: {
+		type: "cross",
+	},
+	confine: false,
+	showContent: true,
+	triggerOn: "mousemove",
+};
+let grid = {
+	right: "11%",
+	left: "11%",
+	top: "27%",
+};
+let toolbox = {
+	right: 0,
+	feature: {
+		dataView: { show: true, readOnly: false },
+		saveAsImage: { show: true },
+	},
+	orient: "vertical",
+};
+let legend = {
+	selector: [
+		{
+			type: 'all',
+			title: '全选'
+		},
+		{
+			type: 'inverse',
+			title: '反选'
+		}
+	],
+	top: "2%",
+	data: ["煤磨总产量", "煤磨台时产量", "煤磨运转率"],
+};
+let legend_hour = {
+	selector: [
+		{
+			type: 'all',
+			title: '全选'
+		},
+		{
+			type: 'inverse',
+			title: '反选'
+		}
+	],
+	top: "2%",
+	data: ["煤磨总产量"],
+};
+let yAxis = [
+	{
+		type: "value",
+		name: "产量 (t)",
+		position: "left",
+		alignTicks: true,
+		nameRotate: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[0],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "台时(t/h)",
+		position: "left",
+		alignTicks: true,
+		nameRotate: 50,
+		offset: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[1],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "煤磨运转率 (%)",
+		position: "right",
+		alignTicks: true,
+		offset: 50,
+		nameRotate: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[2],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+];
+let yAxis_month = [
+	{
+		type: "value",
+		name: "产量 (t)",
+		position: "left",
+		alignTicks: true,
+		nameRotate: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[0],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "台时(t/h)",
+		position: "left",
+		alignTicks: true,
+		nameRotate: 50,
+		offset: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[1],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "煤磨运转率 (%)",
+		position: "right",
+		alignTicks: true,
+		offset: 50,
+		nameRotate: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[2],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+];
+let yAxis_hour = [
+	{
+		type: "value",
+		name: "产量 (t)",
+		position: "left",
+		alignTicks: true,
+		nameRotate: 50,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[0],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+];
+import scEcharts from "@/components/scEcharts";
+import { defineAsyncComponent } from "vue";
+export default {
+	components: {
+		scEcharts,
+		charts: defineAsyncComponent(() =>
+			import("@/components/scEnm/lineChartsdialog.vue")
+		),
+	},
+	data() {
+		return {
+			searchDate: "",
+			typeRadio: "day",
+			chartShow: false,
+			myOption: null,
+			optionHour: {},
+			optionDay: {},
+			goal_list: [],
+			optionMonth: {},
+			year: 2023,
+			month: 1,
+			days: 1,
+			hours: 1,
+			options: [
+				{id:0,name:'日统计'},
+				{id:1,name:'月统计'},
+				{id:2,name:'年统计'}
+			],
+			query: {
+				mgroup: "",
+				type: 0,
+			},
+			tableDatas: [
+				["产量", "煤磨总产量（t）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["产量", "煤磨台时产量（t/h）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["运转时间", "煤磨运转时间（h）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["运转时间", "煤磨运转率（%）", 0, 0, 0, 0, 0, 0, 0, 0],
+				// ["能耗", "煤磨分布电耗（kW·h/t）", 0, 0, 0, 0, 0, 0, 0, 0],
+				// ["能耗", "煤磨总电量（kW·h）", 0, 0, 0, 0, 0, 0, 0, 0]
+			],
+			tableName: "生产报告",
+			modelValue: true,
+			type: "hour_s",
+			title: "煤磨工序",
+			cate: "",
+			apiObj: this.$API.enm.enstat,
+			showClose: true,
+			echartType: "line",
+			asynDialog: false,
+			option1: {
+				color: colors,
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: legend_hour,
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+						// alignWithLabel: true
+					},
+					data: [
+						"一月",
+						"二月",
+						"三月",
+						"四月",
+						"五月",
+						"六月",
+						"七月",
+						"八月",
+						"九月",
+						"十月",
+						"十一月",
+						"十二月",
+					],
+				},
+				yAxis: yAxis_hour,
+				series: [
+					{
+						name: "煤磨总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+				],
+			},
+			option2: {
+				color: colors,
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: legend,
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+						// alignWithLabel: true
+					},
+					data: [],
+				},
+				yAxis: yAxis,
+				series: [
+					{
+						name: "煤磨总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "煤磨台时产量",
+						type: "bar",
+						yAxisIndex: 1,
+						data: [],
+					},
+					{
+						name: "煤磨运转率",
+						type: "line",
+						yAxisIndex: 2,
+						data: [],
+					},
+				],
+			},
+			option3: {
+				color: colors,
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: Object.assign(legend, {data: ["煤磨总产量", "煤磨台时产量", "煤磨运转率", "煤磨分布电耗"]}),
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+					},
+					data: [
+						"一月",
+						"二月",
+						"三月",
+						"四月",
+						"五月",
+						"六月",
+						"七月",
+						"八月",
+						"九月",
+						"十月",
+						"十一月",
+						"十二月",
+					],
+				},
+				yAxis: yAxis_month,
+				series: [
+					{
+						name: "煤磨总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "煤磨台时产量",
+						type: "bar",
+						yAxisIndex: 1,
+						data: [],
+					},
+					{
+						name: "煤磨运转率",
+						type: "line",
+						yAxisIndex: 2,
+						data: [],
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		function precen(a, b) {
+			if (b !== 0 && b !== null && a !== null) {
+				let precen = (a / b)* 100;
+				return precen.toFixed(2) + "%";
+			} else {
+				return "/";
+			}
+		}
+		function consume_precen(a, b) {
+			if (b !== 0 && b !== null && a !== null) {
+				let precen = ((a / b)+1)* 100;
+				return precen.toFixed(2) + "%";
+			} else {
+				return "/";
+			}
+		}
+		let that = this;
+		var myDate = new Date();
+		let year = (that.year = myDate.getFullYear());
+		let month = (that.month = myDate.getMonth() + 1);
+		let days = (that.days = myDate.getDate());
+		let hours = (that.hours = myDate.getHours());
+		let timeDate = myDate.getTime();
+		let dayTime = 24 * 60 * 60 * 1000;
+		//昨天的计算
+		let year_d = year,
+			month_d = month,
+			days_d = days;
+			//8点前，查找昨日数据为前一天数据
+			let newDate = timeDate - dayTime;
+			let lastDate = new Date(newDate);
+			year_d = lastDate.getFullYear();
+			month_d = lastDate.getMonth() + 1;
+			days_d = lastDate.getDate();
+		
+		//上一小时的计算
+		let hourTime = timeDate - 3600000;
+		let hourDate = new Date(hourTime);
+		let year_h = hourDate.getFullYear();
+		let month_h = hourDate.getMonth() + 1;
+		let days_h = hourDate.getDate();
+		this.$API.mtm.mgroup.list
+			.req({ page: 0, search: "煤磨" })
+			.then((res) => {
+				that.query.mgroup = res[0].id;
+				//昨日
+				let params3 = {};
+				params3.page = 0;
+				params3.year_s = year_d;
+				params3.month_s = month_d;
+				params3.day_s = days_d;
+				params3.type = "day_s";
+				params3.mgroup = that.query.mgroup;
+				that.$API.enm.enstat.req(params3).then((res3) => {
+					if (res3.length > 0) {
+						let data3 = res3[0];
+						that.tableDatas[0][3] = data3.total_production;
+						if(data3.total_production){
+							that.tableDatas[3][3] = 0;
+						}
+						that.tableDatas[1][3] = data3.production_hour;
+						that.tableDatas[2][3] = data3.run_hour;
+						that.tableDatas[3][3] = data3.run_rate;
+					}
+				});
+				//本日
+				let params4 = {};
+				params4.page = 0;
+				params4.year_s = year_h;
+				params4.month_s = month_h;
+				params4.day_s = days_h;
+				params4.type = "day_s";
+				params4.mgroup = that.query.mgroup;
+				that.$API.enm.enstat.req(params4).then((res4) => {
+					if (res4) {		
+						console.log("本日", res4);				
+						let data4 = res4[0];
+						that.tableDatas[0][2] = data4.total_production;
+						if (data4.total_production < 1 ){
+							that.tableDatas[0][2] = 0;
+							that.tableDatas[1][2] = 0;
+							that.tableDatas[2][2] = 0;
+							that.tableDatas[3][2] = 0;
+						}else{
+							that.tableDatas[1][2] = data4.production_hour;
+							that.tableDatas[2][2] = data4.run_hour;
+							that.tableDatas[3][2] = data4.run_rate;
+						}
+						
+					}
+				});
+				//月目标
+				let params5 = {};
+				params5.page = 0;
+				params5.year = year;
+				params5.mgroup = that.query.mgroup;
+				this.$API.mtm.goal.list
+					.req(params5)
+					.then((res5) => {
+						if (res5.length > 0) {
+							let data5 = res5;
+							data5.forEach((item5) => {
+								let str = "goal_val_" + that.month;
+								if (item5.goal_cate_name == "总产量（t）") {
+									that.tableDatas[0][6] = item5[str];
+									that.tableDatas[0][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "台时产量（t/h）"
+								) {
+									that.tableDatas[1][6] = item5[str];
+									that.tableDatas[1][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "运转时间（h）"
+								) {
+									that.tableDatas[2][6] = item5[str];
+									that.tableDatas[2][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "运转率（%）"
+								) {
+									that.tableDatas[3][6] = item5[str];
+									that.tableDatas[3][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name ==
+									"单位产品分布电耗（kW·h/t）"
+								) {
+									that.tableDatas[4][6] = item5[str];
+									that.tableDatas[4][8] = item5.goal_val;
+								}else if (item5.goal_cate_name == "总电量（kW·h）") {
+									that.tableDatas[5][6] = item5[str];
+									that.tableDatas[5][8] = item5.goal_val;
+								}
+							});
+						}
+					})
+					.then((res) => {
+						//年
+						let params1 = {};
+						params1.page = 0;
+						params1.year_s = year;
+						params1.type = "year_s";
+						params1.mgroup = that.query.mgroup;
+						that.$API.enm.enstat.req(params1).then((res1) => {
+							if (res1.length > 0) {
+								let data1 = res1[0];
+								that.tableDatas[0][5] = data1.total_production;
+								that.tableDatas[0][9] = precen(
+									that.tableDatas[0][5],
+									that.tableDatas[0][8]
+								);
+								that.tableDatas[1][5] = data1.production_hour;
+								that.tableDatas[1][9] = precen(
+									that.tableDatas[1][5],
+									that.tableDatas[1][8]
+								);
+								that.tableDatas[2][5] = data1.run_hour;
+								that.tableDatas[2][9] = precen(
+									that.tableDatas[2][5],
+									that.tableDatas[2][8]
+								);
+								that.tableDatas[3][5] = data1.run_rate;
+								that.tableDatas[3][9] = precen(
+									that.tableDatas[3][5],
+									that.tableDatas[3][8]
+								);
+							} else {
+							}
+						});
+						//月
+						let params2 = {};
+						params2.page = 0;
+						params2.year_s = year;
+						params2.month_s = month;
+						params2.type = "month_s";
+						params2.mgroup = that.query.mgroup;
+						that.$API.enm.enstat.req(params2).then((res2) => {
+							if (res2.length > 0) {
+								let data2 = res2[0];
+								that.tableDatas[0][4] = data2.total_production;
+								that.tableDatas[0][7] = precen(
+									that.tableDatas[0][4],
+									that.tableDatas[0][6]
+								);
+								that.tableDatas[1][4] = data2.production_hour;
+								that.tableDatas[1][7] = precen(
+									that.tableDatas[1][4],
+									that.tableDatas[1][6]
+								);
+								that.tableDatas[2][4] = data2.run_hour;
+								that.tableDatas[2][7] = precen(
+									that.tableDatas[2][4],
+									that.tableDatas[2][6]
+								);
+								that.tableDatas[3][4] = data2.run_rate;
+								that.tableDatas[3][7] = precen(
+									that.tableDatas[3][4],
+									that.tableDatas[3][6]
+								);
+							}
+						});
+					});
+				that.getHourData(year, month, days);
+				that.getDayData(year, month);
+				that.getMonthData(year);
+			});
+	},
+	methods: {
+		typeRadioChange() {
+			this.searchDate = "";
+		},
+		goToTarget(mgroup_id) {
+			this.$router.push({
+				path: "/enm_monthSet/goalSetting",
+				query: {
+					mgroup: mgroup_id,
+				},
+			})
+		},
+		dateChange() {
+			let that = this;
+			let arr = [];
+			if(that.query.type==0 && that.query.day) {
+				arr = that.query.day.split('-');
+				that.year = Number(arr[0]);
+				that.month = Number(arr[1]);
+				that.days = Number(arr[2]);
+				this.getHourData(that.year, that.month, that.days);
+				this.get_days(that.year, that.month, that.days);
+			}
+			else if(that.query.type==1 && that.query.month) {
+				let year = that.query.month.split("-")[0];
+				let month = that.query.month.split("-")[1];
+				month = Number(month);
+				this.getDayData(year, month);
+				this.get_months(year, month);
+				this.get_month_year_goal(year, month);
+			}else if (that.query.type==2 && that.query.year ) {
+				let year = that.query.year;
+				this.getMonthData(year);
+				this.get_years(year);
+				this.get_month_year_goal(year , 1);
+			}
+		},
+		get_days(year_d, month_d, days){
+			let that = this;
+			let params4 = {};
+				params4.page = 0;
+				params4.year_s = year_d;
+				params4.month_s = month_d;
+				params4.day_s = days;
+				params4.type = "day_s";
+				params4.mgroup = that.query.mgroup;
+				that.$API.enm.enstat.req(params4).then((res4) => {
+					if (res4) {					
+						let data4 = res4[0];
+						that.tableDatas[0][2] = data4.total_production;
+						if (data4.total_production < 1 ){
+							that.tableDatas[0][2] = 0;
+							that.tableDatas[1][2] = 0;
+							that.tableDatas[2][2] = 0;
+							that.tableDatas[3][2] = 0;
+						}else{
+							that.tableDatas[1][2] = data4.production_hour;
+							that.tableDatas[2][2] = data4.run_hour;
+							that.tableDatas[3][2] = data4.run_rate;
+						}
+					}
+				});
+			},
+		//获取小时数据
+		get_months(year_d, month_d){
+			let that = this;
+			let params2 = {};
+			params2.page = 0;
+			params2.year_s = year_d;
+			params2.month_s = month_d;
+			params2.type = "month_s";
+			params2.mgroup = that.query.mgroup;
+			that.$API.enm.enstat.req(params2).then((res2) => {
+				if (res2.length > 0) {
+					let data2 = res2[0];
+					that.tableDatas[0][4] = data2.total_production;
+					that.tableDatas[0][7] = precen(
+						that.tableDatas[0][4],
+						that.tableDatas[0][6]
+					);
+					that.tableDatas[1][4] = data2.production_hour;
+					that.tableDatas[1][7] = precen(
+						that.tableDatas[1][4],
+						that.tableDatas[1][6]
+					);
+					that.tableDatas[2][4] = data2.run_hour;
+					that.tableDatas[2][7] = precen(
+						that.tableDatas[2][4],
+						that.tableDatas[2][6]
+					);
+					that.tableDatas[3][4] = data2.run_rate;
+					that.tableDatas[3][7] = precen(
+						that.tableDatas[3][4],
+						that.tableDatas[3][6]
+					);
+				}
+			});
+		},
+		get_years(year){
+			let that = this;
+			let params1 = {};
+			params1.page = 0;
+			params1.year_s = year;
+			params1.type = "year_s";
+			params1.mgroup = that.query.mgroup;
+			that.$API.enm.enstat.req(params1).then((res1) => {
+				if (res1.length > 0) {
+					let data1 = res1[0];
+					that.tableDatas[0][5] = data1.total_production;
+					that.tableDatas[0][9] = precen(
+						that.tableDatas[0][5],
+						that.tableDatas[0][8]
+					);
+					that.tableDatas[1][5] = data1.production_hour;
+					that.tableDatas[1][9] = precen(
+						that.tableDatas[1][5],
+						that.tableDatas[1][8]
+					);
+					that.tableDatas[2][5] = data1.run_hour;
+					that.tableDatas[2][9] = precen(
+						that.tableDatas[2][5],
+						that.tableDatas[2][8]
+					);
+					that.tableDatas[3][5] = data1.run_rate;
+					that.tableDatas[3][9] = precen(
+						that.tableDatas[3][5],
+						that.tableDatas[3][8]
+					);
+					
+				}
+			});
+		},
+		get_month_year_goal(year, month){
+			let that = this;
+			let params5 = {};
+			params5.page = 0;
+			params5.year = year;
+			params5.mgroup = that.query.mgroup;
+			this.$API.mtm.goal.list
+				.req(params5)
+				.then((res5) => {
+					if (res5.length > 0) {
+						let data5 = res5;
+						data5.forEach((item5) => {
+							let str = "goal_val_" + month;
+							if (item5.goal_cate_name == "总产量（t）") {
+								that.tableDatas[0][6] = item5[str];
+								that.tableDatas[0][8] = item5.goal_val;
+							} else if (
+								item5.goal_cate_name == "台时产量（t/h）"
+							) {
+								that.tableDatas[1][6] = item5[str];
+								that.tableDatas[1][8] = item5.goal_val;
+							} else if (
+								item5.goal_cate_name == "运转时间（h）"
+							) {
+								that.tableDatas[2][6] = item5[str];
+								that.tableDatas[2][8] = item5.goal_val;
+							} else if (
+								item5.goal_cate_name == "运转率（%）"
+							) {
+								that.tableDatas[3][6] = item5[str];
+								that.tableDatas[3][8] = item5.goal_val;
+							} else if (
+								item5.goal_cate_name ==
+								"单位产品分布电耗（kW·h/t）"
+							) {
+								that.tableDatas[4][6] = item5[str];
+								that.tableDatas[4][8] = item5.goal_val;
+							}else if (item5.goal_cate_name == "总电量（kW·h）") {
+								that.tableDatas[5][6] = item5[str];
+								that.tableDatas[5][8] = item5.goal_val;
+							}
+						});
+					}
+				})
+		},
+		getHourData(year, month, days) {
+			let that = this;
+			let query = {};
+			query.page = 0;
+			query.year = year;
+			query.month = month;
+			query.day = days;
+			query.type = "hour_s";
+			query.mgroup = that.query.mgroup;
+			this.$API.enm.enstat.req(query).then((response) => {
+				let seriesData0 = [];
+					
+				let data = response;
+				data.forEach((item) => {
+					let ind = item.hour;
+					if(item.total_production < 1){
+						seriesData0[ind] = 0;
+					}else{seriesData0[ind] = item.total_production; //总产量
+					}
+				});
+				let options = { ...that.option1 };
+				options.series[0].data = seriesData0;
+				let hourXAxis = [];
+				for (let i = 0; i < 24; i++) {
+					let item = i + "时";
+					hourXAxis.push(item);
+				}
+				options.xAxis.data = hourXAxis;
+				that.optionHour = options;
+			});
+		},
+		//获取天数据
+		getDayData(year, month) {
+			let that = this;
+			let query1 = {};
+			query1.page = 0;
+			query1.year_s = year;
+			query1.month_s = month;
+			query1.type = "day_s";
+			query1.mgroup = this.query.mgroup;
+			this.$API.enm.enstat.req(query1).then((response) => {
+				let seriesData0 = [],
+					seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [];
+				let data = response;
+				data.forEach((item) => {
+					let ind = item.day_s - 1;
+					seriesData0[ind] = item.total_production;
+					seriesData1[ind] = item.production_hour;
+					seriesData2[ind] = item.run_rate;
+				});
+				let options = { ...that.option2 };
+				options.series[0].data = seriesData0;
+				options.series[1].data = seriesData1;
+				options.series[2].data = seriesData2;
+				let dayXAxis = [];
+				for (let i = 1; i <= data.length; i++) {
+					let item = i + "日";
+					dayXAxis.push(item);
+				}
+				options.xAxis.data = dayXAxis;
+				that.optionDay = options;
+			});
+		},
+		//获取月数据
+		getMonthData(year) {
+			let that = this;
+			let params5 = {};
+			params5.page = 0;
+			params5.year = year;
+			params5.mgroup = that.query.mgroup;
+			this.$API.mtm.goal.list
+				.req(params5)
+				.then((res5) => {
+					if (res5.length > 0) {
+						let data5 = res5;
+						data5.forEach((item5) => {
+							if (
+								item5.goal_cate_name ==
+								"单位产品分布电耗（kW·h/t）"
+							) {
+								that.goal_list.push(item5);
+							}
+						});	
+					}
+				}).then(() => {
+					let query2 = {};
+			query2.page = 0;
+			query2.year_s = year;
+			query2.type = "month_s";
+			query2.mgroup = that.query.mgroup;
+			this.$API.enm.enstat.req(query2).then((response) => {
+				let seriesData0 = [],
+					seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [],
+					seriesData4 = [];
+				let data = response;
+				data.forEach((item) => {
+					let goal_index = 'goal_val_' + item.month_s;
+					let ind = item.month_s - 1;
+					seriesData0[ind] = item.total_production;
+					seriesData1[ind] = item.production_hour;
+					seriesData2[ind] = item.run_rate;
+				});
+				let options = { ...that.option3 };
+				options.series[0].data = seriesData0;
+				options.series[1].data = seriesData1;
+				options.series[2].data = seriesData2;
+				let monthXAxis = [];
+				if (year < that.year){
+					that.month = 12;
+				}
+				for (let i = 1; i <= that.month; i++) {
+					let item = i + "月";
+					monthXAxis.push(item);
+				}
+				options.xAxis.data = monthXAxis;
+				that.optionMonth = options;
+			});
+				});
+			
+		},
+		itemClick(type, item) {
+			this.type = type;
+			this.cate = item[1];
+			this.asynDialog = true;
+		},
+		itemClick1(type, item) {
+			this.chartShow = false;
+			this.$API.bi.dataset.exec.req("3322567213885833216").then((res) => {
+				this.myOption = JSON.parse(res.echart_options);
+				debugger;
+				console.log(this.myOption);
+				this.chartShow = true;
+			});
+		},
+		handlePrint() {
+			this.$PRINT("#myReport");
+		},
+		exportExcel() {
+			this.exportLoading = true;
+			this.$XLSX("#myTable", this.tableName);
+			this.exportLoading = false;
+		},
+	},
+};
+</script>
+<style scoped>
+.printContainer {
+	padding-left: 20px;
+}
+.printWrap {
+	overflow-x: auto;
+}
+.radioWrap {
+	display: flex;
+	justify-content: center;
+	padding-top: 10px;
+	position: relative;
+}
+</style>
diff --git a/src/views/enm_kilnbase/report_lybh.vue b/src/views/enm_kilnbase/report_lybh.vue
new file mode 100644
index 00000000..1829511d
--- /dev/null
+++ b/src/views/enm_kilnbase/report_lybh.vue
@@ -0,0 +1,1290 @@
+<template>
+	<div class="app-container">
+		<el-header>
+			<div class="left-panel">
+				<el-select
+                    v-model="query.type"
+                    placeholder="查询类型"
+                    clearable
+                    class="headerSearch"
+                    @change="typeCange"
+                >
+				<el-option
+                    v-for="item in options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                    ></el-option>
+				</el-select>
+				<el-date-picker
+					v-model="query.day"
+					type="date"
+					value-format="YYYY-MM-DD"
+					format="YYYY-MM-DD"
+					placeholder="天"
+					v-if="query.type==0"
+					style="margin-right: 6px"
+				/>
+				<el-date-picker
+                    v-model="query.month"
+                    type="month"
+                    value-format="YYYY-MM"
+                    format="YYYY-MM"
+                    placeholder="查询月份"
+                    v-if="query.type==1"
+                    class="headerSearch"
+                />
+				<el-date-picker
+				v-model="query.year"
+                    type="year"
+                    value-format="YYYY"
+                    format="YYYY"
+                    placeholder="查询年份"
+                    v-if="query.type==2"
+                    class="headerSearch"
+					/>
+				<el-button
+					type="primary"
+					icon="el-icon-search"
+					@click="dateChange"
+				></el-button>
+				<el-button
+					type="primary"
+					@click="exportExcel()"
+					:loading="exportLoading"
+					v-auth="'export_excel'"
+					>导出xlsx
+				</el-button>
+				<el-button type="primary" @click="handlePrint">打印 </el-button>
+			</div>
+		</el-header>
+		<el-card style="margin-top: 5px">
+			<div class="printWrap">
+				<div ref="print" id="myReport" class="printContainer">
+					<table
+						border="1"
+						width="1035"
+						cellspacing="0"
+						:key="timeStamp"
+						id="myTable"
+						class="myTable"
+					>
+						<thead class="myTableHead">
+							<tr>
+								<th colspan="10">烧成工序生产报告</th>
+							</tr>
+							<tr>
+								<th colspan="2">参数</th>
+								<th>本日</th>
+								<th>昨日</th>
+								<th>本月</th>
+								<th>本年</th>
+								<th>月目标值</th>
+								<th>月完成度</th>
+								<th>年目标值</th>
+								<th>年完成度</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="(item, index) in tableDatas"
+								:key="index"
+							>
+								<td
+									class="numCell"
+									v-if="index == 0 || index == 2"
+									rowspan="2"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 4"
+									rowspan="4"
+								>
+									{{ item[0] }}
+								</td>
+								<td class="numCell" v-else-if="index == 8">
+									{{ item[0] }}
+								</td>
+								<td class="numCell">{{ item[1] }}</td>
+								<td
+									class="numCell hoursItem"
+									@click="itemClick('hour_s', item)"
+								>
+									{{ item[2] }}
+								</td>
+								<td
+									class="numCell daysItem"
+									@click="itemClick('day_s', item)"
+								>
+									{{ item[3] }}
+								</td>
+								<td
+									class="numCell monthItem"
+									@click="itemClick('month_s', item)"
+								>
+									{{ item[4] }}
+								</td>
+								<td
+									class="numCell yearItem"
+									@click="itemClick('year_s', item)"
+								>
+									{{ item[5] }}
+								</td>
+								<td class="numCell">{{ item[6] }}</td>
+								<td class="numCell">{{ item[7] }}</td>
+								<td class="numCell">{{ item[8] }}</td>
+								<td class="numCell">{{ item[9] }}</td>
+							</tr>
+						</tbody>
+					</table>
+					<!-- <div class="radioWrap">
+						<el-radio-group
+							v-model="typeRadio"
+							@change="typeRadioChange"
+						>
+							<el-radio-button label="day">本日</el-radio-button>
+							<el-radio-button label="month"
+								>本月</el-radio-button
+							>
+							<el-radio-button label="year">本年</el-radio-button>
+						</el-radio-group>
+						<div style="position: absolute; right: 20px">
+							<el-date-picker
+								v-model="searchDate"
+								type="date"
+								value-format="YYYY-MM-DD"
+								formatter="YYYY-MM-DD"
+								placeholder="选择日期"
+								v-if="typeRadio == 'day'"
+								@change="dateChange"
+							></el-date-picker>
+							<el-date-picker
+								v-model="searchDate"
+								type="month"
+								value-format="YYYY-MM"
+								formatter="YYYY-MM"
+								placeholder="选择月"
+								v-if="typeRadio == 'month'"
+								@change="dateChange"
+							></el-date-picker>
+							<el-date-picker
+								v-if="typeRadio == 'year'"
+								v-model="searchDate"
+								type="year"
+								value-format="YYYY"
+								formatter="YYYY"
+								placeholder="选择年"
+								@change="dateChange"
+							></el-date-picker>
+						</div>
+					</div> -->
+					<div class="chartWrap" v-show="query.type == 0">
+						<div class="chartTitle">小时生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionHour"
+						></scEcharts>
+					</div>
+					<div class="chartWrap" v-show="query.type == 1">
+						<div class="chartTitle">本月生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionDay"
+						></scEcharts>
+					</div>
+					<div class="chartWrap" v-show="query.type == 2">
+						<div class="chartTitle">本年生产参数统计图</div>
+						<scEcharts
+							height="400px"
+							width="1033px"
+							:option="optionMonth"
+						></scEcharts>
+					</div>
+				</div>
+			</div>
+
+			<!-- <sc-dialog v-model="chartShow" draggable title="烧成工序">
+				<div class="searchHead" v-if="type == 'hours'">
+					<el-date-picker
+						v-model="query.start_time"
+						type="date"
+						placeholder="选择时间"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						:picker-options="pickerOptions"
+					/>
+					<span class="middleText">至</span>
+					<el-date-picker
+						v-model="query.end_time"
+						type="date"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						start-placeholder="结束日期"
+						:picker-options="pickerOptions"
+					/>
+					<el-button
+						type="primary"
+						class="searchBtn"
+						@click="dataSearch"
+						>查询</el-button
+					>
+				</div>
+				<div class="searchHead" v-if="type == 'days'">
+					<el-date-picker
+						v-model="query.start_time"
+						type="date"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						start-placeholder="开始日期"
+						:picker-options="pickerOptions"
+					/>
+					<el-date-picker
+						v-model="query.end_time"
+						type="date"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						start-placeholder="结束日期"
+						:picker-options="pickerOptions"
+					/>
+					<el-button
+						type="primary"
+						class="searchBtn"
+						@click="dataSearch"
+						>查询</el-button
+					>
+				</div>
+				<div class="searchHead" v-if="type == 'month'">
+					<el-date-picker
+						v-model="query.start_time"
+						type="month"
+						format="YYYY-MM"
+						value-format="YYYY-MM"
+						start-placeholder="开始月份"
+						:picker-options="pickerOptions"
+					/>
+					<el-date-picker
+						v-model="query.end_time"
+						type="month"
+						format="YYYY-MM"
+						value-format="YYYY-MM"
+						start-placeholder="结束月份"
+						:picker-options="pickerOptions"
+					/>
+					<el-button
+						type="primary"
+						class="searchBtn"
+						@click="dataSearch"
+						>查询</el-button
+					>
+				</div>
+				<div class="searchHead" v-if="type == 'year'">
+					<el-date-picker
+						v-model="query.start_time"
+						type="year"
+						format="YYYY"
+						value-format="YYYY"
+						start-placeholder="开始日期"
+						:picker-options="pickerOptions"
+					/>
+					<el-date-picker
+						v-model="query.end_time"
+						type="year"
+						format="YYYY"
+						value-format="YYYY"
+						start-placeholder="结束日期"
+						:picker-options="pickerOptions"
+					/>
+					<el-button
+						type="primary"
+						class="searchBtn"
+						@click="dataSearch"
+						>查询</el-button
+					>
+				</div>
+				<scEcharts
+					height="360px"
+					:option="myOption"
+					v-if="chartShow"
+				></scEcharts>
+			</sc-dialog> -->
+			<charts
+				v-if="asynDialog"
+				:type="type"
+				:title="title"
+				:cate="cate"
+				:apiObj="apiObj"
+				:mgroup="query.mgroup"
+				:modelValue="modelValue"
+				:showClose="showClose"
+				:echartType="echartType"
+				@closed="asynDialog = false"
+			></charts>
+		</el-card>
+	</div>
+</template>
+<script>
+const colors = ["#647bfe", "#8698fe", "#a9b6fe", "#cbd3fe", "#91CC75"];
+let tooltip = {
+	show: true,
+	trigger: "axis",
+	axisPointer: {
+		type: "cross",
+	},
+	confine: false,
+	showContent: true,
+	triggerOn: "mousemove",
+};
+let grid = {
+	right: "9%",
+	left: "7%",
+	top: "15%",
+};
+let toolbox = {
+	right: "2%",
+	feature: {
+		dataView: { show: true, readOnly: false },
+		saveAsImage: { show: true },
+	},
+};
+let legend = {
+	top: "2%",
+	data: ["总产量", "台时产量", "运转率", "分布电耗", "单位产品煤耗"],
+};
+let yAxis = [
+	{
+		type: "value",
+		name: "产量 (t)",
+		position: "left",
+		alignTicks: true,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[0],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "运转率 ",
+		position: "right",
+		alignTicks: true,
+		offset: 70,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[2],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}%",
+		},
+	},
+	{
+		type: "value",
+		name: "分布电耗",
+		position: "left",
+		alignTicks: true,
+		offset: 70,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[3],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+	{
+		type: "value",
+		name: "标煤耗",
+		position: "right",
+		alignTicks: true,
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: colors[4],
+			},
+		},
+		axisLabel: {
+			formatter: "{value}",
+		},
+	},
+];
+import scEcharts from "@/components/scEcharts";
+import { defineAsyncComponent } from "vue";
+export default {
+	components: {
+		scEcharts,
+		charts: defineAsyncComponent(() =>
+			import("@/components/scEnm/lineChartsdialog.vue")
+		),
+	},
+	data() {
+		return {
+			searchDate: "",
+			typeRadio: "day",
+			exportLoading: false,
+			chartShow: false,
+			myOption: null,
+			timeStamp: null,
+			optionHour: {},
+			optionDay: {},
+			optionMonth: {},
+			year: 2023,
+			month: 1,
+			days: 1,
+			hours: 1,
+			query: {
+				mgroup: "",
+                type: 0,
+			},
+			tableDatas: [
+				["产量", "总产量（t）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["产量", "台时产量（t/h）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["运转时间", "运转时间（h）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["运转时间", "运转率（%）", 0, 0, 0, 0, 0, 0, 0, 0],
+				["能耗", "单位产品煤耗（t/t）", 0, 0, 0, 0, 0, 0, 0, 0],
+			],
+			tableName: "生产报告",
+			modelValue: true,
+			type: "hour_s",
+			title: "烧成工序",
+			cate: "",
+			apiObj: this.$API.enm.enstat,
+			showClose: true,
+			echartType: "line",
+			asynDialog: false,
+            options: [
+				{id:0,name:'日统计'},
+				{id:1,name:'月统计'},
+				{id:2,name:'年统计'}
+			],
+			option1: {
+				color: ["#647bfe", "#cbd3fe", "#91CC75"],
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: {
+					top: "2%",
+					data: ["总产量", "分布电耗", "单位产品煤耗"],
+				},
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+					},
+					data: [],
+				},
+				yAxis: [
+					{
+						type: "value",
+						name: "产量 (t)",
+						position: "left",
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: colors[0],
+							},
+						},
+						axisLabel: {
+							formatter: "{value}",
+						},
+					},
+
+					{
+						type: "value",
+						name: "分布电耗",
+						position: "left",
+						alignTicks: true,
+						offset: 70,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: colors[3],
+							},
+						},
+						axisLabel: {
+							formatter: "{value}",
+						},
+					},
+					{
+						type: "value",
+						name: "标煤耗",
+						position: "right",
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: colors[4],
+							},
+						},
+						axisLabel: {
+							formatter: "{value}",
+						},
+					},
+				],
+				series: [
+					{
+						name: "总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "分布电耗",
+						type: "bar",
+						yAxisIndex: 1,
+						data: [],
+					},
+					{
+						name: "单位产品煤耗",
+						type: "bar",
+						yAxisIndex: 2,
+						data: [],
+					},
+				],
+			},
+			option2: {
+				color: colors,
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: legend,
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+						// alignWithLabel: true
+					},
+					data: [
+						"一月",
+						"二月",
+						"三月",
+						"四月",
+						"五月",
+						"六月",
+						"七月",
+						"八月",
+						"九月",
+						"十月",
+						"十一月",
+						"十二月",
+					],
+				},
+				yAxis: yAxis,
+				series: [
+					{
+						name: "总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "台时产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "运转率",
+						type: "line",
+						yAxisIndex: 1,
+						data: [],
+					},
+					{
+						name: "分布电耗",
+						type: "bar",
+						yAxisIndex: 2,
+						data: [],
+					},
+					{
+						name: "单位产品煤耗",
+						type: "bar",
+						yAxisIndex: 3,
+						data: [],
+					},
+				],
+			},
+			option3: {
+				color: colors,
+				tooltip: tooltip,
+				grid: grid,
+				toolbox: toolbox,
+				legend: legend,
+				xAxis: {
+					axisTick: {
+						show: true,
+						length: 5,
+						inside: true,
+					},
+					data: [],
+				},
+				yAxis: yAxis,
+				series: [
+					{
+						name: "总产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "台时产量",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [],
+					},
+					{
+						name: "运转率",
+						type: "line",
+						yAxisIndex: 1,
+						data: [],
+					},
+					{
+						name: "分布电耗",
+						type: "bar",
+						yAxisIndex: 2,
+						data: [],
+					},
+					{
+						name: "单位产品煤耗",
+						type: "bar",
+						yAxisIndex: 3,
+						data: [],
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		
+		let that = this;
+		var myDate = new Date();
+		let year = (that.year = myDate.getFullYear());
+		let month = (that.month = myDate.getMonth() + 1);
+		let days = (that.days = myDate.getDate());
+		let hours = (that.hours = myDate.getHours());
+		let timeDate = myDate.getTime();
+		let dayTime = 24 * 60 * 60 * 1000;
+		//昨天的计算
+		let year_d = year,
+			month_d = month,
+			days_d = days;
+		// if (hours < 24) {
+		// 	//21点前，查找昨日数据为前一天数据
+		// 	let newDate = timeDate - dayTime;
+		// 	let lastDate = new Date(newDate);
+		// 	year_d = lastDate.getFullYear();
+		// 	month_d = lastDate.getMonth() + 1;
+		// 	days_d = lastDate.getDate();
+		// }
+		//上一小时的计算
+		let hourTime = timeDate - 3600000;
+		let hourDate = new Date(hourTime);
+        let mpoint = "3853763497771151360"
+		that.$API.mtm.mgroup.list
+			.req({ page: 0, name: "回转窑" })
+			.then((res) => {
+				console.log("回转窑", res);
+				that.query.mgroup = res[0].id;
+				//昨日
+				let params3 = {};
+                let yesterday = new Date(year_d, month_d - 1, days_d); // 当前 day
+                yesterday.setDate(yesterday.getDate() - 1); // 回退一天
+                params3.year_s = yesterday.getFullYear();
+                params3.month_s = yesterday.getMonth() + 1; // 注意 JS 中月份是 0-11
+                params3.day_s = yesterday.getDate();
+				params3.page = 0;
+				params3.type = "day_s";
+				params3.mgroup = that.query.mgroup;
+                console.log("params3", params3);
+				that.$API.enm.enstat.req(params3).then((res3) => {
+					if (res3.length > 0) {
+						let data3 = res3[0];
+						that.tableDatas[0][3] = data3.total_production;
+						that.tableDatas[1][3] = data3.production_hour;
+						that.tableDatas[2][3] = data3.run_hour;
+						that.tableDatas[3][3] = data3.run_rate;
+					}
+                    params3.mpoint = mpoint
+                    return that.$API.enm.mpointstat.list.req(params3);
+				}).then((res4) => {
+				    if (res4.length > 0) {
+				        let data4 = res4[0];
+				        that.tableDatas[4][3] = (data4.val/that.tableDatas[0][3]).toFixed(2);
+				    }
+				});
+				//本日
+				let params4 = {};
+				params4.page = 0;
+				params4.year_s = year_d;
+				params4.month_s = month_d;
+				params4.day_s = days_d;
+				params4.type = "day_s";
+				params4.mgroup = that.query.mgroup;
+				that.$API.enm.enstat.req(params4).then((res4) => {
+					if (res4.length > 0) {
+						let data4 = res4[0];
+						that.tableDatas[0][2] = data4.total_production;
+                        that.tableDatas[1][2] = data4.production_hour;
+						that.tableDatas[2][2] = data4.run_hour;
+                        that.tableDatas[3][2] = data4.run_rate;
+					}
+                    params4.mpoint = mpoint
+                    return that.$API.enm.mpointstat.list.req(params4);
+				}).then((res5) => {
+				    if (res5.length > 0) {
+				        let data5 = res5[0];
+				        that.tableDatas[4][2] = (data5.val/that.tableDatas[0][2]).toFixed(2);
+				    }
+				});
+				let params5 = {};
+				params5.page = 0;
+				params5.mgroup = that.query.mgroup;
+				that.$API.mtm.goal.list
+					.req(params5)
+					.then((res5) => {
+						if (res5.length > 0) {
+							let data5 = res5;
+							data5.forEach((item5) => {
+								let str = "goal_val_" + that.month;
+								if (item5.goal_cate_name == "总产量（t）") {
+									that.tableDatas[0][6] = item5[str];
+									that.tableDatas[0][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "台时产量（t/h）"
+								) {
+									that.tableDatas[1][6] = item5[str];
+									that.tableDatas[1][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "运转时间（h）"
+								) {
+									that.tableDatas[2][6] = item5[str];
+									that.tableDatas[2][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name == "运转率（%）"
+								) {
+									that.tableDatas[3][6] = item5[str];
+									that.tableDatas[3][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name ==
+									"单位产品分布电耗（kW·h/t）"
+								) {
+									that.tableDatas[4][6] = item5[str];
+									that.tableDatas[4][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name ==
+									"单位产品综合电耗（kW·h/t）"
+								) {
+									that.tableDatas[5][6] = item5[str];
+									that.tableDatas[5][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name ==
+									"单位产品煤耗（kgce/t）"
+								) {
+									that.tableDatas[6][6] = item5[str];
+									that.tableDatas[6][8] = item5.goal_val;
+								} else if (
+									item5.goal_cate_name ==
+									"单位产品综合能耗（kgce/t）"
+								) {
+									that.tableDatas[7][6] = item5[str];
+									that.tableDatas[7][8] = item5.goal_val;
+								}
+							});
+						}
+					})
+					.then((res) => {
+						//年
+						let params1 = {};
+						params1.page = 0;
+						params1.year_s = year;
+						params1.type = "year_s";
+						params1.mgroup = this.query.mgroup;
+						this.$API.enm.enstat.req(params1).then((res1) => {
+							if (res1.length > 0) {
+								let data1 = res1[0];
+								that.tableDatas[0][5] = data1.total_production;
+								that.tableDatas[0][9] = this.precen(
+									that.tableDatas[0][5],
+									that.tableDatas[0][8]
+								);
+								that.tableDatas[1][5] = data1.production_hour;
+								that.tableDatas[1][9] = this.precen(
+									that.tableDatas[1][5],
+									that.tableDatas[1][8]
+								);
+								that.tableDatas[2][5] = data1.run_hour;
+								that.tableDatas[2][9] = this.precen(
+									that.tableDatas[2][5],
+									that.tableDatas[2][8]
+								);
+								that.tableDatas[3][5] = data1.run_rate;
+								that.tableDatas[3][9] = this.precen(
+									that.tableDatas[3][5],
+									that.tableDatas[3][8]
+								);
+                            }
+                            params1.mpoint = mpoint
+                            return that.$API.enm.mpointstat.list.req(params1);
+						}).then((res6) => {
+							if (res6.length > 0) {
+								let data6 = res6[0];
+								console.log(res6[0], that.tableDatas[0][5], '-----------------')
+								that.tableDatas[4][5] = (data6.val/that.tableDatas[0][5]).toFixed(2);
+							}	
+						});
+						//月
+						let params2 = {};
+						params2.page = 0;
+						params2.year_s = year;
+						params2.month_s = month;
+						params2.type = "month_s";
+						params2.mgroup = this.query.mgroup;
+						this.$API.enm.enstat.req(params2).then((res2) => {
+							if (res2.length > 0) {
+								let data2 = res2[0];
+								that.tableDatas[0][4] = data2.total_production;
+								that.tableDatas[0][7] = this.precen(
+									that.tableDatas[0][4],
+									that.tableDatas[0][6]
+								);
+								that.tableDatas[1][4] = data2.production_hour;
+								that.tableDatas[1][7] = this.precen(
+									that.tableDatas[1][4],
+									that.tableDatas[1][6]
+								);
+								that.tableDatas[2][4] = data2.run_hour;
+								that.tableDatas[2][7] = this.precen(
+									that.tableDatas[2][4],
+									that.tableDatas[2][6]
+								);
+								that.tableDatas[3][4] = data2.run_rate;
+								that.tableDatas[3][7] = this.precen(
+									that.tableDatas[3][4],
+									that.tableDatas[3][6]
+								);
+							}
+                            params2.mpoint = mpoint
+                            return that.$API.enm.mpointstat.list.req(params2);
+						}).then((res7) => {
+							if (res7.length > 0) {
+								let data7 = res7[0];
+								that.tableDatas[4][4] = (data7.val/that.tableDatas[0][4]).toFixed(2);
+							}
+						})
+					});
+				that.getHourData(that.year, that.month, that.days);
+				that.getDayData(that.year, that.month);
+				that.getMonthData(that.year);
+			});
+	},
+	methods: {
+		consume_precen(a, b) {
+			if (b !== 0 && b !== null && a !== null) {
+				let precen = ((a / b)+1)* 100;
+				return precen.toFixed(2) + "%";
+			} else {
+				return "/";
+			}
+		},
+		precen(a, b) {
+			if (b !== 0 && b !== null && a !== null) {
+				let precen = (a / b) * 100;
+				let precenNum = precen.toFixed(2);
+				return precenNum + "%";
+			} else {
+				return "/";
+			}
+		},
+		typeRadioChange() {
+			this.searchDate = "";
+		},
+		dateChange() {
+			let that = this;
+			let arr = [];
+			if(that.query.type==0 && that.query.day) {
+				console.log(that.query.day, 'that.query.day');
+				arr = that.query.day.split('-');
+				that.year = Number(arr[0]);
+				that.month = Number(arr[1]);
+				that.days = Number(arr[2]);
+				this.getHourData(that.year, that.month, that.days);
+				this.get_days(that.year, that.month, that.days);
+			}
+			else if(that.query.type==1 && that.query.month) {
+				let year = that.query.month.split("-")[0];
+				let month = that.query.month.split("-")[1];
+				month = Number(month);
+				this.getDayData(year, month);
+				this.get_months(year, month);
+			}else if (that.query.type==2 && that.query.year) {
+				let year = that.query.year;
+				this.getMonthData(year);
+				this.get_years(year);
+			}
+		},
+        get_days(year_d, month_d, day){
+			let that = this;
+			let params4 = {};
+			let mpoint = "3853763497771151360"
+			params4.page = 0;
+			params4.year_s = year_d;
+			params4.month_s = month_d;
+			params4.day_s = day;
+			params4.type = "day_s";
+			params4.mgroup = that.query.mgroup;
+			that.$API.enm.enstat.req(params4).then((res4) => {
+					let data4 = res4[0];
+					that.tableDatas[0][2] = data4.total_production;
+					if (data4.total_production < 1){
+						that.tableDatas[4][2] = 0;
+						that.tableDatas[5][2] = 0;
+						that.tableDatas[6][2] = 0;
+						that.tableDatas[7][2] = 0;
+						that.tableDatas[8][2] = 0;
+					}else{
+					that.tableDatas[0][2] = data4.total_production;
+					that.tableDatas[1][2] = data4.production_hour;
+					that.tableDatas[2][2] = data4.run_hour;
+					that.tableDatas[3][2] = data4.run_rate;
+					}
+					params4.mpoint = mpoint
+					return that.$API.enm.mpointstat.list.req(params4);
+			}).then((res)=>{
+				if (res.length > 0) {
+						let data = res[0];
+						that.tableDatas[4][2] = (data.val/that.tableDatas[0][2]).toFixed(2);
+							}
+						})
+		},
+        get_months(year, month){
+			let that = this;
+			let params2 = {};
+			params2.page = 0;
+			params2.year_s = year;
+			params2.month_s = month;
+			params2.type = "month_s";
+			let mpoint = "3853763497771151360"
+			params2.mgroup = this.query.mgroup;
+			this.$API.enm.enstat.req(params2).then((res2) => {
+				if (res2.length > 0) {
+					let data2 = res2[0];
+					that.tableDatas[0][4] = data2.total_production;
+					that.tableDatas[0][7] = this.precen(
+						that.tableDatas[0][4],
+						that.tableDatas[0][6]
+					);
+					that.tableDatas[1][4] = data2.production_hour;
+					that.tableDatas[1][7] = this.precen(
+						that.tableDatas[1][4],
+						that.tableDatas[1][6]
+					);
+					that.tableDatas[2][4] = data2.run_hour;
+					that.tableDatas[2][7] = this.precen(
+						that.tableDatas[2][4],
+						that.tableDatas[2][6]
+					);
+					that.tableDatas[3][4] = data2.run_rate;
+					that.tableDatas[3][7] = this.precen(
+						that.tableDatas[3][4],
+						that.tableDatas[3][6]
+					);
+					
+				// 	that.tableDatas[4][4] = data2.elec_consume_unit;
+				// 	that.tableDatas[4][7] = this.consume_precen(
+				// 		that.tableDatas[4][6] - that.tableDatas[4][4],
+				// 		that.tableDatas[4][6]
+				// 	);
+				// 	that.tableDatas[5][4] =
+				// 		data2.celec_consume_unit;
+				// 	that.tableDatas[5][7] = this.consume_precen(
+				// 		that.tableDatas[5][6] - that.tableDatas[5][4],
+				// 		that.tableDatas[5][6]
+				// 	);
+				// 	that.tableDatas[6][4] = data2.coal_consume_unit;
+				// 	that.tableDatas[6][7] = this.consume_precen(
+				// 		that.tableDatas[6][6]-that.tableDatas[6][4],
+				// 		that.tableDatas[6][6]
+				// 	);
+				// 	that.tableDatas[7][4] = data2.cen_consume_unit;
+				// 	that.tableDatas[7][7] = this.consume_precen(
+				// 		that.tableDatas[7][6]-that.tableDatas[7][4],
+				// 		that.tableDatas[7][6]
+				// 	);
+				// 	that.tableDatas[8][4] = data2.elec_consume;
+				// 	that.tableDatas[8][7] = this.consume_precen(
+				// 		that.tableDatas[8][6]-that.tableDatas[8][4],
+				// 		that.tableDatas[8][6]
+				// );
+				// 	that.tableDatas[9][4] =
+				// 		data2.production_cost_unit;
+				// 	that.tableDatas[9][7] = this.consume_precen(
+				// 		that.tableDatas[9][6]-that.tableDatas[9][4],
+				// 		that.tableDatas[9][6]
+				// 	);
+				// 	that.tableDatas[10][4] = data2.ammonia_consume;
+				// 	that.tableDatas[10][7] = this.consume_precen(
+				// 		that.tableDatas[10][6] - that.tableDatas[10][4],
+				// 		that.tableDatas[10][6]
+				// 	)
+				// 	that.tableDatas[11][4] = (data2.ammonia_consume*1000/data2.total_production).toFixed(2);
+				// 	that.tableDatas[11][7] = this.consume_precen(
+				// 		that.tableDatas[11][6] - that.tableDatas[11][4],
+				// 		that.tableDatas[11][6]
+				// 	)
+					params2.mpoint = mpoint
+					return that.$API.enm.mpointstat.list.req(params2);
+				}
+				}).then((res)=>{
+			   		if (res.length > 0) {
+						let data = res[0];
+						that.tableDatas[4][4] = (data.val/that.tableDatas[0][4]).toFixed(2);
+							}
+			}
+			)
+		},
+		get_years(year){
+			let that = this;
+			let params1 = {};
+			params1.page = 0;
+			params1.year_s = year;
+			let mpoint = "3853763497771151360"
+			params1.type = "year_s";
+			params1.mgroup = this.query.mgroup;
+			this.$API.enm.enstat.req(params1).then((res1) => {
+				if (res1.length > 0) {
+					let data1 = res1[0];
+					that.tableDatas[0][5] = data1.total_production;
+					that.tableDatas[0][9] = this.precen(
+						that.tableDatas[0][5],
+						that.tableDatas[0][8]
+					);
+					that.tableDatas[1][5] = data1.production_hour;
+					that.tableDatas[1][9] = this.precen(
+						that.tableDatas[1][5],
+						that.tableDatas[1][8]
+					);
+					that.tableDatas[2][5] = data1.run_hour;
+					that.tableDatas[2][9] = this.precen(
+						that.tableDatas[2][5],
+						that.tableDatas[2][8]
+					);
+					that.tableDatas[3][5] = data1.run_rate;
+					that.tableDatas[3][9] = this.precen(
+						that.tableDatas[3][5],
+						that.tableDatas[3][8]
+					);
+					// that.tableDatas[4][5] = data1.elec_consume_unit;
+					// that.tableDatas[4][9] = this.consume_precen(
+					// 	(that.tableDatas[4][8]-that.tableDatas[4][5]),
+					// 	that.tableDatas[4][8]
+					// );
+
+				// 	that.tableDatas[5][5] =
+				// 		data.celec_consume_unit;
+				// 	that.tableDatas[5][9] = this.consume_precen(
+				// 		(that.tableDatas[5][8]-that.tableDatas[5][5]),
+				// 		that.tableDatas[5][8]
+				// 	);
+				// 	that.tableDatas[6][5] = data1.coal_consume_unit;
+				// 	that.tableDatas[6][9] = this.consume_precen(
+				// 		(that.tableDatas[6][8]-that.tableDatas[6][5]),
+				// 		that.tableDatas[6][8]
+				// 	);
+				// 	that.tableDatas[7][5] = data1.cen_consume_unit;
+				// 	that.tableDatas[7][9] = this.consume_precen(
+				// 		(that.tableDatas[7][8]-that.tableDatas[7][5]),
+				// 		that.tableDatas[7][8]
+				// 	);
+				// 	that.tableDatas[8][5] = data1.elec_consume;
+				// 	that.tableDatas[8][9] = this.consume_precen(
+				// 		(that.tableDatas[8][8]-that.tableDatas[8][5]),
+				// 		that.tableDatas[8][8]
+				// 		);
+				// 	that.tableDatas[9][5] =
+				// 		data1.production_cost_unit;
+				// 	that.tableDatas[9][9] = this.consume_precen(
+				// 		(that.tableDatas[9][8]-that.tableDatas[9][5]),
+				// 		that.tableDatas[9][8]
+				// 	);
+				// 	that.tableDatas[10][5] = data1.ammonia_consume;
+				// 	that.tableDatas[10][9] = this.consume_precen(
+				// 		that.tableDatas[10][8] - that.tableDatas[10][5],
+				// 		that.tableDatas[10][8]
+				// );
+				// 	that.tableDatas[11][5] = (data1.ammonia_consume*1000/data1.total_production).toFixed(2);
+				// 	that.tableDatas[11][9] = this.consume_precen(
+				// 		that.tableDatas[11][8] - that.tableDatas[11][5],
+				// 		that.tableDatas[11][8]
+				// );
+				} else {
+				}
+				params1.mpoint = mpoint
+				return that.$API.enm.mpointstat.list.req(params1);
+			}).then((res)=>{
+			   		if (res.length > 0) {
+						let data = res[0];
+						that.tableDatas[4][5] = (data.val/that.tableDatas[0][5]).toFixed(2);
+							}
+			})
+		},
+		//获取小时数据
+		getHourData(year, month, days) {
+			let that = this;
+			let query = {};
+			query.page = 0;
+			query.year = year;
+			query.month = month;
+			query.day = days;
+			query.type = "hour_s";
+			query.mgroup = that.query.mgroup;
+			this.$API.enm.enstat.req(query).then((response) => {
+				let seriesData0 = [],
+					seriesData1 = [],
+					seriesData2 = [];
+				let data = response;
+				data.forEach((item) => {
+					let ind = item.hour;
+					seriesData0[ind] = item.total_production;
+					seriesData1[ind] = item.elec_consume_unit;
+					seriesData2[ind] = item.coal_consume_unit;
+				});
+				let options = { ...that.option1 };
+				options.series[0].data = seriesData0;
+				options.series[1].data = seriesData1;
+				options.series[2].data = seriesData2;
+				let hourXAxis = [];
+				for (let i = 0; i < 24; i++) {
+					let item = i + "时";
+					hourXAxis.push(item);
+				}
+				options.xAxis.data = hourXAxis;
+				that.optionHour = options;
+			});
+		},
+		//获取天数据
+		getDayData(year, month) {
+			let that = this;
+			let query1 = {};
+			query1.page = 0;
+			query1.year_s = year;
+			query1.month_s = month;
+			query1.type = "day_s";
+			query1.mgroup = this.query.mgroup;
+			this.$API.enm.enstat.req(query1).then((response) => {
+				let seriesData0 = [],
+					seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [],
+					seriesData4 = [];
+				let data = response;
+				data.forEach((item) => {
+					let ind = item.day_s - 1;
+					seriesData0[ind] = item.total_production;
+					seriesData1[ind] = item.production_hour;
+					seriesData2[ind] = item.run_rate;
+					seriesData3[ind] = item.elec_consume_unit;
+					seriesData4[ind] = item.coal_consume_unit;
+				});
+				let options = { ...that.option2 };
+				options.series[0].data = seriesData0;
+				options.series[1].data = seriesData1;
+				options.series[2].data = seriesData2;
+				options.series[3].data = seriesData3;
+				options.series[4].data = seriesData4;
+				let dayXAxis = [];
+				let dayss = new Date(year, month, 0).getDate();
+				for (let i = 1; i <= dayss; i++) {
+					let item = i + "日";
+					dayXAxis.push(item);
+				}
+				options.xAxis.data = dayXAxis;
+				that.optionDay = options;
+			});
+		},
+		//获取月数据
+		getMonthData(year) {
+			let that = this;
+			let query2 = {};
+			query2.page = 0;
+			query2.year_s = year;
+			query2.type = "month_s";
+			query2.mgroup = that.query.mgroup;
+			this.$API.enm.enstat.req(query2).then((response) => {
+				let seriesData0 = [],
+					seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [],
+					seriesData4 = [];
+				let data = response;
+				data.forEach((item) => {
+					let ind = item.month_s - 1;
+					seriesData0[ind] = item.total_production;
+					seriesData1[ind] = item.production_hour;
+					seriesData2[ind] = item.run_rate;
+					seriesData3[ind] = item.elec_consume_unit;
+					seriesData4[ind] = item.coal_consume_unit;
+				});
+				let options = { ...that.option3 };
+				options.series[0].data = seriesData0;
+				options.series[1].data = seriesData1;
+				options.series[2].data = seriesData2;
+				options.series[3].data = seriesData3;
+				options.series[4].data = seriesData4;
+				let monthXAxis = [];
+				for (let i = 1; i < 13; i++) {
+					let item = i + "月";
+					monthXAxis.push(item);
+				}
+				options.xAxis.data = monthXAxis;
+				that.optionMonth = options;
+			});
+		},
+		itemClick(type, item) {
+			this.type = type;
+			this.cate = item[1];
+			this.asynDialog = true;
+		},
+		itemClick1(type, item) {
+			this.chartShow = false;
+			this.$API.bi.dataset.exec.req("3322567213885833216").then((res) => {
+				this.myOption = JSON.parse(res.echart_options);
+				this.chartShow = true;
+			});
+		},
+		handlePrint() {
+			this.$PRINT("#myReport");
+		},
+		exportExcel() {
+			this.exportLoading = true;
+			this.$XLSX("#myTable", this.tableName);
+			this.exportLoading = false;
+		},
+	},
+};
+</script>
+<style scoped>
+.printContainer {
+	padding-left: 20px;
+}
+.printWrap {
+	overflow-x: auto;
+}
+.radioWrap {
+	display: flex;
+	justify-content: center;
+	padding-top: 10px;
+	position: relative;
+}
+</style>
diff --git a/src/views/fac_cal/mpointstat.vue b/src/views/fac_cal/mpointstat.vue
index 94cb6b3d..2e8d9a8a 100644
--- a/src/views/fac_cal/mpointstat.vue
+++ b/src/views/fac_cal/mpointstat.vue
@@ -238,6 +238,7 @@ export default {
 				{ label: "班天", value: "day_s" },
 				{ label: "班月", value: "month_s" },
 				{ label: "班时", value: "hour_s"},
+				{ label: "小时", value: "hour"},
                 { label: "天", value: "day" },
                 { label: "月", value: "month"},
 			],
diff --git a/src/views/home/llm_chat.vue b/src/views/home/llm_chat.vue
new file mode 100644
index 00000000..538d425d
--- /dev/null
+++ b/src/views/home/llm_chat.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="chat-window">
+    <div class="messages" ref="messageList">
+      <div v-for="(msg, index) in messages" :key="index" :class="msg.role">
+        <strong>{{ msg.role === 'user' ? '你' : '助手' }}：</strong>
+        <span>{{ msg.content }}</span>
+      </div>
+    </div>
+    <div class="input-box">
+      <textarea
+        v-model="input"
+        @keydown.enter.prevent="handleSend"
+        placeholder="请输入..."
+      />
+      <button @click="handleSend" :disabled="loading">发送</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: [],
+      input: '',
+      loading: false,
+      eventSource: null,
+      conversationId: '3841325303385792512'
+    };
+  },
+  watch: {
+    conversationId: {
+      immediate: true,
+      handler() {
+        this.messages = []; // 如果你有加载历史消息，可以在此请求
+        this.closeStream();
+      }
+    }
+  },
+  methods: {
+    async handleSend() {
+      if (!this.input.trim()) return;
+      this.loading = true;
+
+      // 添加用户消息
+      const userMessage = { role: 'user', content: this.input };
+      this.messages.push(userMessage);
+
+      // 添加助手消息框架
+      const assistantMessage = { role: 'assistant', content: '' };
+      this.messages.push(assistantMessage);
+
+      const message = encodeURIComponent(this.input);
+      const url = `/api/ichat/message/completion/`;
+      const payload = {
+        conversation: this.conversationId,
+        message: message
+      }
+      this.input = '';
+      this.scrollToBottom();
+
+      try {
+        const response = await fetch('/api/ichat/message/completion/', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(payload)
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+          // 更新 assistant 内容
+          assistantMessage.content = result.answer || '';
+
+          // 保存 conversation_id（首次发送消息时获取）
+          if (!this.conversationId && result.conversation_id) {
+            this.conversationId = result.conversation_id;
+          }
+
+          this.scrollToBottom();
+        } else {
+          throw new Error(result.detail || '请求失败');
+        }
+      } catch (err) {
+        console.error('发送失败：', err);
+        assistantMessage.content = '[助手响应失败，请稍后再试]';
+      } finally {
+        this.loading = false;
+      }
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const el = this.$refs.messageList;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    },
+    closeStream() {
+      if (this.eventSource) {
+        this.eventSource.close();
+        this.eventSource = null;
+      }
+    }
+  },
+  beforeUnmount() {
+    this.closeStream();
+  }
+};
+</script>
+
+<style scoped>
+.chat-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.user, .assistant {
+  margin-bottom: 10px;
+  white-space: pre-wrap;
+}
+
+.input-box {
+  display: flex;
+  margin-top: 10px;
+}
+
+textarea {
+  flex: 1;
+  resize: none;
+  height: 60px;
+  padding: 8px;
+  font-size: 14px;
+}
+
+button {
+  margin-left: 10px;
+  padding: 0 16px;
+}
+</style>