jhprjv2/ruoyi-ui/src/views/video/videoList/index.vue

<template>
  <div class="app-container">
    <div class="left">
      <div class="side-nav el-scrollbar" style="opacity: 1">
        <div class="nav-item" v-for="(item, index) in videoConfigList">
          <span
            :title="item.videoName"
            @click="handlePlay(item, index)"
            :class="{ bg_color: currentIndex == index }"
            >{{ item.videoName }}</span
          >
        </div>
      </div>
    </div>
    <div class="right" v-if="showVideo">
      <div class="videoView">
        <H265Player :url="url0" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url1" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url2" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url3" @on-error="handleOnError" />
      </div>
    </div>
  </div>
</template>

<script>
import { listVideoView, getVideoPassage } from "@/api/video/videoConfig";
import H265Player from "vue-h265-player";

export default {
  name: "VideoPlay",
  components: {
    H265Player,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      showVideo: false,
      // 视频配置表格数据
      videoConfigList: [],
      currentIndex: null,
      request:
        "http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
      url0: "",
      url1: "",
      url2: "",
      url3: "",
    };
  },
  created() {
    this.initMenu();
  },
  methods: {
    /** 查询视频配置列表 */
    initMenu() {
      let param = {};
      listVideoView(param).then((response) => {
        this.videoConfigList = response.data;
      });
    },
    handlePlay(it, idx) {
      this.currentIndex = idx;
      this.showVideo = false;
      this.url0 = "";
      this.url1 = "";
      this.url2 = "";
      this.url3 = "";
      this.initVideo(
        it.videoDvrNumber,
        this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
      );
    },
    //查询视频通道
    initVideo(videoDvrNumber, url) {
      let that = this;
      getVideoPassage(videoDvrNumber).then((response) => {
        let data = response.data;
        that.showVideo = true;
        data.forEach((it, idx) => {
          if (idx == 0) {
            that.url0 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 1) {
            that.url1 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 2) {
            that.url2 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 3) {
            that.url3 = url.replace("{{passage}}", it.passageValue);
          }
        });
      });
    },
    handleOnError(error) {
      console.log("error: ", error);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .left {
    width: 220px;
    height: calc(100% - 45px);
    float: left;
    overflow: hidden;

    .side-nav {
      margin-left: 20px;
      height: 820px;
      overflow-y: scroll;
      .nav-item {
        width: 200px;
        overflow: hidden;
        display: block;
        height: 40px;
        color: #444;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;

        span {
          cursor: pointer;
        }
        .bg_color {
          color: #409eff;
        }
      }
      .nav-item :hover {
        color: #409eff;
      }
    }
  }
  .right {
    width: calc(100% - 240px);
    margin-left: 15px;
    height: 820px;
    float: left;
    .videoView {
      color: aliceblue;
      float: left;
      width: 50%;
      height: 50%;
    }
  }
}
</style>