# up chart

src/views/counter/detail.vue

@@ -9,8 +9,16 @@
           v-if="flag"
         ></screen>
       </el-tab-pane>
-      <el-tab-pane label="趋势图" name="chart">配置管理</el-tab-pane>
+      <el-tab-pane label="趋势图" name="chart">
+        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+          <chart
+            :chart-data="lineChartData.total"
+          >
+          </chart>
+        </el-row>
+      </el-tab-pane>
     </el-tabs>
+    
     <el-table
       v-loading="listLoading"
       :data="deviceLogs"
@@ -65,27 +73,50 @@
 <script>
 import { fetchDeviceList, fetchDeviceLogs } from '@/api/counter'
 import Screen from './components/screen'
+import Chart from './components/chart'
 export default {
   name: 'deviceDetail',
   components: {
-    Screen
+    Screen,
+    Chart
   },
   data() {
     return {
+      lineChartData: {
+        total: {
+          historyData: [],
+          xAxis: [],
+          title: 'Trend'
+        }
+      },
       listLoading: true,
       deviceLogs: [],
       activeName: 'screen',
       total: 0,
       lastItem: {},
       status: 0,
+      showChat: false,
       flag: false
     }
   },
+  // watch: {
+  //   activeName(val) {
+  //     if (val === 'chart') {
+  //       this.showChat = true
+  //     }
+  //   }
+  // },
   methods: {
     getDeviceLogs(params) {
       fetchDeviceLogs(params).then(response => {
+        const dateList = []
         this.deviceLogs = response.data.results
+        this.deviceLogs.forEach((item, index) => {
+          this.lineChartData.total.historyData.push(item.mosq_count)
+          dateList.push(item.calc_time.substr(11))
+        })
         this.total = response.data.count
+        this.lineChartData.total.xAxis = dateList.reverse()
         this.listLoading = false
         this.lastItem = this.deviceLogs[0]
         this.flag = true
@@ -111,7 +142,7 @@ export default {
       this.getDeviceLogs({ device_id, page })
     },
     handleTabClick(tab, event) {
-      console.log(tab, event)
+      // console.log(tab, event)
     }
   },
   created() {