From e553c9c758f0780261ea5ebdb40cca3d881cedcb Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 14 Apr 2023 17:42:43 +0800
Subject: [PATCH] bug

---
 .../fengdu/app/AppGridBlock/AppGridBlock.vue  |  39 ++
 .../app/AppGridBlock/components/add.vue       | 217 ++++++++
 .../app/AppGridBlock/components/list.vue      | 470 ++++++++++++++++++
 .../AppGridBlock/components/mapPlotting.vue   | 327 ++++++++++++
 4 files changed, 1053 insertions(+)
 create mode 100644 project/fengdu/app/AppGridBlock/AppGridBlock.vue
 create mode 100644 project/fengdu/app/AppGridBlock/components/add.vue
 create mode 100644 project/fengdu/app/AppGridBlock/components/list.vue
 create mode 100644 project/fengdu/app/AppGridBlock/components/mapPlotting.vue

diff --git a/project/fengdu/app/AppGridBlock/AppGridBlock.vue b/project/fengdu/app/AppGridBlock/AppGridBlock.vue
new file mode 100644
index 00000000..c7393f70
--- /dev/null
+++ b/project/fengdu/app/AppGridBlock/AppGridBlock.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="AppGridBlock">
+    <component :is="currentPage" :instance="instance" :dict="dict"/>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+import Add from "./components/add";
+
+export default {
+  name: "AppGridBlock",
+  label: "网格区块",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  computed: {
+    currentPage() {
+      return this.$route.hash == "#add" ? Add : List
+    }
+  },
+  data() {
+    return {
+      component: "List",
+    };
+  },
+  components: {Add, List},
+};
+</script>
+
+<style lang="scss">
+.AppGridBlock {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/fengdu/app/AppGridBlock/components/add.vue b/project/fengdu/app/AppGridBlock/components/add.vue
new file mode 100644
index 00000000..df0d1511
--- /dev/null
+++ b/project/fengdu/app/AppGridBlock/components/add.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="add-block">
+    <ai-detail>
+      <template #title>
+        <ai-title
+            :title="pageTitle"
+            :isShowBack="true"
+            :isShowBottomBorder="true"
+            @onBackClick="cancel(false)"
+        />
+      </template>
+      <template #content>
+        <el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
+          <ai-card title="基础信息">
+            <template slot="content">
+              <el-form-item label="网格名称" prop="girdName">
+                <el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
+              </el-form-item>
+              <el-form-item label="网格长" prop="girdMemberManageList">
+                <ai-user-selecter isShowUser :instance="instance" v-model="forms.girdMemberManageList" :props="{label:'name', id: 'id'}"/>
+              </el-form-item>
+              <el-form-item label="网格员" prop="girdMemberList">
+                <ai-user-selecter isShowUser :instance="instance" v-model="forms.girdMemberList" :props="{label:'name', id: 'id'}"/>
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="其他信息">
+            <template slot="content">
+              <el-row type="flex">
+                <div class="fill">
+                  <el-form-item label="初始日期" prop="startDate">
+                    <el-date-picker
+                        v-model="forms.startDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择日期"
+                        style="width: 100%;"/>
+                  </el-form-item>
+                  <el-form-item label="终止日期" prop="endDate">
+                    <el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
+                  </el-form-item>
+                </div>
+                <div class="fill">
+                  <el-form-item label="面积" prop="area">
+                    <el-input v-model="forms.area" placeholder="面积㎡" clearable/>
+                  </el-form-item>
+                </div>
+              </el-row>
+              <el-form-item label="网格地址" prop="address">
+                <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
+              </el-form-item>
+              <el-form-item label="网格范围" prop="enclosure">
+                <map-plotting v-model="forms.points">
+                  <el-button size="small">地图标绘</el-button>
+                </map-plotting>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="cancel(false)" class="delete-btn footer-btn">
+          取 消
+        </el-button>
+        <el-button type="primary" @click="save()" class="footer-btn">
+          提 交
+        </el-button>
+      </template>
+    </ai-detail>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import MapPlotting from "./mapPlotting";
+
+export default {
+  name: "addBlock",
+  components: {MapPlotting},
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+  },
+  data() {
+    return {
+      forms: {
+        girdMemberManageList: [],
+        girdMemberList: []
+      },
+      options: [],
+      parentGirdInfo: {},
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    formRules() {
+      return {
+        girdName: [
+          {required: true, message: "请输入网格名称", trigger: "change"},
+        ],
+        girdCode: [
+          {required: true, message: "请输入网格编号"},
+          {pattern: /^\d+$/g, message: "请输入数字"},
+        ]
+      };
+    },
+    unitProps() {
+      return {
+        value: "id",
+        checkStrictly: true,
+        emitPath: false,
+      };
+    },
+    unitOps() {
+      let initData = JSON.parse(JSON.stringify(this.options)),
+          ops = initData.filter((e) => !e.parentId);
+      ops.map((e) => this.addChild(e, initData));
+      return ops;
+    },
+    pageTitle() {
+      return this.isEdit ? "编辑网格区块" : "添加网格区块"
+    },
+    isEdit() {
+      return !!this.$route.query.id;
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      this.searchDetail();
+    } else {
+      this.forms = {
+        ...this.forms,
+        ...this.$route.query
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.$router.push({})
+    },
+    // 获取所有单位
+    getAllUnit(data) {
+      this.options = [];
+      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}
+          });
+          this.options = res.data.filter((e) => !e.parentId);
+          this.options.map((t) => this.addChild(t, res.data));
+        }
+      });
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          let {girdMemberManageList, girdMemberList} = this.forms
+          this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
+            ...this.forms,
+            girdMemberManageList: girdMemberManageList?.map(v => ({wxUserId: v.id})) || [],
+            girdMemberList: girdMemberList?.map(v => ({wxUserId: v.id})) || []
+          }).then((res) => {
+            if (res.code == 0) {
+              this.cancel(true)
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    searchDetail() {
+      let {id} = this.$route.query
+      this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
+        params: {id},
+      }).then((res) => {
+        if (res?.data) {
+          this.forms = {
+            ...res.data,
+            girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList.map(v => {
+              return {
+                ...v,
+                id: v.wxUserId,
+                avatar: v.photo
+              }
+            }) : [],
+            girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
+              return {
+                ...v,
+                id: v.wxUserId,
+                avatar: v.photo
+              }
+            }) : []
+          };
+          this.parentGirdInfo = res.data.parentGirdInfo;
+          this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-block {
+  width: 100%;
+  height: 100%;
+
+  .footer-btn {
+    width: 92px;
+  }
+}
+</style>
diff --git a/project/fengdu/app/AppGridBlock/components/list.vue b/project/fengdu/app/AppGridBlock/components/list.vue
new file mode 100644
index 00000000..e6bc013b
--- /dev/null
+++ b/project/fengdu/app/AppGridBlock/components/list.vue
@@ -0,0 +1,470 @@
+<template>
+  <section class="app-grid-block">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
+      </template>
+      <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"
+              :expand-on-click-node="false"
+              :defaultExpandedKeys="treeObj.defaultExpandedKeys"
+              :filter-node-method="filterNode"
+              highlight-current>
+            <template slot-scope="{node,data}">
+              <div v-text="node.label"/>
+            </template>
+          </el-tree>
+        </ai-tree-menu>
+      </template>
+      <template slot="content">
+        <ai-search-bar>
+          <template slot="left">
+            <el-date-picker
+                v-model="searchObj.createTimeStr"
+                type="date"
+                @change="(page.current = 1), getList()"
+                value-format="yyyy-MM-dd"
+                size="small"
+                placeholder="创建时间"
+            >
+            </el-date-picker>
+          </template>
+          <template slot="right">
+            <el-input
+                v-model="searchObj.girdName"
+                size="small"
+                placeholder="输入网格名称"
+                @keyup.enter.native="(page.current = 1), getList()"
+                clearable
+                @clear="(searchObj.girdName = '', page.current = 1), getList()"
+                suffix-icon="iconfont iconSearch"
+            />
+          </template>
+        </ai-search-bar>
+        <ai-search-bar bottomBorder>
+          <template slot="left">
+            <el-button
+                type="primary"
+                icon="iconfont iconAdd"
+                @click="(isEdit = false), toAdd()"
+            >新增
+            </el-button>
+            <el-button
+                icon="iconfont iconDelete"
+                @click="deleteById(ids.join(','))"
+                :disabled="!Boolean(ids.length)"
+            >
+              删除
+            </el-button>
+            <ai-import
+                ref="import"
+                title="导入"
+                name="网格区块"
+                url="/app/appgirdinfo/downloadGirdInfo"
+                importUrl="/app/appgirdinfo/importGirdInfo"
+                suffixName="xlsx"
+                :customCliker="true"
+                :instance="instance"
+            >
+              <template slot="tips">
+                <p>
+                  如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
+                </p>
+              </template>
+              <el-button size="small" icon="iconfont iconImport"
+              >导入
+              </el-button
+              >
+            </ai-import>
+            <el-button type="primary" v-if="!treeObj.treeList.length" @click="init">初始化</el-button>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          class="mt10"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="page.total"
+          ref="aitableex"
+          :current.sync="page.current"
+          :size.sync="page.size"
+          @selection-change="v=>ids=v.map((e) => e.id)"
+          @getList="getList()"
+          :dict="dict">
+          <el-table-column label="网格成员" slot="user" align="center" width="160">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+              label="操作"
+              slot="options"
+              align="center"
+              fixed="right"
+              width="160">
+            <template slot-scope="{ row }">
+              <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>
+      </template>
+    </ai-list>
+    <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
+               width="700px">
+      <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
+                :isShowPagination="false" :show-header="false"/>
+      <template #footer>
+        <el-button @click="dialog=false">关闭</el-button>
+      </template>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import MapPlotting from "./mapPlotting";
+
+export default {
+  name: "List",
+  components: {MapPlotting},
+  label: "网格区块",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "children",
+          label: "girdName",
+        },
+        defaultExpandedKeys: [],
+      },
+      filterText: "",
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      searchObj: {
+        createTimeStr: "",
+        girdName: "",
+      },
+      tableData: [],
+      info: {},
+      ids: [],
+      showMap: false,
+      map: "",
+      polyEditor: "",
+      editRow: {},
+      searchAddress: "",
+      mouseTool: "",
+      placeSearch: "",
+      path: [],
+      overlays: [],
+      isEdit: false,
+      fileList: [],
+      dialog: false,
+      gridInfo: {},
+      gridMemberColConfigs: [
+        {prop: "name"},
+        {prop: "checkType", format: v => v === '1' ? '网格员' : '网格长'}
+      ]
+    };
+  },
+  created() {
+    this.getTreeList();
+    this.getList();
+    this.dict.load("girdType", "isLastLevel", "plottingStatus", "girdMemberType");
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {type: 'selection'},
+        {prop: "girdName", align: "left", label: "网格名称",},
+        {slot: 'user'},
+        {prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
+        {prop: "createTime", align: "center", label: "创建时间"},
+        {slot: "options"}
+      ];
+    },
+    isTopGrid() {
+      return this.info.id == this.treeObj.treeList?.[0]?.id
+    }
+  },
+  methods: {
+    handleNodeClick(val) {
+      this.info = this.$copy(val);
+      this.getList();
+    },
+    getTreeList() {
+      this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
+        if (res?.data) {
+
+          this.treeObj.treeList = res.data.filter(e => !e.parentGirdId)
+          const parentGirdId = this.treeObj.treeList[0].id
+
+          this.treeObj.treeList.map(p => this.addChild(p, res.data.map(v => {
+            if (v.id === parentGirdId) {
+              this.treeObj.defaultExpandedKeys.push(v.id)
+            }
+
+            return {
+              ...v
+            }
+          }), {
+            parent: 'parentGirdId'
+          }))
+          this.$nextTick(() => {
+            this.info = this.treeObj.treeList[0]
+            this.$refs.tree.setCurrentKey(parentGirdId)
+          })
+        }
+      });
+    },
+
+    init () {
+      this.instance.post("/app/appgirdinfo/initByCorpAreaId").then((res) => {
+        if (res?.code == 0) {
+          this.getTreeList();
+          this.$message.success("网格初始化成功!");
+          this.getList();
+        }
+      })
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.girdName.indexOf(value) !== -1;
+    },
+    deleteById(ids) {
+      ids && this.$confirm("删除网格后，会清除网格内网格员的责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
+        type: "error",
+      }).then(() => {
+        this.instance.post("/app/appgirdinfo/delete", null, {params: {ids}}).then((res) => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!");
+            this.getList();
+            this.getTreeList();
+          }
+        });
+      }).catch(() => 0);
+    },
+    deleteTree(ids) {
+      ids && this.$confirm("是否要删除该网格区块？", {
+        type: "error",
+      }).then(() => {
+        this.instance.post("/app/appgirdinfo/delete", null, {
+          params: {ids}
+        }).then((res) => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!");
+            this.getTreeList();
+          }
+        });
+      }).catch(() => 0);
+    },
+    getList() {
+      this.instance.post("/app/appgirdinfo/list", null, {
+        params: {
+          ...this.searchObj,
+          ...this.page,
+          parentGirdId: this.isTopGrid ? '' : this.info.id,
+        },
+      }).then((res) => {
+        if (res?.data) {
+          this.tableData = res.data.records;
+          this.page.total = res.data.total;
+        }
+      });
+    },
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    //添加二级网格
+    addTwoLevel() {
+      this.info = {...this.treeObj.treeList[0]};
+      this.toAdd()
+    },
+    toAdd() {
+      let {id: parentGirdId, girdName: parentGirdName} = this.info
+      this.$router.push({
+        hash: "#add", query: {parentGirdId, parentGirdName}
+      })
+    },
+    goBack() {
+      this.isAdd = false;
+      this.$nextTick(() => {
+        this.getList();
+        this.getTreeList();
+      });
+    },
+    showEdit(id) {
+      this.$router.push({hash: "#add", query: {id}})
+    },
+    //map搜索
+    confirm(row, points) {
+      this.instance.post(`/app/appgirdinfo/updateCoordinate`, {...row, points}).then((res) => {
+        if (res.code == 0) {
+          this.$message.success("提交成功!")
+          this.getList();
+        }
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+    showGridMembers(row) {
+      if (row.girdMemberNumber > 0) {
+        this.gridInfo = this.$copy(row)
+        this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
+          params: {girdId: row.id}
+        }).then(res => {
+          if (res?.data) {
+            this.gridInfo.tableData = res.data
+            this.dialog = true
+          }
+        })
+      } else this.$message.warning("当前网格无成员")
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-grid-block {
+  width: 100%;
+  height: 100%;
+
+  :deep( .el-tree ){
+    background: transparent;
+
+    .el-tree-node__expand-icon.is-leaf {
+      color: transparent !important;
+    }
+
+    .el-tree-node__content > .el-tree-node__expand-icon {
+      padding: 4px;
+    }
+
+    .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree__empty-text {
+      color: #222;
+      font-size: 14px;
+    }
+
+    .el-tree-node__children .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree-node__content:hover {
+      background: #E8EFFF;
+      color: #222222;
+      border-radius: 2px;
+    }
+
+    .is-current > .el-tree-node__content {
+      color: #fff !important;
+
+      &:hover {
+        background: #2266FF;
+        color: #fff;
+      }
+
+      background: #2266FF;
+
+      .el-tooltip {
+        color: #fff;
+      }
+    }
+  }
+
+  .flex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+
+    & > div {
+      display: flex;
+    }
+  }
+
+  .mt10 {
+    padding: 8px 0;
+  }
+
+  :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;
+          }
+        }
+      }
+    }
+  }
+
+  :deep( .treePanel ){
+    display: flex;
+    flex-direction: column;
+
+    .el-tree {
+      min-height: 0;
+      flex: 1;
+    }
+
+    footer {
+      width: 100%;
+      height: 32px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+
+      span {
+        width: 33.33%;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .el-button {
+        width: 33.33%;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/fengdu/app/AppGridBlock/components/mapPlotting.vue b/project/fengdu/app/AppGridBlock/components/mapPlotting.vue
new file mode 100644
index 00000000..b79607a7
--- /dev/null
+++ b/project/fengdu/app/AppGridBlock/components/mapPlotting.vue
@@ -0,0 +1,327 @@
+<template>
+  <section class="mapPlotting">
+    <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 class="mapLayerSwitcher" flex>
+          <div class="item" :class="{current:mapType=='vector'}" @click="mapType='vector'"/>
+          <div class="item satellite" :class="{current:mapType=='satellite'}" @click="mapType='satellite'"/>
+        </div>
+      </div>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {mapState} from "vuex";
+
+export default {
+  name: "mapPlotting",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    title: {default: "地图标绘"},
+    value: Array
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {
+    mapType(v) {
+      if (v == 'satellite') {
+        for (const k in this.layers) {
+          this.layers[k].show()
+        }
+      } else {
+        for (const k in this.layers) {
+          this.layers[k].hide()
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      map: null,
+      polyEditor: null,
+      placeSearch: null,
+      searchAddress: "",
+      overlays: [],
+      points: [],
+      dialog: false,
+      mapType: "vector",
+      layers: {},
+    }
+  },
+  methods: {
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.points = []
+    },
+    handleAdd() {
+      if (this.points?.length == 0) {
+        let {polyEditor} = this
+        polyEditor.close();
+        polyEditor.setTarget();
+        polyEditor.open();
+      } else this.$message.error("请先清除已标绘图形!")
+    },
+    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.layers.roadNet = new AMap.TileLayer.RoadNet({zIndex: 11})
+        this.layers.satellite = new AMap.TileLayer.Satellite({zIndex: 10})
+        this.map.addLayer(this.layers.roadNet)
+        this.map.addLayer(this.layers.satellite)
+        this.layers.roadNet.hide()
+        this.layers.satellite.hide()
+        /*end*/
+        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}) => {
+          if (target) {
+            this.overlays.push(target);
+            this.points = 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()
+        } else {
+          this.map.setCity(this.user.info.areaId?.substring(0, 6))
+          this.map.setZoom(14, false, 600)
+        }
+      }), 500)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapPlotting {
+  display: inline-block;
+  text-align: left;
+
+  .clicker {
+    display: inline-block;
+  }
+
+  .mapPanel {
+    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;
+    }
+
+    .mapLayerSwitcher {
+      position: absolute;
+      z-index: 202304061607;
+      bottom: 20px;
+      right: 12px;
+      background-color: #fff;
+      padding: 5px;
+      width: fit-content;
+      height: 56px;
+      box-sizing: content-box;
+      overflow: hidden;
+      transition: width 2s ease;
+      gap: 10px;
+
+      &:hover {
+        .item {
+          display: block;
+        }
+      }
+
+      .item {
+        position: relative;
+        width: 80px;
+        height: 56px;
+        border: 1px dashed #ddd;
+        cursor: pointer;
+        flex-shrink: 0;
+        background-image: url("https://cdn.cunwuyun.cn/map/defaultMap.png");
+        box-sizing: border-box;
+        color: #fff;
+        background-size: 100%;
+        display: none;
+
+        &.current {
+          border: 1px solid #366FFF;
+          display: block !important;
+
+          &:before {
+            background-color: #366FFF;
+          }
+        }
+
+        &:hover {
+          border-color: #333;
+        }
+
+        &:before {
+          font-size: 12px;
+          line-height: 18px;
+          padding: 0 3px;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          content: "地图";
+          user-select: none;
+        }
+
+        &.satellite {
+          background-image: url("https://cdn.cunwuyun.cn/map/satelliteMap.png");
+
+          &:before {
+            content: "卫星"
+          }
+        }
+      }
+    }
+  }
+
+  :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;
+          }
+        }
+      }
+    }
+  }
+
+  :deep( .amap-copyright ) {
+    display: none !important;
+  }
+
+  :deep( .amap-logo ) {
+    display: none !important;
+  }
+}
+</style>