Skip to content

蒋秀川 / miniProject

Go to a project
Commit 42a6f9bd by Tianqing Liu
Options

feat: 直播，优化时间线样式

1 parent dd005f68
Inline Side-by-side
Showing 2 changed files with 25 additions and 23 deletions
h5/src/components/extension/timeline-canvas-wx.vue
...@@ -38,10 +38,10 @@ export default { ...@@ -38,10 +38,10 @@ export default {
type: [Number, String], type: [Number, String],
default: "100%", default: "100%",
}, },
// //
height: { height: {
type:[Number, String], type:[Number, String],
default: 40, default: 60,
}, },
// 中间的时间, // 中间的时间,
startMeddleTime: String, startMeddleTime: String,
...@@ -74,17 +74,19 @@ export default { ...@@ -74,17 +74,19 @@ export default {
//背景 //背景
background: "transparent", background: "transparent",
//中间线 //中间线
meddleLine: "rgba(64, 196, 255,0.6)", meddleLine: "rgba(18, 20, 21, 1)",
//中间时间 //中间时间
meddleDate: "red", // "rgb(64, 196, 255)", meddleDate: "rgba(18, 20, 21, 1)", // "rgb(64, 196, 255)",
// TODO: 移动线和时间是什么？
//移动线 //移动线
moveLine: "rgba(255,17,17,0.95)", moveLine: "red",
//移动时间 //移动时间
moveDate: "#009966", moveDate: "red",
//刻度线 //刻度线
scaleLine: "rgba(255,255,255,0.9)", scaleLine: "rgba(144, 148, 157, 1)",
// 小刻度线 // 小刻度线
minscaleLine: "rgba(255,255,255,0.5)", minscaleLine: "rgba(144, 148, 157, 1)",
//刻度条 //刻度条
scaleBar: "transparent", scaleBar: "transparent",
}; };
...@@ -259,7 +261,7 @@ export default { ...@@ -259,7 +261,7 @@ export default {
this.distance = this.getDistance({ x: e.offsetX, y: e.offsetY }, { x: touches[1].pageX, y: touches[1].pageX }); this.distance = this.getDistance({ x: e.offsetX, y: e.offsetY }, { x: touches[1].pageX, y: touches[1].pageX });
} }
this.mousedown(e); this.mousedown(e);
}, },
// 鼠标移动 // 鼠标移动
...@@ -374,7 +376,7 @@ export default { ...@@ -374,7 +376,7 @@ export default {
let line_px = (this.scaleLine_minute * 60) / this.px_second; let line_px = (this.scaleLine_minute * 60) / this.px_second;
for (let i = p; i <= (this.canvasWidth + 1); i += line_px) { for (let i = p; i <= (this.canvasWidth + 1); i += line_px) {
let date = this.firstTime + i * this.px_second * 1000; let date = this.firstTime + i * this.px_second * 1000;
let time1 = moment(date).format("HH:mm"); let time1 = moment(date).format("HH:mm");
if ( if (
(this.realTimeRange[0] && date < new Date(this.realTimeRange[0]).getTime()) || (this.realTimeRange[0] && date < new Date(this.realTimeRange[0]).getTime()) ||
(this.realTimeRange[1] && date > (new Date(this.realTimeRange[1]).getTime() + 1000)) (this.realTimeRange[1] && date > (new Date(this.realTimeRange[1]).getTime() + 1000))
...@@ -516,7 +518,7 @@ export default { ...@@ -516,7 +518,7 @@ export default {
: item.endTime; : item.endTime;
let sx = (new Date(beginTime).getTime() - this.firstTime) / 1000 / this.px_second; let sx = (new Date(beginTime).getTime() - this.firstTime) / 1000 / this.px_second;
let ex = (new Date(endTime).getTime() - this.firstTime) / 1000 / this.px_second; let ex = (new Date(endTime).getTime() - this.firstTime) / 1000 / this.px_second;
this.ctx.fillRect(sx, 0, ex - sx, 40); this.ctx.fillRect(sx, 0, ex - sx, 6);
}); });
}, },
//获取点坐标的距离（用于移动端双指放大缩小手势识别） //获取点坐标的距离（用于移动端双指放大缩小手势识别）
...@@ -574,7 +576,7 @@ export default { ...@@ -574,7 +576,7 @@ export default {
// canvas最左边的时间的时间戳（滑动计算时间） // canvas最左边的时间的时间戳（滑动计算时间）
// firstTime() { // firstTime() {
// return new Date(this.realTimeRange[0]).getTime(); // return new Date(this.realTimeRange[0]).getTime();
// }, // },
firstTime() { firstTime() {
return new Date(this.meddleTime).getTime() - ((this.px_second * this.canvasWidth) / 2) * 1000; return new Date(this.meddleTime).getTime() - ((this.px_second * this.canvasWidth) / 2) * 1000;
...@@ -636,4 +638,4 @@ export default { ...@@ -636,4 +638,4 @@ export default {
.timeline-canvas{ .timeline-canvas{
// width:calc(100% - 80px)!important; // width:calc(100% - 80px)!important;
} }
</style>
\ No newline at end of file \ No newline at end of file
</style>
h5/src/components/extension/videoTime.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div> <div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
</div> </div>
</div> </div>
<!-- 日历下拉框 --> <!-- 日历下拉框 -->
<van-calendar v-model:show="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/> <van-calendar v-model:show="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/>
<!-- 时间下拉框 --> <!-- 时间下拉框 -->
...@@ -85,10 +85,10 @@ export default { ...@@ -85,10 +85,10 @@ export default {
markTime: [], markTime: [],
isNoBack:true, isNoBack:true,
maxDay: new Date(), maxDay: new Date(),
minDay: new Date(2023,1,1), minDay: new Date(2023,1,1),
ptzControlShow:false, ptzControlShow:false,
isCanFastRight:false, isCanFastRight:false,
timeColumns:[], timeColumns:[],
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
this.markTime.push({ this.markTime.push({
beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'), beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'),
endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'), endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)", bgColor: "rgba(92, 144, 245, 1)",
text: "", text: "",
}) })
}) })
...@@ -209,7 +209,7 @@ export default { ...@@ -209,7 +209,7 @@ export default {
this.isNoBack = this.startMeddleTime == moment().format(this.dateFormatType + ' HH:mm:ss') this.isNoBack = this.startMeddleTime == moment().format(this.dateFormatType + ' HH:mm:ss')
this.ptzControlShow = false this.ptzControlShow = false
this.isCanFast() this.isCanFast()
}, },
// 时间选择点击 // 时间选择点击
timeSelectShow() { timeSelectShow() {
...@@ -268,7 +268,7 @@ export default { ...@@ -268,7 +268,7 @@ export default {
if(this.showTimeSelectShow){ if(this.showTimeSelectShow){
return false; return false;
} }
let startTimeArr = this.startTime.split(':') let startTimeArr = this.startTime.split(':')
let timeColumns = [] let timeColumns = []
let maxHour = 23 let maxHour = 23
...@@ -316,7 +316,7 @@ export default { ...@@ -316,7 +316,7 @@ export default {
this.ptzControlShow = false this.ptzControlShow = false
this.$forceUpdate() this.$forceUpdate()
}, },
// 云台控制显示 // 云台控制显示
ptzControlChange() { ptzControlChange() {
this.ptzControlShow = !this.ptzControlShow this.ptzControlShow = !this.ptzControlShow
...@@ -331,7 +331,7 @@ export default { ...@@ -331,7 +331,7 @@ export default {
this.ptzControlType = '' this.ptzControlType = ''
this.$emit('ptzControlClick','stop') this.$emit('ptzControlClick','stop')
}, },
// 快退/快进 // 快退/快进
fastChangeStartTime(val) { fastChangeStartTime(val) {
let newTime = val>0?moment(this.showDay + ' ' + this.startTime).add(val, "seconds").format(this.dateFormatType + ' HH:mm:ss'):moment(this.showDay + ' ' + this.startTime).subtract(val*-1, "seconds").format(this.dateFormatType + ' HH:mm:ss'); let newTime = val>0?moment(this.showDay + ' ' + this.startTime).add(val, "seconds").format(this.dateFormatType + ' HH:mm:ss'):moment(this.showDay + ' ' + this.startTime).subtract(val*-1, "seconds").format(this.dateFormatType + ' HH:mm:ss');
...@@ -376,7 +376,7 @@ export default { ...@@ -376,7 +376,7 @@ export default {
width: 100%; width: 100%;
height: 11.65vw; height: 11.65vw;
position: relative; position: relative;
background-color: #F9F9F9;
} }
} }
.date-axis{ .date-axis{
...@@ -554,4 +554,4 @@ export default { ...@@ -554,4 +554,4 @@ export default {
/deep/.van-calendar__popup{ /deep/.van-calendar__popup{
height: 64%!important; height: 64%!important;
} }
</style>
\ No newline at end of file \ No newline at end of file
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!