更新同步wvp

wangyimeng

2022-05-06 c8831bc58fd967a4215cbe3ea8c89d753b4d31f7

 web_src/src/components/live.vue

@@ -1,90 +1,57 @@
<template>
  <div id="devicePosition" style="height: 100%">
    <el-container style="height: 100%">
      <el-header>
        <uiHeader></uiHeader>
      </el-header>
      <el-container v-loading="loading" element-loading-text="拼命加载中">
  <div id="devicePosition" style="width:100vw; height: 91vh">
    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
        <el-aside width="300px" style="background-color: #ffffff">
          <div style="text-align: center;padding-top: 20px;">设备列表</div>
          <el-menu  v-loading="loading">
            <el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
              <template slot="title" >
                <i class="el-icon-location-outline"></i>
                {{device.name}}
              </template>
              <ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
            </el-submenu>
          </el-menu>
        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
        </el-aside>
          <el-container>
            <!-- <LivePlay></LivePlay> -->
            <el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
        <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
              分屏:
              <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
              <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
              <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
            </el-header>
            <el-main>
              <div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;">
        <el-main style="padding: 0;">
          <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 :ref="'player'+i" :videoUrl="videoUrl[i-1]"  fluent autoplay :height="true"
                          :idx="'player'+i" @screenshot="shot" @destroy="destroy"></player>
                  <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]"  :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
              <player ref="player" v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot"
                      @destroy="destroy"/>
                </div>
              </div>
            </el-main>
          </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import uiHeader from "./UiHeader.vue";
  import player from './jessibuca.vue'
  import ChannelTree from './channelTree.vue'
import uiHeader from "../layout/UiHeader.vue";
import player from './common/jessibuca.vue'
import DeviceTree from './common/DeviceTree.vue'

  export default {
    name: "live",
    components: {
      uiHeader, player, ChannelTree
    uiHeader, player, DeviceTree
    },
    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(){
@@ -93,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:{
@@ -127,33 +103,17 @@
      clearTimeout(this.updateLooper);
    },
    methods: {
      initData: function () {
        this.getDeviceList();

      },
      destroy(idx) {
        console.log(idx);
        this.clear(idx.substring(idx.length-1))
      },
      getDeviceList: function() {
        let that = this;
        this.$axios({
          method: 'get',
          url:`/api/device/query/devices`,
          params: {
            page: that.currentPage,
            count: that.count
    clickEvent: function (data) {
      if (data.channelId && data.subCount == 0) {
        this.sendDevicePush(data)
          }
        }).then(function (res) {
          console.log(res.data.list);
          that.total = res.data.total;
    },
    contextMenuEvent: function (data) {

          that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}});
          that.getDeviceListLoading = false;
        }).catch(function (error) {
          console.log(error);
          that.getDeviceListLoading = false;
        });
      },
      //通知设备上传媒体流
      sendDevicePush: function (itemData) {
@@ -201,13 +161,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})
@@ -245,17 +198,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>
@@ -264,16 +206,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;
@@ -351,6 +297,7 @@
  .baidumap > .BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap > .anchorBL {
    display: none !important;
  }