1 停气监管-添加停气区域后 关掉 新增修改对话框时 ，再打开时还有原来的画的图形问题排查，排查后是因为 又调用了一次 mounted 方法造成的。...

1 停气监管-添加停气区域后 关掉 新增修改对话框时 ，再打开时还有原来的画的图形问题排查，排查后是因为 又调用了一次  mounted 方法造成的。 这个原因是因为 原代码 el-dialog 错使用 destroy-on-close ，调整后 使用 v-if  代替。
2 停气监管-添加多区域 功能完成(单击开始绘制，双击或右键停止绘制，单击图形编辑，右键退出编辑，双击图形删除，新增，查询数据回显)

zh-baseversion-web/src/views/supplybalance/stop/components/DetailInfo.vue

@@ -116,13 +116,29 @@
         const path = eval(this.$store.state.user.systemSetting.map_center);
         const gaoMap = new EditorMap("areaInfo", {center:path}, this);
         if(this.detailInfo.fGasStopArea){
-          new AMap.Polygon({
+          if (this.detailInfo.fGasStopArea.includes("#")){
+            let areas = this.detailInfo.fGasStopArea.split("#");
+            for (let i = 0; i < areas.length;i++) { 
+                let areasItem = areas[i]; 
+                if (areasItem != null && areasItem != "") {   
+                    new AMap.Polygon({
+                      map: gaoMap.map,
+                      path: JSON.parse(areasItem),
+                      fillColor:'#00b0ff',
+                      strokeColor:'#80d8ff'
+                    }); 
+                }
+            }
+
+          } else {
+            new AMap.Polygon({
             map: gaoMap.map,
             path: JSON.parse(this.detailInfo.fGasStopArea),
             fillColor:'#00b0ff',
             strokeColor:'#80d8ff'
           });
           gaoMap.setCenter(JSON.parse(this.detailInfo.fGasStopArea)[0]);
+          }
           gaoMap.map.setZoom(12)
         }
       }

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

@@ -147,7 +147,7 @@
     />
 
     <!-- 添加或修改停气监管对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body destroy-on-close :close-on-click-modal="false">
+    <el-dialog :title="title" :visible.sync="open" v-if="open" width="1200px" append-to-body :close-on-click-modal="false">
       <el-form label-position="top" ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="12">
@@ -224,7 +224,7 @@
 
           <el-col :span="12" style="padding-left: 10px">
             <el-form-item label="停气区域" prop="fGasStopArea">
-              <DrawArea class="area-change" v-model="path"/>
+              <DrawArea class="area-change" v-model="path" @update-path="handleUpdatePathFromParent"/>
             </el-form-item>
           </el-col>
         </el-row>
@@ -246,7 +246,9 @@
 
 <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 {
@@ -337,14 +339,36 @@ export default {
   watch:{
     path(newVal,oldVal){
       console.log("index.watch.path = " + newVal);
-      if(newVal.length == 0){
-        this.form.fGasStopArea = "";
-        return
-      }
-      this.form.fGasStopArea = JSON.stringify(newVal);
+      // 如果只允许画一个多边形，则用这个方法接收数据
+      // if(newVal.length == 0){
+      //   this.form.fGasStopArea = "";
+      //   return
+      // }
+      // this.form.fGasStopArea = JSON.stringify(newVal);
+
     }
   },
   methods: {
+    // 需要画多个 多边形时 需要正确使用 emit 接收 drawArea 发回来的数据
+    handleUpdatePathFromParent(data) {
+
+      // 如果需要画多个则，需要这样接数据
+      if(data.length === 0) {
+        this.form.fGasStopArea = "";
+        return
+      }
+
+      this.form.fGasStopArea = "";
+      for(let i = 0;i < data.length;i ++) {
+        let newValItem = data[i];
+        if (newValItem._opts) {
+          this.form.fGasStopArea += JSON.stringify(newValItem._opts.path) + "#";
+        } else {
+          this.form.fGasStopArea += JSON.stringify(newValItem) + "#";
+        }
+        console.log("this.form.fGasStopArea = " + this.form.fGasStopArea);
+      } 
+    },
     /** 查询停气监管列表 */
     getList() {
       this.loading = true;
@@ -420,8 +444,24 @@ export default {
       const fGasStopId = row.fGasStopId || this.ids
       getSup(fGasStopId).then(response => {
         this.form = response.data;
-        if(this.form.fGasStopArea){
-          this.path = JSON.parse(this.form.fGasStopArea);
+        if(this.form.fGasStopArea){ 
+          console.log("this.from.fGasStopArea = " + this.form.fGasStopArea);
+          let areasArr = [];
+          if (this.form.fGasStopArea.includes("#")){
+            let areas = this.form.fGasStopArea.split("#");
+            for (let i = 0; i < areas.length;i++) { 
+              console.log("i = " + i+  "item = " + areas[i]);
+              let areasItem = areas[i]; 
+              if (areasItem != null && areasItem != "") {   
+                areasArr.push(JSON.parse(areasItem))
+              }
+            }
+            this.path = areasArr;
+            console.log("this.path = " + this.path);
+          } else{
+            areasArr.push( this.form.fGasStopArea);
+            this.path = areasArr;
+          }
         }
         this.open = true;
         this.title = "修改停气监管";