首页菜单配置化

src/components/layout/Header.vue

@@ -133,6 +133,11 @@ export default {
             if (tableData.length > 0) {
               this.systemInfo = tableData[0];
               let systemVersion = localStorage.getItem("SYSTEM_VERSION");
+              if (this.systemInfo.c_menus_list) {
+                let menus = eval('('+this.systemInfo.c_menus_list+')');
+                this.$emit("initMenu", menus);
+              }
+
               if (systemVersion) {
                 if (systemVersion != this.systemInfo.version) {
                   this.$message.success("新版本已发布！自动更新中！");

src/config/common.js

@@ -555,9 +555,9 @@ export const defaultLayers = {
 };
 
 /**
- * 默认菜单
+ * 在线菜单配置
  */
-export const menusMap = {
+const menuOnLine = {
   left: [
     {
       type: "card",
@@ -565,7 +565,11 @@ export const menusMap = {
       menuIndex: "1",
       position: "left",
       minDomWidth: 420,
-      gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" },
+      gotoPageInfo: {
+        index: "2",
+        subIndex: "1",
+        name: "土地资源"
+      },
       topSolt: {
         commonName: "TagTableCard",
         commonDataGetUrl: "layout_land.json",
@@ -574,41 +578,75 @@ export const menusMap = {
             title: "基本农田面积",
             value: 150,
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [100, 120, 150],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              100,
+              120,
+              150
+            ]
           },
           {
             title: "储备土地面积",
             value: 250,
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [2000, 220, 250],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              2000,
+              220,
+              250
+            ]
           },
           {
             title: "减量化面积",
             value: 350,
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [300, 20, 350],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              300,
+              20,
+              350
+            ]
           },
           {
             title: "一般耕地面积",
             value: 450,
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [40, 420, 450],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              40,
+              420,
+              450
+            ]
           },
           {
             type: "tb",
             title: "土地资源面积",
-            valueData: [172],
-            unit: "公顷",
-          },
-        ],
+            valueData: [
+              172
+            ],
+            unit: "公顷"
+          }
+        ]
       },
       bottomSolt: {
-        commonName: "ChartCard",
-      },
+        commonName: "ChartCard"
+      }
     },
     {
       type: "card",
@@ -616,7 +654,11 @@ export const menusMap = {
       menuIndex: "1",
       position: "left",
       minDomWidth: 420,
-      gotoPageInfo: { index: "2", subIndex: "2", name: "水资源" },
+      gotoPageInfo: {
+        index: "2",
+        subIndex: "2",
+        name: "水资源"
+      },
       topSolt: {
         commonName: "TagCard",
         commonDataGetUrl: "layout_water.json",
@@ -625,28 +667,52 @@ export const menusMap = {
             type: "tb",
             title: "水域面积",
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [40, 420, 654],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              40,
+              420,
+              654
+            ]
           },
           {
             type: "tb",
             title: "区管河道数量",
             unit: "条",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [400, 420, 654],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              400,
+              420,
+              654
+            ]
           },
           {
             type: "tb",
             title: "镇管河道数量",
             unit: "条",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [400, 40, 654],
-          },
-        ],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              400,
+              40,
+              654
+            ]
+          }
+        ]
       },
       bottomSolt: {
-        commonName: "ChartCard",
-      },
+        commonName: "ChartCard"
+      }
     },
     {
       type: "card",
@@ -654,7 +720,11 @@ export const menusMap = {
       menuIndex: "1",
       position: "left",
       minDomWidth: 420,
-      gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" },
+      gotoPageInfo: {
+        index: "2",
+        subIndex: "3",
+        name: "林地资源"
+      },
       topSolt: {
         commonName: "TagCard",
         commonDataGetUrl: "layout_forest.json",
@@ -663,22 +733,38 @@ export const menusMap = {
             type: "lr",
             title: "林地面积",
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [40, 420, 654],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              40,
+              420,
+              654
+            ]
           },
           {
             type: "lr",
             title: "公益林面积",
             unit: "公顷",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [400, 420, 654],
-          },
-        ],
+            categoryData: [
+              "2019",
+              "2020",
+              "2021"
+            ],
+            valueData: [
+              400,
+              420,
+              654
+            ]
+          }
+        ]
       },
       bottomSolt: {
-        commonName: "ChartCard",
-      },
-    },
+        commonName: "ChartCard"
+      }
+    }
   ],
   leftW: [
     [
@@ -693,7 +779,11 @@ export const menusMap = {
         subMenuIndex: "1",
         menuName: "土地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -706,7 +796,11 @@ export const menusMap = {
         subMenuIndex: "1",
         menuName: "土地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -719,7 +813,11 @@ export const menusMap = {
         subMenuIndex: "1",
         menuName: "土地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -732,8 +830,12 @@ export const menusMap = {
         subMenuIndex: "1",
         menuName: "土地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-      },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
+      }
     ],
     [
       {
@@ -747,7 +849,11 @@ export const menusMap = {
         subMenuIndex: "2",
         menuName: "水资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -760,7 +866,11 @@ export const menusMap = {
         subMenuIndex: "2",
         menuName: "水资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -773,8 +883,12 @@ export const menusMap = {
         subMenuIndex: "2",
         menuName: "水资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-      },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
+      }
     ],
     [
       {
@@ -788,7 +902,11 @@ export const menusMap = {
         subMenuIndex: "3",
         menuName: "林地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
       },
       {
         type: "imageMenu",
@@ -801,9 +919,13 @@ export const menusMap = {
         subMenuIndex: "3",
         menuName: "林地资源",
         position: "left",
-        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-      },
-    ],
+        gotoPageInfo: {
+          index: "3",
+          subIndex: "",
+          name: "综合分析"
+        }
+      }
+    ]
   ],
   main: [
     {
@@ -814,144 +936,215 @@ export const menusMap = {
       boxBackground: "rgba(0,39,77,0.6)",
       menuIndex: "1",
       position: "top",
-      minDomWidth: 1500,
-    },
+      minDomWidth: 1500
+    }
   ],
-  right: [[
-
-    {
-      type: "card",
-      title: "资金投入情况",
-      titleWidth: 64,
-      menuIndex: "1",
-      position: "right",
-      minDomWidth: 1000,
-      columnId: 31,
-      topSolt: {
-        commonName: "TagCard",
-        // commonDataGetUrl: "layout_money.json",
-        commonData: [
-          {
-            type: "lr",
-            title: "资金投入",
-            unit: "万元",
-            categoryData: [],
-            valueData: [],
-          },
-        ],
+  right: [
+    [
+      {
+        type: "card",
+        title: "资金投入情况",
+        titleWidth: 64,
+        menuIndex: "1",
+        position: "right",
+        minDomWidth: 1000,
+        columnId: 31,
+        topSolt: {
+          commonName: "TagCard",
+          commonData: [
+            {
+              type: "lr",
+              title: "资金投入",
+              unit: "万元",
+              categoryData: [],
+              valueData: []
+            }
+          ]
+        },
+        bottomSolt: {
+          commonName: "ChartCard"
+        }
       },
-      bottomSolt: {
-        commonName: "ChartCard",
+      {
+        type: "card",
+        title: "资源环境项目",
+        titleWidth: 64,
+        menuIndex: "1",
+        position: "right",
+        minDomWidth: 1000,
+        topSolt: {
+          commonName: "TagCard",
+          commonDataGetUrl: "layout_project.json",
+          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: "资源环境项目",
-      titleWidth: 64,
-      menuIndex: "1",
-      position: "right",
-      minDomWidth: 1000,
-      topSolt: {
-        commonName: "TagCard",
-        commonDataGetUrl: "layout_project.json",
-        commonData: [
+      {
+        type: "card",
+        title: "历年频发问题TOP5",
+        titleWidth: 81,
+        menuIndex: "1",
+        position: "right",
+        minDomWidth: 1000,
+        getUrl: "/dms/content/selectGroupByCountOrderBy",
+        columnId: 24,
+        pageSize: 5,
+        field: "c_wtfl",
+        dataType: "all",
+        dataSize: 5,
+        topData: [
           {
-            type: "tb",
-            title: "资源环境项目",
-            value: 172,
-            unit: "个",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [40, 420, 172],
+            number: 0,
+            c_wtfl: "--"
           },
           {
-            type: "tb",
-            title: "自然资源环境项目",
-            value: 156,
-            unit: "个",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [400, 420, 156],
+            number: 0,
+            c_wtfl: "--"
           },
           {
-            type: "tb",
-            title: "调查项目",
-            value: 188,
-            unit: "个",
-            categoryData: ["2019", "2020", "2021"],
-            valueData: [100, 40, 188],
+            number: 0,
+            c_wtfl: "--"
+          },
+          {
+            number: 0,
+            c_wtfl: "--"
           },
+          {
+            number: 0,
+            c_wtfl: "--"
+          }
         ],
-      },
-      bottomSolt: {
-        commonName: "ChartCard",
-      },
-    },
-    {
-      type: "card",
-      title: "历年频发问题TOP5",
-      titleWidth: 81,
-      menuIndex: "1",
-      position: "right",
-      minDomWidth: 1000,
-      getUrl: "/dms/content/selectGroupByCountOrderBy",
-      columnId: 24,
-      pageSize: 5,
-      field: "c_wtfl",
-      dataType: "all",
-      dataSize: 5,
-      topData: [{ number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }],
-      // sortField: {
-      //   field: "c_year",
-      //   orderByType: 1
-      // },
-      commonName: "TOP",
-      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],
+        commonName: "TOP",
+        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,
-    commonName: "TOP",
-    getUrl: "/dms/content/selectGroupByCountOrderBy",
-    columnId: 24,
-    pageSize: 5,
-    field: "c_wtfl",
-    dataType: "all",
-    dataSize: 5,
-    topData: [{ number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }, { number: 0, c_wtfl: "--" }],
-  }]
-
-  ],
-};
+        bottomSolt: {
+          commonName: "ChartCard"
+        }
+      },
+      {
+        type: "card",
+        title: "土地类问题TOP5",
+        titleWidth: 81,
+        menuIndex: "2",
+        subMenuIndex: "1",
+        position: "right",
+        minDomWidth: 1200,
+        commonName: "TOP",
+        getUrl: "/dms/content/selectGroupByCountOrderBy",
+        columnId: 24,
+        pageSize: 5,
+        field: "c_wtfl",
+        dataType: "all",
+        dataSize: 5,
+        topData: [
+          {
+            number: 0,
+            c_wtfl: "--"
+          },
+          {
+            number: 0,
+            c_wtfl: "--"
+          },
+          {
+            number: 0,
+            c_wtfl: "--"
+          },
+          {
+            number: 0,
+            c_wtfl: "--"
+          },
+          {
+            number: 0,
+            c_wtfl: "--"
+          }
+        ]
+      }
+    ]
+  ]
+};

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="LayoutContent">
     <MapHolder ref="mapLoaderRef"></MapHolder>
-    <Header @navSelect="navSelect"></Header>
+    <Header @navSelect="navSelect" @initMenu="initMenu"></Header>
 
     <!-- 全流程管理 4 -->
     <div id="stepsBox" v-if="$ifMenu('4', '')">
@@ -117,7 +117,7 @@
         @selectEvent="homeSelect"
         v-if="$ifMenu('1', '')"
       />
-      <div id="mainMenus_topRight">
+      <div id="mainMenus_topRight" v-if="menus.main[0]">
         <MenuCard :menuData="menus.main[0]">
           <div class="bar-btn">
             <div
@@ -166,7 +166,7 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard.vue";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData, menusMap } from "@/config/common";
+import { street } from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -214,7 +214,12 @@ export default {
       testTitle: "土地资源",
       activeIndex: 1,
       // 菜单配置，后期最好根据用户权限通过后台动态返回。
-      menus: {},
+      menus: {
+        left: [],
+        leftW: [],
+        main: [],
+        right: []
+      },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
       legendTitle: [
@@ -285,6 +290,11 @@ export default {
     };
   },
   methods: {
+    initMenu(menus) {
+      if (menus) {
+        this.menus = menus;
+      }
+    },
     navSelect: function (data) {
       this.$store.commit("changeNavSelect", data);
       this.$store.commit("changeBackMenu", {});
@@ -427,7 +437,6 @@ export default {
     }
   },
   created() {
-    this.menus = menusMap;
     //   // 街道下拉框
     for (let key in street) {
       this.streetOptions.push({