石墨仪设备 前端仓库
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

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