提交

src/views/BoutiqueColumn/components/video.vue

@@ -4,7 +4,6 @@
       ref="video"
       :controls="false"
       autoplay
-      muted
       @timeupdate="timeupdate"
       @error="videoerror"
       @canplay="videoload"
@@ -84,13 +83,33 @@ const props = defineProps({
 });
 const jindu = ref({});
 let chart = undefined;
+let timeout = undefined;
+let isClick = false;
 let list = [];
+let sec = 0,
+  stepNum = 0;
 onMounted(() => {
   chart = echarts.init(chartEle.value);
   chart.resize({
     height: 300,
     width: bg.value.offsetWidth,
   });
+
+  chart.on('datazoom', () => {
+    if (isClick) return;
+    isClick = true;
+    if (timeout) clearTimeout(timeout), (timeout = undefined);
+    video.value.pause();
+    timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      timeout = undefined;
+      isClick = false;
+      //  拖拽后的事件
+      video.value.currentTime = chart.getOption().dataZoom[0].startValue;
+      stepNum = chart.getOption().dataZoom[0].endValue - chart.getOption().dataZoom[0].startValue
+      video.value.play();
+    }, 200);
+  });
 });
 
 defaultAjax({
@@ -112,19 +131,35 @@ defaultAjax({
     v.date = key;
     list.push(v);
   }
+
+  stepNum = list.length;
   draw(keys, Ir, Ic, ad);
   jindu.value = list[0];
 });
 
 function timeupdate(v) {
   // 播放中
-  let sec = Math.floor(v.srcElement.currentTime);
-  let width = bg.value.offsetWidth - 100;
-  let o = (width / list.length).toFixed(4) - 0;
-  let item = list[sec];
-  if (!item.lrTop) return;
+  if (sec === Math.floor(v.srcElement.currentTime)) return;
+  sec = Math.floor(v.srcElement.currentTime);
+  let s = chart.getOption().dataZoom[0].startValue,
+    e = chart.getOption().dataZoom[0].endValue;
+  let item = list[sec] || {};
   jindu.value = item;
-  leftNum.value = 100 + o * sec;
+  if (sec >= e) {
+    // 切页
+    chart.setOption({
+      dataZoom: {
+        startValue: e + 1,
+        endValue: e + 1 + e - s
+      },
+    });
+    leftNum.value = 100;
+    return;
+  }
+  let width = bg.value.offsetWidth - 130;
+  let cValue = sec - s;
+  let iWdith = width / (e - s);
+  leftNum.value = cValue * iWdith + 100;
 }
 
 function videoerror(err) {
@@ -160,6 +195,36 @@ function tof(num, t) {
 function draw(key, Ir, Ic, ad) {
   // 绘图
   let option = {
+    dataZoom: [
+      {
+        maxSpan: 100,
+        minSpan: 1,
+        type: 'slider',
+        brushSelect: false,
+        // zoomLock: false,
+        show: true,
+        realtime: true,
+        startValue: 0,
+        endValue: stepNum,
+        zoomOnMouseWheel: false,
+        height: '30',
+        top: '85%',
+        handleIcon:
+          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleSize: 15,
+        textStyle: {
+          color: '#c5c6cc',
+        },
+        dataBackground: {
+          lineStyle: {
+            color: '#fff',
+          },
+          areaStyle: {
+            color: '#8b51a8',
+          },
+        },
+      },
+    ],
     xAxis: {
       data: key,
       position: 'top',