增加信号组件

README.md

@@ -1,6 +1,6 @@
 # 控制端
 ```
- 本版本使用罗技G923方向盘+油门控制器+mqtt+桌面应用进行控制
+ 本版本使用罗技G923方向盘+油门控制器的桌面应用
 ```
 ## runer
 ```

src/App.vue

@@ -5,6 +5,7 @@ import Gauge from '@/components/gauge.vue'
 import Record from '@/components/record.vue'
 import Battery from '@/components/battery.vue'
 import Loading from '@/components/loading.vue'
+import Signal from '@/components/signal.vue'
 
 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
 const iceServers = [
@@ -35,6 +36,7 @@ const conctrlAnimation = ref(0)
 const conctrlGrears = ref(false)
 const conctrlNum = ref(0)
 const SpeedValue = ref(0)
+const signalValue = ref(0)
 
 // 发送控制数据
 function sendContrlData() {
@@ -170,9 +172,13 @@ window.$electron.on('message', async (msg: any) => {
       console.log('电量', msg.power)
       break
     case 'speed':
-      SpeedValue.value = Math.floor(msg.data)
+      SpeedValue.value = Math.floor(msg.speed)
       console.log('速度')
       break
+    case 'signal':
+      signalValue.value = Math.floor(msg.signal)
+      console.log('信号')
+      break
     case 'contrl':
       {
         const db = msg.content
@@ -241,6 +247,8 @@ onUnmounted(() => close())
         />
         <!-- 电量状态 -->
         <Battery :quantity="quantity" />
+
+        <Signal :signal-value="signalValue" />
       </div>
       <div class="marke-right">
         <Icon

src/components/signal.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="signal-box">
+    <ul>
+      <li
+        v-for="(item, idex) in list"
+        :key="idex"
+        :class="item.class"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+    signalValue: number
+}>()
+
+const list = ref([
+  {
+    id: 1,
+    class: 'signal-default'
+  },
+  {
+    id: 2,
+    class: 'signal-default'
+  },
+  {
+    id: 3,
+    class: 'signal-default'
+  },
+  {
+    id: 4,
+    class: 'signal-default'
+  },
+  {
+    id: 5,
+    class: 'signal-default'
+  }
+])
+
+watch(() => props.signalValue, (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 })
+</script>
+
+<style scoped lang="scss">
+.signal-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    height: 23px;
+    width: 23px;
+    position: relative;
+    z-index: 3;
+
+    ul {
+        height: 21px;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    li {
+        width: 4px;
+        height: 5px;
+        border-radius: 10px;
+        list-style: none;
+        margin: 0 0.5px;
+
+        @for $i from 1 through 5 {
+            &:nth-child(#{$i}) {
+                height: $i*5 - ($i - 1) +px;
+            }
+        }
+    }
+
+    .signal-default {
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    .signal-red {
+        background-color: red;
+    }
+
+    .signal-yellow {
+        background-color: #e7d055;
+    }
+
+    .signal-green {
+        background-color: #32cd32;
+    }
+}
+</style>