优化 点击云机列表可以切换云机

pages/rtcEngine/components/CloudGroupDropdown.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="group-dropdown pt-2 pb-2">
     <!-- 设备分组下拉 -->
-    <Dropdown key="deviceList" v-model="activeGroup" :isActvie="true" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :list="groupList" :prop="{value: 'id'}" :dropdownMenuStyle="{ left: '0', top: '30px' }" :activeStyle="activeStyle">
+    <Dropdown key="deviceList" v-model="activeGroup" :isActvie="true" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :list="groupList" :prop="{value: 'id'}" :dropdownMenuStyle="{ left: '0', top: '40px' }" :activeStyle="activeStyle">
       <!-- 触发下拉 -->
       <div class="menu-trigger"><div class="device-trigger-ex">{{ groupList.find(g => g.id === activeGroup).label }}</div><van-icon class="icon-arrow rotate-down" name="play" color="#fff" size="10" /></div>
     </Dropdown>
 
     <!-- 清晰度下拉 -->
-    <Dropdown key="definition" ref="definitionDropdown" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :dropdownMenuStyle="{ left: '0', top: '30px' }">
+    <Dropdown key="definition" ref="definitionDropdown" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :dropdownMenuStyle="{ left: '0', top: '40px' }">
       <!-- 触发下拉 -->
       <div class="menu-trigger">
         <div class="definition-trigger-ex">

pages/rtcEngine/rtc.vue

@@ -180,9 +180,10 @@ export default {
       connectData: {},
       // 云手机引擎 播放器实例
       engine: {},
+      // webRtc网络分析数据
       rtcNetwork: {
         currentRoundTripTime: 0, // 当前往返时间(网络延迟)
-      }, // webRtc网络分析数据
+      },
       doConnectDirectivesWs: null, // 云手机指令通道
       doConnectDirectivesIntervalerPing: null, // 业务通道定时标识 云手机指令通道心跳
       doConnectDirectivesRequestNum: 1, // 业务通道重连次数
@@ -204,9 +205,16 @@ export default {
     this.activeCloud = this.cloudList.find(item => item.userCardId === +this.parametersData.userCardId);
 
     // 获取所有云机套餐信息
-    this.getMealIconInfo();
+    await this.getMealIconInfo();
     // 获取云机分组
-    this.getCloudGroupId();
+    await this.getCloudGroupId();
+
+    if(this.sdkLoadStatus === 'success') {
+      // 开始运行程序
+      this.start(this.activeCloud);
+    }else {
+      console.log('SDK加载失败');
+    }
   },
   computed: {
     // 是否为微信浏览器环境
@@ -215,11 +223,6 @@ export default {
     },
   },
   created() {
-    this.$toast.loading({
-        duration: 0, // 持续展示 toast
-        message: `设备(${this.activeCloud.userCardId})正在获取...`,
-    });
-
     // 设置html标签的背景为黑色
     document.body.style.background = '#000';
 
@@ -227,21 +230,8 @@ export default {
     window.$_script_loadHandler = async ()=> {
       console.log('$_script_loadHandler: SDK加载成功');
       this.sdkLoadStatus = 'success';
-
-      // 初始化日志上报
-      this.initLogReport();
-
-      // 调用接口获取卡连接数据
-      const cardData = await this.getConnectData(this.parametersData);
-      
-      // 判断卡的连接方式
-      const connectData = await this.judgeConnectType(cardData);
-
-      // 保存卡连接信息
-      this.connectData = connectData;
-
-      this.initWebRtc();
     };
+
     window.$_script_errHandler = ()=> {
       console.log('SDK加载失败');
       this.sdkLoadStatus = 'error';
@@ -544,7 +534,7 @@ export default {
           isMuted: false, // 是否静音
           isAllowedOpenCamera: true, // 是否允许打开摄像头
           sendFollow: true, // 是否允许主控转发文本到实例
-          callback: (event)=> {}
+          callback: (event)=> {console.log('webRTC回调', event);}
         };
 
         // 设置日志参数 推流质量 
@@ -572,6 +562,9 @@ export default {
       engine.on('CONNECT_SUCCESS', (r) => {
         console.log("webrtc连接成功====★★★★★", r);
         if (r.code === 1005) { // 1005: 拉流鉴权成功
+          // 清除loading
+          this.$toast.clear();
+
           // 设置日志 推流状态为成功
           let now = new Date();
           this.logReportObj.setParams({plugFowStatus: 1, linkWay: 1, timeConsuming: now.getTime() - this.logReportObj.timeStartTime, linkEndTime: this.logReportObj.formatDate(now)});
@@ -595,6 +588,7 @@ export default {
       
       // 网络连接统计信息监听
       engine.on('NETWORK_STATS', (r) => {
+        console.log("webrtc网络连接统计信息监听====★★★★★", r);
         this.rtcNetwork = r;
       });
 
@@ -653,9 +647,6 @@ export default {
           // 日志上报
           this.logReportObj.collectLog( `消息: 业务通道连接成功` );
 
-          // 清除loading
-          this.$toast.clear();
-
           // 重置重连次数
           this.doConnectDirectivesRequestNum = 1;
 
@@ -764,6 +755,25 @@ export default {
       try {
         // 保存当前云机数据
         this.activeCloud = cloudData;
+
+        // 重置相关数据
+        // 关闭日志上报
+        this.logReportObj.destroy();
+        // 关闭webRTC
+        this.engine.disconnect && this.engine.disconnect();
+        // 关闭业务指令通道
+        this.doConnectDirectivesWs && this.doConnectDirectivesWs.close();
+        // 重置重连次数
+        this.doConnectDirectivesRequestNum = 1;
+        // 重置 end
+
+
+        if(this.sdkLoadStatus === 'success') {
+          // 开始运行程序
+          this.start(cloudData);
+        }else {
+          console.log('SDK加载失败');
+        }
       } catch (error) {
         console.log('changeCloud error', error);
       }
@@ -836,6 +846,32 @@ export default {
         this.logReportObj.setParams({ clientType: Object.keys(res)[0] });
       })
     },
+    // 开始运行程序
+    async start(activeCloud) {
+      try {
+        this.$toast.loading({
+          className: 'rtc-loading',
+          duration: 0, // 持续展示 toast
+          message: `设备(${activeCloud.userCardId})正在获取...`,
+        });
+
+        // 初始化日志上报
+        this.initLogReport();
+
+        // 调用接口获取卡连接数据
+        const cardData = await this.getConnectData(this.parametersData);
+        
+        // 判断卡的连接方式
+        const connectData = await this.judgeConnectType(cardData);
+
+        // 保存卡连接信息
+        this.connectData = connectData;
+
+        this.initWebRtc();
+      } catch (error) {
+        console.log('start error', error);
+      }
+    },
   }
 }
 </script>
@@ -897,4 +933,27 @@ $-bg-yellow: rgb(255, 253, 241);
   align-items: center;
   color: #fff;
 }
+
+.rtc-page >>> .van-toast.rtc-loading{
+  white-space: nowrap;
+}
+// 样式穿透的常用方法
+
+// 在SCSS中，样式穿透可以通过以下几种方式实现：
+
+// 使用>>>操作符： 这是一个深度选择器，它可以穿透scoped样式，使得样式可以作用于子组件。在SCSS中，你可以这样写： .parent >>> .child { color: red; } 这段代码会被编译成.parent[data-v-f3f3eg9] .child { color: red; }，从而实现样式穿透。
+
+// 使用/deep/或::v-deep： 这两个操作符是>>>的别名，它们在不同的预处理器中有不同的应用。在SCSS中，你可以使用::v-deep来实现样式穿透： .parent ::v-deep .child { color: red; } 在LESS中，你可以使用/deep/来实现相同的效果： .parent /deep/ .child { color: red; }
+
+// 直接在<style>标签中写入： 如果你不使用预处理器，可以直接在<style>标签中使用>>>操作符： .parent >>> .child { color: red; }
+
+// 注意事项
+
+// 使用样式穿透时，需要注意选择器的具体写法，以确保样式能够正确应用。
+
+// 在不同的预处理器中，样式穿透的写法可能会有所不同。例如，在LESS中使用/deep/，而在SCSS中使用::v-deep。
+
+// 有些预处理器可能无法正确解析>>>操作符，这时可以使用/deep/或::v-deep作为替代。
+
+// 通过上述方法，我们可以在保持样式封装的同时，对第三方组件库中的样式进行定制化修改，实现更加精细的样式控制。
 </style>