修改组件初始化逻辑，增加网速显示

src/App.vue

@@ -25,7 +25,9 @@ import MqttService from '@/services/mqtt.service'
 import GlobalNotif from '@/components/notifaiction.vue'
 import useStore from '@/store/index'
 import LogiService from '@/services/logi.service'
+import WebRtcService from '@/services/webrtc.service'
 
+const RTC = new WebRtcService()
 const mqtt = new MqttService()
 const logi = new LogiService()
 const store = useStore()
@@ -33,17 +35,31 @@ const router = useRouter()
 const themeOverrides = Theme
 const show = computed(() => store.loading)
 
-watch(() => store.mqtt_message, (val) => {
-  if (val.type === 'MqttConnect') {
+watch(() => store.mqtt_message, async (value:{ type: string, data?: RTCSessionDescriptionInit }) => {
+  const { type, data } = value
+
+  if (type === 'MqttConnect') {
     store.setLoading(true)
     router.push('/room')
   }
-  if (val.type === 'WebRtcConnected') {
+
+  if (type === 'WebRtcConnected') {
     store.setLoading(false)
     store.setRtcConnected(true)
   }
+
+  // receive offer
+  if (type === 'offer') {
+    await RTC.Peer?.setRemoteDescription(data!)
+    const answerd = await RTC.Peer?.createAnswer()
+    await RTC.Peer?.setLocalDescription(answerd)
+  }
+
+  // send answer
+  if (type === 'answer') mqtt.send(value)
+
   // mqtt ERROR
-  if (store.errorDic[val.type]) {
+  if (store.errorDic[type]) {
     store.setLoading(false)
     store.setRtcConnected(false)
     mqtt.disconnect()
@@ -54,7 +70,7 @@ watch(() => store.mqtt_message, (val) => {
 onMounted(() => logi.init())
 
 provide('MQTT', mqtt)
-
+provide('RTC', RTC)
 </script>
 <style lang='scss'>
 * {

src/assets/native-plugin.ts

@@ -2,7 +2,6 @@ import {
   create,
   NConfigProvider,
   NNotificationProvider,
-  NNumberAnimation,
   NStatistic,
   NButton
 } from 'naive-ui'
@@ -11,7 +10,6 @@ const naive = create({
   components: [
     NConfigProvider,
     NNotificationProvider,
-    NNumberAnimation,
     NStatistic,
     NButton
   ]

src/pages/room/component/battery.vue

@@ -1,33 +1,36 @@
 <template>
   <div
     class="electric"
-    :class="bgClass"
+    :class="data.class"
   >
     <div class="electric-panel">
       <div
         class="electric-panel-remainder"
-        :style="{ width: value + '%' }"
+        :style="{ width: data.value + '%' }"
       />
     </div>
     <div class="electric-berText">
-      {{ value }}%
+      {{ data.value }}%
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{ value: number }>(), { value: 0 })
-const bgClass = computed(() => {
-  if (props.value >= 50) {
-    return 'success'
-  } if (props.value >= 20) {
-    return 'warning'
-  } if (props.value >= 1) {
-    return 'danger'
-  }
-  return ''
+import { ref, watch } from 'vue'
+import useStore from '@/store/index'
+
+const store = useStore()
+const data = ref({ class: '', value: 0 })
+
+watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number } }) => {
+  //   if (props.value >= 50) {
+//     return 'success'
+//   } if (props.value >= 20) {
+//     return 'warning'
+//   } if (props.value >= 1) {
+//     return 'danger'
+//   }
+//  return ''
 })
 </script>
 

src/pages/room/component/signal.vue

@@ -12,9 +12,9 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import useStore from '@/store/index'
 
-const props = withDefaults(defineProps<{ value: number }>(), { value: 0 })
-
+const store = useStore()
 const list = ref([
   {
     id: 1,
@@ -38,21 +38,22 @@ const list = ref([
   }
 ])
 
-watch(() => props.value, (v: number) => {
-  list.value.forEach((el: { id: number, class: string }) => {
-    if (el.id <= v) {
-      if (v <= 2) {
-        el.class = 'signal-red'
-      } else if (v <= 4) {
-        el.class = 'signal-yellow'
-      } else {
-        el.class = 'signal-green'
-      }
-    } else {
-      el.class = 'signal-default'
-    }
-  })
-}, { immediate: true })
+// watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number } }) => {
+//   const { type, data } = value
+//   // list.value.forEach((el: { id: number, class: string }) => {
+//   //   if (el.id <= v) {
+//   //     if (v <= 2) {
+//   //       el.class = 'signal-red'
+//   //     } else if (v <= 4) {
+//   //       el.class = 'signal-yellow'
+//   //     } else {
+//   //       el.class = 'signal-green'
+//   //     }
+//   //   } else {
+//   //     el.class = 'signal-default'
+//   //   }
+//   // })
+// })
 </script>
 
 <style scoped lang="scss">

src/pages/room/component/stats.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="stats">
     <n-statistic tabular-nums>
-      <n-number-animation
-        ref="numberAnimationInstRef"
-        :from="0"
-        :to="value"
-      />
+      {{ bitrate }}
       <template #suffix>
         kb/s
       </template>
@@ -13,6 +9,14 @@
   </div>
 </template>
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ value: number }>(), { value: 0 })
+import { ref, watch } from 'vue'
+import useStore from '@/store/index'
 
+const store = useStore()
+const bitrate = ref(0)
+
+watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number } }) => {
+  const { type, data } = value
+  if (type === 'WebRtcStats') bitrate.value = data!.bitrate
+})
 </script>

src/pages/room/component/steering.vue

@@ -2,16 +2,42 @@
   <Icon
     name="stree"
     :size="20"
-    :color="value && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
+    :color="status && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
     style="margin-left: 7px;"
   />
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
-import useStore from '@/store'
+import {
+  ref, watch, computed, inject
+} from 'vue'
+import useStore from '@/store/index'
 
-withDefaults(defineProps<{ value: number }>(), { value: 0 })
+const emit = defineEmits<{(evt: 'callBack', value: { leftPaddle: boolean, rightPaddle: boolean }): void }>()
 const store = useStore()
 const rtcConnected = computed(() => store.rtcConnected)
+const status = ref(false)
+const mqtt = inject('MQTT') as Any
 
+watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number } }) => {
+  const { type, data } = value
+  if (type === 'control') {
+    status.value = !!data
+    const obj = {
+      type: 'control',
+      data: {
+        steering: 0, // 方向 -1-1
+        throttle: 0, // 油门 0-1
+        brake: 0, // 刹车 0-1
+        clutch: 0, // 离合 0-1
+        leftPaddle: false, // 左拨挡
+        rightPaddle: false, // 右拨挡
+        buttonR3: false, // R3
+        buttonL3: false, // L3
+        enterKey: false, // 回车键
+        ...data
+      }
+    }
+    if (rtcConnected.value) mqtt.send(obj); emit('callBack', obj.data)
+  }
+})
 </script>

src/pages/room/index.vue

@@ -7,7 +7,6 @@
       >
         <component
           :is="item.component"
-          :value="item.value"
           @callBack="item.callBack"
         />
       </template>
@@ -28,25 +27,29 @@
 
 <script setup lang='ts'>
 import {
-  ref, onMounted, inject, watch,
+  ref, onMounted, inject,
   onUnmounted,
   shallowRef,
   defineAsyncComponent
 } from 'vue'
-import WebRtcService from '@/services/webrtc.service'
 import topBar from '@/components/topBar.vue'
 import Gauge from './component/gauge.vue'
-import useStore from '@/store/index'
 
-const RTC = new WebRtcService()
-const store = useStore()
-const mqtt = inject('MQTT') as Any
+const RTC = inject('RTC') as Any
 const remoteVideo = ref(null as unknown as HTMLVideoElement)
 const gauge = ref({ speed: 0, num: 0 })
 const menuList = shallowRef([
-  { name: '信号', value: 0, component: defineAsyncComponent(() => import('./component/signal.vue')) },
-  { name: '电量', value: 0, component: defineAsyncComponent(() => import('./component/battery.vue')) },
-  { name: '方向盘', vlaue: 0, component: defineAsyncComponent(() => import('./component/steering.vue')) },
+  { name: '信号', component: defineAsyncComponent(() => import('./component/signal.vue')) },
+  { name: '电量', component: defineAsyncComponent(() => import('./component/battery.vue')) },
+  {
+    name: '方向盘',
+    component: defineAsyncComponent(() => import('./component/steering.vue')),
+    callBack: (data: { leftPaddle: boolean; rightPaddle: boolean }) => {
+      console.log('方向盘返回的数据', data)
+      if (data.leftPaddle) gauge.value.num--
+      if (data.rightPaddle) gauge.value.num++
+    }
+  },
   {
     name: '静音',
     component: defineAsyncComponent(() => import('./component/audio.vue')),
@@ -59,45 +62,9 @@ const menuList = shallowRef([
       console.log('发送对讲', blob)
     }
   },
-  { name: '网速', vlaue: 0, component: defineAsyncComponent(() => import('./component/stats.vue')) }
+  { name: '网速', component: defineAsyncComponent(() => import('./component/stats.vue')) }
 ])
 
-watch(() => store.mqtt_message, async (value: { type: string, data?: RTCSessionDescriptionInit }) => {
-  const { type, data } = value
-  // 接收远程offer
-  if (type === 'offer') {
-    await RTC.Peer?.setRemoteDescription(data!)
-    const answerd = await RTC.Peer?.createAnswer()
-    await RTC.Peer?.setLocalDescription(answerd)
-  }
-  // 发送本地answer
-  if (type === 'answer') mqtt.send(value)
-  // 控制数据
-  if (type === 'control') {
-    menuList.value[2].vlaue = data ? 1 : 0
-    const obj = {
-      type: 'control',
-      data: {
-        steering: 0, // 方向 -1-1
-        throttle: 0, // 油门 0-1
-        brake: 0, // 刹车 0-1
-        clutch: 0, // 离合 0-1
-        leftPaddle: false, // 左拨挡
-        rightPaddle: false, // 右拨挡
-        buttonR3: false, // R3
-        buttonL3: false, // L3
-        enterKey: false, // 回车键
-        ...data
-      }
-    }
-    if (obj.data.leftPaddle) gauge.value.num--
-    if (obj.data.rightPaddle) gauge.value.num++
-    if (store.rtcConnected) mqtt.send(obj)
-  }
-  // 网络状态
-  if (type === 'WebRtcStats') menuList.value[5].vlaue = data.bitrate || 0
-})
-
 onMounted(() => RTC.initRTC(remoteVideo.value))
 onUnmounted(() => RTC.distory())
 </script>

src/services/logi.service.ts

@@ -12,7 +12,7 @@ export default class LogiService {
         this.store.setMqttMessage({ type: 'control', data })
       })
     }).catch((er) => {
-      window.$notification.error({ title: er, duration: 2500 })
+      window.$notification.error({ title: er, duration: 1000 })
     })
   }
 

src/services/webrtc.service.ts

@@ -4,7 +4,7 @@ import useStore from '@/store'
  */
 export default class WebRtcService {
   private ICE = [
-    { urls: ['stun:caner.top:3478'] },
+    { urls: [ 'stun:caner.top:3478' ] },
     {
       urls: 'turn:caner.top:3478',
       username: 'admin',