feat(device): online duration line chart

src/api/platform.js

@@ -146,11 +146,3 @@ export function getOperationResults (query) {
     }
   })
 }
-
-export function getOnlineDurationByIds (ids) {
-  return request({
-    url: '/deviceOnlineInfoDetail/calOnlineHoursByDeviceId',
-    method: 'POST',
-    data: ids
-  })
-}

src/api/statistics.js

@@ -0,0 +1,72 @@
+import request from '@/utils/request'
+import { messageSend } from './base'
+
+// yyyy-MM-dd
+export function triggerAdSnap (date) {
+  return messageSend({
+    url: '/ad/statistic/daily/compute/trigger',
+    method: 'GET',
+    params: { date }
+  }, '触发')
+}
+
+export function getAdReport (query = {}) {
+  if (query.deviceId) {
+    return request({
+      url: '/ad/statistic/daily/device/list',
+      method: 'GET',
+      params: query
+    })
+  }
+  return request({
+    url: '/ad/statistic/daily/tenant/list',
+    method: 'GET',
+    params: query
+  })
+}
+
+export function getAdCollect (query = {}) {
+  if (query.deviceId) {
+    return request({
+      url: '/ad/statistic/aggregate/device',
+      method: 'GET',
+      params: query
+    })
+  }
+  if (query.tenant) {
+    return request({
+      url: '/ad/statistic/aggregate/tenant',
+      method: 'GET',
+      params: query
+    })
+  }
+  return request({
+    url: '/ad/statistic/aggregate/platform',
+    method: 'GET'
+  })
+}
+
+export function triggetOnlineDurationSnap () {
+  return messageSend({
+    url: '/deviceOnlineInfoDetail/syncDeviceOnlineSummary',
+    method: 'GET'
+  }, '触发')
+}
+
+export function getOnlineDurationByDevice (id) {
+  return request({
+    url: '/deviceOnlineInfoDetail/calOnlineHoursByDeviceId',
+    method: 'POST',
+    data: [id]
+  }).then(({ data }) => {
+    return { data: data[0] }
+  })
+}
+
+export function getOnlineDurationReport (query) {
+  return request({
+    url: '/deviceOnlineInfoDetail/listOnlineSummaryByProperties',
+    method: 'POST',
+    data: query
+  })
+}

src/views/device/detail/components/DeviceRuntime/OnlineDuration.vue

@@ -3,36 +3,36 @@
     <div class="l-flex__none l-flex--row c-sibling-item--v">
       <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">在线总时长</span>
-      <div class="u-color--info u-font-size--xs">{{ timestamp }}</div>
-      <!-- <i
-        class="el-icon-date"
-        @click="open()"
-      /> -->
-      <!-- <el-dialog
+      <template v-if="timestamp">
+        <div class="c-sibling-item nearest u-color--info u-font-size--xs">{{ timestamp }}</div>
+        <i
+          class="c-sibling-item nearer el-icon-date has-active"
+          @click="showReport"
+        />
+      </template>
+      <c-dialog
+        ref="dialog"
         title="历史在线时长"
-        custom-class="c-dialog xl"
-        :visible.sync="dialogVisible"
-        width="30%"
-        close-on-press-escape="true"
+        size="lg fixed"
       >
-        <div class="picker_top">
+        <div class="l-flex__none l-flex c-sibling-item--v">
+          <div class="l-flex__fill" />
           <el-date-picker
             v-model="date"
+            type="daterange"
             format="yyyy-MM-dd"
             value-format="yyyy-MM-dd"
-            type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-            @change="getTime()"
+            @change="getOnlineDurationReport"
           />
         </div>
         <div
-          id="chart"
-          class="content"
-          style="width:1250px;height:1000px "
+          ref="chart"
+          class="l-flex__fill c-sibling-item--v"
         />
-      </el-dialog> -->
+      </c-dialog>
     </div>
     <div class="l-flex__fill l-flex--row center u-color--black u-text--center">
       <div
@@ -50,8 +50,12 @@
 </template>
 
 <script>
+import { parseTime } from '@/utils'
+import {
+  getOnlineDurationByDevice,
+  getOnlineDurationReport
+} from '@/api/statistics'
 import * as echarts from 'echarts'
-import { getOnlineDurationByIds } from '@/api/platform'
 
 export default {
   name: 'OnlineDuration',
@@ -62,13 +66,36 @@ export default {
     }
   },
   data () {
+    const startDate = new Date()
+    startDate.setMonth(startDate.getMonth() - 1)
+    const endDate = new Date()
+
     return {
       duration: '',
       timestamp: '',
-      datearr: [],
-      publication: [],
-      date: [],
-      dialogVisible: false
+      date: [parseTime(startDate, '{y}-{m}-{d}'), parseTime(endDate, '{y}-{m}-{d}')],
+      reportData: []
+    }
+  },
+  computed: {
+    xData () {
+      let startDate = new Date(this.date[0])
+      const endDate = new Date(this.date[1])
+      const arr = []
+      while (startDate <= endDate) {
+        arr.push(parseTime(startDate, '{y}-{m}-{d}'))
+        startDate.setDate(startDate.getDate() + 1)
+        startDate = new Date(startDate.getTime())
+      }
+      return arr
+    },
+    yData () {
+      const map = {}
+      for (let i = 0; i < this.reportData.length; i++) {
+        const { sumDate, seconds } = this.reportData[i]
+        map[sumDate] = (seconds / 3600).toFixed(1)
+      }
+      return this.xData.map(date => map[date] || 0)
     }
   },
   created () {
@@ -76,9 +103,6 @@ export default {
     this.$timer = -1
     this.startRun()
   },
-  mounted () {
-    this.datearr = this.getDayAll(this.getDay(-1), this.getDay(0))
-  },
   beforeDestroy () {
     this.$running = false
     clearTimeout(this.$timer)
@@ -88,14 +112,14 @@ export default {
       if (!this.$running) {
         return
       }
-      getOnlineDurationByIds([this.device.id], { custom: true }).then(({ data }) => {
-        if (data?.[0]) {
-          if (data[0].powerSeconds === '0') {
-            this.duration = this.transformDuration(data[0].onlineSeconds)
-            this.timestamp = data[0].onlineSecondsUpdateTime
+      getOnlineDurationByDevice(this.device.id).then(({ data }) => {
+        if (data) {
+          if (!data.powerSeconds || data.powerSeconds === '0') {
+            this.duration = this.transformDuration(data.onlineSeconds)
+            this.timestamp = data.onlineSecondsUpdateTime
           } else {
-            this.duration = this.transformDuration(data[0].powerSeconds)
-            this.timestamp = data[0].powerSecondsUpdateTime
+            this.duration = this.transformDuration(data.powerSeconds)
+            this.timestamp = data.powerSecondsUpdateTime
           }
           if (!this.duration) {
             this.duration = '暂无统计数据'
@@ -119,124 +143,65 @@ export default {
         { value: duration % 60, unit: '秒' }
       ].reduce((curr, { value, unit }) => value ? `${curr}${value}${unit}` : curr, '')
     },
-    getDayAll (starDay, endDay) {
-      const arr = []
-      const dates = []
-      const db = new Date(starDay)
-      const de = new Date(endDay)
-      const s = db.getTime() - 24 * 60 * 60 * 1000
-      const d = de.getTime() - 24 * 60 * 60 * 1000
-      for (let i = s; i <= d;) {
-        i += 24 * 60 * 60 * 1000
-        arr.push(parseInt(i))
-      }
-      for (const j in arr) {
-        if (arr[j] !== null) {
-          const time = new Date(arr[j])
-          const year = time.getFullYear(time)
-          const mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : (`0${time.getMonth() + 1}`)
-          const day = time.getDate() >= 10 ? time.getDate() : (`0${time.getDate()}`)
-          const YYMMDD = `${year}-${mouth}-${day}`
-          dates.push(YYMMDD)
-        }
-      }
-
-      return dates
-    },
-    getDay (setmonth) {
-      const date = new Date()
-      const seperator1 = '-'
-      const year = date.getFullYear()
-      let month = date.getMonth() + 1 + setmonth
-      let strDate = date.getDate()
-      if (month >= 1 && month <= 9) {
-        month = `0${month}`
-      }
-      if (strDate >= 0 && strDate <= 9) {
-        strDate = `0${strDate}`
+    getMonth () {
+      const startDate = new Date()
+      startDate.setMonth(startDate.getMonth() - 1)
+      const endDate = new Date()
+      return {
+        startDate: parseTime(startDate, '{y}-{m}-{d}'),
+        endDate: parseTime(endDate, '{y}-{m}-{d}')
       }
-      const currentdate = year + seperator1 + month + seperator1 + strDate
-      return currentdate
     },
-    getTime () {
-      this.datearr = this.getDayAll(this.date[0], this.date[1])
-      this.setChart()
+    showReport () {
+      this.getOnlineDurationReport()
+      this.$refs.dialog.show()
     },
-    open () {
-      this.dialogVisible = true
-      this.setChart()
+    getOnlineDurationReport () {
+      this.reportData = []
+      getOnlineDurationReport({
+        deviceId: this.device.id,
+        type: 1,
+        sumDateFrom: this.date[0],
+        sumDateTo: this.date[1]
+      }).then(({ data }) => {
+        this.reportData = data
+        this.initChart()
+      })
     },
-    setChart () {
-      setTimeout(() => {
-        const option = {
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['设备1', '设备2', '设备3', '设备4', '设备5']
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: this.datearr
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [
-            {
-              name: '设备1',
-              type: 'line',
-              stack: 'Total',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },
-            {
-              name: '设备2',
-              type: 'line',
-              stack: 'Total',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },
-            {
-              name: '设备3',
-              type: 'line',
-              stack: 'Total',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },
-            {
-              name: '设备4',
-              type: 'line',
-              stack: 'Total',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },
-            {
-              name: '设备5',
-              type: 'line',
-              stack: 'Total',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
-            }
-          ]
-        }
-        const chartDom = document.getElementById('chart')
-        console.log('chart', document.getElementById('chart'))
-        const myChart = echarts.init(chartDom)
-        myChart.setOption(option)
-      }, 100)
+    initChart () {
+      echarts.init(this.$refs.chart).setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          top: '16px',
+          left: '16px',
+          right: '16px',
+          bottom: '8px',
+          containLabel: true
+        },
+        xAxis: {
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          min: 0,
+          max: 24,
+          splitNumber: 6
+        },
+        series: [
+          {
+            type: 'line',
+            data: this.yData
+          }
+        ]
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.picker_top {
-  margin-left: 30px;
-}
-
 .o-icon {
   background-image: url("~@/assets/icon_online.png");
 }