From e1917e9540f2a670372c3114400e2eb729526b21 Mon Sep 17 00:00:00 2001
From: 15683799673 <liao@1234567>
Date: Mon, 8 Sep 2025 01:43:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A7=86=E9=A2=91=E5=9B=9E?=
 =?UTF-8?q?=E6=94=BE=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sis/video/{ => playback}/channel-tree.vue |   0
 .../views/sis/video/{ => playback}/data.ts    |   0
 .../views/sis/video/{ => playback}/index.vue  | 112 ++---
 .../src/views/sis/video/playback/process.vue  | 386 ++++++++++++++++++
 apps/web-antd/tsconfig.json                   |   1 +
 5 files changed, 449 insertions(+), 50 deletions(-)
 rename apps/web-antd/src/views/sis/video/{ => playback}/channel-tree.vue (100%)
 rename apps/web-antd/src/views/sis/video/{ => playback}/data.ts (100%)
 rename apps/web-antd/src/views/sis/video/{ => playback}/index.vue (83%)
 create mode 100644 apps/web-antd/src/views/sis/video/playback/process.vue

diff --git a/apps/web-antd/src/views/sis/video/channel-tree.vue b/apps/web-antd/src/views/sis/video/playback/channel-tree.vue
similarity index 100%
rename from apps/web-antd/src/views/sis/video/channel-tree.vue
rename to apps/web-antd/src/views/sis/video/playback/channel-tree.vue
diff --git a/apps/web-antd/src/views/sis/video/data.ts b/apps/web-antd/src/views/sis/video/playback/data.ts
similarity index 100%
rename from apps/web-antd/src/views/sis/video/data.ts
rename to apps/web-antd/src/views/sis/video/playback/data.ts
diff --git a/apps/web-antd/src/views/sis/video/index.vue b/apps/web-antd/src/views/sis/video/playback/index.vue
similarity index 83%
rename from apps/web-antd/src/views/sis/video/index.vue
rename to apps/web-antd/src/views/sis/video/playback/index.vue
index 82f64f8b..587f013a 100644
--- a/apps/web-antd/src/views/sis/video/index.vue
+++ b/apps/web-antd/src/views/sis/video/playback/index.vue
@@ -14,7 +14,7 @@
 
       <!--  设备分组区域  -->
       <div class="bg-background flex-1">
-        <div class="video-play-area flex h-[calc(100%-30px)] flex-wrap">
+        <div class="video-play-area flex h-[calc(100%-80px)] flex-wrap">
           <div
             v-for="i in playerNum"
             :style="playerStyle"
@@ -36,26 +36,41 @@
             </Loading>
           </div>
         </div>
-        <div class="player-area flex h-[30px] gap-[5px]">
-          <div
-            v-for="key in 4"
-            @click="onPlayerNumChanged(key)"
-            :class="playerSelectItemIndex == key ? selected : ''"
-            class="btn-item h-[20px] w-[20px]"
-          >
-            <Svg1FrameIcon v-if="key == 1" style="width: 100%; height: 100%" />
-            <Svg4FrameIcon
-              v-else-if="key == 2"
-              style="width: 100%; height: 100%"
-            />
-            <Svg9FrameIcon
-              v-else-if="key == 3"
-              style="width: 100%; height: 100%"
-            />
-            <Svg16FrameIcon
-              v-else-if="key == 4"
-              style="width: 100%; height: 100%"
-            />
+        <div class="player-area h-[80px]">
+          <div class="process-wrap w-full">
+            <Process :init-date="processDate"></Process>
+          </div>
+          <!--    视频回放操作栏      -->
+          <div class="play-option flex h-[40px] w-full gap-10">
+            <div class="left flex-1"></div>
+            <div class="mid flex flex-1 items-center content-center gap-5">
+              <div class="playing-time h-full w-[120px] flex items-center">
+                <DatePicker v-model:value="playDate" :allow-clear="false" />
+              </div>
+
+              <div class="playing" @click="onPlayerBtnClick">
+                <span v-if="playering">
+                  <a-button type="primary" shape="circle" size="middle">
+                    <template #icon>
+                      <CaretRightOutlined />
+                    </template>
+                  </a-button>
+                </span>
+                <span v-else>
+                  <a-button
+                    style="background: darkgray"
+                    type="primary"
+                    shape="circle"
+                    size="middle"
+                  >
+                    <template #icon>
+                      <PauseCircleOutlined />
+                    </template>
+                  </a-button>
+                </span>
+              </div>
+            </div>
+            <div class="right flex-1"></div>
           </div>
         </div>
       </div>
@@ -67,17 +82,15 @@
 import { onMounted, onUnmounted, ref, toRaw } from 'vue';
 import { Loading, Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
+import Process from './process.vue';
 import mpegts from 'mpegts.js';
-import { message } from 'ant-design-vue';
+import { DatePicker, message } from 'ant-design-vue';
 import { addStreamProxy } from '#/api/sis/stream';
-import {
-  Svg16FrameIcon,
-  Svg1FrameIcon,
-  Svg4FrameIcon,
-  Svg9FrameIcon,
-} from '@vben/icons';
 import { checkHEVCSupport } from '#/utils/video';
 import type { AddStreamProxyResult } from '#/api/sis/stream/model';
+import { CaretRightOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 
 const selected = 'selected';
 
@@ -107,12 +120,18 @@ const currentSelectPlayerIndex = ref(0);
 const playerList: any[] = [];
 // 播放器loading
 const playerLoading = ref<boolean[]>([]);
-
 // 当前选择播放器的key
 const currentSelectKey = ref('');
 // 当前所有的播放设备key
 const selectKeys = ref<string[]>([]);
 
+const playering = ref<boolean>(true);
+const playDate = ref<Dayjs>();
+
+function onPlayerBtnClick() {
+  playering.value = !playering.value;
+}
+
 function playerSelect(index: number) {
   currentSelectPlayerIndex.value = index;
   const player = playerList[index];
@@ -435,11 +454,20 @@ function loading(index: number, cmd: Number = 0) {
   playerLoading.value = loadinArr;
 }
 
+const processDate = ref('');
 let isSupportH265 = false;
 onMounted(() => {
   // 检测浏览器是否支持h265
   isSupportH265 = checkHEVCSupport();
-  setInterval(catchUp, 120000);
+  // setInterval(catchUp, 120000);
+  // 初始化当前日期
+  const now = dayjs();
+  playDate.value = now;
+
+  processDate.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+  setInterval(() => {
+    processDate.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+  }, 1000);
 });
 
 onUnmounted(() => {
@@ -447,20 +475,6 @@ onUnmounted(() => {
     closePlayer(i);
   }
 });
-
-function catchUp() {
-  playerList.forEach((playerData) => {
-    if (playerData) {
-      const { player, el } = playerData;
-      const end = player.buffered.end(player.buffered.length - 1);
-      const diff = end - el.currentTime;
-      if (diff > 2) {
-        // 如果延迟超过2秒
-        el.currentTime = end - 0.5; // 跳转到接近直播点
-      }
-    }
-  });
-}
 </script>
 
 <style scoped>
@@ -484,12 +498,10 @@ function catchUp() {
 }
 
 .player-area {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  .btn-item.selected {
-    color: #00a8ff;
+  .play-option {
+    background-color: #606060;
   }
+
+
 }
 </style>
diff --git a/apps/web-antd/src/views/sis/video/playback/process.vue b/apps/web-antd/src/views/sis/video/playback/process.vue
new file mode 100644
index 00000000..52d9ced7
--- /dev/null
+++ b/apps/web-antd/src/views/sis/video/playback/process.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="playbackbar" ref="playbackbarRef">
+    <canvas ref="playbackbarCanvasRef"></canvas>
+  </div>
+</template>
+
+<script setup lang="js">
+import { ref, reactive, watch, onMounted, onBeforeUnmount, computed } from 'vue';
+import dayjs from 'dayjs';
+
+// 1. 定义 Props（Vue3 中使用 defineProps 声明）
+const props = defineProps({
+  // 初始化时间 => 2021-08-20 00:00:00
+  initDate: {
+    type: String,
+    required: true // 建议添加必填校验，确保组件正常运行
+  },
+  /**
+   * 记录的区域列表
+   * @attribute startTime 开始时间 YYYY-MM-DD HH:mm:ss
+   * @attribute endTime 结束时间 YYYY-MM-DD HH:mm:ss
+   */
+  timeData: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 2. 定义响应式数据（Vue3 中使用 ref/reactive 替代 data）
+const playbackbarRef = ref(null); // 容器 DOM 引用
+const playbackbarCanvasRef = ref(null); // canvas DOM 引用
+
+// 基础响应式数据（使用 reactive 组合相关状态）
+const state = reactive({
+  nowDate: props.initDate, // 当前时间
+  mouseNowDate: props.initDate, // 鼠标移入画布时的时间记录
+
+  ctx: null, // 画布 2D 上下文
+  _width: 0, // 画布宽
+  _height: 0, // 画布高
+
+  isMouseDown: false, // 是否在画布上按下鼠标
+  mousedownX: 0, // 鼠标按下的X坐标
+  mousedownY: 0, // 鼠标按下的Y坐标
+  size: 160, // 坐标尺寸（每小时对应的像素宽度）
+  axisTick: 1 // 默认刻度1（1小时/刻度）
+});
+
+// 3. 计算属性（Vue3 中 computed 直接使用）
+const pxToSecond = computed(() => {
+  // 1个移动像素代表的秒数 = (刻度小时数 * 60分钟 * 60秒) / 刻度像素宽度
+  return (state.axisTick * 60 * 60) / state.size;
+});
+
+// 4. 核心方法（提取为独立函数，在 setup 中调用）
+/**
+ * 初始化画布（设置尺寸、上下文，绘制基础内容）
+ */
+const initCanvas = () => {
+  const box = playbackbarRef.value;
+  const canvas = playbackbarCanvasRef.value;
+
+  // 设置画布尺寸（与容器一致）
+  state._width = box.offsetWidth;
+  state._height = box.offsetHeight;
+  canvas.width = state._width;
+  canvas.height = state._height;
+
+  // 获取 2D 上下文
+  state.ctx = canvas.getContext('2d');
+
+  // 绘制基础内容
+  onBaseFill(state.ctx, state._width, state._height);
+  onDrawNowDate(state.ctx, state._width);
+  onMouseHandle(canvas, state.ctx, state._width, state._height);
+};
+
+/**
+ * 绘制画布基础内容（轴线、刻度、记录区域等）
+ * @param {CanvasRenderingContext2D} ctx - 画布上下文
+ * @param {number} _width - 画布宽度
+ * @param {number} _height - 画布高度
+ */
+const onBaseFill = (ctx, _width, _height) => {
+  // 1. 时间线上轴线（深色粗线）
+  ctx.beginPath();
+  ctx.strokeStyle = '#303030';
+  ctx.lineWidth = 3;
+  ctx.moveTo(0, 40.5);
+  ctx.lineTo(_width, 40.5);
+  ctx.stroke();
+
+  // 2. 绘制刻度线、记录区域
+  onDrawTick(ctx, _width, _height);
+  onDrawRecordArea(ctx, _width, _height);
+
+  // 3. 时间轴辅助线（浅绿色细线）
+  ctx.beginPath();
+  ctx.strokeStyle = '#B1BE76';
+  ctx.lineWidth = 1;
+  ctx.moveTo(0, 42.5);
+  ctx.lineTo(_width, 42.5);
+  ctx.stroke();
+
+  // 4. 黄色辅助线
+  ctx.beginPath();
+  ctx.strokeStyle = '#FFFF00';
+  ctx.lineWidth = 1;
+  ctx.moveTo(0, 50.5);
+  ctx.lineTo(_width, 50.5);
+  ctx.stroke();
+
+  // 5. 中间时间线（黄色粗线，画布中点）
+  ctx.beginPath();
+  ctx.strokeStyle = '#ffcc00';
+  ctx.lineWidth = 2;
+  ctx.moveTo(_width / 2 - 1 + 0.5, 0);
+  ctx.lineTo(_width / 2 - 1 + 0.5, _height);
+  ctx.stroke();
+};
+
+/**
+ * 绘制轴线刻度线及时间文本
+ * @param {CanvasRenderingContext2D} ctx - 画布上下文
+ * @param {number} _width - 画布宽度
+ * @param {number} _height - 画布高度
+ */
+const onDrawTick = (ctx, _width, _height) => {
+  const nowTime = new Date(state.nowDate).getTime();
+  // 离当前时间最近的整点时间（如 14:00:00）
+  dayjs(nowTime).format('YYYY-MM-DD HH');
+  const leftIntTime = new Date(dayjs(state.nowDate).format('YYYY-MM-DD HH') + ':00:00').getTime()
+  const nowHour = dayjs(state.nowDate).format('HH');
+  // 当前时间距离左侧整点的秒数
+  const leftIntSecond = (nowTime - leftIntTime) / 1000;
+  // 中间点距离左侧整点的像素距离
+  const leftIntLength = leftIntSecond / pxToSecond.value;
+  // 整点在画布上的基准位置（以画布中点为参考）
+  const center = _width / 2 - 1 - leftIntLength;
+
+  // 左侧刻度个数（基准点向左能绘制的刻度数）
+  const leftTickNumber = Math.floor(center / state.size);
+  // 右侧刻度个数（基准点向右能绘制的刻度数）
+  const rightTickNumber = Math.floor((_width - center) / state.size);
+
+  // 绘制左侧刻度
+  for (let i = 0; i <= leftTickNumber; i++) {
+    const _X = center - i * state.size;
+    let hour = Number(nowHour) - i;
+    hour = hour < 0 ? hour + 24 : hour; // 处理跨天小时（如 0时-1时=23时）
+    const timeText = hour < 10 ? `0${hour}:00` : `${hour}:00`;
+
+    // 绘制刻度线
+    ctx.beginPath();
+    ctx.strokeStyle = '#4B4B4B';
+    ctx.lineWidth = 2;
+    ctx.moveTo(_X + 0.5, 40);
+    ctx.lineTo(_X + 0.5, _height);
+    ctx.stroke();
+
+    // 绘制时间文本
+    ctx.font = '10px Arial';
+    ctx.fillStyle = '#969696';
+    ctx.fillText(timeText, _X + 0.5 - 12, 34);
+  }
+
+  // 绘制右侧刻度
+  for (let i = 1; i <= rightTickNumber; i++) {
+    const _X = center + i * state.size;
+    let hour = Number(nowHour) + i;
+    hour = hour >= 24 ? hour - 24 : hour; // 处理跨天小时（如 23时+2时=1时）
+    const timeText = hour < 10 ? `0${hour}:00` : `${hour}:00`;
+
+    // 绘制刻度线
+    ctx.beginPath();
+    ctx.strokeStyle = '#4B4B4B';
+    ctx.lineWidth = 2;
+    ctx.moveTo(_X + 0.5, 40);
+    ctx.lineTo(_X + 0.5, _height);
+    ctx.stroke();
+
+    // 绘制时间文本
+    ctx.font = '10px Arial';
+    ctx.fillStyle = '#969696';
+    ctx.fillText(timeText, _X + 0.5 - 12, 34);
+  }
+};
+
+/**
+ * 绘制当前时间文本（画布上方中间）
+ * @param {CanvasRenderingContext2D} ctx - 画布上下文
+ * @param {number} _width - 画布宽度
+ */
+const onDrawNowDate = (ctx, _width) => {
+  ctx.font = '14px Arial';
+  ctx.fillStyle = '#ffffff';
+  ctx.fillText(state.nowDate, _width / 2 - 75, 24);
+};
+
+/**
+ * 绘制视频记录区域（蓝色矩形）
+ * @param {CanvasRenderingContext2D} ctx - 画布上下文
+ * @param {number} _width - 画布宽度
+ * @param {number} _height - 画布高度
+ */
+const onDrawRecordArea = (ctx, _width, _height) => {
+  const nowTime = new Date(state.nowDate).getTime();
+  // 画布左侧顶点对应的时间（秒）
+  const leftVertexTime = nowTime / 1000 - (_width / 2) * pxToSecond.value;
+  // 画布右侧顶点对应的时间（秒）
+  const rightVertexTime = nowTime / 1000 + (_width / 2) * pxToSecond.value;
+
+  // 筛选可视范围内的记录（与画布有交集的记录）
+  const visibleTimeList = props.timeData.filter((record) => {
+    const startTimeSecond = new Date(record.startTime).getTime() / 1000;
+    const endTimeSecond = new Date(record.endTime).getTime() / 1000;
+    // 两种交集情况：1. 记录覆盖画布左侧 2. 记录起点在画布内
+    return (
+      (startTimeSecond < leftVertexTime && endTimeSecond > leftVertexTime) ||
+      (startTimeSecond >= leftVertexTime && startTimeSecond < rightVertexTime)
+    );
+  });
+
+  // 绘制每个可视记录的蓝色矩形
+  visibleTimeList.forEach((record) => {
+    const startTimeSecond = new Date(record.startTime).getTime() / 1000;
+    const endTimeSecond = new Date(record.endTime).getTime() / 1000;
+
+    // 情况1：记录起点在画布左侧（矩形从画布左端开始）
+    if (startTimeSecond < leftVertexTime) {
+      const rectWidth = endTimeSecond < rightVertexTime
+        ? (endTimeSecond - leftVertexTime) / pxToSecond.value
+        : _width; // 若记录覆盖画布右侧，宽度设为画布宽
+      ctx.beginPath();
+      ctx.fillStyle = '#637DEC';
+      ctx.fillRect(0, 43, rectWidth, 8);
+    }
+
+    // 情况2：记录起点在画布内
+    if (startTimeSecond >= leftVertexTime) {
+      const rectX = (startTimeSecond - leftVertexTime) / pxToSecond.value; // 矩形X坐标
+      const rectWidth = (endTimeSecond - startTimeSecond) / pxToSecond.value; // 矩形宽度
+      ctx.beginPath();
+      ctx.fillStyle = '#637DEC';
+      ctx.fillRect(rectX, 43, rectWidth, 8);
+    }
+  });
+};
+
+/**
+ * 绑定画布鼠标事件（移入、移出、移动、按下）
+ * @param {HTMLCanvasElement} canvas - canvas DOM 元素
+ * @param {CanvasRenderingContext2D} ctx - 画布上下文
+ * @param {number} _width - 画布宽度
+ * @param {number} _height - 画布高度
+ */
+const onMouseHandle = (canvas, ctx, _width, _height) => {
+  // 鼠标移入：记录当前时间（避免移动时受实时时间影响）
+  canvas.onmouseover = (e) => {
+    if (!state.isMouseDown) {
+      state.mouseNowDate = state.nowDate;
+    }
+  };
+
+  // 鼠标移出：清空画布并重新绘制基础内容
+  canvas.onmouseout = (e) => {
+    ctx.clearRect(0, 0, _width, _height);
+    onBaseFill(ctx, _width, _height);
+    onDrawNowDate(ctx, _width);
+  };
+
+  // 鼠标移动（未按下时）：显示当前鼠标对应的时间
+  canvas.onmousemove = (e) => {
+    if (!state.isMouseDown) {
+      ctx.clearRect(0, 0, _width, _height);
+      onBaseFill(ctx, _width, _height);
+
+      const offsetX = e.offsetX; // 鼠标在画布内的X坐标
+      const moveLength = offsetX - _width / 2; // 鼠标与画布中点的距离
+      // 计算鼠标位置对应的时间
+      const targetTime = new Date(state.mouseNowDate).getTime() + pxToSecond.value * moveLength * 1000;
+
+      const targetTimeText = dayjs(targetTime).format('YYYY-MM-DD HH:mm:ss');
+
+      // 绘制鼠标对应的时间文本（鼠标上方）
+      ctx.font = '12px Arial';
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText(targetTimeText, offsetX - 62, 12);
+      // 绘制当前时间文本（画布中间）
+      onDrawNowDate(ctx, _width);
+    }
+  };
+
+  // 鼠标按下：记录按下时的坐标和状态
+  canvas.onmousedown = (e) => {
+    state.mousedownX = e.clientX;
+    state.mousedownY = e.clientY;
+    state.isMouseDown = true;
+  };
+};
+
+/**
+ * 绑定全局事件（鼠标抬起、全局移动）
+ */
+const onDocumentEvent = () => {
+  // 全局鼠标抬起：重置按下状态
+  document.onmouseup = (e) => {
+    if (state.isMouseDown) {
+      state.mouseNowDate = state.nowDate; // 同步最终时间
+      state.isMouseDown = false;
+    }
+  };
+
+  // 全局鼠标移动（按下时）：拖动画布改变当前时间
+  document.onmousemove = (e) => {
+    if (state.isMouseDown && state.ctx) {
+      state.ctx.clearRect(0, 0, state._width, state._height);
+      onBaseFill(state.ctx, state._width, state._height);
+
+      const clientX = e.clientX;
+      const moveLength = state.mousedownX - clientX; // 鼠标拖动的距离
+      // 计算拖动后的时间
+      const targetTime = new Date(state.mouseNowDate).getTime() + pxToSecond.value * moveLength * 1000;
+      state.nowDate = dayjs(targetTime).format('YYYY-MM-DD HH:mm:ss');
+
+      // 重新绘制当前时间文本
+      onDrawNowDate(state.ctx, state._width);
+    }
+  };
+};
+
+// 5. 生命周期钩子（Vue3 中直接使用 onMounted/onBeforeUnmount 等）
+// 组件挂载后：初始化画布、绑定事件、监听窗口resize
+onMounted(() => {
+  initCanvas();
+  onDocumentEvent();
+
+  // 窗口resize防抖处理
+  let isDebouncing = false;
+  window.onresize = () => {
+    if (!isDebouncing) {
+      isDebouncing = true;
+      setTimeout(() => {
+        initCanvas();
+        isDebouncing = false;
+      }, 300);
+    }
+  };
+});
+
+// 组件卸载前：清除事件监听
+onBeforeUnmount(() => {
+  window.onresize = null;
+  document.onmousemove = null;
+  document.onmouseup = null;
+  if (playbackbarCanvasRef.value) {
+    playbackbarCanvasRef.value.onmouseover = null;
+    playbackbarCanvasRef.value.onmouseout = null;
+    playbackbarCanvasRef.value.onmousemove = null;
+    playbackbarCanvasRef.value.onmousedown = null;
+  }
+});
+
+// 6. 监听 Props 变化：initDate 变化时重新初始化
+watch(
+  () => props.initDate,
+  (newVal) => {
+    state.nowDate = newVal;
+    state.mouseNowDate = newVal;
+    initCanvas();
+  },
+  { immediate: false } // 初始化时已在 onMounted 处理，无需立即执行
+);
+</script>
+
+<style lang="scss" scoped>
+.playbackbar {
+  width: 100%;
+  height: 40px;
+  background-color: #343434;
+  canvas {
+    cursor: pointer;
+    background: #000;
+  }
+}
+</style>
diff --git a/apps/web-antd/tsconfig.json b/apps/web-antd/tsconfig.json
index d45e3d7a..40a9fdef 100644
--- a/apps/web-antd/tsconfig.json
+++ b/apps/web-antd/tsconfig.json
@@ -3,6 +3,7 @@
   "extends": "@vben/tsconfig/web-app.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "allowJs": true,
     "paths": {
       "#/*": [
         "./src/*"