From 5e5d9617ae141991ce640f442015662ae4421bc5 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Wed, 27 Mar 2024 16:40:50 +0800
Subject: [PATCH] ~

---
 src/web/src/pages/engineering/Common.vue | 46 ++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/web/src/pages/engineering/Common.vue b/src/web/src/pages/engineering/Common.vue
index 6a8e455..55a18c9 100644
--- a/src/web/src/pages/engineering/Common.vue
+++ b/src/web/src/pages/engineering/Common.vue
@@ -21,21 +21,20 @@
     <a-row class="bg-gray-100 p-3 rounded mt-2">
       <a-col :span="16">
       <div class="inline-flex items-center align-bottom mr-1 bg-white p-1 rounded h-10">
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸1</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸2</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸3</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸4</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸5</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸6</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">酸7</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">水上</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">水下</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">回收</a-avatar>
-        <a-avatar size="small" :style="{ backgroundColor: 'gray', verticalAlign: 'middle' }" :gap="1" class="mr-1">中和</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor0'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸1</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor1'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸2</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor3'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸4</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor4'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸5</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor5'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸6</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor6'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸7</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor7'), verticalAlign: 'middle' }" :gap="1" class="mr-1">酸8</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensorWaterUp'), verticalAlign: 'middle' }" :gap="1" class="mr-1">水上</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensor2'), verticalAlign: 'middle' }" :gap="1" class="mr-1">水下</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensorWaste'), verticalAlign: 'middle' }" :gap="1" class="mr-1">废</a-avatar>
+        <a-avatar size="small" :style="{ backgroundColor: getIoBackgroundColor('LiquidLevelSensorAlkali'), verticalAlign: 'middle' }" :gap="1" class="mr-1">碱</a-avatar>
         <a-button @click="actionRefreshIO">刷新</a-button>
       </div>
 
-
       <div class="inline-flex items-center align-bottom mr-1 bg-white p-1 rounded h-10">
         <a-switch class="mr-1 align-text-bottom" v-model:checked="isFanOn" checked-children="风机" un-checked-children="风机" @change="actionFanToggle"/>
         <a-switch class="mr-1 align-text-bottom" v-model:checked="isBuzzerOn" checked-children="蜂鸣器" un-checked-children="蜂鸣器" @change="actionBuzzerToggle"/>
@@ -79,9 +78,28 @@ const condenserTemperature = ref(0);
 /** @var {Object} */
 const outputIOList = ref({});
 
+// get IO background color
+function getIoBackgroundColor(key) {
+    let value = outputIOList.value[key];
+    if (value === 1) {
+        return 'red';
+    } else {
+        return 'gray';
+    }
+}
+
+// refresh IO
 async function actionRefreshIO() {
-    let value = await ioGetValue('AcidLiquidLevelSensor0');
-    outputIOList.value['AcidLiquidLevelSensor0'] = value;
+   let keys = [
+      'LiquidLevelSensor0','LiquidLevelSensor1','LiquidLevelSensor2','LiquidLevelSensor3',
+      'LiquidLevelSensor4', 'LiquidLevelSensor5', 'LiquidLevelSensor6', 'LiquidLevelSensor7',
+      'LiquidLevelSensorWaste', 'LiquidLevelSensorAlkali', 'LiquidLevelSensorWaterUp'
+   ];
+   for (let key of keys) {
+       let value = await ioGetValue(key);
+       outputIOList.value[key] = value;
+   }
+   console.log(outputIOList.value);
 }
 
 // light green toggle