大屏 数字控件

src/views/environmentalScreen/index.vue

@@ -187,7 +187,10 @@
                   </div>
                   <span>馆藏总量</span>
                 </div>
-                <span class="row-num">12345</span>
+                <!-- <span class="row-num">12345</span> -->
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="totalNum" :duration="3200" class="row-num" />
+                </div>
               </li>
               <li>
                 <div class="row-item">
@@ -196,7 +199,9 @@
                   </div>
                   <span>在借数量</span>
                 </div>
-                <span class="row-num">12345</span>
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="lendingNum" :duration="3200" class="row-num" />
+                </div>
               </li>
               <li>
                 <div class="row-item">
@@ -205,7 +210,9 @@
                   </div>
                   <span>在库数量</span>
                 </div>
-                <span class="row-num">12345</span>
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="storeNum" :duration="3200" class="row-num" />
+                </div>
               </li>
             </ul>
             <ul>
@@ -216,7 +223,9 @@
                   </div>
                   <span>全部设备</span>
                 </div>
-                <span class="row-num">12345</span>
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="allDevNum" :duration="3200" class="row-num" />
+                </div>
               </li>
               <li>
                 <div class="row-item">
@@ -225,7 +234,9 @@
                   </div>
                   <span>在线设备</span>
                 </div>
-                <span class="row-num">12345</span>
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="lineDevNum" :duration="3200" class="row-num" />
+                </div>
               </li>
               <li>
                 <div class="row-item">
@@ -234,7 +245,9 @@
                   </div>
                   <span>离线设备</span>
                 </div>
-                <span class="row-num">12345</span>
+                <div class="card-panel-text">
+                  <count-to :start-val="0" :end-val="onlineDevNumL" :duration="3200" class="row-num" />
+                </div>
               </li>
             </ul>
           </div>
@@ -301,6 +314,8 @@ import displayConfigApi from '@/api/storeManage/displayConfig'
 import thirdApi from '@/api/thirdApi'
 import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
 import NumFlip from './module/numFlip.vue'
+import CountTo from 'vue-count-to'
+
 export default {
   name: 'EnvironmentalScreen',
   components: {
@@ -309,7 +324,8 @@ export default {
     Video,
     lendAcross,
     typePie,
-    NumFlip
+    NumFlip,
+    CountTo
   },
   mixins: [statisticsCrud],
   data() {
@@ -377,7 +393,13 @@ export default {
       monlend: 'monlend',
       monlendnum: 1001,
       monreturn: 'monreturn',
-      monreturnnum: 123456
+      monreturnnum: 123456,
+      totalNum: 12345,
+      lendingNum: 54985,
+      storeNum: 12456,
+      allDevNum: 15,
+      lineDevNum: 6,
+      onlineDevNumL: 9
     }
   },
   async created() {