自定义模型和树结构结合

babel.config.js

@@ -1,15 +1,4 @@
-// const webpack = require("webpack");
+
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
-  // resolve: {
-  //   alias: {
-  //     jquery: "jquery",
-  //   },
-  // },
-  // plugins: [
-  //   new webpack.ProvidePlugin({
-  //     $: "jquery",
-  //     jQuery: "jquery",
-  //   }),
-  // ],
 };

package-lock.json

@@ -13,6 +13,7 @@
         "deep-clone": "^3.0.3",
         "echarts": "^5.4.0",
         "element-ui": "^2.15.10",
+        "html2canvas": "^1.4.1",
         "jquery": "^3.6.1",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -3259,6 +3260,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -4014,6 +4023,14 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.7.2",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.2.tgz",
@@ -5464,6 +5481,18 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -8872,6 +8901,14 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
@@ -9131,6 +9168,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",

src/assets/global.css

@@ -1,3 +1,21 @@
+/* 全局滚动条 */
+/*滚动条整体部分*/
+::-webkit-scrollbar {
+  width: 0;
+}
+/*正常情况下滑块的样式*/
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(4, 103, 143, 0.9);
+}
+/*正常时候的主干部分*/
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.3);
+}
+
 /* @borderColor: #00aaff;
 @borderColor32: #00aaff32;
 @borderColor64: #00aaff64;
@@ -28,6 +46,10 @@
   background: rgba(255, 255, 255, 0) !important;
 }
 
+.el-tree-node:focus > .el-tree-node__content {
+  background: transparent !important;
+}
+
 /* el-collapse */
 
 .el-collapse {
@@ -230,5 +252,5 @@ th {
 }
 
 .leaflet-popup-tip {
-  background: #002f56;;
-}
+  background: #002f56;
+}

src/components/common/BottomForm/CustomModelDialog.vue

@@ -1,27 +1,26 @@
 <template>
   <el-dialog
     title="自定义模型"
-    :visible.sync="outerDialogVisible"
+    :visible="outerDialogVisible"
     width="40%"
     center
-    :before-close="handleClose"
   >
     <el-dialog
       title="请输入模型名称"
       width="20%"
-      :visible.sync="innerDialogVisible"
+      :visible="innerDialogVisible"
       append-to-body
       center
       ><div class="model-name">
         <div class="model-name-title">名称 :</div>
-        <el-input v-model="inputName" placeholder="自定义模型1"></el-input>
+        <el-input v-model="inputName" placeholder="请输入模型名称"></el-input>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="clearDialogVisible()">取 消</el-button>
+        <el-button @click="innerDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="confirm()">确认</el-button>
       </span>
     </el-dialog>
-    <el-checkbox-group v-model="checkList">
+    <el-checkbox-group v-model="checkedList">
       <el-checkbox
         v-for="item in checkArr"
         :key="item"
@@ -47,11 +46,8 @@ export default {
     return {
       outerDialogVisible: false,
       innerDialogVisible: false,
-      inputName: "",
-      model: {
-        name: "",
-      },
-      checkList: [],
+      inputName: "自定义模型1",
+      checkedList: [],
       checkArr: [
         "永久基本农田",
         "建设用地减量化",
@@ -65,61 +61,130 @@ export default {
       ],
     };
   },
+  watch: {
+    checkedList(val) {
+      console.log(val, "checkedList");
+    },
+  },
   mounted() {
     // 监听自定义模型
     this.$bus.$on("customModelEvent", () => {
       this.customModelEvent();
     });
     // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
-    this.$bus.$on("handleClose", () => {
-      if (this.dialogVisible) {
-        this.handleClose();
-      }
+    // this.$bus.$on("handleClose", () => {
+    //   if (this.dialogVisible) {
+    //     this.handleClose();
+    //   }
+    // });
+
+    // 监听模型修改事件
+    this.$bus.$on("updateModel", (node) => {
+      console.log("监听模型中");
+      console.log(node, "节点数据");
+      this.outerDialogVisible = true;
+      this.checkedList = node.data.data;
+      this.inputName = node.data.label;
+      this.$store.state.modelStatus = "modify";
     });
   },
   beforeDestroyed() {
     // 当容器销毁时，需要停止监听该事件
     this.$bus.$off("customModelEvent");
+    this.$bus.$off("updateModel");
   },
   methods: {
     // 弹窗关闭时询问
     handleClose() {
-      if (this.outerDialogVisible) {
-        this.$confirm("确认关闭吗?").then(() => {
-          this.clearDialogVisible();
-        });
-      }
+      // if (this.outerDialogVisible) {
+      //   this.$confirm("").then(() => {
+      //     this.clearDialogVisible();
+      //   });
+      // }
     },
     clearDialogVisible() {
       this.outerDialogVisible = false;
       this.innerDialogVisible = false;
     },
-    // 自定义模型
+    // 底部按钮自定义模型事件
     customModelEvent() {
+      this.$store.state.modelStatus = "create";
       this.outerDialogVisible = true;
-      console.log("custom model");
+      this.checkedList = [];
+      this.inputName = "自定义模型1";
     },
     saveModel() {
-      this.innerDialogVisible = true;
+      if (this.checkedList.length < 2) {
+        this.$message.info("请至少选择两个类型!");
+      } else {
+        if (this.$store.state.modelStatus === "create") {
+          this.innerDialogVisible = true;
+        } else {
+          this.confirm();
+        }
+      }
     },
     confirm() {
-      this.$message.success("模型以保存");
-      this.model.name = this.inputName;
+      this.$confirm("确认保存吗?").then(() => {
+        this.$message.success("模型以保存");
+        this.clearDialogVisible();
+        // modify -- 改变数组类型
+        if (this.$store.state.modelStatus === "modify") {
+          this.$store.state.customModelsArr.map((v) => {
+            if (v.name === this.inputName) {
+              v.data = this.checkedList;
+            }
+          });
+        }
+
+        console.log(this.$store.state.customModelsArr, "先获取的模型数据");
+        // create -- 创建新的数组
+        if (this.$store.state.modelStatus === "create") {
+          this.$store.state.customModelsArr.push({
+            name: this.inputName,
+            data: this.checkedList,
+          });
+        }
+      });
     },
   },
 };
 </script>
 <style lang="less" scoped>
 .model-name {
+  // pointer-events: auto;
   width: 100%;
   height: 100%;
   display: flex;
   &-title {
-    width: 20%;
+    width: 30%;
     height: 100%;
     color: #fff;
     font-size: 18px;
     line-height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .el-input {
+    width: 70%;
   }
 }
+
+.el-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.el-checkbox {
+  font-weight: 500;
+  font-size: 15px;
+  cursor: pointer;
+  width: 27%;
+  height: 30px;
+  line-height: 30px;
+  color: #e6e6e6;
+  margin-right: 0;
+}
 </style>

src/store/index.js

@@ -21,8 +21,13 @@ export default new Vuex.Store({
     },
     // 地图常用方法集合
     mapMethodsCollection: new Map(),
+    customModelsArr: [],
+    // 自定义模型状态改变 -- 修改或创建
+    modelStatus: "create",
+  },
+  getters: {
+    customModelsArr: (state) => state.customModelsArr,
   },
-  getters: {},
   mutations: {
     // 用户点击头部菜单，更新暂存对象
     changeNavSelect(state, navSelect) {
@@ -55,6 +60,12 @@ export default new Vuex.Store({
     mapMethods: (state, options) => {
       state.mapMethodsCollection.set(options.name, options.value);
     },
+    changeCustomModelsArr: (state, data) => {
+      state.customModelsArr = data;
+    },
+    changeModelStatus: (state, data) => {
+      state.modelStatus = data;
+    },
   },
   actions: {},
   modules: {},

src/views/ComprehensiveAnalysis.vue

@@ -13,21 +13,8 @@
       :tableType="tableType"
       @close="closeEvent"
     />
-    <!-- <div class="comprehensive-analysis-popup" v-if="true"></div> -->
     <!-- 右上角工具栏 -->
     <!-- <div class="comprehensive-analysis-toolbar">
-      <div
-        class="layer-display"
-        @click="showLayers"
-        :class="{ 'display-true': showLayersValue }"
-      ></div>
-
-      <div
-        class="layers-control-icon"
-        @click="layerControlEvent"
-        :class="{ 'control-true': layerControlBtn }"
-      ></div>
-
       <div class="searchbox">
         <el-input
           placeholder="请输入地址、地块名称等"
@@ -74,7 +61,15 @@
     <transition name="fade-left">
       <div class="comprehensive-analysis-left" v-show="showLeftBox">
         <div class="control-container">
-          <div @click="leftPanelDisplay('hide')"></div>
+          <el-input
+            class="control-container-input"
+            v-model="filterText"
+            placeholder="请输入文本"
+          ></el-input>
+          <div
+            class="control-container-btn"
+            @click="leftPanelDisplay('hide')"
+          ></div>
         </div>
         <div class="contant-container">
           <div class="contant-container-innerbox">
@@ -85,14 +80,35 @@
               @check-change="handleCheckChange"
               node-key="id"
               ref="tree"
+              :filter-node-method="filterNode"
             >
               <span class="custom-tree-node" slot-scope="{ node }">
                 <template
-                  v-if="node.level === 3 || node.parent.label === '所有图层'"
+                  v-if="
+                    node.level === 3 ||
+                    node.parent.label === '所有图层' ||
+                    node.parent.label === '我的模型'
+                  "
                 >
                   <el-checkbox v-model="node.checked">{{
                     node.label
                   }}</el-checkbox>
+                  <span style="position: relative; left: 30px">
+                    <el-button
+                      v-if="node.parent.label === '我的模型'"
+                      size="small"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="handleUpdate(node)"
+                    ></el-button>
+                    <el-button
+                      v-if="node.parent.label === '我的模型'"
+                      size="small"
+                      type="text"
+                      icon="el-icon-delete"
+                      @click="handleDelete(node)"
+                    ></el-button>
+                  </span>
                 </template>
                 <template v-else>
                   <div
@@ -159,6 +175,7 @@ import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
 import { treeModel, defaultLayers } from "@/config/common";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
+import CustomModelDialog from "@/components/common/BottomForm/CustomModelDialog.vue";
 import { get } from "@/utils/request";
 export default {
   name: "ComprehensiveAnalysis",
@@ -166,6 +183,7 @@ export default {
     MenuCard,
     Legend,
     AttributePopup,
+    CustomModelDialog,
   },
   data() {
     return {
@@ -208,23 +226,11 @@ export default {
           name: "疑点7",
         },
       ],
-      // searchInput: "",
-      // showLayersValue: false,
-      // layerControlBtn: false,
-      // layerControlBox: false,
+      // searchInput: "",,
       showLeftBox: true,
       showRightBox: true,
       leftBoxBtn: false,
       rightBoxBtn: false,
-      // layersData: [
-      //   {
-      //     color: `rgb(${Math.random() * 100},${Math.random() * 100},${
-      //       Math.random() * 100
-      //     }`,
-      //     type: "",
-      //   },
-      //   ,
-      // ],
       modelData: [],
       defaultProps: {
         children: "children",
@@ -232,28 +238,49 @@ export default {
       },
       legendIcon: [],
       legendTitle: [],
+      // 我的模型相关数据
+      myModel: null,
+      filterText: "",
+      myMap: new Map(),
     };
   },
+  computed: {
+    getCustomModel() {
+      return this.$store.state.customModelsArr;
+    },
+  },
   watch: {
-    showLayersValue(val) {
-      if (val) {
-        console.log("显示图层");
-      } else {
-        console.log("隐藏图层");
-      }
+    filterText(val) {
+      this.$refs.tree.filter(val);
     },
-    layerControlBtn(val) {
-      if (val) {
-        this.layerControlBox = true;
-      } else {
-        this.layerControlBox = false;
-      }
+    myModel(val) {
+      console.log(val, "监听综合分析中的我的模型");
+    },
+    getCustomModel: {
+      handler(val) {
+        console.log(val, "目前存在的自定义模型");
+        let myModelRef = this.$refs.tree.data[2];
+        if (myModelRef.label === "我的模型") {
+          this.$refs.tree.data[2].children = val.map((ele) => {
+            return {
+              id: publicFun.buildGuid(),
+              label: ele.name,
+              data: ele.data,
+            };
+          });
+          console.log(myModelRef.children, "最新的数据");
+        }
+      },
+      deep: true,
     },
   },
   created() {
     this.modelData = [];
     // 分别对应1、2、3级节点
     this.modelData = treeModel.map((item1) => {
+      if (item1.type === "我的模型") {
+        this.myModel = item1;
+      }
       return {
         id: item1.id,
         label: item1.type,
@@ -275,28 +302,12 @@ export default {
       };
     });
   },
-  mounted() {
-    // this.$nextTick(() => {
-    //   let center = [31.074402645978726, 121.72935492296206]
-    //   let zoom = 16;
-    //   this.$store.state.mapMethodsCollection
-    //     .get("RENDER")
-    //     .setView(center, zoom);
-    // });
-  },
+  mounted() {},
   methods: {
     // 回退事件
     backEvent() {
       console.log("综合分析回退事件");
     },
-    // 控制图层的显示与隐藏
-    showLayers() {
-      this.showLayersValue = !this.showLayersValue;
-    },
-    // 图层控制面板显示与隐藏
-    layerControlEvent() {
-      this.layerControlBtn = !this.layerControlBtn;
-    },
     // 左侧面板的显示与隐藏
     leftPanelDisplay(val) {
       if (val === "show") {
@@ -321,6 +332,21 @@ export default {
         this.rightBoxBtn = true;
       }
     },
+    // 节点过滤事件
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    handleUpdate(node) {
+      // console.log(node.data.data, "涉及的图层");
+      // console.log(node.data.label);
+      // console.log(node.data.id);
+      this.$bus.$emit("updateModel", node);
+    },
+    handleDelete(node) {
+      console.log(node, "删除节点");
+    },
+    // 节点change事件
     handleCheckChange(data, checked) {
       let guid = data.id;
       if (checked) {
@@ -594,12 +620,12 @@ export default {
     pointer-events: auto;
     .control-container {
       width: 100%;
-      height: 5%;
+      height: 8%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       position: relative;
-      & > div {
+      &-btn {
         width: 30px;
         height: 30px;
         background: url("../assets/image/close.png") no-repeat center;
@@ -608,10 +634,21 @@ export default {
         right: 3px;
         cursor: pointer;
       }
+      &-input {
+        width: 320px;
+        position: absolute;
+        bottom: 5px;
+        left: 30px;
+        /deep/.el-input__inner {
+          font-size: 15px;
+          height: 35px;
+        }
+      }
     }
     .contant-container {
       width: 100%;
-      height: 95%;
+      height: 92%;
+      overflow: auto;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -638,13 +675,13 @@ export default {
           border: 7px solid transparent;
           border-top-color: #fff;
         }
-        // .custom-tree-node{
-        //   position: relative;
-        //   .tree-arrow{
-
-        //   }
-        // }
-        // background: yellow;
+        .custom-tree-node {
+          position: relative;
+          width: 250px;
+          .el-checkbox {
+            width: 50%;
+          }
+        }
       }
     }
   }

src/views/HomeView.vue

@@ -13,7 +13,7 @@
           menuIndex: '2',
           subMenuIndex: '5',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
       <div class="select-title">所属街道</div>
@@ -31,7 +31,7 @@
               type: 'card',
               title: streetSelectVal + '资源问题',
               titleWidth: 40,
-              boxWidth: '780'
+              boxWidth: '780',
             }"
           >
             <template slot="top">
@@ -47,7 +47,7 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -56,7 +56,7 @@
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -65,7 +65,10 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-if="$ifMenu('3', '')"
+    />
 
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
@@ -156,7 +159,7 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
     </div>
@@ -168,7 +171,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]">
         <template slot="top">
@@ -178,7 +182,8 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]">
         <template slot="top">
@@ -194,7 +199,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]">
         <template slot="top">
@@ -214,7 +220,13 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -241,7 +253,7 @@ export default {
     BottomMenus,
     ComprehensiveAnalysis,
     TagProblemCard,
-    Legend
+    Legend,
   },
   data() {
     return {
@@ -249,28 +261,46 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
       // 菜单配置，后期最好根据用户权限通过后台动态返回。
       menus: {
         left: [
-          { type: "card", title: "土地资源", menuIndex: "1", position: "left", minDomWidth: 420 },
-          { type: "card", title: "水资源", menuIndex: "1", position: "left", minDomWidth: 420 },
-          { type: "card", title: "林地资源", menuIndex: "1", position: "left", minDomWidth: 420 },
+          {
+            type: "card",
+            title: "土地资源",
+            menuIndex: "1",
+            position: "left",
+            minDomWidth: 420,
+          },
+          {
+            type: "card",
+            title: "水资源",
+            menuIndex: "1",
+            position: "left",
+            minDomWidth: 420,
+          },
+          {
+            type: "card",
+            title: "林地资源",
+            menuIndex: "1",
+            position: "left",
+            minDomWidth: 420,
+          },
           {
             type: "imageMenu",
             index: 0,
@@ -280,7 +310,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -291,7 +321,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -302,7 +332,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -313,7 +343,7 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -324,7 +354,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -335,7 +365,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -346,7 +376,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -357,8 +387,8 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
-          }
+            position: "left",
+          },
         ],
         main: [
           {
@@ -369,8 +399,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-            minDomWidth: 1500
-          }
+            minDomWidth: 1500,
+          },
         ],
         right: [
           {
@@ -379,7 +409,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -387,7 +417,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -395,7 +425,7 @@ export default {
             titleWidth: 81,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -404,7 +434,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200
+            minDomWidth: 1200,
           },
           {
             type: "card",
@@ -413,9 +443,9 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200
-          }
-        ]
+            minDomWidth: 1200,
+          },
+        ],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -424,35 +454,35 @@ export default {
       legendIcon: [
         {
           background: "#E565FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#0055FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#00FFD5",
-          border: "none"
-        }
+          border: "none",
+        },
       ],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -461,12 +491,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -505,7 +535,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+    },
   },
   created() {
     // 目录
@@ -520,10 +550,19 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
-      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
+      let ADataSum =
+        soilData[category[i]].A +
+        waterData[category[i]].A +
+        forestryData[category[i]].A;
+      let BDataSum =
+        soilData[category[i]].B +
+        waterData[category[i]].B +
+        forestryData[category[i]].B;
 
-      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
+      let CDataSum =
+        soilData[category[i]].C +
+        waterData[category[i]].C +
+        forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -534,21 +573,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach(item => {
+    ADataArr.forEach((item) => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach(item => {
+    BDataArr.forEach((item) => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach(item => {
+    CDataArr.forEach((item) => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -564,10 +603,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -808,14 +847,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }