方芳芳

src/views/home.vue

 <template>
   <div class="dashboard-container">
     <div class="dashboard-editor-container">
+      <!-- <panelGroupETL /> -->
+
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
@@ -8,7 +10,8 @@
               <div class="num-content">
                 <div class="num-title">总监控任务数</div>
                 <span class="show-num">
-                  {{allRunningMonitorNum}}
+                  <!-- {{allRunningMonitorNum}} -->
+                  <count-to :start-val="0" :end-val="allRunningMonitorNum" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -19,7 +22,8 @@
               <div class="num-content">
                 <div class="num-title">监控作业数</div>
                 <span class="show-num">
-                  {{allRunningJobNum}}
+                  <!-- {{allRunningJobNum}} -->
+                   <count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -30,12 +34,15 @@
               <div class="num-content">
                 <div class="num-title">监控转换数</div>
                 <span  class="show-num">
-                  {{alRunningTransNum}}
+                  <!-- {{alRunningTransNum}} -->
+                   <count-to :start-val="0" :end-val="alRunningTransNum" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
         </el-col>
-    </el-row>
+      </el-row>
+
+
 
 
    
@@ -150,13 +157,15 @@
 import GithubCorner from "@/components/GithubCorner";
 import PanelGroup from "./dashboard/PanelGroup";
 import LineChart from "./dashboard/LineChart";
+// import panelGroupETL from "./dashboard/panelGroupETL";
 // import RadarChart from "@/components/Echarts/RadarChart";
 // import PieChart from "@/components/Echarts/PieChart";
 // import BarChart from "@/components/Echarts/BarChart";
+import CountTo from 'vue-count-to'
 import {
-  getArticleData,
-  getCardData,
-  getIncomeData,
+  // getArticleData,
+  // getCardData,
+  // getIncomeData,
   // getRegData,
   allRuningMonitor,//被监控中的总数
   getKettleLine,//获取7天内作业和转换的折线图
@@ -173,6 +182,8 @@ export default {
     GithubCorner,
     PanelGroup,
     LineChart,
+    // panelGroupETL
+     CountTo
 
   },
   data() {

src/views/watch/homework.vue

@@ -7,7 +7,8 @@
               <div class="num-content">
                 <div class="num-title">总作业任务数</div>
                 <span class="show-num">
-                  {{allRunningJobNum}}
+                  <!-- {{allRunningJobNum}} -->
+                  <count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -18,7 +19,8 @@
               <div class="num-content">
                 <div class="num-title">总成功次数</div>
                 <span class="show-num">
-                  {{allSuccessCount}}
+                  <!-- {{allSuccessCount}} -->
+                  <count-to :start-val="0" :end-val="allSuccessCount" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -29,7 +31,8 @@
               <div class="num-content">
                 <div class="num-title">总失败次数</div>
                 <span  class="show-num">
-                  {{allFailCount}}
+                  <!-- {{allFailCount}} -->
+                  <count-to :start-val="0" :end-val="allFailCount" :duration="3000" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -220,6 +223,8 @@ import {
   getAllMonitorJob,//获取所有的监控作业数
 } from "@/api/Statistics";
 
+import CountTo from 'vue-count-to'
+
 export default {
    filters: {
     dateFormat (val) {
@@ -237,6 +242,9 @@ export default {
       }
     }
   },
+  components: {
+    CountTo
+  },
   data() {
     return {
       tableTest:[],

src/views/watch/transform.vue

@@ -7,7 +7,8 @@
               <div class="num-content">
                 <div class="num-title">总转换任务数</div>
                 <span class="show-num">
-                   {{alRunningTransNum}}
+                   <!-- {{alRunningTransNum}} -->
+                   <count-to :start-val="0" :end-val="alRunningTransNum" :duration="3200" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -18,7 +19,8 @@
               <div class="num-content">
                 <div class="num-title">总成功次数</div>
                 <span class="show-num">
-                  {{allSuccessCount}}
+                  <!-- {{allSuccessCount}} -->
+                  <count-to :start-val="0" :end-val="allSuccessCount" :duration="3200" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -29,7 +31,8 @@
               <div class="num-content">
                 <div class="num-title">总失败次数</div>
                 <span  class="show-num">
-                  {{allFailCount}}
+                  <!-- {{allFailCount}} -->
+                  <count-to :start-val="0" :end-val="allFailCount" :duration="3200" class="card-panel-num" />
                 </span>
             </div>
           </div>
@@ -211,6 +214,7 @@ import {
   getList,//获取日志下拉列表
 
 } from "@/api/watch/transform";
+import CountTo from 'vue-count-to'
 
 import {
   getAllMonitorTrans,//获取所有的监控作业数
@@ -234,6 +238,10 @@ export default {
     }
   },
 
+  components: {
+    CountTo
+  },
+
   data() {
     return {
       transStatusList:['','成功', '失败'],