优化码表

src/pages/room/component/gauge.vue

@@ -1,108 +1,102 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
-import {
-  onUnmounted,
-  onMounted, ref, watch
-} from 'vue'
+import { EChartsType } from 'echarts'
+import { onUnmounted, onMounted, watch } from 'vue'
+import useStore from '@/store/index'
 
-const props = withDefaults(defineProps<{
-  value: number,
-  gears?: string
-}>(), {
-  value: 0,
-  gears: '前进'
-})
-const chartDom = ref()
-const chart = ref(null as any)
-const option = ref({
-  series: {
-    name: 'Pressure',
-    type: 'gauge',
-    itemStyle: { color: '#FFFFFF' },
-    startAngle: 180,
-    max: 60,
-    endAngle: 0,
-    axisLine: { lineStyle: { width: 1 } },
-    axisTick: {
-      distance: 0,
-      length: 10,
-      lineStyle: { color: '#FFFFFF' }
-    },
-    splitLine: {
-      length: 15,
-      distance: 0,
-      lineStyle: { color: '#FFFFFF' }
-    },
-    axisLabel: {
-      distance: 8,
-      color: '#FFFFFF'
-    },
-    progress: { show: true },
-    radius: '190%',
-    center: [ '50%', '98%' ],
-    detail: {
-      offsetCenter: [ 0, -25 ],
-      valueAnimation: true,
-      formatter: (value: number) => `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${props.gears}}`,
-      rich: {
-        value: {
-          fontSize: 20,
-          fontWeight: 'bolder',
-          color: '#FFFFFF'
-        },
-        unit: {
-          fontSize: 20,
-          color: '#FFFFFF',
-          padding: [ 0, 0, 0, 10 ]
-        },
-        num: {
-          fontSize: 20,
-          color: '#FFFFFF',
-          padding: [ 0, 0, 0, 10 ]
+const store = useStore()
+const chart = {
+  id: 'chartDom',
+  option: {
+    series: {
+      name: 'Pressure',
+      type: 'gauge',
+      itemStyle: { color: '#FFFFFF' },
+      startAngle: 180,
+      max: 60,
+      endAngle: 0,
+      axisLine: { lineStyle: { width: 1 } },
+      axisTick: {
+        distance: 0,
+        length: 10,
+        lineStyle: { color: '#FFFFFF' }
+      },
+      splitLine: {
+        length: 15,
+        distance: 0,
+        lineStyle: { color: '#FFFFFF' }
+      },
+      axisLabel: {
+        distance: 8,
+        color: '#FFFFFF'
+      },
+      progress: { show: true },
+      radius: '190%',
+      center: [ '50%', '98%' ],
+      detail: {
+        offsetCenter: [ 0, -25 ],
+        valueAnimation: true,
+        formatter: (value: number) => `{value|${value.toFixed(0)}}{unit|km/h}\n{num|前进}`,
+        rich: {
+          value: {
+            fontSize: 20,
+            fontWeight: 'bolder',
+            color: '#FFFFFF'
+          },
+          unit: {
+            fontSize: 20,
+            color: '#FFFFFF',
+            padding: [ 0, 0, 0, 10 ]
+          },
+          num: {
+            fontSize: 20,
+            color: '#FFFFFF',
+            padding: [ 0, 0, 0, 10 ]
+          }
         }
-      }
-    },
-    pointer: { show: false },
-    data: [ 0 ]
+      },
+      pointer: { show: false },
+      data: [ 0 ]
+    }
+  },
+  echart: undefined as unknown as EChartsType,
+  callBack() {
+    if (this.echart) {
+      this.echart.setOption(this.option)
+      this.echart.resize()
+    } else {
+      const dom = document.getElementById(this.id)
+      this.echart = echarts.init(dom)
+      this.echart.setOption(this.option)
+      window.addEventListener('resize', () => this.echart?.resize(), false)
+    }
+  },
+  distory() {
+    if (this.echart) this.echart.dispose()
+    window.removeEventListener('resize', () => this.echart?.resize(), false)
+    this.echart = undefined as unknown as EChartsType
   }
-})
-
-function resetChart() {
-  if (!chart.value) return
-  chart.value.resize()
 }
 
-watch(() => props.value, (v: number) => {
-  if (!chart.value) return
-  if (v >= 60) v = 60
-  if (v <= 0) v = 0
-  option.value.series.data[0] = v
-  chart.value.setOption(option.value)
-})
-
-watch(() => props.gears, () => {
-  if (!chart.value) return
-  chart.value.setOption(option.value)
+watch(() => store.mqtt_message, (value: { type: string, data?: { leftPaddle: boolean, rightPaddle: boolean } }) => {
+  const { type, data } = value
+  if (type === 'control') {
+    if (data?.leftPaddle) chart.option.series.data[0] < 0 ? 0 : chart.option.series.data[0]--
+    if (data?.rightPaddle) chart.option.series.data[0] > 60 ? 60 : chart.option.series.data[0]++
+    // this.option.series.detail.formatter = (value: number) => `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${gears ? '前进' : '后退'}}`
+    chart.callBack()
+  }
 })
 
-onMounted(() => {
-  chart.value = echarts.init(chartDom.value)
-  chart.value.setOption(option.value)
-  window.addEventListener('resize', resetChart, false)
-})
+onMounted(() => chart.callBack())
 
-onUnmounted(() => {
-  window.removeEventListener('resize', resetChart, false)
-})
+onUnmounted(() => chart.distory())
 </script>
 <template>
-  <div
-    id="charts"
-    ref="chartDom"
-  />
+  <div id="chartDom" />
 </template>
 <style scoped>
-#charts {
+#chartDom {
   width: 30vw;
   height: 15vw;
   max-width: 460px;

src/pages/room/component/mic.vue

@@ -35,7 +35,7 @@ async function initMic() {
     }
     audio.onstop = () => {
       const blob = new Blob(chunks, { type: 'audio/webm;codecs=opus' })
-      emit('callBack', blob)
+      console.log('发送音频', blob)
     }
   } catch (error: any) {
     console.log('录音错误', error)

src/pages/room/component/steering.vue

@@ -12,7 +12,6 @@ import {
 } from 'vue'
 import useStore from '@/store/index'
 
-const emit = defineEmits<{(evt: 'callBack', value: { leftPaddle: boolean, rightPaddle: boolean }): void }>()
 const store = useStore()
 const rtcConnected = computed(() => store.rtcConnected)
 const status = ref(false)
@@ -37,7 +36,7 @@ watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number
         ...data
       }
     }
-    if (rtcConnected.value) mqtt.send(obj); emit('callBack', obj.data)
+    if (rtcConnected.value) mqtt.send(obj)
   }
 })
 </script>

src/pages/room/index.vue

@@ -17,10 +17,7 @@
       playsinline
     />
     <div class="room-gauge">
-      <Gauge
-        :value="gauge.speed"
-        :gears="gauge.num % 2 ? '倒档' : '前进'"
-      />
+      <Gauge />
     </div>
   </div>
 </template>
@@ -37,31 +34,16 @@ import Gauge from './component/gauge.vue'
 
 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: '信号', 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/steering.vue')) },
   {
     name: '静音',
     component: defineAsyncComponent(() => import('./component/audio.vue')),
     callBack: (mute: boolean) => RTC.muteRemoteAudio(mute)
   },
-  {
-    name: '录音',
-    component: defineAsyncComponent(() => import('./component/mic.vue')),
-    callBack: (blob: Blob) => {
-      console.log('发送对讲', blob)
-    }
-  },
+  { name: '录音', component: defineAsyncComponent(() => import('./component/mic.vue')) },
   { name: '网速', component: defineAsyncComponent(() => import('./component/stats.vue')) }
 ])