From 1bcd216487d81d4740546381e7c3fc01328f0657 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Thu, 11 May 2023 10:40:00 +0800
Subject: [PATCH] add websocket

---
 src/assets/styles/functions.scss              |  5 ++
 .../boxes/subcomponents/TableStatus.vue       |  4 +-
 src/components/charts/BarChart.vue            |  3 +-
 src/components/layout/Main.vue                |  9 ++-
 src/utils/wsClass.js                          | 70 +++++++++++++++++++
 5 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/wsClass.js

diff --git a/src/assets/styles/functions.scss b/src/assets/styles/functions.scss
index c5e5f89..cff9e01 100644
--- a/src/assets/styles/functions.scss
+++ b/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;
+}
diff --git a/src/components/boxes/subcomponents/TableStatus.vue b/src/components/boxes/subcomponents/TableStatus.vue
index 4688c01..fc9383f 100644
--- a/src/components/boxes/subcomponents/TableStatus.vue
+++ b/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;
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index 7cd479b..e197200 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -38,8 +38,7 @@ export default {
   data() {
     return {
       id: Math.random().toString(),
-      chart: null,
-      config: {},
+      chart: null
     };
   },
   mounted() {
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 1bad760..970dd3a 100644
--- a/src/components/layout/Main.vue
+++ b/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: {
diff --git a/src/utils/wsClass.js b/src/utils/wsClass.js
new file mode 100644
index 0000000..381520e
--- /dev/null
+++ b/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() {
+
+  }
+}
\ No newline at end of file