From fd0985868ccd5183b69486ff2fb01ddfbf9c0faa Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Sat, 9 Sep 2023 16:49:43 +0800
Subject: [PATCH] add websocket

---
 package-lock.json                             | 109 +-
 package.json                                  |  12 +-
 src/components/yx-dark/containers/chart.vue   |  50 +-
 .../containers/components/LineChart.vue       | 364 +++++++
 src/components/yx-dark/containers/table.vue   |   2 +-
 .../yx-dark/socket-server/demo.json           | 952 ++++++++++++++++++
 src/components/yx-dark/socket-server/index.ts |  67 ++
 .../yx-dark/socket-server/tsconfig.json       | 109 ++
 src/utils/wsClass.js                          |   3 +-
 src/views/HomeView.vue                        |   6 +
 yarn.lock                                     |  26 +-
 11 files changed, 1623 insertions(+), 77 deletions(-)
 create mode 100644 src/components/yx-dark/containers/components/LineChart.vue
 create mode 100644 src/components/yx-dark/socket-server/demo.json
 create mode 100644 src/components/yx-dark/socket-server/index.ts
 create mode 100644 src/components/yx-dark/socket-server/tsconfig.json

diff --git a/package-lock.json b/package-lock.json
index a00998a..dc94b2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,13 +17,16 @@
         "vuex": "^3.6.2"
       },
       "devDependencies": {
+        "@types/node": "^20.6.0",
+        "@types/ws": "^8.5.5",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-plugin-vuex": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "sass": "^1.32.7",
         "sass-loader": "^12.0.0",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "^2.6.14",
+        "ws": "^8.14.1"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -2344,11 +2347,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
-      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
-      "dev": true,
-      "license": "MIT"
+      "version": "20.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
+      "dev": true
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2435,11 +2437,10 @@
       }
     },
     "node_modules/@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "version": "8.5.5",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -10108,6 +10109,27 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-chain": {
       "version": "6.5.1",
       "resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
@@ -10356,28 +10378,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/webpack-merge": {
       "version": "5.8.0",
       "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.8.0.tgz",
@@ -10498,17 +10498,16 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "dev": true,
-      "license": "MIT",
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -12177,9 +12176,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
-      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
+      "version": "20.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -12259,9 +12258,9 @@
       }
     },
     "@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "version": "8.5.5",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -17479,6 +17478,15 @@
         "opener": "^1.5.2",
         "sirv": "^1.0.7",
         "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true,
+          "requires": {}
+        }
       }
     },
     "webpack-chain": {
@@ -17639,13 +17647,6 @@
             "ajv-formats": "^2.1.1",
             "ajv-keywords": "^5.1.0"
           }
-        },
-        "ws": {
-          "version": "8.13.0",
-          "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
-          "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-          "dev": true,
-          "requires": {}
         }
       }
     },
@@ -17737,9 +17738,9 @@
       "dev": true
     },
     "ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index 0609330..ed5605a 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "server": "ts-node ./src/components/yx-dark/socket-server/index.ts"
   },
   "dependencies": {
     "core-js": "^3.8.3",
@@ -16,12 +17,17 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@types/node": "^20.6.0",
+    "@types/ws": "^8.5.5",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "vue-template-compiler": "^2.6.14",
+    "ws": "^8.14.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/yx-dark/containers/chart.vue b/src/components/yx-dark/containers/chart.vue
index de5155b..75f4c2d 100644
--- a/src/components/yx-dark/containers/chart.vue
+++ b/src/components/yx-dark/containers/chart.vue
@@ -6,18 +6,41 @@
 -->
 
 <template>
-  <div class="yx-dark-chart"></div>
+  <div class="yx-dark-chart">
+    <LineChart
+      key="1"
+      id="line-chart-1"
+      class="flex-1"
+      unit="单位 kg/h"
+      :legend="Object.keys(oilTable1)"
+      :series="oilTable1"
+    />
+    <div class="vertical-line"></div>
+    <LineChart
+      key="2"
+      id="line-chart-2"
+      class="flex-1"
+      unit="单位 kg/h"
+      :legend="Object.keys(oilTable2)"
+      :series="oilTable2"
+    />
+  </div>
 </template>
 
 <script>
+import LineChart from "./components/LineChart.vue";
+import { mapState } from "vuex";
+
 export default {
   name: "YxDarkChart",
-  components: {},
-  props: {},
+  components: { LineChart },
+  props: ["data-source"],
   data() {
     return {};
   },
-  computed: {},
+  computed: {
+    ...mapState(["oilTable1", "oilTable2"]),
+  },
   methods: {},
 };
 </script>
@@ -25,6 +48,23 @@ export default {
 <style scoped lang="scss">
 .yx-dark-chart {
   height: 100%;
-  background: #f003;
+  display: flex;
+}
+
+.flex-1 {
+  width: 1px;
+  flex: 1;
+}
+
+.vertical-line {
+  margin: 0 6px;
+  width: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
 }
 </style>
diff --git a/src/components/yx-dark/containers/components/LineChart.vue b/src/components/yx-dark/containers/components/LineChart.vue
new file mode 100644
index 0000000..b44e7dc
--- /dev/null
+++ b/src/components/yx-dark/containers/components/LineChart.vue
@@ -0,0 +1,364 @@
+<template>
+  <!-- line chart  -->
+  <div class="line-chart__wrapper">
+    <div class="line-chart__custom-legend flex" v-if="legend.length">
+      <!-- <span>产线1 - 产线5</span> -->
+      <ul style="" class="flex">
+        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
+      </ul>
+    </div>
+    <div :id="id" style="width: 100%; height: 100%"></div>
+    <div
+      v-show="legend.length === 0"
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #eee0;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        place-items: center;
+        font-size: 24px;
+        color: #eee8;
+        user-select: none;
+      "
+    >
+      无数据
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+export default {
+  name: "LineChart",
+  props: {
+    id: {
+      type: String,
+      default: "line-chart",
+    },
+    config: {
+      type: Object,
+      default: () => ({
+        title: { text: "default chart" },
+      }),
+    },
+    unit: {
+      type: String,
+      default: "单位/m³",
+    },
+    legend: {
+      type: Array,
+      default: () => [],
+    },
+    series: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      colors: [
+        "#18c7f3",
+        "#FFD160",
+        "#F31868",
+        "#30E89A",
+        "#2760FF",
+        "#7138FF",
+        "#F318D8",
+        "#C0F318",
+        "#f77",
+        "#19f",
+        "#98f",
+      ],
+      data: [],
+      legendtext: [
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+      ],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    series: {
+      deep: true,
+      handler: function () {
+        console.log("LineChart: series changed!");
+        this.init();
+      },
+    },
+  },
+  methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: 54,
+          left: 54,
+          bottom: 48,
+          right: 24,
+        },
+        xAxis: {
+          data: this.updateXAxis(),
+          axisLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 14,
+            lineHeight: 2,
+            margin: 16,
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: this.unit,
+          nameTextStyle: {
+            color: "#fff9",
+            fontSize: 18,
+            align: "",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              // width: 1,
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        color: this.colors,
+        // series: Array(5)
+        // 	.fill(1)
+        // 	.map((_, index) => ({
+        // 		name: Math.random(),
+        // 		type: "line",
+        // 		symbol: "circle",
+        // 		symbolSize: adjust(3),
+        // 		lineStyle: {
+        // 			width: adjust(1),
+        // 		},
+        // 		areaStyle: {
+        // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 				{ offset: 0, color: this.colors[index] + "33" },
+        // 				{ offset: 1, color: "transparent" },
+        // 			]),
+        // 		},
+        // 		data: Array(31)
+        // 			.fill(1)
+        // 			.map(() => {
+        // 				let v = Math.floor(Math.random() * 5000);
+        // 				while (v < 3000) v = Math.floor(Math.random() * 5000);
+        // 				return v;
+        // 			}),
+        // 	})),
+        series: Array(this.legend.length)
+          .fill(1)
+          .map((_, index) => {
+            let lgd = this.legend[index];
+            // console.log("series: ", lgd, index, this.series[lgd]);
+            return {
+              name: lgd,
+              type: "line",
+              symbol: "circle",
+              symbolSize: 6,
+              lineStyle: {
+                width: 2,
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: this.colors[index] + "33" },
+                  { offset: 1, color: "transparent" },
+                ]),
+              },
+              data: this.series[lgd],
+            };
+          }),
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+  // display: none;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  height: 4px;
+  border-radius: 4px;
+  background: #ccc3;
+}
+
+// ::-webkit-scrollbar-track {
+// height: adjust(1px);
+// background: blue;
+// }
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 40px;
+}
+
+ul {
+  // padding: 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: 56px;
+  // background: #eeec;
+  // overflow-x: hidden;
+  white-space: pre-wrap;
+  padding-bottom: 4px;
+}
+
+li {
+  text-align: right;
+  position: relative;
+  min-width: 40px;
+  margin-right: 18px;
+  padding: 0 4px;
+}
+
+li:not(:last-child) {
+  // margin-right: adjust(16px);
+}
+
+.line-chart__custom-legend {
+  position: absolute;
+  top: -64px;
+  right: 0;
+  font-size: 18px;
+  font-family: Ubuntu, sans-serif;
+  padding: 0;
+  // max-width: 100%;
+  width: 65%;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+li::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: -16px;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  background: #eee6;
+}
+
+li:nth-child(1)::before {
+  background: #18c7f3;
+}
+li:nth-child(2)::before {
+  background: #ffd160;
+}
+li:nth-child(3)::before {
+  background: #f31868;
+}
+li:nth-child(4)::before {
+  background: #30e89a;
+}
+li:nth-child(5)::before {
+  background: #2760ff;
+}
+li:nth-child(6)::before {
+  background: #7138ff;
+}
+li:nth-child(7)::before {
+  background: #f318d8;
+}
+li:nth-child(8)::before {
+  background: #c0f318;
+}
+li:nth-child(9)::before {
+  background: #f77;
+}
+li:nth-child(10)::before {
+  background: #19f;
+}
+li:nth-child(11)::before {
+  background: #98f;
+}
+
+.line-chart__wrapper {
+  position: relative;
+  background: #7771;
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+  box-shadow: inset 0 0 20px 4px rgba($color: #fff, $alpha: 0.1);
+  height: 100%;
+  width: 2px;
+}
+</style>
diff --git a/src/components/yx-dark/containers/table.vue b/src/components/yx-dark/containers/table.vue
index 1c0b556..c9c89d4 100644
--- a/src/components/yx-dark/containers/table.vue
+++ b/src/components/yx-dark/containers/table.vue
@@ -133,7 +133,7 @@ export default {
 <style scoped lang="scss">
 .yx-dark-tables {
   height: 100%;
-  background: #fff3;
+  // background: #fff3;
 }
 
 ::-webkit-scrollbar {
diff --git a/src/components/yx-dark/socket-server/demo.json b/src/components/yx-dark/socket-server/demo.json
new file mode 100644
index 0000000..4f63831
--- /dev/null
+++ b/src/components/yx-dark/socket-server/demo.json
@@ -0,0 +1,952 @@
+{
+    "baseInfo": {
+        "fireChangeTime": "20分钟",
+        "waterInTemp": "75.0",
+        "lastFireChangeTime": "10分15秒",
+        "kilnPressure": "94.0",
+        "fireDirection": "南火",
+        "waterOutTemp": "26.0"
+    },
+    "fan": [
+        [
+            "8#压延冷却风机",
+            "4373Hz",
+            "正常"
+        ],
+        [
+            "7#压延冷却风机",
+            "4772Hz",
+            "正常"
+        ],
+        [
+            "6#压延冷却风机",
+            "1704Hz",
+            "正常"
+        ],
+        [
+            "5#压延冷却风机",
+            "3109Hz",
+            "正常"
+        ],
+        [
+            "4#压延冷却风机",
+            "2595Hz",
+            "正常"
+        ],
+        [
+            "3#压延冷却风机",
+            "8903Hz",
+            "正常"
+        ],
+        [
+            "2#压延冷却风机",
+            "3741Hz",
+            "正常"
+        ],
+        [
+            "1#压延冷却风机",
+            "9035Hz",
+            "正常"
+        ],
+        [
+            "4#熔化部风机",
+            "5223Hz",
+            "正常"
+        ],
+        [
+            "3#熔化部风机",
+            "9722Hz",
+            "正常"
+        ],
+        [
+            "2#熔化部风机",
+            "9617Hz",
+            "正常"
+        ],
+        [
+            "1#熔化部风机",
+            "7135Hz",
+            "正常"
+        ],
+        [
+            "4#澄清部风机",
+            "1699Hz",
+            "正常"
+        ],
+        [
+            "3#澄清部风机",
+            "2511Hz",
+            "正常"
+        ],
+        [
+            "2#澄清部风机",
+            "9780Hz",
+            "正常"
+        ],
+        [
+            "1#澄清部风机",
+            "3809Hz",
+            "正常"
+        ],
+        [
+            "2#助燃风机",
+            "435Hz",
+            "正常"
+        ],
+        [
+            "1#助燃风机",
+            "6270Hz",
+            "正常"
+        ],
+        [
+            "2#L吊墙风机",
+            "8181Hz",
+            "正常"
+        ],
+        [
+            "1#L吊墙风机",
+            "5587Hz",
+            "正常"
+        ],
+        [
+            "2#钢碹碴池壁风机",
+            "6652Hz",
+            "正常"
+        ],
+        [
+            "1#钢碹碴池壁风机",
+            "2000Hz",
+            "正常"
+        ],
+        [
+            "2#池壁拐角风机",
+            "1972Hz",
+            "正常"
+        ],
+        [
+            "1#池壁拐角风机",
+            "7730Hz",
+            "正常"
+        ]
+    ],
+    "gas": {
+        "kilnGasT1": {
+            "FE111R": [
+                53.02,
+                69.84,
+                99.33,
+                17.21,
+                1.17,
+                27.84,
+                95.44,
+                30.72,
+                32.24,
+                64.16,
+                59.65,
+                14.59,
+                78.58,
+                99.15,
+                58.91,
+                34.13,
+                99.62,
+                2.23,
+                28.31,
+                91.17,
+                97.15,
+                60.62,
+                94.12,
+                23.24
+            ],
+            "FE113R": [
+                22.04,
+                40.78,
+                75.62,
+                61.01,
+                72.7,
+                48.46,
+                32.44,
+                42.51,
+                59.61,
+                22.86,
+                32.95,
+                21.32,
+                23.59,
+                84.16,
+                55.14,
+                55.71,
+                10.81,
+                56.53,
+                75.51,
+                2.85,
+                27.77,
+                52.42,
+                43.34,
+                22.04
+            ],
+            "FE112R": [
+                77.02,
+                13.83,
+                1.71,
+                53.99,
+                4.03,
+                1,
+                22.17,
+                61.73,
+                11.25,
+                31.69,
+                90.31,
+                69.26,
+                68.72,
+                80.79,
+                3.08,
+                39.17,
+                12.6,
+                35.31,
+                97.2,
+                38.77,
+                27.5,
+                11.78,
+                72.32,
+                23.13
+            ],
+            "FE115R": [
+                28.31,
+                10.16,
+                13.22,
+                41.44,
+                97.19,
+                60.08,
+                34.13,
+                16.75,
+                92.7,
+                79.48,
+                3.08,
+                14.71,
+                4.4,
+                0.88,
+                77.6,
+                57,
+                31,
+                86.14,
+                44.31,
+                45.7,
+                6.85,
+                65.62,
+                77.97,
+                49.2
+            ],
+            "FE114R": [
+                17.72,
+                32.45,
+                1.42,
+                24.51,
+                68.57,
+                61.48,
+                2.08,
+                3.1,
+                38.27,
+                20.07,
+                25.71,
+                85.58,
+                48.31,
+                78.14,
+                22.43,
+                87.47,
+                83.78,
+                17.66,
+                72.36,
+                19,
+                20.69,
+                33.92,
+                25.66,
+                91.28
+            ],
+            "FE117R": [
+                47.8,
+                62.27,
+                90.23,
+                28.31,
+                73.09,
+                34.04,
+                9.03,
+                44.69,
+                32.62,
+                25.78,
+                27.79,
+                25.42,
+                28.96,
+                56.52,
+                75.43,
+                50.56,
+                90.22,
+                11.85,
+                4.56,
+                39.9,
+                9.83,
+                65.98,
+                91.22,
+                92.43
+            ],
+            "FE116R": [
+                64.79,
+                46.14,
+                58.67,
+                54.46,
+                15.67,
+                72.02,
+                15.06,
+                5.88,
+                38.19,
+                66.98,
+                89.24,
+                33.13,
+                87.57,
+                43.95,
+                55.06,
+                93.26,
+                96.91,
+                56.5,
+                20.75,
+                83.76,
+                60.88,
+                62.04,
+                22.34,
+                82.43
+            ],
+            "FE118R": [
+                94.32,
+                86.26,
+                5.13,
+                47.33,
+                40.01,
+                34.97,
+                18.69,
+                81.81,
+                87.37,
+                96.47,
+                16.04,
+                23.33,
+                0.66,
+                16.86,
+                13.19,
+                67.32,
+                37.63,
+                13.74,
+                22.85,
+                78.89,
+                9.52,
+                75.46,
+                0.2,
+                1.51
+            ]
+        },
+        "kilnGasT2": {
+            "FE124R": [
+                53.02,
+                69.84,
+                99.33,
+                17.21,
+                1.17,
+                27.84,
+                95.44,
+                30.72,
+                32.24,
+                64.16,
+                59.65,
+                14.59,
+                78.58,
+                99.15,
+                58.91,
+                34.13,
+                99.62,
+                2.23,
+                28.31,
+                91.17,
+                97.15,
+                60.62,
+                94.12,
+                23.24
+            ],
+            "FE123aR": [
+                17.72,
+                32.45,
+                1.42,
+                24.51,
+                68.57,
+                61.48,
+                2.08,
+                3.1,
+                38.27,
+                20.07,
+                25.71,
+                85.58,
+                48.31,
+                78.14,
+                22.43,
+                87.47,
+                83.78,
+                17.66,
+                72.36,
+                19,
+                20.69,
+                33.92,
+                25.66,
+                91.28
+            ],
+            "FE123R": [
+                77.02,
+                13.83,
+                1.71,
+                53.99,
+                4.03,
+                1,
+                22.17,
+                61.73,
+                11.25,
+                31.69,
+                90.31,
+                69.26,
+                68.72,
+                80.79,
+                3.08,
+                39.17,
+                12.6,
+                35.31,
+                97.2,
+                38.77,
+                27.5,
+                11.78,
+                72.32,
+                23.13
+            ],
+            "FE124aR": [
+                22.04,
+                40.78,
+                75.62,
+                61.01,
+                72.7,
+                48.46,
+                32.44,
+                42.51,
+                59.61,
+                22.86,
+                32.95,
+                21.32,
+                23.59,
+                84.16,
+                55.14,
+                55.71,
+                10.81,
+                56.53,
+                75.51,
+                2.85,
+                27.77,
+                52.42,
+                43.34,
+                22.04
+            ],
+            "FE126R": [
+                64.79,
+                46.14,
+                58.67,
+                54.46,
+                15.67,
+                72.02,
+                15.06,
+                5.88,
+                38.19,
+                66.98,
+                89.24,
+                33.13,
+                87.57,
+                43.95,
+                55.06,
+                93.26,
+                96.91,
+                56.5,
+                20.75,
+                83.76,
+                60.88,
+                62.04,
+                22.34,
+                82.43
+            ],
+            "FE125aR": [
+                47.8,
+                62.27,
+                90.23,
+                28.31,
+                73.09,
+                34.04,
+                9.03,
+                44.69,
+                32.62,
+                25.78,
+                27.79,
+                25.42,
+                28.96,
+                56.52,
+                75.43,
+                50.56,
+                90.22,
+                11.85,
+                4.56,
+                39.9,
+                9.83,
+                65.98,
+                91.22,
+                92.43
+            ],
+            "FE125R": [
+                28.31,
+                10.16,
+                13.22,
+                41.44,
+                97.19,
+                60.08,
+                34.13,
+                16.75,
+                92.7,
+                79.48,
+                3.08,
+                14.71,
+                4.4,
+                0.88,
+                77.6,
+                57,
+                31,
+                86.14,
+                44.31,
+                45.7,
+                6.85,
+                65.62,
+                77.97,
+                49.2
+            ],
+            "FE126aR": [
+                94.32,
+                86.26,
+                5.13,
+                47.33,
+                40.01,
+                34.97,
+                18.69,
+                81.81,
+                87.37,
+                96.47,
+                16.04,
+                23.33,
+                0.66,
+                16.86,
+                13.19,
+                67.32,
+                37.63,
+                13.74,
+                22.85,
+                78.89,
+                9.52,
+                75.46,
+                0.2,
+                1.51
+            ]
+        }
+    },
+    "kilnBottom": {
+        "kilnTempBottomT1": {
+            "TE316": [
+                44,
+                49,
+                20,
+                29,
+                96,
+                76,
+                20,
+                82,
+                28,
+                86,
+                69,
+                18,
+                23,
+                58,
+                83,
+                84,
+                94,
+                99,
+                36,
+                51,
+                32
+            ],
+            "TE315": [
+                84,
+                61,
+                87,
+                82,
+                33,
+                9,
+                20,
+                23,
+                81,
+                0,
+                16,
+                81,
+                9,
+                78,
+                30,
+                16,
+                49,
+                16,
+                95,
+                53,
+                19
+            ],
+            "TE314": [
+                45,
+                93,
+                11,
+                47,
+                27,
+                69,
+                91,
+                17,
+                0,
+                67,
+                60,
+                15,
+                84,
+                36,
+                89,
+                30,
+                36,
+                90,
+                38,
+                94,
+                87
+            ],
+            "TE313": [
+                60,
+                9,
+                59,
+                15,
+                43,
+                41,
+                83,
+                93,
+                99,
+                91,
+                29,
+                47,
+                2,
+                40,
+                65,
+                39,
+                12,
+                20,
+                57,
+                64,
+                95
+            ],
+            "TE312": [
+                22,
+                46,
+                93,
+                69,
+                44,
+                3,
+                62,
+                49,
+                4,
+                18,
+                87,
+                76,
+                36,
+                16,
+                50,
+                36,
+                54,
+                90,
+                1,
+                66,
+                68
+            ]
+        },
+        "kilnTempBottomT2": {
+            "TE319": [
+                48,
+                56,
+                40,
+                44,
+                31,
+                82,
+                35,
+                36,
+                0,
+                84,
+                49,
+                38,
+                28,
+                34,
+                98,
+                60,
+                4,
+                69,
+                15,
+                86,
+                19
+            ],
+            "TE318": [
+                7,
+                30,
+                57,
+                78,
+                47,
+                99,
+                1,
+                98,
+                47,
+                86,
+                55,
+                10,
+                98,
+                27,
+                97,
+                85,
+                54,
+                41,
+                27,
+                85,
+                44
+            ],
+            "TE317": [
+                72,
+                13,
+                7,
+                69,
+                77,
+                36,
+                6,
+                34,
+                97,
+                48,
+                75,
+                29,
+                75,
+                4,
+                70,
+                80,
+                31,
+                10,
+                39,
+                86,
+                52
+            ],
+            "TE321": [
+                6,
+                60,
+                32,
+                19,
+                79,
+                99,
+                98,
+                81,
+                82,
+                68,
+                3,
+                94,
+                7,
+                29,
+                48,
+                52,
+                36,
+                59,
+                28,
+                77,
+                17
+            ],
+            "TE320": [
+                23,
+                47,
+                4,
+                15,
+                7,
+                74,
+                75,
+                60,
+                78,
+                89,
+                15,
+                95,
+                74,
+                85,
+                20,
+                48,
+                79,
+                51,
+                63,
+                82,
+                68
+            ]
+        }
+    },
+    "kilnTop": {
+        "kilnTempTopT2": {
+            "TE215": [
+                81,
+                12,
+                86,
+                55,
+                50,
+                59,
+                20,
+                67,
+                66,
+                29,
+                17,
+                74,
+                11,
+                12,
+                63,
+                23,
+                34,
+                86,
+                9,
+                38,
+                99,
+                3,
+                33,
+                77
+            ],
+            "TE214": [
+                51,
+                12,
+                49,
+                60,
+                3,
+                67,
+                95,
+                62,
+                22,
+                89,
+                69,
+                14,
+                41,
+                79,
+                77,
+                27,
+                26,
+                34,
+                69,
+                44,
+                89,
+                86,
+                92,
+                1
+            ],
+            "TE213": [
+                76,
+                14,
+                35,
+                1,
+                36,
+                67,
+                40,
+                5,
+                53,
+                98,
+                46,
+                29,
+                71,
+                12,
+                43,
+                42,
+                53,
+                56,
+                9,
+                17,
+                34,
+                42,
+                82,
+                73
+            ]
+        },
+        "kilnTempTopT1": {
+            "TE209": [
+                51,
+                12,
+                49,
+                60,
+                3,
+                67,
+                95,
+                62,
+                22,
+                89,
+                69,
+                14,
+                41,
+                79,
+                77,
+                27,
+                26,
+                34,
+                69,
+                44,
+                89,
+                86,
+                92,
+                1
+            ],
+            "TE208": [
+                76,
+                14,
+                35,
+                1,
+                36,
+                67,
+                40,
+                5,
+                53,
+                98,
+                46,
+                29,
+                71,
+                12,
+                43,
+                42,
+                53,
+                56,
+                9,
+                17,
+                34,
+                42,
+                82,
+                73
+            ],
+            "TE210": [
+                81,
+                12,
+                86,
+                55,
+                50,
+                59,
+                20,
+                67,
+                66,
+                29,
+                17,
+                74,
+                11,
+                12,
+                63,
+                23,
+                34,
+                86,
+                9,
+                38,
+                99,
+                3,
+                33,
+                77
+            ]
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/yx-dark/socket-server/index.ts b/src/components/yx-dark/socket-server/index.ts
new file mode 100644
index 0000000..000c551
--- /dev/null
+++ b/src/components/yx-dark/socket-server/index.ts
@@ -0,0 +1,67 @@
+import { WebSocket, WebSocketServer } from "ws";
+import demoData from "./demo.json";
+
+const wss = new WebSocketServer({ port: 9800 });
+const frequency = 3; // seconds
+wss.on("connection", function (ws, req) {
+  // console.log("ws", ws);
+  console.log(
+    "Client in: ",
+    req.socket.remoteAddress,
+    "current users:",
+    wss.clients.size
+  );
+  // ws.on("error", console.error);
+  // ws.emit("message", "connected");
+  ws.on("open", function () {
+    console.log("connected");
+    ws.send("connected");
+  });
+  ws.on("message", function (msg) {
+    console.log("message from client", msg);
+    ws.send("echo " + msg.toString());
+  });
+  ws.on("error", console.error);
+
+  const timer = setInterval(() => {
+    sendMsg(ws, "base-info");
+    sendMsg(ws, "fan");
+    sendMsg(ws, "gas");
+    sendMsg(ws, "kiln-top");
+    sendMsg(ws, "kiln-bottom");
+  }, frequency * 1000);
+
+  ws.on("close", function () {
+    console.log("停止监听");
+    clearInterval(timer);
+  });
+});
+
+type MsgType = "base-info" | "fan" | "gas" | "kiln-top" | "kiln-bottom";
+
+function sendMsg(ws: WebSocket, type: MsgType) {
+  let data: any;
+  switch (type) {
+    case "base-info":
+      data = demoData.baseInfo;
+      break;
+    case "fan":
+      data = demoData.fan;
+      break;
+    case "gas":
+      data = demoData.gas;
+      break;
+    case "kiln-top":
+      data = demoData.kilnTop;
+      break;
+    case "kiln-bottom":
+      data = demoData.kilnBottom;
+      break;
+    default:
+      data = "You are connected!";
+      break;
+  }
+  // console.log("sendMsg: ", ws);
+  // ws.emit("message", JSON.stringify(data));
+  ws.send(JSON.stringify(data));
+}
diff --git a/src/components/yx-dark/socket-server/tsconfig.json b/src/components/yx-dark/socket-server/tsconfig.json
new file mode 100644
index 0000000..afa29e7
--- /dev/null
+++ b/src/components/yx-dark/socket-server/tsconfig.json
@@ -0,0 +1,109 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}
diff --git a/src/utils/wsClass.js b/src/utils/wsClass.js
index cdc829e..ec30b56 100644
--- a/src/utils/wsClass.js
+++ b/src/utils/wsClass.js
@@ -39,7 +39,8 @@ function handleClose(data) {
 
 
 export default class WsClient {
-  static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
+  // static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
+  static wsServer = 'ws://127.0.0.1:9800'
   // static wsServer = 'ws://m306416y13.yicp.fun:48978/dz-screen/websocket/1'
   static tableMap = {
     // 窑顶温度
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b6eef17..361568f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -23,6 +23,8 @@ import LeftSide from "./LeftSide.vue";
 import RightSide from "./RightSide.vue";
 import MainPanel from "./MainPanel.vue";
 
+import WsClient from "../utils/wsClass";
+
 export default {
   name: "HomeView",
   components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
@@ -42,6 +44,10 @@ export default {
       };
     },
   },
+  created() {
+    // const wsc = new WsClient(this);
+    // wsc.registerListeners();
+  },
   mounted() {
     const slider = document.createElement("div");
     slider.id = "slider";
diff --git a/yarn.lock b/yarn.lock
index 03f5605..d721121 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1198,10 +1198,10 @@
   "resolved" "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz"
   "version" "1.2.2"
 
-"@types/node@*":
-  "integrity" "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A=="
-  "resolved" "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz"
-  "version" "20.1.0"
+"@types/node@*", "@types/node@^20.6.0":
+  "integrity" "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg=="
+  "resolved" "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz"
+  "version" "20.6.0"
 
 "@types/normalize-package-data@^2.4.0":
   "integrity" "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
@@ -1258,10 +1258,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/ws@^8.5.1":
-  "integrity" "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg=="
-  "resolved" "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz"
-  "version" "8.5.4"
+"@types/ws@^8.5.1", "@types/ws@^8.5.5":
+  "integrity" "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg=="
+  "resolved" "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz"
+  "version" "8.5.5"
   dependencies:
     "@types/node" "*"
 
@@ -5573,13 +5573,13 @@
 
 "ws@^7.3.1":
   "integrity" "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
-  "resolved" "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz"
+  "resolved" "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz"
   "version" "7.5.9"
 
-"ws@^8.13.0":
-  "integrity" "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
-  "resolved" "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz"
-  "version" "8.13.0"
+"ws@^8.13.0", "ws@^8.14.1":
+  "integrity" "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A=="
+  "resolved" "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz"
+  "version" "8.14.1"
 
 "y18n@^5.0.5":
   "integrity" "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="