目录代码整合

2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions
--- a/packages/device/IntelligentSecurity/components/PlaybackTime.vue
+++ b/packages/device/IntelligentSecurity/components/PlaybackTime.vue
@@ -0,0 +1,129 @@
+<template>
+  <div :class="wrapper" class="canvas" v-if="isInit">
+    <canvas
+      :id="id"
+      :style="{height: '10px'}"
+      v-if="canvasWidth"
+      :width="canvasWidth"
+      height="10">
+    </canvas>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['times', 'deviceId'],
+
+    data () {
+      return {
+        ctx: null,
+        canvasWidth: '',
+        canvasHeight: '',
+        isInit: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
+        timer: null
+      }
+    },
+
+    watch: {
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    destroyed () {
+      clearInterval(this.timer)
+    },
+
+    methods: {
+      init () {
+        if (this.ctx) {
+          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        }
+        this.isInit = false
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector('.canvas').offsetWidth
+              this.ctx.height  = document.querySelector('.canvas').offsetHeight
+              this.renderPlayback()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
+        }, 1000)
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.strokeStyle = lineColor
+        ctx.stroke()
+      },
+
+      renderPlayback () {
+        const ctx = this.ctx
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+    height: 10px;
+
+    canvas {
+      width: 100%;
+      height: 10px;
+    }
+  }
+</style>