提交

src/views/BoutiqueColumn/components/video.vue

@@ -4,6 +4,7 @@
       ref="video"
       :controls="false"
       autoplay
+      muted
       @timeupdate="timeupdate"
       @error="videoerror"
       @canplay="videoload"
@@ -83,33 +84,13 @@ const props = defineProps({
 });
 const jindu = ref({});
 let chart = undefined;
-let timeout = undefined;
-let isClick = false;
 let list = [];
-let sec = 0,
-  stepNum = 6.8,
-  page = 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;
-      video.value.play();
-    }, 200);
-  });
 });
 
 defaultAjax({
@@ -137,26 +118,13 @@ defaultAjax({
 
 function timeupdate(v) {
   // 播放中
-  if (sec === Math.floor(v.srcElement.currentTime)) return;
-  sec = Math.floor(v.srcElement.currentTime);
+  let sec = Math.floor(v.srcElement.currentTime);
   let width = bg.value.offsetWidth - 100;
-  let item = list[sec] || {};
-  let s = chart.getOption().dataZoom[0].startValue,
-    e = chart.getOption().dataZoom[0].endValue;
-  let iW = width / (e - s),
-    cheng = sec - s < 0 ? 0 : sec - s;
-  let step = iW * cheng > width ? 0 : iW * cheng;
+  let o = (width / list.length).toFixed(4) - 0;
+  let item = list[sec];
   if (!item.lrTop) return;
   jindu.value = item;
-  leftNum.value = 100 + step;
-  if (iW * cheng <= width) return;
-  page++;
-  chart.setOption({
-    dataZoom: {
-      start: stepNum * page,
-      end: stepNum * (page + 1),
-    },
-  });
+  leftNum.value = 100 + o * sec;
 }
 
 function videoerror(err) {
@@ -191,38 +159,7 @@ function tof(num, t) {
 
 function draw(key, Ir, Ic, ad) {
   // 绘图
-  let stepNum = 6.8;
   let option = {
-    dataZoom: [
-      {
-        maxSpan: 10,
-        minSpan: 5,
-        type: 'slider',
-        brushSelect: false,
-        // zoomLock: false,
-        show: true,
-        realtime: true,
-        start: stepNum * page,
-        end: stepNum * (page + 1),
-        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',

src/views/BoutiqueColumn/views/default.vue

@@ -1,9 +1,10 @@
 <template>
-  <el-button type="primary" class="export"> 导出 </el-button>
+  <el-button type="primary" class="export" @click="exportfun"> 导出 </el-button>
+  <div style="line-height: 3.5em;" v-text="item.showTime"></div>
   <el-table :data="list" @sort-change="sortFun">
     <el-table-column type="expand">
       <template #default="props">
-        <self-video v-if="props.row.video_url" :item="props.row" />
+        <self-video v-if="props.row.video_url && props.row.flow_url" :item="props.row" />
         <self-line v-else :item="props.row" />
       </template>
     </el-table-column>
@@ -69,8 +70,6 @@ const resultP = ref({
 const list = ref([]);
 
 function getEpgResult() {
-  if (resultP.value.page * resultP.value.pageSize >= resultP.value.total)
-    return;
   epgResult(resultP.value).then(r => {
     resultP.value.total = r.total || 0;
     list.value = (r.data || []).map(v => {
@@ -85,6 +84,7 @@ getEpgResult();
 function sortFun(column) {
   resultP.value.order = column.order ? config.order[column.order] : 'DESC';
   resultP.value.sort = column.prop ? column.prop.toUpperCase() : 'STADATE';
+  resultP.value.page = 1;
   getEpgResult();
 }
 
@@ -92,6 +92,37 @@ function changePage(num) {
   resultP.value.page = num;
   getEpgResult();
 }
+
+function exportfun() {
+  let xhttp;
+  if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+  else xhttp = new window.ActiveXObject('Microsoft.XMLHTTP');
+  xhttp.responseType = 'blob';
+  xhttp.open(
+    'GET',
+    config.base.url2 + '/epg-export?programId=' + props.item.id,
+    true
+  );
+  xhttp.send();
+  xhttp.onreadystatechange = function () {
+    if (this.readyState != 4 || this.status != 200) return;
+    // 组装a标签
+    let elink = document.createElement('a');
+    // 设置下载文件名
+    let D = new Date(),
+      M = D.getMonth() + 1,
+      E = D.getDate();
+    M > 9 ? '' : (M = ['0', M].join(''));
+    E > 9 ? '' : (E = ['0', E].join(''));
+    elink.download =
+      props.item.programName + ' ' + [D.getFullYear(), M, E].join('-') + '.csv';
+    elink.style.display = 'none';
+    elink.href = URL.createObjectURL(this.response);
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+  };
+}
 </script>
 
 <style></style>