视频回放bug

This commit is contained in:
yanran200730
2022-04-28 09:27:06 +08:00
parent 7c13051ce1
commit 40dfa8686b
3 changed files with 359 additions and 383 deletions

View File

@@ -1,19 +1,9 @@
<template>
<div class="synergr" :id="videoId" v-if="isInit" @mouseleave="isHide = true" @mousemove.stop="onMousemove" @mouseup="onMouseUp">
<canvas
id="synergr-canvas"
:style="{height: '28px'}"
v-if="canvasWidth"
@click="onClick"
:width="canvasWidth"
height="28">
<canvas id="synergr-canvas" :style="{height: '28px'}" v-if="canvasWidth" @click="onClick" :width="canvasWidth" height="28">
</canvas>
<div class="time" v-show="!isHide && left > 100" :style="{left: (left) + 'px'}">{{ time }}</div>
<img
@mousedown="onDragDown"
class="drag-img"
:style="{left: (x) + 'px'}"
src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
<img @mousedown="onDragDown" class="drag-img" :style="{left: (x) + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
<div class="slw-bottom">
<div class="action-bar">
<div class="left">
@@ -58,25 +48,16 @@
<div class="playback-item" v-for="(item, index) in times" :key="index">
<el-checkbox :label="item.id">
<span>通道{{ index + 1 }}</span>
<PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
</el-checkbox>
<PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
</div>
</el-checkbox-group>
</div>
</div>
<ai-dialog
title="选择日期"
:visible.sync="isShowDate"
width="520px"
@onConfirm="onConfirm">
<ai-dialog title="选择日期" :visible.sync="isShowDate" width="520px" @onConfirm="onConfirm">
<el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
<el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.date"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
<el-date-picker value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
@@ -430,6 +411,8 @@
color: #FFFFFF;
.playback-item {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 4px;
@@ -437,23 +420,23 @@
margin-bottom: 0;
}
.playback-item__timeline {
flex: 1;
height: 12px;
line-height: 1;
border-radius: 6px;
}
.el-checkbox {
display: flex;
align-items: center;
width: 100%;
// width: 100%;
.el-checkbox__label {
display: flex;
align-items: center;
flex: 1;
.playback-item__timeline {
flex: 1;
height: 12px;
line-height: 1;
border-radius: 6px;
}
span {
width: 60px;
color: #fff;