big_data_ott/src/views/BoutiqueColumn/components/video.vue

<template>
  <div class="video" ref="bg">
    <video
      ref="video"
      :controls="false"
      autoplay
      @timeupdate="timeupdate"
      @error="videoerror"
      @canplay="videoload"
      :src="props.item.video_url"
    ></video>
    <div style="position: relative">
      <div ref="chartEle"></div>
      <div class="lineinfobackground" :style="'left:' + leftNum + 'px'">
        <div style="position: relative; width: 100%; height: 100%">
          <div class="line"></div>
          <el-row style="padding: 10px 0 0 10px">
            <el-col :span="6">
              <span class="icon" style="background-color: #e05c5c"></span>
              流入
            </el-col>
            <el-col :span="6">
              <span class="icon" style="background-color: #6ab581"></span>
              流出
            </el-col>
            <el-col :span="12">
              <span class="iconLine"></span>
              收视率%
              <div style="float: right; padding: 0 5px 0 0">
                {{ tof(jindu.audienceRating, 4) }}%
              </div>
            </el-col>
          </el-row>
          <div style="padding: 5px 10px">
            当前时间：{{ jindu.date ? jindu.date.split(' ')[1] || '' : '' }}
            <div style="float: right">人数: {{ formateNum(jindu.uv) }}</div>
          </div>
          <el-row>
            <el-col :span="12">
              <div style="padding: 0 10px">
                流入排行
                <div>
                  <div
                    style="font-size: 12px; line-height: 22px"
                    v-for="(item, i) in jindu.lrTop"
                    :key="i"
                    v-text="item"
                  ></div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="padding: 0 10px">
                流出排行
                <div>
                  <div
                    style="font-size: 12px; line-height: 22px"
                    v-for="(item, i) in jindu.lcTop"
                    :key="i"
                    v-text="item"
                  ></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// @ is an alias to /src
import { defaultAjax } from '@/api/index';
import { ref, defineProps, onMounted } from 'vue';
import * as echarts from 'echarts';
const video = ref(null);
const bg = ref(null);
const leftNum = ref(100);
const chartEle = ref(null);
const props = defineProps({
  item: Object,
});
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({
  url: props.item.flow_url,
}).then(r => {
  const li = r || {};
  const Ir = [],
    Ic = [],
    ad = [],
    keys = [];

  for (const key in li) {
    if (!Object.hasOwnProperty.call(li, key)) continue;
    const v = li[key];
    keys.push(key);
    Ic.push(-1 * v.lc);
    Ir.push(v.lr);
    ad.push(v.audienceRating * 100);
    v.date = key;
    list.push(v);
  }

  stepNum = list.length;
  draw(keys, Ir, Ic, ad);
  jindu.value = list[0];
});

function timeupdate(v) {
  // 播放中
  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;
  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) {
  console.log('播放错误：', err);
}

function videoload() {
  // 可以播放
  console.log('可以播放', video.value);
}

function formateNum(n) {
  let num = n;
  if (isNaN(n)) num = '0';
  else if (n >= 100000000)
    num =
      ((n / 100000000).toFixed(2) - 0 + '').replace(
        /\B(?=(?:\d{3})+\b)/g,
        ','
      ) + '亿';
  else if (n >= 10000)
    num =
      ((n / 10000).toFixed(2) - 0 + '').replace(/\B(?=(?:\d{3})+\b)/g, ',') +
      '万';
  else num = (num + '').replace(/\B(?=(?:\d{3})+\b)/g, ',');
  return num;
}

function tof(num, t) {
  return Number(num * 100).toFixed(t || 2);
}

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',
      silent: false,
      axisLabel: {
        interval: 'auto',
        color: '#000',
        rotate: '-90',
      },
    },
    yAxis: [
      {
        scale: false,
        nameGap: 6,
        inverse: false,
        name: '流入流出',
        nameLocation: 'start',
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#000',
          formatter: function (value) {
            let v = value;
            if (v < 0) v *= -1;
            return v;
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        nameTextStyle: {
          color: '#000',
        },
      },
      {
        scale: true,
        nameGap: 6,
        type: 'value',
        name: '收视率%',
        nameLocation: 'start',
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#000',
        },
        nameTextStyle: {
          color: '#000',
        },
      },
    ],
    grid: {
      left: 100,
      right: 50,
    },
    series: [
      {
        name: '流入',
        type: 'bar',
        yAxisIndex: 0,
        stack: 'one',
        data: Ir,
        sampling: 'lttb',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#df5a5a',
        },
      },
      {
        name: '流出',
        type: 'bar',
        yAxisIndex: 0,
        sampling: 'lttb',
        stack: 'one',
        data: Ic,
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#6ab581',
        },
      },
      {
        name: '收视率%',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        showSymbol: false,
        data: ad,
        lineStyle: {
          width: 1,
          color: '#50abfd',
        },
      },
    ],
  };
  option && chart.setOption(option);
}
</script>

<style lang="scss">
.video {
  padding: 0.5em;

  video {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: block;
  }

  .lineinfobackground {
    font-size: 12px;
    border-radius: 9px;
    position: absolute;
    width: 305px;
    height: 200px;
    top: 30px;
    left: 50px;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    color: #fff;

    .line {
      position: absolute;
      width: 2px;
      height: 110%;
      margin-top: -5%;
      margin-left: 50%;
      background-color: #888;
    }

    .icon {
      display: inline-block;
      width: 30px;
      height: 10px;
      border-radius: 10px;
    }

    .iconLine {
      background-color: #50abfd;
      display: inline-block;
      width: 30px;
      height: 2px;
      vertical-align: middle;
      border-radius: 10px;
    }
  }
}
</style>