1

src/src/main/java/com/my/graphiteDigesterBg/move/MoveHeatPlateSlotHeating.java

@@ -85,6 +85,7 @@ public class MoveHeatPlateSlotHeating extends DiTaskMoveBase {
             this.slot.isHeating = false;
             this.slot.heatingStartedAt = null;
             this.slot.taskUuid = null;
+            this.slot.destTemperature = null;
             this.finishCallback.callback();
             return ;
         }

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

@@ -1,37 +1,18 @@
 <template>
   <div class="h-full flex flex-col">
     <a-row class="h-0 grow">
-      <!-- 拍照区 -->
-      <a-col :span="9" class="p-1">
+      <a-col :span="9" class="p-1"> <!-- 拍照区 -->
         <operation-camera />
       </a-col>
-      
-      <!-- 加热区 -->
-      <a-col :span="10" class="p-1">
-        <div class="h-full flex flex-col bg-white rounded-2xl p-5">
-          <div class="h-0 grow flex flex-col">
+      <a-col :span="10" class="p-1"> <!-- 加热盘 -->
         <operation-tube-racks :tube-rack-slots="tubeRackSlots"/>
-          </div>
-          <div class="mt-3">
-            <a-row>
-              <a-col :span="13" class="text-left">
-                <a-button @click="actionPresetSetup"><SettingOutlined /></a-button>
-                <a-button class="ml-1" @click="actionAcidAdd"><ExperimentOutlined /></a-button>
-                <a-button class="ml-1" @click="actionHeating"><FireOutlined /></a-button>
-                <operation-sample-take-shot />
-              </a-col>
-              <a-col :span="11" class="text-right">
-                <operation-sample-add />
-                <a-button class="ml-1" @click="actionSampleTakeOut"><MinusCircleOutlined /></a-button>
-              </a-col>
-            </a-row>
-          </div>
-        </div>
       </a-col>
       <a-col :span="5" class="p-1"> <!-- 温度 -->
         <operation-tube-rack-temperature :tube-rack-slots="tubeRackSlots"/>
       </a-col>
     </a-row>
+
+
   <div class="p-1">
     <div class="flex flex-row justify-evenly bg-white rounded-2xl p-5">
       <div v-for="acidBucket in acidBuckets" :key="acidBucket.index">
@@ -110,39 +91,6 @@
       </a-form-item>
     </a-form>
   </a-modal>
-
-  <!-- 加热 -->
-  <a-modal v-model:visible="heating.enable" title="加热">
-    <a-form :label-col="{span:4}" :wrapper-col="{span:20}" label-align="left" class="py-5">
-      <a-form-item label="位置">
-        <a-radio-group v-model:value="heating.slotIndex" button-style="solid">
-          <a-radio-button value="0">A-1</a-radio-button>
-          <a-radio-button value="1">A-2</a-radio-button>
-          <a-radio-button value="2">A-3</a-radio-button>
-          <a-radio-button value="3">A-4</a-radio-button>
-          <a-radio-button value="4">A-5</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item label="温度">
-        <a-input-number v-model:value="heating.temperature" :min="0" addon-after="℃"/>
-      </a-form-item>
-      <a-form-item label="持续时间">
-        <a-input-number v-model:value="heating.duration" :min="0" addon-after="分钟" />
-      </a-form-item>
-    </a-form>
-
-    <template #footer>
-      <a-row>
-        <a-col :span="12" class="text-left">
-          <a-button @click="actionHeatingStop">停止</a-button>
-        </a-col>
-        <a-col :span="12">
-          <a-button @click="actionHeatingCancel">取消</a-button>
-          <a-button type="primary" @click="actionHeatingOk">确认</a-button>
-        </a-col>
-      </a-row>
-    </template>
-  </a-modal>
 </div>
 </template>
 <script setup>
@@ -159,8 +107,6 @@ const sampleTakeout = ref({enable:false,slotIndex:0});
 const presetSetup = ref({enable:false,slotIndex:0,id:null});
 /** @var {Object} */
 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} */
 const tubeRackSlots = ref([]);
 /** @var {Array} */
@@ -273,37 +219,4 @@ async function acidAddOk() {
 function acidAddCancel() {
     acidAdd.value.enable = false;
 }
-
-// 加热
-function actionHeating() {
-    heating.value.enable = true;
-}
-
-// 加热
-async function actionHeatingOk() {
-    heating.value.enable = false;
-    let client = ApiClient.getClient();
-    await client.taskAppend('Heating',{
-      slotIndex:heating.value.slotIndex * 1,
-      temperature:heating.value.temperature * 1,
-      duration:heating.value.duration * 1
-    });
-}
-
-// 加热取消
-function actionHeatingCancel() {
-    heating.value.enable = false;
-}
-
-// 加热停止
-async function actionHeatingStop() {
-    let slotIndex = heating.value.slotIndex * 1;
-    let taskId = tubeRackSlots.value[slotIndex].taskUuid;
-    heating.value.enable = false;
-    let client = ApiClient.getClient();
-    await client.taskActionExecute(taskId, 'cancel');
-}
 </script>
-<style scoped>
-.heating-plate {background: #EEEFF8;border: solid 12px #E5E7F2;}
-</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <a-button class="ml-1" 
+    style="background: transparent;border: solid 1px #becfe7;color: #7c92b1;"
+    @click="actionModalShow"
+  ><FireOutlined /></a-button>
+  
+  <!-- 加热 -->
+  <a-modal v-if="enable" v-model:visible="enable" title="加热">
+    <a-form :label-col="{span:4}" :wrapper-col="{span:20}" label-align="left" class="py-5">
+      <a-form-item label="温度">
+        <a-input-number class="w-full" v-model:value="heating.temperature" :min="0" addon-after="℃"/>
+      </a-form-item>
+      <a-form-item label="持续时间">
+        <a-input-number class="w-full" v-model:value="heating.duration" :min="0" addon-after="分钟" />
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-row>
+        <a-col :span="12" class="text-left">
+          <a-button v-if="props.activeSlot.isHeating" danger @click="actionHeatingStop">停止</a-button>
+        </a-col>
+        <a-col :span="12">
+          <a-button @click="actionHeatingCancel">取消</a-button>
+          <a-button type="primary" @click="actionHeatingStart">确认</a-button>
+        </a-col>
+      </a-row>
+    </template>
+  </a-modal>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { ref } from 'vue';
+/** @var {Object} */
+const props = defineProps({
+    activeSlot: Object,
+});
+/** @var {Boolean} */
+const enable = ref(false);
+/** @var {Object} */
+const heating = ref({temperature:100,duration:1});
+
+// 显示加热弹框
+function actionModalShow() {
+    enable.value = true;
+}
+
+// 加热
+async function actionHeatingStart() {
+    enable.value = false;
+    let client = ApiClient.getClient();
+    await client.taskAppend('Heating',{
+        slotIndex : props.activeSlot.index * 1,
+        temperature : heating.value.temperature * 1,
+        duration : heating.value.duration * 1
+    });
+}
+
+// 加热取消
+function actionHeatingCancel() {
+    enable.value = false;
+}
+
+// 加热停止
+async function actionHeatingStop() {
+    let client = ApiClient.getClient();
+    let tubeRackSlots = await client.resourceDataGet('HeatingTubeRackSlot');
+    
+    let slotIndex = props.activeSlot.index * 1;
+    let taskId = tubeRackSlots[slotIndex].taskUuid;
+    await client.taskActionExecute(taskId, 'cancel');
+
+    enable.value = false;
+}
+</script>

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="h-full flex flex-col bg-white rounded-2xl p-5" style="background-color: #EEF5FF;">
+  <div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: #EEF5FF;">
     <div class="h-0 grow flex flex-col justify-between">
       <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" class="mb-2">
         <div class="flex flex-row justify-between text-gray-400 px-2 py-1 rounded-t-md" style="background-color:#DCE8F7;">
           <div v-if="!tubeRackSlot.isErrorSlot">A-{{ tubeRackSlot.index + 1 }}</div>
           <div v-else>异常处理</div>
-          <div>目标温度：{{ tubeRackSlot.destTemperature/100 }}℃</div>
+          <div>目标温度：{{ (null===tubeRackSlot.destTemperature) ? '--' : tubeRackSlot.destTemperature/100 }} ℃</div>
         </div>
         <div class="flex flex-row p-2 rounded-b-md" style="background-color: #E2EEFD;">
           <div class="flex flex-row items-center">
@@ -62,7 +62,6 @@ function getTubeRackSlotHeatingProgress(tubeRackSlot) {
     return Math.round(heating / total * 100);
 }
 
-
 // 获取保持进度
 function getTubeRackSlotHoldingProgress(tubeRackSlot) {
     if ( !tubeRackSlot.isHeating ) {

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

@@ -1,5 +1,14 @@
 <template>
-  <div ref="container" class="heating-plate h-0 grow bg-green-400 flex flex-col justify-center items-center rounded-full">
+
+
+<div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: rgb(238, 245, 255);">
+          <div class="h-0 grow flex flex-col">
+            
+
+
+
+
+            <div ref="container" class="heating-plate h-0 grow flex flex-col justify-center items-center rounded-full">
     <div class="relative w-1/4 h-1/4">
       <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" 
         :class="getTubeRackSlotClass(tubeRackSlot)" 
@@ -23,10 +32,37 @@
       </div>
     </div>
   </div>
+
+
+
+
+
+          </div>
+          <div class="mt-3">
+            <a-row>
+              <a-col :span="13" class="text-left">
+                <!-- 这里还有个预设按钮 ~~~ -->
+                <a-button class="ml-1" @click="actionAcidAdd"><ExperimentOutlined /></a-button>
+                <operation-tube-rack-heating v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
+                <!-- <operation-sample-take-shot /> -->
+              </a-col>
+              <a-col :span="11" class="text-right">
+                <!-- <operation-sample-add /> -->
+                <a-button class="ml-1" @click="actionSampleTakeOut"><MinusCircleOutlined /></a-button>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+
+
+
+  
 </template>
 <script setup>
 import { ref } from 'vue';
 import anime from 'animejs/lib/anime.es.js';
+import OperationTubeRackHeating from './OperationTubeRackHeating.vue';
 /** @var {Object} */
 const props = defineProps({
   tubeRackSlots: Array,
@@ -65,6 +101,7 @@ function actionActiveSlot(tubeRackSlot) {
 }
 </script>
 <style scoped>
+.heating-plate {box-shadow: inset 0px 0px 100px 0px rgb(194 211 231);border: solid 1px #cdcdcd;}
 .tube-rack-slot {position: absolute;width: 100%;height: 100%;}
 .tube-rack-slot .title {font-size: 16px;font-weight: bold;letter-spacing: 0.06em;top:-45px;color: #D6D9F1;}
 .tube-rack-slot.active .title {color:#26D574;}