上传master

gassafetyprogress-web/src/components/bigWindow/DeviceA.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-02-26 14:16:23
+ * @LastEditTime: 2022-02-26 23:06:21
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -26,7 +26,7 @@
       <div class="group">
         <div class="left">设备类型：</div>
         <div class="right zzz">
-          {{ deviceType[deviceData.type] }}
+          {{ deviceType[deviceData.iconType] }}
         </div>
       </div>
       <div class="group">
@@ -45,6 +45,7 @@
         >
           {{ deviceData.stationAddr || "-" }}
         </div>
+        <div v-else>-</div>
       </div>
     </div>
 

gassafetyprogress-web/src/components/bigWindow/rightBar.vue

@@ -450,7 +450,7 @@
                 this.timerAni();
             },
             timerAni() {
-                console.log("zhix")
+
                 const selectWrap = this.$refs.table.$el.querySelector(
                 ".el-table__body-wrapper"
                 );

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

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-26 13:59:03
+ * @LastEditTime: 2022-02-26 23:23:01
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -445,7 +445,7 @@ export class EditorMap {
     this.infowindow.close();
   }
 
-  allilter(companyArr, typeArr) {
+  allfilter(companyArr, typeArr) {
     for (let pipeItem in this.pipeArr) {
       this.pipeArr[pipeItem].forEach((pipe) => {
         const data = pipe.getExtData();
@@ -463,7 +463,8 @@ export class EditorMap {
         // 燃气没有公司，所以没有device.companyType不收到公司的控制
         const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
         // 设备存在
-        const deviceHas = typeArr.indexOf(data.iconType + "") >= 0;
+        const deviceHas = typeArr.indexOf(+data.iconType ) >= 0;
+        console.log(deviceHas)
         // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
         if (deviceHas && (companyHas || !data.companyType)) {
           device.show();

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

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-02-26 22:54:46
+ * @LastEditTime: 2022-02-26 23:31:14
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -11,6 +11,15 @@
     <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
     <div id="map"></div>
     <Center :show="show" :centerData="centerData" />
+    <UserCenter
+      :title="centerTitle"
+      :show="centerShow"
+      ref="userCenter"
+      :detcetorList="detcetorList"
+      :userId="centerUserId"
+      :total="centerTotal"
+      :pageSize="20"
+    />
     <PipeColor />
     <!-- 底部按钮 -->
     <div class="home-div">
@@ -36,12 +45,21 @@
     </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)">
-          <img :src="item.imgurl" style="margin-top: 2px;float: left;margin-right: 3px;" /> {{item.name}}
-        </div>
+    <div class="typelist-div">
+      <div
+        class="list"
+        v-for="(item, index) in arr"
+        :key="index"
+        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
+        @click="sel1(index, item)"
+      >
+        <img
+          :src="item.imgurl"
+          style="margin-top: 2px; float: left; margin-right: 3px"
+        />
+        {{ item.name }}
       </div>
- 
+    </div>
 
     <!-- 弹框 -->
     <div
@@ -104,10 +122,10 @@
         z-index: 999;
         width: 200px;
         height: 50px;
-        color: #339CC9;
+        color: #339cc9;
       "
     >
-      <div style="height: 20px; width: 100%; float: right; font-size: 14px;">
+      <div style="height: 20px; width: 100%; float: right; font-size: 14px">
         {{ nowDate }}&nbsp;{{ nowtime }}&nbsp;{{ nowweek }}
       </div>
     </div>
@@ -118,6 +136,8 @@
 // @ is an alias to /src
 import { EditorMap } from "@/utils/mapClass/map";
 import { mapGetters, mapActions } from "vuex";
+import { listDetectorInfo } from "@/api/detector/detectorInfo";
+import { detectorUserList } from "@/api/detector/detectorUser";
 import {
   pipeData,
   tiaoyaxiang,
@@ -139,6 +159,7 @@ import VideoView from "@/components/bigWindow/VideoView.vue";
 import DeviceA from "@/components/bigWindow/DeviceA.vue";
 import User from "@/components/bigWindow/User.vue";
 import Center from "@/components/bigWindow/Center.vue";
+import UserCenter from "@/components/bigWindow/UserCenter.vue";
 import PipeColor from "@/components/bigWindow/PipeColor.vue";
 
 // import markerInfoWindow from './components/markerInfoWindow.vue'
@@ -150,6 +171,7 @@ export default {
     leftBar,
     rightBar,
     Center,
+    UserCenter,
     PipeColor,
   },
   data() {
@@ -179,41 +201,52 @@ export default {
           name: "中燃韵科",
         },
       ],
-      arr:[
+      //      2:"调压箱",
+      // 3:"阀门",
+      // 4:"厂站",
+      // 5:"监控",
+      // 6:"用户",
+      arr: [
         {
-          val:1,
-          ischeck:false,
-          imgurl: require('@/assets/image/tyxsub.svg'),
-          name: "调压箱"
+          val: 2,
+          ischeck: false,
+          imgurl: require("@/assets/image/tyxsub.svg"),
+          name: "调压箱",
         },
         {
-          val:2,
-          ischeck:false,
-          imgurl: require('@/assets/image/fmjsub.svg'),
-          name: "阀门井"
+          val: 3,
+          ischeck: false,
+          imgurl: require("@/assets/image/fmjsub.svg"),
+          name: "阀门井",
         },
         {
-          val:3,
-          ischeck:false,
-          imgurl: require('@/assets/image/czsub.svg'),
-          name: "场 站"
+          val: 4,
+          ischeck: false,
+          imgurl: require("@/assets/image/czsub.svg"),
+          name: "厂 站",
         },
         {
-          val:4,
-          ischeck:false,
-          imgurl: require('@/assets/image/usersub.svg'),
-          name: "用 户"
+          val: 6,
+          ischeck: false,
+          imgurl: require("@/assets/image/usersub.svg"),
+          name: "用 户",
         },
         {
-          val:5,
-          ischeck:false,
-          imgurl: require('@/assets/image/jksub.svg'),
-          name: "监 控"
-        }
+          val: 5,
+          ischeck: false,
+          imgurl: require("@/assets/image/jksub.svg"),
+          name: "监 控",
+        },
       ],
-        selarr1:[],
-        };
-      },
+      selarr1: [],
+      // 用户的center数据
+      detcetorList: [],
+      centerUserId: null,
+      centerTotal: null,
+      centerShow: false,
+      centerTitle: "",
+    };
+  },
 
   computed: {
     ...mapGetters(["company", "systemSetting"]),
@@ -224,8 +257,8 @@ export default {
   watch: {
     selarr(newValue) {
       if (newValue.length == this.companyLength) {
-        this.$refs.mychild.choice(0);
-        this.$refs.mychild2.choice(0);
+        // this.$refs.mychild.choice(0);
+        // this.$refs.mychild2.choice(0);
       }
     },
   },
@@ -264,6 +297,9 @@ export default {
         name: item.companyName,
       }));
       this.selarr = this.company.map((item) => item.conpanyId);
+      this.selarr1 = this.arr.map((item) => item.val);
+      this.arr.forEach((item) => (item.ischeck = true));
+
       // getPipe() getTyx() getFm() getCz() getVideo() getUser()
       this.goMap(getPipe, this.addPipeLine, Line);
       this.goMap(getTyx, this.addDevice, DeviceA);
@@ -277,8 +313,8 @@ export default {
     }
 
     this.currentTime();
-    this.$refs.mychild.choice(0);
-    this.$refs.mychild2.choice(0);
+    // this.$refs.mychild.choice(0);
+    // this.$refs.mychild2.choice(0);
   },
   methods: {
     ...mapActions({
@@ -302,15 +338,29 @@ export default {
     },
     goMap(httpFunc, addFunc, component) {
       httpFunc().then((res) => {
-        if(res.data&&!res.data[0].iconType){
-          res.data.forEach(item=>{
-            item.iconType =6;
-          })
+        // 给用户加icontype
+
+        if (res.data && !res.data[0].iconType) {
+          res.data.forEach((item) => {
+            item.iconType = 6;
+          });
         }
+        // if (res.data && !res.data[0].iconType) {
+        //   res.data.forEach((item) => {
+        //     item.iconType = 6;
+        //   });
+        // }
+
         // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
         let config = {};
         if (Array.isArray(res)) {
           config = { data: res };
+          // 给视频设备的conpanyType变成null
+          if(res[0].iconType==5){
+            res.forEach(item=>{
+              item.companyType = null;
+            })
+          }
         } else {
           config = { data: res.data };
         }
@@ -318,7 +368,7 @@ export default {
       });
     },
 
-    centerShow(boolean) {
+    myCenterShow(boolean) {
       this.show = boolean;
     },
     centerDataFunc(centerData) {
@@ -345,36 +395,49 @@ export default {
       if (ind >= 0) {
         this.selarr.splice(ind, 1);
         if (item.val == 3) {
-          this.$refs.mychild.choice(1);
-          this.$refs.mychild2.choice(1);
+          // this.$refs.mychild.choice(1);
+          // this.$refs.mychild2.choice(1);
         } else {
-          this.$refs.mychild.choice(item.val + 1);
-          this.$refs.mychild2.choice(item.val + 1);
+          // this.$refs.mychild.choice(item.val + 1);
+          // this.$refs.mychild2.choice(item.val + 1);
         }
       } else {
         this.selarr.push(item.val);
-        this.$refs.mychild.choice(item.val);
-        this.$refs.mychild2.choice(item.val);
+        // this.$refs.mychild.choice(item.val);
+        // this.$refs.mychild2.choice(item.val);
       }
-      this.map.companyFilter(this.selarr);
+      // this.map.companyFilter(this.selarr);
+      this.map.allfilter(this.selarr, this.selarr1);
     },
 
-    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)
+    sel1(index, item) {
+      const ind = this.selarr1.indexOf(item.val);
+      if (ind >= 0) {
+        this.selarr1.splice(ind, 1);
+      } else {
+        this.selarr1.push(item.val);
       }
-      this.arr=arr;
-      this.selarr1=selarr1;
-      
+      this.map.allfilter(this.selarr, this.selarr1);
     },
+    //用户的设备center
+    getDetectorInfoList(queryParams, title) {
+      console.log(queryParams);
+      return listDetectorInfo(queryParams).then((res) => {
+        console.log("queryParams", res);
+        if (res.code == 200) {
+          this.detcetorList = res.rows;
 
+          this.centerUserId = queryParams.userId;
+          // 总数据
+          this.centerTotal = res.total;
+          // this.$refs.userCenter.fade = "fade";
+          this.centerShow = true;
+          this.centerTitle = title;
+          // 传递回去
+          return res.code;
+        }
+      });
+    },
     currentTime() {
       setInterval(() => {
         this.formatDate();
@@ -428,11 +491,11 @@ export default {
   color: #18baff;
   cursor: pointer;
   padding: 3px 5px;
-  border: 1px solid #339CC9;
-  color: #339CC9;
+  border: 1px solid #339cc9;
+  color: #339cc9;
   &:hover {
-    background-color: #053B6A ;
-    color: #2CD5DB;
+    background-color: #053b6a;
+    color: #2cd5db;
   }
 }
 #map {
@@ -549,7 +612,7 @@ export default {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.typelist-div{
+.typelist-div {
   width: 450px;
   height: 50px;
   z-index: 9999;
@@ -558,7 +621,7 @@ export default {
   margin-top: 120px;
   right: 450px;
 }
-.list{
+.list {
   z-index: 9999;
   float: left;
   margin-left: 15px;
@@ -566,14 +629,15 @@ export default {
   line-height: auto;
   text-align: center;
   background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125C9B;
+  box-shadow: inset 0px 1px 2px 1px #125c9b;
   font-size: 14px;
   padding: 5px 7px;
+  cursor: pointer;
 }
- 
-.list.active{
-  background: linear-gradient(86deg, #112238 0%, #32A3D3 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;
   font-size: 14px;
 }