update useWebsocket

src/App.vue

@@ -2,50 +2,24 @@
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
 import Slider from "./components/Slider.vue";
-import Client from "./utils/ws";
+import useWebsocket from "./utils/useWebsocket";
 import { useWsStore } from "./store";
-
 const store = useWsStore();
 
-const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+// use websocket
 let urlPath = document.location.pathname;
 if (urlPath === "/") {
   urlPath = "/1-1";
 }
-new Client(
-  {
-    url: url + urlPath,
-    name: urlPath,
-  },
-  (message) => {
-    try {
-      const data = JSON.parse(message.data);
-      console.log("message", JSON.parse(message.data));
-
-      if ("specificationChanges" in data) {
-        console.log("[*] setting data1");
-        // 分屏推送1数据
-        store.updateData("1", data);
-      } else if ("deliveryNotification" in data) {
-        // 分屏推送3数据
-        console.log("[*] setting data3");
-        store.updateData("3", data);
-      } else {
-        // 分屏推送2数据
-        console.log("[*] setting data2");
-        store.updateData("2", data);
-      }
-    } catch (err) {
-      console.log("[x] 未解析的ws数据: ", err);
-    }
-  }
-);
+useWebsocket(store, urlPath);
 
+// size setting
 const size = ref(80);
 onMounted(() => {
   setSize(size.value);
 });
 
+// style update
 const styles = ref({});
 function setSize(value) {
   const v = (value / 100).toFixed(2);

src/components/HourChart.vue

@@ -1,10 +1,13 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
-import { useWsStore } from '../store'
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import charSetup from "./HourChartOptions";
+
 const store = useWsStore();
 const chartChart = ref(null);
+const chart = ref(null);
 // 小时数据
 const hourData = ref([]);
 // store.$subscribe((mutation, state) => {
@@ -19,28 +22,8 @@ const hourData = ref([]);
 // });
 
 onMounted(() => {
-  chartChart.value.classList.add('h-full');
-  const mc = echarts.init(chartChart.value);
-  mc.setOption({
-    grid: {
-      top: 24,
-      bottom: 24,
-      left: 24,
-      right: 24,
-    },
-    tooltip: {},
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
-      },
-    ],
-  });
+  chartChart.value.classList.add("h-full");
+  chart.value = echarts.init(chartChart.value);
 });
 </script>
 

src/components/HourChartOptions.js

@@ -0,0 +1,40 @@
+export const options = {
+  grid: {
+    top: "5%",
+    bottom: "5%",
+    left: "3%",
+    right: "3%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    axisLabel: {
+      fontSize: 24,
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      fontSize: 24,
+    },
+    minInterval: 1,
+  },
+  series: [
+    {
+      data: [],
+      type: "bar",
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+export default function setup(echartInstance, timeArr, dataArr) {
+  const options = { ...options };
+  options.xAxis.data = timeArr;
+  options.series[0].data = dataArr;
+  echartInstance.setOption(options);
+}

src/utils/useWebsocket.js

@@ -0,0 +1,55 @@
+import Client from "./ws";
+
+export default function useWebsocket(store, path) {
+  connect0(store);
+  connectPath(store, path);
+}
+
+const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+function connectPath(store, path) {
+  new Client(
+    {
+      url: url + path,
+      name: path,
+    },
+    (message) => {
+      try {
+        const data = JSON.parse(message.data);
+        console.log("message", JSON.parse(message.data));
+
+        if ("specificationChanges" in data) {
+          console.log("[*] setting data1");
+          // 分屏推送1数据
+          store.updateData("1", data);
+        } else if ("deliveryNotification" in data) {
+          // 分屏推送3数据
+          console.log("[*] setting data3");
+          store.updateData("3", data);
+        } else {
+          // 分屏推送2数据
+          console.log("[*] setting data2");
+          store.updateData("2", data);
+        }
+      } catch (err) {
+        console.log("[x] 未解析的ws数据: ", err);
+      }
+    }
+  );
+}
+
+function connect0(store) {
+  new Client(
+    {
+      url: url + "/0",
+      name: "/0",
+    },
+    (message) => {
+      try {
+        const data = JSON.parse(message.data);
+        console.log("message --- 0 ---> ", JSON.parse(message.data));
+      } catch (err) {
+        console.log("[x] 未解析的ws数据: ", err);
+      }
+    }
+  );
+}