From a6e380a64cdb508a01e9ecc01906eadfecf184ac Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 17 Jan 2024 14:45:09 +0800
Subject: [PATCH] update realtime data fetching

---
 src/components/Base/Container.vue |   4 +-
 src/components/RealtimeChart.vue  | 140 +++++++++++++++++++++++-------
 src/components/RealtimeTable.vue  | 111 +++++++++++------------
 3 files changed, 163 insertions(+), 92 deletions(-)

diff --git a/src/components/Base/Container.vue b/src/components/Base/Container.vue
index 282ee0f..76951f8 100644
--- a/src/components/Base/Container.vue
+++ b/src/components/Base/Container.vue
@@ -106,8 +106,8 @@ const props = defineProps({
 }
 
 .container-body {
-  background: #ffffff33;
-  backdrop-filter: blur(1px);
+  background: #ffffff11;
+  backdrop-filter: blur(2px);
   flex: 1;
   padding: 20px;
 }
diff --git a/src/components/RealtimeChart.vue b/src/components/RealtimeChart.vue
index c6a9dc0..4d06959 100644
--- a/src/components/RealtimeChart.vue
+++ b/src/components/RealtimeChart.vue
@@ -1,35 +1,115 @@
-<!-- 货物情况 -->
-
+<!-- 实时数据图表 -->
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
-
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
 const cargoChart = ref(null);
+const chart = ref(null);
+const options = {
+  color: ["#99D66C", "#5B9BFF"],
+  grid: {
+    top: 72,
+    bottom: 72,
+    left: 112,
+    right: 88,
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  xAxis: {
+    type: "value",
+    position: "top",
+    splitLine: {
+      lineStyle: {
+        type: "dashed",
+        color: "#ccc8",
+      },
+    },
+    axisLabel: {
+      fontSize: 24,
+      color: "#fff",
+    },
+    minInterval: 1,
+  },
+  yAxis: {
+    type: "category",
+    axisLine: { show: false },
+    axisLabel: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    data: ["废片", "阶段成品"],
+    axisLabel: {
+      fontSize: 24,
+      color: "#fff",
+    },
+  },
+  title: [
+    {
+      text: 0 + "片",
+      left: "50%",
+      textAlign: "center",
+      top: "82%",
+      textStyle: {
+        fontSize: 32,
+        color: "#fff",
+      },
+    },
+    {
+      text: 0 + "片",
+      left: "50%",
+      textAlign: "center",
+      top: "44%",
+      textStyle: {
+        fontSize: 32,
+        color: "#fff",
+      },
+    },
+  ],
+  series: [
+    {
+      name: "数量",
+      type: "bar",
+      stack: "Total",
+      showBackground: true,
+      barWidth: "32",
+      colorBy: "data",
+      data: [
+        { value: 0, label: { fontSize: 28 } },
+        { value: 0, label: { fontSize: 28 } },
+      ],
+    },
+  ],
+};
+
+function updateChartOption(product, scrap) {
+  if (!chart.value) chart.value = echarts.init(cargoChart.value);
+  else {
+    chart.value.dispose();
+    chart.value = echarts.init(cargoChart.value);
+  }
+  options.title[0].text = product + "片";
+  options.title[1].text = scrap + "片";
+  options.series[0].data[0].value = product;
+  options.series[0].data[1].value = scrap;
+  chart.value.setOption(options);
+}
+
+const productAmount = ref(0);
+const scrapAmount = ref(0);
+const store = useWsStore();
+store.$subscribe((mutation, state) => {
+  productAmount.value = state.data1.realTimeData?.product || 0;
+  scrapAmount.value = state.data1.realTimeData?.scrap || 0;
+  updateChartOption(productAmount.value, scrapAmount.value);
+});
 
 onMounted(() => {
-  cargoChart.value.classList.add('h-full');
-  const mc = echarts.init(cargoChart.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],
-      },
-    ],
-  });
+  cargoChart.value.classList.add("h-full");
+  updateChartOption(productAmount.value, scrapAmount.value);
 });
 </script>
 
@@ -46,10 +126,6 @@ onMounted(() => {
   align-self: self-end;
 }
 
-.cargo-inner {
-  background: #0f0;
-}
-
 .cargo-chart {
   height: 100%;
 }
diff --git a/src/components/RealtimeTable.vue b/src/components/RealtimeTable.vue
index 570f74c..70c0da8 100644
--- a/src/components/RealtimeTable.vue
+++ b/src/components/RealtimeTable.vue
@@ -1,73 +1,68 @@
 <!-- 实时数据表格 -->
 <script setup>
-import { ref } from 'vue';
-import { useWsStore } from '../store';
+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,
-    }));
+  listData.value = (state.data2.lineDetailData || Array(3).fill({})).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: '---' },
-    { productLine: '00B', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
-    { productLine: '00C', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
-    { productLine: '00D', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
-    { productLine: '00E', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
-    { productLine: '00F', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
-]
 </script>
 
 <template>
-    <div class="realtime-table">
-        <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>
-            <el-table-column prop="mbb" label="磨边下"></el-table-column>
-            <el-table-column prop="dkt" label="打孔上"></el-table-column>
-            <el-table-column prop="dkb" label="打孔下"></el-table-column>
-            <el-table-column prop="dmt" label="镀膜上"></el-table-column>
-            <el-table-column prop="dmb" label="镀膜下"></el-table-column>
-            <el-table-column prop="syt" label="丝印上"></el-table-column>
-            <el-table-column prop="syb" label="丝印下"></el-table-column>
-            <el-table-column prop="ght" label="固化上"></el-table-column>
-            <el-table-column prop="ghb" label="固化下"></el-table-column>
-            <el-table-column prop="gh1" label="钢化上"></el-table-column>
-            <el-table-column prop="gh2" label="钢化下"></el-table-column>
-            <el-table-column prop="bzt" label="包装上"></el-table-column>
-            <el-table-column prop="bzb" label="包装下"></el-table-column>
-        </el-table>
-    </div>
+  <div class="realtime-table">
+    <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>
+      <el-table-column prop="mbb" label="磨边下"></el-table-column>
+      <el-table-column prop="dkt" label="打孔上"></el-table-column>
+      <el-table-column prop="dkb" label="打孔下"></el-table-column>
+      <el-table-column prop="dmt" label="镀膜上"></el-table-column>
+      <el-table-column prop="dmb" label="镀膜下"></el-table-column>
+      <el-table-column prop="syt" label="丝印上"></el-table-column>
+      <el-table-column prop="syb" label="丝印下"></el-table-column>
+      <el-table-column prop="ght" label="固化上"></el-table-column>
+      <el-table-column prop="ghb" label="固化下"></el-table-column>
+      <el-table-column prop="gh1" label="钢化上"></el-table-column>
+      <el-table-column prop="gh2" label="钢化下"></el-table-column>
+      <el-table-column prop="bzt" label="包装上"></el-table-column>
+      <el-table-column prop="bzb" label="包装下"></el-table-column>
+    </el-table>
+  </div>
 </template>
 
-<style scoped> 
-
+<style scoped>
 .realtime-table {
-     background: #00f3;
-     height: 240px;
-     width: 80%;
-     align-self: self-start;
- }
+  background: #00f3;
+  height: 240px;
+  width: 80%;
+  align-self: self-start;
+}
 
- .dark-table {
-    height: 100%;
- }
+.dark-table {
+  height: 100%;
+}
 </style>