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.
417 lines
9.9 KiB
417 lines
9.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">{{trayInfo.heatAearStatus?.trayStatus == 1 ? '已放置' : '空闲'}}</div>
|
|
</section>
|
|
|
|
<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
|
|
<div
|
|
v-for="(tube, index) in trayInfo.tubeList || tubeList"
|
|
:key="index"
|
|
class="inner-circle"
|
|
@click.stop="onHandleTube(tube, index)"
|
|
:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
|
|
<!--执行中状态的遮罩层-->
|
|
<div
|
|
class="craft_executing_modal"
|
|
v-if="trayInfo.craftInfo?.id"
|
|
:style="{ background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF' }">
|
|
<!--trayInfo.executing_craft 已选择工艺未执行-->
|
|
<div class="loading">
|
|
<img v-if="trayInfo.executing_craft" :src="ExecutingSvg" />
|
|
<img v-else :src="ReadySvg" />
|
|
</div>
|
|
<div class="tray_craft" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
|
|
{{ trayInfo.craftInfo.name }}
|
|
</div>
|
|
<div class="tray_exce" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
|
|
{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
|
|
</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" :style="{ color: temperature_color }">
|
|
{{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
|
|
</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">{{ trayInfo.heatAearStatus?.temperature }}</div>
|
|
<button
|
|
:class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
|
|
@click.stop="onSelectTray">
|
|
选择
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<van-overlay v-if="tempVisible" :show="true">
|
|
<div class="flex justify-center items-center h-full">
|
|
<SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" />
|
|
</div>
|
|
</van-overlay>
|
|
<!-- <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 { ref, watch, onMounted, getCurrentInstance } from "vue";
|
|
import OverlayModal from "@/components/OverlayModal.vue";
|
|
import CraftList from "./CraftList.vue";
|
|
import ReadySvg from "@/assets/ready.svg";
|
|
import ExecutingSvg from "@/assets/executing.svg";
|
|
import SetTemperature from "./SetTemperature.vue";
|
|
|
|
const tubeList = ref<any>([]);
|
|
const props = defineProps({
|
|
heatInfo: Object,
|
|
tubeIndex: Number,
|
|
});
|
|
const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", "onSelectCraft"]);
|
|
|
|
const selectedBackgroundColor = "#189952";
|
|
const readyColor = "#EE8223";
|
|
const executingColor = "#14A656";
|
|
onMounted(() => {
|
|
for(let i = 0 ; i<16; i++){
|
|
tubeList.value.push({
|
|
backgroudColor:'',
|
|
id:i+1
|
|
})
|
|
}
|
|
reset(props.heatInfo)
|
|
});
|
|
|
|
const craftVisible = ref(false);
|
|
|
|
//设置温度
|
|
const trayTempType = ref(false);
|
|
const tempVisible = ref(false);
|
|
//加热区信息
|
|
let trayInfo = ref<any>(props.heatInfo || {});
|
|
|
|
let temperature_color = ref('#1677FF')
|
|
watch(()=>props.heatInfo, (newVal:any) =>{
|
|
if(newVal.heatAearStatus.isHeating){
|
|
temperature_color.value = '#FE0A0A'
|
|
}else{
|
|
temperature_color.value = '#1677FF'
|
|
}
|
|
reset(newVal)
|
|
})
|
|
const reset = (heatInfo:any) => {
|
|
let heatAreaData = {...heatInfo}
|
|
if(heatAreaData.heatAearStatus?.trayStatus){
|
|
if(heatAreaData.tubeList && heatAreaData.tubeList.length){
|
|
heatAreaData.tubeList.forEach((item:any) => {
|
|
item.backgroudColor = selectedBackgroundColor
|
|
item.isSelected = true;
|
|
})
|
|
}else{
|
|
tubeList.value.forEach((item:any) => {
|
|
item.backgroudColor = selectedBackgroundColor
|
|
item.isSelected = true;
|
|
})
|
|
heatAreaData.tubeList = tubeList.value
|
|
}
|
|
}else{
|
|
tubeList.value.forEach((item:any) => {
|
|
item.backgroudColor = ''
|
|
item.isSelected = true;
|
|
})
|
|
}
|
|
trayInfo.value = heatAreaData
|
|
}
|
|
|
|
const heatAreaTemperature = ref(trayInfo.value.temperature || "");
|
|
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 setTemperature = () => {
|
|
heatAreaTemperature.value = +trayInfo.value.temperature;
|
|
tempVisible.value = true;
|
|
};
|
|
|
|
const onConfirm = (temperature: number) => {
|
|
trayInfo.value.temperature = temperature;
|
|
tempVisible.value = false;
|
|
//将设置的温度传给加热区
|
|
emits("onSetHeatAreaTemp", trayInfo.value);
|
|
};
|
|
|
|
//试管操作
|
|
const onHandleTube = (tubeInfo: any, index: number) => {
|
|
if (!trayInfo.value.heatAearStatus.trayStatus) return;
|
|
//设置UI选中颜色
|
|
if (trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected) {
|
|
tubeInfo.backgroudColor = "";
|
|
} else {
|
|
tubeInfo.backgroudColor = selectedBackgroundColor;
|
|
}
|
|
tubeInfo.isSelected = !tubeInfo.isSelected;
|
|
};
|
|
|
|
//选择的工艺
|
|
const onHandleSelectedCraft = (craftData: any) => {
|
|
emits("onSelectCraft", craftData);
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.text_choose {
|
|
position: relative;
|
|
// z-index: 111;
|
|
}
|
|
.text_color {
|
|
background: #6893ff;
|
|
color: #ffffff;
|
|
}
|
|
.craft_executing_modal {
|
|
position: relative;
|
|
width: 11.2rem;
|
|
height: 17.8rem;
|
|
padding-top: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
opacity: 0.8;
|
|
z-index: 99;
|
|
margin-top: -11.5rem;
|
|
.loading {
|
|
margin-top: 4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.tray_craft {
|
|
font-size: 0.75rem;
|
|
margin-top: 0.5rem;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #ee8223;
|
|
}
|
|
|
|
.tray_exce {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
color: #ee8223;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|