update data fetch

2024-01-17 13:49:56 +08:00 · 2024-01-17 13:49:56 +08:00 · 9805d29df3
commit 9805d29df3
parent 9d48e56dd0
5 changed files with 373 additions and 110 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,12 +1,12 @@
 <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";
 import { useWsStore } from "./store";

 const store = useWsStore();
-
+ 
 const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
 let urlPath = document.location.pathname;
 if (urlPath === "/") {
@ -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')
-        store.updateData('3', data);
+        console.log("[*] setting data3");
+        store.updateData("3", data);
      } else {
        // 分屏推送2数据
-        console.log('[*] setting data2')
-        store.updateData('2', data);
+        console.log("[*] setting data2");
+        store.updateData("2", data);
      }
-    } catch(err) {
-      console.log('[x] 未解析的ws数据: ', err);
+    } catch (err) {
+      console.log("[x] 未解析的ws数据: ", err);
    }
  }
 );

-
 const styles = ref({});
 function setSize(value) {
  const v = (value / 100).toFixed(2);
--- a/src/components/HourChart.vue
+++ b/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');
--- a/src/components/RealtimeTable.vue
+++ b/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>
--- a/src/pages/AlertListPage.vue
+++ b/src/pages/AlertListPage.vue
@ -1,140 +1,374 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref } from 'vue';
-
-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' },
-]
+import { ref } from "vue";
+import { useWsStore } from "../store";
+const alarmList = ref([]);
+const store = useWsStore();
+store.$subscribe((mutation, state) => {
+//   console.log("====state====\n");
+//   console.log(state.data1);
+//   console.log(state.data2);
+//   console.log(state.data3);
+//   console.log("====state end====\n");
+  alarmList.value = state.data1.alarmArrList.map((item, index) => ({
+    id: item.id,
+    eqName: item.equipmentName,
+    eqIndex: index + 1,
+    alarmGrade: item.alarmLevel,
+    alarmDetail: item.alarmDetails,
+    position: `${item.productLine} - ${item.segment}`,
+  }));
+});

+// 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"
-                    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>
-            <button class="alert-btn">忽略</button>
-        </div>
+  <div class="alert-list-page">
+    <div class="alert-list">
+      <div class="alert-list__table" style="">
+        <el-table
+          class="dark-table"
+          :data="alarmList"
+          :show-overflow-tooltip="true"
+          row-class-name="dark-row"
+          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>
+      <button class="alert-btn">忽略</button>
    </div>
+  </div>
 </template>

 <style>
 .dark-table {
-    /* height: 72vh; */
-    /* height: 72%; */
-    height: 100%;
-    background: transparent;
+  /* height: 72vh; */
+  /* height: 72%; */
+  height: 100%;
+  background: transparent;
 }

 .dark-row {
-    color: #fff;
-    background: #005eff25 !important;
+  color: #fff;
+  background: #005eff25 !important;
 }

-.dark-row>td.el-table__cell {
-    border: none;
+.dark-row > td.el-table__cell {
+  border: none;
 }

-.dark-row:hover>td.el-table__cell {
-    background-color: #005effaa !important;
+.dark-row:hover > td.el-table__cell {
+  background-color: #005effaa !important;
 }

 .dark-header {
-    background-color: transparent !important;
-    color: #fff;
+  background-color: transparent !important;
+  color: #fff;
 }

-.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.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>

 <style scoped>
 .alert-list-page {
-    flex: 1;
-    position: relative;
+  flex: 1;
+  position: relative;
 }

 .alert-list {
-    height: 100%;
-    width: 480px;
+  height: 100%;
+  width: 480px;

-    position: absolute;
-    top: 0;
-    right: 0;
+  position: absolute;
+  top: 0;
+  right: 0;

-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }

 .alert-list__table {
-    height: calc(100% - 72px);
-    background: linear-gradient(to right, transparent, #0ba6ff80);
+  height: calc(100% - 72px);
+  background: linear-gradient(to right, transparent, #0ba6ff80);
 }

-.alert-list__table>>>.el-table__inner-wrapper::before {
-    background: transparent;
+.alert-list__table >>> .el-table__inner-wrapper::before {
+  background: transparent;
 }

 button {
-    appearance: none;
-    outline: none;
-    border: none;
-    cursor: pointer;
+  appearance: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
 }

 .alert-btn {
-    height: 72px;
-    background: #0f04;
-    color: #fff;
-    font-size: 32px;
-    line-height: 1;
-    letter-spacing: 2px;
-    transition: all .2s ease-out;
+  height: 72px;
+  background: #0f04;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  letter-spacing: 2px;
+  transition: all 0.2s ease-out;
 }

 .alert-btn:hover {
-    background: #0f08;
+  background: #0f08;
 }
 </style>
--- a/src/pages/DataPage.vue
+++ b/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>