添加菜单记忆，菜单显示隐藏添加动画。

src/components/layout/Header.vue

@@ -6,12 +6,7 @@
         <div class="title">浦 东 新 区 资 源 环 境 智 慧 审 计 平 台</div>
       </el-col>
       <el-col :span="12">
-        <el-menu
-          :default-active="activeIndex"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="select"
-        >
+        <el-menu :default-active="getActiveIndex()" class="el-menu-demo" mode="horizontal" @select="select">
           <el-menu-item index="1">首页</el-menu-item>
           <el-submenu index="2">
             <template slot="title" class="submenu">疑点筛查</template>
@@ -46,7 +41,6 @@ export default {
   name: "Header",
   data() {
     return {
-      activeIndex: "1",
       navData: {
         1: "首页",
         2: "疑点筛查",
@@ -59,11 +53,24 @@ export default {
         4: "全流程管理",
         "5-1": "法律法规",
         "5-2": "频发问题",
-        "5-3": "指标体系",
-      },
+        "5-3": "指标体系"
+      }
     };
   },
+  mounted() {},
   methods: {
+    // 菜单选择记忆（由于不使用路由，为了防止用户刷新页面后页面丢失，故保存并重新赋值当前页）
+    getActiveIndex() {
+      if (this.$store.state.navSelect) {
+        if (this.$store.state.navSelect.subIndex) {
+          return this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
+        } else {
+          return this.$store.state.navSelect.index;
+        }
+      } else {
+        return "1";
+      }
+    },
     select: function (index) {
       var that = this;
       var name = that.navData[index];
@@ -71,10 +78,10 @@ export default {
       that.$emit("navSelect", {
         index: index[0],
         subIndex: index[1],
-        name: name,
+        name: name
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -118,11 +125,7 @@ export default {
   color: #ffffff !important;
   font-size: 20px !important;
 }
-#layoutHeader
-  /deep/
-  .el-menu--horizontal
-  > .el-submenu
-  .el-submenu__title:hover {
+#layoutHeader /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
   background: none;
 }
 #layoutHeader /deep/ .el-submenu__title i {

src/components/layout/MenuCard.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 外边框 -->
   <div
+    ref="menuCard"
     :class="$ifLeftMenu(menuData.index) ? 'menuMainBoxA' : 'menuMainBox'"
     :style="{
       width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
@@ -90,18 +91,38 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      // 只有第一次创建该页面，或刷新页面时。
+      if (this.menuData.menuIndex) {
+        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
+          // 立即修改display为block
+          this.$refs.menuCard.style.display = "block";
+          setTimeout(() => {
+            this.$refs.menuCard.style.transform = "translate(0,0)";
+            this.$refs.menuCard.style.opacity = "1";
+          });
+        } else {
+          // 如果不符合，页面创建时就直接隐藏
+          this.$refs.menuCard.style.display = "none";
+        }
+      }
+    });
+  },
   /**
    * menuData =>
    * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
    * index: 子菜单index（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
+   * menuIndex: 显示头部菜单对应index（显示隐藏优化）
+   * subMenuIndex: 显示头部菜单对应subIndex（显示隐藏优化）
+   * position: 动画位置【left\right\top\bottom】（显示隐藏优化）
    * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
    * title: 标题（必填）
    * boxWidth: 宽，默认为410px【单位：Number】（非必填）
    * boxHeight: 高，默认为auto【单位：Number】（非必填）
    * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
    * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
-   * legendShowState: 是否显示左上角锯齿图片
+   * legendShowState: 是否显示左上角锯齿图片【Boolean】
    */
   props: ["menuData"],
   methods: {
@@ -119,9 +140,49 @@ export default {
       }
       returnStyle += "background-image: url('" + imageUrl + "');";
       return returnStyle;
+    },
+    showChange() {
+      if (this.menuData.menuIndex) {
+        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
+          // 立即修改display为block
+          this.$refs.menuCard.style.display = "block";
+          setTimeout(() => {
+            this.$refs.menuCard.style.transform = "translate(0,0)";
+            this.$refs.menuCard.style.opacity = "1";
+          });
+        } else {
+          // 延迟0.3s后修改display为none
+          this.$refs.menuCard.style.transform = this.positionTotransform();
+          this.$refs.menuCard.style.opacity = "0";
+          setTimeout(() => {
+            this.$refs.menuCard.style.display = "none";
+          }, 300);
+        }
+      }
+    },
+    positionTotransform() {
+      switch (this.menuData.position) {
+        case "left":
+          return "translate(-50%,0)";
+        case "right":
+          return "translate(50%,0)";
+        case "top":
+          return "translate(0,-50%)";
+        case "bottom":
+          return "translate(0,50%)";
+        default:
+          return "translate(0,0)";
+      }
     }
   },
-  watch: {}
+  watch: {
+    "$store.state.navSelect": {
+      handler() {
+        this.showChange();
+      },
+      deep: true
+    }
+  }
 };
 </script>
 
@@ -132,6 +193,10 @@ export default {
 @topTitleBgLeft: #00244d;
 @topTitleMinLeft: #002f56;
 @lightColor: #74ffff;
+.menuMainBox,
+.menuMainBoxA {
+  transition: all 0.3s;
+}
 .menuMainBox {
   position: relative;
   z-index: 999;
@@ -513,12 +578,12 @@ export default {
 }
 
 // 图例上部图片
-.legend{
-    position: absolute;
-    left: -2px;
-    top: -13px;
-    width: 104px;
-    height: 20px;
-    background: url("../../assets/home/legend_line.png") no-repeat center;
+.legend {
+  position: absolute;
+  left: -2px;
+  top: -13px;
+  width: 104px;
+  height: 20px;
+  background: url("../../assets/home/legend_line.png") no-repeat center;
 }
 </style>

src/main.js

@@ -10,10 +10,10 @@ import './assets/font/font.css';
 Vue.config.productionTip = false;
 
 Vue.use(ElementUI)
-
+Vue.prototype.$store = store;
 // 根据菜单index，和已选中的菜单返回是否相同
 Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
-  if (store.state.navSelect && store.state.navSelect.index === menuIndex && (subMenuIndex !== "" ? store.state.navSelect.subIndex === subMenuIndex : true)) {
+  if (store.state.navSelect !== undefined && store.state.navSelect.index == menuIndex && (subMenuIndex !== "" ? store.state.navSelect.subIndex === subMenuIndex : true)) {
     return true;
   } else {
     return false;

src/store/index.js

@@ -7,31 +7,32 @@ const menus = false;
 export default new Vuex.Store({
   state: {
     // 头部菜单选中菜单对象（主要用于元素判断是否显示）
-    navSelect: { index: "1", name: "首页", subIndex: "" },
+    navSelect: window.localStorage.getItem('navSelect') ? JSON.parse(window.localStorage.getItem('navSelect')) : { index: "1", name: "首页", subIndex: "" },
     // 左侧菜单选中菜单index（主要用于元素判断是否显示）
     leftMenuIndex: -1,
     // 底部菜单选中菜单index，subIndex（主要用于元素判断是否高亮）
-    bottomMenuIndexs: {index: -1,subIndex: -1}
+    bottomMenuIndexs: { index: -1, subIndex: -1 }
   },
   getters: {},
   mutations: {
     // 用户点击头部菜单，更新暂存对象
-    changeNavSelect(state,navSelect){
+    changeNavSelect(state, navSelect) {
       state.navSelect = navSelect;
+      window.localStorage.setItem('navSelect', JSON.stringify(state.navSelect))
     },
     // 用户点击左侧菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
-    changeLeftMenuIndex(state,leftMenuIndex){
-      if(state.leftMenuIndex == leftMenuIndex && menus){
+    changeLeftMenuIndex(state, leftMenuIndex) {
+      if (state.leftMenuIndex == leftMenuIndex && menus) {
         state.leftMenuIndex = -1;
-      }else{
+      } else {
         state.leftMenuIndex = leftMenuIndex;
       }
     },
     // 用户点击底部菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
-    changeBottomMenu(state,bottomMenuIndex){
-      if(bottomMenuIndex.index == state.bottomMenuIndexs.index && bottomMenuIndex.subIndex == state.bottomMenuIndexs.subIndex && menus){
-        state.bottomMenuIndexs = {index: -1,subIndex: -1}
-      }else{
+    changeBottomMenu(state, bottomMenuIndex) {
+      if (bottomMenuIndex.index == state.bottomMenuIndexs.index && bottomMenuIndex.subIndex == state.bottomMenuIndexs.subIndex && menus) {
+        state.bottomMenuIndexs = { index: -1, subIndex: -1 }
+      } else {
         state.bottomMenuIndexs = bottomMenuIndex
       }
     }

src/views/HomeView.vue

@@ -19,7 +19,7 @@
           type: 'card',
           title: '历年频发问题Top10',
           titleWidth: 85,
-          boxWidth: '400',
+          boxWidth: '400'
         }"
       >
         <template slot="top"><TopCard :dataSize="10" /></template>
@@ -29,11 +29,7 @@
           <!-- <h2>浦东新区</h2> -->
           <div class="droplet-box-title">浦东新区</div>
           <div class="droplet-box">
-            <div
-              class="droplet-box-item"
-              v-for="item in townCollection"
-              :key="item.name"
-            >
+            <div class="droplet-box-item" v-for="item in townCollection" :key="item.name">
               <div class="problem-num">{{ item.num }} 个</div>
               <div class="problem-img"></div>
               <div class="problem-title">{{ item.name }}</div>
@@ -47,14 +43,11 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis
-      id="ComprehensiveContainer"
-      v-if="$ifMenu('3', '')"
-    />
+    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
 
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
-    <div id="leftMenus" v-if="$ifMenu('1', '')">
+    <div id="leftMenus">
       <MenuCard :menuData="menus.left[0]">
         <template slot="top">
           <TagTableCard :data="tagCardData2" />
@@ -88,7 +81,7 @@
       </MenuCard>
     </div>
     <!-- 左侧菜单列 2 -- 疑点筛查 -->
-    <div id="leftMenusW" v-if="$ifMenu('2', '1')">
+    <div id="leftMenusW">
       <MenuCard :menuData="menus.left[3]"> </MenuCard>
       <MenuCard :menuData="menus.left[4]"> </MenuCard>
       <MenuCard :menuData="menus.left[5]"> </MenuCard>
@@ -144,33 +137,25 @@
         }"
         ><div class="legend-container">
           <div class="left-container">
-            <div
-              class="legend-icon"
-              v-for="(item, index) in legendData"
-              :key="index"
-              :style="{ background: item }"
-            ></div>
+            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
           </div>
           <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">
-              {{ item }} 类
-            </div>
+            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
           </div>
         </div>
       </MenuCard>
     </div>
     <!-- 右侧菜单列 -->
     <div id="rightMenus">
-      <MenuCard :menuData="menus.right[0]" v-if="$ifMenu('1', '')">
+      <MenuCard :menuData="menus.right[0]">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
-      <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
+      <MenuCard :menuData="menus.right[1]">
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData"></TagCard>
@@ -178,24 +163,22 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
-      <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
+      <MenuCard :menuData="menus.right[2]">
         <template slot="top">
           <TopCard :dataSize="5" />
         </template>
       </MenuCard>
-      <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '1')">
+      <MenuCard :menuData="menus.right[3]">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
-      <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
+      <MenuCard :menuData="menus.right[4]">
         <template slot="top">
           <TopCard :dataSize="5" />
         </template>
@@ -209,13 +192,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";
@@ -238,7 +215,7 @@ export default {
     TagTableCard,
     TopCard,
     BottomMenus,
-    ComprehensiveAnalysis,
+    ComprehensiveAnalysis
   },
   data() {
     return {
@@ -246,27 +223,27 @@ 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: "土地资源" },
-          { type: "card", title: "水资源" },
-          { type: "card", title: "林地资源" },
+          { type: "card", title: "土地资源", menuIndex: "1", position: "left" },
+          { type: "card", title: "水资源", menuIndex: "1", position: "left" },
+          { type: "card", title: "林地资源", menuIndex: "1", position: "left" },
           {
             type: "imageMenu",
             index: 0,
@@ -274,6 +251,9 @@ export default {
             titleWidth: 81,
             boxHeight: 236,
             imageUrl: "/static/images/2.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -282,6 +262,9 @@ export default {
             titleWidth: 81,
             boxHeight: 236,
             imageUrl: "/static/images/3.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -290,6 +273,9 @@ export default {
             titleWidth: 81,
             boxHeight: 236,
             imageUrl: "/static/images/1.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -298,7 +284,10 @@ export default {
             titleWidth: 81,
             boxHeight: 236,
             imageUrl: "/static/images/4.png",
-          },
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
+          }
         ],
         main: [
           {
@@ -307,15 +296,17 @@ export default {
             boxWidth: "360",
             boxHeight: "370",
             boxBackground: "rgba(0,39,77,0.6)",
-          },
+            menuIndex: "1",
+            position: "bottom"
+          }
         ],
         right: [
-          { type: "card", title: "资金投入情况", titleWidth: 64 },
-          { type: "card", title: "资源环境项目", titleWidth: 64 },
-          { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
-          { type: "card", title: "土地类问题", titleWidth: 60 },
-          { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
-        ],
+          { type: "card", title: "资金投入情况", titleWidth: 64, menuIndex: "1", position: "right" },
+          { type: "card", title: "资源环境项目", titleWidth: 64, menuIndex: "1", position: "right" },
+          { type: "card", title: "历年频发问题TOP5", titleWidth: 81, menuIndex: "1", position: "right" },
+          { type: "card", title: "土地类问题", titleWidth: 60, menuIndex: "2", subMenuIndex: "1", position: "right" },
+          { type: "card", title: "土地类问题TOP5", titleWidth: 81, menuIndex: "2", subMenuIndex: "1", position: "right" }
+        ]
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -325,19 +316,19 @@ export default {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -346,12 +337,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
+        { name: "生态资源问题", num: 55 }
       ],
       // 综合分析
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   methods: {
@@ -390,7 +381,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    },
+    }
   },
   created() {
     // 目录
@@ -405,19 +396,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 });
@@ -428,21 +410,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);
@@ -458,10 +440,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>
@@ -471,6 +453,7 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 /* 镇域专题 */
 #TownContainer {
@@ -595,7 +578,6 @@ export default {
   padding-right: 10px;
   margin-right: 10px;
   height: calc(100% - 60px);
-  z-index: 999;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
@@ -783,22 +765,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;
   }
 }