地图新增 gengdidi

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

+<template>
+
+  <el-dialog
+    title="新增"
+    :visible.sync="dialogVisible"
+    width="80%"
+    :before-close="handleClose">
+    <el-form ref="editForm" :model="editForm"  label-width="120px" size="mini">
+      <el-form-item label="所属燃气公司" prop="a">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="名称" prop="b">
+        <el-input ></el-input>
+      </el-form-item>
+      <el-form-item label="地址" prop="c">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="联系人" prop="d">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="电话" prop="e">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="型号" prop="f">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="安装日期" prop="g">
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="最后巡检日期" prop="k">
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="备注信息" prop="l">
+        <el-input type="textarea"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: { type: String },
+      //message: { type: String },
+      //duration: { type: Number, default: 2000 }
+    },
+    data () {
+      return {
+       // isShow: false,
+        editForm : {},
+        dialogVisible : false
+      }
+    },
+    methods: {
+      show () {
+        //this.isShow = true;
+        this.dialogVisible = true;
+        /*setTimeout(() => {
+          this.hide()
+        }, this.duration)*/
+      },
+      hide () {
+        this.isShow = false
+        this.remove()
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .notice {
+    background: white;
+    position: fixed;
+    top: 102px;
+    right: 0;
+    left: 0;
+    margin: auto;
+    width: 80%;
+    height: 80%;
+    border: solid 1px;
+  }
+</style>
+

gassafety-web/src/utils/createPop.js

+import Vue from 'vue'
+export default function create (comp, props) {
+  const app = new Vue({
+    render (h) {
+      return h(comp, { props })
+    }
+  }).$mount()
+  // app.$el为该虚拟DOM的真实DOM
+  document.body.appendChild(app.$el)
+  // 销毁
+  const com = app.$children[0]
+  com.remove = function () {
+    document.body.removeChild(app.$el)
+    app.$destroy()
+  }
+  return com
+}
+

gassafety-web/src/utils/gaodeMap.js

-let defaultCenter = "石家庄";
+import createPop from "./createPop";
+import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue"
+let defaultCenter = "石家庄";
 export let map;
 class gaodeMap {
   //构造函数中设置中央点默认值
@@ -98,6 +100,7 @@ class gaodeMap {
 
       marker.on('mouseout', infoClose);
       marker.on('click', newMAp);
+      marker.on('dragend', moveMarker);
     }
     map.setFitView();
 
@@ -118,6 +121,10 @@ class gaodeMap {
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
     }
+
+    function moveMarker(e) {
+      alert(e.lnglat);
+    }
   }
 
   /**
@@ -161,71 +168,43 @@ class gaodeMap {
    * 添加鼠标事件
    */
   addMouseTool(){
-    let mouseTool = new AMap.MouseTool(map);
+    this.mouseTool = new AMap.MouseTool(map);
     //监听draw事件可获取画好的覆盖物
-    let overlays = [];
-    mouseTool.on('draw',function(e){
-      overlays.push(e.obj);
+    this.overlays = [];
+    let that = this;
+    this.mouseTool.on('draw',function(e){
+      e.obj.on("click",function (aa) {
+        console.log(aa.target._position)
+        that.openInfowindow();
+      })
+      that.overlays.push(e.obj);
+      that.mouseTool.close();
     });
+  }
 
-    function draw(type){
-      switch(type){
-        case 'marker':{
-          mouseTool.marker({
-            //同Marker的Option设置
-          });
-          break;
-        }
-        case 'polyline':{
-          mouseTool.polyline({
-            strokeWeight: 9,
-            strokeColor:'#80d8ff'
-            //同Polyline的Option设置
-          });
-          break;
-        }
-        case 'polygon':{
-          mouseTool.polygon({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case 'rectangle':{
-          mouseTool.rectangle({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case 'circle':{
-          mouseTool.circle({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-            //同Circle的Option设置
-          });
-          break;
-        }
-      }
-    }
+  openInfowindow(){
+    const notice = createPop(regulatorBoxOrValveWell, {
+      title: '调压箱'
+    })
+    notice.show()
+  }
 
-    let radios = document.getElementsByName('func');
-    for(let i=0;i<radios.length;i+=1){
-      radios[i].onchange = function(e){
-        draw(e.target.value)
+  draw(type){
+    let that = this;
+    switch(type){
+      case 'marker':{
+        that.mouseTool.marker({
+          draggable: true
+        });
+        break;
       }
-    }
-    draw('marker');
-    document.getElementById('clear').onclick = function(){
-      map.remove(overlays)
-      overlays = [];
-    }
-    document.getElementById('close').onclick = function(){
-      mouseTool.close(true)//关闭，并清除覆盖物
-      for(let i=0;i<radios.length;i+=1){
-        radios[i].checked = false;
+      case 'polyline':{
+        that.mouseTool.polyline({
+          strokeWeight: 9,
+          strokeColor:'#80d8ff'
+          //同Polyline的Option设置
+        });
+        break;
       }
     }
   }
@@ -260,5 +239,6 @@ class gaodeMap {
 
 
 
+
 }
 export default gaodeMap;

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

 <template>
   <div>
     <div style="width: 100vw;height: 100vh" id="container"></div>
-    <div class="input-card" style='width: 24rem;'>
+   <!-- <div class="input-card" style='width: 24rem;'>
       <div class="input-item">
-        <input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
+        <input type="radio" name='func' value='marker'><span class="input-text">画点</span>
         <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
         <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
       </div>
@@ -15,7 +15,19 @@
         <input id="clear" type="button" class="btn" value="清除" />
         <input id="close" type="button" class="btn" value="关闭绘图" />
       </div>
-    </div>
+    </div>-->
+    <el-button type="primary" style="position: absolute;top: 100px;left: 75%" @click="addDevice">新增</el-button>
+    <el-button type="primary" style="position: absolute;top: 100px;left: 82%" @click="editDevice">编辑</el-button>
+    <el-button type="primary" style="position: absolute;top: 100px;left: 90%" @click="deleteDevice">删除</el-button>
+    <el-select  v-model="value" placeholder="请选择..." @change="selectDeviceType" style="position: absolute;top: 150px;left: 75%" v-if="deviceType">
+      <el-option label="管道" value="1"></el-option>
+      <el-option label="调压箱" value="2"></el-option>
+      <el-option label="阀门井" value="3"></el-option>
+      <el-option label="流量计" value="4"></el-option>
+      <el-option label="物联网燃气表" value="5"></el-option>
+      <el-option label="值班人员" value="6"></el-option>
+    </el-select>
+
   </div>
 </template>
 <script>
@@ -24,11 +36,15 @@
   export default {
     data() {
       return {
-        map : null
+        gaoMap : null,
+        deviceType : false,
+        value : "",
+        operateType : ""
       };
     },
     mounted() {
       let gaoMap = new gaodeMap("石家庄");
+      this.gaoMap = gaoMap;
       let lnglats = [
         [114.497949,38.121129],
         [114.595972,38.114511],
@@ -53,7 +69,27 @@
       ]
       gaoMap.addPolyline(path);
       gaoMap.addMouseTool();
-      gaoMap.addMapControl();
+    },
+    methods:{
+      addDevice(){
+        this.deviceType = true;
+        this.operationType = "add";
+      },
+      editDevice(){
+        this.deviceType = true;
+        this.operationType = "edit";
+      },
+      deleteDevice(){
+        this.deviceType = true;
+        this.operationType = "delete";
+      },
+      selectDeviceType(val){
+        if("add" == this.operationType){
+          this.gaoMap.draw("marker")
+        }
+        this.deviceType = false;
+        this.value = "";
+      }
     }
   };
 </script>