From 46742f99b4828624a922b982402734cf59445046 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 3 Apr 2024 10:48:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=94=B9=E5=8F=98=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E6=96=B9=E5=90=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/cesiumtest.vue | 1814 ++++++++++++++++------------
 1 file changed, 1033 insertions(+), 781 deletions(-)

diff --git a/src/views/bigScreen/cesiumtest.vue b/src/views/bigScreen/cesiumtest.vue
index 3ce8a62e..9eabf504 100644
--- a/src/views/bigScreen/cesiumtest.vue
+++ b/src/views/bigScreen/cesiumtest.vue
@@ -1,31 +1,81 @@
-
 <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)">
+	<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">
+				</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="除尘器"/>
@@ -33,659 +83,850 @@
                 <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">
+				</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">
+				</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.cate_code!='monitor'"><span class="titleIcon"></span>实时状态</p>
-          <div class="bodyContainer">
-            <div class="rdio-group" v-if="objItem.type==10||objItem.type==30">
-              <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?'orangeIcon':'']">
-                <el-icon class="radio-ico"><el-icon-removeFilled /></el-icon> 
-                <span>待机</span>
-              </div>
-              <div :class="['radio-item' ,objItem.state==30?'redIcon':'']">
-                <el-icon class="radio-ico"><el-icon-warningFilled /></el-icon>
-                 <span>离线</span>
-                </div>
-            </div>
-            <div v-else-if="objItem.type==40&&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">13.00mg/m³</div>
-                <div class="infoTableBodytd">13.00mg/m³</div>
-                <div class="infoTableBodytd">13.00mg/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"> 22320.000m³/h</div>
-                <div class="infoTableBodytd">70.54℃</div>
-                <div class="infoTableBodytd">0.80%</div>
-              </div>
-            </div>
-            <div v-else-if="objItem.type==40&&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">0.18mg/m³</div>
-                <div class="infoTableBodytd">18.6℃</div>
-                <div class="infoTableBodytd">53.4%</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>
+				</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.cate_code != 'monitor'">
+					<span class="titleIcon"></span>实时状态
+				</p>
+				<div class="bodyContainer">
+					<div
+						class="rdio-group"
+						v-if="objItem.type == 10 || objItem.type == 30"
+					>
+						<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 ? 'orangeIcon' : '',
+							]"
+						>
+							<el-icon class="radio-ico"
+								><el-icon-removeFilled
+							/></el-icon>
+							<span>待机</span>
+						</div>
+						<div
+							:class="[
+								'radio-item',
+								objItem.state == 30 ? 'redIcon' : '',
+							]"
+						>
+							<el-icon class="radio-ico"
+								><el-icon-warningFilled
+							/></el-icon>
+							<span>离线</span>
+						</div>
+					</div>
+					<div
+						v-else-if="
+							objItem.type == 40 && 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">13.00mg/m³</div>
+							<div class="infoTableBodytd">13.00mg/m³</div>
+							<div class="infoTableBodytd">13.00mg/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">22320.000m³/h</div>
+							<div class="infoTableBodytd">70.54℃</div>
+							<div class="infoTableBodytd">0.80%</div>
+						</div>
+					</div>
+					<div
+						v-else-if="
+							objItem.type == 40 && 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">0.18mg/m³</div>
+							<div class="infoTableBodytd">18.6℃</div>
+							<div class="infoTableBodytd">53.4%</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 tool from "@/utils/tool";
+import * as Cesium from "cesium";
 import * as echarts from "echarts";
-import cems from './enpComponents/cems.vue';
+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] == 1 ? '运行' : params[0].data[1] == 0 ? '待机' : '故障';
-            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},
-          axisTick: {show: false},
-          splitLine: {show: false}
-        },
-        dataset: {source: []},
-        xAxis: { type: 'category', splitLine: {show:false} },
-        visualMap: {
-          top: 5,
-          right:10,
-          symbolSize: 1,
-          orient: "horizontal",
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 10
-          },
-          pieces: [
-            {
-              gt: 0.5,
-              lte: 1,
-              label: '运行',
-              color: '#21a51f'
-            },
-            {
-              gt: -0.5,
-              lte: 0.5,
-              label: '待机',
-              color: '#ff8608'
-            },
-             {
-              gt: -1,
-              lte: -0.5,
-              label: '离线',
-              color: '#c7c7c7'
-            },
-          ],
-        },
-        series: [{type: 'line',}]
-      }
-    }
-  },
-  created() {
+	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] == 1
+								? "运行"
+								: params[0].data[1] == 0
+								? "待机"
+								: "故障";
+						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 },
+					axisTick: { show: false },
+					splitLine: { show: false },
+				},
+				dataset: { source: [] },
+				xAxis: { type: "category", splitLine: { show: false } },
+				visualMap: {
+					top: 5,
+					right: 10,
+					symbolSize: 1,
+					orient: "horizontal",
+					textStyle: {
+						color: "#ffffff",
+						fontSize: 10,
+					},
+					pieces: [
+						{
+							gt: 0.5,
+							lte: 1,
+							label: "运行",
+							color: "#21a51f",
+						},
+						{
+							gt: -0.5,
+							lte: 0.5,
+							label: "待机",
+							color: "#ff8608",
+						},
+						{
+							gt: -1,
+							lte: -0.5,
+							label: "离线",
+							color: "#c7c7c7",
+						},
+					],
+				},
+				series: [{ type: "line" }],
+			},
+		};
+	},
+	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";
+		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";
+	},
+	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;
-    if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
-      viewer.resolutionScale = window.devicePixelRatio;
-    }
-    //是否开启抗锯齿
-    viewer.scene.fxaa = true;
-    viewer.scene.postProcessStages.fxaa.enabled = true;
+		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;
+		if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
+			//判断是否支持图像渲染像素化处理
+			viewer.resolutionScale = window.devicePixelRatio;
+		}
+		//是否开启抗锯齿
+		viewer.scene.fxaa = true;
+		viewer.scene.postProcessStages.fxaa.enabled = true;
 
-    // 修改homeButton的默认返回位置
-      // this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
-      //   e.cancel = true;
-      //   //你要飞的位置	
-      //   this.viewer.camera.flyTo({
-      //     destination: Cesium.Cartesian3.fromDegrees(119.196653, 26.031937, 50),
-      //   })
-      // })
-    // viewer.scene.globe.depthTestAgainstTerrain = false
-    
-    //设置限制缩放大小
-    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
-    // 隐藏地球
-    // viewer.scene.globe.show = false
-    //隐藏logo信息
-    viewer.scene.globe.enableLighting = true;
-    viewer._cesiumWidget._creditContainer.style.display = 'none';
-    //*****cesium加载3dtiles*****//
-    // const tileset = new Cesium.Cesium3DTileset({
-    //   url: "/3dtiles/tileset.json",
-    //   //  url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
-    // });
-    // tileset.readyPromise.then(function (tileset) {
-    //   viewer.scene.primitives.add(tileset);
-    //   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
-    //   const cartographic = Cesium.Cartographic.fromCartesian(
-    //     tileset.boundingSphere.center
-    //   );
-    //   console.log('cartographic',cartographic);
-    //   const { longitude, latitude, height } = cartographic;
-    //   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
-    //   const current = Cesium.Cartesian3.fromRadians(
-    //     longitude,
-    //     latitude,
-    //     height
-    //   )
-    //   //根据中心点坐标计算出的地表坐标点
-    //   const surface = Cesium.Cartesian3.fromRadians(
-    //     cartographic.longitude, //经度
-    //     cartographic.latitude, //纬度
-    //     0 //高度
-    //   )
-    //   //根据中心点坐标和height值计算出的新的坐标点
-    //   const offset = Cesium.Cartesian3.fromRadians(
-    //     longitude, latitude, 0
-    //   );
-    //   //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
-    //   const translation = Cesium.Cartesian3.subtract(
-    //     offset, //根据中心点坐标和height值计算出的新的坐标点
-    //     surface, //根据中心点坐标计算出的地表坐标点
-    //     new Cesium.Cartesian3()
-    //   );
-    //   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
-    //   //tileset加载完成监听
-    //   // tileset.tileLoad.addEventListener(function (tile) {
-    //   //     let content = tile.content;
-    //   //     // let featuresLength = content.featuresLength;
-    //   //     let feature = content.getFeature(0);
-    //   //   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
-    //   //   const cartographicMesh = Cesium.Cartographic.fromCartesian(
-    //   //     feature._content._model._boundingSphere.center
-    //   //   );
-    //   //   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
-    //   //   const currentMesh = Cesium.Cartesian3.fromRadians(
-    //   //     cartographicMesh.longitude, //经度
-    //   //     cartographicMesh.latitude, //纬度
-    //   //     cartographicMesh.height
-    //   //   )
-    //   //   //根据中心点坐标计算出的地表坐标点
-    //   //   const surfaceMesh = Cesium.Cartesian3.fromRadians(
-    //   //     cartographicMesh.longitude, //经度
-    //   //     cartographicMesh.latitude, //纬度
-    //   //     2 //高度
-    //   //   )
+		// 修改homeButton的默认返回位置
+		// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
+		//   e.cancel = true;
+		//   //你要飞的位置
+		//   this.viewer.camera.flyTo({
+		//     destination: Cesium.Cartesian3.fromDegrees(119.196653, 26.031937, 50),
+		//   })
+		// })
+		// viewer.scene.globe.depthTestAgainstTerrain = false
 
-    //   // })
-    //   //视野转到tileset模型
-    //   viewer.zoomTo(
-    //     tileset,
-    //     new Cesium.HeadingPitchRange(
-    //       -4.0,
-    //       -0.65,
-    //       500
-    //     )
-    //   );
-    //   that.getEquipmentList();
-    // });
-    // // 监听鼠标左键点击事件
-    // var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
-    // handler.setInputAction(function (click) {
-    //   var feature = viewer.scene.pick(click.position);
-    //   console.log("feature",feature);
-    //   console.log("_attrs", 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);
-    //             // 可以在这里执行更多操作，例如在点击位置添加标记等
-    //             //获取该点信息，查询相关数据
+		//设置限制缩放大小
+		// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
+		// 隐藏地球
+		// viewer.scene.globe.show = false
+		//隐藏logo信息
+		viewer.scene.globe.enableLighting = true;
+		viewer._cesiumWidget._creditContainer.style.display = "none";
+		//*****cesium加载3dtiles*****//
+		// const tileset = new Cesium.Cesium3DTileset({
+		//   url: "/3dtiles/tileset.json",
+		//   //  url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
+		// });
+		// tileset.readyPromise.then(function (tileset) {
+		//   viewer.scene.primitives.add(tileset);
+		//   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
+		//   const cartographic = Cesium.Cartographic.fromCartesian(
+		//     tileset.boundingSphere.center
+		//   );
+		//   console.log('cartographic',cartographic);
+		//   const { longitude, latitude, height } = cartographic;
+		//   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
+		//   const current = Cesium.Cartesian3.fromRadians(
+		//     longitude,
+		//     latitude,
+		//     height
+		//   )
+		//   //根据中心点坐标计算出的地表坐标点
+		//   const surface = Cesium.Cartesian3.fromRadians(
+		//     cartographic.longitude, //经度
+		//     cartographic.latitude, //纬度
+		//     0 //高度
+		//   )
+		//   //根据中心点坐标和height值计算出的新的坐标点
+		//   const offset = Cesium.Cartesian3.fromRadians(
+		//     longitude, latitude, 0
+		//   );
+		//   //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
+		//   const translation = Cesium.Cartesian3.subtract(
+		//     offset, //根据中心点坐标和height值计算出的新的坐标点
+		//     surface, //根据中心点坐标计算出的地表坐标点
+		//     new Cesium.Cartesian3()
+		//   );
+		//   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+		//   //tileset加载完成监听
+		//   // tileset.tileLoad.addEventListener(function (tile) {
+		//   //     let content = tile.content;
+		//   //     // let featuresLength = content.featuresLength;
+		//   //     let feature = content.getFeature(0);
+		//   //   //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
+		//   //   const cartographicMesh = Cesium.Cartographic.fromCartesian(
+		//   //     feature._content._model._boundingSphere.center
+		//   //   );
+		//   //   // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
+		//   //   const currentMesh = Cesium.Cartesian3.fromRadians(
+		//   //     cartographicMesh.longitude, //经度
+		//   //     cartographicMesh.latitude, //纬度
+		//   //     cartographicMesh.height
+		//   //   )
+		//   //   //根据中心点坐标计算出的地表坐标点
+		//   //   const surfaceMesh = Cesium.Cartesian3.fromRadians(
+		//   //     cartographicMesh.longitude, //经度
+		//   //     cartographicMesh.latitude, //纬度
+		//   //     2 //高度
+		//   //   )
 
-    //           }
-    //       }
-    // },
-    // Cesium.ScreenSpaceEventType.LEFT_CLICK);
-    // that.intervalequ = setInterval(() => {
-    //   that.getEquipmentList();
-    // },60000)
-    //*****cesium加载3dtiles*****//
+		//   // })
+		//   //视野转到tileset模型
+		//   viewer.zoomTo(
+		//     tileset,
+		//     new Cesium.HeadingPitchRange(
+		//       -4.0,
+		//       -0.65,
+		//       500
+		//     )
+		//   );
+		//   that.getEquipmentList();
+		// });
+		// // 监听鼠标左键点击事件
+		// var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+		// handler.setInputAction(function (click) {
+		//   var feature = viewer.scene.pick(click.position);
+		//   console.log("feature",feature);
+		//   console.log("_attrs", 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);
+		//             // 可以在这里执行更多操作，例如在点击位置添加标记等
+		//             //获取该点信息，查询相关数据
 
-    console.log('');
-    //*****cesium加载.glb格式的文件*****//
-    //1、viewer.scene.primitives.add
-    //  var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
-    //   var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
-    //   var url = "factory.glb";
-    //   // 加载 glb 模型
-    //   var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
-    //       url: url,
-    //       modelMatrix: modelMatrix,
-    //       scale: 1000// 可选：设置模型缩放比例
-    //   }));
-    //   // 监听模型加载完成事件
-    //   model.readyPromise.then(function(model) {
-    //     console.log('模型加载完成:', model);
-    //     // 计算模型包围盒的边界
-    //     var boundingSphere = model.boundingSphere;
-    //     // 将相机焦点移动到模型的包围球中心
-    //   viewer.camera.flyToBoundingSphere(boundingSphere, {
-    //       duration: 0 // 设置飞行动画持续时间（单位：秒）
-    //   });
-    //   // 设置相机跟随模型
-    //   viewer.trackedEntity = model;
-    //   }).otherwise(function(error) {
-    //       console.error('模型加载失败:', error);
-    //   });
+		//           }
+		//       }
+		// },
+		// Cesium.ScreenSpaceEventType.LEFT_CLICK);
+		// that.intervalequ = setInterval(() => {
+		//   that.getEquipmentList();
+		// },60000)
+		//*****cesium加载3dtiles*****//
 
-    //2、viewer.entities.add
-    var url = "factory.glb";
-    var height = 0;
-    viewer.entities.removeAll() //加载之前先清楚所有entity
-    var position = Cesium.Cartesian3.fromDegrees(88.644, 42.7229, height)
-    var heading = Cesium.Math.toRadians(191) //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 = 30.0; // 假设模型原始单位是厘米，需要转换为米 
-    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的上限  
-        incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
-        shadows: Cesium.ShadowMode.ENABLED,
-        heightReference: Cesium.HeightReference.NONE
-      },
-    })
-    viewer.trackedEntity = modelEntity; // 聚焦模型
-    //设置相机位置
-    viewer.zoomTo(modelEntity, new Cesium.HeadingPitchRange(-3.1, -0.6, 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: {
-    getChartTime() {
-      let endDate = new Date();
-      let startDate = new Date();
-      startDate.setTime(endDate.getTime() - 1000 * 3600 * 6);
-      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('eq_status', params).then(res => { 
-        console.log(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) {  
-            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) + 15;
-            let type = item.cate_code;
-            let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: type };
-            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 = 'display' ,height} = 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,
-            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) {
-      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)
-      })
-      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 = null;
-  },
+		console.log("");
+		//*****cesium加载.glb格式的文件*****//
+		//1、viewer.scene.primitives.add
+		//  var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
+		//   var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
+		//   var url = "factory.glb";
+		//   // 加载 glb 模型
+		//   var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
+		//       url: url,
+		//       modelMatrix: modelMatrix,
+		//       scale: 1000// 可选：设置模型缩放比例
+		//   }));
+		//   // 监听模型加载完成事件
+		//   model.readyPromise.then(function(model) {
+		//     console.log('模型加载完成:', model);
+		//     // 计算模型包围盒的边界
+		//     var boundingSphere = model.boundingSphere;
+		//     // 将相机焦点移动到模型的包围球中心
+		//   viewer.camera.flyToBoundingSphere(boundingSphere, {
+		//       duration: 0 // 设置飞行动画持续时间（单位：秒）
+		//   });
+		//   // 设置相机跟随模型
+		//   viewer.trackedEntity = model;
+		//   }).otherwise(function(error) {
+		//       console.error('模型加载失败:', error);
+		//   });
 
-}
+		//2、viewer.entities.add
+		var url = "factory.glb";
+		var height = 0;
+		viewer.entities.removeAll(); //加载之前先清楚所有entity
+		var position = Cesium.Cartesian3.fromDegrees(88.644, 42.723, height);
+		var heading = Cesium.Math.toRadians(191); //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 = 30.0; // 假设模型原始单位是厘米，需要转换为米
+		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的上限
+				incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
+				shadows: Cesium.ShadowMode.ENABLED,
+				heightReference: Cesium.HeightReference.NONE,
+			},
+		});
+		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: {
+		getChartTime() {
+			let endDate = new Date();
+			let startDate = new Date();
+			startDate.setTime(endDate.getTime() - 1000 * 3600 * 6);
+			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("eq_status", params).then((res) => {
+				console.log(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
+					) {
+						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) + 15;
+						let type = item.cate_code;
+						let arrs = {
+							name: item.name,
+							lon: lon,
+							lat: lat,
+							height: height,
+							id: item.id,
+							type: type,
+						};
+						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 = "display",
+				height,
+			} = 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,
+				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) {
+			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);
+			});
+			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 = null;
+	},
+};
 </script>
 <style>
 /* #cesiumContainer,
@@ -696,165 +937,176 @@ export default {
   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,.5);
+.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,.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_close {
+	position: absolute;
+	left: 10px;
+	top: 10px;
 }
-.infoDom_toDetail{
-  position: absolute;
-  right: 10px;
-  top:10px;
+.infoDom_toDetail {
+	position: absolute;
+	right: 10px;
+	top: 10px;
 }
-.bodyTitle{
-  height: 24px;
-  line-height: 24px;
-  padding: 0 10px;
-  font-size: 18px;
+.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;
+.titleIcon {
+	display: inline-block;
+	margin-right: 10px;
+	width: 6px;
+	height: 20px;
+	background: #00f6ff;
+	vertical-align: middle;
 }
-.infoBody{
-  padding: 10px;
+.infoBody {
+	padding: 10px;
 }
-.rdio-group{
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  line-height: 30px;
+.rdio-group {
+	height: 30px;
+	display: flex;
+	justify-content: center;
+	line-height: 30px;
 }
-.radio-item{
-  width: 60px;
+.radio-item {
+	width: 60px;
 }
-.greenIcon,.greenIcon>.radio-ico{
-  color: #1ca50a;
+.greenIcon,
+.greenIcon > .radio-ico {
+	color: #1ca50a;
 }
-.orangeIcon,.orangeIcon>.radio-ico{
-  color: orange;
+.orangeIcon,
+.orangeIcon > .radio-ico {
+	color: orange;
 }
-.redIcon,.redIcon>.radio-ico{
-  color: #f41a1a;
+.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;
+	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;
+	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');
+	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,.7), rgba(16, 123, 144,.7));
-  width: 200px;
-  position: absolute;
-  display: none;
+.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;
+.bottomMenu3 {
+	height: 160px;
+	top: -160px;
 }
-.bottomMenu2{
-  height: 310px;
-  top: -310px;
+.bottomMenu2 {
+	height: 310px;
+	top: -310px;
 }
-.bottomMenu4{
-  height: 60px;
-  top: -60px;
+.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,.5), rgb(16, 123, 144,.5));
+.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__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: #1ca50a;
-    border-color: #1ca50a;
+.bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner {
+	width: 20px;
+	height: 20px;
+	background-color: #1ca50a;
+	border-color: #1ca50a;
 }
-.bottomMenu_item>.el-checkbox__input.is-checked+.el-checkbox__label{
-  color: #1ca50a;
+.bottomMenu_item > .el-checkbox__input.is-checked + .el-checkbox__label {
+	color: #1ca50a;
 }
-.bottomMenu_item>.el-checkbox__input.is-checked .el-checkbox__inner::after{
-    height: 11px;
-    left: 5px;
-    top: 1px;
-    width: 6px;
+.bottomMenu_item > .el-checkbox__input.is-checked .el-checkbox__inner::after {
+	height: 11px;
+	left: 5px;
+	top: 1px;
+	width: 6px;
 }
 /* 底部多选框--end */
-.bodyContainer{
-  margin: 10px;
+.bodyContainer {
+	margin: 10px;
 }
-.infoTableTr{
-  display: flex;
-  justify-content: space-between;
+.infoTableTr {
+	display: flex;
+	justify-content: space-between;
 }
-.infoTableTr>div{
-  flex: 0 0 33%;
-  height: 30px;
-  text-align: center;
-  line-height: 30px;
+.infoTableTr > div {
+	flex: 0 0 33%;
+	height: 30px;
+	text-align: center;
+	line-height: 30px;
 }
-.infoTableHeadTh{
-  background: rgb(80, 127, 80);
+.infoTableHeadTh {
+	background: rgb(80, 127, 80);
 }
-.infoTableBodytd{
-  background: rgba(38 ,52 ,38 ,.8);
+.infoTableBodytd {
+	background: rgba(38, 52, 38, 0.8);
 }
-.infoCharts{
-  width: 100%;
-  height: 150px;
+.infoCharts {
+	width: 100%;
+	height: 150px;
 }
-</style>
\ No newline at end of file
+</style>