MenuCard支持TOP组件以及属性

src/components/common/TopCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="CardBox">
     <div v-for="(items, index) in dataList" :key="index" class="Top_box">
-      <div class="Top_box_name" v-if="dataSize > index">{{ items.name }}</div>
-      <div class="Top_box_main" v-if="dataSize > index">
-        <div class="Top_box_main_title">{{ items.title }}</div>
-        <div><el-progress :percentage="items.value" :stroke-width="10" :show-text="false"></el-progress></div>
+      <div class="Top_box_name">{{ "TOP" + (index + 1) }}</div>
+      <div class="Top_box_main">
+        <div class="Top_box_main_title">{{ items.c_wtfl }}</div>
+        <div><el-progress :percentage="items.number" :stroke-width="10" :show-text="false"></el-progress></div>
       </div>
-      <div class="Top_box_value" v-if="dataSize > index">{{ items.value }}</div>
+      <div class="Top_box_value">{{ items.number }}</div>
     </div>
   </div>
 </template>
@@ -21,35 +21,11 @@
 export default {
   name: "TopCard",
   components: {},
-  data() {
-    return {
-      dataList: [
-        { name: "TOP1", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: 99 },
-        { name: "TOP2", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: 88 },
-        { name: "TOP3", title: "建设用地减量化复垦地块后续管养不到位", value: 77 },
-        {
-          name: "TOP4",
-          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
-          value: 66
-        },
-        { name: "TOP5", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 55 },
-        { name: "TOP6", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: 44 },
-        { name: "TOP7", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: 33 },
-        { name: "TOP8", title: "建设用地减量化复垦地块后续管养不到位", value: 22 },
-        {
-          name: "TOP9",
-          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
-          value: 11
-        },
-        { name: "TOP10", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 1 }
-      ]
-    };
-  },
   mounted() {},
   /**
    * data:top data
    */
-  props: ["dataSize"],
+  props: ["dataList"],
   methods: {},
   watch: {}
 };

src/components/layout/MenuCard.vue

@@ -5,66 +5,44 @@
     v-loading="dataInitLoading"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
-    :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',
-      border:
-        menuData.type !== 'chart' && menuData.type !== 'legend'
-          ? ''
-          : '1px solid #2FB8FF',
-      background: menuData.boxBackground ? menuData.boxBackground : '',
+      border: menuData.type !== 'chart' && menuData.type !== 'legend' ? '' : '1px solid #2FB8FF',
+      background: menuData.boxBackground ? menuData.boxBackground : ''
     }"
     @click="changeMenu()"
   >
     <!-- 头部 -->
-    <div
-      class="menuMainBox_top"
-      v-if="menuData.type !== 'chart' && menuData.type !== 'legend'"
-    >
+    <div class="menuMainBox_top" v-if="menuData.type !== 'chart' && menuData.type !== 'legend'">
       <!-- 头部左侧 -->
       <div
         class="menuMainBox_top_left"
         :style="{
-          width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%',
+          width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%'
         }"
       >
         <!-- 左侧箭头图标 -->
-        <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_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 : '')
-            "
+            v-if="$ifLeftMenu(menuData.index != undefined ? menuData.title : '')"
           ></div>
         </div>
         <!-- 标题 -->
         <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
         <!-- 右侧倾斜图标1 -->
-        <div
-          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"
-        ></div>
+        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
         <!-- 右侧倾斜图标2 -->
-        <div
-          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"
-        ></div>
+        <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%',
+          width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%'
         }"
       >
         <!-- 方块1 -->
@@ -85,19 +63,14 @@
       v-if="menuData.type !== 'chart' && menuData.type !== 'legend'"
       :style="{
         left: menuData.titleWidth
-          ? (menuData.titleWidth <= 40
-              ? menuData.titleWidth - 39
-              : menuData.titleWidth - 40) + '%'
-          : '10%',
+          ? (menuData.titleWidth <= 40 ? menuData.titleWidth - 39 : menuData.titleWidth - 40) + '%'
+          : '10%'
       }"
     >
       <!-- 折线右上角圆球 -->
       <div></div>
     </div>
-    <div
-      class="menuMainBox_topChart"
-      v-if="menuData.type === 'chart' || menuData.type === 'legend'"
-    >
+    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
       <div class="menuMainBox_topChart_title">
         {{ menuData.title }}
       </div>
@@ -106,7 +79,8 @@
     <div class="menuMainBox_main" v-if="menuData.type === 'card'">
       <!-- 上部 -->
       <div class="menuMainBox_main_top" v-if="!menuData.topSolt">
-        <slot name="top"></slot>
+        <slot name="top"> </slot>
+        <TopCard v-if="menuData.commonName == 'TOP'" :dataList="menuData.topData"/>
       </div>
       <div class="menuMainBox_main_top" v-if="menuData.topSolt">
         <TagTableCard
@@ -118,10 +92,7 @@
           class="menuCardFlex"
           v-if="menuData.topSolt.commonName == 'TagCard'"
           :style="{
-            justifyContent:
-              menuData.topSolt.commonData.length > 1
-                ? 'space-between'
-                : 'center',
+            justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'
           }"
         >
           <TagCard
@@ -142,30 +113,19 @@
         <ChartCard
           v-if="menuData.bottomSolt.commonName == 'ChartCard'"
           :title="menuData.topSolt.commonData[chartCardDataIndex].title"
-          :categoryData="
-            menuData.topSolt.commonData[chartCardDataIndex].categoryData
-          "
+          :categoryData="menuData.topSolt.commonData[chartCardDataIndex].categoryData"
           :valueData="menuData.topSolt.commonData[chartCardDataIndex].valueData"
           :unit="menuData.topSolt.commonData[chartCardDataIndex].unit"
         />
       </div>
     </div>
-    <div
-      class="menuMainBox_main"
-      v-if="menuData.type === 'chart' || menuData.type === 'legend'"
-    >
-      <div
-        class="menuMainBox_main_all"
-        v-if="!menuData.topSolt && !menuData.bottomSolt"
-      >
+    <div class="menuMainBox_main" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
+      <div class="menuMainBox_main_all" v-if="!menuData.topSolt && !menuData.bottomSolt">
         <slot></slot>
       </div>
     </div>
     <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
-      <div
-        class="menuMainBox_main_image_box"
-        :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"
-      ></div>
+      <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
     </div>
     <!-- 图例属性显示区域 -->
     <div v-if="menuData.type === 'legend'" class="legend"></div>
@@ -181,36 +141,31 @@
 import TagTableCard from "@/components/common/TagTableCard.vue";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagCard from "@/components/common/TagCard.vue";
+import TopCard from "@/components/common/TopCard.vue";
 export default {
   name: "menuCard",
-  components: { TagTableCard, ChartCard, TagCard },
+  components: { TagTableCard, ChartCard, TagCard, TopCard },
   data() {
     return {
       dataInitLoading: false,
       resData: [],
-      chartCardDataIndex: 0,
+      chartCardDataIndex: 0
     };
   },
   mounted() {
     this.$nextTick(() => {
-      if (
-        this.menuData &&
-        this.menuData.topSolt &&
-        this.menuData.topSolt.commonDataGetUrl
-      ) {
+      if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonDataGetUrl) {
         this.dataInitLoading = true;
-        this.$Get(
-          "/static/json/home/" + this.menuData.topSolt.commonDataGetUrl
-        ).then(
-          (res) => {
+        this.$Get("/static/json/home/" + this.menuData.topSolt.commonDataGetUrl).then(
+          res => {
             let listMap = {};
             let tableData = res;
-            tableData.forEach((item) => {
+            tableData.forEach(item => {
               if (!listMap[item.name]) {
                 // type,data
                 let listMap2 = {};
                 if (item.data) {
-                  item.data.forEach((item2) => {
+                  item.data.forEach(item2 => {
                     if (listMap2[item2.type]) {
                       listMap2[item2.type]["categoryData"].push(item2.year);
                       listMap2[item2.type]["valueData"].push(item2.area);
@@ -240,24 +195,15 @@ export default {
                     if (categoryData[categoryDataKeys]) {
                       let categoryDataItemData = categoryData[categoryDataKeys];
                       if (listMap["全部"][categoryDataKeys]) {
-                        categoryDataItemData.valueData.forEach(
-                          (valueIndexItem, index) => {
-                            if (
-                              listMap["全部"][categoryDataKeys].valueData[index]
-                            ) {
-                              listMap["全部"][categoryDataKeys].valueData[
-                                index
-                              ] += Number(valueIndexItem);
-                            } else {
-                              listMap["全部"][categoryDataKeys].valueData[
-                                index
-                              ] = Number(valueIndexItem);
-                            }
+                        categoryDataItemData.valueData.forEach((valueIndexItem, index) => {
+                          if (listMap["全部"][categoryDataKeys].valueData[index]) {
+                            listMap["全部"][categoryDataKeys].valueData[index] += Number(valueIndexItem);
+                          } else {
+                            listMap["全部"][categoryDataKeys].valueData[index] = Number(valueIndexItem);
                           }
-                        );
+                        });
                       } else {
-                        listMap["全部"][categoryDataKeys] =
-                          categoryDataItemData;
+                        listMap["全部"][categoryDataKeys] = categoryDataItemData;
                       }
                     }
                   }
@@ -270,14 +216,10 @@ export default {
               let sum = 0;
               for (let keys in this.resData["全部"]) {
                 this.menuData.topSolt.commonData[_index].title = keys;
-                this.menuData.topSolt.commonData[_index].categoryData =
-                  this.resData["全部"][keys].categoryData;
-                this.menuData.topSolt.commonData[_index].valueData =
-                  this.resData["全部"][keys].valueData;
+                this.menuData.topSolt.commonData[_index].categoryData = this.resData["全部"][keys].categoryData;
+                this.menuData.topSolt.commonData[_index].valueData = this.resData["全部"][keys].valueData;
                 this.menuData.topSolt.commonData[_index].value =
-                  this.resData["全部"][keys].valueData[
-                    this.resData["全部"][keys].valueData.length - 1
-                  ];
+                  this.resData["全部"][keys].valueData[this.resData["全部"][keys].valueData.length - 1];
                 sum += this.menuData.topSolt.commonData[_index].value;
                 _index++;
               }
@@ -287,12 +229,13 @@ export default {
             }
             this.dataInitLoading = false;
           },
-          (error) => {
+          error => {
             console.log("error:", error, this.menuData);
             this.dataInitLoading = false;
           }
         );
       } else if (this.menuData && this.menuData.columnId) {
+        this.dataInitLoading = true;
         let params = new FormData();
         this.countUser = 0;
         params.append("columnId", this.menuData.columnId);
@@ -300,34 +243,37 @@ export default {
           params.append("field", this.menuData.field);
         }
         params.append("states", "2,3");
-        params.append("pageSize", 999);
+        params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
         params.append("page", 0);
         if (this.menuData.sortField) {
           let sortparam = [
             {
               field: this.menuData.sortField.field,
-              orderByType: this.menuData.sortField.orderByType,
-            },
+              orderByType: this.menuData.sortField.orderByType
+            }
           ];
           params.append("orderBy", JSON.stringify(sortparam));
         }
-        this.$Post(this.urlsCollection.selectContentList, params).then(
-          (res) => {
-            if (res.code === 200 && res.content.data.length > 0) {
+        this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
+          res => {
+            if (this.menuData.commonName && this.menuData.commonName === "TOP" && res.code === 200 && res.content.length > 0) {
+              res.content.forEach((item,index)=>{
+                if(this.menuData.dataSize > index){
+                  this.resData[index] = item;
+                }  
+              })
+              this.changeHomeSpecialTown();
+            }else if (res.code === 200 && res.content.length > 0) {
               let listMap = {};
-              let tableData = res.content.data;
-              tableData.forEach((item) => {
+              let tableData = res.content;
+              tableData.forEach(item => {
                 if (listMap[item.street]) {
                   listMap[item.street]["categoryData"].push(item.c_years);
-                  listMap[item.street]["valueData"].push(
-                    (item.c_float_num / 10000).toFixed(2)
-                  );
+                  listMap[item.street]["valueData"].push((item.c_float_num / 10000).toFixed(2));
                 } else {
                   let listMapItem = {};
                   listMapItem["categoryData"] = [item.c_years];
-                  listMapItem["valueData"] = [
-                    (item.c_float_num / 10000).toFixed(2),
-                  ];
+                  listMapItem["valueData"] = [(item.c_float_num / 10000).toFixed(2)];
                   listMap[item.street] = listMapItem;
                 }
               });
@@ -339,23 +285,16 @@ export default {
                     if (!listMap["全部"]) {
                       listMap["全部"] = { valueData: [], categoryData: [] };
                     }
-                    listMap[listMapKeys].valueData.forEach(
-                      (valueIndexItem, index) => {
-                        if (listMap["全部"].valueData[index]) {
-                          listMap["全部"].valueData[index] +=
-                            Number(valueIndexItem);
-                        } else {
-                          listMap["全部"].valueData[index] =
-                            Number(valueIndexItem);
-                        }
+                    listMap[listMapKeys].valueData.forEach((valueIndexItem, index) => {
+                      if (listMap["全部"].valueData[index]) {
+                        listMap["全部"].valueData[index] += Number(valueIndexItem);
+                      } else {
+                        listMap["全部"].valueData[index] = Number(valueIndexItem);
                       }
-                    );
+                    });
                   }
                 }
-                if (
-                  listMap["全部"].categoryData.length == 0 &&
-                  categoryData.length > 0
-                ) {
+                if (listMap["全部"].categoryData.length == 0 && categoryData.length > 0) {
                   listMap["全部"].categoryData = categoryData;
                 }
               }
@@ -372,7 +311,7 @@ export default {
             }
             this.dataInitLoading = false;
           },
-          (error) => {
+          error => {
             this.resData = [];
             this.changeHomeSpecialTown();
             console.log("error:", error, this.menuData);
@@ -409,6 +348,15 @@ export default {
    * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
    * title: 标题（必填）
    *
+   * getUrl: DMS数据请求路径
+   * columnId：DMS数据请求columnId
+   * pageSize：DMS数据请求个数
+   * field：DMS数据请求field
+   * dataType：DMS数据类型
+   * sortField=>：DMS数据请求排序配置
+   *  field:排序字段
+   *  orderByType：排序类型【1：正序，2：倒序】
+   *
    * index: 子菜单index（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
    * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
    *
@@ -431,30 +379,22 @@ export default {
   methods: {
     // 切换街镇时
     changeHomeSpecialTown() {
-      if (
-        this.resData[this.$store.state.homeSpecialTown] &&
-        this.menuData.topSolt.commonData
-      ) {
+      if (this.resData[this.$store.state.homeSpecialTown] && this.menuData.topSolt.commonData) {
         if (this.resData[this.$store.state.homeSpecialTown].categoryData) {
-          this.menuData.topSolt.commonData[0].categoryData =
-            this.resData[this.$store.state.homeSpecialTown].categoryData;
-          this.menuData.topSolt.commonData[0].valueData =
-            this.resData[this.$store.state.homeSpecialTown].valueData;
+          this.menuData.topSolt.commonData[0].categoryData = this.resData[this.$store.state.homeSpecialTown].categoryData;
+          this.menuData.topSolt.commonData[0].valueData = this.resData[this.$store.state.homeSpecialTown].valueData;
         } else {
           let _index = 0;
           let sum = 0;
           for (let keys in this.resData["全部"]) {
             this.menuData.topSolt.commonData[_index].title = keys;
             this.menuData.topSolt.commonData[_index].categoryData =
-              this.resData[this.$store.state.homeSpecialTown][
-                keys
-              ].categoryData;
+              this.resData[this.$store.state.homeSpecialTown][keys].categoryData;
             this.menuData.topSolt.commonData[_index].valueData =
               this.resData[this.$store.state.homeSpecialTown][keys].valueData;
             this.menuData.topSolt.commonData[_index].value =
               this.resData[this.$store.state.homeSpecialTown][keys].valueData[
-                this.resData[this.$store.state.homeSpecialTown][keys].valueData
-                  .length - 1
+                this.resData[this.$store.state.homeSpecialTown][keys].valueData.length - 1
               ];
             sum += this.menuData.topSolt.commonData[_index].value;
             _index++;
@@ -463,11 +403,7 @@ export default {
             this.menuData.topSolt.commonData[4].valueData = [sum];
           }
         }
-      } else if (
-        this.menuData &&
-        this.menuData.topSolt &&
-        this.menuData.topSolt.commonData
-      ) {
+      } else if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonData) {
         this.menuData.topSolt.commonData.forEach((item, index) => {
           this.menuData.topSolt.commonData[index].categoryData = [];
           this.menuData.topSolt.commonData[index].valueData = [];
@@ -478,6 +414,8 @@ export default {
             this.menuData.topSolt.commonData[index].value = 0;
           }
         });
+      } else if(this.menuData && this.menuData.commonName && this.menuData.commonName === "TOP"){
+        this.menuData.topData = this.resData;
       }
     },
     // 当用户使用光标切换交互组件时触发
@@ -488,27 +426,17 @@ export default {
     },
     // 用户点击菜单标题时，调用全局函数，根据全局暂存对象
     changeMenu() {
-      if (
-        this.menuData != undefined &&
-        this.menuData.index != undefined &&
-        this.menuData.title != undefined
-      ) {
+      if (this.menuData != undefined && this.menuData.index != undefined && this.menuData.title != undefined) {
         this.$store.commit("changeLeftMenuTitle", this.menuData.title);
-        if (
-          this.menuData.menuIndex != undefined &&
-          this.menuData.subMenuIndex != undefined
-        ) {
+        if (this.menuData.menuIndex != undefined && this.menuData.subMenuIndex != undefined) {
           this.$store.commit("changeBackMenu", {
             index: this.menuData.menuIndex,
             subIndex: this.menuData.subMenuIndex,
-            name: this.menuData.menuName ? this.menuData.menuName : "",
+            name: this.menuData.menuName ? this.menuData.menuName : ""
           });
         }
       }
-      if (
-        this.menuData != undefined &&
-        this.menuData.gotoPageInfo != undefined
-      ) {
+      if (this.menuData != undefined && this.menuData.gotoPageInfo != undefined) {
         this.$store.commit("changeNavSelect", this.menuData.gotoPageInfo);
         // // 暂未开发页面集合
         // let notFound = [
@@ -610,7 +538,7 @@ export default {
       } catch (error) {
         console.error("MenuCard组件出现异常：", error);
       }
-    },
+    }
   },
   watch: {
     "$store.state.navSelect": {
@@ -619,7 +547,7 @@ export default {
           this.showChange();
         });
       },
-      deep: true,
+      deep: true
     },
     "$store.state.homeSpecialTown": {
       handler() {
@@ -627,9 +555,9 @@ export default {
           this.changeHomeSpecialTown();
         });
       },
-      deep: true,
-    },
-  },
+      deep: true
+    }
+  }
 };
 </script>
 
@@ -660,11 +588,7 @@ export default {
     .menuMainBox_top {
       background-color: @lightColor;
       &_left {
-        background-image: --webkit-linear-gradient(
-          to left,
-          @lightColor,
-          #007dff
-        );
+        background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
         background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
         background-image: linear-gradient(to left, @lightColor, #007dff);
       }
@@ -694,24 +618,9 @@ export default {
       flex-wrap: nowrap;
       align-content: center;
       height: 100%;
-      background-image: --webkit-linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
-      background-image: --moz-linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
-      background-image: linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
+      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
       border-bottom: 2px solid @borderColor;
       &_iconS {
         margin: 10px;
@@ -750,12 +659,7 @@ export default {
         margin-left: 10px;
         width: 15px;
         height: 30px;
-        background-image: linear-gradient(
-          to bottom,
-          transparent,
-          transparent,
-          #00a6c0
-        );
+        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
         transform: skew(-45deg);
       }
       &_iconE1 {
@@ -773,18 +677,8 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(
-          to right,
-          @borderColor,
-          @topTitleBgLeft
-        )
-        1;
-      border-image: --moz-linear-gradient(
-          to right,
-          @borderColor,
-          @topTitleBgLeft
-        )
-        1;
+      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       &_d1 {
         position: absolute;
@@ -905,12 +799,7 @@ export default {
         margin-left: 10px;
         width: 15px;
         height: 30px;
-        background-image: linear-gradient(
-          to bottom,
-          transparent,
-          transparent,
-          #00a6c0
-        );
+        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
         transform: skew(-45deg);
       }
       &_iconE1 {
@@ -928,18 +817,8 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(
-          to right,
-          @borderColor,
-          @topTitleBgLeft
-        )
-        1;
-      border-image: --moz-linear-gradient(
-          to right,
-          @borderColor,
-          @topTitleBgLeft
-        )
-        1;
+      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       &_d1 {
         position: absolute;
@@ -1019,24 +898,9 @@ export default {
   flex-wrap: nowrap;
   justify-content: center;
   align-content: center;
-  background-image: --webkit-linear-gradient(
-    to left,
-    @topTitleMinLeft,
-    @borderColor,
-    @topTitleMinLeft
-  );
-  background-image: --moz-linear-gradient(
-    to left,
-    @topTitleMinLeft,
-    @borderColor,
-    @topTitleMinLeft
-  );
-  background-image: linear-gradient(
-    to left,
-    @topTitleMinLeft,
-    @borderColor,
-    @topTitleMinLeft
-  );
+  background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+  background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+  background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
   &_title {
     font-size: 18px;
     font-family: PingFang SC;
@@ -1051,16 +915,8 @@ export default {
   padding-top: 10px;
   width: 100%;
   height: calc(100% - 30px);
-  background-image: --webkit-linear-gradient(
-    to top,
-    @topTitleMinLeft,
-    @topTitleBgLeft
-  );
-  background-image: --moz-linear-gradient(
-    to top,
-    @topTitleMinLeft,
-    @topTitleBgLeft
-  );
+  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   box-sizing: border-box;
   overflow-x: hidden;
@@ -1131,18 +987,14 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @borderColor, @borderColor) left top
-        no-repeat,
+    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;
+      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;
   }
 }

src/config/common.js

@@ -817,7 +817,8 @@ export const menusMap = {
       minDomWidth: 1500,
     },
   ],
-  right: [
+  right: [[
+
     {
       type: "card",
       title: "资金投入情况",
@@ -892,51 +893,66 @@ export const menusMap = {
       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],
+        },
+      ],
     },
-    {
-      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,
+    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

@@ -57,18 +57,32 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
+              commonName: 'TOP',
+              getUrl: '/dms/content/selectGroupByCountOrderBy',
+              columnId: 24,
+              pageSize: 5,
+              field: 'c_wtfl',
+              dataType: 'all',
+              dataSize: 10,
+              topData: []
             }"
-            ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
           <MenuCard
             :menuData="{
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
+              commonName: 'TOP',
+              getUrl: '/dms/content/selectGroupByCountOrderBy',
+              columnId: 24,
+              pageSize: 5,
+              field: 'c_wtfl',
+              dataType: 'all',
+              dataSize: 10,
+              topData: []
             }"
-            ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
         </div>
       </div>
@@ -141,23 +155,8 @@
       />
     </div>
     <!-- 首页右侧菜单列 -->
-    <div class="rightMenus">
-      <MenuCard :menuData="menus.right[0]"></MenuCard>
-      <MenuCard :menuData="menus.right[1]"></MenuCard>
-      <MenuCard :menuData="menus.right[2]">
-        <template slot="top">
-          <TopCard :dataSize="5" />
-        </template>
-      </MenuCard>
-    </div>
-    <!-- 土地资源右侧菜单列 -->
-    <div class="rightMenus">
-      <MenuCard :menuData="menus.right[3]"></MenuCard>
-      <MenuCard :menuData="menus.right[4]">
-        <template slot="top">
-          <TopCard :dataSize="5" />
-        </template>
-      </MenuCard>
+    <div class="rightMenus" v-for="(item, index) in menus.right" :key="'rightBox' + index">
+      <MenuCard :menuData="item2" v-for="(item2, index2) in item" :key="'right' + index2"> </MenuCard>
     </div>
   </div>
 </template>