解决同一页面多个通道播放时bug

仓库详情页面关闭时，恢复首页原视频播放

src/views/components/housecamer.vue

@@ -30,12 +30,12 @@
             <div class="right">
                 <div class="top">
                   <span class="housename">{{ selectHouse.name }}</span>
-                  <span class="iotstat" v-if="selectHouse.smoke==true"><img src="/images/icon_iot_01.png"> 排风正常</span>
+                  <span class="iotstat" v-if="selectHouse.params.smoke==true"><img src="/images/icon_iot_01.png"> 排风正常</span>
                   <span class="iotstat" v-else><img src="/images/icon_iot_01.png"> 排风异常</span>
-                  <span class="iotstat" v-if="selectHouse.exhaust==true"><img src="/images/icon_iot_02.png"> 烟感正常</span>
+                  <span class="iotstat" v-if="selectHouse.params.exhaust==true"><img src="/images/icon_iot_02.png"> 烟感正常</span>
                   <span class="iotstat" v-else><img src="/images/icon_iot_02.png"> 烟感异常</span>
                   <span class="countstat alarm_list">
-                    <span class="alarm_list_item" v-for="item in alarm_curr"><img :src="alarm_type[item.code].icon"/><span>{{ alarm_type[item.code].name }}</span><span class="alarm_item_brager" :style="{'background-color':alarm_type[item.code].bg}">{{ item.value }}</span></span>
+                    <span class="alarm_list_item" v-for="item in alarm_curr"  @click="showFLowDlg(item)"><img :src="alarm_type[item.code].icon"/><span>{{ alarm_type[item.code].name }}</span><span class="alarm_item_brager" :style="{'background-color':alarm_type[item.code].bg}">{{ item.value }}</span></span>
                   </span>
                   <span class="videocount">
                     <span :class="videocount_type=='4' ?'videocount_item active':'videocount_item'">四分屏</span>
@@ -45,9 +45,9 @@
                 </div>
                 <div class="middle">
                   <div v-for="item in video_list" :class="item.contrlset ? 'video contrlset type'+videocount_type : 'video type'+videocount_type" @click="videocontrl(item)">
-                    <div class="video-title"><img src="/images/ico-video.png"><span>{{ item.name }}</span><span style="float: right;margin-right: 42px;">{{ item.statedesc }}</span></div>
+                    <div class="video-title"><img src="/images/ico-video.png"><span :title="item.channelId">{{ item.name }}</span><span style="float: right;margin-right: 42px;">{{ item.statedesc }}</span></div>
                     <div class="video-play">
-                      <Player :ref="(el)=>handleSetTempMap(el,item)"/>
+                      <Player :channelId="item.channelId" :ref="(el)=>handleSetTempMap(el,item)"/>
                     </div>
                     <div class="cloudset" v-if="item.contrlset==true">
                       <div><span class="close" @click.stop="closeCloudset(item)" style="top:2px"></span></div>
@@ -72,6 +72,31 @@
                 </div>
             </div>
         </div>
+        <el-dialog title="仓库流程列表" v-model="open" width="1024px" append-to-body>
+          <el-table v-loading="loading" :data="fcList" height="460px">
+            <el-table-column label="发起时间" align="center" prop="createTime" />
+            <el-table-column label="流程名称" align="center" prop="flowsName" />
+            <el-table-column label="仓库名称标识" align="center" show-overflow-tooltip prop="house" width="150px"/>
+            <el-table-column label="区域/位置标识" align="center" show-overflow-tooltip prop="area"  width="150px"/>
+            <el-table-column label="状态" align="center" prop="status" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-button link type="primary" @click="handleJump(scope.row.journeyUrl)" >详情</el-button>
+              </template>
+            </el-table-column>
+          </el-table>     
+          <pagination
+            :total="total"
+            v-model:page="queryParams.page"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getFcList"
+          />
+          <template #footer>
+            <div class="dialog-footer"> 
+              <el-button @click="open=false">关 闭</el-button>
+            </div>
+          </template>
+        </el-dialog>
     </div>
 </template>
 <script setup>
@@ -119,6 +144,16 @@ const typeMapping={
   "189":"person",
   "191":"temp"  
 }
+const open=ref(false);
+const fcList = ref([]);
+const loading = ref(false);
+const queryParams=ref({
+    page: 1,
+    pageSize: 10,
+    flowid:0,
+    houseid:0,
+});
+const total = ref(0);
 const alarm_list = ref([{
   code:"none",
   count:0
@@ -146,6 +181,7 @@ const load=(hostlist, houseinfo,v_alarm_type)=>{
         if(element.code==houseinfo.value.code){
             houselist.value[index]["active"] = true;
             selectHouse.value = element;
+            queryParams.value.houseid = element.houseId;
         }else{
           houselist.value[index]["active"] = false;
         }
@@ -267,19 +303,23 @@ const switchFlow=(key)=> {
   currFlowType.value = key;
   loadEchars03();
 }
+// 注册父组件事件
+const emits = defineEmits(['call-parent-closed']);
 const closeDlg=() =>{
     //销毁资源
     for(let k in tempPlayerRefs.value){
       tempPlayerRefs.value[k].destroy();
     }
+    emits('call-parent-closed'); // 触发并通知父组件
     showHouse.value = false;
 }
 const selectedHouse=(item)=>{
     selectHouse.value = item;
+    queryParams.value.houseid = item.houseId;
     for (let index = 0; index < houselist.value.length; index++) {
         const element = houselist.value[index];
         if(element.code==item.code){
-            houselist.value[index]["active"] = true;
+            houselist.value[index]["active"] = true;            
         }else{
             houselist.value[index]["active"] = false;
         }
@@ -445,19 +485,19 @@ const initvideodata=()=>{
   for (let index = 0; index < Math.min(videocount_type.value*1,channelIdList.value.length); index++) {
     let ele = channelIdList.value[index];
     let video_url = window.VideoServerUrl+"/flv/"+ele.deviceCode+"/"+ele.channelId;
-    tmp.push({name:ele.channelName,code:ele.deviceCode,contrlset:false,state:ele.status,statedesc:ele.status=='ON'?'在线':'离线',url:video_url});
+    tmp.push({name:ele.channelName,channelId:ele.channelId,code:ele.deviceCode,contrlset:false,state:ele.status,statedesc:ele.status=='ON'?'在线':'离线',url:video_url});
   }
   video_list.value = tmp;
-  setTimeout(() => {
-    for(let i=0;i<tmp.length;i++){
-      tempPlayerRefs.value[tmp[i].code].play(tmp[i].url);
-    }
-  }, 200);
+  for(let i=0;i<tmp.length;i++){
+    setTimeout((ind) => {
+        tempPlayerRefs.value[ind.channelId].play(ind.url);     
+    }, 1000,tmp[i]);
+  }
 }
 // 动态设置 ref 的函数
 const handleSetTempMap = (el, item) => {
   if (el) {
-  tempPlayerRefs.value[item.code] = el;
+  tempPlayerRefs.value[item.channelId] = el;
   }
 };
 const videocontrl=(item)=>{
@@ -525,6 +565,31 @@ const ccParamsSet=(type,value)=>{
     tempPlayerRefs.value[selectHouse.value.code].volumeChange(cc_params4.value);
   }
 }
+
+const showFLowDlg=(flow)=>{
+  if(flow.id==0) return;
+  open.value=true;
+  queryParams.value.page = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.flowid = flow.id;
+  getFcList();
+}
+const getFcList=()=>{
+  loading.value = true;
+  fcList.value=[];
+  request({
+            url: '/index/flows/'+queryParams.value.flowid+"/"+queryParams.value.houseid+"?pageNum="+queryParams.value.page+"&pageSize="+queryParams.value.pageSize,
+            method: 'get',
+            data: null
+  }).then(res=>{
+    loading.value = false;
+    fcList.value = res.rows;
+    total.value = res.total;
+  })  
+}
+const handleJump=(url)=>{
+  window.open(url,"_blank")
+}
 onMounted(() => {
 
 })

src/views/components/player.vue

@@ -27,7 +27,7 @@
           /><span>webcodecs</span>
   
         </div>
-        <div id="container" ref="container"></div>
+        <div :id="'container_'+playerContainerId" :ref="'container_'+playerContainerId"></div>
         <div class="input" v-show="false">
           <div>输入URL：</div>
           <input
@@ -108,7 +108,12 @@
   
   export default {
     name: "DemoPlayer",
-    props: {},
+    props: {
+      channelId:{ 
+        type:String,
+        default:new Date().getTime()+'',
+      },
+    },
     data() {
       return {
         jessibuca: null,
@@ -130,9 +135,20 @@
         useOffscreen: false,
         recording: false,
         recordType: 'webm',
-        scale: 0
+        scale: 0,
       };
     },
+    computed:{
+      playerContainerId(){
+        //全局ID
+        if(window.playerid==null){
+          window.playerid = new Date().getTime()
+        }else{
+          window.playerid = window.playerid+1;
+        }
+        return window.playerid;        
+      }
+    },
     mounted() {
       this.create();
       window.onerror = (msg) => (this.err = msg);
@@ -149,7 +165,7 @@
         this.jessibuca = new window.Jessibuca(
             Object.assign(
                 {
-                  container: this.$refs.container,
+                  container: document.getElementById("container_"+this.playerContainerId), // this.$refs.container,
                   videoBuffer: Number(this.$refs.buffer.value), // 缓存时长
                   isResize: false,
                   useWCS: this.useWCS,
@@ -226,10 +242,16 @@
   
         this.jessibuca.on("error", function (error) {
           console.log("error", error);
+          if (_this.jessibuca) {
+            _this.jessibuca.destroy();
+          }
         });
   
         this.jessibuca.on("timeout", function () {
           console.log("timeout");
+          if (_this.jessibuca) {
+            _this.jessibuca.destroy();
+          }
         });
   
         this.jessibuca.on('start', function () {

src/views/index.vue

@@ -39,7 +39,7 @@
           <Player ref="playercontainer"/>
         </div>
       </div>
-      <house ref="houseComp" />
+      <house ref="houseComp" @call-parent-closed="houseDetailClosed"/>
     </div>
     <el-dialog title="流程列表" v-model="open" width="1024px" append-to-body>
       <el-table v-loading="loading" :data="fcList" height="460px">
@@ -157,6 +157,10 @@ const inHouse=()=>{
   }
   houseComp.value.load(houselist.value,currentHouse,alarm_type.value);
 }
+const houseDetailClosed=()=>{
+  //恢复2播放
+  playercontainer.value.play(currentHouse.value.video_url);
+}
 
 const switchFlow=(key)=> {
   currFlowType.value = key;