右上角列表

gassafetyprogress-web/src/utils/mapClass/config.js

@@ -33,8 +33,6 @@ export const deviceType = {
   4:"厂站",
   5:"监控",
   6:"用户",
-
-
 };
 
 

gassafetyprogress-web/src/views/bigWindow/index.vue

@@ -12,6 +12,7 @@
     <div id="map"></div>
     <Center :show="show" :centerData="centerData" />
     <PipeColor />
+    <!-- 底部按钮 -->
     <div class="home-div">
       <img
         src="@/assets/mapinages/bottombanner.png"
@@ -37,6 +38,15 @@
         </div>
       </div>
     </div>
+
+    <!-- 设备按钮 -->
+      <div class="typelist-div">
+        <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel1(index,item)">
+          {{item.name}}
+        </div>
+      </div>
+ 
+
     <!-- 弹框 -->
     <div
       id=""
@@ -164,8 +174,36 @@ export default {
           name: "中燃韵科",
         },
       ],
-    };
-  },
+      arr:[
+        {
+          val:1,
+          ischeck:false,
+          name: "调压箱"
+        },
+        {
+          val:2,
+          ischeck:false,
+          name: "阀门井"
+        },
+        {
+          val:3,
+          ischeck:false,
+          name: "场站"
+        },
+        {
+          val:4,
+          ischeck:false,
+          name: "用户"
+        },
+        {
+          val:5,
+          ischeck:false,
+          name: "监控"
+        }
+      ],
+        selarr1:[],
+        };
+      },
   watch: {
     selarr(newValue) {
       if (newValue.length == 3) {
@@ -252,6 +290,25 @@ export default {
       }
       this.map.companyFilter(this.selarr);
     },
+
+    sel1(index,item){
+      let arr=[...this.arr];
+      let selarr1=[...this.selarr1];
+      if(arr[index].ischeck==false){
+      arr[index].ischeck=true;
+      selarr1.push(item)
+      }else{
+      arr[index].ischeck=false;
+      var index11=selarr1.indexOf(index)
+      selarr1.splice(index11,1)
+      
+      }
+      
+      this.arr=arr;
+      this.selarr1=selarr1;
+      
+    },
+
     currentTime() {
       setInterval(() => {
         this.formatDate();
@@ -418,4 +475,30 @@ export default {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+.typelist-div{
+  width: 450px;
+  height: 50px;
+  z-index: 9999;
+  position: fixed;
+  bottom: 20%;
+  left: 40%;
+}
+.list{
+  z-index: 9999;
+  float: left;
+  margin-left: 10px;
+  color: #fff;
+  width: 80px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
+  box-shadow: inset 0px 1px 2px 1px #125C9B;
+}
+ 
+.list.active{
+  background: linear-gradient(86deg, #112238 0%, #32A3D3 62%, #112238 100%);
+  box-shadow: inset 0px 1px 2px 1px #125C9B;
+  color: #2ee7e7;
+}
 </style>