You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
7.9 KiB
355 lines
7.9 KiB
<template>
|
|
<div
|
|
class="heat_main"
|
|
:style="`${
|
|
trayInfo.isSelect
|
|
? 'border:4px solid rgb(66 215 76)'
|
|
: 'border:4px solid #ffffff'
|
|
}`"
|
|
>
|
|
<section class="heat_pos_text">
|
|
<div class="pos_text">{{ trayInfo.name }}</div>
|
|
<div class="pos_text pos_state">已放置</div>
|
|
</section>
|
|
|
|
<section
|
|
class="heat_pos"
|
|
:style="`background:${trayInfo?.id ? '' : ''}`"
|
|
@click="onSelectTray"
|
|
>
|
|
<div
|
|
v-for="(tube, index) in trayInfo.tubeList || tubeList"
|
|
:key="index"
|
|
class="inner-circle"
|
|
@click.stop="onHandleTube(tube)"
|
|
:style="{ background: tube.color || 'rgb(212, 212, 212)' }"
|
|
></div>
|
|
<!--执行中状态的遮罩层-->
|
|
<div class="craft_executing_modal" v-if="trayInfo.state == 1">
|
|
<div class="loading">
|
|
<img :src="LoadingSvg" />
|
|
</div>
|
|
<div class="tray_craft">工艺名称</div>
|
|
<div class="tray_exce">工艺执行中</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="heat_footer">
|
|
<div class="heat_temperature" @click="setTemperature">
|
|
<template v-if="trayInfo?.id">
|
|
<div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
|
|
<div class="heating">加热中</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="target_temp set_temp">设置目标温度</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex items-center py-4 justify-between px-2">
|
|
<div class="temp_text">120℃</div>
|
|
<button
|
|
class="btn-light text-sm px-4"
|
|
@click="
|
|
() => {
|
|
onChooseCraft();
|
|
}
|
|
"
|
|
>
|
|
选择
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<OverlayModal :visible="tempVisible">
|
|
<div class="set_temp_modal_content">
|
|
<h3 class="set_temp_title">设定温度</h3>
|
|
<section class="temp_label">
|
|
<div class="text-xl">
|
|
目标温度:<input
|
|
type="number"
|
|
v-model="heatAreaTemperature"
|
|
class="temp_input"
|
|
placeholder="请输入温度"
|
|
/>
|
|
</div>
|
|
<div class="text-xl temp_status flex">
|
|
<div>到达温度后</div>
|
|
<van-radio-group
|
|
v-model="trayTempType"
|
|
shape="square"
|
|
class="flex temp_radio"
|
|
>
|
|
<van-radio name="1">保持温度</van-radio>
|
|
<van-radio name="2">停止加热</van-radio>
|
|
</van-radio-group>
|
|
</div>
|
|
</section>
|
|
|
|
<footer
|
|
class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
|
|
>
|
|
<button class="btn-dark px-10 py-2 w-15" @click="onConfirm">
|
|
确定
|
|
</button>
|
|
<button class="btn-light px-10 py-2" @click="tempVisible = false">
|
|
取消
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</OverlayModal>
|
|
<!--选择工艺-->
|
|
<OverlayModal :visible="craftVisible">
|
|
<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
|
|
</OverlayModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
|
|
import OverlayModal from "@/components/OverlayModal.vue";
|
|
import CraftList from "./CraftList.vue";
|
|
import LoadingSvg from "@/assets/loading.svg";
|
|
const tubeList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
|
|
const props = defineProps({
|
|
heatInfo: Object,
|
|
tubeIndex: Number,
|
|
});
|
|
const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp"]);
|
|
|
|
onMounted(() => {});
|
|
|
|
const craftVisible = ref(false);
|
|
|
|
//设置温度
|
|
const trayTempType = ref(false);
|
|
const tempVisible = ref(false);
|
|
//托盘信息
|
|
let trayInfo = ref<any>(props.heatInfo || {});
|
|
watch(()=>props.heatInfo, (newVal)=>{
|
|
trayInfo.value = newVal
|
|
})
|
|
|
|
const heatAreaTemperature = ref(trayInfo.value.temperature || "");
|
|
//选中托盘
|
|
const isSelect = ref(false);
|
|
const currentIndex = ref();
|
|
const onSelectTray = () => {
|
|
if (currentIndex.value !== props.tubeIndex) {
|
|
trayInfo.value.isSelect = true;
|
|
} else {
|
|
trayInfo.value.isSelect = !trayInfo.value.isSelect;
|
|
}
|
|
currentIndex.value = props.tubeIndex;
|
|
emits("onSelectedTray", trayInfo.value, 'isClick');
|
|
};
|
|
|
|
const changeVisible = () => {
|
|
craftVisible.value = false;
|
|
};
|
|
|
|
//选择工艺
|
|
const onChooseCraft = () => {
|
|
craftVisible.value = true;
|
|
};
|
|
const setTemperature = () => {
|
|
tempVisible.value = true;
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
trayInfo.value.temperature = heatAreaTemperature.value;
|
|
tempVisible.value = false;
|
|
//将设置的温度传给加热区
|
|
emits("onSetHeatAreaTemp", trayInfo.value);
|
|
};
|
|
|
|
//试管操作
|
|
const onHandleTube = (tubeInfo: any) => {
|
|
//选择试管时判断试管架是否为选中状态
|
|
if (!isSelect.value) onSelectTray();
|
|
};
|
|
|
|
//选择的工艺
|
|
const onHandleSelectedCraft = (craftData:any) => {
|
|
changeVisible();
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/assets/style/mixin.scss" as *;
|
|
.heat_main {
|
|
border: 1px solid #e9f3ff;
|
|
width: 11.5rem;
|
|
height: 18.125rem;
|
|
border-radius: 10px;
|
|
background: #e9f3ff;
|
|
}
|
|
.heat_pos_text {
|
|
display: flex;
|
|
height: 1.75rem;
|
|
padding-left: 0.875rem;
|
|
padding-right: 0.75rem;
|
|
.pos_text {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #4d6882;
|
|
}
|
|
|
|
.pos_state {
|
|
margin-left: 50%;
|
|
}
|
|
}
|
|
.heat_pos {
|
|
width: 10.375rem;
|
|
height: 10.375rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-left: 5px;
|
|
gap: 0.625rem;
|
|
flex-direction: row;
|
|
border: 2px solid #7592a8;
|
|
padding-top: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
|
|
.craft_executing_modal {
|
|
position: relative;
|
|
width: 10rem;
|
|
height: 18rem;
|
|
background: rgba(2, 86, 255, 0.12);
|
|
opacity: 0.5;
|
|
z-index: 9999;
|
|
margin-top: -11rem;
|
|
.loading {
|
|
margin-left: 4.2rem;
|
|
margin-top: 4rem;
|
|
}
|
|
.tray_craft {
|
|
font-size: 1rem;
|
|
margin-top: 0.5rem;
|
|
margin-left: 3rem;
|
|
font-weight: bold;
|
|
color: #4d6882;
|
|
}
|
|
|
|
.tray_exce {
|
|
font-size: 1.2rem;
|
|
margin-left: 1.8rem;
|
|
font-weight: bold;
|
|
color: #4d6882;
|
|
}
|
|
}
|
|
}
|
|
.inner-circle {
|
|
border-radius: 50%;
|
|
width: 1.625rem;
|
|
height: 1.625rem;
|
|
background-color: rgb(212, 212, 212);
|
|
}
|
|
.heat_footer {
|
|
margin-top: 10px;
|
|
margin-left: 5px;
|
|
.heat_temperature {
|
|
height: 1.625rem;
|
|
width: 10rem;
|
|
background: #ffffff;
|
|
box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
|
|
border-radius: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.target_temp {
|
|
color: #384d5d;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.heating {
|
|
color: #fe0a0a;
|
|
font-size: 0.875rem;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.temp_text {
|
|
font-size: 1.125rem;
|
|
font-weight: bold;
|
|
color: #4d6882;
|
|
}
|
|
}
|
|
|
|
.heat_overlay {
|
|
border: 1px solid #e9f3ff;
|
|
width: 9.375rem;
|
|
height: 15.5rem;
|
|
border-radius: 20px;
|
|
margin-top: 3.125rem;
|
|
position: absolute;
|
|
background: #d3d3d3;
|
|
margin-top: -10.375rem;
|
|
opacity: 0.8;
|
|
|
|
.heat_loading {
|
|
margin: 3.875rem;
|
|
}
|
|
}
|
|
|
|
.formula_picker {
|
|
width: 25rem;
|
|
margin: 20% 30%;
|
|
}
|
|
|
|
.set_temp_modal {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.set_temp_modal_content {
|
|
width: 28.5rem;
|
|
height: 16.5rem;
|
|
background: #ffffff;
|
|
|
|
.temp_label {
|
|
margin-left: 2.875rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.set_temp_title {
|
|
height: 1.875rem;
|
|
width: 5.25rem;
|
|
margin-top: 1.875rem;
|
|
margin-left: 1.25rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
color: #40474e;
|
|
}
|
|
}
|
|
|
|
.temp_input {
|
|
border: 1px solid #dadada;
|
|
font-size: 1.25rem;
|
|
width: 10rem;
|
|
}
|
|
|
|
.temp_status {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.temp_radio {
|
|
font-size: 1.25rem;
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
:deep(.van-radio__icon) {
|
|
i {
|
|
font-size: 30px;
|
|
margin-top: -10px;
|
|
}
|
|
}
|
|
</style>
|