Merge branch 'master' of https://e.coding.net/ctcdevteam/ehs/ehs_web

package.json

@@ -17,6 +17,7 @@
 		"babylonjs": "^6.16.0",
 		"babylonjs-gui": "^6.16.0",
 		"babylonjs-loaders": "^6.16.0",
+		"cesium": "1.75",
 		"codemirror": "5.65.5",
 		"core-js": "3.29.0",
 		"cropperjs": "1.5.13",

public/index.html

@@ -14,18 +14,11 @@
 		<%= VUE_APP_TITLE %>
 	</title>
 	<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" />
+	<!-- 本地引用 -->
 	<!-- <script src="/cesium/Cesium.js"></script> -->
-	<script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script>
+	<!-- <script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> -->
 	<!--引入cesium基础lib-->
-	<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
+	<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js" type="text/javascript"></script> -->
-	<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
-	<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script> -->
-	<!--引入mars3d库lib-->
-	<!-- <link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
-	<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script> -->
-	<!--引入mars3d库插件lib（按需引入）-->
-	<!-- <script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script> -->
-	
 	<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
 	<script type="text/javascript" src="./webVideoCtrl.js"></script>
 	<script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script>

src/App.vue

@@ -156,19 +156,19 @@ export default {
 
 .enpMenu.el-dropdown-menu {
 	padding: 0.7vh 0.7vh 0.2vh;
-	background: linear-gradient(to right, #10608e, #1dabfd);
+	//background: linear-gradient(to right, #10608e, #1dabfd);
-	// background: linear-gradient(to right, #053949, #107b90);
+	background: linear-gradient(to right, #053949, #107b90);
 }
 
 .enpMenu>.el-dropdown-menu__item {
 	margin-bottom: 0.5vh;
-	background: linear-gradient(to right, #29d, #1dabfd);
+	//background: linear-gradient(to right, #29d, #1dabfd);
-	// background: linear-gradient(to right, #1b8fa4, #107b90);
+	 background: linear-gradient(to right, #1b8fa4, #107b90);
 }
 
 .enpMenu>.el-dropdown-menu__item:not(.is-disabled):focus {
-	background: linear-gradient(to right, #10608e, #1dabfd);
+	//background: linear-gradient(to right, #10608e, #1dabfd);
-	// background: linear-gradient(to right, #053949, #107b90);
+	background: linear-gradient(to right, #053949, #107b90);
 	color: #ffffff;
 }
 

src/main.js

@@ -13,9 +13,8 @@ import preventReClick from './utils/preventReClick'
 import Print from './utils/print2'
 import Xlsx from './utils/xlsx'
 import DataVVue3 from '@kjgl77/datav-vue3'
-import * as Cesium from '../public/cesium/Cesium.js'
+import * as Cesium from 'cesium'
-import '../public/cesium/Widgets/widgets.css'
+// import 'cesium/Source/Widgets/widgets.css'
-// Vue.prototype.Cesium = Cesium
 
 
 const app = createApp(App);

src/views/bigScreen/cesiumtest.vue

@@ -1,14 +1,51 @@
 
 <template>
-  <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
+  <div style="width: 100%; height: 100%;">
+     <div id="cesiumContainer" style="width: 100%; height: 100%;"></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="infoShow" class="infoDom">
+        <h4 class="infoDom_header">
+          <el-icon class="infoDom_close" @click="closeInfo()"><el-icon-close /></el-icon>
+          {{objItem.name}}
+        </h4>
+        <div class="infoBody">
+          <p class="bodyTitle"><span class="titleIcon"></span>实时状态</p>
+          <div class="bodyContainer">
+            <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?'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>
+          <p class="bodyTitle"><span class="titleIcon"></span>历史监测数据</p>
+        </div>
+      </div>
+  </div>
 </template>
- 
 <script>
+import * as Cesium from 'cesium';
 export default {
   name: 'cesium',
+  props: ['activeIndex'],
   data() {
     return {
-      viewer: null
+      objItem: {},
+      activeBtns: 10,
+      infoShow:false,
     }
   },
   created() {
@@ -16,50 +53,47 @@ export default {
 		scriptInfo.setAttribute("data-callType", "callScript");
 		scriptInfo.src = "https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
 		document.head.appendChild(scriptInfo);
-	},
+  },
+  // watch: {
+  //   activeBtns:function(newVal, oldVal) {
+  //     console.log('activeBtns 发生变化:', newVal, oldVal);
+  //     this.getInfo(newVal);
+  //   }
+  // },
   mounted() {
+    let that = this;
     Cesium.Ion.defaultAccessToken =
       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
 
-    const viewer = new Cesium.Viewer("cesiumContainer", {
+    const viewer = new Cesium.Viewer("cesiumContainer",{
-      // shadows: false,//模型加阴影
+      animation:false,//动画小部件
-      animation: false, //动画小部件,左下角的倍速调控器，暂时用不到
+      baseLayerPicker:false,//地图图层组件
-      // shouldAnimate: false,
+      fullscreenButton:false,//全屏组件
-      homeButton: false, //是否显示Home按钮,一键回到地球，暂时用不到
+      geocoder:false,//地理编码搜索组件
-      fullscreenButton: false, //是否显示全屏按钮，右下角的全屏按钮，跟F11功能类似,可以不要
+      homeButton:false,//首页组件
-      // baseLayerPicker: true, //地图图层组件,可以选择不同的地理皮肤，右上角的皮肤按钮
+      infoBox:false,//信息框
-      // geocoder: true, //是否显示地名查找控件，右上角的搜索
+      sceneModePicker:false,//场景模式
-      timeline: false, //是否显示时间线控件
+      selectionIndicator:false,//选取指示器组件
-      // sceneModePicker: true, //场景模式
+      timeline:false,//时间轴
-      // selectionIndicator: false,//选取指示器组件
+      navigationHelpButton:false,//帮助按钮
-      // navigationHelpButton: false, //是否显示帮助信息控件
+      navigationInstructionsInitiallyVisible:false
-      // infoBox: true, //是否显示点击要素之后显示的信息
+});
-      // requestRenderMode: true, //启用请求渲染模式
-      // scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
-      // sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
-      // fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
-    });
     this.viewer = viewer;
-    // this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    // viewer.scene.globe.depthTestAgainstTerrain = false
-    // document.querySelector('.cesium-widget-credits').style.display = 'none'
+    
-    // // viewer.scene.globe.depthTestAgainstTerrain = false
     //设置限制缩放大小
-    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0
+    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
+    
     //隐藏logo信息
-    viewer.scene.globe.enableLighting = true;
+    // viewer.scene.globe.enableLighting = true;
-    viewer._cesiumWidget._creditContainer.style.display = 'none';
+    // viewer._cesiumWidget._creditContainer.style.display = 'none';
-    var camera = viewer.camera;
     //*****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);
-
-      console.log("tileset",tileset);
       //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
       const cartographic = Cesium.Cartographic.fromCartesian(
         tileset.boundingSphere.center
@@ -72,14 +106,12 @@ export default {
         latitude,
         height
       )
-      console.log('current', current);
       //根据中心点坐标计算出的地表坐标点
       const surface = Cesium.Cartesian3.fromRadians(
         cartographic.longitude, //经度
         cartographic.latitude, //纬度
         0 //高度
       )
-      debugger;
       //根据中心点坐标和height值计算出的新的坐标点
       const offset = Cesium.Cartesian3.fromRadians(
         longitude, latitude, 0
@@ -91,59 +123,30 @@ export default {
         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 //高度
+      //   )
              
-      tileset.tileLoad.addEventListener(function(tile) {
+      // })
-          let content = tile.content;
+      //视野转到tileset模型
-          let featuresLength = content.featuresLength;
-          // console.log("要素数量为：");
-          // console.log(featuresLength);
-          // console.log("第一个要素为：");
-          let feature = content.getFeature(0);
-          // console.log(feature);
-        // 根据需求添加标注到每个feature上
-        // console.log(feature._content._model._boundingSphere.center)
-        let featurePosition = feature._content._model._boundingSphere.center;
-        //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
-        const cartographicMesh = Cesium.Cartographic.fromCartesian(
-          feature._content._model._boundingSphere.center
-        );
-        // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
-        const currentMesh = Cesium.Cartesian3.fromRadians(
-          cartographicMesh.longitude, //经度
-          cartographicMesh.latitude, //纬度
-          cartographicMesh.height
-        )
-        // console.log('currentMesh', currentMesh);
-        //根据中心点坐标计算出的地表坐标点
-        const surfaceMesh = Cesium.Cartesian3.fromRadians(
-          cartographicMesh.longitude, //经度
-          cartographicMesh.latitude, //纬度
-          2 //高度
-        )
-        // console.log('surfaceMesh', surfaceMesh);
-
-        // let position = feature.getGeometry().getPosition()
-          // var labelEntity = viewer.entities.add({
-          //     position: Cesium.Cartesian3.fromDegrees(featurePosition.x, featurePosition.y, 2),
-          //     // point: {
-          //     //     pixelSize: 8,
-          //     //     color: Cesium.Color.YELLOW
-          //     // },
-          //     label: {
-          //         text: "这里是标注",
-          //         font: 'bold 14px sans-serif',
-          //         fillColor: Cesium.Color.BLACK,
-          //         outlineWidth: 2,
-          //         style: Cesium.LabelStyle.FILLED_AND_OUTLINED,
-          //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          //         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          //       pixelOffset: new Cesium.Cartesian2(-16, -16),
-          //       scale: 1.0,
-          //         show: true
-          //     }
-          // });
-            
-      })
       viewer.zoomTo(
         tileset,
         new Cesium.HeadingPitchRange(
@@ -152,48 +155,34 @@ export default {
           500
         )
       );
-      var boundingSphere = tileset.boundingSphere;
+      // that.equipmentTypeChange(10);
-
     });
-
+    // 监听鼠标左键点击事件
-
-
-
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
-    handler.setInputAction(function (movement) {
+    handler.setInputAction(function (click) {
-      var feature = viewer.scene.pick(movement.position);
+      var feature = viewer.scene.pick(click.position);
-      console.log(feature);
+      console.log("feature",feature);
-      let featurePosition = feature._content._model._boundingSphere.center;
+      console.log("_attrs", feature.id._attrs);
-      const cartographicFeature = Cesium.Cartographic.fromCartesian(
+      that.objItem = feature.id._attrs;
-        feature._content._model._boundingSphere.center
+      that.getInfo(feature.id._id);
-      );
+      if (Cesium.defined(feature)) {
-      console.log(cartographicFeature);
+              // 判断点击位置是否有模型被选中
-      var position = Cesium.Cartesian3.fromDegrees(cartographicFeature.longitude, cartographicFeature.latitude,1);
+              var pickedPosition = viewer.scene.pickPosition(click.position);
-      // 创建实体
+              if (Cesium.defined(pickedPosition)) {
-      var entity = viewer.entities.add({
+                  // 将点击位置的世界坐标转换为地理坐标（经纬度）
-          name: 'Text',
+                  var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
-          position: position,
+                  var longitude = Cesium.Math.toDegrees(cartographic.longitude);//经度
-          label: {
+                  var latitude = Cesium.Math.toDegrees(cartographic.latitude);//纬度
-              text: 'Hello, Cesium!',
+                  var height = cartographic.height; // 获取高度值
-              font: '24px sans-serif',
+                  // console.log('Longitude: ' + longitude);
-              color:Cesium.Color.fromCssColorString('#ff0000'),
+                  // console.log('Latitude: ' + latitude);
-              fillColor: Cesium.Color.WHITE,
+                  // console.log('Height: ' + height);
-              outlineColor: Cesium.Color.BLACK,
+                // 可以在这里执行更多操作，例如在点击位置添加标记等
-              outlineWidth: 2,
+                //获取该点信息，查询相关数据
-              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-              pixelOffset: new Cesium.Cartesian2(0, -50)
-          }
-      });
-      if (Cesium.defined(feature) && feature instanceof Cesium.Cesium3DTileFeature) {
-        var propertyNames = feature.getPropertyNames();
-        var length = propertyNames.length;
-        for (var i = 0; i < length; ++i) {
-          var propertyName = propertyNames[i];
-          console.log(propertyName + ": " + feature.getProperty(propertyName));
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
               
+              }
+          }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     //*****cesium加载3dtiles*****//
     //*****cesium加载.glb格式的文件*****//
     // 隐藏地球
@@ -446,75 +435,213 @@ export default {
   //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     //*****cesium加载.glb格式的文件*****//
   },
-  mothods: {
+  methods: {
-    mapViweinit() {
+    bindBtnClass(index) {
-        this.fly({ lon: 117.077665, lat: 30.838531, h: 50000, duration: 1 })
+      let classInfo = { btns: true, btnsActive: false };
+      if (index == this.activeBtns) {
+        classInfo.btnsActive = true;
+      }
+      return classInfo;
     },
-    //地图添加点之后可以通过id默认飞行到点的对应位置 使用viewer.camera.flyTo可能会有经纬度不准的情况
+    //获取类型对应的图标
-    flyTo(key) {
+    getItemIcon(cateCode) { 
-        let rider = viewer.entities.getById(key)
+      switch (cateCode) {
-        let offset = new Cesium.HeadingPitchRange(0.10074559078582723, -0.49977131690671905, 3000)
+        case "aqms":
-        viewer.flyTo(rider, {
+          return "img/enp_blue/jcwz.png";
-            offset,
+        case "tsp":
-            duration: 0.8
+          return "img/enp_blue/TSP.png";
+        case "cems":
+          return "img/enp_blue/xct.png";
+        case "wstation":
+          return "img/enp_blue/CEMS.png";
+        case "truck_clean":
+          return "img/enp_blue/hwc.png";
+        case "除尘器":
+          return "img/enp_blue/ccq.png";
+        case "干雾":
+          return "img/enp_blue/gwfkx.png";
+        case "雾炮":
+          return "img/enp_blue/gxswq.png";
+        case "监控设备":
+          return "img/enp_blue/jksb.png";
+        case "输送设备":
+          return "img/enp_blue/sssb.png";
+        case "eq":
+          return "img/enp_blue/zyscsb.png";
+        case "大型生产设备":
+          return "img/enp_blue/dxscsb.png";
+      }
+    },
+    //设备类型改变
+    equipmentTypeChange(index) { 
+      let that = this;
+      that.removePointer();
+      that.activeBtns = index;
+      that.$API.em.equipment.list.req({ type: index,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);
+            let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
+            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);
+          }
         })
+        
+      })
     },
     //调用此方法创建点用于标注在地图上
-    createPoint(attrs, config) {
+    creatgetInfoePoint(attrs, config) {
-        const { name = '', lon, lat, id, type = 'display' } = attrs
+        const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
-        const { height, show = true, fontSize, fillColor, pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
+        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 * 1, lat * 1, height || 100), // 文字标签
+            position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), // 文字标签
             label: {
                 show: show,
                 text: name,
-                font: (fontSize || '12px') + ' monospace',
+                font: (fontSize || '14px'),
-                // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                style: Cesium.LabelStyle.FILL ,
-                // fillColor: Cesium.Color.LIME,
+                fillColor: Cesium.Color.LIME,
                 fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
-                // outline: true,// 字体边框
+                outline: false,// 字体边框
                 outlineColor: Cesium.Color.WHITE, // 字体边框颜色
                 outlineWidth: fillWidth || 4,    // 字体边框尺寸
                 showBackground: true, // 是否显示背景颜色
-                backgroundColor: Cesium.Color.fromCssColorString('#018081'), // 背景颜色
+                backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), // 背景颜色
                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
-                pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -30), // 偏移量
+                pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -25), // 偏移量
                 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) //  文字标签多少距离内设置可见
             },
             billboard: {
                 // 图标
-                image: image || '/public/img/ele.png',
+                image: image || 'img/enp_blue/warning_enp.png',
-                width: imgWidth || 61,
+                width: imgWidth || 30,
-                height: imgHeight || 113,
+                height: imgHeight || 30,
                 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) //  图片多少距离内设置可见
             }
         })
     },
- 
     //用于把创建好的点加载到地图上
-    addPointer(obj) {
+    addPointer(attrs, config) {
-        viewer.entities.add(obj)
+      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)
+      })
     },
- 
     //添加点之前可以调用一下移除所有的点防止重复添加
     removePointer() {
         let allEntitiesPoint = []
- 
         // console.log(viewer.entities.values)
- 
+        this.viewer.entities.values.forEach((item) => {
-        viewer.entities.values.forEach((item) => {
             allEntitiesPoint.push(item.id)
         })
- 
         allEntitiesPoint.forEach((item) => {
-            const entity_obj = viewer.entities.getById(item)
+            const entity_obj = this.viewer.entities.getById(item)
-            viewer.entities.remove(entity_obj)
+            this.viewer.entities.remove(entity_obj)
         })
     },
+    closeInfo() { 
+      this.infoShow = false;
+    },
   }
 }
 </script>
-<style></style>
+<style>
+.infoDom{
+  position: fixed;
+  right: 22%;
+  bottom: 10%;
+  width: 20%;
+  min-height: 20vh;
+  min-width: 360px;
+  background: rgba(0, 50, 56, 0.8);
+  border: 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,.5);
+}
+.infoDom_close{
+  position: absolute;
+  left: 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: #1ca50a;
+}
+.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');
+}
+
+</style>

src/views/bigScreen/index_enp_blue.vue

@@ -103,7 +103,7 @@
       </el-header>
       <el-main style="padding:0;">
         <div v-show="activeIndex == 0" class="model" style="">
-          <Cesium />
+          <Cesium ref="cesiumDiv" :activeIndex="activeIndex"/>
         </div>
         <!-- 左侧列表数据 -->
         <div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
@@ -114,9 +114,7 @@
               <img class="blockTitleImg" src="img/enp_blue/block_title.png">
             </div>
             <div>
-              <!-- <div class="title_s">{{ cemsData.equipment_name }}</div> -->
+             <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
-              <!-- <div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div> -->
-              <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
                 :refValue="refValue1" class="bigScreenTable"></scScrollTavle>
               <!-- <div class="tableHear" style="padding: 0 1vh;">
                 <div style="flex:1;height:1vh"></div>
@@ -226,28 +224,6 @@
                     <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
                   </div>
                 </div>
-                <div v-for="item in wData" :key="item">
-                  <div class="badyItem">
-                    <div style="flex:2">
-                      <img src="img/enp_blue/listImg.png"
-                        style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
-                      <span>{{ item.name }}</span>
-                    </div>
-                    <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
-                    <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
-                  </div>
-                </div>
-                <div v-for="item in wData" :key="item">
-                  <div class="badyItem">
-                    <div style="flex:2">
-                      <img src="img/enp_blue/listImg.png"
-                        style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
-                      <span>{{ item.name }}</span>
-                    </div>
-                    <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
-                    <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
-                  </div>
-                </div>
               </div>
             </div> -->
           </div>
@@ -259,7 +235,11 @@
             </div>
             <div style="display:flex;">
               <div class="chart" id="pieChart"></div>
-              <div style="width:50%">
+              <div style="flex-shrink:1;width: 100px;align-self: center;display: flex;flex-direction: column;">
+                <div class="todyCarItem" v-for="item in pieData" :key="item">
+                  <span style="color: #d5d5d5;">{{ item.name }}</span>
+                  <span style="font-size: 30px;color: #00f6ff;font-weight: bold;display: inline-block;text-align: center;">{{ item.value }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -275,13 +255,12 @@
         <!-- <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 v-show="activeIndex == 0" class="btns_enp">
-          <div class="btns" :class="bindBtnClass(0)">生产设备</div>
+          <div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
-          <div class="btns" :class="bindBtnClass(1)">治理设备</div>
+          <div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
-          <div class="btns" :class="bindBtnClass(2)">监测设备</div>
+          <div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
-          <div class="btns" :class="bindBtnClass(3)">监控设备</div>
+          <div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
-          <!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> -->
+        </div> -->
-        </div>
         <!-- 底部背景图片 -->
         <div v-show="activeIndex == 0" class="bottom_enp"></div>
         <div v-if="activeIndex != 0" class="container">
@@ -374,7 +353,7 @@ export default {
       loadedPercent: 0,
       showKgcet: true,
       currentLightMesh: null,
-      activeBtns: 0,
+      // activeBtns: 10,
       activeDrawerName: '',
       activeIndex: 0,
       activeSection: 2,
@@ -392,7 +371,7 @@ export default {
         },
         legend: {
           // orient: 'vertical',
-          right: 10,
+          center:true,
           bottom: 1,
           data: ['新能源', '其他']
         },
@@ -438,25 +417,21 @@ export default {
       table1Visible: true,
       lineData: [],
       liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
-
       refValue2: 'moocBox2',
       table2Visible: true,
       lineData2: [],
       liData2: ['', '设备名称', 'TSP测量值'],
-
       refValue3: 'moocBox3',
       table3Visible: true,
       lineData3: [],
       liData3: ['', '设备名称', 'PM10', 'PM2.5'],
-
-
       eqNumData: {
         sc: 0,
         jc: 0,
         zl: 0,
         jk: 0
-
       },
+      cemsDataList:[],
       cemsData: [],
       tspData: [],
       wData: [],
@@ -493,7 +468,7 @@ export default {
     //有组织排放口实时监测清单数据（ CEMS）
     getleft1Data() {
       let that = this;
-      that.$API.em.equipment.list.req({ type: 20, cate__code: 'cems', has_envdata: 'yes' }).then(res => {
+      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 = [];
@@ -518,19 +493,23 @@ export default {
     },
     //接入设备数量
     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: 20, query: {} }).then((res2) => {
+      //监测
+      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: 40, query: {} }).then((res4) => {
+      //监控
+      this.$API.em.equipment.list.req({ type: 50, query: {} }).then((res4) => {
         // console.log(res4)
         this.eqNumData.jk = res4.count;
       })
@@ -538,7 +517,7 @@ export default {
     //无组织排放口实时监测数据（TSP）
     getleft3Data() {
       let that = this;
-      that.$API.em.equipment.list.req({ type: 20, cate__code: 'tsp', has_envdata: 'yes' }).then(res => {
+      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 = [];
@@ -558,9 +537,8 @@ export default {
     //空气微站实时监测---（小微站）
     getright1Data() {
       let that = this;
-      that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
+      that.$API.em.equipment.list.req({ type: 40, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
         that.wData = res.results;
-        // console.log('wData', this.wData)
         let lineData = [];
         res.results.forEach((item, index) => {
           let arr = [], obj1 = {}, obj2 = {}, obj3 = {};
@@ -673,13 +651,20 @@ export default {
         this.engine.resize();
       }
     },
-    bindBtnClass(index) {
+    // bindBtnClass(index) {
-      let classInfo = { btns: true, btnsActive: false };
+    //   let classInfo = { btns: true, btnsActive: false };
-      if (index == this.activeBtns) {
+    //   if (index == this.activeBtns) {
-        classInfo.btnsActive = true;
+    //     classInfo.btnsActive = true;
-      }
+    //   }
-      return classInfo;
+    //   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;
@@ -832,32 +817,6 @@ header {
   padding-left: 1vw;
   font-size: 2vh;
 }
-
-.btns_enp {
-  bottom: 7vh;
-  left: 28.7vw;
-  width: 42.6vw;
-  height: 4.3vh;
-  position: absolute;
-  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');
-}
-
 .bottom_enp {
   left: 0;
   bottom: 0;
@@ -1071,12 +1030,14 @@ header {
 }
 
 #pieChart {
-  /* background-image: url('/public/img/enp_blue/huan_bg.png');
+  flex: 1;
-  background-size: 75%;
+}
-  background-repeat: no-repeat;
+.todyCarItem{
-  background-position: center; */
+  color: white;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
 }
-
 .pieDataItem {
   width: 50%;
   height: 49%;
@@ -1095,73 +1056,6 @@ header {
   padding-left: 0.2vw;
 }
 
-.pieDataItem:nth-of-type(1) {
-  .pieDataText {
-    border-left: 0.5vh solid #0091ff;
-  }
-
-  .pieDataNumber {
-    border-left: 0.1vh solid #0091ff;
-  }
-}
-
-.pieDataItem:nth-of-type(2) {
-  .pieDataText {
-    border-left: 0.5vh solid #0Ed877;
-  }
-
-  .pieDataNumber {
-    border-left: 0.1vh solid #0Ed877;
-  }
-}
-
-.pieDataItem:nth-of-type(3) {
-  .pieDataText {
-    border-left: 0.5vh solid #ffbf60;
-  }
-
-  .pieDataNumber {
-    border-left: 0.1vh solid #ffbf60;
-  }
-}
-
-.pieDataItem:nth-of-type(4) {
-  .pieDataText {
-    border-left: 0.5vh solid #67dbff;
-  }
-
-  .pieDataNumber {
-    border-left: 0.1vh solid #67dbff;
-  }
-}
-
-.pieDataNumber {
-  height: 3vh;
-  line-height: 2.9vh;
-  font-size: 2vh;
-  color: #ffffff;
-  padding-left: 0.2vw;
-  border-left: 0.1vh solid #0070FF;
-}
-
-.beforeLine {
-  width: 2px;
-  height: 30%;
-  position: absolute;
-  background: #0070FF;
-}
-
-
-.title_s {
-  height: 3.7vh;
-  line-height: 3.7vh;
-  color: #ffffff;
-  margin-top: 1vh;
-  font-size: 1.4vh;
-  text-align: center;
-  background-image: url('/public/img/enp_blue/little_title.png');
-}
-
 .status {
   height: 2.6vh;
   display: flex;
@@ -1170,13 +1064,25 @@ header {
   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;
@@ -1212,92 +1118,9 @@ header {
   box-sizing: border-box;
   background: rgba(255, 255, 255, .1);
 }
+/* table */
 
-.right_one {
+/* 左右两边border，暂时没展示 */
-  height: 100%;
-  display: flex;
-  color: #ffffff;
-  position: relative;
-  justify-content: space-between;
-  background: url('/public/img/enp_blue/right_one.svg') no-repeat;
-  background-size: 100% 100%;
-}
-
-.leftNumbers {
-  padding: 2.5vh 1vh;
-}
-
-.rightNumbers {
-  padding: 2.5vh 1vh;
-  text-align: right;
-}
-
-.numberItem {
-  height: 33.3%;
-  line-height: 1.6vh;
-}
-
-.numberItemName {
-  font-size: 1.4vh;
-  line-height: 4vh;
-}
-
-.numberItemNum {
-  font-size: 1.6vh;
-}
-
-.numberItemUnit {
-  font-size: 1.2vh;
-}
-
-.ballImg {
-  position: absolute;
-  width: 5vw;
-  height: 5vw;
-  background-image: url('/public/img/enp_blue/ball.png');
-  background-size: cover;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.right_one_status {
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  z-index: 10;
-  color: #ffffff;
-  font-size: 2vh;
-  text-align: center;
-  position: absolute;
-  transform: translate(-50%, -50%);
-}
-
-/* right2 */
-.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;
-}
-
-/* right2 */
-
-/* 表格 */
-.drawer_container {
-  background-image: url('/public/img/enp_blue/tableBg.png');
-}
-
-/* 表格 */
-
 .left_border {
   width: 1vh;
   height: 70vh;
@@ -1317,12 +1140,6 @@ header {
   background-size: cover;
   background-image: url('/public/img/enp_blue/right_border.png');
 }
+/* 左右两边border，暂时没展示 */
 
-.pageClass {
-  width: 100%;
-  height: 89vh;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 </style>