From 409fcd6f448f4526e860dfd9706098087a5efed5 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Sat, 7 May 2022 18:14:37 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=A0=87=E7=BB=98=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/grid/AppGridBlock/components/add.vue | 256 +++---------------
 .../grid/AppGridBlock/components/list.vue     | 244 ++---------------
 .../AppGridBlock/components/mapPlotting.vue   | 173 ++++++++++++
 3 files changed, 234 insertions(+), 439 deletions(-)
 create mode 100644 project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue

diff --git a/project/sass/apps/grid/AppGridBlock/components/add.vue b/project/sass/apps/grid/AppGridBlock/components/add.vue
index 6bddb6cb..dc768f6b 100644
--- a/project/sass/apps/grid/AppGridBlock/components/add.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/add.vue
@@ -50,7 +50,7 @@
                 <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
               </el-form-item>
               <el-form-item label="网格范围" prop="enclosure">
-                <el-button size="small" @click="showMap = true">地图标绘</el-button>
+                <el-button size="small" @click="handlePlotting">地图标绘</el-button>
               </el-form-item>
             </template>
           </ai-card>
@@ -65,56 +65,19 @@
         </el-button>
       </template>
     </ai-detail>
-    <ai-dialog
-        title="网格范围"
-        :visible.sync="showMap"
-        :customFooter="true"
-        :destroyOnClose="true"
-        @opened="beforeSelectMap"
-        border
-        width="850px"
-    >
-      <div class="map">
-        <div class="tipinput">
-          <el-input
-              v-model="searchAddress"
-              @change="addressChange"
-              clearable
-              placeholder="请输入关键字"
-              id="tipinput"
-              size="medium"
-              style="width: 200px"
-          />
-        </div>
-        <div id="panel"/>
-        <div class="container" id="container"></div>
-        <el-button-group style="margin-top: 8px" v-if="forms.plottingStatus==1">
-          <el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button>
-          <el-button size="mini" @click="polyEditor.close()">结束编辑</el-button>
-        </el-button-group>
-        <el-button-group
-            style="margin-top: 8px"
-            v-if="forms.plottingStatus == 0"
-        >
-          <el-button size="mini" @click="draw('polygon')">开始绘制多边形</el-button>
-          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
-          <el-button size="mini" @click="clear()">清除绘制</el-button>
-        </el-button-group>
-      </div>
-      <div class="dialog-footer" slot="footer">
-        <el-button size="medium" @click="showMap = false">取消</el-button>
-        <el-button type="primary" size="medium" @click="surePotting()">确认</el-button>
-      </div>
+    <ai-dialog class="fullscreenMap" title="网格范围" :visible.sync="showMap" @onConfirm="surePotting" fullscreen>
+      <map-plotting v-model="path"/>
     </ai-dialog>
   </div>
 </template>
 
 <script>
-import AMapLoader from "@amap/amap-jsapi-loader";
 import {mapState} from "vuex";
+import MapPlotting from "./mapPlotting";
 
 export default {
   name: "addBlock",
+  components: {MapPlotting},
   props: {
     instance: Function,
     dict: Object,
@@ -127,16 +90,8 @@ export default {
         girdMemberList: []
       },
       showMap: false,
-      map: "",
-      mouseTool: "",
-      searchAddress: "",
-      placeSearch: "",
-      overlays: [],
       options: [],
       path: [],
-      location: {},
-      polyEditor: "",
-      title: "添加网格区块",
       parentGirdInfo: {},
     };
   },
@@ -177,7 +132,6 @@ export default {
     }
   },
   created() {
-    this.getCorpLocation()
     if (this.isEdit) {
       this.searchDetail();
     } else {
@@ -206,145 +160,8 @@ export default {
         }
       });
     },
-    beforeSelectMap() {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: [], // 需要加载的 AMapUI ui插件
-        },
-      })
-      .then((AMap) => {
-        this.map = new AMap.Map("container", {
-          resizeEnable: true,
-        });
-        if (this.forms.plottingStatus == 1) {
-          let path = [];
-          this.forms.points.map((e, index) => {
-            path[index] = [e.lng, e.lat];
-          });
-          let polygon = new AMap.Polygon({
-            path: path,
-            strokeColor: "#FF33FF",
-            strokeWeight: 6,
-            strokeOpacity: 0.2,
-            fillOpacity: 0.4,
-            fillColor: "#1791fc",
-            zIndex: 50,
-            bubble: true,
-          });
-          this.map.add([polygon]);
-          this.map.setFitView();
-          this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
-        } else {
-          this.mouseTool = new AMap.MouseTool(this.map);
-          // this.map.add(new AMap.Marker({
-          //     position:this.map.getCenter()
-          // }));
-          this.placeSearch = new AMap.PlaceSearch({
-            pageSize: 3, // 单页显示结果条数
-            pageIndex: 1, // 页码
-            city: "", // 兴趣点城市
-            citylimit: false, //是否强制限制在设置的城市内搜索
-            map: this.map, // 展现结果的地图实例
-            panel: "panel", // 结果列表将在此容器中进行展示。
-            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-          });
-          // this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
-          this.eventOn();
-        }
-      })
-    },
-    getCorpLocation() {
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
-        if (res?.data) {
-          this.location = res.data
-        }
-      })
-    },
-    //地图事件绑定
-    eventOn() {
-      this.path = [];
-      this.overlays = [];
-      this.map.on("mousemove", null, this);
-      this.mouseTool.on("draw", ({obj}) => {
-        obj.getPath().map((e) => {
-          this.path.push({lat: e.getLat(), lng: e.getLng()});
-        });
-        this.overlays.push(obj);
-      })
-    },
-    //map搜索
-    addressChange(val) {
-      this.placeSearch.search(val);
-    },
-    close() {
-      this.mouseTool.close(true);
-    },
-    clear() {
-      this.map.remove(this.overlays);
-      this.overlays = [];
-      this.path = [];
-    },
-    draw(type) {
-      switch (type) {
-        case "marker": {
-          this.mouseTool.marker({
-            //同Marker的Option设置
-          });
-          break;
-        }
-        case "polyline": {
-          this.mouseTool.polyline({
-            strokeColor: "#80d8ff",
-            //同Polyline的Option设置
-          });
-          break;
-        }
-        case "polygon": {
-          this.mouseTool.polygon({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            borderWeight: 2,
-            strokeWeight: 4,
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "rectangle": {
-          this.mouseTool.rectangle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "circle": {
-          this.mouseTool.circle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Circle的Option设置
-          });
-          break;
-        }
-      }
-    },
     surePotting() {
-      this.forms.points = [];
-      // this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
-      if (this.forms.plottingStatus == 1) {
-        this.polyEditor
-        .getTarget()
-        .getPath()
-        .map((e) => {
-          this.forms.points.push({lng: e.lng, lat: e.lat});
-        });
-      } else {
-        this.forms.points = [...this.path];
-      }
+      this.forms.points = JSON.parse(JSON.stringify(this.path));
       this.showMap = false;
     },
     save() {
@@ -360,7 +177,7 @@ export default {
                     wxUserId: v.wxOpenUserId || v.wxUserId
                   }
                 }) : [],
-                girdMemberList:  this.forms.girdMemberList.length ? this.forms.girdMemberList.map(v => {
+                girdMemberList: this.forms.girdMemberList.length ? this.forms.girdMemberList.map(v => {
                   return {
                     wxUserId: v.wxOpenUserId || v.wxUserId
                   }
@@ -395,6 +212,10 @@ export default {
         }
       });
     },
+    handlePlotting() {
+      if (this.forms.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.forms.points))
+      this.showMap = true
+    }
   },
 };
 </script>
@@ -412,40 +233,31 @@ export default {
     display: none !important;
   }
 
+  ::v-deep.fullscreenMap {
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
+
+      .el-dialog__body {
+        padding: 0;
+        flex: 1;
+        min-height: 0;
+
+        .ai-dialog__content {
+          max-height: unset !important;
+          padding-bottom: 0;
+          height: 100%;
+
+          .ai-dialog__content--wrapper {
+            padding-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
   .footer-btn {
     width: 92px;
   }
-
-  .map {
-    width: 780px;
-    position: relative;
-    overflow: hidden;
-
-    .container {
-      width: 760px;
-      height: 420px;
-      border-radius: 2px;
-      border: 1px solid #d0d4dc;
-    }
-
-    #panel {
-      position: absolute;
-      height: 400px;
-      right: 30px;
-      top: 20px;
-      width: 280px;
-      overflow: hidden;
-      z-index: 10000;
-    }
-
-    .tipinput {
-      position: absolute;
-      width: 200px;
-      height: 38px;
-      left: 20px;
-      top: 20px;
-      z-index: 10000;
-    }
-  }
 }
 </style>
diff --git a/project/sass/apps/grid/AppGridBlock/components/list.vue b/project/sass/apps/grid/AppGridBlock/components/list.vue
index 4a5b4cc4..f34c728a 100644
--- a/project/sass/apps/grid/AppGridBlock/components/list.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/list.vue
@@ -129,56 +129,17 @@
       </template>
     </ai-list>
     <ai-dialog
-        title="网格范围"
+        title="网格范围" class="fullscreenMap"
         :visible.sync="showMap"
         :customFooter="true"
-        :destroyOnClose="true"
-        border
+        border fullscreen
         width="850px"
     >
-      <div class="map">
-        <div class="tipinput">
-          <el-input
-              v-if="editRow.plottingStatus == 0"
-              v-model="searchAddress"
-              @change="addressChange"
-              clearable
-              placeholder="请输入关键字"
-              id="tipinput"
-              size="medium"
-              style="width: 200px"
-          ></el-input>
-        </div>
-        <div id="panel" v-if="editRow.plottingStatus == 0"></div>
-        <div class="container" id="container"></div>
-        <el-button-group
-            style="margin-top: 8px"
-            v-if="editRow.plottingStatus == 1"
-        >
-          <el-button type="primary" size="mini" @click="beginPoltting()"
-          >开始编辑
-          </el-button
-          >
-          <el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
-        </el-button-group>
-        <el-button-group
-            style="margin-top: 8px"
-            v-if="editRow.plottingStatus == 0"
-        >
-          <el-button size="mini" @click="draw('polygon')"
-          >开始绘制多边形
-          </el-button
-          >
-          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
-          <el-button size="mini" @click="clear()">清除绘制</el-button>
-        </el-button-group>
-      </div>
+      <map-plotting v-model="path"/>
       <div class="dialog-footer" slot="footer">
-        <el-button size="medium" @click="showMap = false">取消</el-button>
-        <el-button type="primary" size="medium" @click="confirm()"
-        >确认
-        </el-button
-        >
+        <el-button size="medium" @click="showMap=false">取消</el-button>
+        <el-button type="primary" size="medium" @click="confirm()">确认
+        </el-button>
       </div>
     </ai-dialog>
     <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
@@ -200,9 +161,11 @@
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+import MapPlotting from "./mapPlotting";
 
 export default {
   name: "List",
+  components: {MapPlotting},
   label: "网格区块",
   props: {
     instance: Function,
@@ -244,7 +207,6 @@ export default {
       isEdit: false,
       searchId: "",
       fileList: [],
-      location: {},
       dialog: false,
       gridInfo: {},
       gridMemberColConfigs: [
@@ -257,7 +219,6 @@ export default {
   created() {
     this.getTreeList();
     this.getList();
-    this.getCorpLocation()
     this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus", "girdMemberType");
   },
   computed: {
@@ -273,13 +234,6 @@ export default {
     },
   },
   methods: {
-    getCorpLocation() {
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
-        if (res.code == 0) {
-          this.location = res.data
-        }
-      })
-    },
     handleNodeClick(val) {
       this.info = {...val};
       this.searchId = val.id;
@@ -392,140 +346,18 @@ export default {
     },
     poltting(row) {
       this.showMap = true;
+      if (this.editRow.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.editRow.points))
       this.editRow = {...row};
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: [], // 需要加载的 AMapUI ui插件
-        },
-      })
-      .then((AMap) => {
-        this.map = new AMap.Map("container", {
-          resizeEnable: true,
-          zoom: 14,
-        });
-        if (this.editRow.plottingStatus == 1) {
-          let path = [];
-          this.editRow.points.map((e, index) => {
-            path[index] = [e.lng, e.lat];
-          });
-          let polygon = new AMap.Polygon({
-            path: path,
-            strokeColor: "#FF33FF",
-            strokeWeight: 6,
-            strokeOpacity: 0.2,
-            fillOpacity: 0.4,
-            fillColor: "#1791fc",
-            zIndex: 50,
-            bubble: true,
-          });
-          this.map.add([polygon]);
-          this.map.setFitView();
-          this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
-        } else {
-          this.mouseTool = new AMap.MouseTool(this.map);
-          this.placeSearch = new AMap.PlaceSearch({
-            pageSize: 3, // 单页显示结果条数
-            pageIndex: 1, // 页码
-            city: "", // 兴趣点城市
-            citylimit: false, //是否强制限制在设置的城市内搜索
-            map: this.map, // 展现结果的地图实例
-            panel: "panel", // 结果列表将在此容器中进行展示。
-            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-          });
-          // this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
-          this.eventOn();
-        }
-      })
-      .catch((e) => {
-        console.log(e);
-      });
     },
     showEdit(id) {
       this.$router.push({hash: "#add", query: {id}})
     },
-    draw(type) {
-      switch (type) {
-        case "marker": {
-          this.mouseTool.marker({
-            //同Marker的Option设置
-          });
-          break;
-        }
-        case "polyline": {
-          this.mouseTool.polyline({
-            strokeColor: "#80d8ff",
-            //同Polyline的Option设置
-          });
-          break;
-        }
-        case "polygon": {
-          this.mouseTool.polygon({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            borderWeight: 2,
-            strokeWeight: 4,
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "rectangle": {
-          this.mouseTool.rectangle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Polygon的Option设置
-          });
-          break;
-        }
-        case "circle": {
-          this.mouseTool.circle({
-            fillColor: "#00b0ff",
-            strokeColor: "#80d8ff",
-            //同Circle的Option设置
-          });
-          break;
-        }
-      }
-    },
     //map搜索
-    addressChange(val) {
-      this.placeSearch.search(val);
-    },
-    close() {
-      this.mouseTool.close(true);
-    },
-    clear() {
-      this.map.remove(this.overlays);
-      this.overlays = [];
-      this.path = [];
-    },
-    beginPoltting() {
-      this.polyEditor.open();
-    },
-    finishPoltting() {
-      this.polyEditor.close();
-    },
     confirm() {
-      let path = [];
-      if (this.editRow.plottingStatus == 1) {
-        this.polyEditor
-        .getTarget()
-        .getPath()
-        .map((e) => {
-          path.push({lng: e.lng, lat: e.lat});
-        });
-      } else {
-        path = [...this.path];
-      }
-      delete this.editRow.points;
+      this.editRow.points = JSON.parse(JSON.stringify(this.path));
       let {girdMemberNames} = this.editRow
       this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
         ...this.editRow,
-        points: path,
         girdMemberNames: girdMemberNames?.toString()
       }).then((res) => {
         if (res.code == 0) {
@@ -534,18 +366,6 @@ export default {
         }
       });
     },
-    eventOn() {
-      this.path = [];
-      this.overlays = [];
-      this.map.on("mousemove", this.showInfoMove, this);
-      this.mouseTool.on("draw", ({type, obj}) => {
-        obj.getPath().map((e) => {
-          console.log(e)
-          this.path.push({lat: e.getLat(), lng: e.getLng()});
-        });
-        this.overlays.push(obj);
-      });
-    },
     resetSearch() {
       Object.keys(this.searchObj).map((e) => {
         this.searchObj[e] = "";
@@ -638,38 +458,28 @@ export default {
     padding: 8px 0;
   }
 
-  .map {
-    width: 780px;
-    position: relative;
-    overflow: hidden;
+  ::v-deep.fullscreenMap {
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
 
-    .container {
-      width: 760px;
-      height: 420px;
-      border-radius: 2px;
-      border: 1px solid #d0d4dc;
-    }
+      .el-dialog__body {
+        padding: 0;
+        flex: 1;
+        min-height: 0;
 
-    #panel {
-      position: absolute;
-      height: 400px;
-      right: 30px;
-      top: 20px;
-      width: 280px;
-      overflow: hidden;
-      z-index: 10000;
-    }
+        .ai-dialog__content {
+          max-height: unset !important;
+          padding-bottom: 0;
+          height: 100%;
 
-    .tipinput {
-      position: absolute;
-      width: 200px;
-      height: 38px;
-      left: 20px;
-      top: 20px;
-      z-index: 10000;
+          .ai-dialog__content--wrapper {
+            padding-right: 0 !important;
+          }
+        }
+      }
     }
   }
-
   ::v-deep .treePanel {
     display: flex;
     flex-direction: column;
diff --git a/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue b/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
new file mode 100644
index 00000000..4e26acaa
--- /dev/null
+++ b/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
@@ -0,0 +1,173 @@
+<template>
+  <section class="mapPlotting">
+    <div class="tipinput">
+      <el-input
+          v-model="searchAddress"
+          @change="addressChange"
+          clearable
+          placeholder="请输入关键字"
+          id="tipinput"
+          size="medium"/>
+    </div>
+    <div id="panel"/>
+    <div class="container fill" id="container"/>
+    <div class="operationBtns">
+      <el-alert type="success" title="操作说明:" :closable="false">
+        <li>1.双击覆盖物即可编辑</li>
+        <li>2.编辑状态,对点双击可删除该点</li>
+        <li>3.绘制状态,右键结束绘制</li>
+        <li>4.结束编辑才能保存绘制的覆盖物信息</li>
+      </el-alert>
+      <el-button-group>
+        <el-button type="primary" @click="handleAdd">新建</el-button>
+        <el-button @click="polyEditor.close()">结束编辑</el-button>
+        <el-button @click="clear()">清除绘制</el-button>
+      </el-button-group>
+    </div>
+  </section>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "mapPlotting",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Array
+  },
+  data() {
+    return {
+      map: null,
+      polyEditor: null,
+      placeSearch: null,
+      searchAddress: "",
+      overlays: [],
+      points: []
+    }
+  },
+  watch: {
+    points: {
+      deep: true, handler(v) {
+        this.$emit('change', v.flat())
+      }
+    }
+  },
+  methods: {
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.points = []
+    },
+    handleAdd() {
+      let {polyEditor} = this
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open();
+    }
+  },
+  mounted() {
+    setTimeout(() => AMapLoader.load({
+      key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      AMapUI: {
+        // 是否加载 AMapUI，缺省不加载
+        version: "1.1", // AMapUI 缺省 1.1
+        plugins: [], // 需要加载的 AMapUI ui插件
+      },
+    }).then((AMap) => {
+      this.map = new AMap.Map("container", {
+        resizeEnable: true,
+      });
+      this.placeSearch = new AMap.PlaceSearch({
+        pageSize: 5, // 单页显示结果条数
+        pageIndex: 1, // 页码
+        city: "", // 兴趣点城市
+        citylimit: false, //是否强制限制在设置的城市内搜索
+        map: this.map, // 展现结果的地图实例
+        panel: "panel", // 结果列表将在此容器中进行展示。
+        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+      });
+      this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
+        this.polyEditor.addAdsorbPolygons(target)
+        target.on("dblclick", () => {
+          this.polyEditor.setTarget(target);
+          this.polyEditor.open()
+        })
+      })
+      this.polyEditor.on('end', ({target}) => {
+        this.overlays.push(target);
+        this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
+      });
+      if (this.value?.length > 0) {
+        let path = this.value.map(e => [e.lng, e.lat]);
+        let polygon = new AMap.Polygon({
+          path,
+          strokeColor: "#FF33FF",
+          strokeWeight: 6,
+          strokeOpacity: 0.2,
+          fillOpacity: 0.4,
+          fillColor: "#1791fc",
+        })
+        this.map.add([polygon]);
+        this.map.setFitView();
+        this.polyEditor.addAdsorbPolygons(polygon)
+        polygon.on('dblclick', () => {
+          this.polyEditor.setTarget(polygon);
+          this.polyEditor.open()
+        });
+        this.polyEditor.setTarget(polygon);
+        this.polyEditor.open()
+      }
+    }), 500)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapPlotting {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .container {
+    width: inherit;
+  }
+
+  #panel {
+    position: absolute;
+    height: 400px;
+    right: 30px;
+    top: 20px;
+    width: 280px;
+    overflow: hidden;
+    z-index: 10000;
+  }
+
+  .tipinput {
+    position: absolute;
+    width: 300px;
+    height: 38px;
+    left: 20px;
+    top: 20px;
+    z-index: 10000;
+  }
+
+  .operationBtns {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    z-index: 10000;
+  }
+}
+</style>

From 70557adefde30ed53ef7f7b9aa723d33f38bcbc7 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Sat, 7 May 2022 19:31:07 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=87=E7=BB=98?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/grid/AppGridBlock/components/add.vue |  48 +--
 .../grid/AppGridBlock/components/list.vue     |  52 +---
 .../AppGridBlock/components/mapPlotting.vue   | 280 +++++++++++-------
 3 files changed, 186 insertions(+), 194 deletions(-)

diff --git a/project/sass/apps/grid/AppGridBlock/components/add.vue b/project/sass/apps/grid/AppGridBlock/components/add.vue
index 6edd2760..0f56b13d 100644
--- a/project/sass/apps/grid/AppGridBlock/components/add.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/add.vue
@@ -50,7 +50,9 @@
                 <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
               </el-form-item>
               <el-form-item label="网格范围" prop="enclosure">
-                <el-button size="small" @click="handlePlotting">地图标绘</el-button>
+                <map-plotting v-model="forms.points">
+                  <el-button size="small">地图标绘</el-button>
+                </map-plotting>
               </el-form-item>
             </template>
           </ai-card>
@@ -65,9 +67,6 @@
         </el-button>
       </template>
     </ai-detail>
-    <ai-dialog class="fullscreenMap" title="网格范围" :visible.sync="showMap" @onConfirm="surePotting" fullscreen>
-      <map-plotting v-model="path"/>
-    </ai-dialog>
   </div>
 </template>
 
@@ -89,9 +88,7 @@ export default {
         girdMemberManageList: [],
         girdMemberList: []
       },
-      showMap: false,
       options: [],
-      path: [],
       parentGirdInfo: {},
     };
   },
@@ -160,10 +157,6 @@ export default {
         }
       });
     },
-    surePotting() {
-      this.forms.points = JSON.parse(JSON.stringify(this.path));
-      this.showMap = false;
-    },
     save() {
       this.$refs["rules"].validate((valid) => {
         if (valid) {
@@ -222,10 +215,6 @@ export default {
         }
       });
     },
-    handlePlotting() {
-      if (this.forms.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.forms.points))
-      this.showMap = true
-    }
   },
 };
 </script>
@@ -235,37 +224,6 @@ export default {
   width: 100%;
   height: 100%;
 
-  ::v-deep .amap-copyright {
-    display: none !important;
-  }
-
-  ::v-deep .amap-logo {
-    display: none !important;
-  }
-
-  ::v-deep.fullscreenMap {
-    .el-dialog {
-      display: flex;
-      flex-direction: column;
-
-      .el-dialog__body {
-        padding: 0;
-        flex: 1;
-        min-height: 0;
-
-        .ai-dialog__content {
-          max-height: unset !important;
-          padding-bottom: 0;
-          height: 100%;
-
-          .ai-dialog__content--wrapper {
-            padding-right: 0 !important;
-          }
-        }
-      }
-    }
-  }
-
   .footer-btn {
     width: 92px;
   }
diff --git a/project/sass/apps/grid/AppGridBlock/components/list.vue b/project/sass/apps/grid/AppGridBlock/components/list.vue
index f34c728a..b3b9b1ae 100644
--- a/project/sass/apps/grid/AppGridBlock/components/list.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/list.vue
@@ -7,14 +7,14 @@
       <template slot="left">
         <ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
           <el-tree
-            :data="treeObj.treeList"
-            :props="treeObj.defaultProps"
-            @node-click="handleNodeClick"
-            node-key="id"
-            ref="tree"
-            :filter-node-method="filterNode"
-            default-expand-all
-            highlight-current>
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              @node-click="handleNodeClick"
+              node-key="id"
+              ref="tree"
+              :filter-node-method="filterNode"
+              default-expand-all
+              highlight-current>
             <template slot-scope="{node,data}">
               <div v-text="node.label"/>
             </template>
@@ -120,7 +120,7 @@
             <template slot-scope="{ row }">
               <div class="table-options">
                 <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
-                <el-button type="text" @click="poltting(row)">标绘</el-button>
+                <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
                 <el-button type="text" @click="deleteById(row.id)">删除</el-button>
               </div>
             </template>
@@ -128,20 +128,6 @@
         </ai-table>
       </template>
     </ai-list>
-    <ai-dialog
-        title="网格范围" class="fullscreenMap"
-        :visible.sync="showMap"
-        :customFooter="true"
-        border fullscreen
-        width="850px"
-    >
-      <map-plotting v-model="path"/>
-      <div class="dialog-footer" slot="footer">
-        <el-button size="medium" @click="showMap=false">取消</el-button>
-        <el-button type="primary" size="medium" @click="confirm()">确认
-        </el-button>
-      </div>
-    </ai-dialog>
     <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
                width="700px">
       <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
@@ -344,25 +330,15 @@ export default {
         this.getTreeList();
       });
     },
-    poltting(row) {
-      this.showMap = true;
-      if (this.editRow.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.editRow.points))
-      this.editRow = {...row};
-    },
     showEdit(id) {
       this.$router.push({hash: "#add", query: {id}})
     },
     //map搜索
-    confirm() {
-      this.editRow.points = JSON.parse(JSON.stringify(this.path));
-      let {girdMemberNames} = this.editRow
-      this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
-        ...this.editRow,
-        girdMemberNames: girdMemberNames?.toString()
-      }).then((res) => {
+    confirm(row, points) {
+      this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
         if (res.code == 0) {
+          this.$message.success("提交成功!")
           this.getList();
-          this.showMap = false;
         }
       });
     },
@@ -425,7 +401,8 @@ export default {
     }
 
     .is-current > .el-tree-node__content {
-      color: #fff!important;
+      color: #fff !important;
+
       &:hover {
         background: #2266FF;
         color: #fff;
@@ -480,6 +457,7 @@ export default {
       }
     }
   }
+
   ::v-deep .treePanel {
     display: flex;
     flex-direction: column;
diff --git a/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue b/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
index 4e26acaa..2b7e57fb 100644
--- a/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
@@ -1,34 +1,49 @@
 <template>
   <section class="mapPlotting">
-    <div class="tipinput">
-      <el-input
-          v-model="searchAddress"
-          @change="addressChange"
-          clearable
-          placeholder="请输入关键字"
-          id="tipinput"
-          size="medium"/>
-    </div>
-    <div id="panel"/>
-    <div class="container fill" id="container"/>
-    <div class="operationBtns">
-      <el-alert type="success" title="操作说明:" :closable="false">
-        <li>1.双击覆盖物即可编辑</li>
-        <li>2.编辑状态,对点双击可删除该点</li>
-        <li>3.绘制状态,右键结束绘制</li>
-        <li>4.结束编辑才能保存绘制的覆盖物信息</li>
-      </el-alert>
-      <el-button-group>
-        <el-button type="primary" @click="handleAdd">新建</el-button>
-        <el-button @click="polyEditor.close()">结束编辑</el-button>
-        <el-button @click="clear()">清除绘制</el-button>
-      </el-button-group>
+    <div class="clicker" @click="dialog=true,$emit('open')">
+      <slot v-if="$slots.default"/>
+      <el-button v-else type="text">标绘</el-button>
     </div>
+    <ai-dialog :title="title" class="fullscreenMap"
+               :visible.sync="dialog"
+               :destroyOnClose="true"
+               @close="points=[]"
+               border fullscreen
+               @open="initMap" :modal="false"
+               @onConfirm="$emit('change',points.flat()),dialog=false">
+      <div class="mapPanel">
+        <div class="tipinput">
+          <el-input
+              v-model="searchAddress"
+              @change="addressChange"
+              clearable
+              placeholder="请输入关键字"
+              id="tipinput"
+              size="medium"/>
+        </div>
+        <div id="panel"/>
+        <div class="container fill" id="container"/>
+        <div class="operationBtns" v-if="map">
+          <el-alert type="success" title="操作说明:" :closable="false">
+            <li>1.双击覆盖物即可编辑</li>
+            <li>2.编辑状态,对点双击可删除该点</li>
+            <li>3.绘制状态,右键结束绘制</li>
+            <li>4.结束编辑才能保存绘制的覆盖物信息</li>
+          </el-alert>
+          <el-button-group>
+            <el-button type="primary" @click="handleAdd">新建</el-button>
+            <el-button @click="polyEditor.close()">结束编辑</el-button>
+            <el-button @click="clear()">清除绘制</el-button>
+          </el-button-group>
+        </div>
+      </div>
+    </ai-dialog>
   </section>
 </template>
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+import {mapState} from "vuex";
 
 export default {
   name: "mapPlotting",
@@ -37,8 +52,12 @@ export default {
     event: "change"
   },
   props: {
+    title: {default: "地图标绘"},
     value: Array
   },
+  computed: {
+    ...mapState(['user']),
+  },
   data() {
     return {
       map: null,
@@ -46,14 +65,8 @@ export default {
       placeSearch: null,
       searchAddress: "",
       overlays: [],
-      points: []
-    }
-  },
-  watch: {
-    points: {
-      deep: true, handler(v) {
-        this.$emit('change', v.flat())
-      }
+      points: [],
+      dialog: false
     }
   },
   methods: {
@@ -70,104 +83,147 @@ export default {
       polyEditor.close();
       polyEditor.setTarget();
       polyEditor.open();
-    }
-  },
-  mounted() {
-    setTimeout(() => AMapLoader.load({
-      key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      AMapUI: {
-        // 是否加载 AMapUI，缺省不加载
-        version: "1.1", // AMapUI 缺省 1.1
-        plugins: [], // 需要加载的 AMapUI ui插件
-      },
-    }).then((AMap) => {
-      this.map = new AMap.Map("container", {
-        resizeEnable: true,
-      });
-      this.placeSearch = new AMap.PlaceSearch({
-        pageSize: 5, // 单页显示结果条数
-        pageIndex: 1, // 页码
-        city: "", // 兴趣点城市
-        citylimit: false, //是否强制限制在设置的城市内搜索
-        map: this.map, // 展现结果的地图实例
-        panel: "panel", // 结果列表将在此容器中进行展示。
-        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-      });
-      this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
-        this.polyEditor.addAdsorbPolygons(target)
-        target.on("dblclick", () => {
-          this.polyEditor.setTarget(target);
-          this.polyEditor.open()
+    },
+    initMap() {
+      setTimeout(() => AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          // 是否加载 AMapUI，缺省不加载
+          version: "1.1", // AMapUI 缺省 1.1
+          plugins: [], // 需要加载的 AMapUI ui插件
+        },
+      }).then((AMap) => {
+        this.map = new AMap.Map("container", {
+          resizeEnable: true,
+        });
+        this.placeSearch = new AMap.PlaceSearch({
+          pageSize: 5, // 单页显示结果条数
+          pageIndex: 1, // 页码
+          city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
+          citylimit: true, //是否强制限制在设置的城市内搜索
+          map: this.map, // 展现结果的地图实例
+          panel: "panel", // 结果列表将在此容器中进行展示。
+          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        });
+        this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
+          this.polyEditor.addAdsorbPolygons(target)
+          target.on("dblclick", () => {
+            this.polyEditor.setTarget(target);
+            this.polyEditor.open()
+          })
         })
-      })
-      this.polyEditor.on('end', ({target}) => {
-        this.overlays.push(target);
-        this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
-      });
-      if (this.value?.length > 0) {
-        let path = this.value.map(e => [e.lng, e.lat]);
-        let polygon = new AMap.Polygon({
-          path,
-          strokeColor: "#FF33FF",
-          strokeWeight: 6,
-          strokeOpacity: 0.2,
-          fillOpacity: 0.4,
-          fillColor: "#1791fc",
-        })
-        this.map.add([polygon]);
-        this.map.setFitView();
-        this.polyEditor.addAdsorbPolygons(polygon)
-        polygon.on('dblclick', () => {
+        this.polyEditor.on('end', ({target}) => {
+          this.overlays.push(target);
+          this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
+        });
+        if (this.value?.length > 0) {
+          let path = this.value.map(e => [e.lng, e.lat]);
+          let polygon = new AMap.Polygon({
+            path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            fillColor: "#1791fc",
+          })
+          this.map.add([polygon]);
+          this.map.setFitView();
+          this.polyEditor.addAdsorbPolygons(polygon)
+          polygon.on('dblclick', () => {
+            this.polyEditor.setTarget(polygon);
+            this.polyEditor.open()
+          });
           this.polyEditor.setTarget(polygon);
           this.polyEditor.open()
-        });
-        this.polyEditor.setTarget(polygon);
-        this.polyEditor.open()
-      }
-    }), 500)
+        } else {
+          this.map.setCity(this.user.info.areaId?.substring(0, 6))
+          this.map.setZoom(14, false, 600)
+        }
+      }), 500)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .mapPlotting {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
+  display: inline-block;
+  text-align: left;
 
-  .container {
-    width: inherit;
+  .clicker {
+    display: inline-block;
   }
 
-  #panel {
-    position: absolute;
-    height: 400px;
-    right: 30px;
-    top: 20px;
-    width: 280px;
+  .mapPanel {
+    width: 100%;
+    height: 100%;
+    position: relative;
     overflow: hidden;
-    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+
+    .container {
+      width: inherit;
+    }
+
+    #panel {
+      position: absolute;
+      height: 400px;
+      right: 30px;
+      top: 20px;
+      width: 280px;
+      overflow: hidden;
+      z-index: 10000;
+    }
+
+    .tipinput {
+      position: absolute;
+      width: 300px;
+      height: 38px;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+    }
+
+    .operationBtns {
+      position: absolute;
+      left: 20px;
+      bottom: 20px;
+      z-index: 10000;
+    }
   }
 
-  .tipinput {
-    position: absolute;
-    width: 300px;
-    height: 38px;
-    left: 20px;
-    top: 20px;
-    z-index: 10000;
+  ::v-deep.fullscreenMap {
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
+
+      .el-dialog__body {
+        padding: 0;
+        flex: 1;
+        min-height: 0;
+
+        .ai-dialog__content {
+          max-height: unset !important;
+          padding-bottom: 0;
+          height: 100%;
+
+          .ai-dialog__content--wrapper {
+            padding-right: 0 !important;
+          }
+        }
+      }
+    }
   }
 
-  .operationBtns {
-    position: absolute;
-    left: 20px;
-    bottom: 20px;
-    z-index: 10000;
+  ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-logo {
+    display: none !important;
   }
 }
 </style>

From 61de1da32d372991aa6d9bcb20e8d4b7d481bfb6 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Mon, 9 May 2022 08:43:37 +0800
Subject: [PATCH 3/4] 29553

---
 packages/jianping/AppPublicizeInformation/Add.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/jianping/AppPublicizeInformation/Add.vue b/packages/jianping/AppPublicizeInformation/Add.vue
index 2a2c9fcb..ae73f62e 100644
--- a/packages/jianping/AppPublicizeInformation/Add.vue
+++ b/packages/jianping/AppPublicizeInformation/Add.vue
@@ -148,7 +148,7 @@ export default {
     submit() {
       this.$refs.ruleForm.validate(v => {
         if (v) {
-          if(this.form.pictureUrlList.length) {
+          if(this.form.pictureUrlList && this.form.pictureUrlList.length) {
             this.form.pictureUrl = this.form.pictureUrlList[0].url
           }
           this.instance.post(`/app/apppublicityinfo/addOrUpdate`, this.form).then(res => {
@@ -166,6 +166,7 @@ export default {
         params: {id}
       }).then(res => {
         if (res?.data) {
+          res.data.pictureUrlList = []
           if(res.data.pictureUrl) {
             res.data.pictureUrlList = [{url: res.data.pictureUrl}]
           }

From ae24b4d6b447d9e105dbc36873f3c1528f723413 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 9 May 2022 14:32:42 +0800
Subject: [PATCH 4/4] BUG 29559

---
 project/sass/apps/grid/AppGridBlock/components/list.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/project/sass/apps/grid/AppGridBlock/components/list.vue b/project/sass/apps/grid/AppGridBlock/components/list.vue
index b3b9b1ae..62378d11 100644
--- a/project/sass/apps/grid/AppGridBlock/components/list.vue
+++ b/project/sass/apps/grid/AppGridBlock/components/list.vue
@@ -118,11 +118,9 @@
               fixed="right"
               width="160">
             <template slot-scope="{ row }">
-              <div class="table-options">
-                <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
-                <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
-                <el-button type="text" @click="deleteById(row.id)">删除</el-button>
-              </div>
+              <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
+              <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
             </template>
           </el-table-column>
         </ai-table>
@@ -146,7 +144,6 @@
 </template>
 
 <script>
-import AMapLoader from "@amap/amap-jsapi-loader";
 import MapPlotting from "./mapPlotting";
 
 export default {