update websocket and store

src/MainScreen.vue

@@ -10,6 +10,7 @@ import SumYield from "./components/mainscreen/SumYield.vue";
 import TodayRate from "./components/mainscreen/TodayRate.vue";
 import SumRate from "./components/mainscreen/SumRate.vue";
 import FullEqList from "./FullEqList.vue";
+import { connect0 } from "./utils/useWebsocket";
 
 const mainContainer = ref(null);
 const props = defineProps({
@@ -19,6 +20,9 @@ const props = defineProps({
   },
 });
 const store = useWsStore();
+
+connect0(store);
+
 const alarmList = ref(
   (store.data1.alarmArrList || []).map((item, index) => ({
     id: item.id,

src/components/mainscreen/SumRate.vue

@@ -50,14 +50,14 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
     series: [
       {
         type: "line",
-        data: datalist.map((item) => item * 100),
+        data: datalist,
         label: {
           show: true,
           position: "top",
           // formatter: (params) => {
           //   console.log("params", datalist[params.dataIndex]);
           // },
-          formatter: '{c}%',
+          formatter: "{c}%",
           color: "#fff",
           fontSize: 14,
         },
@@ -112,20 +112,20 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  // __apply(state.data2.lineSumProductYield);
-  __apply([
-    { name: "钢1线", data: 0.32 },
-    { name: "钢2线", data: 0.91 },
-    { name: "钢3线", data: 0.54 },
-  ]);
+  __apply(state.mainDataChart.lineSumProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
   __apply([
-    { name: "钢1线", data: 0.32 },
-    { name: "钢2线", data: 0.91 },
-    { name: "钢3线", data: 0.54 },
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
   ]);
 });
 </script>

src/components/mainscreen/SumYield.vue

@@ -114,23 +114,22 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  // __apply(state.data2.classTodayProductYield);
-  // __apply(state.data2.classTodayProductYield);
-  __apply([
-    { name: "钢1线", data: 11 },
-    { name: "钢2线", data: 22 },
-    { name: "钢3线", data: 33 },
-    { name: "合计", data: 66 },
-  ]);
+  __apply(state.mainDataChart.lineSumProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
   __apply([
-    { name: "钢1线", data: 11 },
-    { name: "钢2线", data: 22 },
-    { name: "钢3线", data: 33 },
-    { name: "合计", data: 66 },
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
   ]);
 });
 </script>

src/components/mainscreen/TodayRate.vue

@@ -50,14 +50,15 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
     series: [
       {
         type: "line",
-        data: datalist.map((item) => item * 100),
+        data: datalist,
+        // data: datalist.map((item) => item * 100),
         label: {
           show: true,
           position: "top",
           // formatter: (params) => {
           //   console.log("params", datalist[params.dataIndex]);
           // },
-          formatter: '{c}%',
+          formatter: "{c}%",
           color: "#fff",
           fontSize: 14,
         },
@@ -80,11 +81,11 @@ function loadData(yieldArray) {
   if (yieldArray == undefined || yieldArray?.length == 0) return null;
   for (let i = 0; i < yieldArray.length; ++i) {
     if (yieldArray[i].name == "钢1线") {
-      result[0] = parseFloat(yieldArray[i].data);
+      result[0] = parseFloat(yieldArray[i].data) || 0.0;
     } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseFloat(yieldArray[i].data);
+      result[1] = parseFloat(yieldArray[i].data) || 0.0;
     } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseFloat(yieldArray[i].data);
+      result[2] = parseFloat(yieldArray[i].data) || 0.0;
     }
   }
   return result;
@@ -112,20 +113,20 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  // __apply(state.data2.classTodayProductYield);
-  __apply([
-    { name: "钢1线", data: 0.32 },
-    { name: "钢2线", data: 0.91 },
-    { name: "钢3线", data: 0.54 },
-  ]);
+  __apply(state.mainDataChart.lineTodayProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
   __apply([
-    { name: "钢1线", data: 0.32 },
-    { name: "钢2线", data: 0.91 },
-    { name: "钢3线", data: 0.54 },
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
   ]);
 });
 </script>

src/components/mainscreen/TodayYield.vue

@@ -114,22 +114,22 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  // __apply(state.data2.classTodayProductYield);
-  __apply([
-    { name: "钢1线", data: 11 },
-    { name: "钢2线", data: 22 },
-    { name: "钢3线", data: 33 },
-    { name: "合计", data: 66 },
-  ]);
+  __apply(state.mainDataChart.lineTodayProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
   __apply([
-    { name: "钢1线", data: 11 },
-    { name: "钢2线", data: 22 },
-    { name: "钢3线", data: 33 },
-    { name: "合计", data: 66 },
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
   ]);
 });
 </script>

src/store/index.js

@@ -2,9 +2,11 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useWsStore = defineStore("wsData", () => {
-  const data1 = ref({ test: "hello world" });
+  const data1 = ref({});
   const data2 = ref({});
   const data3 = ref({});
+  const mainDataChart = ref({});
+  const mainDataAlarm = ref({});
 
   function updateData(category, data) {
     switch (category) {
@@ -16,12 +18,19 @@ export const useWsStore = defineStore("wsData", () => {
         break;
       case "3":
         data3.value = { ...data3.value, ...data };
+        break;
+      case "main-chart":
+        mainDataChart.value = { ...mainDataChart.value, ...data };
+        break;
+      case "main-alarm":
+        mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
+        break;
       default:
         break;
     }
   }
 
-  return { data1, data2, data3, updateData };
+  return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
 });
 // export const useWsStore = defineStore('wsData', {
 //     state: () => ({

src/utils/useWebsocket.js

@@ -6,7 +6,8 @@ export default function useWebsocket(store, path, excludePaths = []) {
   connectPath(store, path);
 }
 
-const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+// const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+const url = "ws://192.168.0.33:8082/QbMonitoring/websocket";
 function connectPath(store, path) {
   new Client(
     {
@@ -34,7 +35,8 @@ function connectPath(store, path) {
   );
 }
 
-function connect0(store) {
+export function connect0(store) {
+  console.log("[*] Connecting main screen........");
   new Client(
     {
       url: url + "/0",
@@ -44,6 +46,14 @@ function connect0(store) {
       try {
         const data = JSON.parse(message.data);
         console.log("message --- 0 ---> ", JSON.parse(message.data));
+
+        if ("lineSumProductYield" in data) {
+          // 主屏推送 图表数据
+          store.updateData("main-chart", data);
+        } else {
+          // 主屏推送 报警数据
+          store.updateData("main-alarm", data);
+        }
       } catch (err) {
         console.log("[x] 未解析的ws数据: ", err);
       }