对接信号+速度数据

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

src/App.vue

@@ -4,7 +4,7 @@
       <video id="v2" autoplay playsinline muted></video>
       <div class="marke">
         <!-- 信号 -->
-        <Signal :signalValue="4" />
+        <Signal :signalValue="signalValue" />
         <!-- 手柄状态 -->
         <svg viewBox="0 -50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
           <path
@@ -24,20 +24,34 @@
         <Record @callBack="sendAudio" :audioState="audioState" />
         <!-- 喇叭 -->
         <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M393.707231 292.571429L343.13933 487.619048l46.955908 234.779541-97.523809-45.149912-66.82187-108.359788-21.671958-86.687831 66.82187-113.777778z"></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M451.499118 509.291005a104.747795 61.40388 90 1 0 122.80776 0 104.747795 61.40388 90 1 0-122.80776 0Z" ></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M426.215168 781.996473c-3.611993 0-7.223986-1.805996-10.835979-3.611993l-117.389771-86.687831c-36.119929-23.477954-65.015873-57.791887-83.075838-99.329806-10.835979-25.283951-16.253968-52.373898-16.253968-81.269841s5.417989-55.985891 16.253968-81.269842c16.253968-41.537919 45.149912-74.045855 83.075838-97.523809l110.165785-77.657848c9.029982-5.417989 19.865961-3.611993 25.28395 3.611993 5.417989 9.029982 3.611993 19.865961-3.611993 25.28395L319.661376 361.199295c-32.507937 19.865961-55.985891 48.761905-70.433863 81.269841-9.029982 21.671958-14.447972 45.149912-14.447972 68.627866 0 23.477954 3.611993 45.149912 12.641976 66.821869 14.447972 34.313933 37.925926 63.209877 68.627866 83.075838l117.38977 86.687831c7.223986 5.417989 9.029982 18.059965 3.611993 25.28395 0 5.417989-5.417989 9.029982-10.835978 9.029983z" ></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M523.738977 830.758377c-108.359788 0-193.241623-140.867725-193.241623-317.855379S415.379189 193.241623 523.738977 193.241623c25.283951 0 50.567901 7.223986 74.045855 23.477954 9.029982 5.417989 10.835979 16.253968 5.41799 25.28395s-16.253968 10.835979-25.283951 5.41799c-18.059965-10.835979-34.313933-18.059965-54.179894-18.059965-84.881834 0-157.121693 130.031746-157.121693 281.73545S438.857143 794.638448 523.738977 794.638448s157.121693-130.031746 157.121693-281.73545c0-74.045855-16.253968-146.285714-46.955908-198.659612-5.417989-9.029982-1.805996-19.865961 7.223986-25.28395 9.029982-5.417989 19.865961-1.805996 25.28395 7.223986 32.507937 59.597884 50.567901 135.449735 50.567902 216.719576C718.786596 689.890653 633.904762 830.758377 523.738977 830.758377z" ></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M523.738977 646.546737c-48.761905 0-86.687831-59.597884-86.687831-133.643739S474.977072 379.259259 523.738977 379.259259s86.687831 59.597884 86.687831 133.643739-37.925926 133.643739-86.687831 133.643739z m0-232.973545c-23.477954 0-50.567901 39.731922-50.567901 97.52381s27.089947 97.52381 50.567901 97.523809 50.567901-39.731922 50.567901-97.523809-27.089947-97.52381-50.567901-97.52381z" ></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M523.738977 413.573192h-1.805996l-92.105821-10.835979c-9.029982-1.805996-16.253968-10.835979-16.253968-19.865961 1.805996-9.029982 10.835979-16.253968 19.865961-16.253968l92.105821 10.835979c9.029982 1.805996 16.253968 10.835979 16.253968 19.865961 0 9.029982-9.029982 16.253968-18.059965 16.253968zM372.035273 662.800705c-9.029982 0-16.253968-7.223986-18.059964-16.253968-1.805996-9.029982 5.417989-18.059965 16.253968-19.865961l153.5097-16.253968c9.029982-1.805996 18.059965 5.417989 19.865961 16.253968 1.805996 9.029982-5.417989 18.059965-16.253968 19.865961l-153.5097 16.253968h-1.805997z" ></path>
-          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" d="M763.936508 364.811287c-5.417989 0-9.029982-1.805996-12.641975-5.417989-7.223986-7.223986-7.223986-18.059965 0-25.283951l25.28395-25.28395c7.223986-7.223986 18.059965-7.223986 25.283951 0s7.223986 18.059965 0 25.28395L776.578483 359.393298c-3.611993 3.611993-9.029982 5.417989-12.641975 5.417989zM771.160494 720.592593c-5.417989 0-9.029982-1.805996-12.641975-5.41799l-25.283951-25.28395c-7.223986-7.223986-7.223986-18.059965 0-25.283951s18.059965-7.223986 25.283951 0l25.28395 25.283951c7.223986 7.223986 7.223986 18.059965 0 25.28395-3.611993 3.611993-7.223986 5.417989-12.641975 5.41799zM819.922399 529.156966h-54.179895c-10.835979 0-18.059965-7.223986-18.059964-18.059964s7.223986-18.059965 18.059964-18.059965h54.179895c10.835979 0 18.059965 7.223986 18.059964 18.059965s-9.029982 18.059965-18.059964 18.059964z" ></path>
-        </svg>        
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M393.707231 292.571429L343.13933 487.619048l46.955908 234.779541-97.523809-45.149912-66.82187-108.359788-21.671958-86.687831 66.82187-113.777778z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M451.499118 509.291005a104.747795 61.40388 90 1 0 122.80776 0 104.747795 61.40388 90 1 0-122.80776 0Z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M426.215168 781.996473c-3.611993 0-7.223986-1.805996-10.835979-3.611993l-117.389771-86.687831c-36.119929-23.477954-65.015873-57.791887-83.075838-99.329806-10.835979-25.283951-16.253968-52.373898-16.253968-81.269841s5.417989-55.985891 16.253968-81.269842c16.253968-41.537919 45.149912-74.045855 83.075838-97.523809l110.165785-77.657848c9.029982-5.417989 19.865961-3.611993 25.28395 3.611993 5.417989 9.029982 3.611993 19.865961-3.611993 25.28395L319.661376 361.199295c-32.507937 19.865961-55.985891 48.761905-70.433863 81.269841-9.029982 21.671958-14.447972 45.149912-14.447972 68.627866 0 23.477954 3.611993 45.149912 12.641976 66.821869 14.447972 34.313933 37.925926 63.209877 68.627866 83.075838l117.38977 86.687831c7.223986 5.417989 9.029982 18.059965 3.611993 25.28395 0 5.417989-5.417989 9.029982-10.835978 9.029983z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M523.738977 830.758377c-108.359788 0-193.241623-140.867725-193.241623-317.855379S415.379189 193.241623 523.738977 193.241623c25.283951 0 50.567901 7.223986 74.045855 23.477954 9.029982 5.417989 10.835979 16.253968 5.41799 25.28395s-16.253968 10.835979-25.283951 5.41799c-18.059965-10.835979-34.313933-18.059965-54.179894-18.059965-84.881834 0-157.121693 130.031746-157.121693 281.73545S438.857143 794.638448 523.738977 794.638448s157.121693-130.031746 157.121693-281.73545c0-74.045855-16.253968-146.285714-46.955908-198.659612-5.417989-9.029982-1.805996-19.865961 7.223986-25.28395 9.029982-5.417989 19.865961-1.805996 25.28395 7.223986 32.507937 59.597884 50.567901 135.449735 50.567902 216.719576C718.786596 689.890653 633.904762 830.758377 523.738977 830.758377z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M523.738977 646.546737c-48.761905 0-86.687831-59.597884-86.687831-133.643739S474.977072 379.259259 523.738977 379.259259s86.687831 59.597884 86.687831 133.643739-37.925926 133.643739-86.687831 133.643739z m0-232.973545c-23.477954 0-50.567901 39.731922-50.567901 97.52381s27.089947 97.52381 50.567901 97.523809 50.567901-39.731922 50.567901-97.523809-27.089947-97.52381-50.567901-97.52381z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M523.738977 413.573192h-1.805996l-92.105821-10.835979c-9.029982-1.805996-16.253968-10.835979-16.253968-19.865961 1.805996-9.029982 10.835979-16.253968 19.865961-16.253968l92.105821 10.835979c9.029982 1.805996 16.253968 10.835979 16.253968 19.865961 0 9.029982-9.029982 16.253968-18.059965 16.253968zM372.035273 662.800705c-9.029982 0-16.253968-7.223986-18.059964-16.253968-1.805996-9.029982 5.417989-18.059965 16.253968-19.865961l153.5097-16.253968c9.029982-1.805996 18.059965 5.417989 19.865961 16.253968 1.805996 9.029982-5.417989 18.059965-16.253968 19.865961l-153.5097 16.253968h-1.805997z">
+          </path>
+          <path :fill="mutedState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+            d="M763.936508 364.811287c-5.417989 0-9.029982-1.805996-12.641975-5.417989-7.223986-7.223986-7.223986-18.059965 0-25.283951l25.28395-25.28395c7.223986-7.223986 18.059965-7.223986 25.283951 0s7.223986 18.059965 0 25.28395L776.578483 359.393298c-3.611993 3.611993-9.029982 5.417989-12.641975 5.417989zM771.160494 720.592593c-5.417989 0-9.029982-1.805996-12.641975-5.41799l-25.283951-25.28395c-7.223986-7.223986-7.223986-18.059965 0-25.283951s18.059965-7.223986 25.283951 0l25.28395 25.283951c7.223986 7.223986 7.223986 18.059965 0 25.28395-3.611993 3.611993-7.223986 5.417989-12.641975 5.41799zM819.922399 529.156966h-54.179895c-10.835979 0-18.059965-7.223986-18.059964-18.059964s7.223986-18.059965 18.059964-18.059965h54.179895c10.835979 0 18.059965 7.223986 18.059964 18.059965s-9.029982 18.059965-18.059964 18.059964z">
+          </path>
+        </svg>
         <!-- 电量 -->
         <Battery :quantity="60" />
       </div>
       <!-- 码数 -->
       <div class="gauge">
-        <Gauge :value="50" :gears="speed" />
+        <Gauge :value="SpeedValue" :gears="speed" />
       </div>
       <Loading v-if="showLoading" />
     </template>
@@ -63,14 +77,16 @@ export default {
       socket: null,
       HOST: "wss://car.caner.top",
       Peer: null,
-      isLogin: true,
+      isLogin: false,
       error: "",
       remoteVideo: null,
-      showLoading: false,
+      showLoading: true,
       contrlState: false,
       audioState: false,
       speed: 1, //1低速档 | 2 高速档
       mutedState: true,// 是否静音
+      signalValue: 0,
+      SpeedValue: 0,
       iceServers: [
         {
           urls: ["stun:caner.top:3478"],
@@ -158,16 +174,18 @@ export default {
         } else if (data.type === "power") {
           console.log("电量", data);
         } else if (data.type === "signal") {
-          console.log("4G信号");
+          const v = data.data <= 20 ? Math.floor(data.data / 4) : 5
+          this.signalValue = v
+        } else if (data.type === 'speed') {
+          const v = Math.floor(data.data)
+          this.SpeedValue = v
         }
       });
 
       this.socket.on("joined", async () =>
         this.socket.emit("msg", { type: "startRTC" })
       );
-
       this.socket.on("leaved", () => this.close("车端断开"));
-
       this.socket.on("connect_error", (err) => this.close(err));
     },
 
@@ -271,10 +289,7 @@ export default {
   },
   mounted() {
     this.intSoketRtc(this.HOST);
-  },
-  destroyed() {
-    this.close();
-  },
+  }
 };
 </script>
 
@@ -291,7 +306,6 @@ body {
   overflow: hidden;
   min-width: 1000px;
   min-height: 900px;
-  background: #ccc;
 }
 
 video {

src/components/gauge.vue

@@ -79,7 +79,7 @@ export default {
           pointer: {
             show: false,
           },
-          data: [50],
+          data: [0],
         },
       },
     };
@@ -91,11 +91,10 @@ export default {
   watch: {
     value(v) {
       if (!this.mychart) return;
-      if (v >= 100) v = 100;
+      if (v >= 60) v = 60;
       if (v <= 0) v = 0;
       this.option.series.data[0] = v;
       this.mychart.setOption(this.option);
-      console.log(1, v);
     },
   },
 };

src/components/signal.vue

@@ -39,7 +39,6 @@ export default {
   },
   watch: {
     signalValue(v) {
-      console.log(111, v);
       for (let j = 0; j < this.list.length; j++) {
         const el = this.list[j];
         if (el.id <= v) {