add websocket

src/assets/styles/functions.scss

@@ -8,3 +8,8 @@
 @function w($width) {
 	@return $width * ($actual_width / $design_width);
 }
+
+@function adjust($v) {
+	// 所有单位乘以 2
+	@return $v * 2;
+}

src/components/boxes/subcomponents/TableStatus.vue

@@ -21,7 +21,9 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '../../../assets/styles/functions';
+
 .table-status {
 	/* font-family: Ubuntu, sans-serif !important; */
 	color: #3984ff;

src/components/charts/BarChart.vue

@@ -38,8 +38,7 @@ export default {
   data() {
     return {
       id: Math.random().toString(),
-      chart: null,
+      chart: null
-      config: {},
     };
   },
   mounted() {

src/components/layout/Main.vue

@@ -14,7 +14,7 @@
 				style="
 					position: absolute;
 					bottom: 151px;
-					left: 65px;
+					left: 64px;
 					transform: scale(1.02, 1.05);
 				"
 			>
@@ -22,6 +22,7 @@
 					id="1"
 					preload="auto"
 					height="100"
+					muted
 					autoplay
 					loop
 					disablepictureinpicture
@@ -43,6 +44,7 @@
 					class="video-top"
 					preload="auto"
 					height="100"
+					muted
 					autoplay
 					loop
 					disablepictureinpicture
@@ -101,6 +103,11 @@ import FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 // import Container from './Container.vue'
 
+import WsClient from "../../utils/wsClass";
+
+const wsc = new WsClient();
+wsc.registerListeners();
+
 export default {
 	name: "Main",
 	components: {

src/utils/wsClass.js

@@ -0,0 +1,70 @@
+
+function handleOpen() {
+  console.log('[*] WebSocket 成功连接...')
+}
+
+function handleData(e) {
+  // this: WsClient 实例
+  if ('data' in e && e.data !== '') {
+    let latestData = null
+    try {
+      const latestData = JSON.parse(e.data)
+      console.log(latestData)
+    } catch (err) {
+      console.log(e)
+    }
+  }
+  else {
+    console.log('[x] 没有data数据')
+    return;
+  }
+}
+
+function handleError(err) {
+  console.log('[x] 出错：', err, err.data)
+}
+
+function handleClose() {
+  console.log('[x] 服务器关闭连接')
+}
+
+
+export default class WsClient {
+  static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
+  static tableMap = {
+    // 窑顶温度
+  }
+  static socket = null
+
+  constructor() {
+    WsClient.socket = WsClient.createSocket()
+  }
+
+  closeSocket() {
+    WsClient.socket.close()
+  }
+
+  registerListeners() {
+    // 注册监听器
+    if (!WsClient.socket) {
+      WsClient.createSocket()
+    }
+    if (!WsClient.socket.onopen) WsClient.socket.onopen = handleOpen
+    if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData
+    if (!WsClient.socket.onerror) WsClient.socket.onerror = handleError
+    if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose
+  }
+
+  static createSocket() {
+    if (WsClient.socket) return;
+    WsClient.socket = new WebSocket(WsClient.wsServer)
+  }
+
+  send(value) {
+    WsClient.socket.send(value)
+  }
+
+  update() {
+
+  }
+}