fix: cannot play

adjust echarts

src/components/external/camera/CameraDetail/index.vue

@@ -15,6 +15,8 @@
       muted
       @play="onVideoPlay"
       @pause="onVideoPause"
+      @waiting="onVideoWaiting"
+      @playing="onVideoPlaying"
       @error="onVideoError"
     />
     <div class="c-camera-detail__footer has-padding">
@@ -84,7 +86,7 @@
           class="o-canvas"
         />
         <div class="c-choose-date">
-          <div class="c-sibling-item c-choose-date__time u-pointer">
+          <div class="c-sibling-item c-choose-date__type u-pointer">
             <span
               class="c-choose-date__item"
               :class="{ active: active === 'hour' }"
@@ -101,14 +103,21 @@
             </span>
           </div>
           <el-date-picker
-            v-model="datevalue"
-            class="c-sibling-item far"
-            type="datetime"
-            placeholder="选择日期时间"
-            prefix-icon="el-icon-date"
-            format="yyyy-MM-dd HH:mm"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            @change="onDateTimeChange"
+            v-model="dateValue"
+            class="c-sibling-item far c-choose-date__date u-pointer"
+            type="date"
+            value-format="yyyy-MM-dd"
+            :editable="false"
+            :clearable="false"
+            @change="getStatistic"
+          />
+          <el-time-select
+            v-model="timeValue"
+            class="c-sibling-item c-choose-date__time u-pointer"
+            :picker-options="timePickerOptions"
+            :editable="false"
+            :clearable="false"
+            @change="getStatistic"
           />
         </div>
       </div>
@@ -129,6 +138,7 @@ import {
   GATEWAY_CAMERA,
   Camera
 } from '@/constant'
+import { parseTime } from '@/utils'
 import playerMixin from '../../player'
 
 export default {
@@ -141,6 +151,8 @@ export default {
     }
   },
   data () {
+    const now = new Date()
+
     return {
       active: 'hour', // hour是小时，day是天
       settingActive: 'items',
@@ -153,8 +165,13 @@ export default {
       settingsShow: false,
       videoSettings: null,
       infoData: null,
-      datevalue: new Date(),
-      echartsData: ''
+      dateValue: parseTime(now, '{y}-{m}-{d}'),
+      timeValue: parseTime(now, '{h}:00'),
+      timePickerOptions: {
+        start: '00:00',
+        step: '01:00',
+        end: '23:00'
+      }
     }
   },
   computed: {
@@ -172,10 +189,13 @@ export default {
   mounted () {
     this.createPlayer()
     if (this.isTraffic) {
-      this.getStatistic(
-        this.getStartTime(new Date(), 'now'),
-        this.getStartTime(new Date())
-      )
+      this.getStatistic()
+      window.addEventListener('resize', this.onResize)
+    }
+  },
+  beforeDestroy () {
+    if (this.isTraffic) {
+      window.removeEventListener('resize', this.onResize)
     }
   },
   methods: {
@@ -369,41 +389,25 @@ export default {
       this.setCamera()
     },
     onTimeTypeChanged (type) {
-      this.active = type
-      let startTime
-      if (this.datevalue.length) {
-        startTime = this.datevalue
-      } else {
-        this.datevalue = new Date()
-        startTime = this.getStartTime(new Date(), 'now')
-      }
-      this.getStatistic(startTime, this.getStartTime(startTime, type))
-    },
-    onDateTimeChange () {
-      if (this.datevalue) {
-        this.getStatistic(this.datevalue, this.getStartTime(this.datevalue, this.active))
+      if (this.active === type) {
+        return
       }
+      this.active = type
+      this.getStatistic()
     },
-    getStartTime (time, type) {
-      let onehour = 60 * 60 * 1000
-      if (type === 'day') {
-        onehour = 60 * 60 * 1000 * 24
-      } else if (type === 'now') {
-        onehour = 0
-      }
-      const startTime = new Date(new Date(time).getTime() - onehour)
-        .toLocaleString('zh', { hour12: false })
-        .split('/')
-        .join('-')
-      const arr = startTime.split(' ')[0].split('-')
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].length < 2) {
-          arr[i] = `0${arr[i]}`
-        }
+    getStatistic () {
+      const endTime = `${this.dateValue} ${this.timeValue}:00`
+      const date = new Date(endTime)
+      switch (this.active) {
+        case 'hour':
+          date.setHours(date.getHours() - 1)
+          break
+        default:
+          date.setDate(date.getDate() - 1)
+          break
       }
-      return `${arr.join('-')} ${startTime.split(' ')[1]}`
-    },
-    getStatistic (endTime, startTime) {
+      const startTime = parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
+      this.refreshEchart([])
       getStatistic({
         deviceId: this.camera.identifier,
         startTime,
@@ -411,32 +415,54 @@ export default {
         pageIndex: 1,
         pageSize: 10000
       }).then(({ data }) => {
-        this.echartsData = data
-        this.initEchart()
+        this.refreshEchart(data)
       })
     },
-    getXData (data) {
-      const arr = []
-      data.forEach(item => {
-        const time = item.eventTime.slice(11, 16)
-        arr.push(time)
-      })
-      return arr
+    getEchartData (data) {
+      const date = new Date(`${this.dateValue} ${this.timeValue}:00`)
+      const xdata = []
+      const ydata = []
+      if (this.active === 'hour') {
+        date.setHours(date.getHours() - 1)
+        for (let i = 0; i <= 60; i++) {
+          const value = parseTime(date, '{y}-{m}-{d} {h}:{i}')
+          xdata.push(value.split(' ')[1])
+          ydata.push(data[value] || 0)
+          date.setMinutes(date.getMinutes() + 1)
+        }
+      } else {
+        date.setDate(date.getDate() - 1)
+        for (let i = 0; i <= 24; i++) {
+          const value = parseTime(date, '{y}-{m}-{d} {h}')
+          xdata.push(`${value.split(' ')[1]}:00`)
+          ydata.push(data[value] || 0)
+          date.setHours(date.getHours() + 1)
+        }
+      }
+      return { xdata, ydata }
     },
-    getYData (data) {
-      const arr = []
-      data.forEach(item => {
-        arr.push(item.insidePeopleNum)
+    transformEchartData (data) {
+      const ydata = {}
+      const isHour = this.active === 'hour'
+      data.forEach(({ eventTime, insidePeopleNum }) => {
+        const key = eventTime.slice(0, isHour ? 16 : 13)
+        if (ydata[key]) {
+          ydata[key] = Math.max(ydata[key], insidePeopleNum)
+        } else {
+          ydata[key] = insidePeopleNum
+        }
       })
-      return arr
+      return this.getEchartData(ydata)
+    },
+    onResize () {
+      this.$echarts?.resize()
     },
-    initEchart () {
-      const data = this.echartsData.filter(item => item.insidePeopleNum !== 0)
-      const xdata = this.getXData(data)
-      const ydata = this.getYData(data)
-      const chartDom = document.getElementById('main')
-      const myChart = echarts.init(chartDom)
-      myChart.setOption({
+    refreshEchart (echartsData) {
+      const { xdata, ydata } = this.transformEchartData(echartsData)
+      if (!this.$echarts) {
+        this.$echarts = echarts.init(document.getElementById('main'))
+      }
+      this.$echarts?.setOption({
         title: {
           text: '区域内人数',
           textStyle: {
@@ -447,9 +473,6 @@ export default {
         xAxis: {
           type: 'category',
           data: xdata,
-          splitLine: {
-            show: false
-          },
           axisLine: {
             lineStyle: {
               color: '#4779BC'
@@ -469,7 +492,6 @@ export default {
             }
           },
           axisLine: {
-            show: false,
             lineStyle: {
               color: '#4779BC'
             }
@@ -649,7 +671,7 @@ $theme-blue: #003e90;
   top: $spacing;
   color: #fff;
 
-  &__time {
+  &__type {
     display: inline-block;
     height: 24px;
     line-height: 24px;
@@ -670,8 +692,17 @@ $theme-blue: #003e90;
     }
   }
 
+  &__date {
+    width: 130px;
+  }
+
+  &__time {
+    width: 80px;
+  }
+
   ::v-deep input {
     height: 24px;
+    padding-right: 10px;
     color: #fff;
     font-size: 14px;
     line-height: 24px;