首页menus常量配置，街道下拉框添加全局变量

src/components/common/TagTableCard.vue

@@ -2,26 +2,46 @@
   <!-- 外边框 -->
   <div class="displayFlex" style="max-height: 180px">
     <div class="displayFlex-c">
-      <div class="card card1" :style="{ background: mousemoveIndex == 0 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(0)" @click.stop="clickStop()">
-        <div>{{echartData[0].title}}</div>
-        <div>{{echartData[0].value}}<span>公顷</span></div>
+      <div
+        class="card card1"
+        :style="{ background: mousemoveIndex == 0 ? '#74ffff64' : '' }"
+        @mousemove="mousemoveEvent(0)"
+        @click.stop="clickStop()"
+      >
+        <div>{{ echartData[0].title }}</div>
+        <div>{{ echartData[0].value }}<span>公顷</span></div>
       </div>
-      <div class="card card2" :style="{ background: mousemoveIndex == 1 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(1)" @click.stop="clickStop()">
-        <div>{{echartData[1].title}}</div>
-        <div>{{echartData[1].value}}<span>公顷</span></div>
+      <div
+        class="card card2"
+        :style="{ background: mousemoveIndex == 1 ? '#74ffff64' : '' }"
+        @mousemove="mousemoveEvent(1)"
+        @click.stop="clickStop()"
+      >
+        <div>{{ echartData[1].title }}</div>
+        <div>{{ echartData[1].value }}<span>公顷</span></div>
       </div>
     </div>
     <div>
       <TagCard :data="echartData[4]"></TagCard>
     </div>
     <div class="displayFlex-c">
-      <div class="card card3" :style="{ background: mousemoveIndex == 2 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(2)" @click.stop="clickStop()">
-        <div style="text-align: right">{{echartData[2].title}}</div>
-        <div>{{echartData[2].value}}<span>公顷</span></div>
+      <div
+        class="card card3"
+        :style="{ background: mousemoveIndex == 2 ? '#74ffff64' : '' }"
+        @mousemove="mousemoveEvent(2)"
+        @click.stop="clickStop()"
+      >
+        <div style="text-align: right">{{ echartData[2].title }}</div>
+        <div>{{ echartData[2].value }}<span>公顷</span></div>
       </div>
-      <div class="card card4" :style="{ background: mousemoveIndex == 3 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(3)" @click.stop="clickStop()">
-        <div style="text-align: right">{{echartData[3].title}}</div>
-        <div>{{echartData[3].value}}<span>公顷</span></div>
+      <div
+        class="card card4"
+        :style="{ background: mousemoveIndex == 3 ? '#74ffff64' : '' }"
+        @mousemove="mousemoveEvent(3)"
+        @click.stop="clickStop()"
+      >
+        <div style="text-align: right">{{ echartData[3].title }}</div>
+        <div>{{ echartData[3].value }}<span>公顷</span></div>
       </div>
     </div>
     <div class="borders"></div>
@@ -40,26 +60,51 @@ export default {
   components: { TagCard },
   data() {
     return {
-      mousemoveIndex: 0      
+      resData: {},
+      mousemoveIndex: 0
     };
   },
-  mounted() {},
+  mounted() {
+    if (this.getDataUrl) {
+      this.$Get("/static/json/home/" + this.getDataUrl).then(
+        res => {
+          this.resData = res;
+          console.log("this.data", this.resData);
+        },
+        error => {
+          console.log("error:", error);
+        }
+      );
+    }
+  },
   /**
    * data:TagCard组件参数
    */
-  props: ["echartData"],
+  props: ["echartData", "getDataUrl"],
   methods: {
+    changeHomeSpecialTown(){
+
+    },
     mousemoveEvent(index) {
       if (this.mousemoveIndex != index) {
         this.mousemoveIndex = index;
-        this.$emit("changeMousemoveIndex",this.mousemoveIndex);
+        this.$emit("changeMousemoveIndex", this.mousemoveIndex);
       }
     },
-    clickStop(){
-      console.log("预留事件，主要是阻止click冒泡！")
+    clickStop() {
+      console.log("预留事件，主要是阻止click冒泡！");
     }
   },
-  watch: {}
+  watch: {
+    "$store.state.homeSpecialTown": {
+      handler() {
+        this.$nextTick(() => {
+          this.changeHomeSpecialTown();
+        });
+      },
+      deep: true
+    }
+  }
 };
 </script>
 

src/components/layout/MenuCard.vue

@@ -74,6 +74,7 @@
       <div class="menuMainBox_main_top" v-if="menuData.topSolt">
         <TagTableCard
           v-if="menuData.topSolt.commonName == 'TagTableCard'"
+          :getDataUrl="menuData.topSolt.commonDataGetUrl"
           :echartData="menuData.topSolt.commonData"
           @changeMousemoveIndex="changeMousemoveIndex"
         />

src/config/common.js

@@ -556,3 +556,305 @@ export const defaultLayers = {
     color: "#41ebfa",
   },
 };
+
+/**
+ * 默认菜单
+ */
+export const menusMap = {
+  left: [
+    {
+      type: "card",
+      title: "土地资源",
+      menuIndex: "1",
+      position: "left",
+      minDomWidth: 420,
+      gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" },
+      topSolt: {
+        commonName: "TagTableCard",
+        commonDataGetUrl: "layout_land.json",
+        commonData: [
+          {
+            title: "基本农田面积",
+            value: 150,
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [100, 120, 150],
+          },
+          {
+            title: "储备土地面积",
+            value: 250,
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [2000, 220, 250],
+          },
+          {
+            title: "减量化面积",
+            value: 350,
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [300, 20, 350],
+          },
+          {
+            title: "一般耕地面积",
+            value: 450,
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [40, 420, 450],
+          },
+          {
+            type: "tb",
+            title: "土地资源面积",
+            value: 172,
+            unit: "公顷",
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+    {
+      type: "card",
+      title: "水资源",
+      menuIndex: "1",
+      position: "left",
+      minDomWidth: 420,
+      gotoPageInfo: { index: "2", subIndex: "2", name: "水资源" },
+      topSolt: {
+        commonName: "TagCard",
+        commonData: [
+          {
+            type: "tb",
+            title: "水域数量",
+            value: 654,
+            unit: "条",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [40, 420, 654],
+          },
+          {
+            type: "tb",
+            title: "区管河道数量",
+            value: 654,
+            unit: "条",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [400, 420, 654],
+          },
+          {
+            type: "tb",
+            title: "镇管河道数量",
+            value: 654,
+            unit: "条",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [400, 40, 654],
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+    {
+      type: "card",
+      title: "林地资源",
+      menuIndex: "1",
+      position: "left",
+      minDomWidth: 420,
+      gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" },
+      topSolt: {
+        commonName: "TagCard",
+        commonData: [
+          {
+            type: "lr",
+            title: "林地面积",
+            value: 654,
+            unit: "公顷",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [40, 420, 654],
+          },
+          {
+            type: "lr",
+            title: "公益林面积",
+            value: 654,
+            unit: "公顷",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [400, 420, 654],
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+  ],
+  leftW: [
+    {
+      type: "imageMenu",
+      index: 0,
+      title: "基本农田被违规占用",
+      titleWidth: 81,
+      boxHeight: 236,
+      imageUrl: "/static/images/2.png",
+      menuIndex: "2",
+      subMenuIndex: "1",
+      menuName: "土地资源",
+      position: "left",
+      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+    },
+    {
+      type: "imageMenu",
+      index: 1,
+      title: "基本农田种林",
+      titleWidth: 81,
+      boxHeight: 236,
+      imageUrl: "/static/images/3.png",
+      menuIndex: "2",
+      subMenuIndex: "1",
+      menuName: "土地资源",
+      position: "left",
+      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+    },
+    {
+      type: "imageMenu",
+      index: 2,
+      title: "基本农田抛荒",
+      titleWidth: 81,
+      boxHeight: 236,
+      imageUrl: "/static/images/1.png",
+      menuIndex: "2",
+      subMenuIndex: "1",
+      menuName: "土地资源",
+      position: "left",
+      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+    },
+    {
+      type: "imageMenu",
+      index: 3,
+      title: "一般耕地被违规占用",
+      titleWidth: 81,
+      boxHeight: 236,
+      imageUrl: "/static/images/4.png",
+      menuIndex: "2",
+      subMenuIndex: "1",
+      menuName: "土地资源",
+      position: "left",
+      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+    },
+  ],
+  main: [
+    {
+      type: "chart",
+      title: "浦东新区自然资源分布",
+      boxWidth: "360",
+      boxHeight: "370",
+      boxBackground: "rgba(0,39,77,0.6)",
+      menuIndex: "1",
+      position: "top",
+      minDomWidth: 1500,
+    },
+  ],
+  right: [
+    {
+      type: "card",
+      title: "资金投入情况",
+      titleWidth: 64,
+      menuIndex: "1",
+      position: "right",
+      minDomWidth: 1000,
+      topSolt: {
+        commonName: "TagCard",
+        commonData: [
+          {
+            type: "lr",
+            title: "资金投入",
+            value: 72,
+            unit: "万元",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [100, 120, 72],
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+    {
+      type: "card",
+      title: "资源环境项目",
+      titleWidth: 64,
+      menuIndex: "1",
+      position: "right",
+      minDomWidth: 1000,
+      topSolt: {
+        commonName: "TagCard",
+        commonData: [
+          {
+            type: "tb",
+            title: "资源环境项目",
+            value: 172,
+            unit: "个",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [40, 420, 172],
+          },
+          {
+            type: "tb",
+            title: "自然资源环境项目",
+            value: 156,
+            unit: "个",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [400, 420, 156],
+          },
+          {
+            type: "tb",
+            title: "调查项目",
+            value: 188,
+            unit: "个",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [100, 40, 188],
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+    {
+      type: "card",
+      title: "历年频发问题TOP5",
+      titleWidth: 81,
+      menuIndex: "1",
+      position: "right",
+      minDomWidth: 1000,
+      gotoPageInfo: { index: "5", subIndex: "2", name: "频发问题" },
+    },
+    {
+      type: "card",
+      title: "土地类问题",
+      titleWidth: 60,
+      menuIndex: "2",
+      subMenuIndex: "1",
+      position: "right",
+      minDomWidth: 1200,
+      topSolt: {
+        commonName: "TagCard",
+        commonData: [
+          {
+            type: "lr",
+            title: "土地类疑点",
+            value: 72,
+            unit: "个",
+            categoryData: ["2019", "2020", "2021"],
+            valueData: [100, 120, 72],
+          },
+        ],
+      },
+      bottomSolt: {
+        commonName: "ChartCard",
+      },
+    },
+    {
+      type: "card",
+      title: "土地类问题TOP5",
+      titleWidth: 81,
+      menuIndex: "2",
+      subMenuIndex: "1",
+      position: "right",
+      minDomWidth: 1200,
+    },
+  ]
+}

src/main.js

@@ -13,7 +13,7 @@ import SvgIcon from "@/components/SvgIcon";
 Vue.component("svg-icon", SvgIcon);
 import $ from "jquery";
 import { drag } from "./directives/drag";
-import { post, postform } from "./utils/request.js";
+import { get, post, postform } from "./utils/request.js";
 import urls from "./api/url";
 import CryptoJS from "./utils/publicFunction.js";
 // 引入dayjs库
@@ -23,6 +23,7 @@ import * as echarts from "echarts";
 Vue.directive("drag", drag);
 Vue.prototype.$CryptoJS = CryptoJS;
 Vue.prototype.$Post = post;
+Vue.prototype.$Get = get;
 Vue.prototype.$Echarts = echarts;
 Vue.prototype.$dayjs = dayjs;
 Vue.prototype.$PostForm = postform

src/store/index.js

@@ -40,7 +40,9 @@ export default new Vuex.Store({
     // 综合分析疑点属性弹窗
     attrTableShow: false,
     // 综合分析修改标记弹窗
-    updateCasePopupShow:false
+    updateCasePopupShow:false,
+    // 首页所属街道全局暂存变量
+    homeSpecialTown: "全部"
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
@@ -48,6 +50,9 @@ export default new Vuex.Store({
     treeDataCollection: (state) => state.treeDataCollection,
   },
   mutations: {
+    changeHomeSpecialTown(state, homeSpecialTown){
+      state.homeSpecialTown = homeSpecialTown;
+    },
     changeBackMenu(state, backMenu) {
       state.backMenu = backMenu;
     },

src/views/HomeView.vue

@@ -167,7 +167,7 @@
 <script>
 import MapHolder from "@/components/map/MapHolder.vue";
 import Header from "@/components/layout/Header.vue";
-import MenuCard from "@/components/layout/MenuCard";
+import MenuCard from "@/components/layout/MenuCard.vue";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
 import {
@@ -176,6 +176,7 @@ import {
   soilData,
   waterData,
   forestryData,
+  menusMap
 } from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
@@ -224,303 +225,7 @@ export default {
       testTitle: "土地资源",
       activeIndex: 1,
       // 菜单配置，后期最好根据用户权限通过后台动态返回。
-      menus: {
-        left: [
-          {
-            type: "card",
-            title: "土地资源",
-            menuIndex: "1",
-            position: "left",
-            minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" },
-            topSolt: {
-              commonName: "TagTableCard",
-              commonData: [
-                {
-                  title: "基本农田面积",
-                  value: 150,
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 150],
-                },
-                {
-                  title: "储备土地面积",
-                  value: 250,
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [2000, 220, 250],
-                },
-                {
-                  title: "减量化面积",
-                  value: 350,
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [300, 20, 350],
-                },
-                {
-                  title: "一般耕地面积",
-                  value: 450,
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 450],
-                },
-                {
-                  type: "tb",
-                  title: "土地资源面积",
-                  value: 172,
-                  unit: "公顷",
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-          {
-            type: "card",
-            title: "水资源",
-            menuIndex: "1",
-            position: "left",
-            minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "2", name: "水资源" },
-            topSolt: {
-              commonName: "TagCard",
-              commonData: [
-                {
-                  type: "tb",
-                  title: "水域数量",
-                  value: 654,
-                  unit: "条",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 654],
-                },
-                {
-                  type: "tb",
-                  title: "区管河道数量",
-                  value: 654,
-                  unit: "条",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 654],
-                },
-                {
-                  type: "tb",
-                  title: "镇管河道数量",
-                  value: 654,
-                  unit: "条",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 40, 654],
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-          {
-            type: "card",
-            title: "林地资源",
-            menuIndex: "1",
-            position: "left",
-            minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" },
-            topSolt: {
-              commonName: "TagCard",
-              commonData: [
-                {
-                  type: "lr",
-                  title: "林地面积",
-                  value: 654,
-                  unit: "公顷",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 654],
-                },
-                {
-                  type: "lr",
-                  title: "公益林面积",
-                  value: 654,
-                  unit: "公顷",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 654],
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-        ],
-        leftW: [
-          {
-            type: "imageMenu",
-            index: 0,
-            title: "基本农田被违规占用",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/2.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            menuName: "土地资源",
-            position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-          },
-          {
-            type: "imageMenu",
-            index: 1,
-            title: "基本农田种林",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/3.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            menuName: "土地资源",
-            position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-          },
-          {
-            type: "imageMenu",
-            index: 2,
-            title: "基本农田抛荒",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/1.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            menuName: "土地资源",
-            position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-          },
-          {
-            type: "imageMenu",
-            index: 3,
-            title: "一般耕地被违规占用",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/4.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            menuName: "土地资源",
-            position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-          },
-        ],
-        main: [
-          {
-            type: "chart",
-            title: "浦东新区自然资源分布",
-            boxWidth: "360",
-            boxHeight: "370",
-            boxBackground: "rgba(0,39,77,0.6)",
-            menuIndex: "1",
-            position: "top",
-            minDomWidth: 1500,
-          },
-        ],
-        right: [
-          {
-            type: "card",
-            title: "资金投入情况",
-            titleWidth: 64,
-            menuIndex: "1",
-            position: "right",
-            minDomWidth: 1000,
-            topSolt: {
-              commonName: "TagCard",
-              commonData: [
-                {
-                  type: "lr",
-                  title: "资金投入",
-                  value: 72,
-                  unit: "万元",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 72],
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-          {
-            type: "card",
-            title: "资源环境项目",
-            titleWidth: 64,
-            menuIndex: "1",
-            position: "right",
-            minDomWidth: 1000,
-            topSolt: {
-              commonName: "TagCard",
-              commonData: [
-                {
-                  type: "tb",
-                  title: "资源环境项目",
-                  value: 172,
-                  unit: "个",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 172],
-                },
-                {
-                  type: "tb",
-                  title: "自然资源环境项目",
-                  value: 156,
-                  unit: "个",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 156],
-                },
-                {
-                  type: "tb",
-                  title: "调查项目",
-                  value: 188,
-                  unit: "个",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 40, 188],
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-          {
-            type: "card",
-            title: "历年频发问题TOP5",
-            titleWidth: 81,
-            menuIndex: "1",
-            position: "right",
-            minDomWidth: 1000,
-            gotoPageInfo: { index: "5", subIndex: "2", name: "频发问题" },
-          },
-          {
-            type: "card",
-            title: "土地类问题",
-            titleWidth: 60,
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "right",
-            minDomWidth: 1200,
-            topSolt: {
-              commonName: "TagCard",
-              commonData: [
-                {
-                  type: "lr",
-                  title: "土地类疑点",
-                  value: 72,
-                  unit: "个",
-                  categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 72],
-                },
-              ],
-            },
-            bottomSolt: {
-              commonName: "ChartCard",
-            },
-          },
-          {
-            type: "card",
-            title: "土地类问题TOP5",
-            titleWidth: 81,
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "right",
-            minDomWidth: 1200,
-          },
-        ],
-      },
+      menus: {},
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
       legendTitle: [
@@ -626,6 +331,7 @@ export default {
     },
     // 镇域专题下拉框
     specialTownSelect(val) {
+      this.$store.commit("changeHomeSpecialTown", val);
       if (val === "全部") {
         this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 10);
       } else {
@@ -635,6 +341,7 @@ export default {
     },
   },
   created() {
+    this.menus = menusMap;
     // 目录
     let category = Object.keys(streetLocation);
     // 默认A类