social-management-screen/src/views/screen/video-resource/important-area-focus.vue

<template>
  <div class="important-area-focus">
    <div class="left">
      <template v-for="(item, index) in videoData">
        <div class="list-item" :class="{active: currentInfo.areaType === item.areaType}" @click="currentInfo = item">
          {{item.areaName}}
        </div>
      </template>
    </div>
    <div class="right">
<!--      <template v-if="test.flvUrl">-->
<!--        <div style="display: flex;">-->
<!--          <FlvVideo :url="test.flvUrl"/>-->
<!--          <FlvVideo :url="test.flvUrlProxy"/>-->
<!--        </div>-->
<!--      </template>-->
      <div class="right-title">{{ currentInfo.areaName }}</div>
      <div class="right-content">
        <!--        <FlvVideo class="flv-video" :url="`ws://10.110.31.81/odae-video/live/b5355c42-a313-4798-8d1b-4631b71286fa/1TMyt2IzM7UDBM_aq7bYkOdi-9GkCBoDSrZPidJ1JAA/rtmp.live.flv`"/>-->
        <template v-if="switchArea">
          <template v-for="(item, index) in currentInfo.viseoRecords?.filter((v, i) => i < 8)">
            <div class="video-item">
              <div class="video-item-title">{{item.name}}</div>
              <FlvVideo v-if="item.flvUrl" class="flv-video" :url="item.flvUrl"/>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  nextTick,
  onMounted,
  watch,
  computed,
  ComponentInternalInstance,
  reactive,
  toRefs,
  getCurrentInstance
} from 'vue'
import {useStore} from 'vuex'
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import FlvVideo from "./flv-video.vue";

export default defineComponent({
  name: 'App',
  components: {FlvVideo},
  setup() {
    const store = useStore()
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      videoData: [],
      secret: '035c73f7-bb6b-4889-a715-d9eb2d1925cc',
      currentInfo: {},
      switchArea: false,
    });
    //  @ts-ignore
    const cC = window.cusConfig
    watch(() => state.videoData, (n) => {
      state.currentInfo = n?.[0] || {}
    })
    watch(() => state.currentInfo, (n: any) => {
      n?.viseoRecords.filter((v: any, i: number) => i < 8).forEach((v: any) => {
        getStream(v)
      })
      state.switchArea = false
      setTimeout(() => {
        state.switchArea = true
      }, 100)
    })
    const getStream = (obj: any) => {
      let url_1 = `/${store.state.app.apiProxy.tesApi}/index/api/addFFmpegSource?`
      const streamId = obj.hlsUrl.substring(obj.hlsUrl.indexOf('/live/') + 6)
      obj.flvUrl = `ws://10.110.31.81/odae-video/live/${streamId}/${cC.video.source}.live.flv`

      // const params = {
      //   'secret': state.secret,
      //   'src_url': `${obj.hlsUrl}/${cC.video.source}`,
      //   'dst_url': `rtmp://127.0.0.1/live/${streamId}`,
      //   'timeout_ms': 10000,
      //   'enable_hls': 0,
      //   'enable_mp4': 0
      // }
      // Object.entries(params).forEach(([k, v], i) => {
      //   if (i > 0) {
      //     url_1 += '&'
      //   }
      //   url_1 += `${k}=${v}`
      // })
      // axios.get(url_1).then(res => {
      //   if (res.status === 200 && res.data?.code === 0 && res.data.data?.key) {
      //     let url_2 = `/${store.state.app.apiProxy.tesApi}/index/api/getMediaList?`
      //     const params = {
      //       'secret': state.secret,
      //       'stream': streamId,
      //     }
      //     Object.entries(params).forEach(([k, v], i) => {
      //       if (i > 0) {
      //         url_2 += '&'
      //       }
      //       url_2 += `${k}=${v}`
      //     })
      //     axios.get(url_2).then(res => {
      //       if (res.status === 200 && res.data?.code === 0) {
      //         obj.flvUrl = `ws://10.110.31.81/odae-video/live/${streamId}/${cC.video.source}.live.flv`
      //         obj.flvUrlProxy = `ws://${location.host}/${store.state.app.apiProxy.tesApi}/live/${streamId}/${cC.video.source}.live.flv`
      //       }
      //     })
      //   }
      // }).catch(() => {})
    }
    onMounted(() => {
      window.addEventListener("message", function (event) {
        const result = event.data;
        if (result.videoData) {
          state.videoData = result.videoData
        }
      });
      window.parent.postMessage({
        from: window.name,
        variable: "videoIframeLoading",
        value: true,
      }, "*")

      // const arr: any = []
      // state.videoData.forEach(p => {
      //   p.viseoRecords.forEach(v => {
      //     arr.push(v)
      //   })
      // })
      // state.test = arr[0]
      // getStream(state.test)
    })
    return {
      ...toRefs(state),
    }
  }
})
</script>

<style lang="scss" scoped>
.important-area-focus {
  height: 360px;
  display: flex;
  line-height: 1;

  .left {
    width: 174px;
    height: 100%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .list-item {
      width: 100%;
      min-height: 42px;
      padding: 10px 10px;
      box-sizing: border-box;
      cursor: pointer;
      background-image: url("./img/video_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-family: FZLanTingHeiS-DB-GB;
      font-weight: 400;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
      &.active {
        background-image: url("./img/video_bg_active.png");
      }
    }
  }

  .right {
    box-sizing: border-box;
    width: 960px;
    padding: 12px;
    height: 100%;
    border: 1px solid #3573FC;
    background: linear-gradient(90deg, rgba(0, 100, 241, 0.3) 0%, rgba(27, 36, 68, 0.3) 100%);
    display: flex;
    flex-direction: column;

    .right-title {
      box-sizing: border-box;
      padding-left: 14px;
      margin-top: 4px;
      width: 100%;
      border-bottom: 2px solid #062548;
      font-size: 24px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #E2EBF1;
      padding-bottom: 15px;
    }

    .right-content {
      margin-top: 9px;
      display: grid;
      flex: 1;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 7px;
      row-gap: 20px;

      .video-item {
        width: 222px;
        height: 128px;
        background: rgba(28, 45, 65, 0);
        border: 2px solid rgba(18, 87, 201, 0.4);
        border-radius: 4px;
        position: relative;

        .video-item-title {
          position: absolute;
          align-items: center;
          width: 100%;
          height: 24px;
          background: #000000;
          opacity: 0.8;
          border-radius: 2px;
          font-size: 12px;
          font-family: SimHei;
          font-weight: 400;
          color: #FEFEFE;
          padding: 0 6px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 24px;
          z-index: 2;
        }
        .flv-video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>