<template>
	<div class="container">
		<header class="pageHeader">
			<span class="top-line top-line-left"></span>
			{{ bigScreenName }}
			<span class="top-line top-line-right"></span>
		</header>
		<div id="model" class="model">
			<div class="top_block">
				<div class="top_block_time">
					<img src="img/photon_top_line.png" />
					<span>凌源</span>
					{{ 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.total_production }}
						</div>
					</div>
					<div class="totalNumWrap totalNumWrap_green">
						<img src="img/number_bg_green.png" />
						<span class="totalNumText">实物煤耗</span>
						<div class="totalNumber">
							{{ totalData.pcoal_consume }}
						</div>
					</div>
					<div class="totalNumWrap totalNum_blue">
						<img src="img/number_bg_blue.png" />
						<span class="totalNumText">综合电耗</span>
						<div class="totalNumber">
							{{ totalData.celec_consume_unit }}
						</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.value"
							:color="colors"
						>
							<template #default="{ percentage }">
								<span class="percentage-value"
									>{{ percentage }}%</span
								>
								<p class="percentage-label">{{ item.name }}</p>
							</template>
						</el-progress>
						<!-- <div class="circle_bottom_text">{{ item.name }}</div> -->
					</div>
				</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>
										电耗<span
											style="
												color: #fff;
												font-weight: 500;
												font-size: 12px;
											"
											>kW·h</span
										>
									</th>
								</tr>
								<tr class="bodyListItem bodyListItemBg">
									<td class="bodyListItem_name">
										石灰石破碎
									</td>
									<td class="bodyListItem_num">
										{{ radarSeriesData[0] }}
									</td>
								</tr>
								<tr class="bodyListItem">
									<td class="bodyListItem_name">原料磨</td>
									<td class="bodyListItem_num">
										{{ radarSeriesData[1] }}
									</td>
								</tr>
								<tr class="bodyListItem bodyListItemBg">
									<td class="bodyListItem_name">回转窑</td>
									<td class="bodyListItem_num">
										{{ radarSeriesData[2] }}
									</td>
								</tr>
								<tr class="bodyListItem">
									<td class="bodyListItem_name">余热发电</td>
									<td class="bodyListItem_num">
										{{ radarSeriesData[3] }}
									</td>
								</tr>
								<tr class="bodyListItem bodyListItemBg">
									<td class="bodyListItem_name">煤磨</td>
									<td class="bodyListItem_num">
										{{ radarSeriesData[4] }}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="flexItem">
				<div class="itemTitle">
					<div class="itemTitleIcon"></div>
					<div>质量分析</div>
					<!-- <el-radio-group v-model="deptName">
						<el-radio label="入窑生料" class="elRadio"
							>入窑生料</el-radio
						>
						<el-radio label="出磨熟料" class="elRadio"
							>出磨熟料</el-radio
						>
					</el-radio-group> -->
				</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">
								{{ hotData.total_production }}
								<span class="elec_unit">kW·h</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>NOx折算值</span>
							<p class="elec_number">
								{{ hotData.NOx }}
								<span class="elec_unit">mg/m³</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>发电量</span>
							<p class="elec_number">
								{{ hotData.production_elec_unit }}
								<span class="elec_unit">kW·h</span>
							</p>
						</div>
					</div>

					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>SO2折算值</span>
							<p class="elec_number">
								{{ hotData.SO2 }}
								<span class="elec_unit">mg/m³</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>自用电量</span>
							<p class="elec_number">
								{{ hotData.elec_consume }}
								<span class="elec_unit">kW·h</span>
							</p>
						</div>
					</div>
					<div class="elecItem">
						<div class="elecItem_wrap">
							<span>颗粒物折算值</span>
							<p class="elec_number">
								{{ hotData.klw }}
								<span class="elec_unit">mg/m³</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import * as echarts from "echarts";
import config from "@/config";
import "animate.css";

// import * as BABYLON from "babylonjs";
// import * as BABYLON_GUI from "babylonjs-gui";
// import * as BABYLON_GRID from "@/utils/gridMaterial";
// import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
// 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";
// import "babylonjs-loaders";

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 {
	data() {
		return {
			colors: [
				{ color: "#f95050", percentage: 20 },
				{ color: "#e6a23c", percentage: 40 },
				{ color: "#1989fa", percentage: 60 },
				{ color: "#02f5f2", percentage: 80 },
				{ color: "#5cb87a", percentage: 100 },
			],
			shengliaoData: {
				KH: [
					1.081, 0.922, 1.034, 1.079, 1.088, 0.983, 0.917, 1.125,
					1.03, 0.995, 1.019, 1.074, 0.925, 0.943, 1.067, 1.048,
					0.964, 0.884, 0.947, 1.017, 1.011, 1.022, 0.994, 1.025,
					1.031, 1.003, 0.941, 0.982, 1.067, 0.982, 0.987,
				],
				SM: [
					2.18, 2.46, 2.63, 2.34, 2.14, 2.52, 2.41, 2.65, 2.45, 2.5,
					2.52, 2.49, 2.49, 2.45, 2.44, 2.38, 2.38, 2.3, 2.65, 2.53,
					2.49, 2.41, 2.57, 2.69, 2.64, 2.74, 2.81, 2.38, 2.54, 2.54,
					2.38,
				],
				IM: [
					1.67, 1.6, 1.4, 1.41, 1.61, 1.41, 1.53, 1.35, 1.33, 1.35,
					1.29, 1.27, 0.61, 0.72, 0.66, 1.14, 1.18, 1.21, 1.48, 1.48,
					1.49, 1.45, 1.41, 1.48, 1.35, 1.22, 1.33, 1.68, 1.45, 1.36,
					1.49,
				],
			},
			shuliaoData: {
				KH: [
					0.873, 0.861, 0.873, 0.876, 0.883, 0.882, 0.83, 0.882,
					0.913, 0.92, 0.893, 0.93, 0.94, 0.851, 0.87, 0.958, 0.935,
					0.886, 0.873, 0.886, 0.939, 0.919, 0.941, 0.948, 0.899,
					0.906, 0.914, 0.852, 0.852, 0.923, 0.884,
				],
				SM: [
					2.37, 2.51, 2.66, 2.44, 2.58, 2.54, 2.41, 2.52, 2.41, 2.51,
					2.56, 2.49, 2.54, 2.44, 2.6, 2.44, 2.42, 2.46, 2.53, 2.54,
					2.53, 2.45, 2.64, 2.64, 2.73, 2.59, 2.79, 2.39, 2.4, 2.6,
					2.52,
				],
				IM: [
					1.65, 1.48, 1.43, 1.53, 1.39, 1.41, 1.52, 1.43, 1.4, 1.39,
					1.28, 1.31, 0.75, 0.92, 0.83, 1.1, 1.21, 1.18, 1.28, 1.45,
					1.51, 1.45, 1.37, 1.35, 1.35, 1.34, 1.31, 1.6, 1.54, 1.37,
					1.41,
				],
			},
			KHData: [],
			SMData: [],
			IMData: [],
			factoryName: "",
			initialAlpha: -Math.PI / 4.5,
			initialBeta: Math.PI / 2,
			initialRadius: 2.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(128, 255, 165)",
					},
					{
						offset: 1,
						color: "rgb(1, 191, 236)",
					},
				]),

				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(55, 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)",
					},
				]),
			],
			sectionNames: {
				石灰石破碎筛分生产系统: "石灰石破碎",
				原料磨: "原料磨",
				回转窑: "回转窑",
				煤磨: "煤磨",
				余热发电: "余热发电",
			},
			totalData: {
				total_production: 0,
				pcoal_consume: 0,
				celec_consume_unit: 0,
			},
			rateData: [
				{ name: "石灰石破碎", value: 0 },
				{ name: "原料磨", value: 0 },
				{ name: "煤磨", value: 0 },
				{ name: "回转窑", value: 0 },
				{ name: "余热发电", value: 0 },
			],
			hotData: {
				total_production: "",
				production_elec_unit: "",
				elec_consume: "",
				NOx: "",
				SO2: "",
				klw: "",
			},
			tableData: [],
			tezhongData: [],
			option: {
				color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985",
						},
					},
				},
				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",
					nameTextStyle: {
						color: "#ffffff",
					},
					axisLabel: {
						color: "#ffffff",
					},

					splitLine: {
						show: false,
						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: {
						textStyle: {
							padding: [-20, -20], // 控制文字padding
						},
					},
					nameGap: 2,
					radius: 63, //缩放
					center: ["50%", "50%"], //位置
					// shape: "circle",
					splitNumber: 4,
					axisName: {
						color: "#2adbbc",
					},
					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(128, 255, 165)",
										},
										{
											offset: 1,
											color: "rgb(1, 191, 236)",
										},
									]
								),
							},
							label: {
								show: true,
								color: "#02f5f2",
								formatter: function (params) {
									return params.value;
								},
							},
						},
					],
				},
			},
		};
	},
	mounted() {
		loadBabylon().then(() => {
		    this.initView();
		}
		)
	},
	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.productNum();
			//获取设备运转率
			that.eqRate();
			//余热发电
			that.generation();
			//工序电耗
			that.proceElec();
			//质量分析
			that.qualAnalys();
			//数据采集
			that.dataCollect();

			that.initDomStyle();
			that.initFactory();
			that.timerTime = setInterval(() => {
				that.showTime();
			}, 1000);
			that.qualityTimer = setInterval(() => {
				let lineDom = document.getElementById("line3");
				if (lineDom) {
					that.KHData = [];
					that.SMData = [];
					that.IMData = [];
					if (that.deptName == "出磨熟料") {
						that.deptName = "入窑生料";
						for (let i = 0; i < day; i++) {
							that.KHData.push(that.shengliaoData.KH[i]);
							that.SMData.push(that.shengliaoData.SM[i]);
							that.IMData.push(that.shengliaoData.IM[i]);
						}
					} else {
						that.deptName = "出磨熟料";
						for (let i = 0; i < day; i++) {
							that.KHData.push(that.shuliaoData.KH[i]);
							that.SMData.push(that.shuliaoData.SM[i]);
							that.IMData.push(that.shuliaoData.IM[i]);
						}
					}
					that.initChart();
				}
			}, 5000);
			// that.timerTime = setInterval(() => {
			// 	that.productNum();
			// 	that.eqRate();
			// 	that.generation();
			// 	that.proceElec();
			// 	that.dataCollect();
			// }, 3600000);
		});
		},
		//熟料产量
		productNum() {
			let that = this;
			this.$API.mtm.mgroup.list
				.req({ page: 0, search: "回转窑" })
				.then((res) => {
					// console.log("回转窑", res);
					that.huihzuanyaoId = res[0].id;
					let query = {};
					query.page = 0;
					query.year_s = that.currentYear;
					query.month_s = that.currentMonth;
					query.type = "day_s";
					query.mgroup = that.huihzuanyaoId;
					this.$API.enm.enstat.req(query).then((response) => {
						let seriesData = [];
						let data = response;
						data.forEach((item) => {
							let ind = item.day_s - 1;
							seriesData[ind] = item.total_production;
							if (item.day_s == that.currentDay) {
								that.totalData.total_production =
									item.total_production;
								that.totalData.pcoal_consume =
									item.pcoal_consume;
								that.totalData.celec_consume_unit =
									item.celec_consume_unit;
							}
						});
						let option1 = that.deepCopy(that.option);
						let chartDom = document.getElementById("line1");
						let myChart = echarts.init(chartDom);
						option1.legend.data = [
							// {
							// 	name: "熟料",
							// 	textStyle: {
							// 		color: "#fff",
							// 	},
							// 	borderRadius: 2,
							// 	itemStyle: {
							// 		color: that.linearGradientColors[0],
							// 	},
							// },
							// {
							// 	name: "特种熟料",
							// 	textStyle: {
							// 		color: "#fff",
							// 	},
							// 	borderRadius: 2,
							// 	itemStyle: {
							// 		color: that.linearGradientColors[1],
							// 	},
							// },
						];
						option1.series = [
							{
								name: "",
								type: "line",
								stack: "Total",
								smooth: true,
								lineStyle: {
									width: 0,
								},
								showSymbol: false,
								areaStyle: {
									opacity: 0.8,
									color: that.linearGradientColors[0],
								},
								emphasis: {
									focus: "series",
								},
								data: seriesData,
							},
							{
								name: "",
								type: "line",
								stack: "Total",
								smooth: true,
								lineStyle: {
									width: 0,
								},
								showSymbol: false,
								areaStyle: {
									opacity: 0.8,
									color: that.linearGradientColors[1],
								},
								emphasis: {
									focus: "series",
								},
								data: that.tezhongData,
							},
						];
						myChart.setOption(option1);
					});
				});
		},
		//设备运转率
		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 = Number(item.run_rate);
					} else if (item.mgroup_name == "原料磨") {
						that.rateData[1].value = Number(item.run_rate);
					} else if (item.mgroup_name == "煤磨") {
						that.rateData[2].value = Number(item.run_rate);
					} else if (item.mgroup_name == "回转窑") {
						that.rateData[3].value = Number(item.run_rate);
					} else if (item.mgroup_name == "余热发电") {
						that.rateData[4].value = Number(item.run_rate);
					}
				});
			});
		},
		//余热发电&环保数据
		generation() {
			let that = this;
			this.$API.mtm.mgroup.list
				.req({ page: 0, search: "余热发电" })
				.then((res) => {
					// console.log("余热发电", 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.total_production =
							ress[0].total_production;
						that.hotData.production_elec_unit =
							ress[0].production_elec_unit;
						that.hotData.elec_consume = ress[0].elec_consume;
					});
				});
			//环保数据
			this.$API.enm.mpoint.list
				.req({
					page: 0,
					code: "K_TX_IP20_TX_MD500", //nox
					query: " { id, name, code, last_data, gather_state }",
				})
				.then((res0) => {
					if (res0[0].last_data.last_val) {
						that.hotData.NOx =
							res0[0].last_data.last_val.toFixed(2);
					}
				});
			this.$API.enm.mpoint.list
				.req({
					page: 0,
					code: "K_TX_IP20_TX_MD508", //so2
					query: "{ id, name, code, last_data, gather_state }",
				})
				.then((res1) => {
					if (res1[0].last_data.last_val) {
						that.hotData.SO2 =
							res1[0].last_data.last_val.toFixed(2);
					}
				});
			this.$API.enm.mpoint.list
				.req({
					page: 0,
					code: "K_TX_IP20_TX_MD504", //颗粒物
					query: "{ id, name, code, last_data, gather_state }",
				})
				.then((res2) => {
					if (res2[0].last_data.last_val) {
						that.hotData.klw =
							res2[0].last_data.last_val.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;
				console.log("工序电耗", data);
				let seriesData = [0, 0, 0, 0, 0];
				data.forEach((item, index) => {
					if (item.mgroup_name == "石灰石破碎") {
						seriesData[0] = item.elec_consume;
					} else if (item.mgroup_name == "原料磨") {
						seriesData[1] = item.elec_consume;
					} else if (item.mgroup_name == "回转窑") {
						seriesData[2] = item.elec_consume;
					} else if (item.mgroup_name == "余热发电") {
						console.log("余热发电工序电耗", item.elec_consume);
						seriesData[3] = item.elec_consume;
					} else if (item.mgroup_name == "煤磨") {
						seriesData[4] = item.elec_consume;
					}
				});
				that.radarSeriesData = seriesData;
				that.radarOption.series.data[0].value = seriesData;
				//右1---工序电耗---雷达图
				let radarDom = document.getElementById("radar");
				let radarChart = echarts.init(radarDom);
				radarChart.setOption(that.radarOption);
			});
		},
		//质量分析---待定
		qualAnalys() {},
		//数据采集——设备运行状态
		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) => {
				console.log("数据采集", 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);
				});
				console.log("数据采集tableData", that.tableData);

				let chartDom6 = document.getElementById("pieChart");
				let myChart6 = echarts.init(chartDom6);
				let colors = [];
				colors.push(that.linearGradientColors[0]);
				colors.push(that.linearGradientColors[3]);
				let option6 = {
					color: colors,
					tooltip: {
						trigger: "item",
					},
					legend: {
						top: "2%",
						left: "center",
						textStyle: {
							color: "#fff",
						},
					},
					series: [
						{
							name: "运行状态",
							type: "pie",
							radius: ["40%", "70%"],
							padAngle: 5,
							itemStyle: {
								borderRadius: 5,
							},
							label: {
								show: true,
								position: "inner",
								fontSize: 16,
								formatter: "{d}%",
								color: "#fff",
							},
							labelLine: {
								show: false,
							},
							data: [
								{ value: success_num, name: "正常" },
								{ value: error_num, name: "掉线" },
							],
						},
					],
				};
				myChart6.setOption(option6);
			});
		},
		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 pieChart = document.getElementById("pieChart");
			var elTable = document.getElementById("elTable");
			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("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, 0, 1.2)
				);
				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";
				// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/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;
						}
					}
				});
				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(); //Call the createScene function
			// scene.debugLayer.show();

			// // Register a render loop to repeatedly render the scene
			engine.runRenderLoop(function () {
				scene.render();
			});
			this.engine = engine;
			this.scene = scene;
			// Watch for browser/canvas resize events
			window.addEventListener("resize", function () {
				engine.resize();
			});
		},
		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.6)"; //暗色

			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.8)";
			mgroup_line.background = "rgba(44, 237, 255, 0.8)";
			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 = "white";
			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(255,255,255, 0.7)";
				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 = "white";
				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 = true;
			// 将StackPanel添加到GUI系统中
			that.myui.addControl(data_view);
			data_view.linkWithMesh(mesh);
			data_view.linkOffsetY = -120;
		},
		deepCopy(obj) {
			return JSON.parse(JSON.stringify(obj));
		},
		//质量分析模拟数据
		initChart() {
			let that = this;
			function deepCopy(obj) {
				return JSON.parse(JSON.stringify(obj));
			}
			//右2---质量分析---折线图
			let option5 = deepCopy(that.option);
			let chartDom5 = document.getElementById("line3");
			let myChart5 = echarts.init(chartDom5);
			option5.legend.data = [
				{
					name: "KH",
					textStyle: {
						color: "#fff",
					},
					borderRadius: 2,
					itemStyle: {
						color: that.linearGradientColors[0],
					},
				},
				{
					name: "SM",
					textStyle: {
						color: "#fff",
					},
					borderRadius: 2,
					itemStyle: {
						color: that.linearGradientColors[1],
					},
				},
				{
					name: "IM",
					textStyle: {
						color: "#fff",
					},
					borderRadius: 2,
					itemStyle: {
						color: that.linearGradientColors[2],
					},
				},
			];
			option5.series = [
				{
					name: "KH",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: that.linearGradientColors[0],
					},
					emphasis: {
						focus: "series",
					},
					data: that.KHData,
				},
				{
					name: "SM",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: that.linearGradientColors[1],
					},
					emphasis: {
						focus: "series",
					},
					data: that.SMData,
				},
				{
					name: "IM",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: that.linearGradientColors[2],
					},
					emphasis: {
						focus: "series",
					},
					data: that.IMData,
				},
			];
			myChart5.setOption(option5);
		},
	},
	beforeUnmount() {
		let that = this;
		this.scene = null;
		clearInterval(that.timerTime);
		clearInterval(that.timerData);
		clearInterval(that.qualityTimer);
		that.timerTime = null;
		that.timerData = null;
		that.qualityTimer = null;
	},
	beforeDestoryed() {
		let that = this;
		this.scene = null;
		clearInterval(that.timerTime);
		clearInterval(that.timerData);
		clearInterval(that.qualityTimer);
		that.timerTime = null;
		that.timerData = null;
		that.qualityTimer = null;
	},
};
</script>
<style scoped>
@font-face {
	font-family: "myfont";
	/* 字体名称 */
	src: url("../../utils/youShe.ttf");
	/* 字体文件相对路径 */
}

.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;
}
.bodyListItem_num {
	width: 65px;
}
.itemBodyFlex {
	display: flex;
}
.itemBodyCircle {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 1vh;
}
.item_circle {
	width: 33%;
	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;
}
.successState {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #00ff00;
}
.warningState {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #0000ff;
}
/* // 表格——el-table 去除背景颜色*/
#elTable {
	/* border-radius: 5px; */
	margin-top: 10px;
}
.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,
.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) !important;
}
/deep/ .el-table .el-table__body-wrapper {
	background: rgba(46, 139, 155, 0.48) !important;
}
/deep/ .el-table th {
	background-color: transparent !important;
}
/deep/ .el-table tr {
	background-color: transparent !important;
}
/deep/ .el-table tr :hover {
	background-color: transparent !important;
}
/deep/
	.el-table--enable-row-hover
	.el-table__body
	tr:hover
	> td.el-table__cell {
	background-color: transparent !important;
}
/* //清除鼠标移入效果 */
/deep/.el-table__body tr.hover-row > td {
	background-color: transparent !important;
}
/* // 行底边线 */
/deep/ .el-table .el-table__body-wrapper /deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	background: transparent !important;
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
	border-bottom: 1px solid rgb(25, 111, 115, 0.82) !important;
}
/* 改变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) !important;
}
/* 改变radio选中时的样式 */
</style>
