<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.cement }}
						</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.celec_consume_unit)+Number(dicData.b_sl_elec)).toFixed(2) }}
								<span class="elec_unit">kW·h/t</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>熟料综合煤耗</span>
							<p class="elec_number">
								{{ (Number(hotData.coal_consume_unit)+Number(dicData.b_sl_coal)).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.cen_consume_unit)+Number(dicData.b_sl_enegy)).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)+Number(dicData.b_sn_enegy)).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_elec_consume_unit)+Number(dicData.b_sn_elec)).toFixed(2) }}
								<span class="elec_unit">kW·h/t</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>水泥包装工序电耗</span>
							<p class="elec_number">
								{{(Number(hotData.bz_elec_consume_unit) + Number(dicData.b_snbz_elec)).toFixed(2) }}
								<span class="elec_unit">kW·h/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,
			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,
				cement: 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: {
				celec_consume_unit: 0, //综合电耗
				coal_consume_unit: 0, //单位煤耗
				cen_consume_unit: 0, //综合能耗
				sn_cen_consume_unit: 0, //水泥综合能耗
				sn_elec_consume_unit: 0,//水泥分布电耗
				bz_elec_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.bigScreen_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; //水泥磨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.cement = item.total_production; //水泥磨产量
				            }
				        })
				    }).then(() => {
				        // 获取出厂水泥数据
				        return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥包装" });
				    }).then((res) => {
				        that.out_cement = res[0]?.id; //水泥包装id
					
				        let query = {
							page: 0,
							year_s: that.currentYear,
							month_s: that.currentMonth,
							type: "month_s",
							mgroup: that.out_cement,
						};
						return that.$API.enm.mpointstat.list.req(query);
				    }).then((response) => {
				        response.forEach((item) => {
				            if (item.mpoint_name == '出厂水泥') {
				                that.totalData.out_cement = item.val || 0; //出厂水泥
				            }
				        })
				    })
			},
		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); // 烧成车间用水
			let seriesData5 = new Array(31).fill(0); // 水泥车间用水

			// 定义查询参数的生成函数
			function generateQuery(mpointId) {
				return {
					page: 0,
					year: that.currentYear,
					month: that.currentMonth,
					type: "day",
					mpoint: mpointId,
				};
			}

			// 第一个API查询
			let query1 = generateQuery("3631858687335112704");
			this.$API.enm.mpointstat.list.req(query1).then((response) => {
				//反转response数据
				response.reverse();
				response.forEach((item) => {
						let ind = item.day - 1;
						seriesData1[ind] = item.val || 0;
				});

				// 第二个API查询
				let query2 = generateQuery("3631858394648182784");
				return this.$API.enm.mpointstat.list.req(query2);
				
			}).then((response) => {
				response.reverse();
				
				response.forEach((item) => {			
						let ind = item.day - 1;					
						seriesData3[ind] = item.val || 0;
				});
				// 第三个API查询
				let query3 = generateQuery("3631858982832218112");
				response.reverse();
				return this.$API.enm.mpointstat.list.req(query3);
			}).then((response) => {
				response.reverse();
				let maxId;
				response.forEach((item) => {
						let ind = item.day - 1;
						maxId = ind;
						seriesData5[ind] = item.val || 0;
				});
			// 更新图表数据
			option3.color = ['#FFBF00','#6495ED', '#CC00FF']
			option3.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[1],
					},
				},
				{
					name: "工业水(t)",
					textStyle: {
						color: "#fff",
					},
					borderRadius: 2,
					itemStyle: {
						color: that.linearGradientColors[2],
					},
				},
			];
			option3.series = [
				{
				name: '生活水(t)',
				type: 'line',
				data: seriesData1,
				lineStyle: {
					color: that.linearGradientColors[0],
				},
				},
				{
				name: '绿化水(t)',
				type: 'line',
				data: seriesData3,
				lineStyle: {
					color: that.linearGradientColors[1],
				},
				},
				{
				name: '工业水(t)',
				type: 'line',
				data: seriesData5,
				lineStyle: {
					color: that.linearGradientColors[2]	
				},
				},
			]
			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.celec_consume_unit =Number(ress[0].celec_consume_unit).toFixed(2);
						that.hotData.coal_consume_unit =Number(ress[0].coal_consume_unit).toFixed(2);
						that.hotData.cen_consume_unit = Number(ress[0].cen_consume_unit).toFixed(2);
						console.log(that.hotData.celec_consume_unit);
						console.log(that.hotData.coal_consume_unit);
						console.log(that.hotData.cen_consume_unit);
					});
				});
			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.sn_elec_consume_unit =Number(ress[0].elec_consume_unit).toFixed(2);
					that.hotData.sn_cen_consume_unit = Number(ress[0].cen_consume_unit).toFixed(2);
					console.log(that.hotData.sn_elec_consume_unit);
					console.log(that.hotData.sn_cen_consume_unit);
				});
			});
			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.bz_elec_consume_unit =Number(ress[0].elec_consume_unit).toFixed(2);
					console.log(that.hotData.bz_elec_consume_unit);
				});
			});
		},
		//获取本月能源数据字典数据
		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 params = {
				type: "month_s",
				year_s: that.currentYear,
				month_s: that.currentMonth,
			};
			that.$API.enm.enstat.req(params).then((res) => {
				let data = res.results;
				let seriesData = [0, 0, 0, 0, 0];
				data.forEach((item, index) => {
					if (item.mgroup_name == "电石渣") {
						seriesData[0] = that.elecData[0].value =
							item.elec_consume;
					} else if (item.mgroup_name == "原料磨") {
						seriesData[1] = that.elecData[1].value =
							item.elec_consume;
					} else if (item.mgroup_name == "煤磨") {
						seriesData[2] = that.elecData[2].value =
							item.elec_consume;
					} else if (item.mgroup_name == "回转窑") {
						seriesData[3] = that.elecData[3].value =
							item.elec_consume;
					} else if (item.mgroup_name == "水泥磨") {
						seriesData[4] = that.elecData[4].value =
							item.elec_consume;
					} else if (item.mgroup_name == "水泥包装") {
						seriesData[5] = that.elecData[5].value =
							item.elec_consume;
					}
				});
				that.radarOption.series.data[0].value = seriesData;
				//右1---工序电耗---雷达图
				let radarDom = document.getElementById("radar");
				let radarChart = echarts.init(radarDom);
				radarChart.setOption(that.radarOption);
			});
		},
		//能源消耗
		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 = generateQuery("3626253231757619200");
			this.$API.enm.enstat.req(query1).then((response) => {
				response.forEach((item) => {
					if (item.qua_data.length > 0) {
						let ind = item.day_s - 1;
						seriesData[ind] = item.total_production || 0;
					}
				});
				// 获取每日的全厂电量
				let query2 = generateQueryMpoint("3631880992400515072");
				return this.$API.enm.mpointstat.list.req(query2);
			}).then((response) => {
				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: "原煤消耗(t)",
						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: '原煤消耗(t)',
					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) {
				// console.log(name + ' :resize')
				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)
				);
				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/factory.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;
						}
					}
					// console.log("Camera Alpha:", camera.alpha);
					// console.log("Camera Beta:", camera.beta);
					// console.log("Camera Radius:", camera.radius);
					// console.log("Camera Radius:", camera.target);
				});
				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: 1vh;
}
.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>
