新功能-云端录像列表支持下载

648540858

2024-04-30 fa8ff09b426ac3fab3e3e715ffff15e60c20779c

 web_src/src/components/live.vue

old mode 100644
new mode 100755
@@ -15,10 +15,10 @@
          <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
            <div v-for="i in spilt" :key="i" class="play-box"
                 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
                 @click="playerIdx = (i-1)"
            >
                 @click="playerIdx = (i-1)">
              <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
              <player ref="player" v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot"
                      @destroy="destroy"/>
            </div>
          </div>
        </el-main>
@@ -39,30 +39,15 @@
  },
  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
    };
  },
@@ -75,13 +60,22 @@

  computed: {
    liveStyle() {
      if (this.spilt == 1) {
        return {width: '100%', height: '100%'}
      } else if (this.spilt == 4) {
        return {width: '49%', height: '49%'}
      } else if (this.spilt == 9) {
        return {width: '32%', height: '32%'}
      let style = {width: '100%', height: '100%'}
      switch (this.spilt) {
        case 4:
          style = {width: '49%', height: '49%'}
          break
        case 9:
          style = {width: '32%', height: '32%'}
          break
      }
      this.$nextTick(() => {
        for (let i = 0; i < this.spilt; i++) {
          const player = this.$refs.player
          player && player[i] && player[i].updatePlayerDomSize()
        }
      })
      return style
    }
  },
  watch: {
@@ -113,20 +107,24 @@
      console.log(idx);
      this.clear(idx.substring(idx.length - 1))
    },
    clickEvent: function (data) {
      if (data.channelId && data.subCount == 0) {
        this.sendDevicePush(data)
    clickEvent: function (device, data, isCatalog) {
      if (data.channelId && !isCatalog) {
        if (device.online === 0) {
          this.$message.error('设备离线!不允许点播');
        }else {
          this.sendDevicePush(data)
        }
      }
    },
    contextMenuEvent: function (data) {
    contextMenuEvent: function (device, event, data, isCatalog) {

    },
    //通知设备上传媒体流
    sendDevicePush: function (itemData) {
      if (itemData.status === 0) {
        this.$message.error('设备离线!');
        return
      }
      // if (itemData.status === 0) {
      //   this.$message.error('设备离线!');
      //   return
      // }
      this.save(itemData)
      let deviceId = itemData.deviceId;
      // this.isLoging = true;
@@ -139,12 +137,15 @@
        method: 'get',
        url: '/api/play/start/' + deviceId + '/' + channelId
      }).then(function (res) {
        // that.isLoging = false;
        console.log('=====----=====')
        console.log(res)
        if (res.data.code == 0 && res.data.data) {
          itemData.playUrl = res.data.data.httpsFlv
          that.setPlayUrl(res.data.data.ws_flv, idxTmp)
        if (res.data.code === 0 && res.data.data) {
          let videoUrl;
          if (location.protocol === "https:") {
            videoUrl = res.data.data.wss_flv;
          } else {
            videoUrl = res.data.data.ws_flv;
          }
          itemData.playUrl = videoUrl;
          that.setPlayUrl(videoUrl, idxTmp);
        } else {
          that.$message.error(res.data.msg);
        }
@@ -166,13 +167,6 @@
      if (deviceId && channelId) {
        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)
@@ -211,17 +205,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>