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 }"
            :style="{
              '--bgColor':
                item.signalState == 1
                  ? 'green'
                  : item.signalState == 2
                  ? 'red'
                  : '#aaaaaa',
            }"
          >
            {{ item.videoName }}（{{ item.videoPassageCount }}/{{
              item.passagePassCount
            }}）</span
          >
        </div>
      </div>
    </div>
    <div class="right" v-if="showVideo">
      <div class="videoView" v-if="showVideoView0">
        <H265Player :url="url0" @on-error="handleOnError0" />
      </div>
      <div class="videoView videoViewError" v-if="showVideoView0 == false">
        设备0通道链接失败！请及时检查！
      </div>
      <div class="videoView" v-if="showVideoView1">
        <H265Player :url="url1" @on-error="handleOnError1" />
      </div>
      <div class="videoView videoViewError" v-if="showVideoView1 == false">
        设备1通道链接失败！请及时检查！
      </div>
      <div class="videoView" v-if="showVideoView2">
        <H265Player :url="url2" @on-error="handleOnError2" />
      </div>
      <div class="videoView videoViewError" v-if="showVideoView2 == false">
        设备2通道链接失败！请及时检查！
      </div>
      <div class="videoView" v-if="showVideoView3">
        <H265Player :url="url3" @on-error="handleOnError3" />
      </div>
      <div class="videoView videoViewError" v-if="showVideoView3 == false">
        设备3通道链接失败！请及时检查！
      </div>
    </div>
  </div>
</template>

<script>
import {
  listVideoView,
  getVideoPassage,
  editPassageState,
} 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: "",
      showVideoView0: true,
      showVideoView1: true,
      showVideoView2: true,
      showVideoView3: true,
      videoPassageList: [],
      videoDvrNumber: null,
    };
  },
  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.showVideoView0 = true;
      this.showVideoView1 = true;
      this.showVideoView2 = true;
      this.showVideoView3 = true;
      this.videoDvrNumber = it.videoDvrNumber;
      this.initVideo(
        it.videoDvrNumber,
        this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
      );
    },
    //查询视频通道
    initVideo(videoDvrNumber, url) {
      let that = this;
      getVideoPassage(videoDvrNumber).then((response) => {
        let data = response.data;
        this.videoPassageList = 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);
          }
        });
      });
    },
    handleOnError0(error) {
      this.showVideoView0 = false;
      console.log("error: ", error);
      this.updatePassageState(this.videoPassageList[0].id);
    },
    handleOnError1(error) {
      this.showVideoView1 = false;
      console.log("error: ", error);
      this.updatePassageState(this.videoPassageList[1].id);
    },
    handleOnError2(error) {
      this.showVideoView2 = false;
      console.log("error: ", error);
      this.updatePassageState(this.videoPassageList[2].id);
    },
    handleOnError3(error) {
      this.showVideoView3 = false;
      console.log("error: ", error);
      this.updatePassageState(this.videoPassageList[3].id);
    },
    updatePassageState(id) {
      let param = {
        id: id,
        videoDvrNumber: this.videoDvrNumber,
        passageState: "2",
      };
      editPassageState(param);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .left {
    width: 250px;
    height: calc(100% - 45px);
    float: left;
    overflow: hidden;

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

        span {
          float: left;
          cursor: pointer;
        }
        .bg_color {
          color: #409eff;
        }
      }
      .nav-item :hover {
        color: #409eff;
      }
      .nav-item ::before {
        content: " ";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: block;
        float: left;
        margin-top: 6px;
        background-color: var(--bgColor);
      }
    }
  }
  .right {
    width: calc(100% - 270px);
    margin-left: 15px;
    height: 820px;
    float: left;
    .videoView {
      color: aliceblue;
      float: left;
      width: 50%;
      height: 50%;
    }
    .videoViewError {
      background-color: #575e65;
      text-align: center;
      line-height: 324px;
    }
  }
}
</style>