~

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

@@ -49,6 +49,10 @@
             </div>
           </div>
           <div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1 text-center cursor-pointer" @click="actionPowerOff">
+              <MinusCircleOutlined/> 关闭设备
+            </div>
+
             <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1 text-center cursor-pointer" @click="actionUserLogout">
               <img src="@/assets/icon/logout.svg" class="h-4 mr-1 align-baseline" />
               退出登录
@@ -59,6 +63,7 @@
     </a-layout>
   </a-layout>
   <loading ref="loadingModal" />
+  <operation-power-off ref="poweroff"/>
   <noti-handler-task-start-reset-error-tube-rack-put-in />
   <noti-handler-task-sample-add-tube-rack-put-in />
   <noti-handler-task-sample-add-tube-rack-status-confirm />
@@ -94,6 +99,7 @@ import NotiHandlerTaskDigestionStepChecking from './contents/notification/TaskDi
 import NotiHandlerTaskErrorDigestionStepTakeOutFromErrorSlot from './contents/notification/TaskErrorDigestionStepTakeOutFromErrorSlot.vue';
 import NotiHandlerTaskStartResetPumpPipeSetupTubeRankPutIn from './contents/notification/TaskStartResetPumpPipeSetupTubeRankPutIn.vue';
 import NotiHandlerTaskStartResetPumpPipeSetupTubeRankTakeOut from './contents/notification/TaskStartResetPumpPipeSetupTubeRankTakeOut.vue'
+import OperationPowerOff from './contents/OperationPowerOff.vue';
 /** @var {AppStore} */
 const appStore = useAppStore();
 /** @var {Ref<string>} */
@@ -118,6 +124,8 @@ const nowTime = ref('');
 const statusMessage = ref('');
 /** @var {Ref<string>} */
 const user = ref(null);
+/** @var {OperationPowerOff} */
+const poweroff = ref(null);
 /** @var {number} */
 let statusMessageTimer = null;
 /** @var {number} */
@@ -225,6 +233,11 @@ async function refreshStatusMessage() {
     }
     statusMessageTimer = setTimeout(refreshStatusMessage, 3000);
 }
+
+// action power off
+async function actionPowerOff() {
+    poweroff.value.start();
+}
 </script>
 <style scoped>
 .page-menu .item.active {background: linear-gradient(270deg, #3556FA 0%, #007BFF 100%);color: white;}

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

@@ -0,0 +1,73 @@
+<template>
+  <a-modal v-if="enable" v-model:open="enable" title="设备关机中..."
+    :closable="false"
+    :mask-closable="false"
+    :footer="false"
+  >
+    <p>设备正在复位中 ...</p>
+    <p>{{ message }}</p>
+  </a-modal>
+
+  <a-modal v-if="hasFinished" v-model:open="hasFinished" 
+    title="设备停止复位完成， 现在可以安全断开电源"
+    :closable="false"
+    :mask-closable="false"
+    :footer="false"
+  ></a-modal>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { Modal } from 'ant-design-vue';
+import { useAppStore } from '@/stores/AppStore';
+import ApiClient from '@/utils/ApiClient';
+// expose methods
+defineExpose({start});
+/** @var {Ref<boolean>} */
+const enable = ref(false);
+/** @var {Ref<string>} */
+const message = ref('');
+/** @var {AppStore} */
+const appStore = useAppStore();
+/** @var {Boolean} */
+const hasFinished = ref(false);
+// on mounted
+onMounted(mounted);
+
+// on mounted
+function mounted() {
+    appStore.registerNotificationHandler('TaskStopResetFinished', handleTaskStopResetFinished);
+}
+
+// handle finished
+function handleTaskStopResetFinished() {
+    enable.value = false;
+    hasFinished.value = true;
+}
+
+// start
+async function start() {
+    Modal.confirm({
+        title: '是否停止当前设备？',
+        okText: '确定',
+        cancelText: '取消',
+        async onOk() {
+            let client = ApiClient.getClient();
+            try {
+                await client.taskAppend('StopReset');
+                refreshMessage();
+            } catch ( e ) {
+                Modal.error({title: '任务执行失败',content: e.message});
+                return ;
+            }
+            enable.value = true;
+        },
+    });
+}
+
+// refresh message
+async function refreshMessage() {
+    let client = ApiClient.getClient();
+    message.value = await client.deviceRuntimeVariableGet('TaskStopResetMessage');
+    setTimeout(refreshMessage, 200);
+}
+</script>