增加视频回放界面
This commit is contained in:
15683799673
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
<!-- 设备分组区域 -->
|
<!-- 设备分组区域 -->
|
||||||
<div class="bg-background flex-1">
|
<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
|
<div
|
||||||
v-for="i in playerNum"
|
v-for="i in playerNum"
|
||||||
:style="playerStyle"
|
:style="playerStyle"
|
||||||
@@ -36,26 +36,41 @@
|
|||||||
</Loading>
|
</Loading>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="player-area flex h-[30px] gap-[5px]">
|
<div class="player-area h-[80px]">
|
||||||
<div
|
<div class="process-wrap w-full">
|
||||||
v-for="key in 4"
|
<Process :init-date="processDate"></Process>
|
||||||
@click="onPlayerNumChanged(key)"
|
</div>
|
||||||
:class="playerSelectItemIndex == key ? selected : ''"
|
<!-- 视频回放操作栏 -->
|
||||||
class="btn-item h-[20px] w-[20px]"
|
<div class="play-option flex h-[40px] w-full gap-10">
|
||||||
>
|
<div class="left flex-1"></div>
|
||||||
<Svg1FrameIcon v-if="key == 1" style="width: 100%; height: 100%" />
|
<div class="mid flex flex-1 items-center content-center gap-5">
|
||||||
<Svg4FrameIcon
|
<div class="playing-time h-full w-[120px] flex items-center">
|
||||||
v-else-if="key == 2"
|
<DatePicker v-model:value="playDate" :allow-clear="false" />
|
||||||
style="width: 100%; height: 100%"
|
</div>
|
||||||
/>
|
|
||||||
<Svg9FrameIcon
|
<div class="playing" @click="onPlayerBtnClick">
|
||||||
v-else-if="key == 3"
|
<span v-if="playering">
|
||||||
style="width: 100%; height: 100%"
|
<a-button type="primary" shape="circle" size="middle">
|
||||||
/>
|
<template #icon>
|
||||||
<Svg16FrameIcon
|
<CaretRightOutlined />
|
||||||
v-else-if="key == 4"
|
</template>
|
||||||
style="width: 100%; height: 100%"
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,17 +82,15 @@
|
|||||||
import { onMounted, onUnmounted, ref, toRaw } from 'vue';
|
import { onMounted, onUnmounted, ref, toRaw } from 'vue';
|
||||||
import { Loading, Page } from '@vben/common-ui';
|
import { Loading, Page } from '@vben/common-ui';
|
||||||
import ChannelTree from './channel-tree.vue';
|
import ChannelTree from './channel-tree.vue';
|
||||||
|
import Process from './process.vue';
|
||||||
import mpegts from 'mpegts.js';
|
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 { addStreamProxy } from '#/api/sis/stream';
|
||||||
import {
|
|
||||||
Svg16FrameIcon,
|
|
||||||
Svg1FrameIcon,
|
|
||||||
Svg4FrameIcon,
|
|
||||||
Svg9FrameIcon,
|
|
||||||
} from '@vben/icons';
|
|
||||||
import { checkHEVCSupport } from '#/utils/video';
|
import { checkHEVCSupport } from '#/utils/video';
|
||||||
import type { AddStreamProxyResult } from '#/api/sis/stream/model';
|
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';
|
const selected = 'selected';
|
||||||
|
|
||||||
@@ -107,12 +120,18 @@ const currentSelectPlayerIndex = ref(0);
|
|||||||
const playerList: any[] = [];
|
const playerList: any[] = [];
|
||||||
// 播放器loading
|
// 播放器loading
|
||||||
const playerLoading = ref<boolean[]>([]);
|
const playerLoading = ref<boolean[]>([]);
|
||||||
|
|
||||||
// 当前选择播放器的key
|
// 当前选择播放器的key
|
||||||
const currentSelectKey = ref('');
|
const currentSelectKey = ref('');
|
||||||
// 当前所有的播放设备key
|
// 当前所有的播放设备key
|
||||||
const selectKeys = ref<string[]>([]);
|
const selectKeys = ref<string[]>([]);
|
||||||
|
|
||||||
|
const playering = ref<boolean>(true);
|
||||||
|
const playDate = ref<Dayjs>();
|
||||||
|
|
||||||
|
function onPlayerBtnClick() {
|
||||||
|
playering.value = !playering.value;
|
||||||
|
}
|
||||||
|
|
||||||
function playerSelect(index: number) {
|
function playerSelect(index: number) {
|
||||||
currentSelectPlayerIndex.value = index;
|
currentSelectPlayerIndex.value = index;
|
||||||
const player = playerList[index];
|
const player = playerList[index];
|
||||||
@@ -435,11 +454,20 @@ function loading(index: number, cmd: Number = 0) {
|
|||||||
playerLoading.value = loadinArr;
|
playerLoading.value = loadinArr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const processDate = ref('');
|
||||||
let isSupportH265 = false;
|
let isSupportH265 = false;
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 检测浏览器是否支持h265
|
// 检测浏览器是否支持h265
|
||||||
isSupportH265 = checkHEVCSupport();
|
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(() => {
|
onUnmounted(() => {
|
||||||
@@ -447,20 +475,6 @@ onUnmounted(() => {
|
|||||||
closePlayer(i);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -484,12 +498,10 @@ function catchUp() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.player-area {
|
.player-area {
|
||||||
display: flex;
|
.play-option {
|
||||||
align-items: center;
|
background-color: #606060;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.btn-item.selected {
|
|
||||||
color: #00a8ff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
386
apps/web-antd/src/views/sis/video/playback/process.vue
Normal file
386
apps/web-antd/src/views/sis/video/playback/process.vue
Normal file
@@ -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>
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
"extends": "@vben/tsconfig/web-app.json",
|
"extends": "@vben/tsconfig/web-app.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
|
"allowJs": true,
|
||||||
"paths": {
|
"paths": {
|
||||||
"#/*": [
|
"#/*": [
|
||||||
"./src/*"
|
"./src/*"
|
||||||
|
|||||||
Reference in New Issue
Block a user