1

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-row justify-evenly rounded-2xl p-5" style="background-color: #EEF5FF;">
+    <div v-for="acidBucket in acidBuckets" :key="acidBucket.index">
+      <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:`${100-acidBucket.volume/acidBucket.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-center" style="background:#D2DFEF;color:#8799AB;">
+        <span class="inline-block p-1 px-2 rounded-2xl mr-1" style="background:#DCE8F7;color: #0FDD6B;">{{acidBucket.volume}}</span>
+        <span class="inline-block py-1 ml-1">{{acidBucket.maxVolume}}</span>
+      </div>
+      <div class="text-center mt-2" style="color:#8799AB">{{acidBucket.acidName}}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { onMounted, onUnmounted, ref } from 'vue';
+/** @var {Array} */
+const acidBuckets = ref([]);
+/** @var {Number} */
+let refreshTimer = null;
+// on mounted
+onMounted(mounted)
+// on unmounted
+onUnmounted(unmounted);
+
+// mounted
+async function mounted() {
+    refresh();
+}
+
+// unmounted
+async function unmounted() {
+    clearTimeout(refreshTimer);
+}
+
+// refresh
+async function refresh() {
+    let client = ApiClient.getClient();
+    let 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(refresh, 5000);
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col bg-white rounded-2xl p-5">
+  <div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: rgb(238, 245, 255);">
     <div class="camera h-0 grow rounded-2xl flex flex-col justify-center items-center p-1">
       <div v-if="null === imageData">
         <p class="m-0 text-center"><img src="../../../assets/icon/camera-off.svg" /></p>
@@ -9,41 +9,52 @@
     </div>
     <div class="mt-3 flex flex-row justify-between">
       <div>
-        <a-button @click="actionTakeShot"><CameraOutlined /></a-button>
-        <a-button class="ml-1" @click="actionTakeShotCancel"><EyeInvisibleOutlined /></a-button>
+        <a-button style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;" 
+          @click="actionTakeShot"
+        ><CameraOutlined /></a-button>
+        <a-popconfirm title="将样本移至加热盘？" ok-text="确认" cancel-text="取消" @confirm="actionTakeShotCancel">
+          <a-button class="ml-1" 
+            style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+          ><EyeInvisibleOutlined /></a-button>
+        </a-popconfirm>
       </div>
       <div>
-        <a-button @click="actionDoorOpen"><SplitCellsOutlined /></a-button>
-        <a-button @click="actionDoorClose" class="ml-1"><MergeCellsOutlined /></a-button>
+        <a-popconfirm title="是否打开柜门？" ok-text="确认" cancel-text="取消" @confirm="actionDoorOpen">
+          <a-button class="ml-1" 
+            style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+          ><SplitCellsOutlined /></a-button>
+        </a-popconfirm>
+        <a-popconfirm title="是否关闭柜门？" ok-text="确认" cancel-text="取消" @confirm="actionDoorClose">
+          <a-button class="ml-1" 
+            style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+          ><MergeCellsOutlined /></a-button>
+        </a-popconfirm>
       </div>
     </div>
   </div>
 
   <!-- 拍照 -->
-  <a-modal v-if="imageModalOpen" v-model:open="imageModalOpen" title="拍照结果" width="80%" :footer="null">
-    <a-row>
-      <a-col :span="12">
+  <a-modal v-if="imageModalOpen" v-model:open="imageModalOpen" title="拍照结果">
+    <div class="relative">
+      <div>
         <img :src="imageShotData" class="w-full rounded-xl" />
-      </a-col>
-      <a-col :span="12" class="p-5 pt-0">
-        <a-row class="mb-5" style="border: solid 1px #d9d9d9;padding: 10px;border-radius: 10px;background: #dddddd;">
-          <a-col :span="6" v-for="i in 16" :key="i" class="mb-5 text-center">
-            <a-button shape="circle" size="large"
-              :type="errorTubes.includes(i-1) ? 'primary' : 'default'" 
-              @click="actionTubeErrorToggle(i-1)"
-            ><ExperimentOutlined /></a-button>
-          </a-col>
-        </a-row>
-        <div class="flex flex-row justify-between">
-          <div>
-            <a-button @click="actionErrorSlotDetect">异常识别</a-button>
-          </div>
-          <div>
-            <a-button @click="actionTubeMoveToErrorSlot">移动至异常区</a-button>
+      </div>
+      <div class="absolute top-0 w-full h-full flex flex-col justify-around">
+        <div v-for="row in 4" :key="row" class="h-full flex flex-row justify-around">
+          <div v-for="col in 4" :key="col" class="h-full w-full p-2">
+            <div class="w-full h-full rounded-full border-5 border-dashed border-gray-300"
+              :class="{'!border-red-500':errorTubes.includes((row-1)*4+(col-1))}"
+              @click="actionTubeErrorToggle((row-1)*4+(col-1))"
+            ></div>
           </div>
         </div>
-      </a-col>
-    </a-row>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button @click="actionErrorSlotDetect">异常识别</a-button>
+      <a-button @click="actionTubeMoveToErrorSlot">移动至异常区</a-button>
+    </template>
   </a-modal>
 </template>
 <script setup>