<template>
	<div style="width: 100%; height: 100%">
		<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
		<div v-show="activeIndex == 0" class="btns_enp">
			<div style="position: relative">
				<div class="btns" @click="showChange(1)">生产设备</div>
				<div
					class="bottomMenu bottomMenu1"
					@mouseleave="handleMouseLeave(1)"
				>
					<el-checkbox
						class="bottomMenu_item"
						v-model="eq_big"
						label="大型生产设备"
						@change="checkboxChange('eq_big')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="eq_main"
						label="主要生产设备"
						@change="checkboxChange('eq_main')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="eq_trans"
						label="输送设备"
						@change="checkboxChange('eq_trans')"
					/>
					<!-- <el-checkbox-group v-model="equCheck" @change="checkChange(equCheck)">
                <el-checkbox class="bottomMenu_item" value="eq_big" label="大型生产设备"/>
                <el-checkbox class="bottomMenu_item" value="eq_main" label="主要生产设备"/>
                <el-checkbox class="bottomMenu_item" value="eq_trans" label="输送设备"/>
              </el-checkbox-group> -->
				</div>
			</div>
			<div style="position: relative">
				<div class="btns" @click="showChange(2)">治理设备</div>
				<div
					class="bottomMenu bottomMenu2"
					@mouseleave="handleMouseLeave(2)"
				>
					<el-checkbox
						class="bottomMenu_item"
						v-model="fog_cannon"
						label="雾炮"
						@change="checkboxChange('fog_cannon')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="dry_fog"
						label="干雾"
						@change="checkboxChange('dry_fog')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="dust_clean"
						label="除尘器"
						@change="checkboxChange('dust_clean')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="truck_clean"
						label="环卫车"
						@change="checkboxChange('truck_clean')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="wstation"
						label="洗车台"
						@change="checkboxChange('wstation')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="tltx"
						label="脱硫脱硝"
						@change="checkboxChange('tltx')"
					/>
					<!-- <el-checkbox-group v-model="equCheck2">
                <el-checkbox class="bottomMenu_item" value="wp" label="雾炮"/>
                <el-checkbox class="bottomMenu_item" value="gw" label="干雾"/>
                <el-checkbox class="bottomMenu_item" value="dust_clean" label="除尘器"/>
                <el-checkbox class="bottomMenu_item" value="hec" label="环卫车"/>
                <el-checkbox class="bottomMenu_item" value="xct" label="洗车台"/>
                <el-checkbox class="bottomMenu_item" value="tltx" label="脱硫脱硝"/>
              </el-checkbox-group> -->
				</div>
			</div>
			<div style="position: relative">
				<div class="btns" @click="showChange(3)">监测设备</div>
				<div
					class="bottomMenu bottomMenu3"
					@mouseleave="handleMouseLeave(3)"
				>
					<el-checkbox
						class="bottomMenu_item"
						v-model="tsp"
						label="TSP"
						@change="checkboxChange('tsp')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="cems"
						label="CEMS"
						@change="checkboxChange('cems')"
					/>
					<el-checkbox
						class="bottomMenu_item"
						v-model="aqms"
						label="空气微站"
						@change="checkboxChange('aqms')"
					/>
					<!-- <el-checkbox-group v-model="equCheck3">
                <el-checkbox class="bottomMenu_item" value="cems" label="CEMS"/>
                <el-checkbox class="bottomMenu_item" value="tsp" label="TSP"/>
              </el-checkbox-group> -->
				</div>
			</div>
			<div style="position: relative">
				<div class="btns" @click="showChange(4)">监控设备</div>
				<div
					class="bottomMenu bottomMenu4"
					@mouseleave="handleMouseLeave(4)"
				>
					<el-checkbox
						class="bottomMenu_item"
						v-model="monitor"
						label="监控设备"
						@cahnge="checkboxChange('monitor')"
					/>
					<!-- <el-checkbox-group v-model="equCheck4">
                <el-checkbox class="bottomMenu_item" value="jksb" label="监控设备" />
              </el-checkbox-group> -->
				</div>
			</div>
		</div>
		<div v-show="infoShow" class="infoDom">
			<h4 class="infoDom_header">
				<el-icon class="infoDom_close" @click="closeInfo()"
					><el-icon-close
				/></el-icon>
				{{ objItem.name }}
				<el-button
					size="small"
					class="infoDom_toDetail"
					@click="infoToDetail()"
					>详情</el-button
				>
			</h4>
			<div class="infoBody">
				<p
					class="bodyTitle"
					v-if="
						objItem.cate_code == 'tsp' ||
						objItem.cate_code == 'cems' ||
						objItem.cate_code == 'aqms'
					"
				>
					<span class="titleIcon"></span>实时监测
				</p>
				<p class="bodyTitle" v-else-if="objItem.type != 'monitor'">
					<span class="titleIcon"></span>实时状态
				</p>
				<div class="bodyContainer">
					<div v-if="objItem.cate_code == 'cems'">
						<div class="infoTableTr">
							<div class="infoTableHeadTh">颗粒物</div>
							<div class="infoTableHeadTh">SO₂</div>
							<div class="infoTableHeadTh">NOx</div>
						</div>
						<div class="infoTableTr">
							<div class="infoTableBodytd">
								{{ objItem.颗粒物折算值 }}mg/m³
							</div>
							<div class="infoTableBodytd">
								{{ objItem.so2折算值 }}mg/m³
							</div>
							<div class="infoTableBodytd">
								{{ objItem.nox折算值 }}mg/m³
							</div>
						</div>
						<div class="infoTableTr">
							<div class="infoTableHeadTh">流量</div>
							<div class="infoTableHeadTh">温度</div>
							<div class="infoTableHeadTh">湿度</div>
						</div>
						<div class="infoTableTr">
							<div class="infoTableBodytd">
								{{ objItem.流量 }}m³/h
							</div>
							<div class="infoTableBodytd">
								{{ objItem.温度 }}℃
							</div>
							<div class="infoTableBodytd">
								{{ objItem.湿度 }}%
							</div>
						</div>
					</div>
					<div v-else-if="objItem.cate_code == 'tsp'">
						<div class="infoTableTr">
							<div class="infoTableHeadTh">TSP</div>
							<div class="infoTableHeadTh">温度</div>
							<div class="infoTableHeadTh">湿度</div>
						</div>
						<div class="infoTableTr">
							<div class="infoTableBodytd">
								{{ objItem.tsp }}mg/m³
							</div>
							<div class="infoTableBodytd">
								{{ objItem.温度 }}℃
							</div>
							<div class="infoTableBodytd">
								{{ objItem.湿度 }}%
							</div>
						</div>
					</div>
					<div v-else>
						<div class="rdio-group">
							<div
								:class="[
									'radio-item',
									objItem.state == 10 ? 'greenIcon' : '',
								]"
							>
								<el-icon class="radio-ico"
									><el-icon-successFilled
								/></el-icon>
								<span>运行</span>
							</div>
							<div
								:class="[
									'radio-item',
									objItem.state == 20
										? 'redIcon'
										: objItem.state == 30
										? 'redIcon'
										: objItem.state == 40
										? 'redIcon'
										: '',
								]"
							>
								<el-icon class="radio-ico"
									><el-icon-warningFilled
								/></el-icon>
								<span>停机</span>
							</div>
							<div
								:class="[
									'radio-item',
									objItem.state == 50 ? 'redIcon' : '',
								]"
							>
								<el-icon class="radio-ico"
									><el-icon-warningFilled
								/></el-icon>
								<span>离线</span>
							</div>
						</div>
					</div>
				</div>
				<p class="bodyTitle"><span class="titleIcon"></span>历史监测</p>
				<div
					class="infoCharts"
					id="infoCharts"
					style="width: 360px; height: 150px"
				></div>
			</div>
		</div>
	</div>
</template>
<script>
import tool from "@/utils/tool";
import * as Cesium from "cesium";
import * as echarts from "echarts";
import cems from "./enpComponents/cems.vue";
export default {
	name: "cesium",
	props: ["activeIndex"],
	data() {
		return {
			objItem: {},
			activeBtns: 10,
			infoShow: false,
			eq_big: true, //大型生产设备
			eq_main: true, //主要生产设备
			eq_trans: true, //输送设备
			fog_cannon: true, //雾炮
			dry_fog: true, //干雾
			dust_clean: true, //除尘器
			truck_clean: true, //环卫车
			wstation: true, //洗车台
			tltx: true, //脱硫脱硝
			aqms: true, //空气监测微站
			tsp: true, //TSP
			cems: true, //CEMS
			monitor: true, //监控设备
			intervalequ: null, //标签状态更新定时器
			basicOption: {
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						var result = "";
						let text =
							params[0].data[1] == 10
								? "运行"
								: params[0].data[1] == 50
								? "离线"
								: "停机";
						let colors =
							text == "运行"
								? "#21a51f"
								: text == "停机"
								? "#ff8608"
								: "#c7c7c7";
						var lineHtml =
							'<div style="height:1px;background:#333333;width:100%"></div>';
						var dotHtml =
							'<span style="display:inline-block;margin-right:5px;border-radius:4px;width:8px;height:8px;background-color:' +
							colors +
							'"></span>';
						let state =
							'<span style="color:' +
							colors +
							'">' +
							text +
							"</span>";
						result +=
							params[0].name +
							lineHtml +
							"</br>" +
							dotHtml +
							params[0].seriesName +
							"：" +
							state +
							"</br>";
						return result;
					},
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				yAxis: {
					type: "value",
					axisLine: { show: true },
					axisLabel: {
						show: false,
					},
					axisTick: { show: false },
					splitLine: { show: false },
				},
				dataset: { source: [] },
				xAxis: {
					type: "category",
					splitLine: { show: false },
					axisLabel: {
						color: "#fff",
					},
				},
				visualMap: {
					top: 5,
					right: 10,
					symbolSize: 1,
					orient: "horizontal",
					textStyle: {
						color: "#ffffff",
						fontSize: 10,
					},
					pieces: [
						{
							gt: 1,
							lte: 11,
							label: "运行",
							color: "#21a51f",
						},
						{
							gt: 15,
							lte: 45,
							label: "停机",
							color: "#ff8608",
						},
						{
							gt: 46,
							lte: 55,
							label: "离线",
							color: "#c7c7c7",
						},
					],
				},
				series: [
					{
						type: "line",
						encode: { y: "运行状态", seriesName: ["运行状态"] },
						lineStyle: {
							color: function (params) {
								// 自定义每个数据点的颜色
								console.log(params.value);
								if (params.value > 0 && params.value < 15) {
									return "#21a51f";
								} else if (value > 15 && value < 45) {
									return "#ff8608";
								} else {
									return "c7c7c7";
								}
							},
						},
						itemStyle: {
							normal: {
								color: function (params) {
									var value = params.value;
									if (value > 0 && value < 15) {
										return "#21a51f";
									} else if (value > 15 && value < 45) {
										return "#ff8608";
									} else {
										return "c7c7c7";
									}
								},
							},
						},
					},
				],
			},
			modelPosition: [
				{
					lng: 119.42828291697619,
					lat: 40.97419456450223,
					height: 37.725744652917264,
				},
				{
					lng: 119.4295249200144,
					lat: 40.97458969709657,
					height: 44.263260612448,
				},
				{
					lng: 119.42920127023919,
					lat: 40.97442752133717,
					height: 69.07964676765597,
				},
			],
		};
	},
	created() {
		const scriptInfo = document.createElement("script");
		scriptInfo.setAttribute("data-callType", "callScript");
		scriptInfo.src =
			"https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
		document.head.appendChild(scriptInfo);
	},
	mounted() {
		let that = this;
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";

		const viewer = new Cesium.Viewer("cesiumContainer", {
			animation: false, //动画小部件
			baseLayerPicker: false, //地图图层组件
			fullscreenButton: false, //全屏组件
			geocoder: false, //地理编码搜索组件
			homeButton: false, //首页组件
			infoBox: false, //信息框
			sceneModePicker: false, //场景模式
			selectionIndicator: false, //选取指示器组件
			timeline: false, //时间轴
			navigationHelpButton: false, //帮助按钮
			navigationInstructionsInitiallyVisible: false,
		});
		this.viewer = viewer;
		// 关闭时间对模型明暗的影响
		// 		viewer.scene.light = new Cesium.DirectionalLight({
		//   direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358)
		// })
		viewer.scene.light = new Cesium.SunLight();
		viewer.scene.globe.enableLighting = true;
		viewer.shadows = false;
		//时间轴暂停，并将时间设置在某个固定时刻
		viewer.clock.shouldAnimate = false; //时间轴动画停止
		viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
			"2023-09-01T06:00:00Z"
		); //这个UTC时间对应的北京时间是14时

		if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
			//判断是否支持图像渲染像素化处理
			viewer.resolutionScale = window.devicePixelRatio;
		}
		//是否开启抗锯齿
		viewer.scene.fxaa = true;
		viewer.scene.postProcessStages.fxaa.enabled = true;

		//隐藏logo信息
		viewer.scene.globe.enableLighting = true;
		viewer._cesiumWidget._creditContainer.style.display = "none";
		//*****cesium加载.glb格式的文件*****//
		var url = "ly.glb";
		var height = 0;
		viewer.entities.removeAll(); //加载之前先清楚所有entity
		var position = Cesium.Cartesian3.fromDegrees(119.4295, 40.974, height);
		var heading = Cesium.Math.toRadians(132); //310度转弧度
		var pitch = Cesium.Math.toRadians(0);
		var roll = Cesium.Math.toRadians(0);
		var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
		var orientation = Cesium.Transforms.headingPitchRollQuaternion(
			position,
			hpr
		);
		var modelScale = 44; // 假设模型原始单位是厘米，需要转换为米
		var modelEntity = viewer.entities.add({
			name: "photon",
			position: position,
			orientation: orientation,
			model: {
				uri: url, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
				scale: modelScale, //缩放比例
				modelMatrix:
					Cesium.Transforms.eastNorthUpToFixedFrame(position),
				minimumPixelSize: 256, //最小像素大小，可以避免太小看不见
				maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
			},
		});
		var destination_tree = Cesium.Cartesian3.fromDegrees(
			119.43,
			40.965,
			500
		);
		var heading_tree = Cesium.Math.toRadians(1); // 指定航向角度
		var pitch_tree = Cesium.Math.toRadians(-25); // 俯仰角度
		var roll_tree = Cesium.Math.toRadians(0); // 指定滚转角度

		var orientation_camer = new Cesium.HeadingPitchRoll(
			heading_tree,
			pitch_tree,
			roll_tree
		);
		viewer.camera.setView({
			destination: destination_tree,
			orientation: orientation_camer,
		});

		// that.setTrees(viewer, orientation);
		// viewer.trackedEntity = modelEntity; // 聚焦模型
		// //设置相机位置
		// viewer.zoomTo(
		// 	modelEntity,
		// 	new Cesium.HeadingPitchRange(0.3, -0.5, 900)
		// );
		that.getEquipmentList();
		// 监听鼠标左键点击事件
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
		handler.setInputAction(function (click) {
			var feature = viewer.scene.pick(click.position);
			if (feature.id._attrs) {
				that.objItem = feature.id._attrs;
				that.getInfo(feature.id._id);
			}
			if (Cesium.defined(feature)) {
				// 判断点击位置是否有模型被选中
				var pickedPosition = viewer.scene.pickPosition(click.position);
				if (Cesium.defined(pickedPosition)) {
					// 将点击位置的世界坐标转换为地理坐标（经纬度）
					var cartographic =
						Cesium.Cartographic.fromCartesian(pickedPosition);
					var longitude = Cesium.Math.toDegrees(
						cartographic.longitude
					); //经度
					var latitude = Cesium.Math.toDegrees(cartographic.latitude); //纬度
					var height = cartographic.height; // 获取高度值
					console.log("Longitude: " + longitude);
					console.log("Latitude: " + latitude);
					console.log("Height: " + height);
					// 可以在这里执行更多操作，例如在点击位置添加标记等
					//获取该点信息，查询相关数据
				}
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	},
	methods: {
		//单独加载树
		setTrees(viewer, orientation) {
			this.modelPosition.forEach((item) => {
				let position = Cesium.Cartesian3.fromDegrees(
					item.lng,
					item.lat,
					0
				);
				viewer.entities.add({
					name: "tree",
					position: position,
					orientation: orientation,
					model: {
						uri: "tree.glb", //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
						scale: 1, //缩放比例
						modelMatrix:
							Cesium.Transforms.eastNorthUpToFixedFrame(position),
						minimumPixelSize: 10, //最小像素大小，可以避免太小看不见
						maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
						incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
						shadows: Cesium.ShadowMode.ENABLED,
						heightReference: Cesium.HeightReference.NONE,
					},
				});
			});
		},
		getChartTime() {
			let endDate = new Date();
			endDate.setTime(endDate.getTime() - 1000 * 60);
			endDate.setSeconds(0);
			let startDate = new Date();
			startDate.setTime(endDate.getTime() - 1000 * 3600 * 6);
			startDate.setSeconds(0);
			console.log(tool.dateFormat1(startDate), tool.dateFormat1(endDate));
			let params = {
				query: {
					end_time: tool.dateFormat1(endDate),
					start_time: tool.dateFormat1(startDate),
					time_bucket: "1 minute",
					equipment_id: this.objItem.id,
				},
			};
			let myChart = echarts.init(document.getElementById("infoCharts"));
			myChart.showLoading();
			// 使用刚指定的配置项和数据显示图表。
			// myChart.setOption(option)
			this.$API.bi.dataset.exec.req("enp_edata2", params).then((res) => {
				console.log("newOption.dataset", res);
				let newOption = Object.assign({}, this.basicOption);
				newOption.dataset.source = res.data.ds0;
				myChart.setOption(newOption);
				myChart.hideLoading();
			});
			// this.initChart();
		},
		//获取类型对应的图标
		getItemIcon(cateCode) {
			switch (cateCode) {
				case "eq_big":
					return "img/enp_blue/eq_big.png";
				case "eq_main":
					return "img/enp_blue/eq_main.png";
				case "eq_trans":
					return "img/enp_blue/eq_trans.png";
				case "fog_cannon":
					return "img/enp_blue/fog_cannon.png";
				case "dry_fog":
					return "img/enp_blue/dry_fog.png";
				case "dust_clean":
					return "img/enp_blue/dust_clean.png";
				case "truck_clean":
					return "img/enp_blue/truck_clean.png";
				case "wstation":
					return "img/enp_blue/wstation.png";
				case "tltx":
					return "img/enp_blue/tltx.png";
				case "tsp":
					return "img/enp_blue/tsp.png";
				case "cems":
					return "img/enp_blue/cems.png";
				case "aqms":
					return "img/enp_blue/aqms.png";
				case "monitor":
					return "img/enp_blue/monitor.png";
			}
		},
		//画线
		createoutLine() {
			const orangeOutlined = this.viewer.entities.add({
				name: "Orange line with black outline at height and following the surface",
				polyline: {
					positions: Cesium.Cartesian3.fromDegreesArrayHeights([
						119.196653,
						26.031937, //线的初始经纬度
						10, //高度
						119.196653,
						26.031947, //结束位置
						250,
					]),
					width: 5,
					material: new Cesium.PolylineOutlineMaterialProperty({
						color: Cesium.Color.ORANGE,
						outlineWidth: 2,
						outlineColor: Cesium.Color.BLACK, //颜色
					}),
				},
			});
		},
		//计算赋值class
		bindBtnClass(index) {
			let classInfo = { btns: true, btnsActive: false };
			if (index == this.activeBtns) {
				classInfo.btnsActive = true;
			}
			return classInfo;
		},
		//获取设备列表
		getEquipmentList() {
			let that = this;
			// that.removePointer();
			that.$API.em.equipment.list.req({ page: 0 }).then((res) => {
				res.forEach((item) => {
					if (
						item.cate !== null &&
						item.coordinates &&
						item.coordinates.longitude &&
						item.coordinates.latitude
					) {
						console.log(item);
						let imgUrl = that.getItemIcon(item.cate_code);
						let lon = parseFloat(item.coordinates.longitude);
						let lat = parseFloat(item.coordinates.latitude);
						let height = parseInt(item.coordinates.height) + 5;
						let arrs = {
							name: item.name,
							lon: lon,
							lat: lat,
							height: height,
							id: item.id,
							type: item.cate_code,
							cate_code: item.cate_code,
							state: item.running_state,
						};
						let config = {
							show: true,
							fontSize: "16px",
							fillColor: "#ffffff",
							fillWidth: 1,
							pixelOffsetX: 10,
							pixelOffsetY: -30,
							image: imgUrl,
							imgWidth: 50,
							imgHeight: 50,
							textDistance: 550000,
							imgDistance: 550000,
						};
						that.addPointer(arrs, config);
					}
				});
			});
		},
		//调用此方法创建点用于标注在地图上
		creatgetInfoePoint(attrs, config) {
			const {
				name = "测试",
				lon,
				lat,
				id = "11111",
				type,
				height,
				cate_code,
				state,
			} = attrs;
			const {
				show = true,
				fontSize,
				fillColor,
				fillWidth,
				pixelOffsetX,
				pixelOffsetY,
				image,
				imgWidth,
				imgHeight,
				textDistance,
				imgDistance,
			} = config;
			return new Cesium.Entity({
				attrs: attrs,
				id: id,
				type: type,
				cate_code: cate_code,
				state: state,
				position: Cesium.Cartesian3.fromDegrees(
					lon || 117.08387268794274,
					lat || 31.6557737395655433,
					height
				), // 文字标签
				label: {
					show: show,
					text: name,
					font: fontSize || "14px",
					style: Cesium.LabelStyle.FILL,
					fillColor: Cesium.Color.LIME,
					fillColor: Cesium.Color.fromCssColorString(
						fillColor || "#fff"
					),
					outline: false, // 字体边框
					outlineColor: Cesium.Color.WHITE, // 字体边框颜色
					outlineWidth: fillWidth || 4, // 字体边框尺寸
					showBackground: true, // 是否显示背景颜色
					backgroundColor: Cesium.Color.fromCssColorString("#1ca50a"), // 背景颜色
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
					pixelOffset: new Cesium.Cartesian2(
						pixelOffsetX || 50,
						pixelOffsetY || -25
					), // 偏移量
					distanceDisplayCondition:
						new Cesium.DistanceDisplayCondition(
							0,
							textDistance || 550000
						), //  文字标签多少距离内设置可见
				},
				billboard: {
					// 图标
					image: image || "img/enp_blue/warning_enp.png",
					width: imgWidth || 30,
					height: imgHeight || 30,
					distanceDisplayCondition:
						new Cesium.DistanceDisplayCondition(
							0,
							imgDistance || 550000
						), //  图片多少距离内设置可见
				},
			});
		},
		//用于把创建好的点加载到地图上
		addPointer(attrs, config) {
			let that = this;
			let obj = that.creatgetInfoePoint(attrs, config);
			that.viewer.entities.add(obj);
		},
		//调用此方法获取相关信息显示在页面
		getInfo(equpmentId) {
			console.log("this.objItem------clickItem", this.objItem);
			let that = this;
			that.infoShow = true;
			console.log(equpmentId);
			// //根据id获取相关信息
			// this.$API.em.equipment.item.req(equpmentId).then((res) => {
			// 	that.objItem = res;
			// 	console.log(res);
			// });
			if (that.objItem.type == "tsp" || that.objItem.type == "cems") {
				let nowDate = new Date();
				let startDate = new Date();
				let year = nowDate.getFullYear();
				let month = nowDate.getMonth() + 1;
				let day = nowDate.getDate();
				let hour = nowDate.getHours();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				hour = hour < 10 ? "0" + hour : hour;
				let start_time =
					year + "-" + month + "-" + day + " " + hour + ":00:00";
				let end_time =
					year + "-" + month + "-" + day + " " + hour + ":59:00";
				let params = {
					query: {
						end_time: end_time,
						start_time: start_time,
						time_bucket: "1 hour",
						equipment_id: this.objItem.id,
					},
				};
				this.$API.bi.dataset.exec
					.req("enp_edata2", params)
					.then((res) => {
						console.log(res);
						if (res.data2.ds0 && res.data2.ds0.length > 0) {
							if (that.objItem.type == "tsp") {
								that.objItem.tsp = res.data2.ds0[0].tsp;
								that.objItem.温度 = res.data2.ds0[0].温度;
								that.objItem.湿度 = res.data2.ds0[0].湿度;
							} else if (that.objItem.type == "cems") {
								that.objItem.流量 = res.data2.ds0[0].流量;
								that.objItem.湿度 = res.data2.ds0[0].湿度;
								that.objItem.温度 = res.data2.ds0[0].温度;
								that.objItem.so2折算值 =
									res.data2.ds0[0].so2折算值;
								that.objItem.nox折算值 =
									res.data2.ds0[0].nox折算值;
								that.objItem.颗粒物折算值 =
									res.data2.ds0[0].颗粒物折算值;
							}
						}
					});
			}
			this.getChartTime();
		},
		initChart() {
			var that = this;
			var myChart = echarts.getInstanceByDom(
				document.getElementById("infoCharts")
			);
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById("infoCharts"));
			}
			myChart.showLoading();
			this.$API.bi.dataset.exec
				.req("enp_edata2", {
					query: this.query,
					raise_exception: true,
				})
				.then((res) => {
					let newOption = Object.assign({}, this.basicOption);
					let ds0 = res.data.ds0;
					ds0.pop();
					newOption.dataset.source = res.data.ds0;
					newOption.title.text = this.currentEquipmentName;
					myChart.setOption(newOption);
				})
				.then(() => {
					myChart.hideLoading();
				});
		},
		//添加点之前可以调用一下移除所有的点防止重复添加
		removePointer() {
			let allEntitiesPoint = [];
			this.viewer.entities.values.forEach((item) => {
				allEntitiesPoint.push(item.id);
			});
			allEntitiesPoint.forEach((item) => {
				const entity_obj = this.viewer.entities.getById(item);
				this.viewer.entities.remove(entity_obj);
			});
		},
		closeInfo() {
			this.infoShow = false;
		},
		//跳转到cems、tsp、空气微站
		infoToDetail() {
			let that = this;
			this.$APi.enp.drain_equip.list
				.req({ equipment: that.objItem.id, page: 0 })
				.then((res) => {
					let drainId = res[0].drain;
				});
		},
		// checkChange(val) {
		//   console.log('checkChange',val)
		//   console.log('checkChange',this.equCheck)
		// },
		checkboxChange(val) {
			console.log("checkboxChange", val);
			let valu = this[val];
			console.log("valu", valu);
			let allEntitiesPoint = [];
			this.viewer.entities.values.forEach((item) => {
				allEntitiesPoint.push(item);
				if (item._type == val) {
					item._show = valu;
					item.show = valu;
				}
			});
			console.log("allEntitiesPoint", allEntitiesPoint);
		},

		//点击大类按钮
		showChange(val) {
			let classname = "bottomMenu" + val;
			if (
				document.getElementsByClassName(classname)[0].style.display ==
				"block"
			) {
				document.getElementsByClassName(classname)[0].style.display =
					"none";
			} else {
				document.getElementsByClassName(classname)[0].style.display =
					"block";
			}
		},
		//鼠标移出小类
		handleMouseLeave(val) {
			let classname = "bottomMenu" + val;
			document.getElementsByClassName(classname)[0].style.display =
				"none";
		},
	},
	beforeUnmount() {
		// viewer.destroy();
		this.viewer.entities.removeAll();
		this.viewer = null;
	},
};
</script>
<style>
/* #cesiumContainer,
#cesiumContainer>.cesium-viewer,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget>canvas{
  width: 100%;
  height: 100%;
} */
.infoDom {
	position: fixed;
	right: 22%;
	bottom: 10%;
	width: 380px;
	min-height: 20vh;
	min-width: 360px;
	background: rgba(0, 50, 56, 0.8);
	border: 1px solid rgba(63, 174, 229, 0.5);
}
.infoDom_header {
	font-size: 18px;
	padding: 10px;
	text-align: center;
	position: relative;
	border-bottom: 1px solid rgba(63, 174, 229, 0.5);
}
.infoDom_close {
	position: absolute;
	left: 10px;
	top: 10px;
}
.infoDom_toDetail {
	position: absolute;
	right: 10px;
	top: 10px;
}
.bodyTitle {
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	font-size: 18px;
}
.titleIcon {
	display: inline-block;
	margin-right: 10px;
	width: 6px;
	height: 20px;
	background: #00f6ff;
	vertical-align: middle;
}
.infoBody {
	padding: 10px;
}
.rdio-group {
	height: 30px;
	display: flex;
	justify-content: center;
	line-height: 30px;
}
.radio-item {
	width: 60px;
}
.greenIcon,
.greenIcon > .radio-ico {
	color: #21a51f;
}
.orangeIcon,
.orangeIcon > .radio-ico {
	color: orange;
}
.redIcon,
.redIcon > .radio-ico {
	color: #f41a1a;
}
.btns_enp {
	bottom: 7vh;
	left: 28.7vw;
	width: 42.6vw;
	height: 4.3vh;
	position: fixed;
	display: flex;
	justify-content: space-between;
}

.btns {
	width: 8vw;
	height: 5vh;
	font-size: 2vh;
	line-height: 4.9vh;
	background-image: url("/public/img/enp_blue/btn.png");
	background-size: 100% 100%;
	text-align: center;
	color: #ffffff;
}

.btns.btnsActive {
	background-image: url("/public/img/enp_blue/btn_active.png");
}
/* 底部多选框--start 调节checkbox大小和颜色*/
.bottomMenu {
	padding: 10px 10px 0 10px;
	background: linear-gradient(
		to right,
		rgba(5, 56, 72, 0.7),
		rgba(16, 123, 144, 0.7)
	);
	width: 200px;
	position: absolute;
	display: none;
}
.bottomMenu1,
.bottomMenu3 {
	height: 160px;
	top: -160px;
}
.bottomMenu2 {
	height: 310px;
	top: -310px;
}
.bottomMenu4 {
	height: 60px;
	top: -60px;
}
.bottomMenu_item {
	color: #ffffff;
	width: 100%;
	height: 40px;
	padding-left: 10px;
	line-height: 40px;
	margin-bottom: 10px;
	background: linear-gradient(
		to right,
		rgba(27, 143, 164, 0.5),
		rgb(16, 123, 144, 0.5)
	);
}
.bottomMenu_item .el-checkbox__inner {
	width: 20px;
	height: 20px;
	border-color: #ffffff;
	border-radius: 0;
}
.bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner {
	width: 20px;
	height: 20px;
	background-color: #faed1f;
	border-color: #faed1f;
}
.bottomMenu_item > .el-checkbox__input.is-checked + .el-checkbox__label {
	color: #faed1f;
}
.bottomMenu_item > .el-checkbox__input.is-checked .el-checkbox__inner::after {
	height: 11px;
	left: 5px;
	top: 1px;
	width: 6px;
}
/* 底部多选框--end */
.bodyContainer {
	margin: 10px;
}
.infoTableTr {
	display: flex;
	justify-content: space-between;
}
.infoTableTr > div {
	flex: 0 0 33%;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
.infoTableHeadTh {
	background: rgb(80, 127, 80);
}
.infoTableBodytd {
	background: rgba(38, 52, 38, 0.8);
}
.infoCharts {
	width: 100%;
	height: 150px;
}
</style>
