mediaAll/src/view/allMedia/videoProcessing/detail.vue

<template>
  <div>
    <header_local />
    <div class="main">
      <el-row class="head">
        <el-col :span="12">
          <el-icon size="18" @click="router.go(-1)" style="cursor: pointer">
            <ArrowLeft />
          </el-icon>
          视频审核
        </el-col>
      </el-row>
      <br />
      <el-row class="body">
        <el-col
          ref="left"
          :span="16"
          style="border-right: 2px solid #e4e4e4; padding: 0 26px"
        >
          <div v-text="detail.title" style="margin-bottom: 1em"></div>
          <div class="video_content">
            <!--  -->
            <video
              autoplay
              controls
              ref="video"
              :style="{
                width: image_data.width + 'px',
                height: image_data.height + 'px',
                background: '#000'
              }"
              @canplay="canplay"
              @timeupdate="timeupdate"
              :src="detail.url"
            ></video>

            <!-- <div class="progress"></div> -->
          </div>

          <el-button
            :type="status[detail.reviewResult.label]"
            style="margin: 0 auto; display: block"
            v-text="detail.reviewResult.labelDesc"
          ></el-button>
          <div style="text-align: center; height: 3em; line-height: 3em">
            该视频共有{{ detail_data.total }}处违规
          </div>
        </el-col>
        <el-col :span="8" style="padding: 0 17px">
          <div style="height: 3em; line-height: 3em">审核结果</div>
          <el-tabs
            v-if="
              detail &&
              detail.reviewResult &&
              detail.reviewResult.results &&
              detail.reviewResult.results.length
            "
            v-model="activeName"
          >
            <el-tab-pane
              :label="item.typeDesc"
              :name="item.type"
              v-for="item in detail.reviewResult.results"
              :key="item.type"
            >
              <div
                :class="{ err_item: true, err_act: select_item === index }"
                v-for="(p, index) in item.items"
                :key="index"
                @click="() => play(p, index)"
              >
                <div
                  class="err_item_label"
                  style="height: 2em; line-height: 2em"
                >
                  <span>{{
                    `${index + 1}、 ${changeTime(
                      p.startTimeInSeconds
                    )}-${changeTime(p.endTimeInSeconds)}`
                  }}</span>
                  <span style="color: #f56c6c">【{{ p.labelDesc }}】</span>
                  <span>{{ `${p.subTypeDesc}` }}</span>
                </div>
                <img
                  :src="p.evidence.thumbnail"
                  style="
                    width: 100%;
                    max-width: 373px;
                    border-radius: 5px;
                    display: block;
                    margin: 0 auto;
                  "
                />
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-empty description="暂无违规信息" v-else />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import header_local from '../components/header.vue';
// import { storeImg, historyImg } from '@/api/processing';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// import config from '../../../config/index';
const status = {
  REJECT: 'danger',
  REVIEW: 'warning',
  NORMAL: 'success'
};
const left = ref(null);
const video = ref(null);
const detail = JSON.parse(
  sessionStorage.getItem('Processing_detail') || '{reviewResult: {}}'
);
const activeName = ref(
  detail &&
    detail.reviewResult &&
    detail.reviewResult.results &&
    detail.reviewResult.results.length
    ? detail.reviewResult.results[0].type
    : ''
);
const select_item = ref(-1);

const detail_data = ref({
  total: 0
});
detail?.reviewResult?.results?.map(v => {
  detail_data.value.total += v.items ? v.items.length : 0;
});

function timeupdate(p) {
  //   console.log(p.target.duration);
  //   console.log(p.target.currentTime);
  //   console.log((p.target.currentTime / p.target.duration).toFixed(4) * 100);
}

function changeTime(T) {
  let H = (T - (T % 3600)) / 3600;
  let M = (T - (T % 60)) / 60;
  let S = T % 60;
  H < 10 ? (H = '0' + H) : H;
  M < 10 ? (M = '0' + M) : M;
  S < 10 ? (S = '0' + S) : S;
  return `${H}:${M}:${S}`;
}

function play(p, i) {
  select_item.value = i;
  video.value.currentTime = p.startTimeInSeconds;
  video.value.play();
}

const image_data = ref({
  height: 0,
  width: 0
});
function canplay() {
  let r_width = left.value.$el.offsetWidth - 52;
  let h = (video.value.videoWidth / video.value.videoHeight) * r_width;
  if (h > left.value.$el.offsetHeight) {
    h = left.value.$el.offsetHeight - 252;
  }
  image_data.value = {
    height: h,
    width: r_width
  };
}

// const Authorization = localStorage.getItem('token') || '';
</script>

<style scoped>
.main {
  padding: 1em;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  height: calc(100% - 42px);
}

.main .head {
  background: #f9fafc;
  height: 42px;
  line-height: 42px;
  padding: 0 22px;
}

.main .body {
  height: calc(100% - 42px - 1em);
}
.err_item_label {
  overflow-wrap: break-word;
}

.err_item {
  padding: 5px;
  margin: 10px 0;
}

.err_item:hover,
.err_act {
  background-color: #e8effc;
}

.progress {
  border-radius: 2em;
  background-color: #fff;
  position: absolute;
  bottom: 1.5em;
  width: 90%;
  left: 5%;
  height: 4px;
}
.video_content {
  position: relative;
  margin-bottom: 3em;
}
</style>