From 8f03176d42f60339d7ebc2528541eec49c0b0079 Mon Sep 17 00:00:00 2001
From: xianfuxing <xianfuxing@126.com>
Date: Wed, 15 Aug 2018 20:50:35 +0800
Subject: [PATCH] # up increment, total chart

---
 .../dashboard/admin/components/LineChart.vue  | 33 ++----------
 .../dashboard/admin/components/PanelGroup.vue |  8 +--
 src/views/dashboard/admin/index.vue           | 52 +++++++------------
 3 files changed, 28 insertions(+), 65 deletions(-)

diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index 547af13..c25cb7f 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -27,9 +27,6 @@ export default {
     },
     chartData: {
       type: Object
-    },
-    xAxis: {
-      type: Array
     }
   },
   data() {
@@ -75,11 +72,11 @@ export default {
     }
   },
   methods: {
-    setOptions({ totalHistoryData, actualData } = {}) {
+    setOptions({ historyData, xAxis, title } = {}) {
       this.chart.setOption({
         xAxis: {
           // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          data: this.xAxis,
+          data: xAxis,
           boundaryGap: false,
           axisLabel: {
             interval: 0
@@ -108,10 +105,10 @@ export default {
           }
         },
         legend: {
-          data: ['Total', 'Increment']
+          data: [title]
         },
         series: [{
-          name: 'Total', itemStyle: {
+          name: title, itemStyle: {
             normal: {
               color: '#FF005A',
               lineStyle: {
@@ -122,29 +119,9 @@ export default {
           },
           smooth: true,
           type: 'line',
-          data: totalHistoryData,
+          data: historyData,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'Increment',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
         }]
       })
     },
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 805dbc6..18f5db0 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="panel-group" :gutter="40">
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class='card-panel' @click="handleSetLineChartData('historyData')">
+      <div class='card-panel' @click="handleSetLineChartData('total')">
         <div class="card-panel-icon-wrapper icon-plus">
           <svg-icon icon-class="plus" class-name="card-panel-icon" />
         </div>
@@ -12,7 +12,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
+      <div class="card-panel" @click="handleSetLineChartData('increment')">
         <div class="card-panel-icon-wrapper icon-rise">
           <svg-icon icon-class="rise" class-name="card-panel-icon" />
         </div>
@@ -23,7 +23,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+      <div class="card-panel" @click="">
         <div class="card-panel-icon-wrapper icon-online">
           <svg-icon icon-class="online" class-name="card-panel-icon" />
         </div>
@@ -34,7 +34,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+      <div class="card-panel" @click="">
         <div class="card-panel-icon-wrapper icon-offline">
           <svg-icon icon-class="offline" class-name="card-panel-icon" />
         </div>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8f14b98..dbf281b 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -12,7 +12,7 @@
     </panel-group>
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" :xAxis="this.lineChartData.xAxis"></line-chart>
+      <line-chart :chart-data="lineChartData"></line-chart>
     </el-row>
 
     <el-row>
@@ -73,22 +73,15 @@ import
 } from '@/api/counter'
 
 const lineChartData = {
-  historyData: {
-    totalHistoryData: [],
-    incrementHistoryData: [],
-    xAxis: []
+  total: {
+    historyData: [],
+    xAxis: [],
+    title: 'Total'
   },
-  messages: {
-    totalHistoryData: [200, 192, 120, 144, 160, 130, 140],
-    incrementHistoryData: [],
-    xAxis: [1, 2, 3, 4, 5, 6, 7]
-  },
-  purchases: {
-    totalHistoryData: [80, 100, 121, 104, 105, 90, 100]
-  },
-  shoppings: {
-    totalHistoryData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
+  increment: {
+    historyData: [],
+    xAxis: [],
+    title: 'Increment'
   }
 }
 
@@ -108,7 +101,7 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.historyData,
+      lineChartData: lineChartData.total,
       totalCount: 0,
       dailyCount: 0,
       onlineCount: 0,
@@ -135,31 +128,24 @@ export default {
       })
     },
     handleHistoryLine(historyList) {
-      var totalList = []
-      var dateList = []
+      const totalList = []
+      const incrementList = []
+      const dateList = []
+      console.log(historyList)
       historyList.forEach((item, index) => {
         totalList.push(item.total)
+        incrementList.push(item.increment)
         dateList.push(item.date.substr(5))
       })
-      this.lineChartData.totalHistoryData = totalList.reverse()
-      this.lineChartData.xAxis = dateList.reverse()
-      // console.log(this.lineChartData.totalHistoryData)
+      lineChartData.total.historyData = totalList.reverse()
+      lineChartData.increment.historyData = incrementList.reverse()
+      lineChartData.total.xAxis = dateList.reverse()
+      lineChartData.increment.xAxis = dateList
     }
-    // getLogStatisticHistory() {
-    //   fetchLogStatisticHistory().then(response => {
-    //     var totalList = []
-    //     this.historyList = response.data.results
-    //     this.historyList.forEach((item, index) => {
-    //       totalList.push(item.total)
-    //     })
-    //     this.lineChartData.totalHistoryData = totalList
-    //   })
-    // }
   },
   created() {
     this.getDeviceInfoStatistic()
     this.getDeviceLogStatistic()
-    // this.getLogStatisticHistory()
   }
 }
 </script>