移除信号，页面简化

Signed-off-by: Caner <5658514@qq.com>

README.md

@@ -1,20 +1,15 @@
-# 控制端
+# Desc
 ```
-采用遥控手柄控制
+控制端采用手柄
 ```
-## 教程
-```
-1. 房间ID与车端ID需一致
-2. 可自行编译打包
-3. 可使用现有控制端：car.caner.top
-```
-## 编译
+## Debug
 ```
 1. yarn
-2. yarn build (www文件即是打包后的)
+2. yarn dev
+3. 房间ID同车端ID
 ```
 
-## 注意
+## Fn
 ```
 1. 遥控手柄自行连接电脑
 2. 左摇杆云台控制
@@ -26,4 +21,6 @@
 8. Y2是鸣笛
 ```
 ## TODO:
-4. 电量采集优化（准确性）
+```
+1. 电量采集优化（准确性）
+```

src/App.vue

@@ -3,15 +3,13 @@
     <template v-if="isLogin">
       <video id="v2" autoplay playsinline muted></video>
       <div class="marke">
-        <!-- 信号 -->
-        <Signal :signalValue="signalValue" />
         <!-- 手柄状态 -->
         <div class="contrl" :style="`color:${contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'}`">&#xe72a;</div>
-        <!-- 音频 -->
+        <!-- 音频状态 -->
         <Record class="audio" @callBack="sendAudio" :audioState="audioState" />
-        <!-- 喇叭 -->
+        <!-- 喇叭状态 -->
         <div class="arcode" :style="`color:${muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'}`">&#xe600;</div>
-        <!-- 电量 -->
+        <!-- 电量状态 -->
         <Battery :quantity="60" />
       </div>
       <!-- 码数 -->
@@ -29,13 +27,12 @@ const { io } = require("socket.io-client");
 import Login from "@/components/login";
 import Loading from "@/components/loading";
 import Record from "@/components/record";
-import Signal from "@/components/signal";
 import Battery from "@/components/battery";
 import Gauge from "@/components/gauge";
 
 const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 export default {
-  components: { Login, Loading, Record, Signal, Battery, Gauge },
+  components: { Login, Loading, Record, Battery, Gauge },
   data() {
     return {
       socket: null,
@@ -51,7 +48,6 @@ export default {
       warnAudio: false,// 鸣笛
       speed: 1, //1低速档 | 2 高速档
       muted: true,// 是否静音
-      signalValue: 0,
       SpeedValue: 0,
       iceServers: [
         {
@@ -137,9 +133,6 @@ export default {
             await this.Peer.setLocalDescription(answer);
           case 'power':
             console.log("电量", data);
-          case 'signal':
-            const s = data.data <= 20 ? Math.floor(data.data / 4) : 5
-            this.signalValue = s || 1
           case 'speed':
             const d = Math.floor(data.data)
             this.SpeedValue = d
@@ -153,7 +146,7 @@ export default {
       );
 
       this.socket.on("leaved", () => this.close("车端断开"));
-      
+
       this.socket.on("connect_error", () => this.close('服务器连接失败'));
     },
 
@@ -298,28 +291,17 @@ video {
 .marke {
   position: fixed;
   top: 0;
-  left: 50%;
-  width: 555px;
-  height: 30px;
-  transform: translate(-50%, 0);
+  left: 0;
+  width: 100%;
+  padding: 5px 0;
   z-index: 1;
+  background: rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-.marke::before {
-  position: absolute;
-  z-index: 0;
-  content: "";
-  width: 100%;
-  height: 0;
-  border-top: 30px solid rgba(0, 0, 0, 0.25);
-  border-left: 15px solid transparent;
-  border-right: 15px solid transparent;
-}
-
 .marke>div {
   margin: 0 18px;
 }

src/components/record.vue

@@ -1,7 +1,7 @@
 <template>
   <div :style="`color:${show ? '#00CED1':'rgba(0, 0, 0, 0.3)'}`">&#xe6c1;</div>
 </template>
-<script>
+<script lang="js">
 export default {
   props: ["audioState"],
   data() {

src/components/signal.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="signal-box">
-    <ul v-if="signalValue">
-      <li v-for="(item, idex) in list" :key="idex" :class="item.class"></li>
-    </ul>
-    <span v-if="signalText" style="color: white">{{ signalText }}</span>
-  </div>
-</template>
- 
-<script>
-export default {
-  name: "SignalTower",
-  props: ["signalValue", "signalText"],
-  data() {
-    return {
-      list: [
-        {
-          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: {
-    signalValue(v) {
-      for (let j = 0; j < this.list.length; j++) {
-        const el = this.list[j];
-        if (el.id <= v) {
-          if (v === 1 || v === 2) {
-            el.class = "signal-red";
-          } else if (v === 3 || v === 4) {
-            el.class = "signal-yellow";
-          } else if (v === 5) {
-            el.class = "signal-green";
-          } else {
-            el.class = "signal-default";
-          }
-        } else {
-          el.class = "signal-default";
-        }
-      }
-    },
-  },
-};
-</script>
- 
-<style scoped>
-.signal-box {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  height: 23px;
-  width: 23px;
-  position: relative;
-  z-index: 3;
-}
-span {
-  font-size: 15px;
-  color: white;
-  margin-left: 3px;
-}
-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;
-}
-
-ul li:nth-child(1) {
-  height: 5px;
-}
-
-ul li:nth-child(2) {
-  height: 9px;
-}
-
-ul li:nth-child(3) {
-  height: 13px;
-}
-ul li:nth-child(4) {
-  height: 17px;
-}
-ul li:nth-child(5) {
-  height: 21px;
-}
-
-.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>