feat:大屏设备小类选择展示隐藏

src/components/scScrollTable.vue

@@ -12,7 +12,7 @@
                         <div>
                             <table :class="{ marquee_top: animate }">
                                 <tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
-                                    <td>{{ index + 1 }}</td>
+                                    <td v-if="!noIndex">{{ index + 1 }}</td>
                                     <td v-for="itemz in itemy" :key="itemz">
                                         <el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
                                             :stroke-width="14" :percentage="itemz.value" :status="getStatus(itemz.value)" />
@@ -24,7 +24,7 @@
                             </table>
                             <table :class="{ marquee_top: animate }" v-show="scrollVivible">
                                 <tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
-                                    <td>{{ index + 1 }}</td>
+                                    <td v-if="!noIndex">{{ index + 1 }}</td>
                                     <td v-for="itemz in itemy" :key="itemz">
                                         <!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
                                         :status="getStatus(itemz.value)"/> -->
@@ -48,6 +48,10 @@
 <script>
 export default {
     props: {
+        noIndex: {
+            type: Boolean,
+            default: false
+        },
         rowData: {
             type: Array,
             default() {

src/views/bigScreen/cesiumtest.vue

@@ -1,12 +1,61 @@
 
 <template>
   <div style="width: 100%; height: 100%;">
-     <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
+     <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 style="position: relative;">
-          <div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
+            <div class="btns" @click="showChange(1)">生产设备</div>
-          <div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
+            <div class="bottomMenu bottomMenu1" @mouseleave="handleMouseLeave(1)">
-          <div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
+              <el-checkbox class="bottomMenu_item" v-model="eq_big" label="大型生产设备" @change="checkboxChange('eq_big')"/>
+              <el-checkbox class="bottomMenu_item" v-model="eq_main" label="主要生产设备" @change="checkboxChange('eq_main')"/>
+              <el-checkbox class="bottomMenu_item" v-model="eq_trans" label="输送设备" @change="checkboxChange('eq_trans')"/>
+              <!-- <el-checkbox-group v-model="equCheck" @change="checkChange(equCheck)">
+                <el-checkbox class="bottomMenu_item" value="eq_big" label="大型生产设备"/>
+                <el-checkbox class="bottomMenu_item" value="eq_main" label="主要生产设备"/>
+                <el-checkbox class="bottomMenu_item" value="eq_trans" label="输送设备"/>
+              </el-checkbox-group> -->
+            </div>
+          </div>
+          <div style="position: relative;">
+            <div class="btns" @click="showChange(2)">治理设备</div>
+            <div class="bottomMenu bottomMenu2" @mouseleave="handleMouseLeave(2)">
+              <el-checkbox class="bottomMenu_item" v-model="fog_cannon" label="雾炮" @change="checkboxChange('fog_cannon')"/>
+              <el-checkbox class="bottomMenu_item" v-model="dry_fog" label="干雾" @change="checkboxChange('dry_fog')"/>
+              <el-checkbox class="bottomMenu_item" v-model="dust_clean" label="除尘器" @change="checkboxChange('dust_clean')"/>
+              <el-checkbox class="bottomMenu_item" v-model="truck_clean" label="环卫车" @change="checkboxChange('truck_clean')"/>
+              <el-checkbox class="bottomMenu_item" v-model="wstation" label="洗车台" @change="checkboxChange('wstation')"/>
+              <el-checkbox class="bottomMenu_item" v-model="tltx" label="脱硫脱硝" @change="checkboxChange('tltx')"/>
+              <!-- <el-checkbox-group v-model="equCheck2">
+                <el-checkbox class="bottomMenu_item" value="wp" label="雾炮"/>
+                <el-checkbox class="bottomMenu_item" value="gw" label="干雾"/>
+                <el-checkbox class="bottomMenu_item" value="dust_clean" label="除尘器"/>
+                <el-checkbox class="bottomMenu_item" value="hec" label="环卫车"/>
+                <el-checkbox class="bottomMenu_item" value="xct" label="洗车台"/>
+                <el-checkbox class="bottomMenu_item" value="tltx" label="脱硫脱硝"/>
+              </el-checkbox-group> -->
+            </div>
+          </div>
+          <div style="position: relative;">
+            <div class="btns" @click="showChange(3)">监测设备</div>
+            <div class="bottomMenu bottomMenu3" @mouseleave="handleMouseLeave(3)">
+              <el-checkbox class="bottomMenu_item" v-model="tsp" label="TSP" @change="checkboxChange('tsp')"/>
+              <el-checkbox class="bottomMenu_item" v-model="cems" label="CEMS" @change="checkboxChange('cems')"/>
+              <el-checkbox class="bottomMenu_item" v-model="aqms" label="空气微站" @change="checkboxChange('aqms')"/>
+              <!-- <el-checkbox-group v-model="equCheck3">
+                <el-checkbox class="bottomMenu_item" value="cems" label="CEMS"/>
+                <el-checkbox class="bottomMenu_item" value="tsp" label="TSP"/>
+              </el-checkbox-group> -->
+            </div>
+          </div>
+          <div style="position: relative;">
+            <div class="btns" @click="showChange(4)">监控设备</div>
+            <div class="bottomMenu bottomMenu4" @mouseleave="handleMouseLeave(4)">
+              <el-checkbox class="bottomMenu_item" v-model="monitor" label="监控设备" @cahnge="checkboxChange('monitor')"/>
+              <!-- <el-checkbox-group v-model="equCheck4">
+                <el-checkbox class="bottomMenu_item" value="jksb" label="监控设备" />
+              </el-checkbox-group> -->
+            </div>
+          </div>
       </div>
       <div v-show="infoShow" class="infoDom">
         <h4 class="infoDom_header">
@@ -38,6 +87,7 @@
 </template>
 <script>
 import * as Cesium from 'cesium';
+import cems from './enpComponents/cems.vue';
 export default {
   name: 'cesium',
   props: ['activeIndex'],
@@ -45,7 +95,20 @@ export default {
     return {
       objItem: {},
       activeBtns: 10,
-      infoShow:false,
+      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,//监控设备
     }
   },
   created() {
@@ -54,12 +117,6 @@ export default {
 		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 =
@@ -155,7 +212,7 @@ export default {
           500
         )
       );
-      // that.equipmentTypeChange(10);
+      that.getEquipmentList();
     });
     // 监听鼠标左键点击事件
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
@@ -436,6 +493,7 @@ export default {
     //*****cesium加载.glb格式的文件*****//
   },
   methods: {
+    //计算赋值class
     bindBtnClass(index) {
       let classInfo = { btns: true, btnsActive: false };
       if (index == this.activeBtns) {
@@ -443,53 +501,23 @@ export default {
       }
       return classInfo;
     },
-    //获取类型对应的图标
+    //获取设备列表
-    getItemIcon(cateCode) { 
+    getEquipmentList() { 
-      switch (cateCode) {
-        case "aqms":
-          return "img/enp_blue/jcwz.png";
-        case "tsp":
-          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({page:0}).then((res) => {
-      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 height = parseInt(item.coordinates.height) + 5;
-            let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
+            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);
           }
         })
-        
       })
     },
     //调用此方法创建点用于标注在地图上
@@ -558,10 +586,77 @@ export default {
     closeInfo() { 
       this.infoShow = false;
     },
+    // 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)
+    },
+    //获取类型对应的图标
+    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";
+      }
+    },
+    //点击大类按钮
+    showChange(val) { 
+      let classname = 'bottomMenu' + val;
+      document.getElementsByClassName(classname)[0].style.display = 'block';
+    },
+    //鼠标移出小类
+    handleMouseLeave(val) { 
+      let classname = 'bottomMenu' + val;
+      document.getElementsByClassName(classname)[0].style.display = 'none';
+    },
   }
 }
 </script>
 <style>
+/* #cesiumContainer,
+#cesiumContainer>.cesium-viewer,
+#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer,
+#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget,
+#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget>canvas{
+  width: 100%;
+  height: 100%;
+} */
 .infoDom{
   position: fixed;
   right: 22%;
@@ -643,5 +738,56 @@ export default {
 .btns.btnsActive {
   background-image: url('/public/img/enp_blue/btn_active.png');
 }
-
+/* 底部多选框--start 调节checkbox大小和颜色*/
+.bottomMenu{
+  padding: 10px 10px 0 10px;
+  background: linear-gradient(to right, rgba(5, 56, 72,.7), rgba(16, 123, 144,.7));
+  width: 200px;
+  position: absolute;
+  display: none;
+}
+.bottomMenu1,
+.bottomMenu3{
+  height: 160px;
+  top: -160px;
+}
+.bottomMenu2{
+  height: 310px;
+  top: -310px;
+}
+.bottomMenu4{
+  height: 60px;
+  top: -60px;
+}
+.bottomMenu_item{
+  color: #ffffff;
+  width: 100%;
+  height:40px;
+  padding-left: 10px;
+  line-height: 40px;
+  margin-bottom: 10px;
+  background: linear-gradient(to right, rgba(27, 143, 164,.5), rgb(16, 123, 144,.5));
+}
+.bottomMenu_item .el-checkbox__inner{
+    width: 20px;
+    height: 20px;
+    border-color: #ffffff;
+    border-radius:0;
+}
+.bottomMenu_item>.el-checkbox__input.is-checked>.el-checkbox__inner {
+    width: 20px;
+    height: 20px;
+    background-color: #00f6ff;
+    border-color: #00f6ff;
+}
+.bottomMenu_item>.el-checkbox__input.is-checked+.el-checkbox__label{
+  color: #00f6ff;
+}
+.bottomMenu_item>.el-checkbox__input.is-checked .el-checkbox__inner::after{
+    height: 11px;
+    left: 5px;
+    top: 1px;
+    width: 6px;
+}
+/* 底部多选框--end */
 </style>

src/views/bigScreen/index_enp_blue.vue

@@ -115,7 +115,7 @@
             </div>
             <div>
              <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
-                :refValue="refValue1" class="bigScreenTable"></scScrollTavle>
+                :refValue="refValue1" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
               <!-- <div class="tableHear" style="padding: 0 1vh;">
                 <div style="flex:1;height:1vh"></div>
                 <div style="flex:5;margin: 0 1vh;">设备名称</div>
@@ -191,7 +191,7 @@
             </div>
             <div>
               <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight" :rowData="lineData2" :titleData="liData2"
-                :refValue="refValue2" class="bigScreenTable"></scScrollTavle>
+                :refValue="refValue2" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
             </div>
           </div>
         </div>
@@ -204,7 +204,7 @@
               <img class="blockTitleImg" src="img/enp_blue/block_title.png">
             </div>
             <scScrollTavle v-if="table3Visible" :tableHeight="containerHeight" :rowData="lineData3" :titleData="liData3"
-              :refValue="refValue3" class="bigScreenTable"></scScrollTavle>
+              :refValue="refValue3" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
             <!-- <div>
               <div class="tableHear"
                 style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.2vh">
@@ -416,15 +416,16 @@ export default {
       refValue1: 'moocBox1',
       table1Visible: true,
       lineData: [],
-      liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
+      liData1: ['设备名称', '颗粒物', 'SO₂', 'NOx'],
       refValue2: 'moocBox2',
       table2Visible: true,
       lineData2: [],
-      liData2: ['', '设备名称', 'TSP测量值'],
+      liData2: ['设备名称', 'TSP测量值'],
       refValue3: 'moocBox3',
       table3Visible: true,
       lineData3: [],
-      liData3: ['', '设备名称', 'PM10', 'PM2.5'],
+      liData3: ['设备名称', 'PM10', 'PM2.5'],
+      noIndex:true,
       eqNumData: {
         sc: 0,
         jc: 0,