1

src/views/components/video/ruler.vue

@@ -76,10 +76,10 @@
         // }
       });
       this.$bus.$on('tapeTimeUpdate', (val) => {
-        this.timeNow = parseInt(val) - this.timeNow;
-        this.meddleTime = this.dateAdd(this.meddleTime, parseInt(this.timeNow));
-        this.init(this.rulerWidth, false);
-        this.timeNow = parseInt(val);
+        if (val && val !== this.meddleTime) {
+          this.meddleTime = val;
+          this.init(this.rulerWidth, false);
+        }
       });
       // console.log(this.canvas_width )
       // const start = moment('2017-11-08 11:42');

src/views/components/video/tape.vue

@@ -25,6 +25,10 @@
         type: String,
         default: ''
       },
+      startTime: {
+        type: String,
+        default: ''
+      },
       isLoading: {
         type: Boolean,
         default: false
@@ -125,6 +129,25 @@
             console.error('播放器错误:', error);
             // 在此处添加错误处理逻辑，如重连[reference:12]
           });
+          this.player.on('timeupdate', (e) => {
+            if (!this.startTime) return;
+            const start = new Date(this.startTime.replace(/-/g, '/')).getTime();
+            const current = new Date(start + e.currentTime * 1000);
+            const pad = (n) => (n < 10 ? '0' + n : n);
+            const timeStr =
+              current.getFullYear() +
+              '-' +
+              pad(current.getMonth() + 1) +
+              '-' +
+              pad(current.getDate()) +
+              ' ' +
+              pad(current.getHours()) +
+              ':' +
+              pad(current.getMinutes()) +
+              ':' +
+              pad(current.getSeconds());
+            this.$bus.$emit('tapeTimeUpdate', timeStr);
+          });
           // this.player.on('timeupdate', (e) => {
           //   this.$bus.$emit(
           //     'tapeTimeUpdate',

src/views/monitor/playback.vue

@@ -31,6 +31,7 @@
           <videoTape
             :url="videoUrl"
             :urlT="videoUrlT"
+            :startTime="timeList[0]"
             @closeLoading="closeLoading"
             ref="tape"
           ></videoTape>
@@ -47,6 +48,8 @@
         </div> -->
         <Ruler
           ref="ruler"
+          :timeRange="['', nowTime]"
+          :startMeddleTime="nowTime"
           @changeMeddleTime="meddleTimeChange"
           @click="rulerClick"
         ></Ruler>
@@ -180,10 +183,12 @@
         videoUrlT: '//',
         defaultProps: {
           label: 'name'
-        }
+        },
+        nowTime: ''
       };
     },
     mounted() {
+      this.nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
       this.$nextTick(() => {
         this.rulerWidth = this.$refs.leftBox.clientWidth;
         this.$refs.ruler.init(this.rulerWidth, true);