648540858
2022-04-24 7f965a6922a079124671ad233e3c783da92c8e69
web_src/src/components/live.vue
@@ -18,8 +18,7 @@
                 @click="playerIdx = (i-1)"
            >
              <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
              <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]"  fluent autoplay :height="true"
                      :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
            </div>
          </div>
        </el-main>
@@ -40,35 +39,19 @@
    },
    data() {
      return {
        showVideoDialog: true,
        hasAudio: false,
        videoUrl:[''],
        spilt:1,//分屏
        playerIdx:0,//激活播放器
        deviceList: [], //设备列表
        currentDevice: {}, //当前操作设备对象
        videoComponentList: [],
        updateLooper: 0, //数据刷新轮训标志
        currentDeviceChannelsLenth:0,
        winHeight: window.innerHeight - 200,
        currentPage:1,
        count:15,
        total:0,
        getDeviceListLoading: false,
        //channel
        searchSrt: "",
        channelType: "",
        online: "",
        channelTotal:0,
        deviceChannelList:[],
        loading:false
      };
    },
    mounted() {
      this.initData();
    },
    created(){
@@ -169,13 +152,6 @@
          this.sendDevicePush({deviceId,channelId})
        }
      },
      convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
      },
      shot(e){
        // console.log(e)
        // send({code:'image',data:e})
@@ -213,17 +189,6 @@
        console.log(data);
        window.localStorage.setItem('playData',JSON.stringify(data))
      },
      loadAndPlay(){
        let dataStr = window.localStorage.getItem('playData') || '[]'
        let data = JSON.parse(dataStr);
        data.forEach((item,i)=>{
          if(item){
            this.playerIdx = i
            this.sendDevicePush(item)
          }
        })
      }
    }
  };
</script>
@@ -232,16 +197,20 @@
    margin: 0 10px;
  }
  .btn:hover{
      color: #409EFF;
  }
  .btn.active{
    color: #409EFF;
  }
  .redborder{
    border: 2px solid red !important;
  }
  .play-box{
    background-color: #000000;
    border: 2px solid #505050;
@@ -319,6 +288,7 @@
  .baidumap > .BMap_cpyCtrl {
    display: none !important;
  }
  .baidumap > .anchorBL {
    display: none !important;
  }