MenuCard组件添加属性legendShowState，控制是否显示图例左上角锯齿。添加注释。

src/components/common/BottomMenuSvg.vue

@@ -1,21 +1,6 @@
 <template>
   <div class="test">
     <svg id="svgBox" @click="changeShowBottomMenusStatus()" width="300" height="180" viewBox="0 0 410 314" version="1.1" xmlns="http://www.w3.org/2000/svg">
-      <!-- 内阴影定义 -->
-      <filter id="innershadow" x="0" y="0">
-        <feComponentTransfer in="SourceAlpha">
-          <feFuncA type="table" tableValues="1 0" />
-        </feComponentTransfer>
-        <feGaussianBlur stdDeviation="5" />
-        <feOffset dx="0" dy="0" result="offsetblur" />
-        <feFlood floodColor="#000000" floodOpacity="1" result="color" />
-        <feComposite in2="offsetblur" operator="in" />
-        <feComposite in2="SourceAlpha" operator="in" />
-        <feMerge>
-          <feMergeNode in="SourceGraphic" />
-          <feMergeNode />
-        </feMerge>
-      </filter>
       <!-- 正常边框渐变定义 -->
       <defs>
         <!-- 内容透明定义 -->
@@ -68,6 +53,7 @@
         </radialGradient>
       </defs>
       <symbol>
+        <!-- 定义组合（底座向上发光圆柱和向下流星） -->
         <g id="Upath1">
           <path d="M 0 0 L 100 0 L 100 50 Q 100,60 50,62 Q 0,60 0,50 L 0 50 z " fill="url(#grad2-4)" />
           <path d="M 38 25 L 62 25 L 62 50 Q 62,53 50,53 Q 38,53 38,50 L 38 50 z " fill="url(#grad2-5)" />
@@ -143,13 +129,18 @@
       <ellipse cx="210" cy="246" rx="25" ry="6" stroke="url(#grad3)" fill="url(#shipGrad1)" style="stroke-width: 0" />
       <ellipse cx="210" cy="246" rx="15" ry="4" stroke="url(#grad3)" fill="url(#grad2-3)" style="stroke-width: 0" />
       <ellipse cx="210" cy="246" rx="12" ry="3" stroke="url(#grad3)" fill="#74ffff" style="stroke-width: 0" />
-      <!-- 方形聚光效果 -->
+      <!-- 组合显示（圆盘中部光柱和流星效果） -->
       <use x="160" y="196" width="100" height="50" xlink:href="#Upath1" />
     </svg>
   </div>
 </template>
 
 <script>
+/**
+ * 底部菜单底座组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 export default {
   name: "BottomMenuSvg",
   components: {},
@@ -157,14 +148,9 @@ export default {
     return {};
   },
   mounted() {},
-  /**
-   * data.type: 布局方式【lr:左右布局;other:上下布局】,默认为lr（非必填）
-   * data.title: 标题（必填）
-   * data.value: 值（必填）
-   * data.unit: 单位
-   */
-  props: ["data"],
+  props: [],
   methods: {
+    // 绑定并抛出用户点击svg事件，实现底部菜单显示隐藏切换。
     changeShowBottomMenusStatus(){
         this.$emit('changeShowBottomMenusStatus');
     }

src/components/common/BottomMenus.vue

@@ -1,25 +1,37 @@
 <template>
   <div id="bottomMenus">
+    <!-- 底部菜单动态SVG底座 -->
     <BottomMenuSvg id="svgBox" @changeShowBottomMenusStatus="changeShowBottomMenusStatus()" />
+    <!-- 底部菜单主体 -->
     <div
       id="menusBox"
-      :style="{ width: showBottomMenusStatus ? '981px' : '0px', height: showBottomMenusStatus ? '200px' : '0px' ,border: showBottomMenusStatus ? '1px solid #00aaff' : 'none'}"
+      :style="{
+        width: showBottomMenusStatus ? '981px' : '0px',
+        height: showBottomMenusStatus ? '200px' : '0px',
+        border: showBottomMenusStatus ? '1px solid #00aaff' : 'none'
+      }"
     >
+      <!-- 模块遍历渲染也是menus对象的第一层数组 -->
       <div
         class="bottomMenus_box"
         v-for="(item, index) in menus"
         :key="index"
         :style="{ width: item.width ? item.width : 'auto' }"
       >
+        <!-- 模块标题 -->
         <div class="bottomMenus_box_title">{{ item.title }}</div>
+        <!-- 模块下的菜单主体 -->
         <div class="bottomMenus_box_main">
+          <!-- 遍历渲染每个模块下的子菜单，也是menus数组中subMenu数组 -->
           <div
             class="colBtuMenu"
             @click="changeBottomMenu(item.index, subItem.index)"
-            v-for="(subItem, subIndex) in item.submenu"
+            v-for="(subItem, subIndex) in item.subMenu"
             :key="subIndex"
           >
+            <!-- 选中状态的背景高亮 -->
             <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div>
+            <!-- 子菜单图标的选择性渲染 -->
             <el-image
               class="BtuMenu"
               v-show="ifMenuIndex(item.index, subItem.index)"
@@ -30,6 +42,7 @@
               v-show="!ifMenuIndex(item.index, subItem.index)"
               :src="returnBgImage(subItem.bgImage)"
             ></el-image>
+            <!-- 子菜单标题 -->
             <div class="BtuMenu_title" :style="{ color: ifMenuIndex(item.index, subItem.index) ? '#00f5ff' : '#FFFFFF' }">
               {{ subItem.title }}
             </div>
@@ -41,19 +54,26 @@
 </template>
 
 <script>
+/**
+ * 底部菜单组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 import BottomMenuSvg from "./BottomMenuSvg.vue";
 export default {
   name: "BottomMenus",
   components: { BottomMenuSvg },
   data() {
     return {
+      // 菜单主体显示状态（默认false）
       showBottomMenusStatus: false,
+      // 底部菜单对象
       menus: [
         {
           index: 0,
           width: "164px",
           title: "任务申请",
-          submenu: [
+          subMenu: [
             { index: 0, title: "申请任务", bgImage: "sqrw" },
             { index: 1, title: "我的任务", bgImage: "wdrw" }
           ]
@@ -62,7 +82,7 @@ export default {
           index: 1,
           width: "509px",
           title: "疑点分析",
-          submenu: [
+          subMenu: [
             { index: 0, title: "疑点审计", bgImage: "ydsj" },
             { index: 1, title: "标记疑点", bgImage: "bjyd" },
             { index: 2, title: "同屏对比", bgImage: "tpdb" },
@@ -75,13 +95,13 @@ export default {
           index: 2,
           width: "94px",
           title: "疑点报告",
-          submenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }]
+          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }]
         },
         {
           index: 3,
           width: "94px",
           title: "现场勘查",
-          submenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }]
+          subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }]
         }
       ]
     };
@@ -92,12 +112,15 @@ export default {
    */
   props: [],
   methods: {
+    // 根据菜单父级index和子菜单index，判断全局变量已选中底部菜单的index对比，返回状态。
     ifMenuIndex(index, subIndex) {
       return this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex;
     },
+    // 根据菜单父级index和子菜单index，更新全局变量。
     changeBottomMenu(index, subIndex) {
       this.$store.commit("changeBottomMenu", { index: index, subIndex: subIndex });
     },
+    // 根据菜单参数bgImage,菜单父级index和子菜单index,判断全局变量已选中底部菜单的index对比，返回不同状态下的icon图标地址。
     returnBgImage(bgImage, index, subIndex) {
       if (this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex) {
         return "/static/images/bottomMenuIcon/" + bgImage + "-a.png";
@@ -105,6 +128,7 @@ export default {
         return "/static/images/bottomMenuIcon/" + bgImage + ".png";
       }
     },
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
       this.showBottomMenusStatus = !this.showBottomMenusStatus;
     }
@@ -200,7 +224,7 @@ export default {
       font-size: 16px;
       font-family: pingfangSC;
       font-weight: 300;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 60px;
       z-index: 99999;
     }

src/components/common/ChartCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- 外边框 -->
+  <!-- 组合chart外边框 -->
   <div>
-    <!-- 需要提出一个组件 -->
+    <!-- 上部倾斜方块、标题和分割线 -->
     <div class="displayFlex">
       <div class="borders2"></div>
       <div class="chartTitle">
@@ -9,14 +9,19 @@
         <div class="chartTitleBorder"></div>
       </div>
     </div>
+    <!-- chart主题 -->
     <div style="height: 75px">
-      <!-- 需要重写 -->
       <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1025]" />
     </div>
   </div>
 </template>
 
 <script>
+/**
+ * 标题chart组合组件（首页MenuCard中的下部经常用到）
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 import LineChart from "@/components/chart/LineChart.vue";
 export default {
   name: "ChartCard",
@@ -25,10 +30,7 @@ export default {
     return {};
   },
   mounted() {},
-  /**
-   * title: 标题（必填）
-   */
-  props: ["title"],
+  props: [],
   methods: {},
   watch: {}
 };

src/components/common/TagCard.vue

@@ -28,6 +28,11 @@
 </template>
 
 <script>
+/**
+ * 指标组件（首页MenuCard中的上部经常用到）
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 export default {
   name: "TagCard",
   components: {},
@@ -36,6 +41,7 @@ export default {
   },
   mounted() {},
   /**
+   * data：=>
    * data.type: 布局方式【lr:左右布局;other:上下布局】,默认为lr（非必填）
    * data.title: 标题（必填）
    * data.value: 值（必填）

src/components/common/TagTableCard.vue

@@ -27,6 +27,11 @@
 </template>
 
 <script>
+/**
+ * 指标综合组件（只有首页MenuCard中土地资源模块的上部用到）
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 import TagCard from "./TagCard.vue";
 export default {
   name: "TagTableCard",

src/components/common/TopCard.vue

@@ -12,6 +12,12 @@
 </template>
 
 <script>
+/**
+ * TOP列表组件（首页历年频发问题TOP5等地方用到）
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ * 后期需要调整。根据用户传入数据自动渲染。
+ */
 export default {
   name: "TopCard",
   components: {},

src/components/layout/MenuCard.vue

@@ -26,27 +26,27 @@
         <!-- 右侧倾斜图标2 -->
         <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
       </div>
-      <!-- 头部右侧 -->
+      <!-- 右侧两个倾斜方框 -->
       <div class="menuMainBox_top_right" :style="{ width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%' }">
         <!-- 方块1 -->
         <div class="menuMainBox_top_right_d1"></div>
         <!-- 方块2 -->
         <div class="menuMainBox_top_right_d2"></div>
       </div>
-      <!-- 右上角三个点 -->
+      <!-- 右上角三个点（蓝橙蓝） -->
       <div class="menuMainBox_top_topRight">
         <div></div>
         <div></div>
         <div></div>
       </div>
     </div>
-    <!-- 折线 -->
+    <!-- 头部下的折线 -->
     <div
       class="menuMainBox_topBottom"
       v-if="menuData.type !== 'chart'"
       :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }"
     >
-      <!-- 圆球 -->
+      <!-- 折线右上角圆球 -->
       <div></div>
     </div>
     <div class="menuMainBox_topChart" v-if="menuData.type === 'chart'">
@@ -73,10 +73,17 @@
     <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
       <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
     </div>
+    <!-- 图例属性显示区域 -->
+    <div v-if="menuData.legendShowState" class="legend"></div>
   </div>
 </template>
 
 <script>
+/**
+ * 模块通用组件（首页和其他页面都有用到，由于综合功能和适配场景较多，配置组合可以联系开发人员:LiuMengxiang）
+ * @author: LiuMengxiang
+ * @Date: 2022年11月14-18日
+ */
 export default {
   name: "menuCard",
   components: {},
@@ -87,21 +94,24 @@ export default {
   /**
    * menuData =>
    * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
-   * index: 子菜单index（当type为imageMenu时有效）
-   * imageUrl: 菜单图片地址（当type为imageMenu时有效）
+   * index: 子菜单index（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
+   * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
    * title: 标题（必填）
-   * boxWidth: 宽，默认为410px（非必填）
-   * boxHeight: 高，默认为auto（非必填）
-   * boxBackground: 背景色，默认为渐变蓝色（非必填）
-   * titleWidth: 标题宽度，默认为50（非必填）
+   * boxWidth: 宽，默认为410px【单位：Number】（非必填）
+   * boxHeight: 高，默认为auto【单位：Number】（非必填）
+   * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
+   * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
+   * legendShowState: 是否显示左上角锯齿图片
    */
   props: ["menuData"],
   methods: {
+    // 用户点击左侧菜单，调用全局函数，更新全局暂存对象
     changeLeftMenuIndex() {
       if (this.menuData.index != undefined) {
         this.$store.commit("changeLeftMenuIndex", this.menuData.index);
       }
     },
+    // 根据菜单imageURL和boxHeight对象自动生成元素的样式（背景以及高度）
     returnImageUrl(imageUrl, boxHeight) {
       let returnStyle = "";
       if (boxHeight) {
@@ -501,4 +511,14 @@ export default {
     transition: all 0.3s;
   }
 }
+
+// 图例上部图片
+.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

@@ -11,6 +11,7 @@ Vue.config.productionTip = false;
 
 Vue.use(ElementUI)
 
+// 根据菜单index，和已选中的菜单返回是否相同
 Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
   if (store.state.navSelect && store.state.navSelect.index === menuIndex && (subMenuIndex !== "" ? store.state.navSelect.subIndex === subMenuIndex : true)) {
     return true;
@@ -18,6 +19,7 @@ Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
     return false;
   }
 };
+// 根据左侧菜单选中暂存index，与传入的菜单index对比，返回状态（主要使用于MenuCard组件type为imageMenu的元素，《疑点分析》下的子菜单）
 Vue.prototype.$ifLeftMenu = (leftMenuIndex) => {
   return store.state.leftMenuIndex == leftMenuIndex;
 }

src/store/index.js

@@ -2,18 +2,24 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
+// 定义是否菜单可取消选中（true：可取消选中，false：不可取消选中）【取消选中：当菜单已经为选中状态，再次点击会取消选中状态】
 const menus = false;
 export default new Vuex.Store({
   state: {
+    // 头部菜单选中菜单对象（主要用于元素判断是否显示）
     navSelect: { index: "1", name: "首页", subIndex: "" },
+    // 左侧菜单选中菜单index（主要用于元素判断是否显示）
     leftMenuIndex: -1,
+    // 底部菜单选中菜单index，subIndex（主要用于元素判断是否高亮）
     bottomMenuIndexs: {index: -1,subIndex: -1}
   },
   getters: {},
   mutations: {
+    // 用户点击头部菜单，更新暂存对象
     changeNavSelect(state,navSelect){
       state.navSelect = navSelect;
     },
+    // 用户点击左侧菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeLeftMenuIndex(state,leftMenuIndex){
       if(state.leftMenuIndex == leftMenuIndex && menus){
         state.leftMenuIndex = -1;
@@ -21,6 +27,7 @@ export default new Vuex.Store({
         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}

src/views/ComprehensiveAnalysis.vue

@@ -9,10 +9,7 @@
       <div class="selected-icon" @click="showLayers"></div>
       <div class="layers-control-icon" @click="selectLayers"></div>
       <div class="searchbox">
-        <el-input
-          placeholder="请输入地址、地块名称等"
-          v-model="analysis.searchInput"
-        ></el-input>
+        <el-input placeholder="请输入地址、地块名称等" v-model="analysis.searchInput"></el-input>
       </div>
     </div>
     <!-- 图例 -->
@@ -23,6 +20,7 @@
         title: '图例',
         boxWidth: '200',
         boxHeight: '200',
+        legendShowState: true
       }"
     >
     </MenuCard>
@@ -42,13 +40,13 @@ import MenuCard from "@/components/layout/MenuCard.vue";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
-    MenuCard,
+    MenuCard
   },
   data() {
     return {
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   mounted() {},
@@ -64,8 +62,8 @@ export default {
     // 折叠
     collapsePanelEvent() {},
     // 关闭面板
-    closeEvent() {},
-  },
+    closeEvent() {}
+  }
 };
 </script>
 <style lang="less" scoped>

src/views/HomeView.vue

@@ -133,7 +133,6 @@
           </div>
         </MenuCard>
       </div>
-      <div class="legend-line"></div>
       <MenuCard
         id="mainMenus_bottomLegend"
         :menuData="{
@@ -141,6 +140,7 @@
           title: '图例',
           boxWidth: '150',
           boxHeight: '180',
+          legendShowState: true
         }"
         ><div class="legend-container">
           <div class="left-container">