From cd09934080e4e185df4311c4a4d311e889086c5c Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 24 Dec 2021 15:09:16 +0800
Subject: [PATCH] BUG 25975

---
 .../2.0.5/AppGridBlock/components/add.vue     | 355 +++++++++---------
 1 file changed, 179 insertions(+), 176 deletions(-)

diff --git a/packages/2.0.5/AppGridBlock/components/add.vue b/packages/2.0.5/AppGridBlock/components/add.vue
index 5f140d7e..c942f408 100644
--- a/packages/2.0.5/AppGridBlock/components/add.vue
+++ b/packages/2.0.5/AppGridBlock/components/add.vue
@@ -3,67 +3,67 @@
     <ai-detail>
       <template #title>
         <ai-title
-          :title="title"
-          :isShowBack="true"
-          :isShowBottomBorder="true"
-          @onBackClick="cancel(false)"
+            :title="title"
+            :isShowBack="true"
+            :isShowBottomBorder="true"
+            @onBackClick="cancel(false)"
         ></ai-title>
       </template>
       <template #content>
-        <ai-card title="层级信息" >
+        <ai-card title="层级信息">
           <template slot="content">
-            <ai-wrapper  label-width="120px" :columnsNumber="2" style="margin-top: 16px">
+            <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
               <ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
             </ai-wrapper>
           </template>
         </ai-card>
-        
+
         <el-form
-          ref="rules"
-          :model="forms"
-          :rules="formRules"
-          size="small"
-          label-suffix="："
-          label-width="120px"
+            ref="rules"
+            :model="forms"
+            :rules="formRules"
+            size="small"
+            label-suffix="："
+            label-width="120px"
         >
-          <ai-card title="基础信息" >
+          <ai-card title="基础信息">
             <template slot="content">
               <div class="above">
                 <div class="left">
                   <el-form-item label="网格名称" prop="girdName">
                     <el-input
-                      v-model="forms.girdName"
-                      placeholder="请输入…"
-                      maxlength="10"
-                      show-word-limit
+                        v-model="forms.girdName"
+                        placeholder="请输入…"
+                        maxlength="10"
+                        show-word-limit
                     ></el-input>
                   </el-form-item>
                   <el-form-item label="网格类型" prop="girdType">
                     <el-select
-                      v-model="forms.girdType"
-                      placeholder="请选择"
-                      clearable
+                        v-model="forms.girdType"
+                        placeholder="请选择"
+                        clearable
                     >
                       <el-option
-                        v-for="(item, i) in dict.getDict('girdType')"
-                        :key="i"
-                        :label="item.dictName"
-                        :value="item.dictValue"
+                          v-for="(item, i) in dict.getDict('girdType')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
                       ></el-option>
                     </el-select>
                   </el-form-item>
                   <el-form-item label="是否最后一级" prop="isLastLevel">
                     <el-select
-                      v-model="forms.isLastLevel"
-                      placeholder="请选择"
-                      :disabled="isEdit"
-                      clearable
+                        v-model="forms.isLastLevel"
+                        placeholder="请选择"
+                        :disabled="isEdit"
+                        clearable
                     >
                       <el-option
-                        v-for="(item, i) in dict.getDict('isLastLevel')"
-                        :key="i"
-                        :label="item.dictName"
-                        :value="item.dictValue"
+                          v-for="(item, i) in dict.getDict('isLastLevel')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
                       ></el-option>
                     </el-select>
                   </el-form-item>
@@ -71,24 +71,24 @@
                 <div class="right">
                   <el-form-item label="网格编码" prop="girdCode">
                     <el-input
-                      v-model="forms.girdCode"
-                      placeholder="请输入…"
-                      maxlength="30"
-                      show-word-limit
+                        v-model="forms.girdCode"
+                        placeholder="请输入…"
+                        maxlength="30"
+                        show-word-limit
                     ></el-input>
                   </el-form-item>
                   <el-form-item label="网格层级" prop="girdLevel">
                     <el-select
-                      v-model="forms.girdLevel"
-                      placeholder="请选择"
-                      :disabled="isEdit"
-                      clearable
+                        v-model="forms.girdLevel"
+                        placeholder="请选择"
+                        :disabled="isEdit"
+                        clearable
                     >
                       <el-option
-                        v-for="(item, i) in dict.getDict('girdLevel')"
-                        :key="i"
-                        :label="item.dictName"
-                        :value="item.dictValue"
+                          v-for="(item, i) in dict.getDict('girdLevel')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
                       ></el-option>
                     </el-select>
                   </el-form-item>
@@ -97,7 +97,7 @@
             </template>
           </ai-card>
 
-          <ai-card title="其他信息" >
+          <ai-card title="其他信息">
             <template slot="content">
               <div class="above">
                 <div class="left">
@@ -113,19 +113,19 @@
                   </el-form-item> -->
                   <el-form-item label="初始日期" prop="startDate">
                     <el-date-picker
-                      v-model="forms.startDate"
-                      type="date"
-                      value-format="yyyy-MM-dd"
-                      placeholder="选择日期"
+                        v-model="forms.startDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择日期"
                     >
                     </el-date-picker>
                   </el-form-item>
                   <el-form-item label="终止日期" prop="endDate">
                     <el-date-picker
-                      v-model="forms.endDate"
-                      type="date"
-                      value-format="yyyy-MM-dd"
-                      placeholder="选择日期"
+                        v-model="forms.endDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择日期"
                     >
                     </el-date-picker>
                   </el-form-item>
@@ -133,8 +133,8 @@
                 <div class="right">
                   <el-form-item label="面积" prop="area">
                     <el-input
-                      v-model="forms.area"
-                      placeholder="面积㎡"
+                        v-model="forms.area"
+                        placeholder="面积㎡"
                     ></el-input>
                   </el-form-item>
                 </div>
@@ -146,7 +146,7 @@
                 <el-button size="small" @click="showMap = true">地图标绘</el-button>
               </el-form-item>
             </template>
-          </ai-card> 
+          </ai-card>
         </el-form>
       </template>
       <template #footer>
@@ -159,45 +159,48 @@
       </template>
     </ai-detail>
     <ai-dialog
-      title="网格范围"
-      :visible.sync="showMap"
-      :customFooter="true"
-      :destroyOnClose="true"
-      @opened="beforeSelectMap"
-      border
-      width="850px"
+        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"
+              v-model="searchAddress"
+              @change="addressChange"
+              clearable
+              placeholder="请输入关键字"
+              id="tipinput"
+              size="medium"
+              style="width: 200px"
           ></el-input>
         </div>
         <div id="panel"></div>
         <div class="container" id="container"></div>
         <el-button-group
-          style="margin-top: 8px"
-          v-if="forms.plottingStatus == 1"
+            style="margin-top: 8px"
+            v-if="forms.plottingStatus == 1"
         >
           <el-button type="primary" size="mini" @click="polyEditor.open()"
-            >开始编辑</el-button
+          >开始编辑
+          </el-button
           >
           <el-button size="mini" @click="polyEditor.close()"
-            >结束编辑</el-button
+          >结束编辑
+          </el-button
           >
         </el-button-group>
         <el-button-group
-          style="margin-top: 8px"
-          v-if="forms.plottingStatus == 0"
+            style="margin-top: 8px"
+            v-if="forms.plottingStatus == 0"
         >
           <el-button size="mini" @click="draw('polygon')"
-            >开始绘制多边形</el-button
+          >开始绘制多边形
+          </el-button
           >
           <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
           <el-button size="mini" @click="clear()">清除绘制</el-button>
@@ -206,7 +209,8 @@
       <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
+        >确认
+        </el-button
         >
       </div>
     </ai-dialog>
@@ -215,7 +219,8 @@
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import { mapState } from "vuex";
+import {mapState} from "vuex";
+
 export default {
   name: "addBlock",
   props: {
@@ -262,22 +267,22 @@ export default {
     formRules() {
       return {
         girdName: [
-          { required: true, message: "请填写网格名称", trigger: "change" },
+          {required: true, message: "请填写网格名称", trigger: "change"},
         ],
         girdCode: [
-          { required: true, message: "请填写网格编码", trigger: "change" },
+          {required: true, message: "请填写网格编码", trigger: "change"},
         ],
         girdType: [
-          { required: true, message: "请选择网格类型", trigger: "change" },
+          {required: true, message: "请选择网格类型", trigger: "change"},
         ],
         isLastLevel: [
-          { required: true, message: "请选择是否最后一级", trigger: "change" },
+          {required: true, message: "请选择是否最后一级", trigger: "change"},
         ],
         girdLevel: [
-          { required: true, message: "请选择网格层级", trigger: "change" },
+          {required: true, message: "请选择网格层级", trigger: "change"},
         ],
         eventReportUnitId: [
-          { required: true, message: "请选择事件上报主体", trigger: "change" },
+          {required: true, message: "请选择事件上报主体", trigger: "change"},
         ],
       };
     },
@@ -290,7 +295,7 @@ export default {
     },
     unitOps() {
       let initData = JSON.parse(JSON.stringify(this.options)),
-        ops = initData.filter((e) => !e.parentId);
+          ops = initData.filter((e) => !e.parentId);
       ops.map((e) => this.addChild(e, initData));
       return ops;
     },
@@ -306,33 +311,30 @@ export default {
       // this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
       this.title = "添加网格区块";
     }
-    this.getAllUnit(this.user.info.areaId);
+    // this.getAllUnit(this.user.info.areaId);
   },
   methods: {
-    cancel (isRefresh) {
+    cancel(isRefresh) {
       this.$emit('change', {
         type: 'list',
-        isRefresh: isRefresh ? true : false,
+        isRefresh: !!isRefresh,
       })
     },
     // 获取所有单位
     getAllUnit(data) {
       this.options = [];
-      this.instance
-        .post("/admin/sysunit/getAll", null, {
-          params: {
-            areaId: data,
-          },
-        })
-        .then((res) => {
+      this.instance.post("/admin/sysunit/getAll", null, {
+        params: {areaId: data},
+      }).then((res) => {
+        if (res?.data) {
           res.data = res.data.map((a) => {
-            return { ...a, label: a.name };
+            return {...a, label: a.name}
           });
           this.options = res.data.filter((e) => !e.parentId);
           this.options.map((t) => this.addChild(t, res.data));
-        });
+        }
+      });
     },
-
     beforeSelectMap() {
       AMapLoader.load({
         key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -344,65 +346,61 @@ export default {
           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, [117.147097, 36.72081], false, 600);
-            this.eventOn();
-          }
-        })
-        .catch((e) => {
-          console.log(e);
+      .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, [117.147097, 36.72081], false, 600);
+          this.eventOn();
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
     },
     //地图事件绑定
     eventOn() {
       this.path = [];
       this.overlays = [];
-      this.map.on("mousemove", this.showInfoMove, this);
-      this.mouseTool.on("draw", ({ type, obj }) => {
-        console.log(obj);
+      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.path.push({lat: e.getLat(), lng: e.getLng()});
         });
         this.overlays.push(obj);
-      });
-      this.placeSearch.on("listElementClick", (e) => {
-        console.log(e);
-      });
+      })
     },
     //map搜索
     addressChange(val) {
@@ -464,11 +462,11 @@ export default {
       // 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 });
-          });
+        .getTarget()
+        .getPath()
+        .map((e) => {
+          this.forms.points.push({lng: e.lng, lat: e.lat});
+        });
       } else {
         this.forms.points = [...this.path];
       }
@@ -478,18 +476,18 @@ export default {
       this.$refs["rules"].validate((valid) => {
         if (valid) {
           this.instance
-            .post(
+          .post(
               `/app/appgirdinfo/addOrUpdate`,
               {
                 ...this.forms,
               },
               null
-            )
-            .then((res) => {
-              if (res.code == 0) {
-                this.cancel(true)
-              }
-            });
+          )
+          .then((res) => {
+            if (res.code == 0) {
+              this.cancel(true)
+            }
+          });
         } else {
           console.log("error submit!!");
           return false;
@@ -497,18 +495,16 @@ export default {
       });
     },
     searchDetail() {
-      this.instance
-        .post(`/app/appgirdinfo/queryDetailById`, null, {
-          params: { id: this.params.id },
-        })
-        .then((res) => {
-          if (res.code == 0) {
-            this.forms = { ...res.data };
-            this.parentGirdInfo = this.forms.parentGirdInfo;
-            this.forms.parentGirdName = this.parentGirdInfo.girdName;
-            // this.forms.isLastLevel =this.forms.girdLevel;
-          }
-        });
+      this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
+        params: {id: this.params.id},
+      }).then((res) => {
+        if (res?.data) {
+          this.forms = {...res.data};
+          this.parentGirdInfo = this.forms.parentGirdInfo;
+          this.forms.parentGirdName = this.parentGirdInfo.girdName;
+          // this.forms.isLastLevel =this.forms.girdLevel;
+        }
+      });
     },
   },
 };
@@ -518,41 +514,48 @@ export default {
 .add-block {
   width: 100%;
   height: 100%;
+
   .above {
     overflow: hidden;
     padding: 8px 0;
+
     .left {
       width: 380px;
       float: left;
     }
+
     .right {
       width: 380px;
       float: right;
     }
   }
+
   .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;
-      overflow-x: auto;
       top: 20px;
       width: 280px;
       overflow: hidden;
       z-index: 10000;
     }
+
     .tipinput {
       position: absolute;
       width: 200px;
@@ -563,4 +566,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>