sige 1 year ago
parent
commit
2af4215f7e
  1. 1
      src/src/main/java/com/my/graphiteDigesterBg/move/MoveHeatPlateSlotHeating.java
  2. 95
      src/web/src/pages/main/contents/Operation.vue
  3. 75
      src/web/src/pages/main/contents/OperationTubeRackHeating.vue
  4. 5
      src/web/src/pages/main/contents/OperationTubeRackTemperature.vue
  5. 39
      src/web/src/pages/main/contents/OperationTubeRacks.vue

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 ;
}

95
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>

75
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>

5
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 ) {

39
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;}

Loading…
Cancel
Save