~~

src/src/main/java/com/my/graphiteDigesterBg/diframe/api/DiApiResource.java

@@ -1,12 +1,13 @@
 package com.my.graphiteDigesterBg.diframe.api;
-import com.my.graphiteDigesterBg.diframe.DiApiControllerBase;
-import com.my.graphiteDigesterBg.diframe.DiApiResponse;
-import com.my.graphiteDigesterBg.diframe.DiDevice;
+import com.my.graphiteDigesterBg.diframe.*;
 import jakarta.annotation.Resource;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.ResponseBody;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
 import java.util.Map;
 @Controller
 public class DiApiResource extends DiApiControllerBase {
@@ -21,4 +22,51 @@ public class DiApiResource extends DiApiControllerBase {
         Object data = man.getResourceData();
         return this.success(data);
     }
+
+    @ResponseBody
+    @PostMapping("/api/resource/action-execute")
+    public DiApiResponse actionExecute(@RequestBody Map<String,Object> params) {
+        String name = (String)params.get("name");
+        String action = (String)params.get("action");
+        Object actionParams = params.get("params");
+
+        var manager = this.device.getResource().getManager(name);
+        if ( null == manager ) {
+            return this.error("resource not found");
+        }
+
+        boolean hasParams = false;
+        Method actionMethod = null;
+        try {
+            actionMethod = manager.getClass().getMethod(action);
+        } catch (NoSuchMethodException e) {
+            try {
+                hasParams = true;
+                actionMethod = manager.getClass().getMethod(action, Map.class);
+            } catch (NoSuchMethodException ep) {
+                throw new RuntimeException(ep);
+            }
+        }
+
+        Object actionResult = null;
+        try {
+            if ( hasParams ) {
+                if ( actionMethod.getReturnType().equals(Void.TYPE) ) {
+                    actionMethod.invoke(manager, actionParams);
+                } else {
+                    actionResult = actionMethod.invoke(manager, actionParams);
+                }
+            } else {
+                if ( actionMethod.getReturnType().equals(Void.TYPE) ) {
+                    actionMethod.invoke(manager);
+                } else {
+                    actionResult = actionMethod.invoke(manager);
+                }
+            }
+        } catch (IllegalAccessException | InvocationTargetException e) {
+            throw new RuntimeException(e);
+        }
+
+        return this.success(actionResult);
+    }
 }

src/src/main/java/com/my/graphiteDigesterBg/resource/ResAcidBucket.java

@@ -3,13 +3,14 @@ public class ResAcidBucket {
     public Integer index;
     public Integer volume;
     public Integer maxVolume;
-    public String acidName;
+    public String acidType;
     private ResAcidManager manager;
 
+    // constructor
     public ResAcidBucket( ResAcidManager manager, Integer index ) {
         this.index = index;
         this.volume = 5000;
         this.maxVolume = 5000;
-        this.acidName = "硫酸";
+        this.acidType = "sulfuric";
     }
 }

src/src/main/java/com/my/graphiteDigesterBg/resource/ResAcidManager.java

@@ -1,10 +1,9 @@
 package com.my.graphiteDigesterBg.resource;
 import com.my.graphiteDigesterBg.diframe.DiResourceManagerBase;
 import com.my.graphiteDigesterBg.diframe.ResourceManager;
-
 import java.util.ArrayList;
 import java.util.List;
-
+import java.util.Map;
 @ResourceManager(name="Acid")
 public class ResAcidManager extends DiResourceManagerBase {
     // slots
@@ -23,4 +22,25 @@ public class ResAcidManager extends DiResourceManagerBase {
     public Object getResourceData() {
         return this.buckets;
     }
+
+    // bucket update
+    public void bucketUpdate(Map<String, Object> params) {
+        Integer index = (Integer)params.get("index");
+        Integer volume = (Integer)params.get("volume");
+        String acidType = (String)params.get("acidType");
+
+        ResAcidBucket bucket = this.buckets.get(index);
+        bucket.volume = volume;
+        bucket.acidType = acidType;
+    }
+
+    // get bucket by acid type
+    public ResAcidBucket getBucketByAcidType(String acidType) {
+        for (ResAcidBucket bucket : this.buckets) {
+            if ( bucket.acidType.equals(acidType) ) {
+                return bucket;
+            }
+        }
+        return null;
+    }
 }

src/src/main/java/com/my/graphiteDigesterBg/task/TaskLiquidAdd.java

@@ -6,6 +6,7 @@ import com.my.graphiteDigesterBg.diframe.actuator.DiActMotor;
 import com.my.graphiteDigesterBg.diframe.actuator.DiActPeristalticPump;
 import com.my.graphiteDigesterBg.diframe.actuator.DiActServo;
 import com.my.graphiteDigesterBg.move.MoveMoveTubeRackFromHeatPlateToLiquidPlate;
+import com.my.graphiteDigesterBg.resource.ResAcidManager;
 import com.my.graphiteDigesterBg.resource.ResHeatingTubeRackSlot;
 import com.my.graphiteDigesterBg.resource.ResHeatingTubeRackSlotManager;
 @Task(name="LiquidAdd")
@@ -13,7 +14,7 @@ public class TaskLiquidAdd extends DiTaskBase {
     // slot index
     public Integer slotIndex;
     // liquid index
-    public Integer liquidIndex;
+    public String liquidType;
     // liquid volume
     public Integer liquidVolume;
     // shake times
@@ -27,6 +28,14 @@ public class TaskLiquidAdd extends DiTaskBase {
         } catch (InterruptedException e) {
             throw new RuntimeException(e);
         }
+
+        var bucketMan = this.getResourceManager(ResAcidManager.class);
+        var bucket = bucketMan.getBucketByAcidType(this.liquidType);
+        if ( null == bucket ) {
+            throw new RuntimeException("liquid type [" + this.liquidType + "] not found");
+        }
+        bucket.volume -= this.liquidVolume;
+
 //        ResHeatingTubeRackSlotManager heatingSlotMan = this.getResourceManager(ResHeatingTubeRackSlotManager.class);
 //        ResHeatingTubeRackSlot slot = heatingSlotMan.getSlotByIndex(this.slotIndex);
 //

src/web/src/pages/main/contents/AcidManagement.vue

@@ -1,43 +1,65 @@
 <template>
   <a-row class="h-full p-1">
-    <a-col :span="10" class="p-5">
+    <a-col v-for="bucket in buckets" :key="bucket.index" :span="6" class="p-5">
       <div class="flex flex-col justify-center items-center h-full bg-gray-50 rounded-3xl">
-        <div class="text-center mb-10 text-3xl bg-blue-200 p-5 rounded-3xl w-32 text-gray-100">硫酸</div>
         <div class="w-full relative">
           <div class="h-full w-full text-center">
             <img class="w-1/2" src="../../../assets/icon/bucket-full.svg" />
           </div>
-          <div class="h-full w-full text-center absolute top-0 overflow-hidden" :style="{height:`${Math.random()*100}%`}">
+          <div class="h-full w-full text-center absolute top-0 overflow-hidden" :style="{height:`${100-bucket.volume/bucket.maxVolume*100}%`}">
             <img class="w-1/2" src="../../../assets/icon/bucket-empty.svg" />
           </div>
         </div>
         <div class="mx-2 p-2 mt-3 rounded-2xl text-3xl" style="background:#D2DFEF;color:#8799AB;">
-          <span class="inline-block p-1 rounded-2xl mr-5" style="background:#DCE8F7;">3000g</span>
-          <span class="inline-block py-1">5000g</span>
+          <span class="inline-block p-1 rounded-2xl mr-5" style="background:#DCE8F7;">{{bucket.volume}}g</span>
+          <span class="inline-block py-1">{{bucket.maxVolume}}g</span>
         </div>
-      </div>
-    </a-col>
-    <a-col :span="10" class="p-5">
-      <div class="flex flex-col justify-center items-center h-full bg-gray-50 rounded-3xl">
-        <div class="text-center mb-10 text-3xl bg-blue-200 p-5 rounded-3xl w-32 text-gray-100">硫酸</div>
-        <div class="w-full relative">
-          <div class="h-full w-full text-center">
-            <img class="w-1/2" src="../../../assets/icon/bucket-full.svg" />
-          </div>
-        </div>
-        <div class="mx-2 p-2 mt-3 rounded-2xl text-3xl" style="background:#D2DFEF;color:#8799AB;">
-          <span class="inline-block p-1 rounded-2xl mr-5" style="background:#DCE8F7;">3000g</span>
-          <span class="inline-block py-1">5000g</span>
-        </div>
-        <div class="py-3 px-5 text-3xl bg-blue-500 text-white mt-10 rounded-3xl">加载</div>
-      </div>
-    </a-col>
-    <a-col :span="4" class="p-5">
-      <div class="flex flex-col justify-center items-center h-full bg-gray-50 rounded-3xl">
-        <div v-for="i in 8" :key="i" class="bg-white bg-gray-200 p-3 mb-5 w-3/4 text-center rounded-3xl text-xl text-gray-500" :class="{'!bg-blue-500 !text-white':i==2}">
-          硫酸
+        <div class="mt-5">
+          <a-select v-model:value="bucket.acidType" :dropdownMatchSelectWidth="false">
+            <a-select-option value="hydrochloric">盐酸</a-select-option>
+            <a-select-option value="nitric">硝酸</a-select-option>
+            <a-select-option value="sulfuric">硫酸</a-select-option>
+            <a-select-option value="hydrofluoric">氢氟酸</a-select-option>
+            <a-select-option value="perchloric">高氯酸</a-select-option>
+            <a-select-option value="hydrobromic">液溴</a-select-option>
+            <a-select-option value="phosphoric">磷酸</a-select-option>
+            <a-select-option value="tartaric">酒石酸</a-select-option>
+          </a-select>
+          <a-button class="ml-3" @click="actionReload(bucket)">加载</a-button>
         </div>
       </div>
     </a-col>
   </a-row>
 </template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { onMounted, ref } from 'vue';
+/** @var {Array} */
+const buckets = ref([]);
+// on mounted
+onMounted(mounted);
+
+// on mounted
+async function mounted() {
+    await refresh();
+}
+
+// refresh
+async function refresh() {
+    let client = ApiClient.getClient();
+    let response = await client.resourceDataGet('Acid');
+    buckets.value = structuredClone(response);
+    console.log(buckets.value);
+}
+
+// action reload
+async function actionReload(bucket) {
+    let client = ApiClient.getClient();
+    await client.resourceActionExecute('Acid', 'bucketUpdate', {
+        index : bucket.index,
+        acidType : bucket.acidType,
+        volume : 5000,
+    });
+    refresh();
+}
+</script>

src/web/src/pages/main/contents/Operation.vue

@@ -148,10 +148,7 @@
         </a-radio-group>
       </a-form-item>
       <a-form-item label="酸液">
-        <a-select v-model:value="acidAdd.liquidIndex">
-          <a-select-option v-for="acidBucket in acidBuckets" :key="acidBucket.index" :value="acidBucket.index"
-          >{{ acidBucket.acidName }} @ {{ acidBucket.index + 1 }}</a-select-option>
-        </a-select>
+        <a-select v-model:value="acidAdd.liquidType" :options="acidAdd.acidOptions"></a-select>
       </a-form-item>
       <a-form-item label="加量">
         <a-input-number v-model:value="acidAdd.liquidVolume" :min="0" />
@@ -195,7 +192,7 @@ const sampleTakeout = ref({enable:false,slotIndex:0});
 /** @var {Object} */
 const presetSetup = ref({enable:false,slotIndex:0,id:null});
 /** @var {Object} */
-const acidAdd = ref({enable:false,slotIndex:0,liquidIndex:0,liquidVolume:100,shakeTimes:3});
+const acidAdd = ref({enable:false,slotIndex:0,liquidType:null,liquidVolume:100,shakeTimes:3,acidOptions:[]});
 /** @var {Object} */
 const heating = ref({enable:false,slotIndex:0,temperature:100,duration:1});
 /** @var {Array} */
@@ -229,7 +226,10 @@ async function refreshResource() {
 
     response = await client.resourceDataGet('Acid');
     acidBuckets.value = structuredClone(response);
-
+    let acidTypeMap = {hydrochloric:'盐酸',nitric:'硝酸',sulfuric:'硫酸',hydrofluoric:'氢氟酸',perchloric:'高氯酸',hydrobromic:'液溴',phosphoric:'磷酸',tartaric:'酒石酸'};
+    for ( let acidBucket of acidBuckets.value ) {
+        acidBucket.acidName = acidTypeMap[acidBucket.acidType];
+    }
     refreshTimer = setTimeout(refreshResource,1000);
 }
 
@@ -255,8 +255,6 @@ async function actionSampleAddCancel() {
 // 样本取出
 async function actionSampleTakeOut() {
     sampleTakeout.value.enable = true;
-    // let client = ApiClient.getClient();
-    // await client.taskAppend('SampleTakeOut');
 }
 
 // 样本取出确认
@@ -320,7 +318,18 @@ function getTubeRackSlotHeatingProgress(tubeRackSlot) {
 }
 
 // 加酸
-function actionAcidAdd() {
+async function actionAcidAdd() {
+    acidAdd.value.acidOptions = [];
+    for ( let acidBucket of acidBuckets.value ) {
+        if ( -1 !== acidAdd.value.acidOptions.findIndex(item => item.value === acidBucket.acidType) ) {
+            continue ;
+        }
+        acidAdd.value.acidOptions.push({
+            label : `${acidBucket.acidName}`,
+            value : acidBucket.acidType
+        });
+    }
+    
     acidAdd.value.enable = true;
 }
 
@@ -329,10 +338,10 @@ async function acidAddOk() {
     acidAdd.value.enable = false;
     let client = ApiClient.getClient();
     await client.taskAppend('LiquidAdd',{
-      slotIndex:presetSetup.value.slotIndex,
-      liquidIndex:presetSetup.value.liquidIndex,
-      liquidVolume:presetSetup.value.liquidVolume,
-      shakeTimes:presetSetup.value.shakeTimes,
+      slotIndex:acidAdd.value.slotIndex * 1,
+      liquidType:acidAdd.value.liquidType,
+      liquidVolume:acidAdd.value.liquidVolume * 1,
+      shakeTimes:acidAdd.value.shakeTimes * 1,
     });
 }
 

src/web/src/utils/ApiClient.js

@@ -106,4 +106,9 @@ export default class ApiClient {
     async digestionPresetDelete(id) {
         return await this.call('digestion-preset/delete', {id});
     }
+
+    // resource action execute
+    async resourceActionExecute(name, action, params) {
+        return await this.call('resource/action-execute',{name,action, params});
+    }
 }