MenuCard组件调整，添加用户交互功能。

src/assets/global.css

@@ -199,13 +199,15 @@ th {
   background-color: transparent !important;
 }
 
-/* el-pagination */
-.el-pagination .btn-prev,
-.el-pager li {
-  /* background: rgba(0, 170, 255, 0.692) !important; */
+.el-table__row:hover{
+  cursor: pointer !important;
+  color: #fff !important;
+  background-color: #FFFFFF32 !important;
+  background: #FFFFFF32 !important;
 }
+
 /* .el-table__body-wrapper  */
-.is-scrolling-none {
+.is-scrolling-none.el-table__body {
   background-color: #00000032 !important;
 }
 .el-table,
@@ -283,3 +285,15 @@ body iframe {
   position: fixed;
   left: 21%;
 }
+/* ChartCard组件中的Empty组件样式 */
+.el-empty {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+.el-empty__image {
+  width: 40px;
+}
+.el-empty__description {
+  margin: 0;
+}

src/components/chart/LineChart.vue

@@ -25,15 +25,12 @@ export default {
     },
   },
   watch: {
-    categoryData: {
+    valueData: {
       handler(val) {
-        // console.log(val, "categoryData");
+        this.initEchart(this.categoryData, this.valueData);
       },
-      immediate: true,
-    },
-    // categoryData(val){
-    //   console.log(val,"categoryData");
-    // }
+      immediate: false,
+    }
   },
   mounted() {
     this.$nextTick(() => {

src/components/common/ChartCard.vue

@@ -5,13 +5,14 @@
     <div class="displayFlex">
       <div class="borders2"></div>
       <div class="chartTitle">
-        {{ title }}
+        近三年{{ title }}变化
         <div class="chartTitleBorder"></div>
       </div>
     </div>
     <!-- chart主题 -->
-    <div style="height: 75px">
-      <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1025]" />
+    <div style="height: 75px; width: 100%">
+      <LineChart v-if="categoryData && valueData" :categoryData="categoryData" :valueData="valueData" />
+      <el-empty v-else description="暂无数据"></el-empty>
     </div>
   </div>
 </template>
@@ -30,7 +31,7 @@ export default {
     return {};
   },
   mounted() {},
-  props: ["title"],
+  props: ["title", "categoryData", "valueData"],
   methods: {},
   watch: {}
 };

src/components/common/TagCard.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 外边框 -->
   <div class="tagMainBox">
-    <div v-if="data">
+    <div v-if="data" @mousemove="mousemoveEvent(index)">
       <!-- 上下布局 -->
       <div v-if="data.type !== 'lr'" class="tbFlx">
         <div class="tagValue">
@@ -47,8 +47,14 @@ export default {
    * data.value: 值（必填）
    * data.unit: 单位
    */
-  props: ["data"],
-  methods: {},
+  props: ["data","index"],
+  methods: {
+    mousemoveEvent(index){
+      if(index !== undefined){
+        this.$emit("changeMousemoveIndex",index);
+      }
+    }
+  },
   watch: {}
 };
 </script>

src/components/common/TagTableCard.vue

@@ -2,24 +2,26 @@
   <!-- 外边框 -->
   <div class="displayFlex" style="max-height: 180px">
     <div class="displayFlex-c">
-      <div class="card card1">
-        <div>基本农田面积</div>
-        <div>100<span>公顷</span></div>
+      <div class="card card1" :style="{ background: mousemoveIndex == 0 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(0)">
+        <div>{{echartData[0].title}}</div>
+        <div>{{echartData[0].value}}<span>公顷</span></div>
       </div>
-      <div class="card card2">
-        <div>储备土地面积</div>
-        <div>100<span>公顷</span></div>
+      <div class="card card2" :style="{ background: mousemoveIndex == 1 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(1)">
+        <div>{{echartData[1].title}}</div>
+        <div>{{echartData[1].value}}<span>公顷</span></div>
       </div>
     </div>
-    <div><TagCard :data="data"></TagCard></div>
+    <div>
+      <TagCard :data="echartData[4]"></TagCard>
+    </div>
     <div class="displayFlex-c">
-      <div class="card card3">
-        <div style="text-align: right">减量化面积</div>
-        <div>100<span>公顷</span></div>
+      <div class="card card3" :style="{ background: mousemoveIndex == 2 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(2)">
+        <div style="text-align: right">{{echartData[2].title}}</div>
+        <div>{{echartData[2].value}}<span>公顷</span></div>
       </div>
-      <div class="card card4">
-        <div style="text-align: right">一般耕地面积</div>
-        <div>100<span>公顷</span></div>
+      <div class="card card4" :style="{ background: mousemoveIndex == 3 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(3)">
+        <div style="text-align: right">{{echartData[3].title}}</div>
+        <div>{{echartData[3].value}}<span>公顷</span></div>
       </div>
     </div>
     <div class="borders"></div>
@@ -37,14 +39,23 @@ export default {
   name: "TagTableCard",
   components: { TagCard },
   data() {
-    return {};
+    return {
+      mousemoveIndex: 0      
+    };
   },
   mounted() {},
   /**
    * data:TagCard组件参数
    */
-  props: ["data"],
-  methods: {},
+  props: ["echartData"],
+  methods: {
+    mousemoveEvent(index) {
+      if (this.mousemoveIndex != index) {
+        this.mousemoveIndex = index;
+        this.$emit("changeMousemoveIndex",this.mousemoveIndex);
+      }
+    }
+  },
   watch: {}
 };
 </script>

src/components/layout/MenuCard.vue

@@ -2,7 +2,7 @@
   <!-- 外边框 -->
   <div
     ref="menuCard"
-    :class="$ifLeftMenu(menuData.title != undefined? menuData.title : '') ? 'menuMainBoxA' : 'menuMainBox'"
+    :class="$ifLeftMenu(menuData.title != undefined ? menuData.title : '') ? 'menuMainBoxA' : 'menuMainBox'"
     :style="{
       width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
       height: menuData.boxHeight ? menuData.boxHeight + 'px' : 'auto',
@@ -18,7 +18,10 @@
         <!-- 左侧箭头图标 -->
         <div class="menuMainBox_top_left_iconS" v-if="menuData.type !== 'imageMenu'"></div>
         <div class="menuMainBox_top_left_iconR" v-if="menuData.type === 'imageMenu'">
-          <div class="menuMainBox_top_left_iconR_active" v-if="$ifLeftMenu(menuData.index != undefined ? menuData.title : '')"></div>
+          <div
+            class="menuMainBox_top_left_iconR_active"
+            v-if="$ifLeftMenu(menuData.index != undefined ? menuData.title : '')"
+          ></div>
         </div>
         <!-- 标题 -->
         <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
@@ -62,16 +65,40 @@
     <!-- 主题 -->
     <div class="menuMainBox_main" v-if="menuData.type === 'card'">
       <!-- 上部 -->
-      <div class="menuMainBox_main_top">
+      <div class="menuMainBox_main_top" v-if="!menuData.topSolt">
         <slot name="top"></slot>
       </div>
+      <div class="menuMainBox_main_top" v-if="menuData.topSolt">
+        <TagTableCard
+          v-if="menuData.topSolt.commonName == 'TagTableCard'"
+          :echartData="menuData.topSolt.commonData"
+          @changeMousemoveIndex="changeMousemoveIndex"
+        />
+        <div class="menuCardFlex" v-if="menuData.topSolt.commonName == 'TagCard'" :style="{justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'}">
+          <TagCard
+            v-for="(item, index) in menuData.topSolt.commonData"
+            :data="item"
+            :index="index"
+            :key="item.title"
+            @changeMousemoveIndex="changeMousemoveIndex"
+          />
+        </div>
+      </div>
       <!-- 下部 -->
-      <div class="menuMainBox_main_bottom">
+      <div class="menuMainBox_main_bottom" v-if="!menuData.bottomSolt">
         <slot name="bottom"></slot>
       </div>
+      <div class="menuMainBox_main_bottom" v-if="menuData.bottomSolt">
+        <ChartCard
+          v-if="menuData.bottomSolt.commonName == 'ChartCard'"
+          :title="menuData.topSolt.commonData[chartCardDataIndex].title"
+          :categoryData="menuData.topSolt.commonData[chartCardDataIndex].categoryData"
+          :valueData="menuData.topSolt.commonData[chartCardDataIndex].valueData"
+        />
+      </div>
     </div>
     <div class="menuMainBox_main" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
-      <div class="menuMainBox_main_all">
+      <div class="menuMainBox_main_all" v-if="!menuData.topSolt && !menuData.bottomSolt">
         <slot></slot>
       </div>
     </div>
@@ -89,11 +116,16 @@
  * @author: LiuMengxiang
  * @Date: 2022年11月14-18日
  */
+import TagTableCard from "@/components/common/TagTableCard.vue";
+import ChartCard from "@/components/common/ChartCard.vue";
+import TagCard from "@/components/common/TagCard.vue";
 export default {
   name: "menuCard",
-  components: {},
+  components: { TagTableCard, ChartCard, TagCard },
   data() {
-    return {};
+    return {
+      chartCardDataIndex: 0
+    };
   },
   mounted() {
     this.$nextTick(() => {
@@ -137,10 +169,20 @@ export default {
    * boxHeight: 高，默认为auto【单位：Number】（非必填）
    * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
    * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
-   * gotoPageInfo: 动态跳转页面信息（非必填）
+   * gotoPageInfo: 动态跳转页面信息（非必填）=>{index:要跳转的菜单index，subIndex：要跳转的子菜单index，name：菜单名称}
+   *
+   * topSolt: 头部替换插槽组件信息（非必填）=>{commonName：组件名称，commonData：组件支撑数据}
+   * bottomSolt: 底部替换插槽组件信息（非必填）=>{commonName:组件名称，commonData：组件支撑数据}
+   *
    */
   props: ["menuData"],
   methods: {
+    // 当用户使用光标切换交互组件时触发
+    changeMousemoveIndex(index) {
+      if (this.chartCardDataIndex != index) {
+        this.chartCardDataIndex = index;
+      }
+    },
     // 用户点击菜单标题时，调用全局函数，根据全局暂存对象
     changeMenu() {
       if (this.menuData != undefined && this.menuData.index != undefined && this.menuData.title != undefined) {
@@ -655,4 +697,30 @@ export default {
   height: 20px;
   background: url("../../assets/home/legend_line.png") no-repeat center;
 }
+// tagcard
+.menuCardFlex {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  position: relative;
+  .borders {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 110px;
+    height: 100px;
+    background: linear-gradient(to left, @borderColor, @borderColor) left top no-repeat,
+      linear-gradient(to bottom, @borderColor, @borderColor) left top no-repeat,
+      linear-gradient(to left, @borderColor, @borderColor) right top no-repeat,
+      linear-gradient(to bottom, @borderColor, @borderColor) right top no-repeat,
+      linear-gradient(to left, @borderColor, @borderColor) left bottom no-repeat,
+      linear-gradient(to bottom, @borderColor, @borderColor) left bottom no-repeat,
+      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat,
+      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat;
+    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
+  }
+}
 </style>

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')" />
@@ -77,46 +74,13 @@
     <FrequencyView id="FrequencyContainer" v-if="$ifMenu('5', '2')" />
 
     <!-- Home页面 -->
-    <!-- 左侧菜单列 1 -- 首页 -->
+    <!-- 左侧菜单列 -- 首页 -->
     <div id="leftMenus">
-      <MenuCard :menuData="menus.left[0]">
-        <template slot="top">
-          <TagTableCard :data="tagCardData2" />
-        </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年农田面积变化'" />
-        </template>
-      </MenuCard>
-      <MenuCard :menuData="menus.left[1]">
-        <template slot="top">
-          <div class="menuCardFlex">
-            <TagCard :data="tagCardData"></TagCard>
-            <TagCard :data="tagCardData"></TagCard>
-            <TagCard :data="tagCardData"></TagCard>
-          </div>
-        </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年水域面积变化'" />
-        </template>
-      </MenuCard>
-      <MenuCard :menuData="menus.left[2]">
-        <template slot="top">
-          <div class="menuCardFlex">
-            <TagCard :data="tagCardData3"></TagCard>
-            <TagCard :data="tagCardData3"></TagCard>
-          </div>
-        </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年林地面积变化'" />
-        </template>
-      </MenuCard>
+      <MenuCard v-for="item in menus.left" :menuData="item" :key="item.title" />
     </div>
-    <!-- 左侧菜单列 2 -- 疑点筛查 -->
+    <!-- 左侧菜单列(较宽，两列) -- 疑点筛查 -->
     <div id="leftMenusW">
-      <MenuCard :menuData="menus.left[3]"> </MenuCard>
-      <MenuCard :menuData="menus.left[4]"> </MenuCard>
-      <MenuCard :menuData="menus.left[5]"> </MenuCard>
-      <MenuCard :menuData="menus.left[6]"> </MenuCard>
+      <MenuCard v-for="item in menus.leftW" :menuData="item" :key="item.title"> </MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
@@ -161,32 +125,14 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle,
+          legendTitle: legendTitle
         }"
       />
     </div>
     <!-- 右侧菜单列 -->
     <div class="rightMenus">
-      <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
-      ></MenuCard>
-      <MenuCard :menuData="menus.right[1]">
-        <template slot="top">
-          <div class="menuCardFlex">
-            <TagCard :data="tagCardData"></TagCard>
-            <TagCard :data="tagCardData"></TagCard>
-            <TagCard :data="tagCardData"></TagCard>
-          </div>
-        </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年审计项目变化'" /> </template
-      ></MenuCard>
+      <MenuCard :menuData="menus.right[0]"></MenuCard>
+      <MenuCard :menuData="menus.right[1]"></MenuCard>
       <MenuCard :menuData="menus.right[2]">
         <template slot="top">
           <TopCard :dataSize="5" />
@@ -201,8 +147,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">
@@ -226,17 +171,10 @@ 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";
-import TagTableCard from "@/components/common/TagTableCard";
 import TopCard from "@/components/common/TopCard";
 import BottomMenus from "@/components/common/BottomMenus";
 // 图例
@@ -260,7 +198,6 @@ export default {
     BarChart,
     TagCard,
     ChartCard,
-    TagTableCard,
     TopCard,
     BottomMenus,
     ComprehensiveAnalysis,
@@ -268,7 +205,7 @@ export default {
     Legend,
     WholeProcessManagement,
     FrequencyView,
-    LawView,
+    LawView
   },
   data() {
     return {
@@ -276,19 +213,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,
@@ -302,6 +239,44 @@ export default {
             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",
@@ -310,6 +285,38 @@ export default {
             position: "left",
             minDomWidth: 420,
             gotoPageInfo: { index: "2", subIndex: "4", 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",
@@ -318,7 +325,33 @@ export default {
             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,
@@ -329,7 +362,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -341,7 +374,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -353,7 +386,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
           {
             type: "imageMenu",
@@ -365,8 +398,8 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-          },
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+          }
         ],
         main: [
           {
@@ -377,8 +410,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-            minDomWidth: 1500,
-          },
+            minDomWidth: 1500
+          }
         ],
         right: [
           {
@@ -388,6 +421,22 @@ export default {
             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",
@@ -396,6 +445,38 @@ export default {
             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",
@@ -414,6 +495,22 @@ export default {
             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",
@@ -422,59 +519,59 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200,
-          },
-        ],
+            minDomWidth: 1200
+          }
+        ]
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
       legendTitle: [
         {
           name: "A类",
-          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
+          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷"
         },
         {
           name: "B类",
-          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
+          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)"
         },
         {
           name: "C类",
-          info: "自然资源资产较少(耕地林地总和低于 900公项)",
-        },
+          info: "自然资源资产较少(耕地林地总和低于 900公项)"
+        }
       ],
       // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       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: [],
@@ -483,12 +580,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
+        { name: "生态资源问题", num: 55 }
       ],
       // 综合分析
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   methods: {
@@ -526,7 +623,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    },
+    }
   },
   created() {
     // 目录
@@ -541,19 +638,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 });
@@ -564,21 +652,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);
@@ -594,10 +682,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>
@@ -865,22 +953,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;
   }
 }