# add panel statistic

src/views/dashboard/admin/components/PanelGroup.vue

@@ -6,8 +6,8 @@
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">New Visits</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
+          <div class="card-panel-text">Total Mosquito</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="totalCount" :duration="2600"></count-to>
         </div>
       </div>
     </el-col>
@@ -17,8 +17,8 @@
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Messages</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
+          <div class="card-panel-text">Daily Mosquito</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="dailyCount" :duration="3000"></count-to>
         </div>
       </div>
     </el-col>
@@ -28,8 +28,8 @@
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Purchases</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
+          <div class="card-panel-text">Online Device</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="onlineCount" :duration="3200"></count-to>
         </div>
       </div>
     </el-col>
@@ -39,8 +39,8 @@
           <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Shoppings</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
+          <div class="card-panel-text">Offline Device</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="offlineCount" :duration="3600"></count-to>
         </div>
       </div>
     </el-col>
@@ -51,6 +51,12 @@
 import CountTo from 'vue-count-to'
 
 export default {
+  props: {
+    totalCount: Number,
+    dailyCount: Number,
+    onlineCount: Number,
+    offlineCount: Number
+  },
   components: {
     CountTo
   },

src/views/dashboard/admin/index.vue

@@ -2,7 +2,14 @@
   <div class="dashboard-editor-container">
     <github-corner></github-corner>
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
+    <panel-group 
+      @handleSetLineChartData="handleSetLineChartData"
+      :totalCount="totalCount"
+      :dailyCount="dailyCount"
+      :onlineCount="onlineCount"
+      :offlineCount="offlineCount"
+    >
+    </panel-group>
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData"></line-chart>
@@ -51,6 +58,7 @@ import BarChart from './components/BarChart'
 import TransactionTable from './components/TransactionTable'
 import TodoList from './components/TodoList'
 import BoxCard from './components/BoxCard'
+import { fetchDeviceLogStatistic, fetchDeviceInfoStatistic } from '@/api/counter'
 
 const lineChartData = {
   newVisitis: {
@@ -86,13 +94,37 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
+      totalCount: 0,
+      dailyCount: 0,
+      onlineCount: 0,
+      offlineCount: 0
     }
   },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
+    },
+    getDeviceInfoStatistic() {
+      fetchDeviceInfoStatistic().then(response => {
+        const infoData = response.data
+        this.onlineCount = infoData['online_count']
+        this.offlineCount = infoData['offline_count']
+        console.log(this.totalCount)
+      })
+    },
+    getDeviceLogStatistic() {
+      fetchDeviceLogStatistic().then(response => {
+        const logData = response.data
+        this.totalCount = logData['total_count']
+        this.dailyCount = logData['daily_count']
+        console.log(this.onlineCount)
+      })
     }
+  },
+  created() {
+    this.getDeviceInfoStatistic()
+    this.getDeviceLogStatistic()
   }
 }
 </script>