jhprjv2/ruoyi-ui/src/views/video/videoConfig/videoPlayDrawer.vue

<template>
  <div class="app-container">
    <el-drawer
      v-bind="$attrs"
      v-if="onOpen"
      v-on="$listeners"
      @opened="onOpen"
      @close="onClose"
      style="padding-left: 20px"
    >
      <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>
    </el-drawer>
  </div>
</template>

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

export default {
  name: "videoPlay",
  components: {
    H265Player,
  },
  props: {
    formData: {
      videoDvrNumber: String,
    },
  },
  data() {
    return {
      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: [],
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(value) {
        this.formData = value;
        this.request = this.request.replace(
          "{{videoDvrNumber}}",
          this.formData.videoDvrNumber
        );
        this.initVideo();
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onOpen() {},
    onClose() {},
    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);
    },
    //查询视频通道
    initVideo() {
      getVideoPassage(this.formData.videoDvrNumber).then((response) => {
        let data = response.data;
        this.videoPassageList = data;
        data.forEach((it, idx) => {
          if (idx == 0) {
            this.url0 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 1) {
            this.url1 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 2) {
            this.url2 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 3) {
            this.url3 = this.request.replace("{{passage}}", it.passageValue);
          }
        });
      });
    },
    updatePassageState(id) {
      let param = {
        id: id,
        videoDvrNumber: this.formData.videoDvrNumber,
        passageState: "2",
      };
      //editPassageState(param);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";

::v-deep .el-drawer__header {
  display: none;
}
.videoView {
  color: aliceblue;
  float: left;
  width: 50%;
  height: 50%;
}
.videoViewError {
  background-color: #575e65;
  text-align: center;
  line-height: 324px;
}
</style>