饼图和占比定时刷新

src/module/databoard/databoard/order-proportion.vue

@@ -39,7 +39,7 @@
       <display-board class="trade_left" title="订单量占比" title_size="large">
         <winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
       </display-board>
-      <line-bar-chart style="width: 75%;height: 100%;" :data="currentDetailData" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter" bar-formatter="{@value}万元"/>
+      <line-bar-chart ref="chart" style="width: 75%;height: 100%;" :data="currentDetailData" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter" bar-formatter="{@value}万元"/>
     </div>
   </div>
 </template>
@@ -95,7 +95,7 @@ export default {
       getHeadData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
         (res) => {
           this.currentHeadData = res;
-          if (type !== "date"){
+          if (type && type !== "date"){
             this.currentCard = res[0]?res[0].key:null;
             this.chartTitle = res[0]?(res[0].title + '委托单位占比'):null;
           }
@@ -128,16 +128,26 @@ export default {
     },
     calcCardWidth(){
       this.listCardStyle.width = "calc((100% - 4rem) / " + this.currentHeadData.length + ")";
-    }
+    },
+    refreshData(){
+      this.getHeadData();
+    },
   },
   mounted() {
     this.changeDimension();
-    setTimeout(() => {
-      let chartDom = this.$refs.chart;
-      this.chart = echarts.init(chartDom);
-      this.chart.setOption(this.chartOption);
-    }, 500)
   },
+  watch:{
+    countDown(n,o){
+      if (n === 1){
+        this.refreshData();
+      }
+    },
+  },
+  props:{
+    countDown:{
+      type: Number
+    }
+  }
 }
 </script>
 <style scoped>

src/module/databoard/index.vue

@@ -528,6 +528,18 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);
+  },
+  watch:{
+    countDown(n,o){
+      if (n === 1){
+        this.refreshData();
+      }
+    },
+  },
+  props:{
+    countDown:{
+      type: Number
+    }
   }
 };
 </script>

src/module/index/index.vue

@@ -3,15 +3,15 @@
     <div class="head" @click="goIndex">
       <div class="text_left">
         <input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
-        <span>2023-08-01</span>
-        <span>17:18:29</span>
-        <span>星期三</span>
+        <span>{{ currentDate }}</span>
+        <span>{{ currentTime }}</span>
+        <span>{{ currentWeek }}</span>
       </div>
       <div class="text_right">
         <span>刷新时间：{{ countDown }}s</span>
       </div>
     </div>
-    <router-view style="height: 90%" v-if="isRouterAlive"></router-view>
+    <router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
   </div>
 </template>
 
@@ -24,14 +24,17 @@ export default {
   name: 'app',
   data() {
     return {
-      countDown: 10000,
+      countDown: 10,
+      currentDate: null,
+      currentTime: null,
+      currentWeek: null,
       isRouterAlive: true,
       countDownTimer: null,
+      week: ['星期天','星期一','星期二','星期三','星期四','星期五'],
     }
   },
   methods: {
     goIndex() {
-      console.log(this.$router)
       this.$router.push({path: '/'})
     },
     reload() {
@@ -40,15 +43,21 @@ export default {
         this.isRouterAlive = true
       })
     },
+    setCurrentDateTime(){
+      let now = new Date();
+      this.currentDate = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate();
+      this.currentTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
+      this.currentWeek = this.week[now.getDay()];
+    },
   },
   mounted() {
     // 倒计时器
     this.countDownTimer = setInterval(() => {
       this.countDown--
       if (this.countDown <= 0) {
-        // this.reload()
-        this.countDown = 10
+        this.countDown = 10;
       }
+      this.setCurrentDateTime();
     }, 1000)
   },
   beforeDestroy() {