1 气量监管-停气区域 多区域功能实现中。

zh-baseversion-web/src/components/GasShutDownDrawArea/index.vue

+<template>
+  <div style="position: relative">
+    <div class="search-wrapper pos">
+      <el-input
+        v-model="searchinput"
+        class="searchinput"
+        placeholder="请输入内容"
+        size="mini"
+        style="width: 150px"
+        ref="input"
+      ></el-input>
+    </div>
+    <div
+      id="drawArea"
+      :style="{height: this.height + 'px'}"
+    ></div>
+  </div>
+
+</template>
+
+<script>
+  import { EditorMap } from "@/utils/mapClass/getPath.js";
+  export default {
+    name: "draw-area",
+    props:{
+      value: {
+        type: Array,
+        default: ()=>[],
+      },
+      height:{
+        type: Number,
+        default: 500
+      }
+    },
+    data(){
+        return{
+          gaoMap: null,
+          mouseTool: null,
+          overlays: null,
+          firstClick: 0,
+          nowMouseTarget: null,
+          polygons: [],
+          currentPolygonId: 0,
+          isClickPolygonFlag: false,
+          opts:{
+            fillColor:'#00b0ff',
+            strokeColor:'#80d8ff'
+          },
+          searchinput: ""
+        }
+    },
+    mounted(){
+      this.initMap();
+      this.$nextTick(() => {
+        const input = this.$refs.input.$refs.input;
+        this.gaoMap.positionSearch(input);
+      });
+    },
+    methods:{
+      //地图初始化
+      initMap(){
+        const path = eval(this.$store.state.user.systemSetting.map_center);
+        this.gaoMap = new EditorMap("drawArea", {center:path}, this);
+        this.initMapEvent();
+        if(this.value.length > 0){
+          this.loadArea();
+        }else{
+          this.initMouseEvent();
+        }
+      },
+      initMapEvent(){
+        let that = this;
+        this.gaoMap.map.on("click", () => {
+          // if(that.nowMouseTarget && !that.isClickPolygonFlag){
+          //   that.$confirm("是否重新绘制区域", { type: "warning" })
+          //     .then(() => {
+          //       that.$emit("input", []);
+          //       that.mouseTool && that.mouseTool.close();
+          //       that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
+          //       that.gaoMap.map.remove(that.nowMouseTarget);
+          //       that.mouseTool && that.mouseTool.polygon(that.opts);
+          //       if(!that.mouseTool){
+          //         that.initMouseEvent();
+          //       }
+          //       that.isClickPolygonFlag = true;
+          //   }).catch(() => {});
+          // }
+
+        });
+      },
+      //初始化鼠标事件
+      initMouseEvent(){ 
+        this.gaoMap.map.plugin(["AMap.MouseTool"], () => {
+          this.mouseTool = new AMap.MouseTool(this.gaoMap.map); 
+          this.mouseTool.polygon(this.opts);
+          
+          this.mouseTool.on('draw',function(e){
+            const polygon = e.obj; 
+            polygon.on('click',function () {  
+              this.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
+                const polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,polygon);
+                polygon.polygonEditor = polygonEditor;
+                polygonEditor.on("removenode", (e) => {
+                  // that.$emit("input", e.target._opts.path);
+                  // that.isClickPolygonFlag = true;
+                  if(polygon._opts.path.length == 0){
+                    setTimeout(() => {
+                      that.mouseTool.polygon(that.opts);
+                    }, 230);
+                  }
+                });
+                polygonEditor.on("adjust",(e) =>{
+                  // that.$emit("input", e.target._opts.path);
+                })
+                polygonEditor.on("addnode",(e) =>{
+                  // that.$emit("input", e.target._opts.path);
+                })
+                polygonEditor.open();
+              }); 
+            });
+            polygon.on("mouseout", (e) => {
+              // that.isClickPolygonFlag = false;
+            })
+            //右键关闭区域编辑
+            polygon.on("rightclick",() => {
+              // that.firstClick = 0;
+              polygon.polygonEditor.close();
+            }) 
+            this.polygons.push({ id: this.currentPolygonId++, polygon }); 
+          })
+        });
+      },
+      //区域回显
+      loadArea(){
+        const polygon = new AMap.Polygon({
+          map:this.gaoMap.map,
+          path: this.value,
+          fillColor:'#00b0ff',
+          strokeColor:'#80d8ff'
+        });
+        this.nowMouseTarget = polygon;
+        this.firstClick = 0;
+        polygon.on("click",(e) =>{
+          this.isClickPolygonFlag = true;
+          this.firstClick++;
+          if(this.firstClick < 2){
+            this.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
+              this.nowMouseTarget.polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,e.target);
+              this.nowMouseTarget.polygonEditor.on("removenode", (e) => {
+                this.isClickPolygonFlag = true;
+                this.$emit("input", e.target._opts.path);
+              });
+              this.nowMouseTarget.polygonEditor.on("adjust",(e) =>{
+                this.$emit("input", e.target._opts.path);
+              })
+              this.nowMouseTarget.polygonEditor.on("addnode",(e) =>{
+                this.$emit("input", e.target._opts.path);
+              })
+             this.nowMouseTarget.polygonEditor.open();
+          })
+          }
+        });
+        polygon.on("mouseout", (e) => {
+          this.isClickPolygonFlag = false;
+        })
+        polygon.on("rightclick",() => {
+          this.firstClick = 0;
+          this.nowMouseTarget.polygonEditor && this.nowMouseTarget.polygonEditor.close();
+        });
+        this.gaoMap.setCenter(this.value[0]);
+        this.gaoMap.map.setZoom(12)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .search-wrapper {
+    left: 30px;
+  }
+  .positionBtn {
+    right: 30px;
+  }
+  .pos {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 20;
+  }
+  #drawArea {
+    width: 100%;
+    border: 1px solid;
+  }
+
+</style>

zh-baseversion-web/src/views/supplybalance/stop/index.vue

@@ -247,6 +247,7 @@
 <script>
 import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop";
 import DrawArea from "@/components/DrawArea";
+// import DrawArea from "@/components/GasShutDownDrawArea"
 import DetailInfo from "./components/DetailInfo";
 export default {
   name: "Sup",