card公共组件添加跳转功能

src/components/layout/Header.vue

@@ -10,7 +10,7 @@
       </el-col>
       <el-col :span="$store.state.windowsSize.width < 1300 ? 18 : 13">
         <el-menu
-          :default-active="getActiveIndex()"
+          :default-active="ActiveIndex"
           class="el-menu-demo"
           mode="horizontal"
           active-text-color="#74FFFF"
@@ -55,6 +55,7 @@ export default {
   name: "Header",
   data() {
     return {
+      ActiveIndex: "1",
       navData: {
         1: "首页",
         2: "疑点筛查",
@@ -71,18 +72,24 @@ export default {
       }
     };
   },
-  mounted() {},
+  mounted() {
+    this.getActiveIndex();
+  },
   methods: {
     // 菜单选择记忆（由于不使用路由，为了防止用户刷新页面后页面丢失，故保存并重新赋值当前页）
     getActiveIndex() {
+      let _ActiveIndex = "";
       if (this.$store.state.navSelect) {
         if (this.$store.state.navSelect.subIndex) {
-          return this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
+          _ActiveIndex = this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
         } else {
-          return this.$store.state.navSelect.index;
+          _ActiveIndex = this.$store.state.navSelect.index;
         }
       } else {
-        return "1";
+        _ActiveIndex = "1";
+      }
+      if (this.ActiveIndex != _ActiveIndex) {
+        this.ActiveIndex = _ActiveIndex;
       }
     },
     select: function (index) {
@@ -95,6 +102,14 @@ export default {
         name: name
       });
     }
+  },
+  watch: {
+    "$store.state.navSelect": {
+      handler() {
+        this.getActiveIndex();
+      },
+      deep: true
+    }
   }
 };
 </script>

src/components/layout/MenuCard.vue

@@ -9,7 +9,7 @@
       border: menuData.type !== 'chart' && menuData.type !== 'legend' ? '' : '1px solid #2FB8FF',
       background: menuData.boxBackground ? menuData.boxBackground : ''
     }"
-    @click="changeLeftMenuIndex()"
+    @click="changeMenu()"
   >
     <!-- 头部 -->
     <div class="menuMainBox_top" v-if="menuData.type !== 'chart' && menuData.type !== 'legend'">
@@ -137,13 +137,17 @@ export default {
    * boxHeight: 高，默认为auto【单位：Number】（非必填）
    * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
    * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
+   * gotoPageInfo: 动态跳转页面信息（非必填）
    */
   props: ["menuData"],
   methods: {
-    // 用户点击左侧菜单，调用全局函数，更新全局暂存对象
-    changeLeftMenuIndex() {
-      if (this.menuData.index != undefined) {
-        this.$store.commit("changeLeftMenuIndex", this.menuData.index);
+    // 用户点击菜单标题时，调用全局函数，根据全局暂存对象
+    changeMenu() {
+      if (this.menuData.index != undefined && this.menuData.title != undefined) {
+        this.$store.commit("changeLeftMenuTitle", this.menuData.title);
+      }
+      if (this.menuData.gotoPageInfo != undefined) {
+        this.$store.commit("changeNavSelect", this.menuData.gotoPageInfo);
       }
     },
     // 根据菜单imageURL和boxHeight对象自动生成元素的样式（背景以及高度）

src/store/index.js

@@ -3,7 +3,7 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 // 定义是否菜单可取消选中（true：可取消选中，false：不可取消选中）【取消选中：当菜单已经为选中状态，再次点击会取消选中状态】
-const menus = true;
+const menus = false;
 export default new Vuex.Store({
   state: {
     // 头部菜单选中菜单对象（主要用于元素判断是否显示）
@@ -11,7 +11,7 @@ export default new Vuex.Store({
       ? JSON.parse(window.localStorage.getItem("navSelect"))
       : { index: "1", name: "首页", subIndex: "" },
     // 左侧菜单选中菜单index（主要用于元素判断是否显示）
-    leftMenuIndex: -1,
+    leftMenuTitle: "",
     // 底部菜单选中菜单index，subIndex（主要用于元素判断是否高亮）
     bottomMenuIndexs: { index: -1, subIndex: -1 },
     // 当前浏览器窗口的宽高（优化自适应布局）
@@ -35,12 +35,8 @@ export default new Vuex.Store({
       window.localStorage.setItem("navSelect", JSON.stringify(state.navSelect));
     },
     // 用户点击左侧菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
-    changeLeftMenuIndex(state, leftMenuIndex) {
-      if (state.leftMenuIndex == leftMenuIndex && menus) {
-        state.leftMenuIndex = -1;
-      } else {
-        state.leftMenuIndex = leftMenuIndex;
-      }
+    changeLeftMenuTitle(state, leftMenuTitle) {
+        state.leftMenuTitle = leftMenuTitle;
     },
     // 用户点击底部菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeBottomMenu(state, bottomMenuIndex) {

src/views/ComprehensiveAnalysis.vue

@@ -170,7 +170,7 @@
   </div>
 </template>
 <script>
-// 综合分析
+// 综合分析 this.$store.state.leftMenuTitle
 import MenuCard from "@/components/layout/MenuCard.vue";
 import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";

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,10 +65,7 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis
-      id="ComprehensiveContainer"
-      v-if="$ifMenu('3', '')"
-    />
+    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
 
     <!-- 法律法规 -->
     <LawView id="LawContainer" v-if="$ifMenu('5', '1')" />
@@ -165,7 +162,7 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle,
+          legendTitle: legendTitle
         }"
       />
     </div>
@@ -177,8 +174,7 @@
             <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">
@@ -188,8 +184,7 @@
             <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">
@@ -205,8 +200,7 @@
             <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">
@@ -230,13 +224,7 @@ 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";
@@ -272,7 +260,7 @@ export default {
     Legend,
     WholeProcessManagement,
     FrequencyView,
-    LawView,
+    LawView
   },
   data() {
     return {
@@ -280,19 +268,19 @@ 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,
@@ -305,6 +293,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
+            gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" }
           },
           {
             type: "card",
@@ -312,6 +301,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
+            gotoPageInfo: { index: "2", subIndex: "4", name: "水资源" }
           },
           {
             type: "card",
@@ -319,6 +309,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
+            gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" }
           },
           {
             type: "imageMenu",
@@ -330,6 +321,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -341,6 +333,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -352,6 +345,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -363,51 +357,8 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-          },
-          {
-            type: "imageMenu",
-            index: 4,
-            title: "基本农田被违规占用",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/2.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "left",
-          },
-          {
-            type: "imageMenu",
-            index: 5,
-            title: "基本农田种林",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/3.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "left",
-          },
-          {
-            type: "imageMenu",
-            index: 6,
-            title: "基本农田抛荒",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/1.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "left",
-          },
-          {
-            type: "imageMenu",
-            index: 7,
-            title: "一般耕地被违规占用",
-            titleWidth: 81,
-            boxHeight: 236,
-            imageUrl: "/static/images/4.png",
-            menuIndex: "2",
-            subMenuIndex: "1",
-            position: "left",
-          },
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+          }
         ],
         main: [
           {
@@ -418,8 +369,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-            minDomWidth: 1500,
-          },
+            minDomWidth: 1500
+          }
         ],
         right: [
           {
@@ -428,7 +379,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000,
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -436,7 +387,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000,
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -444,7 +395,7 @@ export default {
             titleWidth: 81,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000,
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -453,7 +404,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200,
+            minDomWidth: 1200
           },
           {
             type: "card",
@@ -462,9 +413,9 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200,
-          },
-        ],
+            minDomWidth: 1200
+          }
+        ]
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -473,35 +424,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: [],
@@ -510,17 +461,16 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
+        { name: "生态资源问题", num: 55 }
       ],
       // 综合分析
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   methods: {
     navSelect: function (data) {
-      console.log(data);
       this.$store.commit("changeNavSelect", data);
     },
     clickEvent(type) {
@@ -554,7 +504,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    },
+    }
   },
   created() {
     // 目录
@@ -569,19 +519,10 @@ 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 });
@@ -592,21 +533,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);
@@ -622,10 +563,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>
@@ -731,7 +672,7 @@ export default {
   width: 100%;
   top: 60px;
   z-index: 999;
-  background: rgba(0,0,0,0.9);
+  background: rgba(0, 0, 0, 0.9);
 }
 
 /* 频发问题 */
@@ -741,7 +682,7 @@ export default {
   width: 100%;
   top: 60px;
   z-index: 999;
-  background: rgba(0,0,0,0.9);
+  background: rgba(0, 0, 0, 0.9);
 }
 
 /* Home目录 -- 左侧菜单列 */
@@ -893,22 +834,14 @@ 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;
   }
 }