Refactor Page.vue and Operation.vue

src/web/src/pages/main/Page.vue

@@ -12,7 +12,7 @@
           <div class="bg-white h-full rounded-full px-5 text-xl flex flex-col justify-center">
             <div>
               <img class="h-5" src="../../assets/icon/progress-finish.svg" />
-              <span class="ml-3">设备已就绪</span>
+              <span class="ml-3">{{ statusMessage }}</span>
             </div>
           </div>
         </a-col>
@@ -60,7 +60,7 @@
   <loading ref="loadingModal" />
 </template>
 <script setup>
-import { ref,onMounted } from 'vue';
+import { ref,onMounted, onUnmounted } from 'vue';
 import { useAppStore } from '@/stores/AppStore';
 import ContentOperation from './contents/Operation.vue'
 import ContentUserManagement from './contents/UserManagement.vue'
@@ -91,9 +91,15 @@ const nowDate = ref('');
 /** @var {Ref<string>} */
 const nowTime = ref('');
 /** @var {Ref<string>} */
+const statusMessage = ref('');
+/** @var {Ref<string>} */
 const user = ref(null);
+/** @var {number} */
+let statusMessageTimer = null;
 // on mounted
 onMounted(mounted);
+// on unmounted
+onUnmounted(unmounted);
 
 // mounted
 async function mounted() {
@@ -115,6 +121,14 @@ async function mounted() {
     // } while (true);
     loadingModal.value.hide();
     refresh();
+    refreshStatusMessage();
+}
+
+// unmounted
+function unmounted() {
+    if ( null !== statusMessageTimer ) {
+        clearInterval(statusMessageTimer);
+    }
 }
 
 // action logout
@@ -130,7 +144,7 @@ function actionSwitchContent(content) {
 }
 
 // refresh
-function refresh() {
+async function refresh() {
     let now = new Date();
     nowDate.value = [];
     nowDate.value.push(now.getFullYear());
@@ -145,6 +159,16 @@ function refresh() {
     nowTime.value = nowTime.value.join(':');
     setTimeout(refresh, 1000);
 }
+
+// refresh status message
+async function refreshStatusMessage() {
+    let client = ApiClient.getClient();
+    statusMessage.value = await client.deviceRuntimeVariableGet("StatusMessage");
+    if ( '' === statusMessage.value ) {
+        statusMessage.value = '设备已就绪';
+    }
+    statusMessageTimer = setTimeout(refreshStatusMessage, 3000);
+}
 </script>
 <style scoped>
 .page-menu .item.active {background: linear-gradient(270deg, #3556FA 0%, #007BFF 100%);color: white;}

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

@@ -28,26 +28,8 @@
           </div>
         </div>
       </a-col>
-
-      <!-- 温度 -->
-      <a-col :span="5" class="p-1">
-        <div class="h-full flex flex-col bg-white rounded-2xl p-5">
-          <div class="h-0 grow">
-            <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" class="bg-gray-100 mb-2 flex flex-row p-2 rounded-2xl">
-              <div class="flex flex-row items-center">
-                <a-progress type="circle" status="exception" :size="50" :strokeWidth="18" :percent="getTubeRackSlotHeatingProgress(tubeRackSlot)" >
-                  <template #format>
-                    <span class="text-red-400 text-xs">{{ getTubeRackSlotHeatingProgressCountdown(tubeRackSlot) }}</span>
-                  </template>
-                </a-progress>
-              </div>
-              <div class="ml-2 bg-amber-500 rounded-2xl py-2 px-4 text-white w-0 grow text-center">
-                <p class="mb-0 text-2xl">{{ tubeRackSlot.temperature || '---' }}℃</p>
-                <p class="mb-0">A - {{ tubeRackSlot.index + 1 }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
+      <a-col :span="5" class="p-1"> <!-- 温度 -->
+        <operation-tube-rack-temperature :tube-rack-slots="tubeRackSlots"/>
       </a-col>
     </a-row>
   <div class="p-1">
@@ -158,6 +140,7 @@ import OperationCamera from './OperationCamera.vue';
 import OperationSampleAdd from './OperationSampleAdd.vue';
 import OperationSampleTakeShot from './OperationSampleTakeShot.vue';
 import OperationTubeRacks from './OperationTubeRacks.vue';
+import OperationTubeRackTemperature from './OperationTubeRackTemperature.vue';
 /** @var {Object} */
 const sampleTakeout = ref({enable:false,slotIndex:0});
 /** @var {Object} */
@@ -246,30 +229,6 @@ async function actionPresetSetupCancel() {
     presetSetup.value.enable = false;
 }
 
-// 获取加热进度
-function getTubeRackSlotHeatingProgressCountdown(tubeRackSlot) {
-    if ( !tubeRackSlot.isHeating ) {
-        return `00:00`;
-    }
-
-    let duration = tubeRackSlot.heatingDuration - (Date.now() / 1000 - tubeRackSlot.heatingStartedAt);
-    duration = parseInt(duration);
-    let min = parseInt(duration / 60);
-    let sec = duration % 60;
-    return `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
-    
-}
-
-// 获取加热进度
-function getTubeRackSlotHeatingProgress(tubeRackSlot) {
-    if ( !tubeRackSlot.isHeating ) {
-        return 0;
-    }
-    let duration = Date.now() / 1000 - tubeRackSlot.heatingStartedAt;
-    let progress = duration / tubeRackSlot.heatingDuration * 100;
-    return Math.round(progress);
-}
-
 // 加酸
 async function actionAcidAdd() {
     acidAdd.value.acidOptions = [];

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="h-full flex flex-col bg-white rounded-2xl p-5">
+    <div class="h-0 grow">
+      <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" class="bg-gray-100 mb-2 flex flex-row p-2 rounded-2xl">
+        <div class="flex flex-row items-center">
+          <a-progress type="circle" status="exception" :size="50" :strokeWidth="18" :percent="getTubeRackSlotHeatingProgress(tubeRackSlot)" >
+            <template #format>
+              <span class="text-red-400 text-xs">{{ getTubeRackSlotHeatingProgressCountdown(tubeRackSlot) }}</span>
+            </template>
+          </a-progress>
+        </div>
+        <div class="ml-2 bg-amber-500 rounded-2xl py-2 px-4 text-white w-0 grow text-center">
+          <p class="mb-0 text-2xl">{{ tubeRackSlot.temperature || '---' }}℃</p>
+          <p class="mb-0">A - {{ tubeRackSlot.index + 1 }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+/** @var {Object} */
+const props = defineProps({
+    tubeRackSlots: Array,
+});
+/** @var {Object} */
+const tubeRackSlots = ref([]);
+// watch props tubeRackSlots
+watch(() => props.tubeRackSlots, newValue => tubeRackSlots.value = newValue);
+
+// 获取加热进度
+function getTubeRackSlotHeatingProgressCountdown(tubeRackSlot) {
+    if ( !tubeRackSlot.isHeating ) {
+        return `00:00`;
+    }
+
+    let duration = tubeRackSlot.heatingDuration - (Date.now() / 1000 - tubeRackSlot.heatingStartedAt);
+    duration = parseInt(duration);
+    let min = parseInt(duration / 60);
+    let sec = duration % 60;
+    return `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
+    
+}
+
+// 获取加热进度
+function getTubeRackSlotHeatingProgress(tubeRackSlot) {
+    if ( !tubeRackSlot.isHeating ) {
+        return 0;
+    }
+    let duration = Date.now() / 1000 - tubeRackSlot.heatingStartedAt;
+    let progress = duration / tubeRackSlot.heatingDuration * 100;
+    return Math.round(progress);
+}
+</script>