设备管理新增编辑删除 gengdidi

gassafety-web/src/utils/gaodeMap.js

@@ -5,14 +5,17 @@ import flowMeter from "../components/PopWindow/flowMeter.vue"
 import dutyPerson from "../components/PopWindow/dutyPerson.vue"
 let defaultCenter = "石家庄";
 export let map;
-const PIPEPLINE = "1";
-const REGEULATORBOX = "2";
-const VALUEWELL = "3";
-const FLOWMETER = "4";
-const DUTYPERSON = "5";
+export const DEVICE_TYPE = {
+  PIPEPLINE : "1",
+  REGEULATORBOX : "2",
+  VALUEWELL : "3",
+  FLOWMETER : "4",
+  DUTYPERSON : "5"
+}
   class gaodeMap {
   //构造函数中设置中央点默认值
   constructor(center) {
+    this.markers = [];
     this.center = center?center:defaultCenter;
     map = new AMap.Map('container', {
       //mask: addMask(result.districtList[0].boundaries),
@@ -80,9 +83,12 @@ const DUTYPERSON = "5";
 
   /**
    * 添加Market
+   * @param markerType
    * @param lnglats
    */
-  addMarker(lnglats){
+  addMarker(markerType,lnglats){
+    let that = this;
+    that.markerType = markerType;
     let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
     for (let i = 0; i < lnglats.length; i++) {
       let marker = new AMap.Marker({
@@ -95,31 +101,32 @@ const DUTYPERSON = "5";
         // 设置拖拽效果
         raiseOnDrag: true
       });
-      marker.content  = '<h4>我是第' + (i + 1) + '个XXX</h4>';
-      marker.content += '<h6>经度：'+lnglats[i][0]+'</h6>';
-      marker.content += '<h6>纬度：'+lnglats[i][1]+'</h6>';
-      marker.content += '<button class="btn btn-success btn-xs">历史轨迹</button>';
-      marker.content += '<button class="btn btn-warning btn-xs">实时跟踪 </button>';
-      marker.content += '<button class="btn btn-danger btn-xs">设置</button>';
-
+      marker.content = this.getMarketContent("data");
       marker.on('mouseover', infoOpen);
-      //注释后打开地图时默认关闭信息窗体
-      //marker.emit('mouseover', {target: marker});
-
       marker.on('mouseout', infoClose);
-      marker.on('click', newMAp);
-      marker.on('dragend', moveMarker);
-    }
-    map.setFitView();
+      that.deviceType = markerType;
+      let editWindow = that.createInfowindow();
+      marker.on('click', function(e){
+        if("edit" == that.mapOperateType){
+          editWindow.show();
+        }else if("delete" == that.mapOperateType){
+          if(confirm("确认删除")== true){
+            map.remove(marker);
+          }
 
-    //鼠标点击事件,设置地图中心点及放大显示级别
-    function newMAp(e) {
-      //map.setCenter(e.target.getPosition());
-      map.setZoomAndCenter(13, e.target.getPosition());
-      let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
-      infoWindow.setContent(e.target.content);
-      infoWindow.open(map, e.target.getPosition());
+        }else{
+          map.setZoomAndCenter(13, e.target.getPosition());
+          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
+          infoWindow.setContent(e.target.content);
+          infoWindow.open(map, e.target.getPosition());
+        }
+      });
+      marker.on('dragend', function (e) {
+        alert(e.lnglat);
+      });
+      //this.markers.push(marker);
     }
+    map.setFitView();
 
     function infoClose(e) {
       infoWindow.close(map, e.target.getPosition());
@@ -130,8 +137,45 @@ const DUTYPERSON = "5";
       infoWindow.open(map, e.target.getPosition());
     }
 
-    function moveMarker(e) {
-      alert(e.lnglat);
+  }
+
+
+
+/**
+ * 添加marker信息
+ * @param data
+ * @returns {string}
+ */
+  getMarketContent(data){
+    let html = "<div>" +
+        "<table>" +
+          "<tr>" +
+             "<td>所属燃气公司</td>" +
+             "<td>正元</td>" +
+          "</tr>" +
+          "<tr>" +
+          "<td>名称</td>" +
+          "<td>1234</td>" +
+          "</tr>" +
+          "<tr>" +
+          "<td>地址</td>" +
+          "<td>石家庄市新华区</td>" +
+          "</tr>" +
+        "</table>" +
+      "</div>";
+    switch (this.markerType){
+      case DEVICE_TYPE.REGEULATORBOX :{
+        return html;
+      }
+      case DEVICE_TYPE.VALUEWELL :{
+        return html;
+      }
+      case DEVICE_TYPE.FLOWMETER :{
+        return html;
+      }
+      case DEVICE_TYPE.DUTYPERSON :{
+        return html;
+      }
     }
   }
 
@@ -183,7 +227,6 @@ const DUTYPERSON = "5";
     this.mouseTool.on('draw',function(e){
       const device = that.createInfowindow();
       e.obj.on("click",function (aa) {
-        console.log(aa.target._position,"==============");
         let postion = aa.target._position;
         device.editForm.longitude = postion.lng;
         device.editForm.latitude = postion.lat;
@@ -199,25 +242,25 @@ const DUTYPERSON = "5";
    */
   createInfowindow(){
     switch (this.deviceType){
-      case PIPEPLINE :{
+      case DEVICE_TYPE.PIPEPLINE :{
         break;
       }
-      case REGEULATORBOX :{
+      case DEVICE_TYPE.REGEULATORBOX :{
         return createPop(regulatorBox, {
           title: '调压箱'
         });
       }
-      case VALUEWELL :{
+      case DEVICE_TYPE.VALUEWELL :{
         return createPop(valveWell, {
           title: '阀门井'
         });
       }
-      case FLOWMETER :{
+      case DEVICE_TYPE.FLOWMETER :{
         return createPop(flowMeter, {
           title: '流量计'
         });
       }
-      case DUTYPERSON :{
+      case DEVICE_TYPE.DUTYPERSON :{
         return createPop(dutyPerson, {
           title: '值班人员'
         });
@@ -233,34 +276,18 @@ const DUTYPERSON = "5";
   draw(deviceType){
     let that = this;
     that.deviceType = deviceType;
-    if(REGEULATORBOX == deviceType || VALUEWELL == deviceType || FLOWMETER == deviceType || DUTYPERSON == deviceType){
+    if(DEVICE_TYPE.REGEULATORBOX == deviceType || DEVICE_TYPE.VALUEWELL == deviceType || DEVICE_TYPE.FLOWMETER == deviceType || DEVICE_TYPE.DUTYPERSON == deviceType){
       that.mouseTool.marker({
         draggable: true
       });
     }
-    if(PIPEPLINE == deviceType){
+    if(DEVICE_TYPE.PIPEPLINE == deviceType){
       that.mouseTool.polyline({
         strokeWeight: 9,
         strokeColor:'#80d8ff'
         //同Polyline的Option设置
       });
     }
-    /*switch(type){
-      case 'marker':{
-        that.mouseTool.marker({
-          draggable: true
-        });
-        break;
-      }
-      case 'polyline':{
-        that.mouseTool.polyline({
-          strokeWeight: 9,
-          strokeColor:'#80d8ff'
-          //同Polyline的Option设置
-        });
-        break;
-      }
-    }*/
   }
 
   /**

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

@@ -31,7 +31,7 @@
 </template>
 <script>
   import gaodeMap from "utils/gaodeMap.js"
-  import {map} from "utils/gaodeMap.js"
+  import {map, DEVICE_TYPE, mapOperateType} from "utils/gaodeMap.js"
   export default {
     data() {
       return {
@@ -52,7 +52,7 @@
         [114.522668,38.042962],
         [114.383966,38.091548]
       ];
-      gaoMap.addMarker(lnglats)
+      gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX,lnglats)
       let path = [
         [
           [114.436698,38.083306],
@@ -72,20 +72,20 @@
     methods:{
       addDevice(){
         this.deviceType = true;
-        this.operationType = "add";
+        this.gaoMap.mapOperateType = "add";
       },
       editDevice(){
         this.deviceType = false;
-        this.operationType = "edit";
+        this.gaoMap.mapOperateType = "edit";
       },
       deleteDevice(){
         this.deviceType = false;
-        this.operationType = "delete";
+        this.gaoMap.mapOperateType = "delete";
       },
       selectDeviceType(val){
-        if("add" == this.operationType){
+       // if("add" == this.operationType){
           this.gaoMap.draw(val)
-        }
+       // }
         this.deviceType = false;
         this.value = "";
       }