大屏 档案借阅/档案类型表每隔1分钟刷新一次

src/views/components/echarts/lendAcross.vue

@@ -24,11 +24,17 @@ export default {
     height: {
       type: String,
       default: '100%'
+    },
+    refreshtime: {
+      type: Number,
+      default: null // 接收父组件的刷新间隔值
     }
   },
+
   data() {
     return {
-      chart: null
+      chart: null,
+      timer: null
     }
   },
   watch: {
@@ -43,11 +49,22 @@ export default {
     }
   },
   mounted() {
-    this.drawChart()
+    // this.drawChart()
+    this.refreshEchart()
   },
   beforeDestroy() {
+    clearInterval(this.timer)
   },
   methods: {
+    refreshEchart() {
+      if (this.refreshtime) {
+        this.timer = setInterval(() => {
+          this.drawChart()
+        }, this.refreshtime)
+      } else {
+        this.drawChart()
+      }
+    },
     drawChart() {
       const chartDom = document.getElementById('mainlend')
       this.chart = echarts.init(chartDom)
@@ -144,6 +161,7 @@ export default {
           }
         ]
       }
+      this.chart.clear()
       option && this.chart.setOption(option)
     }
 

src/views/components/echarts/typePie.vue

@@ -25,11 +25,16 @@ export default {
     height: {
       type: String,
       default: '100%'
+    },
+    refreshtime: {
+      type: Number,
+      default: null // 接收父组件的刷新间隔值
     }
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      timer: null
     }
   },
   watch: {
@@ -44,9 +49,22 @@ export default {
     }
   },
   mounted() {
-    this.drawChart()
+    // this.drawChart()
+    this.refreshEchart()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
   },
   methods: {
+    refreshEchart() {
+      if (this.refreshtime) {
+        this.timer = setInterval(() => {
+          this.drawChart()
+        }, this.refreshtime)
+      } else {
+        this.drawChart()
+      }
+    },
     drawChart() {
       const chartDom = document.getElementById('maintype')
       this.chart = echarts.init(chartDom, 'light')
@@ -100,7 +118,7 @@ export default {
           }
         ]
       }
-
+      this.chart.clear()
       option && this.chart.setOption(option)
     }
   }

src/views/environmentalScreen/index.vue

@@ -180,15 +180,15 @@
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-zhenglishi" />档案借阅</h3>
           <div class="chart-wrapper" style="height: calc(100% - 40px);">
-            <lend-across :lend-data="lendData" />
+            <lend-across :lend-data="lendData" :refreshtime="60000" />
           </div>
         </div>
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
+          <h3><i class="iconfont icon-zhenglishi" />档案类型</h3>
           <div v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
-            <type-pie :type-data="typeData" />
+            <type-pie :type-data="typeData" :refreshtime="60000" />
           </div>
           <div v-else class="empty-main">
             <svg-icon icon-class="empty" class-name="empty-img" />