large-vue/src/views/screen/engineering/monitorLive.vue

<template>
  <div class="main-data data-monitor-live">
    <div class="title-area">实时监控</div>
    <!-- 选择日期 -->
     <div class="choose-area" @click="choose">
      监控列表
     </div>
    <div class="close-btn" @click="close"></div>
    <div class="content-area">
      <div class="content">
        <video-component @videoLoad="playVideo"></video-component>
      </div>
    </div>
    <div @click="shot"  class="c1" style="right: 20px;top: 140px;">
      <img src="../../../assets/zhang/cameraScreen/cut.png" width="20px">
    </div>
    <div @click="amplify" class="c1" style="right: 20px;top: 190px;">
      <img src="../../../assets/zhang/cameraScreen/bigger.png" width="20px">
    </div>
    <div @click="reduce" class="c1" style="right: 20px;top: 240px;">
      <img src="../../../assets/zhang/cameraScreen/smaller.png" width="20px">
    </div>
    <div class="c2" style="right: 40px;top: 400px;">
      <div @click="left" style="position: absolute;left: 0;">
        <img src="../../../assets/zhang/cameraScreen/left.png" width="60px">
      </div>
      <div @click="right" style="position: absolute;right: 0;">
        <img src="../../../assets/zhang/cameraScreen/right.png" width="60px">
      </div>
      <div @click="upWord">
      <img src="../../../assets/zhang/cameraScreen/stop.png" width="35px">
    </div>
      <div @click="top" style="position: absolute;top: 0;">
        <img src="../../../assets/zhang/cameraScreen/up.png" width="80px">
      </div>
      <div @click="bottom" style="position: absolute;bottom: 0;">
        <img src="../../../assets/zhang/cameraScreen/down.png" width="80px">
      </div>
    </div>
  </div>
</template>

<script>
import VideoComponent from "@/components/VideoComponent/index.vue";

export default {
  name: "MonitorLive",
  components: {VideoComponent},
  props: {
    monitorInfo: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      winNum: 1,
      videoObj: '',
      played: false,
      imgSrc:'',
      code: '',
      direction:''
    };
  },
  watch: {
    monitorInfo: {
      deep: true,
      handler(options) {
        // if(!this.videoObj || this.code === options.code) return;
        // if(this.played){
        //   this.videoObj.videoStop(this.winNum);
        // }
        // this.videoObj.videoPlay({
        //   winNum: this.winNum,
        //   code: options.code,
        //   name: options.name,
        // });
        // this.played = true;
      }
    },
  },
  destroyed() {
    this.videoObj && this.videoObj.videoStop(this.winNum);
  },
  mounted() {},
  methods: {
    //点击监控列表
    choose(){
      this.$emit("chooseAllMonitor")
    },

    close(){
      this.videoObj && this.videoObj.videoStop(this.winNum);
      this.$emit("closeMonitor")
    },
    issue(t){
      this.$emit("issue",t);
    },
    // 播放器加载完毕
    playVideo(obj) {
      console.log(obj, '================================')
      console.log("子组件实例方法列表:", Object.keys(obj));
      this.videoObj = obj;
      this.code = this.monitorInfo.cameraCode;
      if(!this.code) return;
      console.log("视频播放编号", this.code);
      this.videoObj.videoPlay({
        winNum: this.winNum,
        code: this.monitorInfo.cameraCode,
        name: this.monitorInfo.abbreviation ? this.monitorInfo.abbreviation : '',
      });
      this.played = true;
    },

    left() {
      this.direction=0x0503
      // alert(1)
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0504,
    });

  },

    right() {
      this.direction=0x0501
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0502,
      });
    },
    top() {
      this.direction=0x0401
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0402,
      });
    },
    bottom() {
      this.direction=0x0403
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0404,
      });
    },


    upWord() {
      // alert(this.direction)
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control:  this.direction,
      });
    },

    //视频截图
    shot() {
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      this.videoObj.capture({
        winNum: this.winNum,
        code: this.monitorInfo.cameraCode,
      });
      this.imgSrc=this.fileName
      this.issue(this.imgSrc)

    },

    amplify() {
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0304,
      });
    },

    reduce() {
      console.log(this.videoObj,'========================aaa');
      console.log("视频播放编号", this.code);
      if (!this.videoObj)
       return;
      // alert(2)
      this.videoObj.videoControl({
      winNum: this.winNum,
      code: this.monitorInfo.cameraCode,
      control: 0x0302,
      });
    },

  },
};
</script>

<style lang="scss">

.el-scrollbar{
  background: #15696B;
  border: 1px solid #00ffff;
  ul{
    li{
      color: #FFF;
    }
  }
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background: #15696B;
  color: #00FFFF;
}
.el-select-dropdown__item.selected{
  color: #00FFFF;
}
.el-select .el-input .el-select__caret{
  display: none;
}
.data-monitor-live {
  position: relative;
  width: 890px;
  height: 576px;
  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
  background-size: cover;
  backdrop-filter: blur(10px);

  .close-btn{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  .choose-area{
    position: absolute;
    right: 100px;
    top: 7px;
    width: 80.05px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #00FFFF;
    background: url("../../../assets/images/main/choose_short_single.png") no-repeat;
    cursor: pointer;

  }
  .content-area {
    display: flex;
    flex-direction: column;
    padding: 15px 20px 0 15px;
  }

  .content-title {
    width: 515px;
    height: 26px;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 14px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 17px;
    .title {
      display: block;
    }
  }

  .content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .data-list {
      position: relative;
      img{
        width: 100%;
      }
      .name{
        position: absolute;
        top: 20px;
        left: 15px;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
      }
      .time{
        position: absolute;
        top: 20px;
        right: 15px;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

  }

  .title-format {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 6px;
      height: 24px;
      margin-right: 6px;
    }
    .title-info {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #ffffff;
      .title-en {
        font-size: 8px;
        color: #ffffff;
        opacity: 0.4;
      }
    }
  }

  .choose-area{
    .el-select{
      width: 50%;
    }
    .el-input{
      input{
        background: rgba(255, 255, 255, 0);
        color: #00FFFF;
        border: none;
        padding: 0;
        width: 30px;
      }
    }




  }

  .title-area{
    padding-left: 40px !important;
  }
  .c1{
  width: 50px;
  height: 30px;
  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
  display: flex;
  position:absolute;
  justify-content: center;
  align-items: center;
}
.c1:hover{
  cursor: pointer;
}
  .c2{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
  display: flex;
  position:absolute;
  justify-content: center;
  align-items: center;
}

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
}
</style>