Merge remote-tracking branch 'origin/master'

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-02-25 18:34:00
+ * @LastEditTime: 2022-02-26 14:16:23
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -63,19 +63,19 @@
       <div class="tbody flex">
         <div class="first zzz">{{ "流量计与压力表" }}</div>
         <div class="">{{ deviceData.pressureFlows.length }}</div>
-        <div class="">
+        <div v-unValue class="">
           {{ (Math.random() * deviceData.pressureFlows.length) >> 1 }}
         </div>
-        <div class="">
+        <div v-unValue class="">
           {{ (Math.random() * deviceData.pressureFlows.length) >> 1 }}
         </div>
-        <div class="">
+        <div v-unValue class="">
           {{ (Math.random() * deviceData.pressureFlows.length) >> 1 }}
         </div>
-        <div class="">
+        <div v-unValue class="">
           {{ (Math.random() * deviceData.pressureFlows.length) >> 1 }}
         </div>
-        <div class="last zzz">
+        <div v-unValue class="last zzz">
           {{
             deviceData.pressureFlows.filter((item) => {
               return item.deviceState == 2;
@@ -118,6 +118,8 @@ export default {
         this.companyType[item.conpanyId] = item.companyName;
       });
     }
+    console.log(this.deviceData)
+
   },
   methods: {
     close() {

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

 <!--
  * @Author: your name
  * @Date: 2022-01-27 14:25:45
- * @LastEditTime: 2022-02-17 10:12:02
+ * @LastEditTime: 2022-02-26 14:16:16
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /hello-world/src/views/components/User.vue
@@ -22,7 +22,7 @@
 
     <div class="group flex">
       <div class="left">联系方式：</div>
-      <div class="right">{{ deviceData.phone }}</div>
+      <div v-unValue class="right">{{ deviceData.phone }}</div>
     </div>
 
     <div class="group flex">
@@ -32,16 +32,15 @@
       </div>
     </div>
 
-    <div class="group flex">
+    <!-- <div class="group flex">
       <div class="left">所属公司：</div>
       <div class="right">{{ companyType[deviceData.companyType] }}</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
 import { companyType } from "@/utils/mapClass/config.js";
-import { mapGetters } from "vuex";
 
 export default {
   data() {

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

+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-bind:css="false"
+  >
+    <div v-show="show" class="wrapper center">
+      <div class="left">
+        <div class="title-wrapper">
+          <div class="title">{{title}}报警器列表</div>
+          <div class="close" @click="close">
+            <img src="@/assets/images/closeBtn.png" alt="" />
+          </div>
+        </div>detectorInfo.
+        <div class="bottom right-bottom-data-left">
+          <el-table
+            size="mini"
+            :data="tableData"
+            style="width: 100%"
+            :height="tableHeight"
+            class="el-bottom"
+            :key="Math.random()"
+          >
+            <!-- :height="tableHeight" -->
+            <el-table-column prop="detectorCode" label="设备编号" width="180">
+              <template slot-scope="scope">
+                <div :title="scope.row.detectorCode" class="ddd" v-un-content>
+                  {{ scope.row.detectorCode }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="detectorName" label="设备名称" width="100">
+              <template slot-scope="scope">
+                <div :title="scope.row.detectorName" class="ddd" v-un-content>
+                  {{ scope.row.detectorName }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="medium" label="监测介质" width="">
+              <template slot-scope="scope">
+                <div v-un-content>{{ scope.row.medium }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="linkman" label="联系人" width="100">
+            </el-table-column>
+            <el-table-column prop="phone" label="联系电话" width="">
+            </el-table-column>
+            <el-table-column prop="detectorStatus" label="设备状态" width="100">
+            </el-table-column>
+            <el-table-column prop="alarmTime" label="报警时间" width="200">
+              <template slot-scope="scope">
+                <div v-un-content>{{ scope.row.alarmTime }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmValue" label="定位" width="50">
+              <template slot-scope="scope">
+                <div
+                  @click="createDetector(scope)"
+                  class="iconfont icon-bjqdw"
+                ></div>
+                <!-- {{ scope.row.userId }} -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <div>
+            <el-pagination
+              @current-change="handleCurrentChangvale"
+              :page-size="pageSize"
+              layout="prev, pager, next, jumper"
+              :total="total"
+              :hide-on-single-page="total <= pageSize"
+              :key="total+''+pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Velocity from "velocity-animate";
+import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
+
+export default {
+  props: {
+    detcetorList: {
+      type: Array,
+    },
+    show: {
+      type: Boolean,
+    },
+    title: {
+      type: String,
+    },
+    userId: {
+      type: [Number, String],
+    },
+    total: {
+      type: Number,
+    },
+    pageSize: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      // 动画效果的切换
+      animateChange: 0,
+      fade: "fade",
+      tableHeight: 600,
+      tableData: [
+        // {
+        //   deviceCode: "2016-05-05",
+        //   name: "王小虎",
+        //   province: "上海",
+        //   city: "普陀区",
+        //   address: "上海市普陀区金沙江路",
+        // },
+      ],
+      moveX: 0,
+      moveY: 0,
+    };
+  },
+  created() {
+    console.log("list", this.detcetorList);
+    // this.getList();
+  },
+  watch: {
+    // 当组件显示的时候
+    detcetorList(newData) {
+      // console.log(bol);
+      // if (bol) {
+      console.log(newData);
+      this.tableData = [...newData];
+      // }
+    },
+  },
+
+  methods: {
+    handleSizeChange(val) {
+      console.log(val);
+    },
+    handleCurrentChangvale(val) {
+      this.$parent.getDetectorInfoList({
+        userId: this.userId,
+        pageNum: val,
+        pageSize: this.pageSize,
+      },this.title);
+    },
+    close() {
+      this.fade = "fade";
+      this.$parent.centerShow = false;
+      this.$parent.circleShow = false;
+    },
+
+    // 点击创建点并且定位过去
+    createDetector(data) {
+      // 如果有经纬度才能走通，没有套弹框提示
+      if (data.row.latitude && data.row.longitude) {
+        this.fade = "scale";
+        this.$parent.centerShow = false;
+        this.$parent.circleShow = true;
+        this.$parent.gaoMap.addMarker("detector_only", data.row);
+      } else {
+        this.msgError("数据不完善，无法定位");
+      }
+    },
+
+    beforeEnter: function (el) {
+      //  如果点的是关闭
+      if (this.fade == "fade") {
+        // 如果点的是定位
+        el.style.opacity = 0;
+
+        console.log(el);
+      } else {
+        el.style.transfrom = `translate(${this.moveX},${this.moveY})`;
+        el.style.transfrom = "scale(0,0)";
+      }
+    },
+    enter: function (el, done) {
+      if (this.fade == "fade") {
+        Velocity(
+          el,
+          {
+            opacity: 1,
+            translateX: "0px",
+            translateY: "0px",
+            scaleX: 1,
+            scaleY: 1,
+            // scaleX:1,
+            // scaleY:1
+          },
+          { duration: 0, complete: done }
+        );
+      } else {
+        Velocity(
+          el,
+          {
+            translateX: "0px",
+            translateY: "0px",
+            scaleX: 1,
+            scaleY: 1,
+          },
+          { duration: 300, complete: done }
+        );
+      }
+    },
+    beforeLeave(el) {
+      if (this.fade == "fade") {
+        el.style.opacity = 1;
+      } else {
+        el.style.transfrom = "translate(0px,0px)";
+        el.style.transfrom = "scale(1,1)";
+      }
+    },
+    leave: function (el, done) {
+      if (this.fade == "fade") {
+        Velocity(
+          el,
+          {
+            opacity: 0,
+          },
+          { duration: 0, complete: done }
+        );
+      } else {
+        // 列表的位置参数
+        const { top, left, height, width } = el.getBoundingClientRect();
+        // 当列表缩下去的右下角的位置参数
+        const {
+          top: topC,
+          left: leftC,
+          height: heightC,
+          width: widthC,
+        } = this.$parent.$refs.circle.getBoundingClientRect();
+
+        const moveX = Math.abs(leftC - left) - width / 2 + heightC / 2 + "px";
+        const moveY = Math.abs(topC - top) - height / 2 + heightC / 2 + "px";
+        this.moveX = moveX;
+        this.moveY = moveY;
+
+        Velocity(
+          el,
+          {
+            translateX: moveX,
+            translateY: moveY,
+            scaleX: 0,
+            scaleY: 0,
+          },
+          { duration: 300, complete: done }
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss"  scoped>
+.wrapper {
+  // width: 978px;
+  max-height: 600px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -300px;
+  margin-left: -500px;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  z-index: 9999;
+
+  & > div {
+  }
+  .left {
+    // width: 100px;
+    max-height: 598px;
+    margin-right: 12px;
+    // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+    // background-color: #fff;
+    // color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    .title-wrapper {
+      width: 100%;
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      background: #1890ff;
+      padding: 5px;
+      .title {
+        width: 100%;
+        color: #fff;
+        text-align: center;
+      }
+      .close {
+        box-sizing: border-box;
+        padding-top: 2px;
+        padding-right: 5px;
+        cursor: pointer;
+      }
+    }
+    .el-table__body-wrappe {
+      height: 140px !important;
+    }
+    .top {
+      height: 19px;
+      // background-color: #053b6a;
+      color: #fff;
+      // line-height: 32px;
+      // padding-left: 12px;
+      position: relative;
+
+      .title {
+        position: absolute;
+        left: 50%;
+        margin-left: -92px;
+        top: -5px;
+      }
+      .repeat {
+        position: absolute;
+        top: -5px;
+        right: 160px;
+        color: #fff;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+      .repeat2 {
+        position: absolute;
+        right: 206px;
+        color: #67c23a;
+      }
+      .more {
+        position: absolute;
+        right: 38px;
+        top: -5px;
+        color: #fff;
+        float: right;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+    }
+    .bottom {
+      width: 1000px;
+      margin: 0 auto;
+      position: relative;
+    }
+  }
+  .right {
+    width: 740px;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    align-content: flex-start;
+    // margin-top: 7px;
+    & > .right-content {
+      background-color: #fff;
+      width: 238px;
+      height: 82px;
+      margin-bottom: 29px;
+      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+      margin-right: 10px;
+      display: flex;
+      &.three {
+        margin-right: 0px;
+      }
+      // align-items: center;
+      .text-icon {
+        line-height: 82px;
+        padding-left: 22px;
+        margin-right: 22px;
+        i {
+          color: #053b6a;
+          font-size: 60px;
+        }
+      }
+      .text {
+        font-size: 14px;
+        padding-top: 16px;
+        .top {
+          color: #000;
+          margin-bottom: 10px;
+          font-weight: 600;
+        }
+        .bottom {
+          color: #2788ea;
+        }
+      }
+    }
+  }
+
+  .iconfont {
+    cursor: pointer;
+  }
+  // 单独调整下最后一个icon的大小
+  .iconFontSize {
+    font-size: 50px !important;
+  }
+}
+</style>
\ No newline at end of file

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

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-26 09:55:44
+ * @LastEditTime: 2022-02-26 13:59:03
  * @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
@@ -444,19 +444,38 @@ export class EditorMap {
     if (!this.infowindow) return;
     this.infowindow.close();
   }
+
+  allilter(companyArr, typeArr) {
+    for (let pipeItem in this.pipeArr) {
+      this.pipeArr[pipeItem].forEach((pipe) => {
+        const data = pipe.getExtData();
+        if (companyArr.indexOf(data.companyType + "") >= 0) {
+          pipe.show();
+        } else {
+          pipe.hide();
+        }
+      });
+    }
+    for (let deviceItem in this.allDevice) {
+      this.allDevice[deviceItem].forEach((device) => {
+        const data = device.getExtData();
+        // 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
+        // 燃气没有公司，所以没有device.companyType不收到公司的控制
+        const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
+        // 设备存在
+        const deviceHas = typeArr.indexOf(data.iconType + "") >= 0;
+        // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
+        if (deviceHas && (companyHas || !data.companyType)) {
+          device.show();
+        } else {
+          device.hide();
+        }
+      });
+    }
+  }
   // 根据公司过滤是否显示 公司由一个数组传过来
   companyFilter(companyArr) {
     for (let pipeItem in this.pipeArr) {
-      // 如果item属于数组说明要显示，凑则就是隐藏
-      // if (companyArr.indexOf(+pipeItem+'') >= 0) {
-      //   this.pipeArr[pipeItem].forEach((pipe) => {
-      //     pipe.show();
-      //   });
-      // } else {
-      //   this.pipeArr[pipeItem].forEach((pipe) => {
-      //     pipe.hide();
-      //   });
-      // }
       this.pipeArr[pipeItem].forEach((pipe) => {
         const data = pipe.getExtData();
         if (companyArr.indexOf(data.companyType + "") >= 0) {
@@ -467,25 +486,27 @@ export class EditorMap {
       });
     }
     for (let deviceItem in this.allDevice) {
-      // if (companyArr.indexOf(+deviceItem+'') >= 0) {
-      //   this.allDevice[deviceItem].forEach((device) => {
-      //     device.show();
-      //   });
-      // } else {
-      //   this.allDevice[deviceItem].forEach((device) => {
-      //     device.hide();
-      //   });
-      // }
-      console.log(this.allDevice);
       this.allDevice[deviceItem].forEach((device) => {
         const data = device.getExtData();
 
         // 燃气没有公司，所以没有device.companyType不收到公司的控制
+        const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
+
+        // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
+        if (companyHas || !data.companyType) {
+          device.show();
+        } else {
+          device.hide();
+        }
+      });
+    }
+  }
 
-        if (
-          companyArr.indexOf(data.companyType + "") >= 0 ||
-          !data.companyType
-        ) {
+  // 根据设备类型隐藏展示
+  iconTypeFilter(typeArr) {
+    for (let deviceItem in this.allDevice) {
+      this.allDevice[deviceItem].forEach((device) => {
+        if (typeArr.indexOf(deviceItem + "") >= 0) {
           device.show();
         } else {
           device.hide();
@@ -493,10 +514,20 @@ export class EditorMap {
       });
     }
   }
+  // 公司改变，先调用设备方法，在调用公司方法
+  companyChange(companyArr, typeArr) {
+    this.iconTypeFilter(typeArr);
+    this.companyFilter(companyArr);
+  }
+  // 设备选择，先调用公司方法，在调用设备方法覆盖
+  deviceChange(companyArr, typeArr) {
+    this.companyFilter(companyArr);
+    this.iconTypeFilter(typeArr);
+  }
   // 卫星图切换
   satellite = null;
   changeMap(bool) {
-    // 卫星图
+    // 卫星,
     if (!bool) {
       if (this.satellite) return;
       this.satellite = new AMap.TileLayer.Satellite();