地图模式infowindow显示逻辑优化

gassafety-web/src/components/PopWindow/lineInfoWindow.vue

@@ -59,11 +59,7 @@
         <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-            <span>{{
-              obj.inspectionTime
-                ? obj.inspectionTime
-                : "-"
-            }}</span>
+            <span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
           </div>
         </el-col>
 
@@ -73,7 +69,7 @@
         </div>
         <div>
           <span>备注信息：</span>
-          <span>{{ obj.remarks }} </span>
+          <span v-un-content>{{ obj.remarks }}</span>
         </div>
       </div>
       <template v-if="!obj.editorPage">
@@ -140,6 +136,19 @@ export default {
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   // overflow: hidden;
+  &:before {
+    content: "";
+    position: absolute;
+    left: -20px;
+    top: 5px;
+    width: 0px;
+    height: 0px;
+    /* border: 20px solid red; */
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    /* border-left: 50px solid greenyellow; */
+    border-right: 30px solid #053b6a;
+  }
   .top {
     width: 100%;
     height: 51px;

gassafety-web/src/components/PopWindow/markerInfoWindow.vue

@@ -2,41 +2,51 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{data.deviceName}}</div>
+      <div class="left text">{{ data.deviceName }}</div>
       <div class="right text">
-        <img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
+        <img
+          src="../../assets/images/closeBtn.png"
+          alt=""
+          @click="map.clearInfoWindow()"
+        />
       </div>
     </div>
     <!-- 设备信息 -->
     <div class="content">
       <div class="eq-content display-default">
         <div class="text-wrapper">
-          <div class="eq-text">设备类型：<span>{{title}}</span></div>
-          <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
-          <div class="eq-text">所属管道：<span>{{data.pipeName}}</span></div>
-          <div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
+          <div class="eq-text">
+            设备类型：<span>{{ title }}</span>
+          </div>
+          <div class="eq-text">
+            设备型号：<span>{{ data.deviceModel }}</span>
+          </div>
+          <div class="eq-text">
+            所属管道：<span>{{ data.pipeName }}</span>
+          </div>
+          <div class="eq-text">
+            物联网编号：<span>{{ data.iotNo }}</span>
+          </div>
         </div>
         <div class="pic">
           <img v-bind:src="data.iconUrl" alt="" />
         </div>
       </div>
       <!-- 维修人员 -->
-       <div class="maintain-content">
+      <div class="maintain-content">
         <el-col :span="11">
           <div>
             <span>安装日期：</span>
-            <span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
+            <span>{{
+              moment(data.installationTime).format("YYYY-MM-DD")
+            }}</span>
           </div>
         </el-col>
 
         <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-            <span>{{
-              data.inspectionTime
-                ? data.inspectionTime
-                : "-"
-            }}</span>
+            <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
           </div>
         </el-col>
 
@@ -46,7 +56,7 @@
         </div>
         <div>
           <span>备注信息：</span>
-          <span>{{ data.remarks }} </span>
+          <span v-un-content> {{ data.remarks }}</span>
         </div>
       </div>
       <!-- 报警状态 -->
@@ -55,24 +65,22 @@
         <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
       </div>-->
     </div>
-
   </div>
 </template>
 
 <script>
-import moment from "moment"
+import moment from "moment";
 //line移入时的的infowindow
 export default {
   props: {
     obj: { typs: Object },
     title: "",
     data: {},
-    map: null
+    map: null,
   },
-  methods:{
+  methods: {
     moment,
-  }
-
+  },
 };
 </script>
 
@@ -88,6 +96,19 @@ export default {
     width: 100%;
     height: 51px;
     background-color: #053b6a;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #053b6a;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -199,5 +220,4 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-
 </style>

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

@@ -4,11 +4,7 @@
     <div class="top display-default">
       <div class="left text">{{ data.deviceName }}</div>
       <div class="right text">
-        <img
-          src="../../assets/images/closeBtn.png"
-          alt=""
-          @click="close"
-        />
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <!-- 设备信息 -->
@@ -98,10 +94,10 @@ export default {
         },
       });
     },
-    close(){
+    close() {
       this.map.clearInfoWindow();
       this.data.class.view.bottomDataShow = true;
-    }
+    },
   },
 };
 </script>

gassafety-web/src/components/TopNav/index.vue

@@ -235,6 +235,7 @@ export default {
 .el-menu--horizontal > .el-submenu .el-submenu__title {
   height: 50px !important;
   line-height: 50px !important;
+  border:none !important;
   margin-left:15px;
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,

gassafety-web/src/directive/permission/index.js

 import hasRole from './hasRole'
 import hasPermi from './hasPermi'
+import unContent from './unContent'
 
 const install = function(Vue) {
   Vue.directive('hasRole', hasRole)
   Vue.directive('hasPermi', hasPermi)
+  Vue.directive('un-content', unContent)
 }
 
 if (window.Vue) {

gassafety-web/src/directive/permission/unContent.js

+/**
+ * 无内容显示-
+ * Copyright (c) 2021 gassafety
+ */
+
+export default {
+  inserted(el, binding, vnode) {
+    el.innerHTML = el.innerHTML.replace(/\s+/g, "") ? el.innerHTML : "-";
+  }
+};

gassafety-web/src/utils/gaodeMapView.js

@@ -53,9 +53,7 @@ class gaodeMap {
   markerPassedPolylineInfoWindow = null;
   view = null;
   handleInfoWindowOpenFunc = null;
-
   onceFlag = false;
-
   //构造函数中设置中央点默认值
   constructor(center) {
     this.markers = [];
@@ -96,7 +94,6 @@ class gaodeMap {
           })
           .catch(() => {});
       }
-
       // //console.log("抬起来了");
     });
     // 地图开始平移删除infowindow

gassafety-web/src/views/device/map/index.vue

 <template>
   <div>
-    <div style="width: 100vw;" :style="{height:`${boxHeight}px`}" id="container"></div>
+    <div
+      :style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
+      id="container"
+    ></div>
     <div class="btn-wrapper">
       <div class="myBtn">
         <div
@@ -238,6 +241,7 @@ export default {
       backFlag: true,
       // 抽屉内的滚动条的高需要赋值赋值
       boxHeight: "",
+      boxWidth: "",
       drawerOpacity: false,
       // 左边的bar的active判定
       leftBarNum: [1, 2, 3, 4, 7],
@@ -295,14 +299,21 @@ export default {
     };
   },
   mounted() {
+    this.onResize();
+    window.removeEventListener("resize", this.onResize);
+    window.addEventListener("resize", this.onResize);
     this.initMap();
-    this.boxHeight = document.body.clientHeight - 81;
   },
   methods: {
+    onResize() {
+      this.boxHeight = document.body.clientHeight - 81;
+      this.boxWidth = document.body.clientWidth - 100;
+    },
     async initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
       this.gaoMap.view = this;
+      window.removeEventListener("click", this.barClose);
       window.addEventListener("click", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
@@ -392,6 +403,7 @@ export default {
         // 0是初始，1是新建 2是编辑 3删除
         this.gaoMap.lineType = 1;
         if (this.gaoMap.newLineObj == null) {
+          console.log(this.gaoMap.newLineObj);
           this.gaoMap.createNewLine();
         }
       } else {
@@ -546,8 +558,12 @@ export default {
       console.log("window");
       this.deviceType = false;
       // 关闭当前线条的infowindow
-      this.gaoMap.closeInfoWindow();
+      // 如果当前状态只有是编辑跟删除状态才会关闭
+      if (this.targetNum == 2 || this.targetNum == 3) {
+        this.gaoMap.closeInfoWindow();
+      }
       // 如果没有选择的时候点window 则高亮消失
+      console.log(this.targetNum)
       if (this.targetNum == 1 && this.iconClass == "icon-create") {
         this.targetNum = 0;
       }
@@ -711,18 +727,35 @@ export default {
     panToo(iten, item) {
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
-
       // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
+      // 所有线条颜色还原
+      this.gaoMap.leftListClick = true;
+      this.gaoMap.polyLinesColorClear();
       this.gaoMap.myMap.setZoom(11);
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
-          this.gaoMap.panTo(iten.path);
+          let path;
+          if (item.value == 1) {
+            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.1];
+            // 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
+            iten.infoPath = [a.toFixed(6), b.toFixed(6)];
+            console.log(path);
+          } else {
+            path = [iten.path[0], iten.path[1] - 0.1];
+          }
+          // const path =
+          //   item.value == 1
+          //     ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
+          //     : [iten.path[0], iten.path[1] - 0.1];
+          this.gaoMap.panTo(path);
         }
       }
       // 当前地图中心点
       const { lat, lng } = this.gaoMap.myMap.getCenter();
       // 管道是这个方法，因为管道比较特殊
-
       if (item.value == 1) {
         this.polylineInfoWindowShow(iten, lat, lng);
       } else if (item.value == 9) {
@@ -735,6 +768,7 @@ export default {
         this.diveceInfoWindowShow(iten, lat, lng);
       }
     },
+
     // 如果是线条飞过去出现infowindow
     polylineInfoWindowShow(iten, lat, lng) {
       const target = this.gaoMap.polyLines.filter((item) => {
@@ -743,16 +777,20 @@ export default {
       console.log("target", target);
       const e = {
         target,
-        lnglat: iten.lnglat,
+        lnglat: iten.infoPath,
       };
+      // console.log(target.getOptions());
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
         return;
       }
+
       // 因为地图移动的时候infowindow无法显示
       this.gaoMap.handleInfoWindowOpenFunc = () => {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
       };
     },
     // 这个是其他设备的infowindow
@@ -780,6 +818,7 @@ export default {
   beforeDestroy() {
     console.log("移除window事件");
     window.removeEventListener("click", this.barClose);
+    window.removeEventListener("resize", this.onResize);
   },
 };
 </script>

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

 <template>
   <div>
-    <div style="width: 100vw;" :style="{height:`${boxHeight}px`}" id="container"></div>
+    <div
+      :style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
+      id="container"
+    ></div>
     <div v-show="false" class="btn-wrapper">
       <div class="myBtn">
         <div
@@ -379,6 +382,7 @@ export default {
 
       //  左边抽屉 内嵌scroll盒子的高
       boxHeight: "",
+      boxWidth:"",
       drawerOpacity: false,
       //抽屉是否收回
       backFlag: true,
@@ -391,9 +395,11 @@ export default {
   },
 
   mounted() {
-    this.boxHeight = document.body.clientHeight - 81;
-
     // this.$nextTick(() => {
+
+    this.onResize();
+    window.removeEventListener("resize", this.onResize);
+    window.addEventListener("resize", this.onResize);
     this.initMap();
     // });
   },
@@ -405,6 +411,11 @@ export default {
     },
   },
   methods: {
+    onResize() {
+      this.boxHeight = document.body.clientHeight - 81;
+      this.boxWidth = document.body.clientWidth;
+      console.log("挂在")
+    },
     initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
@@ -1271,7 +1282,7 @@ export default {
       // return;
       console.log("window");
       // 颜色恢复
-      
+
       this.deviceType = false;
       // 关闭当前线条的infowindow
       // this.gaoMap.closeInfoWindow();
@@ -1364,6 +1375,8 @@ export default {
     console.log("移除window事件");
     map.clearMap();
     window.removeEventListener("mousedown", this.barClose);
+    window.removeEventListener("resize", this.onResize);
+
     // 关闭scoket
     if (this.ws) {
       console.log("socket关闭了");