From 8c38b94b5850632ceb7cd748c813f42051e9c231 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Tue, 25 Feb 2025 19:48:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=BD=E4=BB=A4=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon_operation.svg   |    1 +
 src/services/txn.ts             |    9 +
 src/stores/status.ts            |   10 +
 src/views/components/Footer.vue |  110 ++-
 src/views/graphite/index.vue    | 1480 +++++++++++++++++++--------------------
 5 files changed, 846 insertions(+), 764 deletions(-)
 create mode 100644 src/assets/icon_operation.svg

diff --git a/src/assets/icon_operation.svg b/src/assets/icon_operation.svg
new file mode 100644
index 0000000..8068d92
--- /dev/null
+++ b/src/assets/icon_operation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><g><path d="M0.0338876,21.6006C0.791888,25.2568,2.6603,28.5461,5.43529,31.1111C5.80569,31.454,6.31565,31.6116,6.8194,31.5389C7.3235,31.4665,7.76624,31.1719,8.02131,30.7391L10.1884,27.0549C10.5503,26.4391,10.4661,25.6645,9.97991,25.1375C8.84698,23.9069,8.02102,22.4346,7.56723,20.8368C7.36685,20.128,6.70975,19.6374,5.96078,19.6374L1.66693,19.6374C1.16648,19.6372,0.692517,19.8581,0.376395,20.2389C0.0591609,20.619,-0.0666573,21.1192,0.0338876,21.6006ZM22.0852,29.174C21.7232,28.5559,20.9949,28.2395,20.2854,28.3921C18.4901,28.7781,16.6239,28.7054,14.8655,28.1807C14.1235,27.9594,13.3239,28.2689,12.9355,28.9278L10.808,32.5469C10.5628,32.9646,10.5176,33.4671,10.6845,33.9204C10.8509,34.3741,11.2133,34.7322,11.6745,34.8985C13.6899,35.6293,15.8187,36,17.9994,36C19.8024,36,21.5824,35.7444,23.2887,35.2393C23.7758,35.0946,24.1692,34.7399,24.3574,34.2758C24.545,33.8109,24.5056,33.2873,24.2505,32.8545L22.0852,29.174ZM29.7455,4.17944C29.4462,3.9339,29.0685,3.79934,28.6784,3.79924C28.5817,3.79924,28.4831,3.80922,28.3864,3.82559C27.9025,3.91049,27.4815,4.20075,27.2359,4.61875L25.1037,8.24068C24.7167,8.90032,24.8432,9.73465,25.4092,10.255C26.8597,11.5847,27.9059,13.2833,28.4313,15.1619C28.6304,15.8724,29.2886,16.3647,30.0393,16.3649L34.3337,16.3649C34.8331,16.3646,35.3062,16.1445,35.6226,15.7652C35.9401,15.3857,36.0664,14.886,35.9664,14.4048C35.1469,10.4185,32.9378,6.78689,29.7455,4.17944ZM24.3574,1.72602C24.1697,1.26149,23.7761,0.906541,23.2887,0.762205C21.5731,0.255605,19.791,-0.00119639,17.9994,0.00000381258C15.8187,0.00000381258,13.6899,0.370486,11.6745,1.10122C10.7057,1.45352,10.2924,2.57637,10.808,3.45511L12.9355,7.07371C13.3239,7.73262,14.1235,8.04214,14.8655,7.82082C15.8814,7.51699,16.9376,7.3629,17.9996,7.3636C18.7626,7.3636,19.5323,7.44547,20.2854,7.60794C20.9944,7.76016,21.7222,7.44468,22.0852,6.82783L24.2508,3.1468C24.5058,2.71413,24.5451,2.1907,24.3574,1.72602ZM34.3337,19.6371L30.0393,19.6371C29.2884,19.6367,28.63,20.1292,28.4313,20.8399C27.9057,22.7185,26.8595,24.4171,25.4092,25.747C24.8431,26.2665,24.7165,27.1004,25.1037,27.7593L27.2359,31.3828C27.4812,31.8011,27.9024,32.0915,28.3864,32.1762C28.4832,32.1926,28.5817,32.2008,28.6784,32.2008C29.0683,32.2013,29.446,32.0673,29.7455,31.8223C32.9378,29.2131,35.1469,25.583,35.9665,21.5972C36.0665,21.1161,35.9402,20.6163,35.6226,20.2368C35.3066,19.857,34.8333,19.6368,34.3337,19.6371ZM0.376135,15.7632C0.692116,16.1438,1.16603,16.3647,1.66666,16.3647L5.96105,16.3647C6.71021,16.3644,7.36726,15.8738,7.5675,15.1652C8.02109,13.5669,8.84706,12.0941,9.98017,10.863C10.4664,10.3367,10.5507,9.56236,10.1887,8.9471L8.02157,5.263C7.76613,4.8302,7.3237,4.53522,6.81966,4.46166C6.73946,4.45042,6.65853,4.44495,6.57751,4.44528C6.1568,4.44528,5.746,4.60263,5.43555,4.89099C2.6603,7.45571,0.791888,10.7448,0.0338876,14.4012C-0.0665431,14.8826,0.0591547,15.3828,0.376135,15.7632Z" fill="#4F85FB" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/services/txn.ts b/src/services/txn.ts
index cd315ce..ebfa268 100644
--- a/src/services/txn.ts
+++ b/src/services/txn.ts
@@ -59,3 +59,12 @@ export function getTxnRecord(txn: string, category: TxnRecord["category"]) {
 	}
 	return undefined;
 }
+
+export function peekTxnRecord(txn: string, category: TxnRecord["category"]) {
+	const record = txnCmdMap[txn];
+	// 只有属于指定category时，才返回，且返回后删除记录，节约内存
+	if (record.category === category) {
+		return record;
+	}
+	return undefined;
+}
\ No newline at end of file
diff --git a/src/stores/status.ts b/src/stores/status.ts
index 525527a..8061618 100644
--- a/src/stores/status.ts
+++ b/src/stores/status.ts
@@ -2,6 +2,7 @@ import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 import * as R from "ramda";
 import type { StatusDatagram } from "@/services/socket";
+import { BehaviorSubject, Subject } from "rxjs";
 
 export const useStatusStore = defineStore("status", () => {
 	const status = ref<StatusDatagram["data"] | undefined>();
@@ -14,3 +15,12 @@ export const useStatusStore = defineStore("status", () => {
 
 	return { status, setStatus };
 });
+
+// 进行中状态
+export type OnGoingStatus = "idle" | "doorOpening" | "doorClosing" | "shaking" | "injecting" | "movingToAct" | "movingToHeat";
+
+const onGoingStatusSub = new BehaviorSubject<OnGoingStatus>('idle');
+export const onGoingStatusOb = onGoingStatusSub.asObservable();
+export function setOnGoingStatus(status: OnGoingStatus) {
+	onGoingStatusSub.next(status)
+}
\ No newline at end of file
diff --git a/src/views/components/Footer.vue b/src/views/components/Footer.vue
index bc8013c..3caa6ce 100644
--- a/src/views/components/Footer.vue
+++ b/src/views/components/Footer.vue
@@ -1,16 +1,24 @@
 <template>
 	<div class="h-[--footerHeight] bg-[--bgColor] footer">
 		<div class="footer_ins">
-			<van-icon name="discount-o" size="20" style="padding: 5px" />
-			<span class="ins_text text_size">等待指令</span>
+			<img
+				class="w-[18px] mx-4"
+				:class="statusStr !== '等待指令' ? 'ani' : ''"
+				src="@/assets/icon_operation.svg"
+				alt="op" />
+			<span class="ins_text text_size" @click="testStatus">{{ statusStr }}</span>
 		</div>
 
 		<div class="footer_normal">
 			<van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
 				<template #reference>
 					<div class="footer_container">
-						<div class="circle"></div>
-						<div class="waste_status text_size font-medium underline text-primary">溶液正常</div>
+						<div class="circle" :class="!!hasLowLiquid ? 'bg-[#EE8223]' : 'bg-[#26d574]'"></div>
+						<div
+							class="waste_status text_size font-medium underline"
+							:class="!!hasLowLiquid ? 'text-[#EE8223]' : 'text-primary'">
+							{{ !!hasLowLiquid ? "溶液余量低" : "溶液正常" }}
+						</div>
 						<div class="waste_detail">
 							<button class="text_size"><van-icon name="arrow" /></button>
 						</div>
@@ -22,10 +30,74 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted, computed } from "vue";
 import Liquid from "./Liquid.vue";
-const showContainerPopover = ref(false);
+import { onGoingStatusOb, setOnGoingStatus } from "@/stores/status";
+import { createWebSocket, sharedWsUrl } from "@/services/socket";
+import { peekTxnRecord } from "@/services/txn";
+import { useSettingStore } from "@/stores/setting";
+
+const settingStore = useSettingStore();
+const hasLowLiquid = computed(() => {
+	return settingStore.heatContainers.find(
+		c => c.capacityTotal - c.capacityUsed < (settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
+	);
+});
+
 const showWastePopover = ref(false);
+
+const statusStr = ref<string>("");
+function testStatus() {
+	if (statusStr.value === "等待指令") {
+		setOnGoingStatus("doorOpening");
+	} else {
+		setOnGoingStatus("idle");
+	}
+}
+onMounted(() => {
+	const wsClient = createWebSocket(sharedWsUrl);
+	const subscription = wsClient.dataOb.subscribe(data => {
+		if (data.type === "cmd") {
+			const cmdInfo = peekTxnRecord(data.data.commandId, "task");
+			if (cmdInfo) {
+				if (
+					cmdInfo.command === "openDoor" ||
+					cmdInfo.command === "closeDoor" ||
+					cmdInfo.command === "startShakeUp" ||
+					cmdInfo.command === "injectFluid" ||
+					cmdInfo.command === "moveToActionArea" ||
+					cmdInfo.command === "moveToHeatArea"
+				) {
+					setOnGoingStatus("idle");
+				}
+			}
+		}
+	});
+	wsClient.connect();
+
+	const subscription2 = onGoingStatusOb.subscribe(status => {
+		if (status === "idle") {
+			statusStr.value = "等待指令";
+		} else if (status === "doorOpening") {
+			statusStr.value = "正在开门";
+		} else if (status === "doorClosing") {
+			statusStr.value = "正在关门";
+		} else if (status === "shaking") {
+			statusStr.value = "正在摇匀";
+		} else if (status === "injecting") {
+			statusStr.value = "正在加液";
+		} else if (status === "movingToAct") {
+			statusStr.value = "正在移至加液";
+		} else if (status === "movingToHeat") {
+			statusStr.value = "正在移至加热";
+		}
+	});
+
+	onUnmounted(() => {
+		subscription.unsubscribe();
+		subscription2.unsubscribe();
+	});
+});
 </script>
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;
@@ -33,14 +105,28 @@ const showWastePopover = ref(false);
 .footer {
 	display: flex;
 	align-items: center;
+	justify-content: flex-end;
+}
+@keyframes rotateAnimation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+.ani {
+	animation: rotateAnimation 3s linear infinite;
 }
 .footer_ins {
+	flex: 1 1 auto;
 	display: flex;
 	align-items: center;
-	border-radius: 5px;
+	border-radius: 4px;
 	background: #ffffff;
 	height: 2.5rem;
 	width: 39.625rem;
+	margin-left: 1.5rem;
 	@media (min-width: $lg) {
 		margin-left: 11.875rem;
 	}
@@ -48,15 +134,16 @@ const showWastePopover = ref(false);
 .footer_waste {
 	display: flex;
 	align-items: center;
-	border-radius: 5px;
+	border-radius: 4px;
 	min-width: 13.4375rem;
 	height: 2.5rem;
 	background: #ffffff;
-	margin-left: 1.5rem;
+	margin: 0 1.5rem;
 }
 
 .footer_normal {
-	margin-left: 3.125rem;
+	margin-left: 3rem;
+	margin-right: 1.5rem;
 }
 
 .text_size {
@@ -67,13 +154,12 @@ const showWastePopover = ref(false);
 	display: flex;
 	align-items: center;
 	border-radius: 5px;
-	width: 15.625rem;
+	width: 13.75rem;
 	height: 2.5rem;
 	background: #ffffff;
 	.circle {
 		width: 1rem;
 		height: 1rem;
-		background-color: #26D574;
 		border-radius: 50%;
 		margin-left: 10px;
 	}
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 95630e8..0c5fc50 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="graphite_home component-page overflow-auto" id="heatArea">
-    <div class="heat_area">
-      <div v-for="(item, index) in heatList" :key="item.id">
-        <HeatPosition
-          :heatInfo="{ ...item, index }"
-          :tubeIndex="index + 1"
-          @onSelectedTray="onSelectedTray"
-		      @onSetHeatAreaTemp = "onSetHeatAreaTemp"
-          @onSelectCraft="(craftData)=>{onSelectCraft(item, craftData)}"
-        ></HeatPosition>
-      </div>
-      <!--执行中状态的遮罩层-->
-    </div>
-    <!--拍照区-->
-    <div class="picture_area">
-      <!--加液区和拍照区可切换-->
-      <TakePickture></TakePickture>
-      <!-- <div v-else style="display: flex;justify-content: center;">
+	<div class="graphite_home component-page overflow-auto" id="heatArea">
+		<div class="heat_area">
+			<div v-for="(item, index) in heatList" :key="item.id">
+				<HeatPosition
+					:heatInfo="{ ...item, index }"
+					:tubeIndex="index + 1"
+					@onSelectedTray="onSelectedTray"
+					@onSetHeatAreaTemp="onSetHeatAreaTemp"
+					@onSelectCraft="
+						craftData => {
+							onSelectCraft(item, craftData);
+						}
+					"></HeatPosition>
+			</div>
+			<!--执行中状态的遮罩层-->
+		</div>
+		<!--拍照区-->
+		<div class="picture_area">
+			<!--加液区和拍照区可切换-->
+			<TakePickture></TakePickture>
+			<!-- <div v-else style="display: flex;justify-content: center;">
         <div class="home_tube">
           <div
             class="inner-circle"
@@ -27,436 +30,404 @@
           ></div>
         </div>
       </div> -->
-      <!--操作区-->
-      <div class="graphite_btn_container">
-        <van-button v-if="doorStatus" size="large" class="btn_size op_open_door" @click="onCloseDoor"
-          >关门</van-button
-        >
-        <van-button v-else size="large" class="btn_size op_open_door" @click="onOPenDoor"
-          >开门</van-button
-        >
-        
-        <van-button size="large" class="btn_size op_start_task" @click="startTask"
-          >开始实验</van-button
-        >
-        <van-button size="large" class="btn_size op_stop_task" @click="onEndTask"
-          >结束实验</van-button
-        >
-        <van-button
-          size="large"
-          class="btn_size op_select_craft"
-          @click="onChooseCaft"
-          >{{ craftName }}</van-button
-        >
-        <van-button size="large" class="btn_size op_exec_craft" @click="onCraftStart()"
-          >{{ exeCraftName }}</van-button
-        >
-        <van-button
-          size="large"
-          class="btn_size op_add_liquid"
-          @click="onAddLiquid"
-          >添加溶液</van-button
-        >
-        <van-button v-if="!isSharking" size="large" class="btn_size op_shake_up" @click="onStartShakingTube">摇匀</van-button>
-        <van-button v-else size="large" class="btn_size op_shake_up" @click="onStopShakingTube">结束摇匀</van-button>
-        <van-button
-          size="large"
-          class="btn_size op_move_heat"
-          @click="onMoveToHeat"
-          >移至加热</van-button
-        >
-        <van-button size="large" class="btn_size op_move_act" @click="onMoveToOperationArea"
-          >移至加液</van-button
-        >
-        <van-button size="large" class="btn_size op_move_exception" @click="onMoveToSpecial"
-          >移至特殊</van-button
-        >
-        <van-button v-if="!isHeating" size="large" class="btn_size op_start_heat" @click="onStartHeat"
-          >开始加热</van-button
-        >
-        <van-button v-else size="large" class="btn_size op_start_heat" @click="onStopHeat"
-          >停止加热</van-button
-        >
-
-        <van-button size="large" class="btn_size op_up_tray" @click="onUpTray"
-          >抬起托盘</van-button
-        >
-      </div>
-    </div>
-    <van-overlay :show="liquidVisible" v-if="liquidVisible" style="z-index: 9999">
-      <div class="liquid">
-        <div class="addLiquid">
-          <AddLiquid
-            :currentSelectedTube="currentSelectedTube"
-            @cancel="liquidVisible = false"
-            @onAddSolution="onAddSolution"
-          ></AddLiquid>
-        </div>
-      </div>
-    </van-overlay>
-    <!--选择工艺-->
-    <OverlayModal :visible="craftVisible"> 
-      <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
-    </OverlayModal>
-
-	<!--实验名称-->
-	<OverlayModal :visible="taskNameVisible">
-		<div class="task_name">
-			<div class="task_title">
-				开始新实验
+			<!--操作区-->
+			<div class="graphite_btn_container">
+				<van-button v-if="doorStatus" size="large" class="btn_size op_open_door" @click="onCloseDoor">关门</van-button>
+				<van-button v-else size="large" class="btn_size op_open_door" @click="onOPenDoor">开门</van-button>
+
+				<van-button size="large" class="btn_size op_start_task" @click="startTask">开始实验</van-button>
+				<van-button size="large" class="btn_size op_stop_task" @click="onEndTask">结束实验</van-button>
+				<van-button size="large" class="btn_size op_select_craft" @click="onChooseCaft">{{ craftName }}</van-button>
+				<van-button size="large" class="btn_size op_exec_craft" @click="onCraftStart()">{{ exeCraftName }}</van-button>
+				<van-button size="large" class="btn_size op_add_liquid" @click="onAddLiquid">添加溶液</van-button>
+				<van-button v-if="!isSharking" size="large" class="btn_size op_shake_up" @click="onStartShakingTube"
+					>摇匀</van-button
+				>
+				<van-button v-else size="large" class="btn_size op_shake_up" @click="onStopShakingTube">结束摇匀</van-button>
+				<van-button size="large" class="btn_size op_move_heat" @click="onMoveToHeat">移至加热</van-button>
+				<van-button size="large" class="btn_size op_move_act" @click="onMoveToOperationArea">移至加液</van-button>
+				<van-button size="large" class="btn_size op_move_exception" @click="onMoveToSpecial">移至特殊</van-button>
+				<van-button v-if="!isHeating" size="large" class="btn_size op_start_heat" @click="onStartHeat"
+					>开始加热</van-button
+				>
+				<van-button v-else size="large" class="btn_size op_start_heat" @click="onStopHeat">停止加热</van-button>
+
+				<van-button size="large" class="btn_size op_up_tray" @click="onUpTray">抬起托盘</van-button>
 			</div>
-			<div class="task_name_content">
-        <div class='mt-3'>实验名称：</div>
-        <div class="task_auto">
-          <input v-model="taskName" placeholder="实验名称" class="task_input" />
-          <div v-if="!taskName" style="color:red;font-size: 1rem;">请输入实验名称</div>
-        </div>
-			</div>
-
-			<br/>
-			<footer class="task_button">
-				<button class="btn-dark px-2 py-1 min-w-20" @click="onSave">保存</button>
-				<button class="cancel_btn" @click="onCancel">取消</button>
-			</footer>
 		</div>
-	</OverlayModal>
-  </div>
+		<van-overlay :show="liquidVisible" v-if="liquidVisible" style="z-index: 9999">
+			<div class="liquid">
+				<div class="addLiquid">
+					<AddLiquid
+						:currentSelectedTube="currentSelectedTube"
+						@cancel="liquidVisible = false"
+						@onAddSolution="onAddSolution"></AddLiquid>
+				</div>
+			</div>
+		</van-overlay>
+		<!--选择工艺-->
+		<OverlayModal :visible="craftVisible">
+			<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
+		</OverlayModal>
+
+		<!--实验名称-->
+		<OverlayModal :visible="taskNameVisible">
+			<div class="task_name">
+				<div class="task_title">开始新实验</div>
+				<div class="task_name_content">
+					<div class="mt-3">实验名称：</div>
+					<div class="task_auto">
+						<input v-model="taskName" placeholder="实验名称" class="task_input" />
+						<div v-if="!taskName" style="color: red; font-size: 1rem">请输入实验名称</div>
+					</div>
+				</div>
+
+				<br />
+				<footer class="task_button">
+					<button class="btn-dark px-2 py-1 min-w-20" @click="onSave">保存</button>
+					<button class="cancel_btn" @click="onCancel">取消</button>
+				</footer>
+			</div>
+		</OverlayModal>
+	</div>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
 //@ts-ignore
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { createWebSocket, sharedWsUrl } from "@/services/socket";
 import { HeatPosition, TakePickture, AddLiquid } from "./components";
 import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "@/views/graphite/components/CraftList.vue";
 import { injectFluid } from "@/services/task/task";
-import { useStatusStore } from "@/stores/status";
-import {getIngTask, saveTaskName, stopTask} from '@/services/task/task';
-import {
-  CmdDescMap,
-  taskCmd,
-  type OperationCmd,
-} from "@/services/globalCmd/globalCmd";
+import { setOnGoingStatus, useStatusStore } from "@/stores/status";
+import { getIngTask, saveTaskName, stopTask } from "@/services/task/task";
+import { CmdDescMap, taskCmd, type OperationCmd } from "@/services/globalCmd/globalCmd";
 import { craftStart, craftStop } from "@/services/ore/oreManage";
 import { getTxnRecord } from "@/services/txn";
 import { useSettingStore } from "@/stores/setting";
 import { useCraftStore } from "@/stores/craft";
 
-const craftStore = useCraftStore()
-const craftInfo = ref(craftStore.craftInfo)
+const craftStore = useCraftStore();
+const craftInfo = ref(craftStore.craftInfo);
 const settingStore = useSettingStore();
-const craftName = ref('选择工艺')
-const exeCraftName = ref('执行工艺')
-watch(()=>craftStore.craftInfo, (newVal)=>{
-  craftInfo.value = newVal
-  if(newVal?.status == 1){
-    craftName.value = '暂停工艺'
-    exeCraftName.value = '停止工艺'
-  }
-})
+const craftName = ref("选择工艺");
+const exeCraftName = ref("执行工艺");
+watch(
+	() => craftStore.craftInfo,
+	newVal => {
+		craftInfo.value = newVal;
+		if (newVal?.status == 1) {
+			craftName.value = "暂停工艺";
+			exeCraftName.value = "停止工艺";
+		}
+	}
+);
 //设备的全局状态
 const statusStore = useStatusStore();
-const heatAearStatusList = ref(statusStore.status?.heatArea || [])
+const heatAearStatusList = ref(statusStore.status?.heatArea || []);
 const heatList: any = ref([]);
 const craftVisible = ref(false);
 let tubeList = reactive<any>([]);
 const selectedColor = "#4F85FB";
 const emptyColor = "#FFFFFF";
-const taskName = ref('')
-let globeStatus:any = 0;
+const taskName = ref("");
+let globeStatus: any = 0;
 onMounted(() => {
-  //6个加热区数据
-  heatList.value = settingStore.heatAreaConfig.map((item:any) => {
-    //添加一个字段，默认为未选中
-    item.isSelect = false;
-    heatAearStatusList.value.forEach((areaItem:any) => {
-      if(areaItem.hardwareId == item.hardwareId){
-        item = {
-          ...item, 
-          heatAearStatus:areaItem
-        }
-      }
-    })
-    return item;
-  });
-  //设备16个试管的基础数据
-  tubeBaseConfig();
-  //连接socket
-  const wsClient = createWebSocket(sharedWsUrl);
-  const subscription = wsClient.dataOb.subscribe((data) => {
-    if(!globeStatus){//为了只输入一行，不想后台一直打印此处日志 TODO
-      console.log('globeStatus====', data)
-    }
-    globeStatus = 1;
-    if (data.type === "cmd") {
-      const cmdInfo = getTxnRecord(data.data.commandId, "task");
-      if (cmdInfo) {
-        const command:any = cmdInfo.command;
-        //@ts-ignore
-        const cmdName = CmdDescMap[command];
-        const result = data.data.success
-          ? "执行完毕"
-          : `执行失败 ${data.data.message}`;
-        ElMessage({
-          message: `${cmdName} ${result}`,
-          type: data.data.success ? "success" : "error",
-        });
-      }
-    }
-  });
-  wsClient.connect();
-
-  onUnmounted(() => {
-    subscription.unsubscribe();
-  });
+	//6个加热区数据
+	heatList.value = settingStore.heatAreaConfig.map((item: any) => {
+		//添加一个字段，默认为未选中
+		item.isSelect = false;
+		heatAearStatusList.value.forEach((areaItem: any) => {
+			if (areaItem.hardwareId == item.hardwareId) {
+				item = {
+					...item,
+					heatAearStatus: areaItem,
+				};
+			}
+		});
+		return item;
+	});
+	//设备16个试管的基础数据
+	tubeBaseConfig();
+	//连接socket
+	const wsClient = createWebSocket(sharedWsUrl);
+	const subscription = wsClient.dataOb.subscribe(data => {
+		if (!globeStatus) {
+			//为了只输入一行，不想后台一直打印此处日志 TODO
+			console.log("globeStatus====", data);
+		}
+		globeStatus = 1;
+		if (data.type === "cmd") {
+			const cmdInfo = getTxnRecord(data.data.commandId, "task");
+			if (cmdInfo) {
+				const command: any = cmdInfo.command;
+				//@ts-ignore
+				const cmdName = CmdDescMap[command];
+				const result = data.data.success ? "执行完毕" : `执行失败 ${data.data.message}`;
+				ElMessage({
+					message: `${cmdName} ${result}`,
+					type: data.data.success ? "success" : "error",
+				});
+			}
+		}
+	});
+	wsClient.connect();
+
+	onUnmounted(() => {
+		subscription.unsubscribe();
+	});
 });
 
 //选中的托盘
 const selectedTrayList = ref<any>([]);
 const selectedTrayObj: any = {};
-const onSelectedTray = (heatAreaItem: any, type:string) => {
-  heatList.value[heatAreaItem.index] = heatAreaItem;
+const onSelectedTray = (heatAreaItem: any, type: string) => {
+	heatList.value[heatAreaItem.index] = heatAreaItem;
 	//取消选中，已经存在selectedTrayList中
-  let ids = selectedTrayList.value.map((tube:any) =>tube.id)
-  if(type == 'isClick'){//点击加热区
-    if(ids.includes(heatAreaItem.id)){
-      heatAreaItem.isSelect = false;
-      selectedTrayList.value = selectedTrayList.value.filter((selectedItem:any) => selectedItem.id != heatAreaItem.id)
-    }else{
-      heatAreaItem.isSelect = true;
-      selectedTrayList.value.push(heatAreaItem)
-    }
-  }else{
-    heatAreaItem.isSelect = true;
-  }
-  heatList.value.forEach((item:any) => {
-    if(item.id == heatAreaItem.id){
-      item = heatAreaItem
-      onHeadleCraft(item)
-    }
-  })
-  console.log('hasCraftInfo---', hasCraftInfo.value)
+	let ids = selectedTrayList.value.map((tube: any) => tube.id);
+	if (type == "isClick") {
+		//点击加热区
+		if (ids.includes(heatAreaItem.id)) {
+			heatAreaItem.isSelect = false;
+			selectedTrayList.value = selectedTrayList.value.filter((selectedItem: any) => selectedItem.id != heatAreaItem.id);
+		} else {
+			heatAreaItem.isSelect = true;
+			selectedTrayList.value.push(heatAreaItem);
+		}
+	} else {
+		heatAreaItem.isSelect = true;
+	}
+	heatList.value.forEach((item: any) => {
+		if (item.id == heatAreaItem.id) {
+			item = heatAreaItem;
+			onHeadleCraft(item);
+		}
+	});
+	console.log("hasCraftInfo---", hasCraftInfo.value);
 };
 
 //选择的加热区是否选择了工艺
-let hasCraftInfo = ref(false)
-const onHeadleCraft = (areaItem:any)=>{
-  if(areaItem.craftInfo){
-    hasCraftInfo.value = true;
-  }
-}
+let hasCraftInfo = ref(false);
+const onHeadleCraft = (areaItem: any) => {
+	if (areaItem.craftInfo) {
+		hasCraftInfo.value = true;
+	}
+};
 
 //设置加热区温度
-const onSetHeatAreaTemp = (dataInfo:any) => {
+const onSetHeatAreaTemp = (dataInfo: any) => {
 	selectedTrayObj[dataInfo.id] = dataInfo;
 	selectedTrayList.value = Object.values(selectedTrayObj);
-}
+};
 
 //加热区选择的工艺
-const onSelectCraft = (item:any, craftInfo:any) => {
-  item.isSelect = true;
-  item.craftInfo = craftInfo
-  onSelectedTray(item,'isMove')
-}
+const onSelectCraft = (item: any, craftInfo: any) => {
+	item.isSelect = true;
+	item.craftInfo = craftInfo;
+	onSelectedTray(item, "isMove");
+};
 //开始执行工艺
 const onCraftStart = () => {
-  if (!selectedTrayList.value.length) {
-    ElMessage.error("请选择目标加热区");
-	  return;
-  }
-  
-  //可能会选择多个加热区执行工艺， 批量发送指令
-  let hasCraft = true;
-  let len = selectedTrayList.value.length;
-  for(let i = 0; i < len; i++){
-    let item = selectedTrayList.value[i]
-    if(!item.craftInfo){
-      hasCraft = false;
-      ElMessage.error('选择的加热区未选择工艺')
-      break;
-    }
-    const params = {
-      craftId:null,
-      heatId: item.id
-    }
-    if(craftInfo.value?.status == 1){
-      craftStop(params).then(res => {
-        ElMessage.success('已停止执行工艺的指令')
-      })
-      return
-    }else{
-      params.craftId =  item.craftInfo.id
-      craftStart(params).then(res => {
-      ElMessage.success('已执行工艺的指令')
-    })
-    }
-    
-  }
-
-  if(hasCraft){
-    //给选择加热区heatList加一个正在执行工艺的标识
-    const selectedIds = selectedTrayList.value.map((item:any) => item.id)
-    heatList.value.forEach((item:any) => {
-      if(selectedIds.includes(item.id)){
-        item.executing_craft = true;
-      }
-    });
-  }
-}
+	if (!selectedTrayList.value.length) {
+		ElMessage.error("请选择目标加热区");
+		return;
+	}
 
-//停止工艺
-const onCraftStop = () => {
+	//可能会选择多个加热区执行工艺， 批量发送指令
+	let hasCraft = true;
+	let len = selectedTrayList.value.length;
+	for (let i = 0; i < len; i++) {
+		let item = selectedTrayList.value[i];
+		if (!item.craftInfo) {
+			hasCraft = false;
+			ElMessage.error("选择的加热区未选择工艺");
+			break;
+		}
+		const params = {
+			craftId: null,
+			heatId: item.id,
+		};
+		if (craftInfo.value?.status == 1) {
+			craftStop(params).then(res => {
+				ElMessage.success("已停止执行工艺的指令");
+			});
+			return;
+		} else {
+			params.craftId = item.craftInfo.id;
+			craftStart(params).then(res => {
+				ElMessage.success("已执行工艺的指令");
+			});
+		}
+	}
 
-}
+	if (hasCraft) {
+		//给选择加热区heatList加一个正在执行工艺的标识
+		const selectedIds = selectedTrayList.value.map((item: any) => item.id);
+		heatList.value.forEach((item: any) => {
+			if (selectedIds.includes(item.id)) {
+				item.executing_craft = true;
+			}
+		});
+	}
+};
+
+//停止工艺
+const onCraftStop = () => {};
 
 const tubeBaseConfig = () => {
-  //默认为16个
-  for (let i = 0; i < 16; i++) {
-    tubeList.push({
-      id: i + 1,
-      color: "rgb(212, 212, 212)",
-    });
-  }
+	//默认为16个
+	for (let i = 0; i < 16; i++) {
+		tubeList.push({
+			id: i + 1,
+			color: "rgb(212, 212, 212)",
+		});
+	}
 };
 
 //添加溶液
 const liquidVisible = ref(false);
 const onAddLiquid = () => {
-  //检查加液区是否有试管。
-  const liquidArea = statusStore.status?.liquidArea
-  if(liquidArea){
-    liquidVisible.value = true;
-  }else{
-    ElMessage.error('加液区未检测到托盘，无法进行加液操作')
-  }
+	//检查加液区是否有试管。
+	const liquidArea = statusStore.status?.liquidArea;
+	if (liquidArea) {
+		liquidVisible.value = true;
+	} else {
+		ElMessage.error("加液区未检测到托盘，无法进行加液操作");
+	}
 };
 
 const onAddSolution = (data: any) => {
-  let ids = data.map((item: any) => item.id);
-  //批量发送加液指令
-  const params = {
-    injectFluids:data
-  }
-  injectFluid(params)
-  globeStatus = 0
-  // tubeList.forEach((item: any) => {
-  //   if (ids.includes(item.id)) {
-  //     item.default = defaultColor;
-  //     item.color = defaultColor;
-  //     item.isSelected = true;
-  //   }
-  // });
+	let ids = data.map((item: any) => item.id);
+	//批量发送加液指令
+	const params = {
+		injectFluids: data,
+	};
+	injectFluid(params).then(res => {
+		if (res.success) {
+			setOnGoingStatus("injecting");
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+	globeStatus = 0;
+	// tubeList.forEach((item: any) => {
+	//   if (ids.includes(item.id)) {
+	//     item.default = defaultColor;
+	//     item.color = defaultColor;
+	//     item.isSelected = true;
+	//   }
+	// });
 };
 
 const changeVisible = () => {
-  craftVisible.value = false;
+	craftVisible.value = false;
 };
 
 //选择工艺
 const onChooseCaft = () => {
-  //1、是否选择了加热区
-  if (!selectedTrayList.value.length) {
-    ElMessage.error("请选择目标加热区");
-	  return;
-  }
-  craftVisible.value = true;
+	//1、是否选择了加热区
+	if (!selectedTrayList.value.length) {
+		ElMessage.error("请选择目标加热区");
+		return;
+	}
+	craftVisible.value = true;
 };
 
 //选择的工艺
-const onHandleSelectedCraft = (craftInfo:any) => {
-  selectedTrayList.value.forEach((item:any) => {
-    item.isSelect = true;
-    item.craftInfo = craftInfo
-    onSelectedTray(item,'isMove')
-    
-  })
-  const selectedIds = selectedTrayList.value.map((item:any) => item.id)
-  heatList.value.forEach((item:any) => {
-    if(selectedIds.includes(item.id)){
-      item.craftInfo = craftInfo;
-    }
-  });
-  changeVisible();	
-}
+const onHandleSelectedCraft = (craftInfo: any) => {
+	selectedTrayList.value.forEach((item: any) => {
+		item.isSelect = true;
+		item.craftInfo = craftInfo;
+		onSelectedTray(item, "isMove");
+	});
+	const selectedIds = selectedTrayList.value.map((item: any) => item.id);
+	heatList.value.forEach((item: any) => {
+		if (selectedIds.includes(item.id)) {
+			item.craftInfo = craftInfo;
+		}
+	});
+	changeVisible();
+};
 
 const onChooseTube = (tubeItem: any, index: any) => {
-  if (!tubeItem.id) return;
-  //@ts-ignore
-  let list = [...tubeList];
-  for (let i = 0; i < list.length; i++) {
-    let item = list[i];
-    if (index == i) {
-      item.color = selectedColor;
-      item.isSelected = true;
-    } else {
-      item.color = item.default ? item.default : emptyColor;
-      item.isSelected = false;
-    }
-  }
-  tubeList = [...list];
+	if (!tubeItem.id) return;
+	//@ts-ignore
+	let list = [...tubeList];
+	for (let i = 0; i < list.length; i++) {
+		let item = list[i];
+		if (index == i) {
+			item.color = selectedColor;
+			item.isSelected = true;
+		} else {
+			item.color = item.default ? item.default : emptyColor;
+			item.isSelected = false;
+		}
+	}
+	tubeList = [...list];
 };
 
 //移至加热
 const onMoveToHeat = () => {
-  //1、是否选择了加热区
-  if (!selectedTrayList.value.length) {
-    ElMessage.error("请选择目标加热区");
-	  return;
-  }
-  //2、只能选择一个加热区
-  if (selectedTrayList.value.length != 1) {
-    ElMessage.error("只能选择一个加热区");
-    return;
-  }
-  let selectedDataItem = selectedTrayList.value[0];
-  //2、判断选择的加热区是否已经有了试管架, 加热区是否有试管是通过设备上报的数据获取的
-  let hardwareId = selectedDataItem.hardwareId;
-  // let trayStatus = heatAearStatusList.value[selectedDataItem.index].trayStatus;
-  let trayStatus
-  heatAearStatusList.value.forEach((item:any) => {
-    if(hardwareId == item.hardwareId){
-      trayStatus = item.trayStatus
-    }
-  })
-  // trayStatus: 0为无托盘，1为有托盘，2为托盘抬起
-  if (trayStatus == 1) {
-    ElMessage.error("选择的加热区已有试管架，重新选择加热区");
-    return;
-  }
-
-  //调用移至加热接口
-  const params = {
-    heatId: selectedDataItem.id,
-  };
-  const command: OperationCmd = "moveToHeatArea";
-  taskCmd({ command, params }).then((res) => {
-    if (res.success) {
-      ElMessage.success("指令已发送，请稍等");
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
-
-  //指令完成成更新UI
-  let list = [...heatList.value];
-  list.forEach((item: any) => {
-    if (item.id == selectedDataItem.id) {
-      item.tubeList = JSON.parse(JSON.stringify(tubeList));
-      selectedDataItem.tubeList = JSON.parse(JSON.stringify(tubeList));
-      //标注该加热区是选中状态
-      item.isSelect = true;
-    }
-  });
-  tubeList.forEach((item:any) => {
-    item.color = '';
-    item.default = ''
-  });
-  heatList.value = [...list];
+	//1、是否选择了加热区
+	if (!selectedTrayList.value.length) {
+		ElMessage.error("请选择目标加热区");
+		return;
+	}
+	//2、只能选择一个加热区
+	if (selectedTrayList.value.length != 1) {
+		ElMessage.error("只能选择一个加热区");
+		return;
+	}
+	let selectedDataItem = selectedTrayList.value[0];
+	//2、判断选择的加热区是否已经有了试管架, 加热区是否有试管是通过设备上报的数据获取的
+	let hardwareId = selectedDataItem.hardwareId;
+	// let trayStatus = heatAearStatusList.value[selectedDataItem.index].trayStatus;
+	let trayStatus;
+	heatAearStatusList.value.forEach((item: any) => {
+		if (hardwareId == item.hardwareId) {
+			trayStatus = item.trayStatus;
+		}
+	});
+	// trayStatus: 0为无托盘，1为有托盘，2为托盘抬起
+	if (trayStatus == 1) {
+		ElMessage.error("选择的加热区已有试管架，重新选择加热区");
+		return;
+	}
+
+	//调用移至加热接口
+	const params = {
+		heatId: selectedDataItem.id,
+	};
+	const command: OperationCmd = "moveToHeatArea";
+	taskCmd({ command, params }).then(res => {
+		if (res.success) {
+			// ElMessage.success("指令已发送，请稍等");
+			setOnGoingStatus("movingToHeat");
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+
+	//指令完成成更新UI
+	let list = [...heatList.value];
+	list.forEach((item: any) => {
+		if (item.id == selectedDataItem.id) {
+			item.tubeList = JSON.parse(JSON.stringify(tubeList));
+			selectedDataItem.tubeList = JSON.parse(JSON.stringify(tubeList));
+			//标注该加热区是选中状态
+			item.isSelect = true;
+		}
+	});
+	tubeList.forEach((item: any) => {
+		item.color = "";
+		item.default = "";
+	});
+	heatList.value = [...list];
 };
 
 //移至加液区(操作区)
-const currentSelectedTube = ref({})
+const currentSelectedTube = ref({});
 const onMoveToOperationArea = () => {
 	//1、判断加液区是否有试管架(暂时获取不到这个状态)
 	//1、是否选择了试管架/加热区
@@ -470,41 +441,41 @@ const onMoveToOperationArea = () => {
 		return false;
 	}
 	let selectedDataItem = selectedTrayList.value[0];
-  currentSelectedTube.value = selectedDataItem
+	currentSelectedTube.value = selectedDataItem;
 	//3、选择的加热区有没有试管架
-	if(!selectedDataItem.tubeList || !selectedDataItem.tubeList.length){
+	if (!selectedDataItem.tubeList || !selectedDataItem.tubeList.length) {
 		ElMessage.error("选择的加热区没有试管架");
 		return false;
 	}
 	//4、发送移至加液区指令
 	const params = {
-		heatId: selectedDataItem.id
-	}
-	onSendCmd('moveToActionArea', params)
+		heatId: selectedDataItem.id,
+	};
+	onSendCmd("moveToActionArea", params);
 	//更新UI
-	heatList.value.forEach((item:any) => {
-		if(item.id == selectedDataItem.id){
-			tubeList  = [...item.tubeList]
+	heatList.value.forEach((item: any) => {
+		if (item.id == selectedDataItem.id) {
+			tubeList = [...item.tubeList];
 		}
-	})
-	onSelectedTray(selectedDataItem, 'isMove')
-  return true;
-}
+	});
+	onSelectedTray(selectedDataItem, "isMove");
+	return true;
+};
 
 //移至特殊区域
 const onMoveToSpecial = () => {
 	//检查是否设置了异常区域
-	const systemSetting = settingStore.systemSetting
-	let specialArea:any = {}
-	if(systemSetting && systemSetting.length){
+	const systemSetting = settingStore.systemSetting;
+	let specialArea: any = {};
+	if (systemSetting && systemSetting.length) {
 		systemSetting.forEach(item => {
-			if(item.code == "sys_setting_abnormal_area"){
+			if (item.code == "sys_setting_abnormal_area") {
 				specialArea = item;
 			}
-		})
+		});
 
-		if(!specialArea.id){
-			ElMessage.error('未设置异常区域，请在系统配置中设置')
+		if (!specialArea.id) {
+			ElMessage.error("未设置异常区域，请在系统配置中设置");
 			return;
 		}
 
@@ -519,115 +490,122 @@ const onMoveToSpecial = () => {
 			return;
 		}
 		let selectedDataItem = selectedTrayList.value[0];
-		selectedDataItem.isSelect = false
-		onSelectedTray(selectedDataItem, 'isMove')
+		selectedDataItem.isSelect = false;
+		onSelectedTray(selectedDataItem, "isMove");
 
 		const params = {
-			heatId:selectedDataItem.id
-		}
-		onSendCmd('moveToActionArea', params)
+			heatId: selectedDataItem.id,
+		};
+		onSendCmd("moveToActionArea", params);
 	}
-}
+};
 
 //开始实验
-const taskNameVisible = ref(false)
-const taskId = ref()
-const onSave = ()=> {
-  if(!taskName.value)return;
+const taskNameVisible = ref(false);
+const taskId = ref();
+const onSave = () => {
+	if (!taskName.value) return;
 	const params = {
-		name: taskName.value
-	}
+		name: taskName.value,
+	};
 	saveTaskName(params).then(res => {
-		if(res.success){
-      taskId.value = res.data.id;
-			ElMessage.success('保存成功')
-			onCancel()
-		}else{
-			ElMessage.error(res.msg)
+		if (res.success) {
+			taskId.value = res.data.id;
+			ElMessage.success("保存成功");
+			onCancel();
+		} else {
+			ElMessage.error(res.msg);
 		}
-	})
-}
+	});
+};
 
 const startTask = async () => {
-  const res = await getIngTask();
-
-  if(res.data) {
-    ElMessageBox.confirm(`上一实验"${res.data.name}"未结束，是否结束并开始新的实验`, '提示', {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      center: true,
-    }).then(() => {
-      stopTask({taskId: res.data.id}).then(res=> {
-        if(res.success){
-          ElMessage.success('实验已停止')
-          taskNameVisible.value = true;
-        }else{
-          ElMessage.error('实验停止失败')
-        }
-      }).catch(e=>{
-        ElMessage.error(e)
-      })
-    }).catch(() => {})
-  }else {
-    taskNameVisible.value = true
-  }
+	const res = await getIngTask();
 
-}
+	if (res.data) {
+		ElMessageBox.confirm(`上一实验"${res.data.name}"未结束，是否结束并开始新的实验`, "提示", {
+			confirmButtonText: "确定",
+			cancelButtonText: "取消",
+			center: true,
+		})
+			.then(() => {
+				stopTask({ taskId: res.data.id })
+					.then(res => {
+						if (res.success) {
+							ElMessage.success("实验已停止");
+							taskNameVisible.value = true;
+						} else {
+							ElMessage.error("实验停止失败");
+						}
+					})
+					.catch(e => {
+						ElMessage.error(e);
+					});
+			})
+			.catch(() => {});
+	} else {
+		taskNameVisible.value = true;
+	}
+};
 
 //结束实验
 const onEndTask = () => {
-  const params = {
-    taskId: taskId.value
-  }
-  stopTask(params).then(res=> {
-    heatList.value.forEach((item:any) => {
-      item.executing_craft = false;
-    });
-    if(res.success){
-      ElMessage.success('实验已停止')
-    }else{
-      ElMessage.error('实验停止失败')
-    }
-  }).catch(e=>{
-    ElMessage.error(e)
-  })
-}
+	const params = {
+		taskId: taskId.value,
+	};
+	stopTask(params)
+		.then(res => {
+			heatList.value.forEach((item: any) => {
+				item.executing_craft = false;
+			});
+			if (res.success) {
+				ElMessage.success("实验已停止");
+			} else {
+				ElMessage.error("实验停止失败");
+			}
+		})
+		.catch(e => {
+			ElMessage.error(e);
+		});
+};
 
-const onCancel = ()=> {
+const onCancel = () => {
 	taskNameVisible.value = false;
-}
+};
 
 //开门
-const doorStatus = ref(false)//开门状态 。true: 门已打开， false： 门未打开
+const doorStatus = ref(false); //开门状态 。true: 门已打开， false： 门未打开
 const onOPenDoor = () => {
-  const params = {};
-  const command: OperationCmd = "openDoor";
-  taskCmd({ command, params }).then((res) => {
-    if (res.success) {
-      ElMessage.success("指令已发送，请稍等");
-      doorStatus.value = true;
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
+	const params = {};
+	const command: OperationCmd = "openDoor";
+	taskCmd({ command, params }).then(res => {
+		if (res.success) {
+			// ElMessage.success("指令已发送，请稍等");
+			doorStatus.value = true;
+			setOnGoingStatus("doorOpening");
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
 };
 
 //关门
 const onCloseDoor = () => {
-  const params = {};
-  const command: OperationCmd = "closeDoor";
-  taskCmd({ command, params }).then((res) => {
-    if (res.success) {
-      ElMessage.success("指令已发送，请稍等");
-      doorStatus.value = false;
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
-}
+	const params = {};
+	const command: OperationCmd = "closeDoor";
+	taskCmd({ command, params }).then(res => {
+		if (res.success) {
+			// ElMessage.success("指令已发送，请稍等");
+			doorStatus.value = false;
+			setOnGoingStatus("doorClosing");
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+};
 
 //开始加热
-const isHeating = ref(false)
+const isHeating = ref(false);
 const onStartHeat = () => {
 	//选择的加热区
 	if (!selectedTrayList.value.length) {
@@ -638,359 +616,357 @@ const onStartHeat = () => {
 	let existTubeRack = true;
 	//加热区是否设置了加热温度
 	let hasSetTemp = true;
-	selectedTrayList.value.forEach((item:any) => {
+	selectedTrayList.value.forEach((item: any) => {
 		let tubeList = item.tubeList;
-		if(!tubeList || !tubeList.length){
+		if (!tubeList || !tubeList.length) {
 			existTubeRack = false;
 		}
-		if(!item.temperature){
+		if (!item.temperature) {
 			hasSetTemp = false;
 		}
-	})
+	});
 
-	if(!existTubeRack){
-		ElMessage.error("选择的加热区未放置试管架，请重新选择")
+	if (!existTubeRack) {
+		ElMessage.error("选择的加热区未放置试管架，请重新选择");
 		return;
 	}
-	if(!hasSetTemp){
-		ElMessage.error("选择的加热区未设置温度，请设置温度")
+	if (!hasSetTemp) {
+		ElMessage.error("选择的加热区未设置温度，请设置温度");
 		return;
 	}
 
 	//后台批量发送指令
-	const cmdList:any = []
-	selectedTrayList.value.forEach((heatArea:any) => {
+	const cmdList: any = [];
+	selectedTrayList.value.forEach((heatArea: any) => {
 		const params = {
-      heatId : heatArea.id,
-      temperature: heatArea.temperature
-    }
-    taskCmd({ command: 'startHeat', params }).then((res) => {
-      if (res.success) {
-        ElMessage.success("指令已发送，请稍等");
-        isHeating.value = true;
-      } else {
-        ElMessage.error(res.msg);
-      }
-    });
-	})
+			heatId: heatArea.id,
+			temperature: heatArea.temperature,
+		};
+		taskCmd({ command: "startHeat", params }).then(res => {
+			if (res.success) {
+				// ElMessage.success("指令已发送，请稍等");
+				isHeating.value = true;
+			} else {
+				ElMessage.error(res.msg);
+			}
+		});
+	});
 	// onSendCmd("startHeat", cmdList)
-}
+};
 
 //停止加热
 const onStopHeat = () => {
-  //选择的加热区
+	//选择的加热区
 	if (!selectedTrayList.value.length) {
 		ElMessage.error("请选择目标加热区");
 		return;
 	}
-	selectedTrayList.value.forEach((heatArea:any) => {
+	selectedTrayList.value.forEach((heatArea: any) => {
 		const params = {
-      heatId : heatArea.id,
-    }
-    taskCmd({ command: 'stopHeat', params }).then((res) => {
-      if (res.success) {
-        ElMessage.success("指令已发送，请稍等");
-        isHeating.value = false;
-      } else {
-        ElMessage.error(res.msg);
-      }
-    });
-	})
-}
+			heatId: heatArea.id,
+		};
+		taskCmd({ command: "stopHeat", params }).then(res => {
+			if (res.success) {
+				// ElMessage.success("指令已发送，请稍等");
+				isHeating.value = false;
+			} else {
+				ElMessage.error(res.msg);
+			}
+		});
+	});
+};
 
 //开始摇匀
-const isSharking = ref(false)
+const isSharking = ref(false);
 const onStartShakingTube = () => {
-  const params = {}
-  taskCmd({ command:'startShakeUp', params}).then((res) => {
-      if (res.success) {
-        ElMessage.success("指令已发送，请稍等");
-        isSharking.value = true;
-      } else {
-        ElMessage.error(res.msg);
-      }
-    });
-
-}
+	const params = {};
+	taskCmd({ command: "startShakeUp", params }).then(res => {
+		if (res.success) {
+			// ElMessage.success("指令已发送，请稍等");
+			isSharking.value = true;
+			setOnGoingStatus("shaking");
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+};
 
 //结束摇匀
 const onStopShakingTube = () => {
-  const params = {}
-  taskCmd({ command:'stopShakeUp', params}).then((res) => {
-    if (res.success) {
-      ElMessage.success("指令已发送，请稍等");
-      isSharking.value = false;
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
-}
+	const params = {};
+	taskCmd({ command: "stopShakeUp", params }).then(res => {
+		if (res.success) {
+			// ElMessage.success("指令已发送，请稍等");
+			isSharking.value = false;
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+};
 
 //抬起托盘
 const onUpTray = () => {
-  if (!selectedTrayList.value.length) {
-    ElMessage.error("请选择目标加热区");
-	  return;
-  }
-  //选择了多个加热区，可托起多个加热区试管加
-  selectedTrayList.value.forEach((heatAreaItem:any) => {
-    const params = {
-      heatId: heatAreaItem.id
-    }
-
-    taskCmd({ command:'upTray', params }).then((res) => {
-      if (res.success) {
-        ElMessage.success("指令已发送，请稍等");
-      } else {
-        ElMessage.error(res.msg);
-      }
-    });
-    
-  })
-  
-}
+	if (!selectedTrayList.value.length) {
+		ElMessage.error("请选择目标加热区");
+		return;
+	}
+	//选择了多个加热区，可托起多个加热区试管加
+	selectedTrayList.value.forEach((heatAreaItem: any) => {
+		const params = {
+			heatId: heatAreaItem.id,
+		};
+
+		taskCmd({ command: "upTray", params }).then(res => {
+			if (res.success) {
+				// ElMessage.success("指令已发送，请稍等");
+			} else {
+				ElMessage.error(res.msg);
+			}
+		});
+	});
+};
 
 //修改加热区状态 selectedValue: 0 | 1 | 2; // 0为无托盘，1为有托盘，2为托盘抬起
-const updateheatAearStatus = (selectedValue:any, heatId:string) => {
-  let heaterList = statusStore.status?.heatArea
-  if(heaterList){
-    heaterList.forEach((item:any) => {
-      if(item.heaterId == heatId){
-        item.trayStatus = selectedValue
-      }
-    })
-    const data:any = {
-      ...statusStore.status,
-      heater:[...heaterList]
-    }
-    statusStore.setStatus(data)
-  }
-  
-}
+const updateheatAearStatus = (selectedValue: any, heatId: string) => {
+	let heaterList = statusStore.status?.heatArea;
+	if (heaterList) {
+		heaterList.forEach((item: any) => {
+			if (item.heaterId == heatId) {
+				item.trayStatus = selectedValue;
+			}
+		});
+		const data: any = {
+			...statusStore.status,
+			heater: [...heaterList],
+		};
+		statusStore.setStatus(data);
+	}
+};
 
-const onSendCmd = (command:OperationCmd,params:any)=> {
+const onSendCmd = (command: OperationCmd, params: any) => {
 	//发送加热指令
-	taskCmd({ command, params }).then((res) => {
+	taskCmd({ command, params }).then(res => {
 		if (res.success) {
-			ElMessage.success("指令已发送，请稍等");
+			// ElMessage.success("指令已发送，请稍等");
+			setOnGoingStatus("movingToAct");
 		} else {
 			ElMessage.error(res.msg);
 		}
 	});
-}
+};
 </script>
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;
 
 .graphite_home {
-  background: #f6f6f6;
-  display: flex;
-  // @media (min-width: $md) {
-  flex-direction: column;
-  align-items: stretch;
-  // }
-  .picture_area {
-    display: flex;
-    flex-direction: column-reverse;
-    margin: 0 12px;
-  }
-  @media (min-width: $lg) {
-    flex-direction: row;
-    align-items: start;
-    .picture_area {
-      display: flex;
-      flex-direction: column;
-    }
-  }
+	background: #f6f6f6;
+	display: flex;
+	// @media (min-width: $md) {
+	flex-direction: column;
+	align-items: stretch;
+	// }
+	.picture_area {
+		display: flex;
+		flex-direction: column-reverse;
+		margin: 0 12px;
+	}
+	@media (min-width: $lg) {
+		flex-direction: row;
+		align-items: start;
+		.picture_area {
+			display: flex;
+			flex-direction: column;
+		}
+	}
 }
 .heat_area {
-  margin: 5px 0;
-
-  background: #ffffff;
-  border-radius: 20px;
-
-  column-gap: 8px;
-  row-gap: 10px;
-  padding: 1.5rem 0.5rem;
-  min-width: 600px;
-  flex: 1 1 auto;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  > * {
-    justify-self: center;
-    align-self: center;
-  }
-
-  @media (min-width: $md) {
-    column-gap: 12px;
-    row-gap: 20px;
-    height: 47.5rem;
-  }
-
-  @media (min-width: $xl) {
-    padding: 4.5rem 1rem;
-  }
-
-  .craft_executing_modal {
-    position: absolute;
-    width: 10.5rem;
-    height: 18rem;
-    background: rgb(230, 230, 230);
-    opacity: 0.5;
-    z-index: 9999;
-  }
+	margin: 5px 0;
+
+	background: #ffffff;
+	border-radius: 20px;
+
+	column-gap: 8px;
+	row-gap: 10px;
+	padding: 1.5rem 0.5rem;
+	min-width: 600px;
+	flex: 1 1 auto;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	> * {
+		justify-self: center;
+		align-self: center;
+	}
+
+	@media (min-width: $md) {
+		column-gap: 12px;
+		row-gap: 20px;
+		height: 47.5rem;
+	}
+
+	@media (min-width: $xl) {
+		padding: 4.5rem 1rem;
+	}
+
+	.craft_executing_modal {
+		position: absolute;
+		width: 10.5rem;
+		height: 18rem;
+		background: rgb(230, 230, 230);
+		opacity: 0.5;
+		z-index: 9999;
+	}
 }
 
 .picture_area {
-  display: flex;
-  flex-direction: column;
-  margin: 5px;
-  // margin-left: 1.25rem;
-  background: #ffffff;
-  border-radius: 20px;
-  padding: 0 1.5rem;
-  @media (min-width: $lg) {
-    flex: 1 1 180px;
-  }
-  @media (min-width: $xl) {
-    flex: 0 0 auto;
-    width: 27rem;
-  }
-
-  .graphite_btn_container {
-    margin: 2rem 0;
-    gap: 0.625rem;
-    display: grid;
-    @media (max-width: calc($md - 0.1px)) {
-      grid-template-columns: repeat(2, 1fr);
-      .op_open_door {
-        grid-column: 1/-1;
-      }
-      .op_up_tray {
-        grid-column: 1/-1;
-      }
-    }
-    @media (min-width: $md) and (max-width: calc($lg - 0.1px)) {
-      grid-template-columns: repeat(6, 1fr);
-      > * {
-        grid-column: span 3;
-      }
-      .op_open_door {
-        grid-column: 1/-1;
-      }
-      .op_move_heat {
-        grid-column: span 2;
-      }
-      .op_move_act {
-        grid-column: span 2;
-      }
-      .op_move_exception {
-        grid-column: span 2;
-      }
-    }
-    @media (min-width: $lg) and (max-width: calc($xl - 0.1px)) {
-      grid-template-columns: repeat(2, 1fr);
-      .op_open_door {
-        grid-column: 1/-1;
-      }
-      .op_up_tray {
-        grid-column: 1/-1;
-      }
-    }
-    @media (min-width: $xl) {
-      grid-template-columns: repeat(6, 1fr);
-      > * {
-        grid-column: span 3;
-      }
-      .op_open_door {
-        grid-column: 1/-1;
-      }
-      .op_move_heat {
-        grid-column: span 2;
-      }
-      .op_move_act {
-        grid-column: span 2;
-      }
-      .op_move_exception {
-        grid-column: span 2;
-      }
-    }
-  }
+	display: flex;
+	flex-direction: column;
+	margin: 5px;
+	// margin-left: 1.25rem;
+	background: #ffffff;
+	border-radius: 20px;
+	padding: 0 1.5rem;
+	@media (min-width: $lg) {
+		flex: 1 1 180px;
+	}
+	@media (min-width: $xl) {
+		flex: 0 0 auto;
+		width: 27rem;
+	}
+
+	.graphite_btn_container {
+		margin: 2rem 0;
+		gap: 0.625rem;
+		display: grid;
+		@media (max-width: calc($md - 0.1px)) {
+			grid-template-columns: repeat(2, 1fr);
+			.op_open_door {
+				grid-column: 1/-1;
+			}
+			.op_up_tray {
+				grid-column: 1/-1;
+			}
+		}
+		@media (min-width: $md) and (max-width: calc($lg - 0.1px)) {
+			grid-template-columns: repeat(6, 1fr);
+			> * {
+				grid-column: span 3;
+			}
+			.op_open_door {
+				grid-column: 1/-1;
+			}
+			.op_move_heat {
+				grid-column: span 2;
+			}
+			.op_move_act {
+				grid-column: span 2;
+			}
+			.op_move_exception {
+				grid-column: span 2;
+			}
+		}
+		@media (min-width: $lg) and (max-width: calc($xl - 0.1px)) {
+			grid-template-columns: repeat(2, 1fr);
+			.op_open_door {
+				grid-column: 1/-1;
+			}
+			.op_up_tray {
+				grid-column: 1/-1;
+			}
+		}
+		@media (min-width: $xl) {
+			grid-template-columns: repeat(6, 1fr);
+			> * {
+				grid-column: span 3;
+			}
+			.op_open_door {
+				grid-column: 1/-1;
+			}
+			.op_move_heat {
+				grid-column: span 2;
+			}
+			.op_move_act {
+				grid-column: span 2;
+			}
+			.op_move_exception {
+				grid-column: span 2;
+			}
+		}
+	}
 }
 
 .btn_size {
-  height: 2.75rem;
-  color: #1989fa;
-  border: 1px solid #1989fa;
-  font-size: 1.25rem;
+	height: 2.75rem;
+	color: #1989fa;
+	border: 1px solid #1989fa;
+	font-size: 1.25rem;
 }
 
 .liquid {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  .addLiquid {
-    width: 70.375rem;
-    height: 52rem;
-    background: #ffffff;
-  }
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+	.addLiquid {
+		width: 70.375rem;
+		height: 52rem;
+		background: #ffffff;
+	}
 }
 
 .home_tube {
-  width: 13rem;
-  height: 13rem;
-  background: #384d5d;
-  opacity: 1;
-  margin-top: 0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.6rem;
-  padding-top: 0.2rem;
-  border-radius: 1.5rem;
-  .inner-circle {
-    border-radius: 50%;
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: rgb(212, 212, 212);
-  }
+	width: 13rem;
+	height: 13rem;
+	background: #384d5d;
+	opacity: 1;
+	margin-top: 0.5rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 0.6rem;
+	padding-top: 0.2rem;
+	border-radius: 1.5rem;
+	.inner-circle {
+		border-radius: 50%;
+		width: 2.5rem;
+		height: 2.5rem;
+		background-color: rgb(212, 212, 212);
+	}
 }
 
-.task_name{
-	height:17.25rem;
+.task_name {
+	height: 17.25rem;
 	width: 27.5rem;
 	background: #ffffff;
 
-	.task_title{
+	.task_title {
 		font-size: 1.25rem;
-		color: #40474E;
+		color: #40474e;
 		margin-left: 1.25rem;
-		margin-top: 1.875rem
+		margin-top: 1.875rem;
 	}
 
-	.task_name_content{
-		margin-top:1.875rem;
+	.task_name_content {
+		margin-top: 1.875rem;
 		margin-left: 1.5rem;
 		font-size: 1.25rem;
-		color: #40474E;
-    display: flex;
-		.task_input{
+		color: #40474e;
+		display: flex;
+		.task_input {
 			border: 1px solid #dcdcdc;
 			border-radius: 8px;
 			height: 3rem;
 		}
 	}
 
-	.task_button{
+	.task_button {
 		display: flex;
 		justify-content: center;
 	}
 }
-.cancel_btn{
-  border: 1px solid rgb(226, 226, 226);
-  width: 5rem;
-  margin-left: 2rem;
+.cancel_btn {
+	border: 1px solid rgb(226, 226, 226);
+	width: 5rem;
+	margin-left: 2rem;
 }
 </style>