Skip to content

蒋秀川 / miniProject

Go to a project
Commit 6ed0fb1e by 陈岩
Options

feat: H5页面适配

1 parent 7a347bb6
Inline Side-by-side
Showing 1 changed file with 49 additions and 15 deletions
h5/src/components/extension/videoTime.vue
...@@ -118,6 +118,27 @@ export default { ...@@ -118,6 +118,27 @@ export default {
this.stopPlay() this.stopPlay()
}, },
methods: { methods: {
// 统一解析传入日期，解决不同浏览器解析不一致问题
parseToMoment(date) {
if (typeof date === 'number') {
const m = moment(date);
return m.isValid() ? m : moment();
}
if (typeof date === 'string') {
// 优先严格按组件日期格式解析，例如 'YYYY-MM-DD HH:mm:ss'
let m = moment(date, this.dateFormatType + ' HH:mm:ss', true);
if (m.isValid()) return m;
// 尝试 ISO 格式（空格改为 T）
m = moment(date.replace(' ', 'T'));
if (m.isValid()) return m;
// 尝试原生 Date 可解析后再交给 moment
const d = new Date(date);
m = moment(d);
return m.isValid() ? m : moment();
}
// 其他类型兜底当前时间
return moment();
},
setPTZEnable(status) { setPTZEnable(status) {
// 提示云台是否可用 // 提示云台是否可用
if (this.ptzControlShow) { if (this.ptzControlShow) {
...@@ -215,7 +236,7 @@ export default { ...@@ -215,7 +236,7 @@ export default {
startTimeChange(val) { startTimeChange(val) {
this.showTimeSelectShow = false this.showTimeSelectShow = false
this.startTime = val this.startTime = val
this.startMeddleTime = moment(this.showDay + ' ' + val).format(this.dateFormatType + ' HH:mm:ss') this.startMeddleTime = moment(this.showDay + ' ' + val, this.dateFormatType + ' HH:mm:ss', true).format(this.dateFormatType + ' HH:mm:ss')
console.log(this.startMeddleTime) console.log(this.startMeddleTime)
this.$emit('videoTimeChange',this.startMeddleTime) this.$emit('videoTimeChange',this.startMeddleTime)
this.nowPlayTime = moment(val).format('HH:mm:ss') this.nowPlayTime = moment(val).format('HH:mm:ss')
...@@ -248,30 +269,37 @@ export default { ...@@ -248,30 +269,37 @@ export default {
// 时间轴方法 // 时间轴方法
clickCanvas(date) { clickCanvas(date) {
console.log(date); console.log(date);
this.startTime = moment(date).format('HH:mm:ss') const m = this.parseToMoment(date);
this.isNoBack = moment(date).format(this.dateFormatType + ' HH:mm:ss') == moment().format(this.dateFormatType + ' HH:mm:ss') if (m.isValid()) {
this.startTime = m.format('HH:mm:ss')
this.isNoBack = m.format(this.dateFormatType + ' HH:mm:ss') == moment().format(this.dateFormatType + ' HH:mm:ss')
this.$emit('videoTimeChange', m.format(this.dateFormatType + ' HH:mm:ss'))
this.isCanFast()
}
this.ptzControlShow = false this.ptzControlShow = false
this.$emit('videoTimeChange',moment(date).format(this.dateFormatType + ' HH:mm:ss'))
this.isCanFast()
}, },
changeDate(date, status) { changeDate(date, status) {
// console.log("选择时间：" + date + " 播放状态：" + status); // console.log("选择时间：" + date + " 播放状态：" + status);
this.nowPlayTime = moment(date).format('HH:mm:ss') const m = this.parseToMoment(date);
if(!this.showTimeSelectShow){ if (m.isValid()) {
this.startTime = this.nowPlayTime this.nowPlayTime = m.format('HH:mm:ss')
if(!this.showTimeSelectShow){
this.startTime = this.nowPlayTime
}
} }
this.isCanFast() this.isCanFast()
this.$forceUpdate() this.$forceUpdate()
if(this.startTime == '23:59:59') { if(this.startTime == '23:59:59') {
setTimeout(()=>{ setTimeout(()=>{
this.startTime = '00:00:00' this.startTime = '00:00:00'
this.showDayChange(moment(date).add(1,'days').format(this.dateFormatType),'start') const next = m.isValid() ? m.clone().add(1,'days') : moment().add(1,'days');
this.$refs.time_line.play(moment(date).add(1,'days').format(this.dateFormatType + ' 00:00:00')); this.showDayChange(next.format(this.dateFormatType),'start')
this.$refs.time_line.play(next.format(this.dateFormatType + ' 00:00:00'));
},900) },900)
} else { } else {
this.proTimeColumns() this.proTimeColumns()
} }
if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)&&moment(date).format('ss') == '00') { if (m.isValid() && m.format(this.dateFormatType) == moment().format(this.dateFormatType) && m.format('ss') == '00') {
this.getDateBackTime(moment().format(this.dateFormatType)) this.getDateBackTime(moment().format(this.dateFormatType))
} }
// 更新时间下拉选项 // 更新时间下拉选项
...@@ -319,13 +347,17 @@ export default { ...@@ -319,13 +347,17 @@ export default {
}, },
// 判断当前时间是否可以进行快进 // 判断当前时间是否可以进行快进
isCanFast() { isCanFast() {
let playTime = new Date(this.showDay + ' ' + this.startTime).getTime() const m = moment(this.showDay + ' ' + this.startTime, this.dateFormatType + ' HH:mm:ss', true);
let nowTime = new Date().getTime() const playTime = m.isValid() ? m.valueOf() : Date.now();
const nowTime = Date.now();
this.isCanFastRight = (nowTime - playTime) > 10000 this.isCanFastRight = (nowTime - playTime) > 10000
}, },
// 时间线移动 // 时间线移动
mouseMoveDate(date) { mouseMoveDate(date) {
this.startTime = moment(date).format('HH:mm:ss') const m = this.parseToMoment(date);
if (m.isValid()) {
this.startTime = m.format('HH:mm:ss')
}
this.ptzControlShow = false this.ptzControlShow = false
this.$forceUpdate() this.$forceUpdate()
}, },
...@@ -347,7 +379,9 @@ export default { ...@@ -347,7 +379,9 @@ export default {
// 快退/快进 // 快退/快进
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'); const base = moment(this.showDay + ' ' + this.startTime, this.dateFormatType + ' HH:mm:ss', true);
const safeBase = base.isValid() ? base : moment();
let newTime = val>0?safeBase.clone().add(val, "seconds").format(this.dateFormatType + ' HH:mm:ss'):safeBase.clone().subtract(val*-1, "seconds").format(this.dateFormatType + ' HH:mm:ss');
let newDay = newTime.slice(0,10) let newDay = newTime.slice(0,10)
if(newDay == this.showDay) { if(newDay == this.showDay) {
this.startTimeChange(newTime.slice(11)) this.startTimeChange(newTime.slice(11))
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!