增加logi 数据服务

src/App.vue

@@ -14,31 +14,25 @@
   </n-config-provider>
 </template>
 <script setup lang='ts'>
-import { computed, provide, watch } from 'vue'
-import { listen } from '@tauri-apps/api/event'
-import { invoke } from '@tauri-apps/api/core'
+import {
+  computed, onMounted, provide, watch
+} from 'vue'
 import { zhCN, dateZhCN } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import Theme from '@/assets/naive-theme'
 import loading from '@/components/loading.vue'
 import MqttService from '@/services/mqtt.service'
 import GlobalNotif from '@/components/notifaiction.vue'
-import useStore from './store/index'
+import useStore from '@/store/index'
+import LogiService from '@/services/logi.service'
 
 const mqtt = new MqttService()
+const logi = new LogiService()
 const store = useStore()
 const router = useRouter()
 const themeOverrides = Theme
 const show = computed(() => store.loading)
 
-invoke('start_reading_data').then(() => {
-  listen('g923-data', (event) => {
-    console.log('解析后的 G923 数据:', event)
-  })
-}).catch((er) => {
-  window.$notification.error({ title: er, duration: 3000 })
-})
-
 watch(() => store.mqtt_message, (val) => {
   if (val.type === 'MqttConnect') {
     store.setLoading(true)
@@ -47,6 +41,7 @@ watch(() => store.mqtt_message, (val) => {
   if (val.type === 'WebRtcConnected') {
     store.setLoading(false)
     store.setRtcConnected(true)
+    logi.init()
   }
   // mqtt ERROR
   if (store.errorDic[val.type]) {

src/pages/room/component/battery.vue

@@ -18,11 +18,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  value: number
-}>(), {
-  value: 0
-})
+const props = withDefaults(defineProps<{ value: number }>(), { value: 0 })
 const bgClass = computed(() => {
   if (props.value >= 50) {
     return 'success'

src/pages/room/component/signal.vue

@@ -13,11 +13,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = withDefaults(defineProps<{
-  value: number
-}>(), {
-  value: 0
-})
+const props = withDefaults(defineProps<{ value: number }>(), { value: 0 })
 
 const list = ref([
   {

src/pages/room/component/steering.vue

@@ -2,33 +2,16 @@
   <Icon
     name="stree"
     :size="20"
-    :color="show && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
+    :color="value && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
     style="margin-left: 7px;"
   />
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import useStore from '@/store'
 
-const emit = defineEmits<{(evt: 'callBack', value: Any): void }>()
+withDefaults(defineProps<{ value: number }>(), { value: 0 })
 const store = useStore()
 const rtcConnected = computed(() => store.rtcConnected)
-const show = ref(false)
-
-function parseG923Data(data) {
-  // 假设数据是一个数组，例如 [128, 255, 0, 0, ...]
-  const buffer = new Uint8Array(data)
-
-  // 解析转向值（假设存储在 buffer[0] 和 buffer[1] 中，小端序）
-  const steeringValue = (buffer[1] << 8) | buffer[0]
-
-  // 解析刹车值（假设存储在 buffer[2] 中）
-  const brakeValue = buffer[2]
-
-  return {
-    steering: steeringValue,
-    brake: brakeValue
-  }
-}
 
 </script>

src/pages/room/index.vue

@@ -46,15 +46,7 @@ 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: '方向盘',
-    component: defineAsyncComponent(() => import('./component/steering.vue')),
-    callBack: (gamepad) => {
-      const { axes, buttons } = gamepad
-      console.log('方向盘', axes)
-      console.log('方向盘按钮', buttons)
-    }
-  },
+  { name: '方向盘', vlaue: 0, component: defineAsyncComponent(() => import('./component/steering.vue')) },
   {
     name: '静音',
     component: defineAsyncComponent(() => import('./component/audio.vue')),
@@ -81,6 +73,10 @@ watch(() => store.mqtt_message, async (value: { type: string, data?: RTCSessionD
   if (type === 'answer') {
     mqtt.send(value)
   }
+  // 控制数据
+  if (type === 'control') {
+    console.log('发送控制数据')
+  }
 })
 
 onMounted(() => RTC.initRTC(remoteVideo.value))

src/services/logi.service.ts

@@ -0,0 +1,35 @@
+import { listen } from '@tauri-apps/api/event'
+import { invoke } from '@tauri-apps/api/core'
+import useStore from '@/store'
+
+export default class LogiService {
+  private store = useStore()
+
+  init() {
+    invoke('start_reading_data').then(() => {
+      listen('g923-data', (event: { payload: string }) => {
+        console.log(' G923 数据:', event)
+        const data = this.parseG923Data(event.payload)
+        this.store.setMqttMessage({ type: 'control', data })
+      })
+    }).catch((er) => {
+      window.$notification.error({ title: er, duration: 3000 })
+    })
+  }
+
+  parseG923Data(data) {
+    // 假设数据是一个数组，例如 [128, 255, 0, 0, ...]
+    const buffer = new Uint8Array(JSON.parse(data))
+    console.log('buff长度', buffer.length)
+    // 解析转向值（假设存储在 buffer[0] 和 buffer[1] 中，小端序）
+    const steeringValue = (buffer[1] << 8) | buffer[0]
+
+    // 解析刹车值（假设存储在 buffer[2] 中）
+    const brakeValue = buffer[2]
+
+    return {
+      steering: steeringValue,
+      brake: brakeValue
+    }
+  }
+}

src/services/webrtc.service.ts

@@ -63,7 +63,6 @@ export default class WebRtcService {
         // ICE连接成功
         if (state === 'connected') {
           this.store.setMqttMessage({ type: 'WebRtcConnected', data: null })
-          DOM.play()
         }
       }