From 112730b52a2996e0ae3387c96d5b894f795ec415 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Tue, 23 Jan 2024 10:06:25 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=B8=8A=E4=B8=8B=E7=89=87=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/IconStatus.vue |  24 ++
 src/pages/3D.vue              | 450 +++++++++++++++++++++++++++-------
 2 files changed, 389 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/svg/IconStatus.vue

diff --git a/src/assets/svg/IconStatus.vue b/src/assets/svg/IconStatus.vue
new file mode 100644
index 0000000..aba19df
--- /dev/null
+++ b/src/assets/svg/IconStatus.vue
@@ -0,0 +1,24 @@
+<!-- Icon: alert Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态icon</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" :fill="color ?? '#24FF5E'" fill-rule="nonzero">
+        <g id="状态icon" transform="translate(641.167539, 519.090909)">
+          <path
+            d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z"
+            id="形状"></path>
+        </g>
+      </g>
+    </g>
+</svg></template>
diff --git a/src/pages/3D.vue b/src/pages/3D.vue
index c32a333..e7fa192 100644
--- a/src/pages/3D.vue
+++ b/src/pages/3D.vue
@@ -1,8 +1,29 @@
 <!-- 三维页面 -->
 <script setup>
-import { useSettings } from '../store/settings'
-import { computed } from 'vue';
+import { useSettings } from '../store/settings';
+import { useWsStore } from "../store";
+import { ref, computed } from 'vue';
+import Icon from '../assets/svg/IconStatus.vue';
+
 const { settings } = useSettings();
+const store = useWsStore();
+const lines = ref({
+  g1: null,
+  g2: null,
+  g3: null, // 钢3线
+});
+store.$subscribe((mutation, state) => {
+  if (state.data2.lineDetailData && state.data2.lineDetailData.length == 3) {
+    lines.value.g1 = state.data2.lineDetailData[0]
+    lines.value.g2 = state.data2.lineDetailData[1]
+    lines.value.g3 = state.data2.lineDetailData[2]
+    console.log('g1: ', lines.value.g1)
+    console.log('g2: ', lines.value.g2)
+    console.log('g3: ', lines.value.g3)
+  }
+})
+
+
 const props = defineProps({
   line: {
     type: Number,
@@ -11,266 +32,519 @@ const props = defineProps({
 });
 
 const eqStatus = computed(() => settings.eqStatus);
-console.log('eqStatus', eqStatus.value)
+const status = ref({
+  'B2清洗机': '',
+  'M1清洗机': 'error',
+  'M1磨边机': 'warn'
+  // ...
+})
 </script>
 
 <template>
   <div class="triple-page" :class="['line-' + line]">
     <div class="info-1" v-if="eqStatus && line == '1'">
       <div class="info">
-        <h1>M7上片</h1>
+        <h1>
+          <Icon :color="status['M7上片'] == 'error' ? '#ff3737' : status['M7上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M7上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M6上片</h1>
+        <h1>
+          <Icon :color="status['M6上片'] == 'error' ? '#ff3737' : status['M6上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M6上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M7磨边机</h1>
+        <h1>
+          <Icon :color="status['M7磨边机'] == 'error' ? '#ff3737' : status['M7磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M7磨边机
+        </h1>
       </div>
       <div class="info">
-        <h1>M6磨边机</h1>
+        <h1>
+          <Icon :color="status['M6磨边机'] == 'error' ? '#ff3737' : status['M6磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M6磨边机
+        </h1>
+        <span v-if="lines.g3?.edgingInput">上片: {{ lines.g3.edgingInput }}</span>
+        <span v-if="lines.g3?.edgingOutput">下片: {{ lines.g3.edgingOutput }}</span>
       </div>
       <div class="info">
-        <h1>M7清洗机</h1>
+        <h1>
+          <Icon :color="status['M7清洗机'] == 'error' ? '#ff3737' : status['M7清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M7清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>M6清洗机</h1>
+        <h1>
+          <Icon :color="status['M6清洗机'] == 'error' ? '#ff3737' : status['M6清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M6清洗机
+        </h1>
       </div>
     </div>
     <div class="info-2" v-if="eqStatus && line == '2'">
       <div class="info">
-        <h1>Z7钻孔机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z7钻孔机
+        </h1>
       </div>
       <div class="info">
-        <h1>Z6钻孔机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z6钻孔机
+        </h1>
+        <span v-if="lines.g3?.drillingInput">上片: {{ lines.g3.drillingInput }}</span>
+        <span v-if="lines.g3?.drillingOutput">下片: {{ lines.g3.drillingOutput }}</span>
       </div>
       <div class="info">
-        <h1>S7清洗机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S6清洗机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S7前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S6前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S7丝印机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7丝印机
+        </h1>
       </div>
       <div class="info">
-        <h1>S6丝印机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6丝印机
+        </h1>
+        <span v-if="lines.g3?.silkInput">上片: {{ lines.g3.silkInput }}</span>
+        <span v-if="lines.g3?.silkOutput">下片: {{ lines.g3.silkOutput }}</span>
       </div>
       <div class="info">
-        <h1>S7固化炉</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7固化炉
+        </h1>
       </div>
       <div class="info">
-        <h1>S6固化炉</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6固化炉
+        </h1>
+        <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
+        <span v-if="lines.g3?.solidificationOutput">下片: {{ lines.g3.solidificationOutput }}</span>
       </div>
       <div class="info">
-        <h1>S7后储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S6后储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6后储片台
+        </h1>
       </div>
     </div>
     <div class="info-3" v-if="eqStatus && line == '3'">
       <div class="info">
-        <h1>B1前储片台</h1>
+        <h1>
+          <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B1前储片台
+        </h1>
       </div>
     </div>
     <div class="info-4" v-if="eqStatus && line == '4'">
       <div class="info">
-        <h1>B2清洗机</h1>
+        <h1>
+          <Icon :color="status['B2清洗机'] == 'error' ? '#ff3737' : status['B2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B2清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>B2下片</h1>
+        <h1>
+          <Icon :color="status['B2下片'] == 'error' ? '#ff3737' : status['B2下片'] == 'warn' ? '#ffb524' : '#24ff5e'" />B2下片
+        </h1>
       </div>
       <div class="info">
-        <h1>B2后储片台</h1>
+        <h1>
+          <Icon :color="status['B2后储片台'] == 'error' ? '#ff3737' : status['B2后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B2后储片台
+        </h1>
       </div>
     </div>
     <div class="info-5" v-if="eqStatus && line == '5'">
       <div class="info">
-        <h1>M5上片</h1>
+        <h1>
+          <Icon :color="status['M5上片'] == 'error' ? '#ff3737' : status['M5上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M5上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M4上片</h1>
+        <h1>
+          <Icon :color="status['M4上片'] == 'error' ? '#ff3737' : status['M4上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M4上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M3上片</h1>
+        <h1>
+          <Icon :color="status['M3上片'] == 'error' ? '#ff3737' : status['M3上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M3上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M5磨边机</h1>
+        <h1>
+          <Icon :color="status['M5磨边机'] == 'error' ? '#ff3737' : status['M5磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M5磨边机
+        </h1>
       </div>
       <div class="info">
-        <h1>M4磨边机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M4磨边机
+        </h1>
+        <span v-if="lines.g2?.edgingInput">上片: {{ lines.g2.edgingInput }}</span>
+        <span v-if="lines.g2?.edgingOutput">下片: {{ lines.g2.edgingOutput }}</span>
       </div>
       <div class="info">
-        <h1>M3磨边机</h1>
+        <h1>
+          <Icon :color="status['M3磨边机'] == 'error' ? '#ff3737' : status['M3磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M3磨边机
+        </h1>
       </div>
       <div class="info">
-        <h1>M5清洗机</h1>
+        <h1>
+          <Icon :color="status['M5清洗机'] == 'error' ? '#ff3737' : status['M5清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M5清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>M4清洗机</h1>
+        <h1>
+          <Icon :color="status['M4清洗机'] == 'error' ? '#ff3737' : status['M4清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M4清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>M3清洗机</h1>
+        <h1>
+          <Icon :color="status['M3清洗机'] == 'error' ? '#ff3737' : status['M3清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M3清洗机
+        </h1>
       </div>
     </div>
     <div class="info-6" v-if="eqStatus && line == '6'">
       <div class="info">
-        <h1>Z5钻孔机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z5钻孔机
+        </h1>
       </div>
       <div class="info">
-        <h1>Z4钻孔机</h1>
+        <h1>
+          <Icon :color="status['Z4钻孔机'] == 'error' ? '#ff3737' : status['Z4钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z4钻孔机
+        </h1>
+        <span v-if="lines.g2?.drillingInput">上片: {{ lines.g2.drillingInput }}</span>
+        <span v-if="lines.g2?.drillingOutput">下片: {{ lines.g2.drillingOutput }}</span>
       </div>
       <div class="info">
-        <h1>Z3钻孔机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z3钻孔机
+        </h1>
       </div>
       <div class="info">
-        <h1>S5清洗机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S5清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S4清洗机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S4清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S3清洗机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S3清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S5前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S5前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S4前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S4前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S3前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S3前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S5丝印机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S5丝印机
+        </h1>
       </div>
       <div class="info">
-        <h1>S4丝印机</h1>
+        <h1>
+          <Icon :color="status['S4丝印机'] == 'error' ? '#ff3737' : status['S4丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S4丝印机
+        </h1>
+        <span v-if="lines.g2?.silkInput">上片: {{ lines.g2.silkInput }}</span>
+        <span v-if="lines.g2?.silkOutput">下片: {{ lines.g2.silkOutput }}</span>
       </div>
       <div class="info">
-        <h1>S3丝印机</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S3丝印机
+        </h1>
       </div>
     </div>
     <div class="info-7" v-if="eqStatus && line == '7'">
       <div class="info">
-        <h1>S5后储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S5后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S4后储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S4后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S3后储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S3后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S5固化炉</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S5固化炉
+        </h1>
       </div>
       <div class="info">
-        <h1>S4固化炉</h1>
+        <h1>
+          <Icon :color="status['S4固化炉'] == 'error' ? '#ff3737' : status['S4固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S4固化炉
+        </h1>
+        <span v-if="lines.g2?.solidificationInput">上片: {{ lines.g2.solidificationInput }}</span>
+        <span v-if="lines.g2?.solidificationOutput">下片: {{ lines.g2.solidificationOutput }}</span>
       </div>
       <div class="info">
-        <h1>S3固化炉</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S3固化炉
+        </h1>
       </div>
       <div class="info">
-        <h1>B2前储片台</h1>
+        <h1>
+          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B2前储片台
+        </h1>
       </div>
     </div>
     <div class="info-8" v-if="eqStatus && line == '8'">
       <div class="info">
-        <h1>B1前储片台</h1>
+        <h1>
+          <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B1前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>B1清洗机</h1>
+        <h1>
+          <Icon :color="status['B1清洗机'] == 'error' ? '#ff3737' : status['B1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B1清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>B1下片</h1>
+        <h1>
+          <Icon :color="status['B1下片'] == 'error' ? '#ff3737' : status['B1下片'] == 'warn' ? '#ffb524' : '#24ff5e'" />B1下片
+        </h1>
       </div>
       <div class="info">
-        <h1>B1后储片台</h1>
+        <h1>
+          <Icon :color="status['B1后储片台'] == 'error' ? '#ff3737' : status['B1后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B1后储片台
+        </h1>
       </div>
     </div>
     <div class="info-9" v-if="eqStatus && line == '9'">
       <div class="info">
-        <h1>M2上片</h1>
+        <h1>
+          <Icon :color="status['M2上片'] == 'error' ? '#ff3737' : status['M2上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M2上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M1上片</h1>
+        <h1>
+          <Icon :color="status['M1上片'] == 'error' ? '#ff3737' : status['M1上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M1上片
+        </h1>
       </div>
       <div class="info">
-        <h1>M2磨边机</h1>
+        <h1>
+          <Icon :color="status['M2磨边机'] == 'error' ? '#ff3737' : status['M2磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M2磨边机
+        </h1>
+        <span v-if="lines.g1?.edgingInput">上片: {{ lines.g1.edgingInput }}</span>
+        <span v-if="lines.g1?.edgingOutput">下片: {{ lines.g1.edgingOutput }}</span>
       </div>
       <div class="info">
-        <h1>M1磨边机</h1>
+        <h1>
+          <Icon :color="status['M1磨边机'] == 'error' ? '#ff3737' : status['M1磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M1磨边机
+        </h1>
       </div>
       <div class="info">
-        <h1>M2清洗机</h1>
+        <h1>
+          <Icon :color="status['M2清洗机'] == 'error' ? '#ff3737' : status['M2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M2清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>M1清洗机</h1>
+        <h1>
+          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          M1清洗机
+        </h1>
       </div>
     </div>
     <div class="info-10" v-if="eqStatus && line == '10'">
       <!-- <div class="info"><h1>M2清洗机</h1></div>
     <div class="info"><h1>M1清洗机</h1></div> -->
       <div class="info">
-        <h1>Z2钻孔机</h1>
+        <h1>
+          <Icon :color="status['Z2钻孔机'] == 'error' ? '#ff3737' : status['Z2钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z2钻孔机
+        </h1>
+        <span v-if="lines.g1?.drillingInput">上片: {{ lines.g1.drillingInput }}</span>
+        <span v-if="lines.g1?.drillingOutput">下片: {{ lines.g1.drillingOutput }}</span>
       </div>
       <div class="info">
-        <h1>Z1钻孔机</h1>
+        <h1>
+          <Icon :color="status['Z1钻孔机'] == 'error' ? '#ff3737' : status['Z1钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          Z1钻孔机
+        </h1>
       </div>
       <div class="info">
-        <h1>S2清洗机</h1>
+        <h1>
+          <Icon :color="status['S2清洗机'] == 'error' ? '#ff3737' : status['S2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S2清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S1清洗机</h1>
+        <h1>
+          <Icon :color="status['S1清洗机'] == 'error' ? '#ff3737' : status['S1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S1清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>S2前储片台</h1>
+        <h1>
+          <Icon :color="status['S2前储片台'] == 'error' ? '#ff3737' : status['S2前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S2前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S1前储片台</h1>
+        <h1>
+          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S1前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S2丝印机</h1>
+        <h1>
+          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S2丝印机
+        </h1>
       </div>
       <div class="info">
-        <h1>S1丝印机</h1>
+        <h1>
+          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S1丝印机
+        </h1>
+        <span v-if="lines.g1?.silkInput">上片: {{ lines.g1.silkInput }}</span>
+        <span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span>
       </div>
     </div>
     <div class="info-11" v-if="eqStatus && line == '11'">
       <div class="info">
-        <h1>S7后储片台</h1>
+        <h1>
+          <Icon :color="status['S7后储片台'] == 'error' ? '#ff3737' : status['S7后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S6后储片台</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6后储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>S7固化炉</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S7固化炉
+        </h1>
       </div>
       <div class="info">
-        <h1>S6固化炉</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          S6固化炉
+        </h1>
+        <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
+        <span v-if="lines.g3?.solidificationOutput">下片: {{ lines.g3.solidificationOutput }}</span>
       </div>
       <div class="info">
-        <h1>B3前储片台</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B3前储片台
+        </h1>
       </div>
     </div>
     <div class="info-12" v-if="eqStatus && line == '12'">
       <div class="info">
-        <h1>B3前储片台</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B3前储片台
+        </h1>
       </div>
       <div class="info">
-        <h1>B3清洗机</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B3清洗机
+        </h1>
       </div>
       <div class="info">
-        <h1>B3下片</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />B3下片
+        </h1>
       </div>
       <div class="info">
-        <h1>B3后储片台</h1>
+        <h1>
+          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
+          B3后储片台
+        </h1>
       </div>
     </div>
   </div>
@@ -290,11 +564,15 @@ console.log('eqStatus', eqStatus.value)
 }
 
 .info {
-  width: 180px;
+  /* width: 180px; */
   height: auto;
   padding: 12px;
-  background: url(../assets/info-rect.png) 100% 100% / cover no-repeat;
-  display: inline-block;
+  background: url(../assets/info-rect.png) 0 0 / 100% 100% no-repeat;
+  backdrop-filter: blur(3px);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
   position: absolute;
 }
 
@@ -304,6 +582,9 @@ console.log('eqStatus', eqStatus.value)
   text-align: center;
   letter-spacing: 1.5px;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .info-1 .info:nth-child(1) {
@@ -775,5 +1056,4 @@ console.log('eqStatus', eqStatus.value)
   background: url(../assets/model/F12.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
-}
-</style>
+}</style>