增加新版本web页面

web/src/views/common/VideoTimeLine/WindowListItem.vue

@@ -0,0 +1,195 @@
+<template>
+  <div ref="windowListItem" class="windowListItem" :class="{active: active}" @click="onClick">
+    <span class="order">{{ index + 1 }}</span>
+    <canvas ref="canvas" class="windowListItemCanvas" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WindowListItem',
+  props: {
+    index: {
+      type: Number
+    },
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    totalMS: {
+      type: Number
+    },
+    startTimestamp: {
+      type: Number
+    },
+    width: {
+      type: Number
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      height: 0,
+      ctx: null
+    }
+  },
+  mounted() {
+    this.init()
+    this.drawTimeSegments()
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2020-04-14 09:20:22
+     * @Desc: 初始化
+     */
+    init() {
+      const { height } = this.$refs.windowListItem.getBoundingClientRect()
+      this.height = height - 1
+      this.$refs.canvas.width = this.width
+      this.$refs.canvas.height = this.height
+      this.ctx = this.$refs.canvas.getContext('2d')
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2020-04-14 15:42:49
+     * @Desc: 绘制时间段
+     */
+    drawTimeSegments(callback, path) {
+      if (!this.data.timeSegments || this.data.timeSegments.length <= 0) {
+        return
+      }
+      const PX_PER_MS = this.width / this.totalMS // px/ms，每毫秒占的像素
+      this.data.timeSegments.forEach((item) => {
+        if (
+          item.beginTime <= this.startTimestamp + this.totalMS &&
+          item.endTime >= this.startTimestamp
+        ) {
+          this.ctx.beginPath()
+          let x = (item.beginTime - this.startTimestamp) * PX_PER_MS
+          let w
+          if (x < 0) {
+            x = 0
+            w = (item.endTime - this.startTimestamp) * PX_PER_MS
+          } else {
+            w = (item.endTime - item.beginTime) * PX_PER_MS
+          }
+          const heightStartRatio = item.startRatio === undefined ? 0.6 : item.startRatio
+          const heightEndRatio = item.endRatio === undefined ? 0.9 : item.endRatio
+          if (path) {
+            this.ctx.rect(
+              x,
+              this.height * heightStartRatio,
+              w,
+              this.height * (heightEndRatio - heightStartRatio)
+            )
+          } else {
+            this.ctx.fillStyle = item.color
+            this.ctx.fillRect(
+              x,
+              this.height * heightStartRatio,
+              w,
+              this.height * (heightEndRatio - heightStartRatio)
+            )
+          }
+          callback && callback(item)
+        }
+      })
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2020-04-14 14:25:43
+     * @Desc: 清除画布
+     */
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.width, this.height)
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2021-01-20 19:07:31
+     * @Desc: 绘制
+     */
+    draw() {
+      this.$nextTick(() => {
+        this.clearCanvas()
+        this.drawTimeSegments()
+      })
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2021-01-20 19:26:46
+     * @Desc: 点击事件
+     */
+    onClick(e) {
+      this.$emit('click', e)
+      const { left, top } = this.$refs.windowListItem.getBoundingClientRect()
+      const x = e.clientX - left
+      const y = e.clientY - top
+      const timeSegments = this.getClickTimeSegments(x, y)
+      if (timeSegments.length > 0) {
+        this.$emit('click_window_timeSegments', timeSegments, this.index, this.data)
+      }
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2021-01-20 16:24:54
+     * @Desc: 检测当前是否点击了某个时间段
+     */
+    getClickTimeSegments(x, y) {
+      if (!this.data.timeSegments || this.data.timeSegments.length <= 0) {
+        return []
+      }
+      const inItems = []
+      this.drawTimeSegments((item) => {
+        if (this.ctx.isPointInPath(x, y)) {
+          inItems.push(item)
+        }
+      }, true)
+      return inItems
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2021-01-21 11:25:26
+     * @Desc: 获取位置信息
+     */
+    getRect() {
+      return this.$refs.windowListItem ? this.$refs.windowListItem.getBoundingClientRect() : null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.windowListItem {
+  width: 100%;
+  height: 30px;
+  position: relative;
+  border-bottom: 1px solid #999999;
+  user-select: none;
+}
+.windowListItem.active {
+  background-color: #000;
+}
+.windowListItem .order {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  border-right: 1px solid #999999;
+}
+
+</style>

web/src/views/common/VideoTimeLine/constant.js

@@ -0,0 +1,89 @@
+// 一小时的毫秒数
+export const ONE_HOUR_STAMP = 60 * 60 * 1000
+// 时间分辨率，即整个时间轴表示的时间范围
+export const ZOOM = [0.5, 1, 2, 6, 12, 24, 72, 360, 720, 8760, 87600]// 半小时、1小时、2小时、6小时、12小时、1天、3天、15天、30天、365天、365*10天
+// 时间分辨率对应的每格小时数，即最小格代表多少小时
+export const ZOOM_HOUR_GRID = [1 / 60, 1 / 60, 2 / 60, 1 / 6, 0.25, 0.5, 1, 4, 4, 720, 7200]
+export const MOBILE_ZOOM_HOUR_GRID = [
+  1 / 20,
+  1 / 30,
+  1 / 20,
+  1 / 3,
+  0.5,
+  2,
+  4,
+  4,
+  4,
+  720, 7200
+]
+// 时间分辨率对应的时间显示判断条件
+export const ZOOM_DATE_SHOW_RULE = [
+  () => { // 全部显示
+    return true
+  },
+  date => { // 每五分钟显示
+    return date.getMinutes() % 5 === 0
+  },
+  date => { // 每十分钟显示
+    return date.getMinutes() % 10 === 0
+  },
+  date => { // 整点和半点显示
+    return date.getMinutes() === 0 || date.getMinutes() === 30
+  },
+  date => { // 整点显示
+    return date.getMinutes() === 0
+  },
+  date => { // 偶数整点的小时
+    return date.getHours() % 2 === 0 && date.getMinutes() === 0
+  },
+  date => { // 每三小时小时
+    return date.getHours() % 3 === 0 && date.getMinutes() === 0
+  },
+  date => { // 每12小时
+    return date.getHours() % 12 === 0 && date.getMinutes() === 0
+  },
+  date => { // 全不显示
+    return false
+  },
+  date => {
+    return true
+  },
+  date => {
+    return true
+  }
+]
+export const MOBILE_ZOOM_DATE_SHOW_RULE = [
+  () => { // 全部显示
+    return true
+  },
+  date => { // 每五分钟显示
+    return date.getMinutes() % 5 === 0
+  },
+  date => { // 每十分钟显示
+    return date.getMinutes() % 10 === 0
+  },
+  date => { // 整点和半点显示
+    return date.getMinutes() === 0 || date.getMinutes() === 30
+  },
+  date => { // 偶数整点的小时
+    return date.getHours() % 2 === 0 && date.getMinutes() === 0
+  },
+  date => { // 偶数整点的小时
+    return date.getHours() % 4 === 0 && date.getMinutes() === 0
+  },
+  date => { // 每三小时小时
+    return date.getHours() % 3 === 0 && date.getMinutes() === 0
+  },
+  date => { // 每12小时
+    return date.getHours() % 12 === 0 && date.getMinutes() === 0
+  },
+  date => { // 全不显示
+    return false
+  },
+  date => {
+    return true
+  },
+  date => {
+    return true
+  }
+]