首页滚动显示频发问题

package.json

@@ -24,6 +24,7 @@
     "vue": "^2.6.14",
     "vue-pdf": "^4.3.0",
     "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/components/common/TopCard.vue

@@ -1,13 +1,56 @@
 <template>
   <div class="CardBox">
-    <div v-for="(items, index) in dataList" :key="index" class="Top_box" v-show="dataList.length > 0">
-      <div class="Top_box_name">{{ "TOP" + (index + 1) }}</div>
-      <div class="Top_box_main">
-        <div class="Top_box_main_title">{{ items[columnName] }}</div>
-        <div><el-progress :percentage="items.number >= 100 ? 100 : items.number" :stroke-width="10" :show-text="false"></el-progress></div>
+    <vue-seamless-scroll
+      v-if="isScroll"
+      :data="dataList"
+      :class-option="optionHover"
+    >
+      <div
+        v-for="(items, index) in dataList"
+        :key="index"
+        class="Top_box"
+        v-show="dataList.length > 0"
+      >
+        <div class="Top_box_name">{{ "TOP" + (index + 1) }}</div>
+        <div class="Top_box_main">
+          <div class="Top_box_main_title">{{ items[columnName] }}</div>
+          <div>
+            <el-progress
+              :percentage="items.number >= 100 ? 100 : items.number"
+              :stroke-width="10"
+              :show-text="false"
+            ></el-progress>
+          </div>
+        </div>
+        <div class="Top_box_value">
+          {{ items.info ? items.info : items.number }}
+        </div>
+      </div>
+    </vue-seamless-scroll>
+    <div style="height: 100%; width: 100%" v-else>
+      <div
+        v-for="(items, index) in dataList"
+        :key="index"
+        class="Top_box"
+        v-show="dataList.length > 0"
+      >
+        <div class="Top_box_name">{{ "TOP" + (index + 1) }}</div>
+        <div class="Top_box_main">
+          <div class="Top_box_main_title">{{ items[columnName] }}</div>
+          <div>
+            <el-progress
+              :percentage="items.number >= 100 ? 100 : items.number"
+              :stroke-width="10"
+              :show-text="false"
+            ></el-progress>
+          </div>
+        </div>
+        <div class="Top_box_value">
+          {{ items.info ? items.info : items.number }}
+        </div>
       </div>
-      <div class="Top_box_value">{{ items.info ? items.info : items.number }}</div>
     </div>
+
     <el-empty v-show="dataList.length === 0" description="暂无数据"></el-empty>
   </div>
 </template>
@@ -26,9 +69,32 @@ export default {
   /**
    * data:top data
    */
-  props: ["dataList", "columnName"],
+  props: ["dataList", "columnName", "isScroll"],
   methods: {},
-  watch: {}
+  data() {
+    return {
+      optionHover: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      },
+    };
+  },
+  watch: {
+    isScroll: {
+      handler(val) {
+        if (val) {
+          console.log(val, "isScroll");
+        }
+      },
+      immediate: true,
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -48,6 +114,11 @@ export default {
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
+  .seamless-warp {
+    height: 90%;
+    overflow: hidden;
+  }
+
   .Top_box {
     width: 100%;
     display: flex;
@@ -83,10 +154,18 @@ export default {
       }
       ::v-deep .el-progress-bar__outer {
         background-color: transparent;
-        background-image: linear-gradient(90deg, #007dff32 0%, #00ffff32 100%) !important;
+        background-image: linear-gradient(
+          90deg,
+          #007dff32 0%,
+          #00ffff32 100%
+        ) !important;
       }
       ::v-deep .el-progress-bar__inner {
-        background-image: linear-gradient(90deg, #007dff 0%, #00ffff 100%) !important;
+        background-image: linear-gradient(
+          90deg,
+          #007dff 0%,
+          #00ffff 100%
+        ) !important;
       }
     }
     .Top_box_value {

src/components/layout/MenuCard.vue

@@ -5,46 +5,71 @@
     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.beforeTitle ? $store.state[menuData.beforeTitle] : "") + menuData.title }}
+          {{
+            (menuData.beforeTitle ? $store.state[menuData.beforeTitle] : "") +
+            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 -->
@@ -65,14 +90,19 @@
       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>
@@ -82,7 +112,12 @@
       <!-- 上部 -->
       <div class="menuMainBox_main_top" v-if="!menuData.topSolt">
         <!-- <slot name="top"> </slot> -->
-        <TopCard v-if="menuData.commonName == 'TOP'" :dataList="menuData.topData" :columnName="menuData.field" />
+        <TopCard
+          v-if="menuData.commonName == 'TOP'"
+          :dataList="menuData.topData"
+          :columnName="menuData.field"
+          :isScroll="menuData.isScroll ? true : false"
+        />
       </div>
       <div class="menuMainBox_main_top" v-if="menuData.topSolt">
         <TagTableCard
@@ -92,9 +127,15 @@
         />
         <div
           class="menuCardFlex"
-          v-if="menuData.topSolt.commonName == 'TagCard' || menuData.topSolt.commonName == 'ALLLIST'"
+          v-if="
+            menuData.topSolt.commonName == 'TagCard' ||
+            menuData.topSolt.commonName == 'ALLLIST'
+          "
           :style="{
-            justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'
+            justifyContent:
+              menuData.topSolt.commonData.length > 1
+                ? 'space-between'
+                : 'center',
           }"
         >
           <TagCard
@@ -115,19 +156,30 @@
         <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>
@@ -151,25 +203,31 @@ export default {
     return {
       dataInitLoading: false,
       resData: [],
-      chartCardDataIndex: 0
+      chartCardDataIndex: 0,
     };
   },
   mounted() {
     this.$nextTick(() => {
       try {
         // 读取静态文件逻辑（commonDataGetUrl为静态文件路径，需要注意的是commonDataGetUrl属性在topSolt属性下面）
-        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);
@@ -195,17 +253,29 @@ export default {
                       listMap["全部"] = {};
                       for (let categoryDataKeys in categoryData) {
                         if (categoryData[categoryDataKeys]) {
-                          let categoryDataItemData = categoryData[categoryDataKeys];
+                          let categoryDataItemData =
+                            categoryData[categoryDataKeys];
                           if (listMap["全部"][categoryDataKeys]) {
-                            categoryDataItemData.valueData.forEach((valueIndexItem, index) => {
-                              if (listMap["全部"][categoryDataKeys].valueData[index]) {
-                                listMap["全部"][categoryDataKeys].valueData[index] += Math.floor(valueIndexItem);
-                              } else {
-                                listMap["全部"][categoryDataKeys].valueData[index] = Math.floor(valueIndexItem);
+                            categoryDataItemData.valueData.forEach(
+                              (valueIndexItem, index) => {
+                                if (
+                                  listMap["全部"][categoryDataKeys].valueData[
+                                    index
+                                  ]
+                                ) {
+                                  listMap["全部"][categoryDataKeys].valueData[
+                                    index
+                                  ] += Math.floor(valueIndexItem);
+                                } else {
+                                  listMap["全部"][categoryDataKeys].valueData[
+                                    index
+                                  ] = Math.floor(valueIndexItem);
+                                }
                               }
-                            });
+                            );
                           } else {
-                            listMap["全部"][categoryDataKeys] = categoryDataItemData;
+                            listMap["全部"][categoryDataKeys] =
+                              categoryDataItemData;
                           }
                         }
                       }
@@ -219,28 +289,41 @@ 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++;
                 }
               }
               this.dataInitLoading = false;
             },
-            error => {
+            (error) => {
               console.log("error:", error, this.menuData);
               this.dataInitLoading = false;
             }
           );
-        } else if (this.menuData.commonName && this.menuData.commonName === "TOP") {
+        } else if (
+          this.menuData.commonName &&
+          this.menuData.commonName === "TOP"
+        ) {
           // top列表
           this.topData(this.$store.state.homeSpecialTown);
-        } else if (this.menuData.commonName && this.menuData.commonName === "ALLLIST") {
+        } else if (
+          this.menuData.commonName &&
+          this.menuData.commonName === "ALLLIST"
+        ) {
           // conut(*) group by
           this.allListData(this.$store.state.homeSpecialTown);
-        } else if (this.menuData.commonName && this.menuData.commonName === "SUM") {
+        } else if (
+          this.menuData.commonName &&
+          this.menuData.commonName === "SUM"
+        ) {
           // for => conut(*) where
           this.sumData(this.$store.state.homeSpecialTown);
         } else if (this.menuData && this.menuData.columnId) {
@@ -257,7 +340,10 @@ export default {
           } else {
             params.append("states", "1,2,3,4");
           }
-          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
+          params.append(
+            "pageSize",
+            this.menuData.pageSize ? this.menuData.pageSize : 999
+          );
           params.append("page", 0);
           if (this.menuData.paramJson) {
             params.append("paramJson", JSON.stringify(this.menuData.paramJson));
@@ -266,13 +352,18 @@ export default {
             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.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
-            res => {
+          this.$Post(
+            this.menuData.getUrl
+              ? this.menuData.getUrl
+              : this.urlsCollection.selectContentList,
+            params
+          ).then(
+            (res) => {
               if (
                 this.menuData.commonName &&
                 this.menuData.commonName === "TOP" &&
@@ -285,17 +376,25 @@ export default {
                   }
                 });
                 this.changeHomeSpecialTown();
-              } else if (res.code === 200 && res.content.data && res.content.data.length > 0) {
+              } else if (
+                res.code === 200 &&
+                res.content.data &&
+                res.content.data.length > 0
+              ) {
                 let listMap = {};
                 let tableData = res.content.data;
-                tableData.forEach(item => {
+                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;
                   }
                 });
@@ -307,16 +406,23 @@ 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;
                   }
                 }
@@ -333,7 +439,7 @@ export default {
               }
               this.dataInitLoading = false;
             },
-            error => {
+            (error) => {
               this.resData = [];
               this.changeHomeSpecialTown();
               console.log("error:", error, this.menuData);
@@ -343,7 +449,9 @@ export default {
         }
         // 只有第一次创建该页面，或刷新页面时。
         if (this.menuData.menuIndex) {
-          if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
+          if (
+            this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)
+          ) {
             // 立即修改display为block
             this.$refs.menuCard.style.display = "block";
             setTimeout(() => {
@@ -409,7 +517,7 @@ export default {
         this.menuData.topSolt.commonData[0].valueData = [];
         let _categoryData = this.menuData.categoryData;
         let _valueData = [];
-        this.menuData.categoryData.forEach(item => {
+        this.menuData.categoryData.forEach((item) => {
           _valueData.push(0);
         });
 
@@ -420,15 +528,19 @@ export default {
             params.append("field", this.menuData.field);
           }
           params.append("states", "2,3");
-          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
+          params.append(
+            "pageSize",
+            this.menuData.pageSize ? this.menuData.pageSize : 999
+          );
           params.append("page", 0);
           let pramJson = {};
           pramJson.c_new_date = item;
           pramJson.sj_select = this.menuData.paramJson.sj_select;
           if (homeSpecialTown !== "全部") {
-            let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
+            let associatedItems =
+              this.$store.state.selectSelectDataMap.associatedItems;
             if (associatedItems.length > 0) {
-              associatedItems.forEach(item => {
+              associatedItems.forEach((item) => {
                 if (item.name === homeSpecialTown) {
                   pramJson.bsjz = item.index + "";
                 }
@@ -440,16 +552,25 @@ export default {
             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.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
-            res => {
+          this.$Post(
+            this.menuData.getUrl
+              ? this.menuData.getUrl
+              : this.urlsCollection.selectContentList,
+            params
+          ).then(
+            (res) => {
               let sumField = 0;
-              if (res.code === 200 && res.content !== "数据为空" && res.content.length > 0) {
-                res.content.forEach(contentItem => {
+              if (
+                res.code === 200 &&
+                res.content !== "数据为空" &&
+                res.content.length > 0
+              ) {
+                res.content.forEach((contentItem) => {
                   sumField += Number(contentItem.number);
                 });
               }
@@ -457,10 +578,11 @@ export default {
 
               this.menuData.topSolt.commonData[0].categoryData = _categoryData;
               this.menuData.topSolt.commonData[0].valueData = _valueData;
-              this.menuData.topSolt.commonData[0].value = _valueData[_valueData.length - 1];
+              this.menuData.topSolt.commonData[0].value =
+                _valueData[_valueData.length - 1];
               this.dataInitLoading = false;
             },
-            error => {
+            (error) => {
               console.log("error:", error, this.menuData);
             }
           );
@@ -476,7 +598,10 @@ export default {
           params.append("field", this.menuData.field);
         }
         params.append("states", "0,1,2,3,4");
-        params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
+        params.append(
+          "pageSize",
+          this.menuData.pageSize ? this.menuData.pageSize : 999
+        );
         params.append("page", 0);
         let pramJson = {};
         if (this.menuData.paramJson) {
@@ -485,9 +610,10 @@ export default {
           }
         }
         if (homeSpecialTown !== "全部") {
-          let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
+          let associatedItems =
+            this.$store.state.selectSelectDataMap.associatedItems;
           if (associatedItems.length > 0) {
-            associatedItems.forEach(item => {
+            associatedItems.forEach((item) => {
               if (item.name === homeSpecialTown) {
                 if (this.menuData.bsjzColumnName) {
                   pramJson.c_bsjzwt = item.index + "";
@@ -503,13 +629,18 @@ export default {
           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.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
-          res => {
+        this.$Post(
+          this.menuData.getUrl
+            ? this.menuData.getUrl
+            : this.urlsCollection.selectContentList,
+          params
+        ).then(
+          (res) => {
             this.resData = [];
             if (res.code === 200 && res.content.length > 0) {
               res.content.forEach((item, index) => {
@@ -524,7 +655,7 @@ export default {
             }
             this.dataInitLoading = false;
           },
-          error => {
+          (error) => {
             this.resData = [];
             this.menuData.topData = this.resData;
             console.log("error:", error, this.menuData);
@@ -538,56 +669,67 @@ export default {
     allListData(homeSpecialTown) {
       this.dataInitLoading = true;
       if (this.menuData.paramJson) {
-        this.menuData.paramJson.sj_select.forEach((paramSjItem, paramSjIndex) => {
-          let params = new FormData();
-          params.append("columnId", this.menuData.columnId);
-          if (this.menuData.field) {
-            params.append("field", this.menuData.field);
-          }
-          params.append("states", "0,1,2,3,4");
-          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
-          params.append("page", 0);
-          let pramJson = {};
-          pramJson.sj_select = paramSjItem;
-          if (homeSpecialTown !== "全部") {
-            let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
-            if (associatedItems.length > 0) {
-              associatedItems.forEach(item => {
-                if (item.name === homeSpecialTown) {
-                  pramJson.bsjz = item.index + "";
-                }
-              });
+        this.menuData.paramJson.sj_select.forEach(
+          (paramSjItem, paramSjIndex) => {
+            let params = new FormData();
+            params.append("columnId", this.menuData.columnId);
+            if (this.menuData.field) {
+              params.append("field", this.menuData.field);
             }
-          }
-          params.append("paramJson", JSON.stringify(pramJson));
-          if (this.menuData.sortField) {
-            let sortparam = [
-              {
-                field: this.menuData.sortField.field,
-                orderByType: this.menuData.sortField.orderByType
-              }
-            ];
-            params.append("orderBy", JSON.stringify(sortparam));
-          }
-          this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
-            res => {
-              this.resData = [];
-              let allSum = 0;
-              if (res.code === 200 && res.content.length > 0) {
-                res.content.forEach(item => {
-                  allSum += item.number;
+            params.append("states", "0,1,2,3,4");
+            params.append(
+              "pageSize",
+              this.menuData.pageSize ? this.menuData.pageSize : 999
+            );
+            params.append("page", 0);
+            let pramJson = {};
+            pramJson.sj_select = paramSjItem;
+            if (homeSpecialTown !== "全部") {
+              let associatedItems =
+                this.$store.state.selectSelectDataMap.associatedItems;
+              if (associatedItems.length > 0) {
+                associatedItems.forEach((item) => {
+                  if (item.name === homeSpecialTown) {
+                    pramJson.bsjz = item.index + "";
+                  }
                 });
               }
-              this.menuData.topSolt.commonData[paramSjIndex].value = allSum;
-              this.dataInitLoading = false;
-            },
-            error => {
-              this.menuData.topSolt.commonData[paramSjIndex].value = "--";
-              console.log("error:", error, this.menuData);
-              this.dataInitLoading = false;
             }
-          );
-        });
+            params.append("paramJson", JSON.stringify(pramJson));
+            if (this.menuData.sortField) {
+              let sortparam = [
+                {
+                  field: this.menuData.sortField.field,
+                  orderByType: this.menuData.sortField.orderByType,
+                },
+              ];
+              params.append("orderBy", JSON.stringify(sortparam));
+            }
+            this.$Post(
+              this.menuData.getUrl
+                ? this.menuData.getUrl
+                : this.urlsCollection.selectContentList,
+              params
+            ).then(
+              (res) => {
+                this.resData = [];
+                let allSum = 0;
+                if (res.code === 200 && res.content.length > 0) {
+                  res.content.forEach((item) => {
+                    allSum += item.number;
+                  });
+                }
+                this.menuData.topSolt.commonData[paramSjIndex].value = allSum;
+                this.dataInitLoading = false;
+              },
+              (error) => {
+                this.menuData.topSolt.commonData[paramSjIndex].value = "--";
+                console.log("error:", error, this.menuData);
+                this.dataInitLoading = false;
+              }
+            );
+          }
+        );
       }
     },
     // 切换街镇时
@@ -595,14 +737,21 @@ export default {
       try {
         this.dataInitLoading = true;
         // 如果静态文件中的数据存在，直接返回
-        if (this.resData[this.$store.state.homeSpecialTown] && this.menuData.topSolt && this.menuData.topSolt.commonData) {
+        if (
+          this.resData[this.$store.state.homeSpecialTown] &&
+          this.menuData.topSolt &&
+          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;
             this.menuData.topSolt.commonData[0].value =
               this.resData[this.$store.state.homeSpecialTown].valueData[
-                this.resData[this.$store.state.homeSpecialTown].valueData.length - 1
+                this.resData[this.$store.state.homeSpecialTown].valueData
+                  .length - 1
               ];
           } else {
             // 全部
@@ -611,27 +760,50 @@ export default {
               let _commonData = {
                 title: keys,
                 unit: this.menuData.topSolt.commonData[_index].unit,
-                categoryData: this.resData[this.$store.state.homeSpecialTown][keys].categoryData,
-                valueData: this.resData[this.$store.state.homeSpecialTown][keys].valueData,
+                categoryData:
+                  this.resData[this.$store.state.homeSpecialTown][keys]
+                    .categoryData,
+                valueData:
+                  this.resData[this.$store.state.homeSpecialTown][keys]
+                    .valueData,
                 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[
+                    this.resData[this.$store.state.homeSpecialTown][keys]
+                      .valueData.length - 1
+                  ],
               };
-              if(this.menuData.topSolt.commonData[_index].type){
-                _commonData.type = this.menuData.topSolt.commonData[_index].type
+              if (this.menuData.topSolt.commonData[_index].type) {
+                _commonData.type =
+                  this.menuData.topSolt.commonData[_index].type;
               }
               this.menuData.topSolt.commonData[_index] = _commonData;
               _index++;
             }
           }
-        } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "TOP") {
+        } else if (
+          this.menuData &&
+          this.menuData.commonName &&
+          this.menuData.commonName === "TOP"
+        ) {
           this.topData(this.$store.state.homeSpecialTown);
-        } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "SUM") {
+        } else if (
+          this.menuData &&
+          this.menuData.commonName &&
+          this.menuData.commonName === "SUM"
+        ) {
           this.sumData(this.$store.state.homeSpecialTown);
-        } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "ALLLIST") {
+        } else if (
+          this.menuData &&
+          this.menuData.commonName &&
+          this.menuData.commonName === "ALLLIST"
+        ) {
           this.allListData(this.$store.state.homeSpecialTown);
-        } 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 = [];
@@ -657,17 +829,27 @@ 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);
       }
     },
@@ -750,7 +932,7 @@ export default {
       } catch (error) {
         console.error("MenuCard组件出现异常：", error);
       }
-    }
+    },
   },
   watch: {
     "$store.state.navSelect": {
@@ -759,7 +941,7 @@ export default {
           this.showChange();
         });
       },
-      deep: true
+      deep: true,
     },
     "$store.state.homeSpecialTown": {
       handler() {
@@ -767,9 +949,9 @@ export default {
           this.changeHomeSpecialTown();
         });
       },
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -800,7 +982,11 @@ 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);
       }
@@ -830,9 +1016,24 @@ 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;
@@ -871,7 +1072,12 @@ 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 {
@@ -889,8 +1095,18 @@ 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;
@@ -1011,7 +1227,12 @@ 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 {
@@ -1029,8 +1250,18 @@ 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;
@@ -1110,9 +1341,24 @@ 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;
@@ -1127,8 +1373,16 @@ export default {
   padding-top: 10px;
   width: 100%;
   height: calc(100% - 36px);
-  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;
@@ -1199,14 +1453,18 @@ 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

@@ -1189,6 +1189,7 @@ export const menuOnLine = {
         columnId: 1127,
         pageSize: 10,
         field: "c_ckwtdxwt",
+        isScroll:true,
         pramJson: {
           c_bsjzwt: ""
         },

src/main.js

@@ -19,6 +19,8 @@ import CryptoJS from "./utils/publicFunction.js";
 import dayjs from "dayjs";
 import * as echarts from "echarts";
 import proj4 from "proj4";
+// 滚动插件
+import scroll from "vue-seamless-scroll/src";
 Vue.directive("drag", drag);
 Vue.prototype.$CryptoJS = CryptoJS;
 Vue.prototype.$Post = post;
@@ -32,6 +34,7 @@ Vue.prototype.urlsCollection = urls;
 Vue.config.productionTip = false;
 
 Vue.use(ElementUI);
+Vue.use(scroll);
 Vue.prototype.$store = store;
 // 根据菜单index，和已选中的菜单返回是否相同
 Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
@@ -74,7 +77,7 @@ router.beforeEach((to, from, next) => {
         } else {
           localStorage.removeItem("TOKEN");
           localStorage.removeItem("USER_ID");
-          localStorage.removeItem("USER_NAME")
+          localStorage.removeItem("USER_NAME");
           ElementUI.Message.error("用户信息获取失败，请尝试重新登录!");
           next("/login");
         }