全部设备

src/views/dashboard/PanelGroup.vue

@@ -33,7 +33,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="totalDeviceNum" :duration="3200" class="card-panel-num" />
           </div>
           全部设备
         </div>
@@ -46,7 +46,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="17" :duration="3200" class="card-panel-num" />
           </div>
           在线设备
         </div>
@@ -59,7 +59,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="0" :duration="3200" class="card-panel-num" />
           </div>
           离线设备
         </div>
@@ -71,6 +71,7 @@
 <script>
 import CountTo from 'vue-count-to'
 import { FetchGetArchivesNum, FetchGetCaseNum } from '@/api/archivesManage/statistics'
+import { getDeviceList } from '@/api/storeManage/deviceManage/device'
 export default {
   components: {
     CountTo
@@ -78,12 +79,14 @@ export default {
   data() {
     return {
       archivesNum: 0,
-      caseNum: 0
+      caseNum: 0,
+      totalDeviceNum: 0
     }
   },
   mounted() {
     this.handleArchivesNum()
     this.handleCaseNum()
+    this.handleTotalDeviceNum()
   },
   methods: {
     handleSetLineChartData(type) {
@@ -100,6 +103,12 @@ export default {
       FetchGetCaseNum().then(data => {
         this.caseNum = data
       })
+    },
+    // 设备总数
+    handleTotalDeviceNum() {
+      getDeviceList({ page: 0, size: 10 }).then(data => {
+        this.totalDeviceNum = data.totalElements
+      })
     }
   }
 }
@@ -107,7 +116,6 @@ export default {
 
 <style lang="scss" scoped>
 .panel-group {
-
   .card-panel-col {
     margin-bottom: 20px;
   }
@@ -123,43 +131,63 @@ export default {
     // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     // border-color: rgba(0, 0, 0, .05);
     &.danganzongliang {
-      color: #21AAE1;
-      background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%);
-      border-top: 2px #21AAE1 solid;
-      & span.card-panel-num{
-        background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
+      color: #21aae1;
+      background: linear-gradient(
+        180deg,
+        rgba(51, 159, 210, 0.5) 0%,
+        rgba(56, 158, 225, 0) 100%
+      );
+      border-top: 2px #21aae1 solid;
+      & span.card-panel-num {
+        background: linear-gradient(180deg, #ffffff 0%, #21aae1 100%);
       }
     }
     &.danganhezongliang {
-      color: #793CBA;
-      background: linear-gradient(180deg, rgba(121,60,186,0.5000) 0%, rgba(121,60,186,0) 100%);
-      border-top: 2px #793CBA solid;
-      & span.card-panel-num{
-        background: linear-gradient(180deg, #FFFFFF 0%, #793CBA 100%)
+      color: #793cba;
+      background: linear-gradient(
+        180deg,
+        rgba(121, 60, 186, 0.5) 0%,
+        rgba(121, 60, 186, 0) 100%
+      );
+      border-top: 2px #793cba solid;
+      & span.card-panel-num {
+        background: linear-gradient(180deg, #ffffff 0%, #793cba 100%);
       }
     }
     &.quanbushebei {
-      color: #008E81;
-      background: linear-gradient(180deg, rgba(0,142,129,0.5000) 0%, rgba(0,142,129,0) 100%);
-      border-top: 2px #008E81 solid;
-      & span.card-panel-num{
-        background: linear-gradient(180deg, #FFFFFF 0%, #008E81 100%);
+      color: #008e81;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 142, 129, 0.5) 0%,
+        rgba(0, 142, 129, 0) 100%
+      );
+      border-top: 2px #008e81 solid;
+      & span.card-panel-num {
+        background: linear-gradient(180deg, #ffffff 0%, #008e81 100%);
       }
     }
     &.zaixianshebei {
-      color: #C4C859;
-      background: linear-gradient(180deg, rgba(196,200,89,0.5000) 0%, rgba(196,200,89,0) 100%);
-      border-top: 2px #C4C859 solid;
-      & span.card-panel-num{
-        background: linear-gradient(180deg, #FFFFFF 0%, #BFC458 100%);
+      color: #c4c859;
+      background: linear-gradient(
+        180deg,
+        rgba(196, 200, 89, 0.5) 0%,
+        rgba(196, 200, 89, 0) 100%
+      );
+      border-top: 2px #c4c859 solid;
+      & span.card-panel-num {
+        background: linear-gradient(180deg, #ffffff 0%, #bfc458 100%);
       }
     }
     &.lixianshebei {
-      color: #F65164;
-      background: linear-gradient(180deg, rgba(246,81,100,0.5000) 0%, rgba(247,80,100,0) 100%);
-      border-top: 2px #F65164 solid;
-      & span.card-panel-num{
-        background: linear-gradient(180deg, #FFFFFF 0%, #F55164 100%);
+      color: #f65164;
+      background: linear-gradient(
+        180deg,
+        rgba(246, 81, 100, 0.5) 0%,
+        rgba(247, 80, 100, 0) 100%
+      );
+      border-top: 2px #f65164 solid;
+      & span.card-panel-num {
+        background: linear-gradient(180deg, #ffffff 0%, #f55164 100%);
       }
     }
     // &:hover {
@@ -228,7 +256,7 @@ export default {
         color: rgba(0, 0, 0, 0.45);
         font-size: 28px;
         margin-bottom: 11px;
-        & span{
+        & span {
           // background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
           -webkit-background-clip: text;
           color: transparent;
@@ -243,7 +271,7 @@ export default {
   }
 }
 
-@media (max-width:550px) {
+@media (max-width: 550px) {
   .card-panel-description {
     display: none;
   }