<template>
	<div class="dashboard" style="height: 100%">
		<el-container style="height: 100%">
			<el-header style="height: 8vh">
				<div class="headerImg">
					<img
						src="img/enp_blue/header_enp.png"
						style="width: 100%; height: 100%"
					/>
					<div class="sysName">
						{{ this.$TOOL.data.get("BASE_INFO").base.base_name }}
					</div>
				</div>
				<div style="position: absolute; top: 0.7vh; height: 6vh">
					<div
						style="
							display: flex;
							padding-top: 1vh;
							margin-left: 1vw;
						"
					>
						<div :class="bindClass(0)" @click="menuClick(0)">
							<div class="menuItem">首页</div>
						</div>
						<div :class="bindClass(1)">
							<div class="menuItem">
								<el-dropdown
									class="dropdown"
									trigger="click"
									@command="handleClick"
								>
									<span class="el-dropdown-link">
										有组织排放管理
									</span>
									<template #dropdown>
										<el-dropdown-menu class="enpMenu">
											<el-dropdown-item command="paikou"
												>排放口清单</el-dropdown-item
											>
											<el-dropdown-item command="cems"
												>CEMS监测清单</el-dropdown-item
											>
											<el-dropdown-item command="cems2"
												>CEMS监测预警</el-dropdown-item
											>
											<el-dropdown-item
												command="cemsExport"
												>CEMS报表导出</el-dropdown-item
											>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
						<div :class="bindClass(2)">
							<div class="menuItem">
								<el-dropdown
									class="dropdown"
									trigger="click"
									@command="handleClick2"
								>
									<span class="el-dropdown-link">
										无组织排放管理
									</span>
									<template #dropdown>
										<el-dropdown-menu class="enpMenu">
											<el-dropdown-item
												command="pollutant"
												>污染源清单</el-dropdown-item
											>
											<el-dropdown-item
												command="pollutant2"
												>污染源监测</el-dropdown-item
											>
											<el-dropdown-item command="carwash"
												>洗车平台</el-dropdown-item
											>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
					</div>
				</div>
				<div
					style="
						position: absolute;
						top: 0.7vh;
						right: 8px;
						height: 6vh;
					"
				>
					<div
						style="
							display: flex;
							padding-top: 1vh;
							padding-right: 1vw;
							justify-content: flex-end;
						"
					>
						<div :class="bindClass(3)">
							<div class="menuItem">
								<el-dropdown
									class="dropdown"
									trigger="click"
									@command="handleClick3"
								>
									<span class="el-dropdown-link">
										清洁运输
									</span>
									<template #dropdown>
										<el-dropdown-menu class="enpMenu">
											<el-dropdown-item
												command="transport"
												>厂外运输</el-dropdown-item
											>
											<!--
											<el-dropdown-item
												command="innerClean"
												>厂内清洁</el-dropdown-item
											>
										-->
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
						<div :class="bindClass(4)" @click="menuClick(4)">
							<div class="menuItem">
								<el-dropdown
									class="dropdown"
									trigger="click"
									@command="handleClick4"
								>
									<span class="el-dropdown-link">
										环境质量
									</span>
									<template #dropdown>
										<el-dropdown-menu class="enpMenu">
											<el-dropdown-item
												command="envirmonitor"
												>环境监测清单</el-dropdown-item
											>
											<el-dropdown-item
												command="envirqualmonitor"
												>环境质量监测</el-dropdown-item
											>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
						<div :class="bindClass(5)" @click="menuClick(5)">
							<!-- <div class="menuItem">台账管理</div> -->
							<div class="menuItem">
								<el-dropdown
									class="dropdown"
									trigger="click"
									@command="handleClick5"
								>
									<span class="el-dropdown-link">
										环境管理
									</span>
									<template #dropdown>
										<el-dropdown-menu class="enpMenu">
											<el-dropdown-item command="eqments">
												设备清单
											</el-dropdown-item>
											<el-dropdown-item command="carlist">
												车辆清单
											</el-dropdown-item>
											<el-dropdown-item
												command="alarmrecord"
												>报警记录
											</el-dropdown-item>
											<el-dropdown-item command=""
												>综合查询
											</el-dropdown-item>
											<el-dropdown-item command="video"
												>视屏墙
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
						<div class="wraning_icon">
						</div>
						<div class="user_icon" @click="backSystem"></div>
						<div class="dark_config">
							<el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info"
								@click="configDark" size="small"></el-button>

						</div>
						<div class="quit" @click="backlogin">
							退出
						</div>
					</div>
				</div>
			</el-header>
			<el-main style="padding: 0">
				<div v-show="activeIndex == 0" class="model" style="">
					<Cesium ref="cesiumDiv" :activeIndex="activeIndex" />
				</div>
				<!-- 左侧列表数据 -->
				<div
					v-show="activeIndex == 0"
					class="left_other animate__animated animate__backInLeft"
				>
					<!-- 有组织排放实时监测清单CEMS -->
					<div class="panel panel1">
						<div class="blockTitle">
							<div class="blockTitleText">
								主要排放口实时监测清单
							</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<div>
							<scScrollTavle
								v-if="table1Visible"
								:tableHeight="containerHeight"
								:rowData="lineData"
								:titleData="liData1"
								:refValue="refValue1"
								class="bigScreenTable"
								:noIndex="noIndex"
							></scScrollTavle>
						</div>
					</div>
					<!-- 接入设备数量总览 -->
					<div class="panel panel2">
						<div class="blockTitle">
							<div class="blockTitleText">接入设备数量总览</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<div style="display: flex; padding: 1vh 1vw">
							<div style="width: 50%; height: 100%">
								<div class="eqItem">
									<img
										class="eqImg"
										src="img/enp_blue/eq_s.svg"
									/>
									<div class="eqText">
										<div class="eqName">生产设备</div>
										<div class="eqNumWrap">
											<span class="eqNum">{{
												eqNumData.sc
											}}</span
											>台
										</div>
									</div>
								</div>
								<div class="eqItem">
									<img
										class="eqImg"
										src="img/enp_blue/eq_v.svg"
									/>
									<div class="eqText">
										<div class="eqName">监测设备</div>
										<div class="eqNumWrap">
											<span class="eqNum">{{
												eqNumData.jc
											}}</span
											>台
										</div>
									</div>
								</div>
							</div>
							<div style="width: 50%; height: 100%">
								<div class="eqItem">
									<img
										class="eqImg"
										src="img/enp_blue/eq_z.svg"
									/>
									<div class="eqText">
										<div class="eqName">治理设备</div>
										<div class="eqNumWrap">
											<span class="eqNum">{{
												eqNumData.zl
											}}</span
											>台
										</div>
									</div>
								</div>
								<div class="eqItem">
									<img
										class="eqImg"
										src="img/enp_blue/eq_c.svg"
									/>
									<div class="eqText">
										<div class="eqName">监控设备</div>
										<div class="eqNumWrap">
											<span class="eqNum">{{
												eqNumData.jk
											}}</span
											>台
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 无组织排放实时监测清单 TSP-->
					<div class="panel panel1">
						<div class="blockTitle">
							<div class="blockTitleText">无组织实时监测清单</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<div>
							<scScrollTavle
								v-if="table2Visible"
								:tableHeight="containerHeight"
								:rowData="lineData2"
								:titleData="liData2"
								:refValue="refValue2"
								class="bigScreenTable"
								:noIndex="noIndex"
							></scScrollTavle>
						</div>
					</div>
				</div>
				<!-- 右侧数据 -->
				<div
					v-show="activeIndex == 0"
					class="right_other animate__animated animate__backInRight"
				>
					<!-- 空气微站实时监测清单 -->
					<div class="panel panel1">
						<div class="blockTitle">
							<div class="blockTitleText">
								空气微站实时监测清单
							</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<scScrollTavle
							v-if="table3Visible"
							:tableHeight="containerHeight"
							:rowData="lineData3"
							:titleData="liData3"
							:refValue="refValue3"
							class="bigScreenTable"
							:noIndex="noIndex"
						></scScrollTavle>
					</div>
					<!-- 今日车辆统计数据 -->
					<div class="panel panel2">
						<div class="blockTitle">
							<div class="blockTitleText">今日车辆统计数据</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<div style="display: flex">
							<div class="chart" id="pieChart"></div>
							<div class="carStaticWrap">

								<div style="display:flex">
									<div
										class="todyCarItem"
										v-for="item in pieData"
										:key="item"
									>
										<span class="carStaticText" style="color: #d5d5d5">{{item.name}}</span>
										<span class="carStaticNum">{{ item.value }}</span
										>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 环卫车作业情况 -->
					<div class="panel panel1">
						<div class="blockTitle">
							<div class="blockTitleText">环卫车作业情况</div>
							<img
								class="blockTitleImg"
								src="img/enp_blue/block_title.png"
							/>
						</div>
						<scScrollTavle
							v-if="table4Visible"
							:tableHeight="containerHeight"
							:rowData="lineData4"
							:titleData="liData4"
							:refValue="refValue4"
							class="bigScreenTable"
							:noIndex="noIndex"
						></scScrollTavle>
					</div>
				</div>
				<!-- 左右两条边框线 -->
				<!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
				<!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
				<!-- 设备分类 -->
				<!-- <div v-show="activeIndex == 0" class="btns_enp">
				<div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
				<div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
				<div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
				<div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
				</div> -->
				<!-- 底部背景图片 -->
				<div v-show="activeIndex == 0" class="bottom_enp"></div>
				<div v-if="activeIndex != 0" class="container">
					<el-drawer
						v-model="elDrawer"
						:modal="false"
						:close-on-click-modal="false"
						size="95%"
						:with-header="false"
						direction="ltr"
						:show-close="false"
						id="enpElDrawer"
					>
						<!-- <div class="sysName">智能环保一体化管控平台</div> -->
						<org-dialog
							v-if="activeDrawerName == 'paikou'"
							@close="closeDialog"
						></org-dialog>
						<cems-drawer
							v-else-if="activeDrawerName == 'cems'"
							@close="closeDialog"
						></cems-drawer>
						<cems2-drawer
							v-else-if="activeDrawerName == 'cems2'"
							@close="closeDialog"
						></cems2-drawer>
						<cems-export
							v-else-if="activeDrawerName == 'cemsExport'"
							@close="closeDialog"
						></cems-export>
						<pollutant
							v-else-if="activeDrawerName == 'pollutant'"
							@close="closeDialog"
						></pollutant>
						<!-- 运输清洁 -->
						<transport
							v-else-if="activeDrawerName == 'transport'"
							@close="closeDialog"
						></transport>
						<innerclean
							v-else-if="activeDrawerName == 'innerClean'"
							@close="closeDialog"
						></innerclean>
						<!-- 环保管理 -->
						<envirqualmonitor
							v-else-if="activeDrawerName == 'envirqualmonitor'"
							@close="closeDialog"
						>
						</envirqualmonitor>
						<envirmonitor
							v-else-if="activeDrawerName == 'envirmonitor'"
							@close="closeDialog"
						></envirmonitor>
						<pollutecalendar
							v-else-if="activeDrawerName == 'pollutecalendar'"
							@close="closeDialog"
						></pollutecalendar>
						<!-- 台账管理 -->
						<eqments
							v-else-if="activeDrawerName == 'eqments'"
							@close="closeDialog"
						></eqments>
						<carlist
							v-else-if="activeDrawerName == 'carlist'"
							@close="closeDialog"
						></carlist>
						<alarmrecord
							v-else-if="activeDrawerName == 'alarmrecord'"
							@close="closeDialog"
						></alarmrecord>
						<pollutant2
							v-else-if="activeDrawerName == 'pollutant2'"
							@close="closeDialog"
						></pollutant2>
						<carwash
							v-else-if="activeDrawerName == 'carwash'"
							@close="closeDialog"
						></carwash>
						<videowall
							v-else-if="activeDrawerName == 'video'"
							@close="closeDialog"
						></videowall>
					</el-drawer>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
<script>
import * as echarts from "echarts";
import Cesium from "./cesiumtest.vue";
import orgDialog from "./enpComponents/orgwryList";
import cemsDrawer from "./enpComponents/cems.vue";
import cems2Drawer from "./enpComponents/cems2.vue";
import cemsExport from "./enpComponents/cemsExport.vue";
import pollutant from "./enpComponents/pollutant.vue";
import innerclean from "./enpComponents/innerclean.vue";
import transport from "./enpComponents/transport.vue";
import envirqualmonitor from "./enpComponents/envirqualmonitor.vue";
import envirmonitor from "./enpComponents/envirmonitor.vue";
import pollutecalendar from "./enpComponents/pollutecalendar.vue";
import eqments from "./enpComponents/eqments.vue"; //台账
import carlist from "./enpComponents/carlist.vue"; //车辆清单
import alarmrecord from "./enpComponents/alarmrecord.vue";
import pollutant2 from "./enpComponents/pollutant2.vue";
import carwash from "./enpComponents/smartg_carwash.vue";
import carmanager from "./enpComponents/carManager.vue";
import videowall from "./enpComponents/video.vue";
import scScrollTavle from "@/components/scScrollTable.vue";
// import 'babylonjs-loaders';
import "animate.css";
export default {
	components: {
		Cesium,
		orgDialog,
		cemsDrawer,
		cems2Drawer,
		cemsExport,
		pollutant,
		innerclean,
		transport,
		envirqualmonitor,
		envirmonitor,
		pollutecalendar,
		eqments,
		carlist,
		alarmrecord,
		pollutant2,
		carwash,
		videowall,
		scScrollTavle,
	},
	data() {
		return {
			config: {
				dark: this.$TOOL.data.get("APP_DARK") || false,
			},
			elDrawer: true,
			isCollapse: false,
			nowDay: 1,
			initialAlpha: -Math.PI / 0.89,
			initialBeta: Math.PI / 3.3,
			initialRadius: 18,
			initialTarget: null,
			scene: null,
			myui: null,
			is_mainviewpoint: false,
			resizeTimeout: null,
			engine: null,
			loadedPercent: 0,
			showKgcet: true,
			currentLightMesh: null,
			// activeBtns: 10,
			activeDrawerName: "",
			activeIndex: 0,
			activeSection: 2,
			activeSectionName: "回转窑",
			updateTime: "2023-08-17 16:00:00",
			pieOption: {
				title: {
					text: "",
					subtext: "",
					left: "center",
				},
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b}: {c} ({d}%)",
				},
				legend: {
					// orient: 'vertical',
					center: true,
					bottom: 1,
					data: ["新能源", "其他"],
				},
				backgroundColor: "rgba(255,255,255,0)",
				color: [
					"rgb(3,195,198)",
					"rgb(155,248,249)",
					"rgb(110,181,249)",
					"rgb(205,248,248)",
				],
				grid: {
					left: "3%",
					top: "3%",
					containLabel: true,
				},
				series: {
					name: "今日车辆数量统计",
					type: "pie",
					radius: [25, 45],
					center: ["50%", "50%"],
					emphasis: {
						focus: "series",
						label: {
							show: true,
							fontSize: 10,
							fontWeight: "bold",
						},
					},
					label: {
						show: false,
						position: "center",
					},
					labelLine: {
						show: false,
					},
					data: [
						{ value: 2, name: "国五" },
						{ value: 6, name: "国六" },
						{ value: 6, name: "清洁运输" },
					],
				},
			},
			pieData: [
				{ value: 2, name: "国五" },
				{ value: 6, name: "国六" },
				{ value: 8, name: "清洁运输" },

			],
			containerHeight: null,
			refValue1: "moocBox1",
			table1Visible: false,
			lineData: [],
			liData1: ["设备名称", "颗粒物", "SO₂", "NOx" , "氨"],
			refValue2: "moocBox2",
			table2Visible: false,
			lineData2: [],
			liData2: ["设备名称", "TSP测量值"],
			refValue3: "moocBox3",
			table3Visible: false,
			lineData3: [],
			liData3: ["设备名称", "PM10", "PM2.5"],
			table4Visible: false,
			lineData4: [],
			refValue4: "moocBox1",
			liData4: ["车辆类型", "运行时间","运行里程"],
			noIndex: true,
			eqNumData: {
				sc: 0,
				jc: 0,
				zl: 0,
				jk: 0,
			},
			cemsDataList: [],
			cemsData: [],
			tspData: [],
			wData: [],
			intervalinfo: null, //窗口数据更新定时器
		};
	},
	watch: {
		'config.dark'(val) {
			if (val) {
				document.documentElement.classList.add("dark")
				this.$TOOL.data.set("APP_DARK", val)
			} else {
				document.documentElement.classList.remove("dark")
				this.$TOOL.data.remove("APP_DARK")
			}
		}
	},
	created() {
		document.documentElement.classList.add("dark");
		this.$TOOL.data.set("APP_DARK", true);
	},
	mounted() {
		let that = this;
		that.initDomStyle();
		that.$nextTick(() => {
			that.getleft1Data();
			that.getleft2Data();
			that.getleft3Data();
			that.getright1Data();
			that.getright2Data();
			that.getright3Data();
			that.initCharts();
			that.addListener();
			setTimeout(function () {}, 5000);
		});

		// that.intervalinfo = setInterval(() => {
		//   that.getleft1Data();
		//   // that.getleft2Data();
		//   that.getleft3Data();
		//   that.getright1Data();
		//   that.getright2Data();
		//   that.getright3Data();
		// },60000)
	},
	beforeUnmount() {
		// 性能优化
		const canvas = document.getElementById("renderCanvas");
		if (canvas) {
			canvas.parentNode.removeChild(canvas);
		}
	},
	methods: {
		//有组织排放口实时监测清单数据（ CEMS）
		getleft1Data() {
			let that = this;
			that.$API.em.equipment.list
				.req({ type: 40, cate__code: "cems", has_envdata: "yes" })
				.then((res) => {
					that.cemsDataList = res.results;
					that.cemsData = res.results[0];
					let lineData = [];
					res.results.forEach((item, index) => {
						let arr = [],
							obj1 = {},
							obj2 = {},
							obj3 = {},
							obj4 = {},
							obj5 = {};
						obj1.elType = "primary";
						obj1.value = item.name; //设备名称
						obj2.elType = "primary";
						obj2.value =
							item.envdata && item.envdata.dust_zs
								? item.envdata.dust_zs
								: "-"; //颗粒物折算值
						obj3.elType = "primary";
						obj3.value =
							item.envdata && item.envdata.so2_zs
								? item.envdata.so2_zs
								: "-"; //SO₂折算值
						obj4.elType = "primary";
						obj4.value =
							item.envdata && item.envdata.nox_zs
								? item.envdata.nox_zs
								: "-"; //NOx折算值
						obj5.elType = "primary";
						obj5.value =
							item.envdata && item.envdata.ammonia_e
								? item.envdata.ammonia_e
								: "-"; //氨气折算值
						arr.push(obj1);
						arr.push(obj2);
						arr.push(obj3);
						arr.push(obj4);
						arr.push(obj5);
						lineData.push(arr);
					});
					this.lineData = lineData;
				});
		},
		//接入设备数量
		getleft2Data() {
			//生产
			this.$API.em.equipment.list
				.req({ type: 10, query: {} })
				.then((res1) => {
					// console.log(res1)
					this.eqNumData.sc = res1.count;
				});
			//监测
			this.$API.em.equipment.list
				.req({ type: 40, query: {} })
				.then((res2) => {
					// console.log(res2)
					this.eqNumData.jc = res2.count;
				});
			//治理
			this.$API.em.equipment.list
				.req({ type: 30, query: {} })
				.then((res3) => {
					// console.log(res3)
					this.eqNumData.zl = res3.count;
				});
			//监控
			this.$API.em.equipment.list
				.req({ type: 50, query: {} })
				.then((res4) => {
					// console.log(res4)
					this.eqNumData.jk = res4.count;
				});
		},
		//无组织排放口实时监测数据（TSP）
		getleft3Data() {
			let that = this;
			that.$API.em.equipment.list
				.req({ type: 40, cate__code: "tsp", has_envdata: "yes" })
				.then((res) => {
					that.tspDataList = res.results;
					that.tspData = res.results[0];
					let lineData = [];
					res.results.forEach((item, index) => {
						let arr = [],
							obj1 = {},
							obj2 = {};
						obj1.elType = "primary";
						obj1.value = item.name; //设备名称
						obj2.elType = "primary";
						obj2.value =
							item.envdata && item.envdata.tsp
								? item.envdata.tsp
								: "-"; //颗粒物折算值
						arr.push(obj1);
						arr.push(obj2);
						lineData.push(arr);
					});
					this.lineData2 = lineData;
					//console.log(this.lineData2)
				});
		},
		//空气微站实时监测---（小微站）
		getright1Data() {
			let that = this;
			that.$API.em.equipment.list
				.req({ type: 40, cate__code: "aqms", has_envdata: "yes" })
				.then((res) => {
					that.wData = res.results;
					let lineData = [];
					res.results.forEach((item, index) => {
						let arr = [],
							obj1 = {},
							obj2 = {},
							obj3 = {};
						obj1.elType = "primary";
						obj1.value = item.name; //设备名称
						obj2.elType = "primary";
						obj2.value =
							item.envdata && item.envdata.pm10
								? item.envdata.pm10
								: "-"; //PM10
						obj3.elType = "primary";
						obj3.value =
							item.envdata && item.envdata.pm25
								? item.envdata.pm25
								: "-"; //PM2.5
						arr.push(obj1);
						arr.push(obj2);
						arr.push(obj3);
						lineData.push(arr);
					});
					this.lineData3 = lineData;

				});
		},
		//今日车辆统计数据
		getright2Data() {},
		//环卫车作业情况
		getright3Data() {


					let lineData = [];

						let arr = [],
							obj1 = {},
							obj2 = {},
							obj3 = {};
						obj1.elType = "primary";
						obj1.value = "洒水车"; //设备名称
						obj2.elType = "primary";
						obj2.value ="2024-08-22"; //PM10
						obj3.elType = "primary";
						obj3.value ="23"; //PM2.5
						arr.push(obj1);
						arr.push(obj2);
						arr.push(obj3);
						lineData.push(arr);

					this.lineData4 = lineData;



		},
		configDark() {
			this.config.dark = this.config.dark ? false : true;
		},
		backSystem() {
			this.$router.push({ path: "/dashboard_enp" });
		},
		//退出登录
		backlogin(){
			this.$router.push({ path: "/login" });

		},
		closeDialog() {
			this.elDrawer = false;
			this.activeIndex = 0;
		},
		drawerClick() {
			this.elDrawer = true;
		},
		initDomStyle() {
			let that = this;
			// 获取窗口的总高度
			var windowHeight = window.innerHeight;
			var windowWidth = window.innerWidth;
			// 获取目标元素
			var dashboard = document.getElementsByClassName("dashboard")[0];
			var left_other = document.getElementsByClassName("left_other")[0];
			var right_other = document.getElementsByClassName("right_other")[0];
			var model = document.getElementsByClassName("model")[0];
			if (windowWidth > 960) {
				dashboard.style.overflow = "hidden";
				// 设置目标元素的高度
				left_other.style.position = "absolute";
				left_other.style.width = "20%";
				right_other.style.position = "absolute";
				// right_other.style.width = '20%';
				// model.style.position = 'absolute';
				// model.style.height = (windowHeight - 4) + 'px';
				// model.style.top = 0;

				var chartHeight1 = (100 - 18) * 0.35 + "vh";
				var chartHeight2 = (100 - 18) * 0.29 + "vh";
				let piechart = document.getElementById("pieChart");
				piechart.style.height = (100 - 18) * 0.29 - 4 + "vh";
				// var chartHeight3 = (100 - 17) * 0.28 + 'vh';
				// var chartHeight4 = (100 - 17) * 0.715 + 'vh';
				var charts = document.getElementsByClassName("panel");
				for (var i = 0; i < charts.length; i++) {
					var chart = charts[i];
					switch (i) {
						case 0:
							chart.style.height = chartHeight1;
							break;
						case 1:
							chart.style.height = chartHeight2;
							break;
						case 2:
							chart.style.height = chartHeight1;
							break;
						case 3:
							chart.style.height = chartHeight1;
							break;
						case 4:
							chart.style.height = chartHeight2;
							break;
						case 5:
							chart.style.height = chartHeight1;
							break;
					}
					// chart.style.height = chartHeight;
				}
			} else {
				dashboard.style.overflow = "auto";
				var chartHeight = windowWidth * 0.6;
				left_other.style.position = "static";
				left_other.style.width = "100%";
				right_other.style.position = "static";
				right_other.style.width = "100%";
				// model.style.position = 'relative';
				// model.style.height = chartHeight;
				var charts = document.getElementsByClassName("chart");
				for (var i = 0; i < charts.length; i++) {
					var chart = charts[i];
					chart.style.height = chartHeight;
				}
			}
			let containerHeight =
				document.getElementsByClassName("panel1")[0].clientHeight - 70;
			that.containerHeight = containerHeight;
			if (this.engine != null) {
				this.engine.resize();
			}
			this.table1Visible = true;
			this.table2Visible = true;
			this.table3Visible = true;
			this.table4Visible = true;
		},
		// bindBtnClass(index) {
		//   let classInfo = { btns: true, btnsActive: false };
		//   if (index == this.activeBtns) {
		//     classInfo.btnsActive = true;
		//   }
		//   return classInfo;
		// },
		//切换设备类型
		// equipmentTypeChange(index) {
		//   let that = this;
		//   that.activeBtns = index;
		//   // this.$refs.typeChange.setData(index);
		//   // this.$refs.cesiumDiv.typeChange(index);
		// },
		// 动态绑定Class
		bindClass(index) {
			let that = this;
			let classInfo = {
				menuWrap: true,
				menuWrap1: false,
				menuWrap2: false,
				menuWrapActive: false,
			};
			if (index == that.activeIndex) {
				classInfo.menuWrapActive = true;
			}
			if (index == 1 || index == 2) {
				classInfo.menuWrap2 = true;
			} else {
				classInfo.menuWrap1 = true;
			}
			return classInfo;
		},
		menuClick(index) {
			if (index == 0) {
				this.activeIndex = index;
			}
		},
		handleClick(command) {
			this.activeIndex = 1;
			this.elDrawer = true;
			this.activeDrawerName = command;
		},
		handleClick2(command) {
			this.activeIndex = 2;
			this.elDrawer = true;
			this.activeDrawerName = command;
		},
		handleClick3(command) {
			this.activeIndex = 3;
			this.elDrawer = true;
			this.activeDrawerName = command;
		},
		handleClick4(command) {
			this.activeIndex = 4;
			this.elDrawer = true;
			this.activeDrawerName = command;
		},
		handleClick5(command) {
			this.activeIndex = 5;
			this.elDrawer = true;
			this.activeDrawerName = command;
		},
		compare(property) {
			return function (a, b) {
				return a[property] - b[property];
			};
		},
		initCharts() {
			let that = this;
			// 初始化所有表
			that.pieOption.series.data = that.pieData;
			that.setChart("pieChart", that.pieOption);
		},
		addListener() {
			var that = this;
			window.addEventListener("resize", function () {
				// 如果已经有 resizeTimeout，清除它
				if (this.resizeTimeout) {
					clearTimeout(this.resizeTimeout);
				}
				// 设置一个新的 resizeTimeout，延迟调整样式
				this.resizeTimeout = setTimeout(function () {
					that.initDomStyle();
				}, 300); // 延迟 300 毫秒，可以根据需要调整
			});
		},

		resizeChart(name) {
			// 根据name resize chart
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart != undefined) {
				// console.log(name + ' :resize')
				myChart.resize();
			}
		},
		setChart(name, option = null) {
			// 根据name 渲染数据, option需填写，否则option为模拟数据
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById(name), "dark", {
					renderer: "svg",
				});
			}
			if (option == null) {
				option = Object.assign({}, this.pieOption);
			}
			setTimeout(() => {
				try {
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
		},
	},
	unmounted() {
		this.intervalinfo = null;
		document.documentElement.classList.remove("dark");
		this.$TOOL.data.remove("APP_DARK");
	},
};
</script>
<style scoped>
.container {
	width: 100%;
	position: absolute;
	height: 100vh;
	top: 0vh;
	z-index: 0;
	padding-top: 8vh;
	box-sizing: border-box;
	background-image: url("/public/img/enp_blue/bg_enp.png");
	background-size: cover;
}

.dashboard {
	background-color: black;
	font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC",
		"Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue",
		Helvetica, Arial, sans-serif;
}

header {
	z-index: 10;
	display: flex;
	position: relative;
	align-items: center;
	box-sizing: border-box;
	padding: 0.7vh 0.4vw;
	justify-content: space-between;
	background-image: url("/public/img/enp_blue/bg_enp.png");
}

.headerImg {
	width: 100%;
	height: 6.6vh;
	line-height: 6.5vh;
	color: #ffffff;
	font-size: 1.8vw;
	text-align: center;
	position: relative;
}

.sysName {
	width: 100%;
	text-align: center;
	line-height: 6.3vh;
	font-weight: bold;
	color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
}

.sysName {
	color: #ffffff;
	padding-left: 1vw;
	font-size: 2.6vh;
}
.bottom_enp {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5vh;
	position: absolute;
	background-size: 100% 100%;
	background-position: center;
	background-image: url("/public/img/enp_blue/bottom_enp.png");
}

.menuWrap {
	height: 4.6vh;
	margin-right: 1vw;
}

.menuWrap1 {
	width: 4.4vw;
	background-image: url("/public/img/enp_blue/menu_bg1.png");
	background-size: 100% 100%;
}

.menuWrap2 {
	width: 7vw;
	background-image: url("/public/img/enp_blue/menu_bg2.png");
	background-size: 100% 100%;
}

.menuWrapActive.menuWrap1 {
	background-image: url("/public/img/enp_blue/menu_bg1_active.png");
}

.menuWrapActive.menuWrap2 {
	background-image: url("/public/img/enp_blue/menu_bg2_active.png");
}

.menuItem {
	color: #ffffff;
	line-height: 4.4vh;
	font-size: 1.5vh;
	text-align: center;
}

.dropdown {
	color: #ffffff;
	line-height: 4.5vh;
	font-size: 1.4vh;
}

.wraning_icon {
	width: 2vh;
	height: 2.3vh;
	margin-top: 0.9vh;
	background-size: cover;
	background-image: url("/public/img/enp_blue/warning_enp.png");
}

.user_icon {
	width: 2.3vh;
	height: 2.3vh;
	margin-top: 0.9vh;
	margin-left: 2vh;
	background-size: cover;
	background-image: url("/public/img/enp_blue/user_enp.png");
}
.quit{
	width: 3.5vh;
	height: 2.3vh;
	margin-top: 1.2vh;
	margin-left: 2vh;
	background-size: cover;
	cursor: pointer;
}
.dark_config {
	width: 2.3vh;
	height: 2.3vh;
	margin-top: 0.9vh;
	margin-left: 2vh;
	background-size: cover;
}

.model {
	top: 8%;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("/public/img/enp_blue/bg_enp.png");
	background-size: cover;
}

#renderCanvas {
	width: 100%;
	height: 100%;
}

#loadingScreen {
	position: absolute;
	width: 100%;
	top: 260px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.left_other,
.right_other {
	position: absolute;
	top: 8vh;
	width: 20%;
	padding: 10px;
}

.right_other {
	right: 0;
}

.panel {
	margin-top: 1.5vh;
	background-size: 100% 100%;
}

.panel1 {
	background-image: url("/public/img/enp_blue/left_bg2.png");
}

.panel2 {
	background-image: url("/public/img/enp_blue/left_bg1.png");
}

/* .panel4 {
  background-image: url('/public/img/enp_blue/right_bg1.png');
} */

/* .panel.panel_big {
  background-image: url('/public/img/enp_blue/right_bg2.png');
} */

.blockTitle {
	width: 100%;
	height: 4vh;
	position: relative;
}

.blockTitleText {
	width: 100%;
	height: 4vh;
	line-height: 4vh;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
	padding-left: 2.5vw;
	color: #ffffff;
	font-size: 1vw;
}

.blockTitleImg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.eqItem {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	overflow: hidden;
	color: #ffffff;
}

.eqImg {
	width: 4.8vh;
	height: 5.5vh;
	flex-shrink: 0;
	padding-top: 1.5vh;
}

.eqImg_s {
	padding-top: 0;
}

.eqText {
	flex: 1;
	height: 100%;
	font-size: 1.4vh;
	padding-left: 0.5vw;
	margin: 0.5vh 0;
	background: url("/public/img/enp_blue/eq_border2.svg") no-repeat;
	background-size: 100% 100%;
	background-size: contain;
}

.eqText_s {
	height: 5.5vh;
	margin-bottom: 1vh;
	background: url("/public/img/enp_blue/eq_border.svg") no-repeat;
	background-size: cover;
}

.eqName {
	line-height: 4.5vh;
}

.eqText_s > .eqName {
	padding-top: 0.5vh;
	line-height: 2.5vh;
}

.eqNumWrap {
	font-size: 1.2vh;
	line-height: 3.5vh;
}

.eqNum {
	font-size: 1.8vh;
}

.chart {
	width: 50%;
	height: 80%;
}

#pieChart {
	flex: 1;
}

.pieDataItem {
	width: 50%;
	height: 49%;
	position: relative;
	display: inline-block;
	margin-top: 10%;
	padding-left: 0.5vw;
	/* border-left: 1px solid #0070FF; */
}

.pieDataText {
	height: 2vh;
	line-height: 1.9vh;
	font-size: 1.5vh;
	color: #ffffff;
	padding-left: 0.2vw;
}

.status {
	height: 2.6vh;
	display: flex;
	padding: 0 1vh;
	line-height: 2.6vh;
	color: #ffffff;
	justify-content: space-between;
}
/* table相关样式 */
.tableHear {
	display: flex;
	color: #ffffff;
	margin-bottom: 0.5vh;
}
.tableBody {
	padding: 0 1vh;
}
.badyItem {
	height: 4.6vh;
	line-height: 4.6vh;
	margin-bottom: 1.4vh;
	border-radius: 3px;
	color: #ffffff;
	font-size: 1.4vh;
	display: flex;
	border: 1px solid #0091ff;
}
.rowItem {
	display: flex;
	color: #ffffff;
	padding: 0 1vh;
	justify-content: space-between;
}

.rowindex {
	flex: 1;
	height: 4vh;
	line-height: 4vh;
	text-align: center;
	margin-bottom: 1vh;
	background-image: url("/public/img/enp_blue/index_bg.png");
	background-size: cover;
}

.rowname {
	flex: 5;
	height: 4vh;
	margin: 0 1vh;
	padding: 0.5vh;
	line-height: 3vh;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1);
}

.rownum {
	flex: 2;
	height: 4vh;
	padding: 0.5vh;
	line-height: 3vh;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1);
}
/* table */

/* 左右两边border，暂时没展示 */
.left_border {
	width: 1vh;
	height: 70vh;
	position: absolute;
	left: 21%;
	top: 15vh;
	background-size: cover;
	background-image: url("/public/img/enp_blue/left_border.png");
}

.right_border {
	width: 1vh;
	height: 70vh;
	position: absolute;
	right: 21%;
	top: 15vh;
	background-size: cover;
	background-image: url("/public/img/enp_blue/right_border.png");
}
/* 左右两边border，暂时没展示 */
/* 车辆统计-start */
.carStaticWrap{
	flex-shrink: 1;
	width: 23vh;
	align-self: center;
	display: flex;
	flex-direction: column;
}
.todyCarItem {
	width:22vh;
	color: white;
	display: flex;
	flex-direction: column;
}
.carStaticText{
	display: inline-block;
	text-align: center;
}
.carStaticNum{
	font-size: 25px;
	color: #00f6ff;
	font-weight: bold;
	display: inline-block;
	text-align: center;
}
/* 车辆统计-end */
</style>
