可视化表格滚动及更换获取最新数据接口

src/api/index.js

@@ -68,6 +68,7 @@ export default {
   getTableByCondition:`/data/data/table/getTableByCondition`,
   downloadData:`${Setting.apiBaseURL}/data/data/download`,
   previewData:`/data/data/preview`,
+  visualPreview:`/data/data/visualPreview`,
   downloadRecord:`/data/data/myDownload/downloadRecord`,
   getDownloadRecord:`/data/data/myDownload/getDownloadRecord`,
   downloadAgain:`/data/data/downloadAgain`,

src/pages/screen/list/index.vue

@@ -227,17 +227,21 @@
                     <img src="@/assets/img/screen/t_7.png" alt="">
                     {{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
                 </div>
-                <div class="main_table t_btn8" style="height: 260px;overflow: auto">
+                <div class="main_table t_btn8">
                   <table>
                     <thead>
                       <tr>
-                        <th>概况名称</th>
+                        <th width="70%">概况名称</th>
                         <th>指数</th>
                       </tr>
                     </thead>
+                  </table>
+              </div>
+                <div class="main_table t_btn8" ref="tableWrap" style="height: 215px;margin-top: 0;overflow: auto">
+                  <table>
                     <tbody>
                       <tr v-for="(item, i) in goodsSell" :key="i">
-                        <td>{{ item.hct }}</td>
+                        <td width="70%">{{ item.hct }}</td>
                         <td>{{ item.rcpi }}</td>
                       </tr>
                     </tbody>
@@ -388,7 +392,7 @@ export default {
       // 获取图标数据并渲染
       renderChart() {
         // 中国宏观杠杆率
-        this.$get(`${this.api.previewData}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => {
+        this.$get(`${this.api.visualPreview}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => {
           const { comment, data } = res
           const series = []
           comment.map(e => {
@@ -451,7 +455,7 @@ export default {
         }).catch(res => {})
 
         // 全国税收收入
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => {
+        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => {
           const { comment, data } = res
           echarts.init(document.querySelector(`#chart3`)).setOption({
             title: {
@@ -737,7 +741,7 @@ export default {
         }).catch(res => {})
 
         // 商品零售价格指数
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
+        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
           const { data } = res
           const goodsSell = []
           data.map(e => {
@@ -883,7 +887,7 @@ export default {
         }).catch(res => {})
       
         // 以美元计算进口年率
-        this.$get(`${this.api.previewData}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => {
+        this.$get(`${this.api.visualPreview}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => {
           const { comment, data } = res 
           echarts.init(document.querySelector(`#chart6`)).setOption({
             tooltip: {
@@ -892,7 +896,7 @@ export default {
             grid: {
               left: '12%',
               right: '5%',
-              bottom: '12%'
+              bottom: '26%'
             },
             legend: {
               icon: 'rect',
@@ -918,7 +922,8 @@ export default {
                 interval: 0,
                 textStyle: {
                   color: '#fff',
-                }
+                },
+                rotate: 60
               },
               data: data.map(e => e.date_index)
             }],
@@ -976,7 +981,7 @@ export default {
       
         
         // 全社会用电分类情况
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
+        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
           const { comment, data } = res
           const item = data[3]
           echarts.init(document.querySelector(`#chart7`)).setOption({
@@ -1095,6 +1100,16 @@ export default {
             }]
           })
         }).catch(res => {})
+      
+        this.scrollTable()
+      },
+      // 表格滚动效果
+      scrollTable() {
+        const dom = this.$refs.tableWrap
+        setInterval(() => {
+          dom.scrollTop += 1
+          if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
+        }, 30)
       }
     }
 };

src/styles/page/screen.scss

@@ -1,5 +1,5 @@
 ::-webkit-scrollbar-thumb {
-  background: rgba(77, 97, 207, .45);
+  display: none;
 }
 .wrap {
   width: 100%;