疑点审计，标记疑点初步弹窗；自定义模板；综合分析默认图层显示方法

src/components/common/BottomForm/CustomModelDialog.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog
+    title="自定义模型"
+    :visible.sync="outerDialogVisible"
+    width="40%"
+    center
+    :before-close="handleClose"
+  >
+    <el-dialog
+      title="请输入模型名称"
+      width="20%"
+      :visible.sync="innerDialogVisible"
+      append-to-body
+      center
+      ><div class="model-name">
+        <div class="model-name-title">名称 :</div>
+        <el-input v-model="inputName" placeholder="自定义模型1"></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="clearDialogVisible()">取 消</el-button>
+        <el-button type="primary" @click="confirm()">确认</el-button>
+      </span>
+    </el-dialog>
+    <el-checkbox-group v-model="checkList">
+      <el-checkbox
+        v-for="item in checkArr"
+        :key="item"
+        :label="item"
+      ></el-checkbox>
+    </el-checkbox-group>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="clearDialogVisible()">取 消</el-button>
+      <el-button type="primary" @click="saveModel()">保存模型</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+/**
+ * 底部菜单（自定义模型）组件
+ * @author: Gao Lu
+ * @Date: 2022.11.22
+ */
+export default {
+  name: "CustomModelDialog",
+  components: {},
+  data() {
+    return {
+      outerDialogVisible: false,
+      innerDialogVisible: false,
+      inputName: "",
+      model: {
+        name: "",
+      },
+      checkList: [],
+      checkArr: [
+        "永久基本农田",
+        "建设用地减量化",
+        "一般耕地种林",
+        "一般耕地",
+        "基本农田被违规占用",
+        "一般耕地抛荒",
+        "高标准农田",
+        "一般耕地被违规占用",
+        "减量化复垦地块后种林",
+      ],
+    };
+  },
+  mounted() {
+    // 监听自定义模型
+    this.$bus.$on("customModelEvent", () => {
+      this.customModelEvent();
+    });
+    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
+    this.$bus.$on("handleClose", () => {
+      if (this.dialogVisible) {
+        this.handleClose();
+      }
+    });
+  },
+  beforeDestroyed() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("customModelEvent");
+  },
+  methods: {
+    // 弹窗关闭时询问
+    handleClose() {
+      if (this.outerDialogVisible) {
+        this.$confirm("确认关闭吗?").then(() => {
+          this.clearDialogVisible();
+        });
+      }
+    },
+    clearDialogVisible() {
+      this.outerDialogVisible = false;
+      this.innerDialogVisible = false;
+    },
+    // 自定义模型
+    customModelEvent() {
+      this.outerDialogVisible = true;
+      console.log("custom model");
+    },
+    saveModel() {
+      this.innerDialogVisible = true;
+    },
+    confirm() {
+      this.$message.success("模型以保存");
+      this.model.name = this.inputName;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.model-name {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  &-title {
+    width: 20%;
+    height: 100%;
+    color: #fff;
+    font-size: 18px;
+    line-height: 38px;
+  }
+}
+</style>

src/components/common/BottomMenus.vue

@@ -1,22 +1,29 @@
 <template>
   <div id="bottomMenus">
     <!-- 底部菜单动态SVG底座 -->
-    <BottomMenuSvg id="svgBox" @changeShowBottomMenusStatus="changeShowBottomMenusStatus()" />
+    <BottomMenuSvg
+      id="svgBox"
+      @changeShowBottomMenusStatus="changeShowBottomMenusStatus()"
+    />
     <!-- 申请任务弹窗 -->
-    <CreateTaskForm @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
+    <CreateTaskForm
+      @changeShowBottomMenusStatus="changeShowBottomMenusStatus"
+    />
     <!-- 我的任务弹窗 -->
     <MyMission @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 同屏对比弹窗 -->
     <SameScreenComparison />
     <!-- 上传数据弹窗 -->
     <UploadingData />
+    <!-- 自定义模型 -->
+    <CustomModelDialog />
     <!-- 底部菜单主体 -->
     <div
       id="menusBox"
       :style="{
         width: showBottomMenusStatus ? '981px' : '0px',
         height: showBottomMenusStatus ? '200px' : '0px',
-        border: showBottomMenusStatus ? '1px solid #00aaff' : 'none'
+        border: showBottomMenusStatus ? '1px solid #00aaff' : 'none',
       }"
     >
       <!-- 模块遍历渲染也是menus对象的第一层数组 -->
@@ -33,15 +40,23 @@
           <!-- 遍历渲染每个模块下的子菜单，也是menus数组中subMenu数组 -->
           <div
             class="colBtuMenu"
-            @click="changeBottomMenu(item.index, subItem.index, subItem.clickEmit)"
+            @click="
+              changeBottomMenu(item.index, subItem.index, subItem.clickEmit)
+            "
             v-for="(subItem, subIndex) in item.subMenu"
             :key="subIndex"
           >
             <!-- 选中状态的背景高亮（舍弃） -->
             <!-- <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div> -->
             <!-- 子菜单图标的选择性渲染 -->
-            <el-image class="BtuMenu_hover" :src="returnBgImage(subItem.bgImage + '-a')"></el-image>
-            <el-image class="BtuMenu" :src="returnBgImage(subItem.bgImage)"></el-image>
+            <el-image
+              class="BtuMenu_hover"
+              :src="returnBgImage(subItem.bgImage + '-a')"
+            ></el-image>
+            <el-image
+              class="BtuMenu"
+              :src="returnBgImage(subItem.bgImage)"
+            ></el-image>
             <!-- 子菜单标题 -->
             <div class="BtuMenu_title">
               {{ subItem.title }}
@@ -64,9 +79,17 @@ import CreateTaskForm from "./BottomForm/CreateTaskForm.vue";
 import MyMission from "./BottomForm/MyMission.vue";
 import SameScreenComparison from "./BottomForm/SameScreenComparison.vue";
 import UploadingData from "./BottomForm/UploadingData.vue";
+import CustomModelDialog from "./BottomForm/CustomModelDialog.vue";
 export default {
   name: "BottomMenus",
-  components: { BottomMenuSvg, CreateTaskForm, MyMission, SameScreenComparison, UploadingData },
+  components: {
+    BottomMenuSvg,
+    CreateTaskForm,
+    MyMission,
+    SameScreenComparison,
+    UploadingData,
+    CustomModelDialog,
+  },
   data() {
     return {
       // 弹窗打开状态
@@ -81,35 +104,50 @@ export default {
           title: "任务申请",
           subMenu: [
             { index: 0, title: "申请任务", bgImage: "sqrw", clickEmit: "sqrw" },
-            { index: 1, title: "我的任务", bgImage: "wdrw", clickEmit: "wdrw" }
-          ]
+            { index: 1, title: "我的任务", bgImage: "wdrw", clickEmit: "wdrw" },
+          ],
         },
         {
           index: 1,
           width: "509px",
           title: "疑点分析",
           subMenu: [
-            { index: 0, title: "疑点审计", bgImage: "ydsj", clickEmit:"caseAuditEvent" },
-            { index: 1, title: "标记疑点", bgImage: "bjyd",clickEmit:"labelCaseEvent" },
+            {
+              index: 0,
+              title: "疑点审计",
+              bgImage: "ydsj",
+              clickEmit: "caseAuditEvent",
+            },
+            {
+              index: 1,
+              title: "标记疑点",
+              bgImage: "bjyd",
+              clickEmit: "labelCaseEvent",
+            },
             { index: 2, title: "同屏对比", bgImage: "tpdb", clickEmit: "tpdb" },
-            { index: 3, title: "卷帘对比", bgImage: "jldb", clickEmit: "JLControl" },
+            {
+              index: 3,
+              title: "卷帘对比",
+              bgImage: "jldb",
+              clickEmit: "JLControl",
+            },
             { index: 4, title: "上传数据", bgImage: "scsj", clickEmit: "scsj" },
-            { index: 5, title: "自定义模型", bgImage: "zdymx" }
-          ]
+            { index: 5, title: "自定义模型", bgImage: "zdymx",clickEmit:"customModelEvent" },
+          ],
         },
         {
           index: 2,
           width: "94px",
           title: "疑点报告",
-          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }]
+          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }],
         },
         {
           index: 3,
           width: "94px",
           title: "现场勘查",
-          subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }]
-        }
-      ]
+          subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }],
+        },
+      ],
     };
   },
   mounted() {},
@@ -118,12 +156,18 @@ export default {
   methods: {
     // 根据菜单父级index和子菜单index，判断全局变量已选中底部菜单的index对比，返回状态。
     ifMenuIndex(index, subIndex) {
-      return this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex;
+      return (
+        this.$store.state.bottomMenuIndexs.index == index &&
+        this.$store.state.bottomMenuIndexs.subIndex == subIndex
+      );
     },
     // 根据菜单父级index和子菜单index，更新全局变量。
     changeBottomMenu(index, subIndex, clickEvent) {
       // 该逻辑可能会舍弃
-      this.$store.commit("changeBottomMenu", { index: index, subIndex: subIndex });
+      this.$store.commit("changeBottomMenu", {
+        index: index,
+        subIndex: subIndex,
+      });
       if (clickEvent) {
         // 调用全局事件总线中的指定事件
         this.$bus.$emit(clickEvent);
@@ -131,7 +175,10 @@ export default {
     },
     // 根据菜单参数bgImage,菜单父级index和子菜单index,判断全局变量已选中底部菜单的index对比，返回不同状态下的icon图标地址。
     returnBgImage(bgImage, index, subIndex) {
-      if (this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex) {
+      if (
+        this.$store.state.bottomMenuIndexs.index == index &&
+        this.$store.state.bottomMenuIndexs.subIndex == subIndex
+      ) {
         return "/static/images/bottomMenuIcon/" + bgImage + "-a.png";
       } else {
         return "/static/images/bottomMenuIcon/" + bgImage + ".png";
@@ -152,9 +199,9 @@ export default {
         // 否则直接切换底部菜单显示隐藏状态
         this.showBottomMenusStatus = !this.showBottomMenusStatus;
       }
-    }
+    },
   },
-  watch: {}
+  watch: {},
 };
 </script>
 
@@ -242,7 +289,12 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
       font-size: 16px;
       font-family: pingfangSC;
       font-weight: 300;

src/components/map/MapHolder.vue

@@ -23,22 +23,24 @@ export default {
     this.$bus.$on("labelCaseEvent", () => {
       this.labelCaseEvent();
     });
-    this.$bus.$on("customModelEvent", () => {
-      this.customModelEvent();
-    });
+
     //地图初始化
     this.mapInit();
     this.getJSonData();
+
+    // 地图常用渲染方法
+    // console.log(this.$store.state.mapMethodsCollection,"methods");
+    this.$store.state.mapMethodsCollection.set("RENDER",{
+      drawPolygon:this.drawPolygon
+    })
   },
-  destroy() {
+  beforeDestroyed() {
     // 当容器销毁时，需要停止监听该事件
     this.$bus.$off("JLControl");
     // 疑点审计
     this.$bus.$off("caseAuditEvent");
     // 标记疑点
     this.$bus.$off("labelCaseEvent");
-    // 自定义模型
-    this.$bus.$off("customModelEvent");
   },
   methods: {
     // 卷帘对比
@@ -51,12 +53,10 @@ export default {
     },
     // 标记疑点
     labelCaseEvent() {
+      // 开始绘制图形
       console.log("label case");
     },
-    // 自定义模型
-    customModelEvent() {
-      console.log("custom model");
-    },
+
     mapInit: function () {
       map2DViewer.map = L.map("map2DViewer", {
         attributionControl: false,
@@ -161,6 +161,9 @@ export default {
         return "#00ffd5";
       }
     },
+    drawPolygon(cid, color, show) {
+      console.log("drawPolygon");
+    },
   },
 };
 </script>

src/components/popup/CaseAuditPopup.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="case-audit"></div>
+</template>
+<script>
+/**
+ * 疑点审计弹窗
+ *
+ * 点击地图上的疑点板块时 - 会出现疑点性质一栏
+ */
+export default {
+  name: "CaseAuditPopup",
+  components: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.case-audit {
+}
+</style>

src/components/popup/LabelCasePopup.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="attribute"></div>
+  <div class="label-case"></div>
 </template>
 <script>
 /**
- * 标记疑点时辅助录入属性弹窗
+ * 标记疑点 - 辅助录入属性弹窗
+ * @author: Gao Lu
+ * @Date: 2022.11.22
  */
 export default {
   name: "LabelCasePopup",
@@ -12,6 +14,6 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.attribute {
+.label-case {
 }
 </style>

src/config/common.js

@@ -258,7 +258,36 @@ export const treeModel = [
   {
     id: publicFun.buildGuid(),
     type: "所有图层",
-    children: [],
+    children: [
+      {
+        id: publicFun.buildGuid(),
+        type: "永久基本农田",
+        cid: "yongjiu",
+        color: "#f99531",
+        children: [],
+      },
+      {
+        id: publicFun.buildGuid(),
+        type: "一般耕地",
+        cid: "yiban",
+        color: "#f9fb4b",
+        children: [],
+      },
+      {
+        id: publicFun.buildGuid(),
+        type: "建设用地减量化",
+        cid: "jianshe",
+        color: "#4ac013",
+        children: [],
+      },
+      {
+        id: publicFun.buildGuid(),
+        type: "带征地",
+        cid: "daizheng",
+        color: "#41ebfa",
+        children: [],
+      },
+    ],
   },
   {
     id: publicFun.buildGuid(),
@@ -441,3 +470,29 @@ export const waterLabelData = {
     },
   ],
 };
+
+/**
+ * 默认的所有图层类型
+ */
+export const defaultLayers = {
+  永久基本农田: {
+    id: publicFun.buildGuid(),
+    cid: "yongjiu",
+    color: "#f99531",
+  },
+  一般耕地: {
+    id: publicFun.buildGuid(),
+    cid: "yiban",
+    color: "#f9fb4b",
+  },
+  建设用地减量化: {
+    id: publicFun.buildGuid(),
+    cid: "jianshe",
+    color: "#4ac013",
+  },
+  带征地: {
+    id: publicFun.buildGuid(),
+    cid: "daizheng",
+    color: "#41ebfa",
+  },
+};

src/store/index.js

@@ -1,26 +1,33 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 // 定义是否菜单可取消选中（true：可取消选中，false：不可取消选中）【取消选中：当菜单已经为选中状态，再次点击会取消选中状态】
 const menus = true;
 export default new Vuex.Store({
   state: {
     // 头部菜单选中菜单对象（主要用于元素判断是否显示）
-    navSelect: window.localStorage.getItem('navSelect') ? JSON.parse(window.localStorage.getItem('navSelect')) : { index: "1", name: "首页", subIndex: "" },
+    navSelect: window.localStorage.getItem("navSelect")
+      ? JSON.parse(window.localStorage.getItem("navSelect"))
+      : { index: "1", name: "首页", subIndex: "" },
     // 左侧菜单选中菜单index（主要用于元素判断是否显示）
     leftMenuIndex: -1,
     // 底部菜单选中菜单index，subIndex（主要用于元素判断是否高亮）
     bottomMenuIndexs: { index: -1, subIndex: -1 },
     // 当前浏览器窗口的宽高（优化自适应布局）
-    windowsSize: { width: document.body.clientWidth, height: document.body.clientHeight }
+    windowsSize: {
+      width: document.body.clientWidth,
+      height: document.body.clientHeight,
+    },
+    // 地图常用方法集合
+    mapMethodsCollection: new Map(),
   },
   getters: {},
   mutations: {
     // 用户点击头部菜单，更新暂存对象
     changeNavSelect(state, navSelect) {
       state.navSelect = navSelect;
-      window.localStorage.setItem('navSelect', JSON.stringify(state.navSelect))
+      window.localStorage.setItem("navSelect", JSON.stringify(state.navSelect));
     },
     // 用户点击左侧菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeLeftMenuIndex(state, leftMenuIndex) {
@@ -32,18 +39,23 @@ export default new Vuex.Store({
     },
     // 用户点击底部菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeBottomMenu(state, bottomMenuIndex) {
-      if (bottomMenuIndex.index == state.bottomMenuIndexs.index && bottomMenuIndex.subIndex == state.bottomMenuIndexs.subIndex && menus) {
-        state.bottomMenuIndexs = { index: -1, subIndex: -1 }
+      if (
+        bottomMenuIndex.index == state.bottomMenuIndexs.index &&
+        bottomMenuIndex.subIndex == state.bottomMenuIndexs.subIndex &&
+        menus
+      ) {
+        state.bottomMenuIndexs = { index: -1, subIndex: -1 };
       } else {
-        state.bottomMenuIndexs = bottomMenuIndex
+        state.bottomMenuIndexs = bottomMenuIndex;
       }
     },
     changeWindowsSize(state, windowWidth, windowHeight) {
-      state.windowsSize = { width: windowWidth, height: windowHeight }
-    }
-  },
-  actions: {
+      state.windowsSize = { width: windowWidth, height: windowHeight };
+    },
+    mapMethods: (state, options) => {
+      state.mapMethodsCollection.set(options.name, options.value);
+    },
   },
-  modules: {
-  }
-})
+  actions: {},
+  modules: {},
+});

src/views/ComprehensiveAnalysis.vue

@@ -87,7 +87,9 @@
               ref="tree"
             >
               <span class="custom-tree-node" slot-scope="{ node }">
-                <template v-if="node.level === 3">
+                <template
+                  v-if="node.level === 3 || node.parent.label === '所有图层'"
+                >
                   <el-checkbox v-model="node.checked">{{
                     node.label
                   }}</el-checkbox>
@@ -155,7 +157,7 @@
 import MenuCard from "@/components/layout/MenuCard.vue";
 import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
-import { treeModel, soilLabelData, waterLabelData } from "@/config/common";
+import { treeModel, defaultLayers } from "@/config/common";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
 export default {
   name: "ComprehensiveAnalysis",
@@ -271,13 +273,6 @@ export default {
         }),
       };
     });
-
-    // for (let key in soilLabelData) {
-    //   this.rightLabelDataMap.set(key, soilLabelData[key]);
-    // }
-    // for (let key in waterLabelData) {
-    //   this.rightLabelDataMap.set(key, waterLabelData[key]);
-    // }
   },
   mounted() {},
   methods: {
@@ -323,6 +318,12 @@ export default {
         this.rightPanelTitle = data.label;
         this.originalData[data.label] = this.rightPanelDataMap.get(data.label);
         this.activeNames = ["myLabel", data.label];
+        // 渲染当前模块下的面图层
+        console.log(data,"test");
+        // map2DViewer.layers[data.label] = defaultLayers[data.label]
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .drawPolygon("", "", "");
       } else {
         delete this.originalData[data.label];
         this.activeNames = ["myLabel"];