update data fetch

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, provide } from "vue";
+import { ref, watch, computed } from "vue";
 import MainPage from "./MainPage.vue";
 import Slider from "./components/Slider.vue";
 import Client from "./utils/ws";
@@ -19,30 +19,28 @@ new Client(
   },
   (message) => {
     try {
-
       const data = JSON.parse(message.data);
       console.log("message", JSON.parse(message.data));
 
       if ("specificationChanges" in data) {
-        console.log('[*] setting data1')
+        console.log("[*] setting data1");
         // 分屏推送1数据
-        store.updateData('1', data);
+        store.updateData("1", data);
       } else if ("deliveryNotification" in data) {
         // 分屏推送3数据
-        console.log('[*] setting data3')
+        console.log("[*] setting data3");
-        store.updateData('3', data);
+        store.updateData("3", data);
       } else {
         // 分屏推送2数据
-        console.log('[*] setting data2')
+        console.log("[*] setting data2");
-        store.updateData('2', data);
+        store.updateData("2", data);
       }
-    } catch(err) {
+    } catch (err) {
-      console.log('[x] 未解析的ws数据: ', err);
+      console.log("[x] 未解析的ws数据: ", err);
     }
   }
 );
 
-
 const styles = ref({});
 function setSize(value) {
   const v = (value / 100).toFixed(2);

src/components/HourChart.vue

@@ -2,8 +2,21 @@
 import { ref, onMounted } from 'vue';
 import * as echarts from 'echarts';
 import Container from './Base/Container.vue';
-
+import { useWsStore } from '../store'
+const store = useWsStore();
 const chartChart = ref(null);
+// 小时数据
+const hourData = ref([]);
+// store.$subscribe((mutation, state) => {
+//   hourData.value = state.data2.lineDetailData.map((item, index) => ({
+//     id: item.id,
+//     eqName: item.equipmentName,
+//     eqIndex: index + 1,
+//     alarmGrade: item.alarmLevel,
+//     alarmDetail: item.alarmDetails,
+//     position: `${item.productLine} - ${item.segment}`,
+//   }));
+// });
 
 onMounted(() => {
   chartChart.value.classList.add('h-full');

src/components/RealtimeTable.vue

@@ -1,5 +1,29 @@
 <!-- 实时数据表格 -->
 <script setup>
+import { ref } from 'vue';
+import { useWsStore } from '../store';
+
+const listData = ref([]);
+const store = useWsStore();
+store.$subscribe((mutation, state) => {
+    listData.value = state.data2.lineDetailData.map((item, index) => ({
+        productLine: item.productLine,
+        mbt: item.edgingInput,
+        mbb: item.edgingOutput,
+        dkt: item.drillingInput,
+        dkb: item.drillingOutput,
+        dmt: item.coatingInput,
+        dmb: item.coatingOutput,
+        syt: item.silkInput,
+        syb: item.silkOutput,
+        ght: item.solidificationInput,
+        ghb: item.solidificationOutput,
+        gh1: item.temperingInput,
+        gh2: item.temperingOutput,
+        bzt: item.finalInput,
+        bzb: item.finalOutput,
+    }));
+});
 
 const tableData = [
     { productLine: '00A', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
@@ -13,7 +37,7 @@ const tableData = [
 
 <template>
     <div class="realtime-table">
-        <el-table class="dark-table" :data="tableData" :show-overflow-tooltip="true" row-class-name="dark-row"
+        <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
             header-row-class-name="dark-header">
             <el-table-column prop="productLine" label="产线"></el-table-column>
             <el-table-column prop="mbt" label="磨边上"></el-table-column>

src/pages/AlertListPage.vue

@@ -1,50 +1,284 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
-
+import { useWsStore } from "../store";
-const tableData = [
+const alarmList = ref([]);
-    { id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+const store = useWsStore();
-    { id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+store.$subscribe((mutation, state) => {
-    { id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+//   console.log("====state====\n");
-    { id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+//   console.log(state.data1);
-    { id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+//   console.log(state.data2);
-    { id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+//   console.log(state.data3);
-    { id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+//   console.log("====state end====\n");
-    { id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+  alarmList.value = state.data1.alarmArrList.map((item, index) => ({
-    { id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    id: item.id,
-    { id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    eqName: item.equipmentName,
-    { id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    eqIndex: index + 1,
-    { id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    alarmGrade: item.alarmLevel,
-    { id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    alarmDetail: item.alarmDetails,
-    { id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+    position: `${item.productLine} - ${item.segment}`,
-    { id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+  }));
-    { id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
+});
-    { id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-    { id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
-]
 
+// const tableData = [
+//   {
+//     id: 1,
+//     eqName: "设备00A",
+//     eqIndex: "1",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 2,
+//     eqName: "设备00B",
+//     eqIndex: "2",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 3,
+//     eqName: "设备00C",
+//     eqIndex: "3",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 4,
+//     eqName: "设备00D",
+//     eqIndex: "4",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 5,
+//     eqName: "设备00E",
+//     eqIndex: "5",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 6,
+//     eqName: "设备00F",
+//     eqIndex: "6",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 7,
+//     eqName: "设备00G",
+//     eqIndex: "7",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 1,
+//     eqName: "设备00A",
+//     eqIndex: "1",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 2,
+//     eqName: "设备00B",
+//     eqIndex: "2",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 3,
+//     eqName: "设备00C",
+//     eqIndex: "3",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 4,
+//     eqName: "设备00D",
+//     eqIndex: "4",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 5,
+//     eqName: "设备00E",
+//     eqIndex: "5",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 6,
+//     eqName: "设备00F",
+//     eqIndex: "6",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 7,
+//     eqName: "设备00G",
+//     eqIndex: "7",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 1,
+//     eqName: "设备00A",
+//     eqIndex: "1",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 2,
+//     eqName: "设备00B",
+//     eqIndex: "2",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 3,
+//     eqName: "设备00C",
+//     eqIndex: "3",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 4,
+//     eqName: "设备00D",
+//     eqIndex: "4",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 5,
+//     eqName: "设备00E",
+//     eqIndex: "5",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 6,
+//     eqName: "设备00F",
+//     eqIndex: "6",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 7,
+//     eqName: "设备00G",
+//     eqIndex: "7",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 1,
+//     eqName: "设备00A",
+//     eqIndex: "1",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 2,
+//     eqName: "设备00B",
+//     eqIndex: "2",
+//     alarmGrade: 1,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 3,
+//     eqName: "设备00C",
+//     eqIndex: "3",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 4,
+//     eqName: "设备00D",
+//     eqIndex: "4",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 5,
+//     eqName: "设备00E",
+//     eqIndex: "5",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 6,
+//     eqName: "设备00F",
+//     eqIndex: "6",
+//     alarmGrade: 3,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+//   {
+//     id: 7,
+//     eqName: "设备00G",
+//     eqIndex: "7",
+//     alarmGrade: 2,
+//     alarmDetail: "lorem sdf fkj",
+//     position: "x,y",
+//   },
+// ];
 </script>
 
 <template>
   <div class="alert-list-page">
     <div class="alert-list">
       <div class="alert-list__table" style="">
-                <el-table class="dark-table" :data="tableData" :show-overflow-tooltip="true" row-class-name="dark-row"
+        <el-table
-                    header-row-class-name="dark-header">
+          class="dark-table"
-                    <el-table-column prop="eqName" label="设备名" width="90"></el-table-column>
+          :data="alarmList"
-                    <el-table-column prop="eqIndex" label="序号" width="60"></el-table-column>
+          :show-overflow-tooltip="true"
-                    <el-table-column prop="alarmGrade" label="报警等级" width="90"></el-table-column>
+          row-class-name="dark-row"
-                    <el-table-column prop="alarmDetail" label="报警细节" width="144"></el-table-column>
+          header-row-class-name="dark-header"
+        >
+          <el-table-column
+            prop="eqName"
+            label="设备名"
+            width="90"
+          ></el-table-column>
+          <el-table-column
+            prop="eqIndex"
+            label="序号"
+            width="60"
+          ></el-table-column>
+          <el-table-column
+            prop="alarmGrade"
+            label="报警等级"
+            width="90"
+          ></el-table-column>
+          <el-table-column
+            prop="alarmDetail"
+            label="报警细节"
+            width="144"
+          ></el-table-column>
           <el-table-column prop="position" label="定位"></el-table-column>
         </el-table>
       </div>
@@ -66,11 +300,11 @@ const tableData = [
   background: #005eff25 !important;
 }
 
-.dark-row>td.el-table__cell {
+.dark-row > td.el-table__cell {
   border: none;
 }
 
-.dark-row:hover>td.el-table__cell {
+.dark-row:hover > td.el-table__cell {
   background-color: #005effaa !important;
 }
 
@@ -79,14 +313,14 @@ const tableData = [
   color: #fff;
 }
 
-.dark-header>th.el-table__cell.is-leaf {
+.dark-header > th.el-table__cell.is-leaf {
   border-bottom: none;
   background-color: #005eff95 !important;
   font-weight: 400;
   letter-spacing: 1px;
 }
 
-.dark-header>th.el-table__cell {
+.dark-header > th.el-table__cell {
 }
 </style>
 
@@ -113,7 +347,7 @@ const tableData = [
   background: linear-gradient(to right, transparent, #0ba6ff80);
 }
 
-.alert-list__table>>>.el-table__inner-wrapper::before {
+.alert-list__table >>> .el-table__inner-wrapper::before {
   background: transparent;
 }
 
@@ -131,7 +365,7 @@ button {
   font-size: 32px;
   line-height: 1;
   letter-spacing: 2px;
-    transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .alert-btn:hover {

src/pages/DataPage.vue

@@ -3,12 +3,6 @@
 import HourChart from "../components/HourChart.vue";
 import TeamChartDay from "../components/TeamChartDay.vue";
 import TeamChartMonth from "../components/TeamChartMonth.vue";
-
-import { useWsStore } from '../store'
-
-const store = useWsStore();
-
-console.log('store', store.data1.test);
 </script>
 
 <template>