Merge remote-tracking branch 'origin/master'

gassafety-web/src/assets/styles/transition.scss

@@ -19,12 +19,12 @@
 
 .fade-transform-enter {
   opacity: 0;
-  transform: translateX(-30px);
+  // transform: translateX(-30px);
 }
 
 .fade-transform-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  // transform: translateX(30px);
 }
 
 /* breadcrumb transition */
@@ -36,7 +36,7 @@
 .breadcrumb-enter,
 .breadcrumb-leave-active {
   opacity: 0;
-  transform: translateX(20px);
+  // transform: translateX(20px);
 }
 
 .breadcrumb-move {
@@ -44,5 +44,5 @@
 }
 
 .breadcrumb-leave-active {
-  position: absolute;
+  // position: absolute;
 }

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,19 +2,31 @@
   <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="" />
@@ -25,18 +37,16 @@
         <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/lineInfoWindow.vue

@@ -128,15 +128,17 @@ export default {
     },
     close() {
       this.obj.polyline.infoWindow.close();
+      // window底部的数据拦
+      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
     },
     deviceMore() {
-      console.log(this.obj.polyline.getExtData().lineData)
+      console.log(this.obj.polyline.getExtData().lineData);
       this.obj.polyline.getExtData().class.view.$router.push({
         path: "/dataMonitoring/realtimedetail",
         query: {
           deviceId: this.obj.polyline.getExtData().lineData.pipeId,
           //这里是传数字
-          deviceType:"0",
+          deviceType: "0",
         },
       });
     },
@@ -151,11 +153,25 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
     background-color: #053b6a;
+    position: relative;
+    &: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;

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

@@ -194,12 +194,13 @@ export default {
         path: "/dataMonitoring/alarmdetail",
         query: {
           alarmId: this.obj.polyline.getExtData().lineData.alarmId,
-          deviceType:"管道"
+          deviceType: "管道",
         },
       });
     },
     close() {
       this.obj.polyline.infoWindow.close();
+      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
     },
   },
 };
@@ -212,11 +213,24 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
     background-color: #ff5a67;
+    &: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 #ff5a67;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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="map.clearInfoWindow()"
-        />
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <!-- 设备信息 -->
@@ -98,6 +94,10 @@ export default {
         },
       });
     },
+    close() {
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    },
   },
 };
 </script>
@@ -109,11 +109,24 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     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;

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

@@ -7,7 +7,7 @@
         <img
           src="../../assets/images/closeBtn.png"
           alt=""
-          @click="map.clearInfoWindow()"
+          @click="close"
         />
       </div>
     </div>
@@ -137,6 +137,10 @@ export default {
         type: "device",
       });
     },
+    close(){
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    },
     // CreateWorkCallBack(e) {
     //   // console.log("生成工单后传过来的参数", e);
     //   // console.log("markerCallBack");
@@ -181,11 +185,24 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
     background-color: #ff5a67;
+     &: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 #ff5a67;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

@@ -4,11 +4,7 @@
     <div class="top display-default">
       <div class="left text">{{ data.troubleName }}</div>
       <div class="right text">
-        <img
-          src="../../assets/images/closeBtn.png"
-          alt=""
-          @click="map.clearInfoWindow()"
-        />
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <!-- 设备信息 -->
@@ -72,7 +68,9 @@
           关联设备：<span>{{ data.deviceName ? data.deviceName : "-" }}</span>
         </div>
         <div>
-          设备类型：<span>{{ data.deviceType ? this.deviceType[data.deviceType] : "-" }}</span>
+          设备类型：<span>{{
+            data.deviceType ? this.deviceType[data.deviceType] : "-"
+          }}</span>
         </div>
         <div v-if="!orderId">
           工单编号：<span>{{ data.orderId }}</span>
@@ -83,11 +81,7 @@
           <el-button class="elbtn" type="primary">隐患详情</el-button>
         </span>
         <span v-if="orderId" @mousedown.stop="createWork">
-          <el-button
-            class="elbtn"
-            type="primary"
-            >生成工单</el-button
-          >
+          <el-button class="elbtn" type="primary">生成工单</el-button>
         </span>
         <span v-else @mousedown.stop="checkWork">
           <el-button class="elbtn" type="primary">查看工单</el-button>
@@ -121,7 +115,7 @@ export default {
   computed: {
     orderId() {
       // 如果已经生成过工单，就不能再次生成了
-      console.log("orderId",this.data.orderId)
+      console.log("orderId", this.data.orderId);
       // return this.data.orderId ? false : true;
       return this.data.orderId ? false : true;
     },
@@ -131,15 +125,20 @@ export default {
     createWork() {
       // 控制外层弹框
       // console.log(this.data.view.$refs.CreateWork);
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleId = this.data.troubleId;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleName = this.data.troubleName;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleType = this.data.troubleType;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel = this.data.troubleLevel;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleId =
+        this.data.troubleId;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleName =
+        this.data.troubleName;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleType =
+        this.data.troubleType;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel =
+        this.data.troubleLevel;
       this.data.class.view.$refs.CreateWorkTrouble.open = true;
-      this.data.class.view.$refs.CreateWorkTrouble.gaoMap = this.data.class.view.gaoMap;
+      this.data.class.view.$refs.CreateWorkTrouble.gaoMap =
+        this.data.class.view.gaoMap;
       // 改变外层回调
       // this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
-      this.data.class.view.troubleObjChange({troubleId:this.data.troubleId});
+      this.data.class.view.troubleObjChange({ troubleId: this.data.troubleId });
     },
     // CreateWorkCallBack(e) {
     //   // console.log("生成工单后传过来的参数", e);
@@ -153,6 +152,10 @@ export default {
     //   options.orderId = e;
     //   marker.setExtData(options);
     // },
+    close() {
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    },
     deviceMore() {
       this.data.class.view.$router.push({
         path: "/riskManagement/hiddenTroubleDetail",
@@ -185,11 +188,24 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
     background-color: #e6a23c;
+    &: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 #e6a23c;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

 <template>
   <div class="wrapper">
+    <div class="content">
       <span class="left">姓名: {{ data.userName }}</span>
       <span class="right">时间: {{ data.createTime }}</span>
     </div>
+
+    <div class=""></div>
+  </div>
 </template>
 
 <script>
@@ -29,14 +33,26 @@ export default {
   padding: 7px 7px 7px 8px;
   box-shadow: 0 0 20px -5px #0d4f88;
   border-radius: 4px;
+  position: relative;
+  &:before {
+    content: "";
+    position: absolute;
+    left: -10px;
+    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 #0d4f88;
+    z-index: -1;
+  }
+  .content {
     span {
       word-break: break-all;
       display: block;
-    // vertical-align: top;
-    // &.right {
-    //   width: 90px;
-    //   padding-left: 4px;
-    // }
+    }
   }
 }
 </style>
\ No newline at end of file

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/gaodeMap.js

@@ -37,6 +37,8 @@ class gaodeMap {
   view = null;
   // 地图移动结束后出现infowindow用的函数
   handleInfoWindowOpenFunc = null;
+  // 点击左侧抽屉的时候，改变的flag
+  leftListClick = false;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -59,6 +61,8 @@ class gaodeMap {
 
     this.myMap.on("click", e => {
       // if (this.lineType !=1 || this.lineFlag) return;
+      this.closeInfoWindow();
+      this.polyLinesColorClear();
       if (this.lineType != 1 || this.lineFlag) return;
 
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
@@ -81,17 +85,23 @@ class gaodeMap {
     // 地图开始平移删除infowindow
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
+      // 抽屉点击的时候让infowindow隐藏
+
+      if (this.leftListClick) {
+        console.log("moveStart")
         this.closeInfoWindow();
+      }
     });
     // 地图开始缩放删除infowindow
     this.myMap.on("zoomstart", () => {
-      // console.log("缩放开始")
       this.closeInfoWindow();
     });
     this.myMap.on("moveend", () => {
       if (this.handleInfoWindowOpenFunc) {
         this.handleInfoWindowOpenFunc();
         this.handleInfoWindowOpenFunc = null;
+        // 移动结束之后，leftListClick变成false
+        this.leftListClick = false;
       }
       // console.log("缩放开始")
       if (!this.onceFlag) {
@@ -198,6 +208,7 @@ class gaodeMap {
     ) {
       marker.content = this.getMarketContent(data);
       marker.on("mouseover", this.infoOpen);
+      marker.on("click", this.infoOpen);
       marker.on("mouseout", infoClose);
       marker.infoWindow = infoWindow;
       marker.setExtData(data);
@@ -313,6 +324,13 @@ class gaodeMap {
   }
   // 其他设备
   infoOpen = e => {
+    // 如果是无状态并且鼠标mouseover
+    if (this.view.targetNum == 0 && e.type == "mouseover") {
+      return;
+    }
+    // 如果是新建状态 不出弹框
+    if (this.view.targetNum == 1) return;
+    console.log(e.target)
     let options = map.getStatus();
     options.scrollWheel = false;
     map.setStatus(options);
@@ -489,11 +507,12 @@ class gaodeMap {
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
-        strokeColor: "#F7FE38",
+        strokeColor: "#2EE7E7",
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
-        bubble: true,
+        cursor: "pointer",
+        bubble: false,
         geodesic: true,
         extData: {
           type: "line",
@@ -527,7 +546,7 @@ class gaodeMap {
       });
       let infoWindow = new AMap.InfoWindow({
         isCustom: true,
-        autoMove: false,
+        autoMove: true,
         content: dom.$el,
         //信息船体偏移量
         offset: new AMap.Pixel(0, 0),
@@ -538,8 +557,9 @@ class gaodeMap {
       polyline.infoWindow = infoWindow;
       //添加事件
       polyline.on("mouseover", this.polylineMouseOver);
+      polyline.on("click", this.polylineMouseOver);
       polyline.on("mouseout", e => {
-        polyline.setOptions({ strokeColor: "#F7FE38" });
+        polyline.setOptions({ strokeColor: "#2EE7E7" });
         // infoWindow.close();
       });
       // 计算info的位置
@@ -554,8 +574,16 @@ class gaodeMap {
   }
   // 鼠标移入管道
   polylineMouseOver = e => {
+    console.log(e.type);
     let polyline = e.target;
-    if (this.lineType == 1) return;
+
+    // 如果是无状态或者是新建并且是鼠标移入
+    if (this.view.targetNum == 0 && e.type == "mouseover") {
+      polyline.setOptions({ strokeColor: "#F7FE38" });
+      return;
+    }
+    // 当选择的是新建的时候，线是点不了的
+    if (this.lineType == 1 || this.view.targetNum == 1) return;
     // 上方导航的高
     let X = 20,
       Y = -20;
@@ -599,20 +627,60 @@ class gaodeMap {
         console.log("靠下了");
         Y = -infoWindowHeight - 20;
       }
-      polyline.setOptions({ strokeColor: "#FF5A67" });
+      X = 23;
+      Y = -20;
+      // polyline.setOptions({ strokeColor: "#FF5A67" });
+      // 浮动的时候为新建时，不变色
+      if (this.view.targetNum != 1) {
+        polyline.setOptions({ strokeColor: "#F7FE38" });
+      }
     }
 
     polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
+
+    // 如果是戍边浮动出现infowindow 就让窗口在固定的位置出现，这样就不显得乱了
+    if (e.type == "mouseover") {
+      const coordinates=polyline.getPath().map(item=>{
+        return [item.lng,item.lat ]
+      })
+      // const { coordinates } = polyline.getExtData().lineData;
+      // 计算出前两个点的中点
+      const arr1 = coordinates[0];
+      const arr2 = coordinates[1];
+      const a = this.centerNum(arr1[0], arr2[0]);
+      const b = this.centerNum(arr1[1], arr2[1]);
+      const a2 = this.centerNum(a, arr1[0]);
+      const b2 = this.centerNum(b, arr1[1]);
+      polyline.infoWindow.open(map, [a2, b2]);
+    } else {
+      console.log("windowOpen");
+      // 变成异步，最后执行
       polyline.infoWindow.open(map, e.lnglat);
+
+      // setTimeout(() => {
+      //   console.log(polyline.infoWindow.getIsOpen())
+      //   polyline.infoWindow.open(map, e.lnglat);
+      // }, 0);
+      // console.log(polyline.infoWindow.)
+    }
     // polyline.infoWindow=infoWindow;
     this.showInfoWindow = polyline.infoWindow;
 
     // const
   };
 
+  polyLinesColorClear() {
+    this.polyLines.forEach(item => {
+      item.setOptions({ strokeColor: "#2EE7E7" });
+    });
+  }
+  centerNum(num1, num2) {
+    return (Number(num1) + Number(num2)) / 2;
+  }
   // 创建一条新的线
   createNewLine() {
     map.remove(this.markerOverlays);
+    console.log("创造一条线了啊");
     this.mouseTool.polyline({
       // bubbles:false,
       strokeWeight: 4,
@@ -641,6 +709,7 @@ class gaodeMap {
   }
   // 新建line增加编辑以及右键菜单
   closeInfoWindow() {
+
     this.showInfoWindow && this.showInfoWindow.close();
     this.markerInfoWindow && this.markerInfoWindow.close();
   }
@@ -650,6 +719,7 @@ class gaodeMap {
     // obj.polyEditor.on('adjust',(e)=>{
     //   console.log("addnode")
     // })
+
     obj.on("mousedown", e => {
       console.log(e.originEvent);
       console.log("lineType", this.lineType);
@@ -717,28 +787,24 @@ class gaodeMap {
     const {
       lineData: { pipeName, deviceInfoList }
     } = obj.getExtData();
-    console.log("deviceInfoList", deviceInfoList);
-
-    var devices = " ";
+    let devices = " ";
+    let content;
+    if (deviceInfoList) {
       for (var i = 0; i < deviceInfoList.length; i++) {
         var item = deviceInfoList[i];
         devices = devices + item.deviceName + " ";
       }
+      content = `请确认是否删除管道名称为 + ${pipeName} +的数据项，该管道下包含的设备（ ${devices}  ）将一并删除`;
+    } else {
+      content = `请确认是否删除管道名称为 ${pipeName} 的数据项，该管道下不包含任何设备`;
+    }
     vue
-      .$confirm(
-        '请确认是否删除管道名称为"' +
-          pipeName +
-          '"的数据项，该管道下包含的设备（' +
-          devices +
-          "）将一并删除",
-        "提示",
-        {
+      .$confirm(content, "提示", {
         // confirmButtonText: "确定",
         // cancelButtonText: "取消",
         type: "warning"
         // center: true
-        }
-      )
+      })
       .then(() => {
         const { lineData } = obj.getExtData();
         // updatePipe
@@ -751,7 +817,9 @@ class gaodeMap {
             // 如果是老线，就要线删除原来的，然后重新包装一遍
             if (index >= 0) {
               this.polyLines.splice(index, 1);
-              // 删除管道的时候，与管道管理额的设备也要删除
+              // 删除管道的时候，与管道管理额的设备也要删除,
+              // 如果管道存在下级设备,也一并删除
+              if (deviceInfoList) {
                 for (var i = 0; i < deviceInfoList.length; i++) {
                   const item = deviceInfoList[i];
                   for (let j = 0; j < this.markers.length; j++) {
@@ -766,15 +834,16 @@ class gaodeMap {
                     }
                   }
                 }
+              }
               map.remove(obj);
               // 列表变化
-              const pipeArr= this.polyLines.map(item=>{
+              const pipeArr = this.polyLines.map(item => {
                 return item.getExtData().lineData;
-              })
+              });
               const markerArr = this.markers.map(item => {
                 return item.getExtData();
               });
-              this.view.pipeClassify(pipeArr)
+              this.view.pipeClassify(pipeArr);
               this.view.deviceClassify(markerArr);
               this.view.pipeList();
             }
@@ -809,7 +878,8 @@ class gaodeMap {
       item.setExtData(opstions);
 
       let attr = item.getOptions();
-      attr.strokeColor = "#F7FE38";
+      // attr.strokeColor = "#F7FE38";
+      attr.strokeColor = "#2EE7E7";
       item.setOptions(attr);
     });
   }
@@ -875,7 +945,6 @@ class gaodeMap {
             device.form.longitude = postion.lng;
             device.form.latitude = postion.lat;
           }
-
           device.show();
         });
         e.obj.on("mouseover", function() {
@@ -892,6 +961,12 @@ class gaodeMap {
       if (e.obj && e.obj.getExtData().type == "newLine") {
         console.log("挂上事件");
         that.newLineAddEvent(e.obj);
+        e.obj.on("mouseover", () => {
+          e.obj.setOptions({ strokeColor: "#F7FE38" });
+        });
+        e.obj.on("mouseout", () => {
+          e.obj.setOptions({ strokeColor: "#80d8ff" });
+        });
         // 记录这条线
         // console.log(e.obj.getPath().length)
         // 如果只有一个点，并没有连成线的时候就不close 大于一个点的时候才执行clse

gassafety-web/src/utils/gaodeMapView.js

@@ -53,9 +53,9 @@ class gaodeMap {
   markerPassedPolylineInfoWindow = null;
   view = null;
   handleInfoWindowOpenFunc = null;
-
   onceFlag = false;
-
+  用来判断点击左边抽屉列表的时候移动才消失
+  leftListClick=false;
   //构造函数中设置中央点默认值
   constructor(center) {
     this.markers = [];
@@ -74,11 +74,14 @@ class gaodeMap {
       // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
     });
     this.myMap = map;
-
-    this.myMap.on("click", e => {
+    this.myMap.on("mousedown", e => {
+      console.log(e);
       // if (this.lineType !=1 || this.lineFlag) return;
-      if (this.lineType != 1 || this.lineFlag) return;
+      this.closeInfoWindow();
+      this.polyLinesColorClear();
 
+      this.view.bottomDataShow = true;
+      if (this.lineType != 1 || this.lineFlag) return;
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
       if (this.newLineObj) {
         vue
@@ -89,19 +92,22 @@ class gaodeMap {
             this.newLineObj = null;
             this.lineFlag = false;
             this.createNewLine();
-
             //console.log("map点击事件新建");
           })
           .catch(() => {});
       }
-
       // //console.log("抬起来了");
     });
     // 地图开始平移删除infowindow
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
+      if (this.leftListClick) {
+        console.log("moveStart");
         this.closeInfoWindow();
+      }
+      // this.closeInfoWindow();
     });
+
     // 地图开始缩放删除infowindow
     this.myMap.on("zoomstart", () => {
       // console.log("缩放开始")
@@ -259,6 +265,10 @@ class gaodeMap {
       marker.data = data;
       marker.infoWindow = infoWindow;
       marker.on("mouseover", this.wokerManOpen);
+      marker.on("mouseout", e => {
+        e.target.infoWindow.close();
+      });
+
       marker.on("mousedown", e => {
         // console.log(data);
         that.closeInfoWindow();
@@ -279,7 +289,7 @@ class gaodeMap {
       marker.markerType = markerType;
       marker.data = data;
       marker.infoWindow = infoWindow;
-      marker.on("mouseover", this.troubleOpen);
+      marker.on("mousedown", this.troubleOpen);
       marker.setExtData(data);
       this.troubles.push(marker);
     }
@@ -292,7 +302,7 @@ class gaodeMap {
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.infoWindow = infoWindow;
-      marker.on("mouseover", that.infoOpen);
+      marker.on("mousedown", that.infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
       that.deviceType = markerType;
@@ -380,8 +390,10 @@ class gaodeMap {
     this.markerType = e.target.markerType;
     e.target.content = this.getMarketContent(e.target.data);
     e.target.infoWindow.setContent(e.target.content);
-    e.target.infoWindow.open(map, e.target.getPosition());
-    console.log("e.target.getPosition()", e.target.getExtData());
+    e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
+    e.target.infoWindow.open(map, e.target.getExtData().pos);
+    console.log("e.target.getPosition()", e.target.getExtData().pos);
+    console.log("offset", e.target.infoWindow.getOffset());
     this.boxCollision(e.target.infoWindow.dom);
     // that.addCloneDome(e.target, infoWindow);
     // infoWindow.close();
@@ -699,12 +711,13 @@ class gaodeMap {
       marker.passedPolyline = new AMap.Polyline({
         map: map,
         strokeColor: "#AF5", //线颜色
+        cursor: "pointer",
         strokeWeight: 6 //线宽
       });
 
       // removeLineInfoWindow
 
-      marker.passedPolyline.on("mouseover", e => {
+      marker.passedPolyline.on("mousedown", e => {
         const dom = createPop(removeLineInfoWindow, {
           map: this,
           marker
@@ -717,13 +730,13 @@ class gaodeMap {
           // offset: new AMap.Pixel(20, 20),
           anchor: "left-top"
         });
+        marker.infoWindow.setOffset(new AMap.Pixel(10, -20));
         marker.infoWindow.open(map, e.lnglat);
         // infoWindow.on("mousedown",(e)=>{
         //   e.stopPropagation();
 
         // })
         this.markerPassedPolylineInfoWindow = marker.infoWindow;
-        console.log(e.lnglat);
       });
 
       marker.moveMarker.on("moving", function(e) {
@@ -778,7 +791,6 @@ class gaodeMap {
       // //console.log("coordinates",coordinates)
       // let path = coordinates ? getArray(coordinates) :[];
       // 字符串转二维数组
-
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
@@ -786,8 +798,9 @@ class gaodeMap {
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
-        bubble: true,
+        bubble: false,
         geodesic: true,
+        cursor: "pointer",
         extData: {
           type: "line",
           //当前line状态 0:正常状态 1:正在编辑状态
@@ -801,12 +814,17 @@ class gaodeMap {
       // 信息窗体
       this.newLineAddEvent(polyline);
       //添加事件
-      polyline.on("mouseover", this.polylineMouseOver);
-
+      polyline.on("mousedown", this.polylineMouseOver);
+      polyline.on("mouseover", () => {
+        polyline.setOptions({ strokeColor: "#F7FE38" });
+      });
       polyline.on("mouseout", e => {
         // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
-        if (polyline.getExtData().lineData.alarmState == 1) return;
+        if (polyline.getExtData().lineData.alarmState == 1) {
+          polyline.setOptions({ strokeColor: "#ff0000" });
+        } else {
           polyline.setOptions({ strokeColor: "#2EE7E7" });
+        }
         // infoWindow.close();
       });
       // 计算info的位置
@@ -830,11 +848,11 @@ class gaodeMap {
     } else {
       infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
     }
+
     infoWindow.open(map, e.lnglat);
-    console.log(infoWindow);
     // 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
     console.log("e.originEvent", e.originEvent);
-    if (e.originEvent) {
+    if (e.originEvent && 0) {
       // 上方导航的高
       const topBar = 81;
       // 坐标导航的宽
@@ -889,6 +907,16 @@ class gaodeMap {
     this.showInfoWindow = infoWindow;
     // const
   };
+  // 所有的线的颜色归位，如果是报警的，就红色，不是就蓝色
+  polyLinesColorClear() {
+    this.polyLines.forEach(item => {
+      if (item.getExtData().lineData.alarmState == 1) {
+        item.setOptions({ strokeColor: "#ff0000" });
+      } else {
+        item.setOptions({ strokeColor: "#2EE7E7" });
+      }
+    });
+  }
 
   lineMouseOver(polyline, lineInfoWindow, item) {
     let dom = createPop(lineInfoWindow, {
@@ -906,11 +934,11 @@ class gaodeMap {
     });
     let infoWindow = new AMap.InfoWindow({
       isCustom: true,
-      autoMove: false,
+      autoMove: true,
       content: dom.$el,
       //信息船体偏移量
-      offset: new AMap.Pixel(0, 0),
-      anchor: "left-top"
+      // offset: new AMap.Pixel(0, 0),
+      anchor: "left-topr"
     });
     polyline.infoWindow = infoWindow;
     return infoWindow;

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

 <template>
   <div>
-    <div style="width: 100vw; height: 100vh" id="container"></div>
+    <div
+      :style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
+      id="container"
+    ></div>
     <div class="btn-wrapper">
       <div class="myBtn">
         <div
@@ -98,6 +101,7 @@
       ref="drawer"
       class="drawer"
       :class="{ back: backFlag, opacity: drawerOpacity }"
+      @click.stop="drawerdrawer"
     >
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
@@ -238,6 +242,7 @@ export default {
       backFlag: true,
       // 抽屉内的滚动条的高需要赋值赋值
       boxHeight: "",
+      boxWidth: "",
       drawerOpacity: false,
       // 左边的bar的active判定
       leftBarNum: [1, 2, 3, 4, 7],
@@ -295,14 +300,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");
@@ -313,7 +325,10 @@ export default {
     // 左边的Bar修改值
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
-
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
       const index = this.leftBarNum.indexOf(item.value);
       if (index >= 0) {
         this.leftBarNum.splice(index, 1);
@@ -392,6 +407,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 +562,12 @@ export default {
       console.log("window");
       this.deviceType = false;
       // 关闭当前线条的infowindow
+      // 如果当前状态只有是编辑跟删除状态才会关闭
+      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;
       }
@@ -572,9 +592,18 @@ export default {
       });
       this.initMap();
     },
-
+    drawerdrawer() {
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
+    },
     // 向右的箭头的动画
     arrowRightChange(item) {
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
       const index = this.arrowRightNum.indexOf(item.value);
       if (index >= 0) {
         this.arrowRightNum.splice(index, 1);
@@ -711,30 +740,40 @@ 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)];
+          } else {
+            path = [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) {
-        // 工作人员
-        // this.workerManInfoWindowShow(iten, lat, lng);
       } else if (item.value == 8) {
-        // this.trouleInfoWindowShow(iten, lat, lng);
       } else {
         // 其他设备
         this.diveceInfoWindowShow(iten, lat, lng);
       }
     },
+
     // 如果是线条飞过去出现infowindow
     polylineInfoWindowShow(iten, lat, lng) {
       const target = this.gaoMap.polyLines.filter((item) => {
@@ -743,16 +782,29 @@ 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) {
+      // console.log(iten.infoPath, lng, lat + 0.1);
+      console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
+      // 因为计算问题，误差小于0.00001就没动
+      if (
+        iten.infoPath[0] - lng >= 0 &&
+        iten.infoPath[0] - lng <= 0.00001 &&
+        iten.infoPath[1] - (lat + 0.1) >= 0 &&
+        iten.infoPath[1] - (lat + 0.1) <= 0.00001
+      ) {
+        // console.log('进来了')
+        this.gaoMap.leftListClick = false;
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
         return;
       }
       // 因为地图移动的时候infowindow无法显示
       this.gaoMap.handleInfoWindowOpenFunc = () => {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
       };
     },
     // 这个是其他设备的infowindow
@@ -766,7 +818,9 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      console.log(iten.path, lng, lat);
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        console.log("9999999999");
         this.gaoMap.infoOpen(e);
         return;
       }
@@ -780,6 +834,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; height: 100vh" 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
@@ -86,6 +89,7 @@
       ref="drawer"
       class="drawer"
       :class="{ back: backFlag, opacity: drawerOpacity }"
+      @click.stop="drawerClick"
     >
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
@@ -122,7 +126,7 @@
                 active: leftBarNum.indexOf(item.value) >= 0,
                 firstbox: index == 0,
               }"
-              @click.stop="arrowRightChange(item)"
+              @click="arrowRightChange(item)"
             >
               <span class="upPic"> 上图 </span>
               <div class="left">
@@ -161,7 +165,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown.stop="panToo(iten, item)"
+                        @click.stop="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.code" class="code">
@@ -186,7 +190,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown.stop="panToo(iten, item)"
+                        @click.stop="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.troubleLevel" class="code">
@@ -231,7 +235,7 @@
                         class="btn backPage"
                         type="mini"
                         :disabled="item.nowPage == 1"
-                        @click.stop="pageBack(item, index)"
+                        @click="pageBack(item, index)"
                         icon="el-icon-arrow-left"
                       />
                       <span class="btn-w-num">{{ item.nowPage }}</span>
@@ -239,7 +243,7 @@
                         class="btn goPage"
                         type="mini"
                         :disabled="item.nowPage == item.maxPage"
-                        @click.stop="pageGo(item, index)"
+                        @click="pageGo(item, index)"
                         icon="el-icon-arrow-right"
                       />
                     </div>
@@ -378,6 +382,7 @@ export default {
 
       //  左边抽屉 内嵌scroll盒子的高
       boxHeight: "",
+      boxWidth: "",
       drawerOpacity: false,
       //抽屉是否收回
       backFlag: true,
@@ -390,8 +395,13 @@ export default {
   },
 
   mounted() {
+    // this.$nextTick(() => {
+
+    this.onResize();
+    window.removeEventListener("resize", this.onResize);
+    window.addEventListener("resize", this.onResize);
     this.initMap();
-    this.boxHeight = document.body.clientHeight - 81;
+    // });
   },
   watch: {
     changeBtnData: {
@@ -401,9 +411,15 @@ 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;
+      window.removeEventListener("mousedown", this.barClose);
       window.addEventListener("mousedown", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
@@ -730,7 +746,6 @@ export default {
       }
       // 1,2,3,4,7分别对应数据库type5，1，2，3，4
       // console.log(this.leftBarNum);
-
       if (this.leftBarNum.includes(1)) {
         this.gaoMap.lineShow(true);
         // this.panTo(item);
@@ -785,25 +800,56 @@ export default {
     panTo(item, bool) {
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
-          this.gaoMap.panTo(item.list[0].path);
+          let path;
+          // 线条
+          if (item.value == 1) {
+            const a =
+              (Number(item.list[0].lnglat[0]) + Number(item.list[0].path[0])) /
+              2;
+            const b =
+              (Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
+              2;
+            path = [a, b - 0.1];
+          } else {
+            path = [item.list[0].path[0], item.list[0].path[1] - 0.1];
+          }
+          this.gaoMap.panTo(path);
         }
       }
     },
     panToo(iten, item) {
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
-
+      // 点击的时候允许infowindow消失
+      this.gaoMap.leftListClick = true;
       // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
+      // 所有线条颜色还原
+      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) {
@@ -825,16 +871,29 @@ export default {
       console.log("target", target);
       const e = {
         target,
-        lnglat: iten.lnglat,
+        lnglat: iten.infoPath,
       };
+      // console.log(target.getOptions());
+      console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
+
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      // if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
+      if (
+        iten.infoPath[0] - lng >= 0 &&
+        iten.infoPath[0] - lng <= 0.00001 &&
+        iten.infoPath[1] - (lat + 0.1) >= 0 &&
+        iten.infoPath[1] - (lat + 0.1) <= 0.00001
+      ) {
+        this.gaoMap.leftListClick = false;
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
         return;
       }
+
       // 因为地图移动的时候infowindow无法显示
       this.gaoMap.handleInfoWindowOpenFunc = () => {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
       };
     },
     // 这个是其他设备的infowindow
@@ -848,7 +907,8 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        this.gaoMap.leftListClick = false;
         this.gaoMap.infoOpen(e);
         return;
       }
@@ -868,7 +928,8 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        this.gaoMap.leftListClick = false;
         this.gaoMap.troubleOpen(e);
         return;
       }
@@ -889,7 +950,8 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        this.gaoMap.leftListClick = false;
         this.gaoMap.wokerManOpen(e);
         return;
       }
@@ -1229,12 +1291,14 @@ export default {
     // 新建下拉列表关闭 window点击事件
     barClose() {
       // 一点windowbottomData显示
-      this.bottomDataShow = true;
+      // this.bottomDataShow = true;
       // return;
       console.log("window");
+      // 颜色恢复
+
       this.deviceType = false;
       // 关闭当前线条的infowindow
-      this.gaoMap.closeInfoWindow();
+      // this.gaoMap.closeInfoWindow();
       // 如果没有选择的时候点window 则高亮消失
       if (this.targetNum == 1 && this.iconClass == "icon-create") {
         this.targetNum = 0;
@@ -1313,6 +1377,12 @@ export default {
     troubleObjChange(obj) {
       this.troubleObj = obj;
     },
+    drawerClick() {
+      console.log("drawerClick");
+      this.gaoMap.polyLinesColorClear();
+
+      this.gaoMap.closeInfoWindow();
+    },
   },
 
   beforeDestroy() {
@@ -1320,6 +1390,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关闭了");