大屏视频对接

src/views/page/largeScreen.vue

@@ -99,8 +99,8 @@
             <div class="swiper-container mySwiper_video" >
               <div class="swiper-wrapper">
                 <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
-                  <div class="monitor" ref="monitor" id="monitor">
-                    <div ref="videoPlayer" class="video-js" id="video-js"></div>
+                  <div class="monitor"  :id="'monitor'+item.number">
+                    <div ref="videoPlayer" class="video-js" :id="'video-js'+item.number"></div>
                   </div>
                   <div class="c_bottom">{{ item.deviceTypeName }}</div>
                 </div>
@@ -335,12 +335,12 @@ export default {
     },
 
     // 获取摄像头得地址 Copy
-    getVideoData(cameraid, channelid) {
+    getVideoData(cameraid, channelid,index) {
       this.api.camera_gethls(cameraid, channelid).then(res => {
         // console.log('获取摄像头得地址 Copy',res);
         if (res.data.code == 200) {
           // this.url = res.data.data.ezopen 
-          // this.createVideoNew(res.data.data.accessToken)
+          this.createVideoNew(res.data.data.accesstoken,res.data.data.ezopen,index )
           // this.createVideo()
         }
       })
@@ -351,10 +351,11 @@ export default {
 
       this.api.sel_eqbyid(userId).then(res => {
         // console.log('根据用户id查询对应的设备数据 Copy',res);
-        res.data.data.forEach(item => {
-          if (item.equipmentName == 10 && item.cameraSerialNumber != null) {
-            this.get_sel_eqbyid_list.push(item)
-            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber)
+        res.data.data.forEach((item,index) => {
+          if ( item.cameraSerialNumber != null) {
+            this.get_sel_eqbyid_list.push({...item,number:index})
+
+            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber,index)
             // this.getVideoData("L18357958", "5")
           }
         })
@@ -393,14 +394,15 @@ export default {
       this.get_sel_eqbyid(userInfo.userid)
     },
 
-    createVideoNew(accessToken) {
+    createVideoNew(accessToken,url,index) {
+      console.log(accessToken,url,index,111);
       // divW和divH是获取了父级宽高 使播放容器能铺满div
-      let divW = this.$refs.monitor.clientWidth
-      let divH = this.$refs.monitor.clientHeight
+      let divW = document.getElementById('monitor'+index).clientWidth
+      let divH = document.getElementById('monitor'+index).clientHeight
       this.player = new EZUIKit.EZUIKitPlayer({
-        id: 'video-js', // 视频容器ID
+        id: 'video-js'+index, // 视频容器ID
         accessToken: accessToken,
-        url: this.url,
+        url: url,
         // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
         // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
         template: 'security',