合并到jzl

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

 <template>
   <div class="wrapper">
-    <span class="left">高雄:</span>
+    <span class="left">高雄高雄:</span>
     <span class="right">2019-99-99 15:21:21</span>
   </div>
 </template>
@@ -11,22 +11,22 @@ export default {};
 
 <style  lang="scss" scoped>
 .wrapper{
-  width: 136px;
+  width: 166px;
   height: 54px;
   background: #0D4F88;
   font-size: 14px;
   color:#fff;
   box-sizing: border-box;
-  padding:7px 0px 7px 10px;
+  padding:7px 0px 7px 8px;
   box-shadow: 0 0 20px -5px #0D4F88;
   border-radius: 4px;
-
   span{
     word-break: break-all;
     display: inline-block;
     vertical-align: top;
     &.right{
       width:90px;
+      padding-left:4px;
     }
   }
 }

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

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+  >
+    <div>
+      <el-date-picker
+        v-model="dateValue"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button :loading="okLoading" type="primary" @click="ok"
+        >确 定
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import MyFileUpload from "@/components/MyFileUpload";
+import { addPipe, updatePipe } from "@/api/device/pipe.js";
+import { getString } from "@/utils/gassafety.js";
+import moment from "moment";
+export default {
+  props: {
+    id: {
+      type: String,
+    },
+    title:{
+      type:String,
+    }
+  },
+
+  components: {},
+  data() {
+    return {
+      dialogVisible: false,
+      dateValue:"",
+    };
+  },
+  computed: {},
+  created() {},
+  methods: {
+    ok() {},
+    async requeset(id, data) {
+      id ? console.log("修改") : console.log("新增");
+      return id ? updatePipe(data) : addPipe(data);
+    },
+    show() {
+      this.dialogVisible = true;
+    },
+    handleClose(done) {
+      done();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
+

gassafety-web/src/utils/gaodeMap.js

@@ -74,6 +74,17 @@ class gaodeMap {
       }
       // console.log("抬起来了");
     });
+
+       // 地图开始平移删除infowindow
+       this.myMap.on("movestart",()=>{
+        // console.log("地图平移");
+        this.closeInfoWindow()
+      })
+      // 地图开始缩放删除infowindow
+      this.myMap.on("zoomstart",()=>{
+        // console.log("缩放开始")
+        this.closeInfoWindow()
+      })
     this.districtBoundaries();
   }
 

gassafety-web/src/utils/gaodeMapView.js

@@ -6,11 +6,13 @@ import pipelineView from "../components/PopWindow/pipelineView.vue";
 import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
 import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
-import workerManInfowindow from "../components/PopWindow/workerManInfowindow.vue";
+import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
+import workerManView from "../components/PopWindowGis/workerManView.vue";
+
 import { getArray } from "@/utils/gassafety.js";
 import { delPipe } from "@/api/device/pipe.js";
 import vue from "../main";
-import {Card} from "element-ui"
+import { Card } from "element-ui";
 let defaultCenter = "石家庄";
 export let map;
 export const DEVICE_TYPE = {
@@ -74,8 +76,19 @@ class gaodeMap {
           })
           .catch(() => {});
       }
+
       // //console.log("抬起来了");
     });
+    // 地图开始平移删除infowindow
+    this.myMap.on("movestart", () => {
+      // console.log("地图平移");
+      this.closeInfoWindow();
+    });
+    // 地图开始缩放删除infowindow
+    this.myMap.on("zoomstart", () => {
+      // console.log("缩放开始")
+      this.closeInfoWindow();
+    });
     this.districtBoundaries();
   }
 
@@ -162,36 +175,33 @@ class gaodeMap {
     });
     this.setMarkerIcon(marker);
 
+    // 值班人员的marker
     if (DEVICE_TYPE.INSPECTOR == markerType) {
       // 存值
-      const { createTime,locationId,longitude,latitude} = data;
-      marker.setExtData({createTime, locationId ,pos:[longitude,latitude]});
+      const { createTime, locationId, longitude, latitude } = data;
+      marker.setExtData({ createTime, locationId, pos: [longitude, latitude] });
       // 值班人员的事件
 
-      marker.on("click", e => {
-        console.log(e);
-        console.log(e.target.getExtData())
-        // console.log(Card)
-        // e.target.content = this.getMarketContent(data);
-      });
-      marker.on("mouseover",(e)=>{
+      // marker.on("click", e => {
+      //   console.log(e);
+      //   console.log(e.target.getExtData());
+      //   // console.log(Card)
+      //   // e.target.content = this.getMarketContent(data);
+      // });
+      marker.on("mouseover", e => {
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
-        e.target.cloneDom = infoWindow.dom.cloneNode(true);
-
-        // console.log(infoWindow.dom.offsetLeft);
-        // console.log(infoWindow.dom);
-        e.target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
-        e.target.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
-        // 先删除之前的，后增加现在的
-        // this.removeCloneDom();
-        that.removeCloneDom();
-        document.body.appendChild(e.target.cloneDom);
-        that.workerManCloneDom = e.target.cloneDom;
-        infoWindow.close();
+        that.addCloneDome(e.target, infoWindow);
+        // infoWindow.close();
         that.workerManInfoWindow = infoWindow;
-      })
+      });
+      marker.on("mousedown", e => {
+        that.closeInfoWindow();
+        that.workerManView({title:"值班人员轨迹回放"});
+
+
+      });
     }
 
     if (
@@ -283,22 +293,9 @@ class gaodeMap {
       map.setStatus(options);
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
+      that.addCloneDome(e.target, infoWindow);
+      // infoWindow.close();
 
-      // console.log(infoWindow.dom);
-
-      // 这个是为了盖住vue里的东西
-      e.target.cloneDom = infoWindow.dom.cloneNode(true);
-
-      // console.log(infoWindow.dom.offsetLeft);
-      // console.log(infoWindow.dom);
-      e.target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
-      e.target.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
-      // 先删除之前的，后增加现在的
-      // this.removeCloneDom();
-      that.removeCloneDom();
-      document.body.appendChild(e.target.cloneDom);
-      that.markerCloneDom = e.target.cloneDom;
-      infoWindow.close();
       that.markerInfoWindow = infoWindow;
     }
   }
@@ -311,7 +308,6 @@ class gaodeMap {
       this.markers[i].setDraggable(true);
     }
   }
-
   /**
    * marker移除拖拽事件
    */
@@ -378,7 +374,6 @@ class gaodeMap {
         dom.remove();
         return html;
       }
-
     }
   }
 
@@ -463,6 +458,23 @@ class gaodeMap {
     }
   }
 
+  workerManView(options) {
+    // const {} =options;
+    const notice = createPop(workerManView, {
+      // 数据
+      // lineData: options.lineData,
+      // lnglatsArr:options.lnglatsArr,
+      // pipeLength:options.pipeLength,
+      // //线是新线还是老线
+      // lineType: options.lineType,
+      // target: options.obj,
+      ...options,
+      //把当前对象当作that传进去
+      gaodeMap: this,
+      // lineOkCallBack: this.lineOkCallBack
+    });
+    notice.show();
+  }
   /**
    * 添加折线
    * @param path
@@ -570,21 +582,16 @@ class gaodeMap {
         infoWindow.setOffset(new AMap.Pixel(X, Y));
         infoWindow.open(map, e.lnglat);
         // 这个是为了盖住vue里的东西
-        polyline.cloneDom = infoWindow.dom.cloneNode(true);
-
-        // console.log(infoWindow.dom.offsetLeft);
-        // console.log(infoWindow.dom);
-        polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
-        polyline.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
-        // 先删除之前的，后增加现在的
-        this.removeCloneDom();
-        document.body.appendChild(polyline.cloneDom);
-        infoWindow.close();
-
-        // polyline.infoWindow=infoWindow;
+        // polyline.cloneDom = infoWindow.dom.cloneNode(true);
+        // polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
+        // polyline.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
+        // // 先删除之前的，后增加现在的
+        // this.removeCloneDom();
+        // document.body.appendChild(polyline.cloneDom);
+        // infoWindow.close();
+        this.addCloneDome(polyline, infoWindow);
+        // infoWindow.close();
         this.showInfoWindow = infoWindow;
-        this.cloneDom = polyline.cloneDom;
-
         // const
       });
       polyline.on("mouseout", e => {
@@ -598,20 +605,47 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  // 把map里的in佛window转化成vue里的dom
+  addCloneDome(target, infoWindow) {
+    target.cloneDom = infoWindow.dom.cloneNode(true);
 
+    target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
+    target.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
+    // 先删除之前的，后增加现在的
+    this.closeInfoWindow();
+
+    document.body.appendChild(target.cloneDom);
+    this.cloneDom = target.cloneDom;
+    this.cloneDom.addEventListener("mousedown", e => {
+      // e.stopPropagation();
+      console.log("this");
+    });
+
+    infoWindow.close();
+  }
+  closeInfoWindow() {
+    this.removeCloneDom();
+    this.showInfoWindow && this.showInfoWindow.close();
+    // 删除浮动到线上的cloneDom
+    this.markerInfoWindow && this.markerInfoWindow.close();
+    this.workerManInfoWindow && this.workerManInfoWindow.close();
+  }
+  // 关闭转化到vue的dom
   removeCloneDom() {
     // 线
     this.cloneDom && document.body.removeChild(this.cloneDom);
     // 设备
-    this.markerCloneDom && document.body.removeChild(this.markerCloneDom);
+    // this.markerCloneDom && document.body.removeChild(this.markerCloneDom);
     // 值班人员
-    this.workerManCloneDom && document.body.removeChild(this.workerManCloneDom);
+    // this.workerManCloneDom && document.body.removeChild(this.workerManCloneDom);
 
     // that.workerManInfoWindow = infoWindow;
     this.cloneDom = null;
-    this.markerCloneDom = null;
-    this.workerManCloneDom = null;
+    // 关闭以前的infowindow
+    // this.markerCloneDom = null;
+    // this.workerManCloneDom = null;
   }
+  // 新建line增加编辑以及右键菜单
 
   // 创建一条新的线
   createNewLine() {
@@ -642,13 +676,7 @@ class gaodeMap {
       this.newLineObj = null;
     }
   }
-  // 新建line增加编辑以及右键菜单
-  closeInfoWindow() {
-    this.showInfoWindow && this.showInfoWindow.close();
-    // 删除浮动到线上的cloneDom
-    this.removeCloneDom();
-    this.markerInfoWindow && this.markerInfoWindow.close();
-  }
+
   // 新line与老line添加点击事件
   newLineAddEvent(obj) {
     obj.polyEditor = new AMap.PolyEditor(map, obj);
@@ -806,6 +834,7 @@ class gaodeMap {
     });
     notice.show();
   }
+
   /**
    * 添加鼠标事件
    */

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

@@ -360,6 +360,7 @@ export default {
       this.gaoMap.closeAddMarker();
       this.gaoMap.removeMarkerDragg();
       this.gaoMap.mapOperateType = "normal";
+      this.leftBarNum=[1,2,3,4,7]
       // map.remove(this.gaodeMap.markerOverlays);
     },
     search() {
@@ -404,6 +405,8 @@ export default {
       this.targetNum = 0;
       map.clearMap();
       this.initMap();
+      this.leftBarNum=[1,2,3,4,7];
+      this.keyWord="";
     },
   },
 

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

@@ -183,7 +183,7 @@ export default {
     initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
-      window.addEventListener("click", this.barClose);
+      window.addEventListener("mousedown", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
       this.getDeviceInfo();