Merge remote-tracking branch 'origin/master'

gassafety-web/package.json

@@ -30,6 +30,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "velocity-animate": "^1.5.2",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue

@@ -3,7 +3,7 @@
     <span class="dot-left"></span>
     <div class="top display-default">
       <div class="left text ddd" :title="data.deviceName">
-        {{ data.deviceName }}
+        {{ data.detectorName  }}
       </div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
@@ -11,9 +11,9 @@
     </div>
     <div class="contant">
       <div>
-        <div class="theadtop">
+        <!-- <div class="theadtop">
           设备名称: <span v-un-content>{{ data.detectorName }}</span>
-        </div>
+        </div> -->
         <div>
           设备编号: <span v-un-content>{{ data.detectorCode }}</span>
         </div>
@@ -83,6 +83,7 @@ export default {
   background: rgba(7, 29, 51, 0.9);
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   color: #fff;
+  font-size: 14px;
   // overflow: hidden;
   .top {
     width: 100%;
@@ -129,6 +130,9 @@ export default {
   }
   .contant {
     padding: 10px;
+    &>div div{
+      margin-bottom:8px;
+    }
   }
 }
 

gassafety-web/src/utils/gaodeMapView.js

@@ -102,7 +102,7 @@ class gaodeMap {
       this.closeInfoWindow();
       this.polyLinesColorClear();
       // 删除独立报警器
-      this.clearDetectorOnlyOpen();
+      // this.clearDetectorOnlyOpen();
       this.domAllShow();
       if (this.lineType != 1 || this.lineFlag) return;
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
@@ -121,6 +121,10 @@ class gaodeMap {
       }
       // //console.log("抬起来了");
     });
+    this.myMap.on("click", () => {
+      // 删除独立报警器
+      this.clearDetectorOnlyOpen();
+    });
     // 地图开始平移删除infowindow
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
@@ -402,7 +406,9 @@ class gaodeMap {
       this.handleInfoWindowOpenFunc = () => {
         this.detectorOnlyOpen(e);
       };
-      this.panTo([data.longitude, data.latitude - 0.08]);
+      this.panTo([data.longitude, data.latitude - this.view.lntPosition]);
+      marker.on("mousedown", this.detectorOnlyOpen);
+
       marker.setExtData(data);
 
       // 赋值上去
@@ -517,6 +523,7 @@ class gaodeMap {
 
     return marker;
   }
+
   // 值班人员
   wokerManOpen = e => {
     this.markerType = e.target.markerType;
@@ -1243,9 +1250,10 @@ class gaodeMap {
       Right: { $el: pageDomRight },
       RightPic: { $el: pageDomRightPic }
     } = this.view.$refs;
+    console.log("pageDomRightPic", pageDomRightPic);
     // this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
     // this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
-    this.mathWho(infowindowDom,pageDomRightPic,"RightPicShow","rightpic");
+    this.mathWho(infowindowDom, pageDomRightPic, "RightPicShow", "rightpic");
   }
   // domAttr view里的属性
   //attr 存储在类里的值
@@ -1256,6 +1264,7 @@ class gaodeMap {
       offsetWidth: aw,
       offsetHeight: ah
     } = pageDom;
+
     let {
       y: by,
       x: bx,
@@ -1278,8 +1287,9 @@ class gaodeMap {
       // ax = this.ax;
       ax = this[attr + "x"];
     }
-    console.log("ay", ay);
-    if (by + bh >= ay && bx + bw >= ax) {
+    console.log(ay + ah >= by && bx + bw >= ax);
+
+    if (ay + ah >= by && bx + bw >= ax) {
       console.log("隐藏");
       this.view[domAttr] = false;
     } else {
@@ -1494,8 +1504,17 @@ class gaodeMap {
       })
       .forEach(item => {
         bool ? item.show() : item.hide();
+        // 如果独立报警器存在，且属于自身
+        if (this.detcetorMarker &&this.detcetorMarker.data.detectorId==item.data.userId) {
+          bool?this.detcetorMarker.show():this.detcetorMarker.hide();
+        }
       });
   }
+  detcetorMarkerShow(bool) {
+    if (this.detcetorMarker) {
+      bool ? this.detcetorMarker.show() : this.detcetorMarker.hide();
+    }
+  }
 
   lineDelete(obj) {
     const {

gassafety-web/src/views/enterprise/mapView/components/Center.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"></div>
+          <div class="title">报警器列表</div>
           <div class="close" @click="close">
             <img src="@/assets/images/closeBtn.png" alt="" />
           </div>
@@ -11,7 +18,7 @@
           <el-table
             size="mini"
             :data="tableData"
-          style="width: 100%;"
+            style="width: 100%"
             :height="tableHeight"
             class="el-bottom"
           >
@@ -49,11 +56,12 @@
           </el-table>
         </div>
       </div>
-
     </div>
+  </transition>
 </template>
 
 <script>
+import Velocity from "velocity-animate";
 import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
 
 export default {
@@ -67,6 +75,9 @@ export default {
   },
   data() {
     return {
+      // 动画效果的切换
+      animateChange: 0,
+      fade: "fade",
       tableHeight: 600,
       tableData: [
         {
@@ -76,8 +87,9 @@ export default {
           city: "普陀区",
           address: "上海市普陀区金沙江路",
         },
-        
       ],
+      moveX: 0,
+      moveY: 0,
     };
   },
   created() {
@@ -90,20 +102,115 @@ export default {
       console.log(bol);
       if (bol) {
         console.log(this.detcetorList);
-        this.tableData=[...this.detcetorList]
+        this.tableData = [...this.detcetorList];
       }
     },
   },
 
   methods: {
     close() {
+      this.fade = "fade";
       this.$parent.centerShow = false;
+      this.$parent.circleShow = false;
     },
+
     // 点击创建点并且定位过去
     createDetector(data) {
-      console.log(data);
-      this.close();
+      // 如果有经纬度才能走通，没有套弹框提示
+      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 }
+        );
+      }
     },
   },
 };
@@ -129,7 +236,7 @@ export default {
     // width: 100px;
     max-height: 598px;
     margin-right: 12px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+    // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
     // background-color: #fff;
     // color: #fff;
     font-size: 14px;
@@ -251,18 +358,5 @@ export default {
   .iconFontSize {
     font-size: 50px !important;
   }
-  .fade-enter-to,
-  .fade-leave {
-    opacity: 1;
-  }
-  .fade-leave-active {
-    transition: opacity 0.5s;
-  }
-  .fade-enter-active {
-    transition: opacity 0s;
-  }
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-    opacity: 0;
-  }
 }
 </style>
\ No newline at end of file

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -81,7 +81,7 @@
       :list="rightBototmData"
     />
     <!-- 右边 -->
-    <RightPic v-show="RightPicShow" ref="RightPic"/>
+    <RightPic v-show="RightPicShow" ref="RightPic" />
     <!-- 报警工单 -->
     <CreateWork
       ref="CreateWork"
@@ -98,8 +98,12 @@
     <Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
     <!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
     <div
-      @click="centerShow = true"
-      v-show="!centerShow && gaoMap && gaoMap.detcetorMarker"
+      @click="
+        centerShow = true;
+        circleShow = false;
+      "
+      v-show="circleShow"
+      ref="circle"
       class="circle"
     >
       列表
@@ -570,7 +574,7 @@ export default {
       rightBototmData: [],
       bottomDataShow: true,
       rightDataShow: true,
-      RightPicShow:true,
+      RightPicShow: true,
       // 如果右边与下面重叠了，bottom要往左移
       bottomMarginRight: false,
       // 是否显示生成工单弹框
@@ -591,7 +595,11 @@ export default {
 
       // Center组件的参数，也就是报警用户的的list
       centerShow: false,
+      // 右下角的圆
+      circleShow: false,
+      circleNum: 0,
       detcetorList: [],
+      lntPosition: 0,
     };
   },
   created() {
@@ -834,6 +842,7 @@ export default {
         console.log("queryParams", res);
         if (res.code == 200) {
           this.detcetorList = res.data;
+          this.$refs.center.fade="fade";
           this.centerShow = true;
           // 传递回去
           return res.code;
@@ -1326,15 +1335,30 @@ export default {
             const b =
               (Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
               2;
-            path = [a, b - 0.08];
+            path = [a, b - this.lntPosition];
           } else {
-            path = [item.list[0].path[0], item.list[0].path[1] - 0.08];
+            path = [
+              item.list[0].path[0],
+              item.list[0].path[1] - this.lntPosition,
+            ];
           }
           this.gaoMap.panTo(path);
         }
       }
     },
     panToo(iten, item) {
+      // 如果没有经纬度
+      if (!iten.path[0] || !iten.path[1]) {
+        this.msgError("数据不完善，无法定位");
+        return;
+      }
+      // 动画模式归位
+      this.$refs.center.fade = "fade";
+      // 点击任何一个功能元素的时候，列表都要消失
+      this.centerShow = false;
+      // 右下角的圆也要消失
+      this.circleShow = false;
+
       this.domAllShow();
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
@@ -1343,7 +1367,7 @@ export default {
       // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
       // 所有线条颜色还原
       this.gaoMap.polyLinesColorClear();
-      this.gaoMap.myMap.setZoom(12);
+      // this.gaoMap.myMap.setZoom(12);
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
           let path;
@@ -1351,12 +1375,12 @@ export default {
             const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
             const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
             //屏幕移动的位置
-            path = [a, b - 0.08];
+            path = [a, b - this.lntPosition];
             // 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
             iten.infoPath = [a.toFixed(6), b.toFixed(6)];
             console.log(path);
           } else {
-            path = [iten.path[0], iten.path[1] - 0.08];
+            path = [iten.path[0], iten.path[1] - this.lntPosition];
           }
           // const path =
           //   item.value == 1
@@ -1404,8 +1428,8 @@ export default {
       if (
         iten.infoPath[0] - lng >= -0.00001 &&
         iten.infoPath[0] - lng <= 0.00001 &&
-        iten.infoPath[1] - (lat + 0.08) >= -0.00001 &&
-        iten.infoPath[1] - (lat + 0.08) <= 0.00001
+        iten.infoPath[1] - (lat + this.lntPosition) >= -0.00001 &&
+        iten.infoPath[1] - (lat + this.lntPosition) <= 0.00001
       ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.polylineMouseOver(e);
@@ -1430,8 +1454,11 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
-      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
+      // if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
+      if (
+        iten.path[0] == lng &&
+        iten.path[1] >= lat + this.lntPosition - 0.000001
+      ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.infoOpen(e);
         return;
@@ -1452,8 +1479,11 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
-      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
+      // if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
+      if (
+        iten.path[0] == lng &&
+        iten.path[1] >= lat + this.lntPosition - 0.000001
+      ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.troubleOpen(e);
         return;
@@ -1475,9 +1505,12 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
+      // if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
       // console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
-      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
+      if (
+        iten.path[0] == lng &&
+        iten.path[1] >= lat + this.lntPosition - 0.000001
+      ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.wokerManOpen(e);
         return;
@@ -1498,9 +1531,12 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
+      // if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
       // console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
-      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
+      if (
+        iten.path[0] == lng &&
+        iten.path[1] >= lat + this.lntPosition - 0.000001
+      ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.videoOpen(e);
         return;
@@ -1522,9 +1558,12 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      // if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
+      // if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
       // console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
-      if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
+      if (
+        iten.path[0] == lng &&
+        iten.path[1] >= lat + this.lntPosition - 0.000001
+      ) {
         this.gaoMap.leftListClick = false;
         this.gaoMap.detectorOpen(e);
         return;

gassafety-web/yarn.lock

@@ -8914,6 +8914,11 @@ vary@~1.1.2:
   resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+velocity-animate@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.nlark.com/velocity-animate/download/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"
+  integrity sha1-WjUddfyiqSdW9cOGdUi4c/bDIQU=
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/vendors/download/vendors-1.0.4.tgz?cache=0&sync_timestamp=1615203486079&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvendors%2Fdownload%2Fvendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"