live页面适配palyer组件的修改

web_src/src/components/live.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="devicePosition" style="width:100vw; height: 91vh">
-    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中" >
+    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
       <el-aside width="300px" style="background-color: #ffffff">
-        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
+        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
       </el-aside>
       <el-container>
         <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
@@ -17,9 +17,8 @@
                  :style="liveStyle" :class="{redborder: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"
-                      :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
+              <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"/>
             </div>
           </div>
         </el-main>
@@ -29,11 +28,11 @@
 </template>
 
 <script>
-  import uiHeader from "../layout/UiHeader.vue";
-  import player from './common/jessibuca.vue'
-  import DeviceTree from './common/DeviceTree.vue'
+import uiHeader from "../layout/UiHeader.vue";
+import player from './common/jessibuca.vue'
+import DeviceTree from './common/DeviceTree.vue'
 
-  export default {
+export default {
   name: "live",
   components: {
     uiHeader, player, DeviceTree
@@ -42,69 +41,69 @@
     return {
       showVideoDialog: true,
       hasAudio: false,
-        videoUrl:[''],
-        spilt:1,//分屏
-        playerIdx:0,//激活播放器
+      videoUrl: [''],
+      spilt: 1,//分屏
+      playerIdx: 0,//激活播放器
 
       deviceList: [], //设备列表
       currentDevice: {}, //当前操作设备对象
 
       videoComponentList: [],
       updateLooper: 0, //数据刷新轮训标志
-        currentDeviceChannelsLenth:0,
+      currentDeviceChannelsLenth: 0,
       winHeight: window.innerHeight - 200,
-        currentPage:1,
-        count:15,
-        total:0,
+      currentPage: 1,
+      count: 15,
+      total: 0,
       getDeviceListLoading: false,
 
       //channel
       searchSrt: "",
       channelType: "",
       online: "",
-        channelTotal:0,
-        deviceChannelList:[],
-        loading:false
+      channelTotal: 0,
+      deviceChannelList: [],
+      loading: false
     };
   },
   mounted() {
 
   },
-    created(){
+  created() {
     this.checkPlayByParam()
   },
 
-    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%'}
+  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%'}
       }
     }
   },
-    watch:{
-      spilt(newValue){
-        console.log("切换画幅;"+newValue)
+  watch: {
+    spilt(newValue) {
+      console.log("切换画幅;" + newValue)
       let that = this
       for (let i = 1; i <= newValue; i++) {
-          if(!that.$refs['player'+i]){
+        if (!that.$refs['player' + i]) {
           continue
         }
-          this.$nextTick(()=>{
-            if(that.$refs['player'+i] instanceof Array){
-              that.$refs['player'+i][0].resize()
-            }else {
-              that.$refs['player'+i].resize()
+        this.$nextTick(() => {
+          if (that.$refs['player' + i] instanceof Array) {
+            that.$refs['player' + i][0].resize()
+          } else {
+            that.$refs['player' + i].resize()
           }
         })
 
       }
-        window.localStorage.setItem('split',newValue)
+      window.localStorage.setItem('split', newValue)
     },
-      '$route.fullPath':'checkPlayByParam'
+    '$route.fullPath': 'checkPlayByParam'
   },
   destroyed() {
     clearTimeout(this.updateLooper);
@@ -112,7 +111,7 @@
   methods: {
     destroy(idx) {
       console.log(idx);
-        this.clear(idx.substring(idx.length-1))
+      this.clear(idx.substring(idx.length - 1))
     },
     clickEvent: function (data) {
       if (data.channelId && data.subCount == 0) {
@@ -124,7 +123,7 @@
     },
     //通知设备上传媒体流
     sendDevicePush: function (itemData) {
-        if(itemData.status===0){
+      if (itemData.status === 0) {
         this.$message.error('设备离线!');
         return
       }
@@ -132,7 +131,7 @@
       let deviceId = itemData.deviceId;
       // this.isLoging = true;
       let channelId = itemData.channelId;
-        console.log("通知设备推流1：" + deviceId + " : " + channelId );
+      console.log("通知设备推流1：" + deviceId + " : " + channelId);
       let idxTmp = this.playerIdx
       let that = this;
       this.loading = true
@@ -145,27 +144,27 @@
         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)
-          }else {
+          that.setPlayUrl(res.data.data.ws_flv, idxTmp)
+        } else {
           that.$message.error(res.data.msg);
         }
       }).catch(function (e) {
-        }).finally(()=>{
+      }).finally(() => {
         that.loading = false
       });
     },
-      setPlayUrl(url,idx){
-        this.$set(this.videoUrl,idx,url)
+    setPlayUrl(url, idx) {
+      this.$set(this.videoUrl, idx, url)
       let _this = this
-        setTimeout(()=>{
-          window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))
-        },100)
+      setTimeout(() => {
+        window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
+      }, 100)
 
     },
-      checkPlayByParam(){
-        let {deviceId,channelId} = this.$route.query
-        if(deviceId && channelId){
-          this.sendDevicePush({deviceId,channelId})
+    checkPlayByParam() {
+      let {deviceId, channelId} = this.$route.query
+      if (deviceId && channelId) {
+        this.sendDevicePush({deviceId, channelId})
       }
     },
     convertImageToCanvas(image) {
@@ -175,16 +174,16 @@
       canvas.getContext("2d").drawImage(image, 0, 0);
       return canvas;
     },
-      shot(e){
+    shot(e) {
       // console.log(e)
       // send({code:'image',data:e})
-        var base64ToBlob = function(code) {
+      var base64ToBlob = function (code) {
         let parts = code.split(';base64,');
         let contentType = parts[0].split(':')[1];
         let raw = window.atob(parts[1]);
         let rawLength = raw.length;
         let uInt8Array = new Uint8Array(rawLength);
-          for(let i = 0; i < rawLength; ++i) {
+        for (let i = 0; i < rawLength; ++i) {
           uInt8Array[i] = raw.charCodeAt(i);
         }
         return new Blob([uInt8Array], {
@@ -199,72 +198,76 @@
       aLink.href = URL.createObjectURL(blob);
       aLink.click();
     },
-      save(item){
+    save(item) {
       let dataStr = window.localStorage.getItem('playData') || '[]'
       let data = JSON.parse(dataStr);
       data[this.playerIdx] = item
-        window.localStorage.setItem('playData',JSON.stringify(data))
+      window.localStorage.setItem('playData', JSON.stringify(data))
     },
     clear(idx) {
       let dataStr = window.localStorage.getItem('playData') || '[]'
       let data = JSON.parse(dataStr);
-        data[idx-1] = null;
+      data[idx - 1] = null;
       console.log(data);
-        window.localStorage.setItem('playData',JSON.stringify(data))
+      window.localStorage.setItem('playData', JSON.stringify(data))
     },
-      loadAndPlay(){
+    loadAndPlay() {
       let dataStr = window.localStorage.getItem('playData') || '[]'
       let data = JSON.parse(dataStr);
 
-        data.forEach((item,i)=>{
-          if(item){
+      data.forEach((item, i) => {
+        if (item) {
           this.playerIdx = i
           this.sendDevicePush(item)
         }
       })
     }
   }
-  };
+};
 </script>
 <style>
-  .btn{
+.btn {
   margin: 0 10px;
 
-  }
-  .btn:hover{
+}
+
+.btn:hover {
   color: #409EFF;
-  }
-  .btn.active{
+}
+
+.btn.active {
   color: #409EFF;
 
-  }
-  .redborder{
+}
+
+.redborder {
   border: 2px solid red !important;
-  }
-  .play-box{
+}
+
+.play-box {
   background-color: #000000;
   border: 2px solid #505050;
   display: flex;
   align-items: center;
   justify-content: center;
-  }
+}
 </style>
 <style>
-  .videoList {
+.videoList {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  }
+}
 
-  .video-item {
+.video-item {
   position: relative;
   width: 15rem;
   height: 10rem;
   margin-right: 1rem;
   background-color: #000000;
-  }
+}
 
-  .video-item-img {
+.video-item-img {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -273,9 +276,9 @@
   margin: auto;
   width: 100%;
   height: 100%;
-  }
+}
 
-  .video-item-img:after {
+.video-item-img:after {
   content: "";
   display: inline-block;
   position: absolute;
@@ -290,9 +293,9 @@
   background-image: url("../assets/loading.png");
   background-size: cover;
   background-color: #000000;
-  }
+}
 
-  .video-item-title {
+.video-item-title {
   position: absolute;
   bottom: 0;
   color: #000000;
@@ -300,9 +303,9 @@
   line-height: 1.5rem;
   padding: 0.3rem;
   width: 14.4rem;
-  }
+}
 
-  .baidumap {
+.baidumap {
   width: 100%;
   height: 100%;
   border: none;
@@ -312,13 +315,14 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  }
+}
 
-  /* 去除百度地图版权那行字 和 百度logo */
-  .baidumap > .BMap_cpyCtrl {
+/* 去除百度地图版权那行字 和 百度logo */
+.baidumap > .BMap_cpyCtrl {
   display: none !important;
-  }
-  .baidumap > .anchorBL {
+}
+
+.baidumap > .anchorBL {
   display: none !important;
-  }
+}
 </style>