去除view,svg 增加字体库

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

package.json

@@ -8,13 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "echarts": "^5.3.3",
-    "socket.io-client": "^4.4.1",
-    "view-design": "^4.7.0",
+    "echarts": "^5.4.0",
+    "socket.io-client": "^4.5.3",
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@vue/cli-service": "~4.5.0",
-    "vue-template-compiler": "^2.6.11"
+    "@vue/cli-service": "~5.0.8"
   }
 }

src/App.vue

@@ -6,46 +6,11 @@
         <!-- 信号 -->
         <Signal :signalValue="signalValue" />
         <!-- 手柄状态 -->
-        <svg viewBox="0 -50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
-          <path
-            d="M817.68 803.17a130.23 130.23 0 0 1-125.6-96.37l-14-52.19a54.08 54.08 0 0 0-52.16-40H398.07a54.08 54.08 0 0 0-52.16 40l-14 52.19c-15.54 58-68.21 96.37-125.6 96.37A130 130 0 0 1 80.78 639.51l66.72-249a181.66 181.66 0 0 1 63.19-97.15A177.79 177.79 0 0 1 322 254.58h380a177.79 177.79 0 0 1 111.31 38.79 181.66 181.66 0 0 1 63.19 97.15l66.72 249a130 130 0 0 1-125.54 163.65zM322 274.58A160 160 0 0 0 166.87 395.5v0.13l-66.73 249a110 110 0 0 0 212.5 56.94l14-52.19a74.11 74.11 0 0 1 71.48-54.85h227.81a74.11 74.11 0 0 1 71.48 54.85l14 52.19a110 110 0 0 0 212.5-56.94L857.13 395.5A160 160 0 0 0 702 274.58z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-          <path
-            d="M580 213.86a12 12 0 0 1 12 12v28H432v-28a12 12 0 0 1 12-12h136m0-20H444a32 32 0 0 0-32 32v48h200v-48a32 32 0 0 0-32-32z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-          <path
-            d="M512 213.86a10 10 0 0 1-10-10v-63a60.07 60.07 0 0 1 60-60 10 10 0 0 1 0 20 40 40 0 0 0-40 40v63a10 10 0 0 1-10 10zM330 344.86a90 90 0 1 1-90 90 90.1 90.1 0 0 1 90-90m0-20a110 110 0 1 0 110 110 110 110 0 0 0-110-110z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-          <path
-            d="M330 384.86a50 50 0 1 1-50 50 50.06 50.06 0 0 1 50-50m0-20a70 70 0 1 0 70 70 70 70 0 0 0-70-70zM697 344.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM697 496.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM773 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM621 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-        </svg>
+        <div class="contrl" :style="`color:${contrlState ? '#00CED1':'rgba(0, 0, 0, 0.3)'}`">&#xe72a;</div>
         <!-- 音频 -->
-        <Record @callBack="sendAudio" :audioState="audioState" />
+        <Record class="audio" @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="muted ? '#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="muted ? '#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="muted ? '#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="muted ? '#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="muted ? '#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="muted ? '#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="muted ? '#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>
+        <div class="arcode" :style="`color:${muted ? '#00CED1':'rgba(0, 0, 0, 0.3)'}`">&#xe600;</div>
         <!-- 电量 -->
         <Battery :quantity="60" />
       </div>
@@ -67,7 +32,6 @@ import Record from "@/components/record";
 import Signal from "@/components/signal";
 import Battery from "@/components/battery";
 import Gauge from "@/components/gauge";
-import { Message } from "view-design";
 
 const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 export default {
@@ -160,12 +124,7 @@ export default {
             }
           };
         } catch (error) {
-          this.socket.disconnect();
-          this.isLogin = false;
-          Message.error({
-            content: "webrtc初始化错误" + error,
-            duration: 3,
-          });
+          this.close('webrtc初始化失败')
         }
       });
 
@@ -190,7 +149,7 @@ export default {
         this.socket.emit("msg", { type: "startRTC" })
       );
       this.socket.on("leaved", () => this.close("车端断开"));
-      this.socket.on("connect_error", (err) => this.close(err));
+      this.socket.on("connect_error", () => this.close('服务器连接失败'));
     },
 
     // 手柄数据
@@ -272,7 +231,7 @@ export default {
     close(err) {
       if (this.Peer) this.Peer.close();
       if (this.remoteVideo) this.remoteVideo.srcObject = null;
-      this.socket.disconnect();
+      if (this.socket) this.socket.disconnect();
       this.isLogin = false;
       this.showLoading = false;
       this.error = err || "";
@@ -313,23 +272,16 @@ export default {
     warnAudio(v) {
       if (v && this.socket && this.socket.connected) this.socket.emit("msg", { type: "warnAudio", warnAudio: v });
     }
+  },
+  beforeDestroy(){
+    this.close()
   }
 };
 </script>
-
-<style>
-video,
-#app,
-html,
-body {
-  margin: 0;
-  padding: 0;
-  user-select: none;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  min-width: 1000px;
-  min-height: 900px;
+<style scoped>
+  #app {
+  font-family: "fonts";
+  font-style: normal;
 }
 
 video {
@@ -349,6 +301,7 @@ video {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 
 .marke::before {
@@ -363,7 +316,7 @@ video {
 }
 
 .marke>div {
-  margin: 0 3px;
+  margin: 0 18px;
 }
 
 .gauge {
@@ -376,9 +329,43 @@ video {
   z-index: 9;
 }
 
+.audio,
+.arcode {
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.contrl {
+  font-size: 32px;
+  color: rgba(0, 0, 0, 0.3);
+}
+
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
   width: 0 !important;
   display: none;
 }
+
+@font-face {
+  font-family: "fonts";
+  src: url("./assets/iconfont.woff2") format("woff2"),
+    url("./assets/iconfont.woff") format("woff"),
+    url("./assets/iconfont.ttf") format("truetype");
+}
+</style>
+<style>
+video,
+#app,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-width: 1000px;
+  min-height: 900px;
+}
+
 </style>

src/components/record.vue

@@ -1,17 +1,7 @@
 <template>
-  <div style="width: 23px; height: 23px; position: relative; z-index: 3">
-    <svg viewBox="0 50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
-      <path
-        d="M801.728 364.8a32 32 0 0 0-32 32v91.392c0 129.28-115.648 234.432-257.728 234.432S254.272 617.408 254.272 488.192V393.216a32 32 0 0 0-64 0v94.976c0 157.888 133.248 286.208 300.672 296.448v99.392H357.632c-16.128 0-29.184 14.336-29.184 32.064 0 17.664 13.056 31.936 29.184 31.936h319.04c16.064 0 29.184-14.272 29.184-31.936 0-17.728-13.12-32.064-29.184-32.064H554.944v-101.376c156.992-19.776 278.784-143.488 278.784-294.464V396.8c0-17.728-14.272-32-32-32z"
-        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-      <path
-        d="M517.12 678.656a199.104 199.104 0 0 0 198.912-198.848V268.736A199.168 199.168 0 0 0 517.12 69.888a199.04 199.04 0 0 0-198.784 198.848v211.072a199.04 199.04 0 0 0 198.784 198.848z m85.056-126.784a49.856 49.856 0 1 1 0-99.648 49.856 49.856 0 0 1 0 99.648zM382.336 268.736c0-74.368 60.48-134.848 134.784-134.848a135.04 135.04 0 0 1 134.912 134.848v28.48H382.336v-28.48z"
-        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
-    </svg>
-  </div>
+  <div :style="`color:${show ? '#00CED1':'rgba(0, 0, 0, 0.3)'}`">&#xe6c1;</div>
 </template>
 <script>
-import { Message } from "view-design";
 export default {
   props: ["audioState"],
   data() {
@@ -52,9 +42,7 @@ export default {
         } else {
           txt = "未获取到音频设备";
         }
-        Message.error({
-          content: txt,
-        });
+        alert(txt)
       }
     },
 

src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-import 'view-design/dist/styles/iview.css';
 Vue.config.productionTip = false
 new Vue({
   render: h => h(App),