|
|
|
@ -1,81 +1,144 @@ |
|
|
|
<template> |
|
|
|
<div class="heat_main"> |
|
|
|
<div class="heat_pos_text"> |
|
|
|
<div class="pos_text">{{ `A-${heatInfo}` }}</div> |
|
|
|
<div class="heat_main" @click="onSelectTray" :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : ''}`"> |
|
|
|
<section class="heat_pos_text"> |
|
|
|
<div class="pos_text">{{ `A-${posIndex || ''}` }}</div> |
|
|
|
<div class="pos_text pos_state">已放置</div> |
|
|
|
</div> |
|
|
|
<div class="heat_pos"> |
|
|
|
</section> |
|
|
|
|
|
|
|
<section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`"> |
|
|
|
<div |
|
|
|
v-for="(isActive, index) in ballStates" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div class="inner-circle" :style="`background: ${heatInfo == 2 ? '#F2652D': ''}`"></div> |
|
|
|
<div class="inner-circle" :style="`background: ${trayInfo?.id ? '#F2652D': ''}`"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- <div class="heat_overlay"> |
|
|
|
<div class="heat_loading"> |
|
|
|
<img :src="LoadingSvg"/> |
|
|
|
<!--执行中状态的遮罩层--> |
|
|
|
<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> |
|
|
|
</div> --> |
|
|
|
<div class="heat_footer"> |
|
|
|
<div class="heat_temperature"> |
|
|
|
<div class="target_temp">目标温度: 120℃</div> |
|
|
|
<div class="heating">加热中</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
<section class="heat_footer"> |
|
|
|
<div class="heat_temperature" @click="setTemperature"> |
|
|
|
<template v-if="trayInfo?.id"> |
|
|
|
<div class="target_temp">目标温度: {{ trayInfo.trayTempVale }}℃</div> |
|
|
|
<div class="heating">加热中</div> |
|
|
|
</template> |
|
|
|
<template v-else > |
|
|
|
<div class="target_temp set_temp">设置目标温度</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<div class="temp_text">120℃</div> |
|
|
|
<div class="heat_choose"> |
|
|
|
<van-button type="primary" class="btn" @click="()=>{onChooseFormula()}">选 择</van-button> |
|
|
|
<van-button type="primary" class="btn" @click="()=>{onChooseCraft()}">选 择</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-overlay :show="formulaVisible" @click="formulaVisible = false" style="z-index: 999;"> |
|
|
|
<div class="formula_picker"> |
|
|
|
<van-picker |
|
|
|
title="选择配方" |
|
|
|
:columns="formulaList" |
|
|
|
@confirm="onConfirmFormula" |
|
|
|
@cancel="onCancelFormula" |
|
|
|
/> |
|
|
|
</section> |
|
|
|
|
|
|
|
<OverlayModal :visible="tempVisivle"> |
|
|
|
<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="trayTempVale" 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="tempVisivle = false">取消</button> |
|
|
|
</footer> |
|
|
|
</div> |
|
|
|
</van-overlay> |
|
|
|
</OverlayModal> |
|
|
|
<!--选择工艺--> |
|
|
|
<OverlayModal :visible="craftVisible"> |
|
|
|
<CraftList @changeVisible="changeVisible"></CraftList> |
|
|
|
</OverlayModal> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue' |
|
|
|
import LoadingSvg from '@/assets/loading.svg' |
|
|
|
import OverlayModal from '@/components/OverlayModal.vue'; |
|
|
|
import CraftList from './CraftList.vue'; |
|
|
|
import LoadingSvg from '@/assets/loading.svg'; |
|
|
|
const ballStates = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]) |
|
|
|
const props = defineProps({ |
|
|
|
heatInfo:Number, |
|
|
|
heatInfo:Object, |
|
|
|
posIndex:Number |
|
|
|
}) |
|
|
|
const emits = defineEmits(['onSelectedTray']) |
|
|
|
|
|
|
|
onMounted(()=>{ |
|
|
|
}) |
|
|
|
|
|
|
|
//选择配方 |
|
|
|
const formulaVisible = ref(false) |
|
|
|
const craftVisible = ref(false) |
|
|
|
|
|
|
|
//设置温度 |
|
|
|
const trayTempType = ref(false) |
|
|
|
const tempVisivle = ref(false) |
|
|
|
//托盘信息 |
|
|
|
const trayInfo = ref(props.heatInfo || {}) |
|
|
|
const trayTempVale = ref(trayInfo.value.trayTempVale || '') |
|
|
|
const formulaList:any = ref([]) |
|
|
|
const onChooseFormula = () => { |
|
|
|
formulaVisible.value = true; |
|
|
|
formulaList.value = [{ text: '硫酸', value: '1' }] |
|
|
|
formulaList.value.push({ text: '硫酸', value: '1' }) |
|
|
|
|
|
|
|
//选中托盘 |
|
|
|
const isSelect = ref(false) |
|
|
|
const currentIndex = ref() |
|
|
|
const selectedTrayList = ref<any>([]) |
|
|
|
const onSelectTray = () => { |
|
|
|
if(currentIndex.value !== props.posIndex ){ |
|
|
|
isSelect.value = true; |
|
|
|
}else{ |
|
|
|
isSelect.value = !isSelect.value |
|
|
|
} |
|
|
|
currentIndex.value = props.posIndex; |
|
|
|
|
|
|
|
emits("onSelectedTray", props.heatInfo) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const onConfirmFormula = (value:any) => { |
|
|
|
console.log('value---', value) |
|
|
|
formulaVisible.value = false; |
|
|
|
|
|
|
|
const changeVisible = () => { |
|
|
|
craftVisible.value = false; |
|
|
|
} |
|
|
|
//选择工艺 |
|
|
|
const onChooseCraft = () => { |
|
|
|
craftVisible.value = true; |
|
|
|
} |
|
|
|
const setTemperature = () => { |
|
|
|
tempVisivle.value = true; |
|
|
|
} |
|
|
|
|
|
|
|
const onCancelFormula = () => { |
|
|
|
formulaVisible.value = false; |
|
|
|
const onConfirm = () => { |
|
|
|
trayInfo.value.id = 3; |
|
|
|
trayInfo.value.trayTempVale = trayTempVale; |
|
|
|
tempVisivle.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@use "@/assets/style/mixin.scss" as *; |
|
|
|
.heat_main{ |
|
|
|
border: 1px solid #E9F3FF; |
|
|
|
width: 366px; |
|
|
|
@ -105,26 +168,55 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.heat_pos{ |
|
|
|
width: 330px; |
|
|
|
height: 330px; |
|
|
|
width: 10.375rem; |
|
|
|
height: 10.375rem; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin-left: 5px; |
|
|
|
gap: 22px; |
|
|
|
gap: .625rem; |
|
|
|
flex-direction: row; |
|
|
|
background: #384D5D; |
|
|
|
border: 2px solid #7592A8; |
|
|
|
margin-left: 15px; |
|
|
|
padding-top: 15px; |
|
|
|
border-radius: 16px; |
|
|
|
margin-left: .5rem; |
|
|
|
padding-top: .5rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
|
|
|
|
.craft_executing_modal{ |
|
|
|
position: absolute; |
|
|
|
width: 10rem; |
|
|
|
height: 18rem; |
|
|
|
background: rgba(2, 86, 255, 0.12); |
|
|
|
opacity: 0.5; |
|
|
|
z-index: 9999; |
|
|
|
margin-top: -2rem; |
|
|
|
.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: 50px; |
|
|
|
height: 50px; |
|
|
|
background-color: rgb(209, 33, 33); |
|
|
|
background-color: rgb(212, 212, 212); |
|
|
|
} |
|
|
|
.heat_footer{ |
|
|
|
height: 180px; |
|
|
|
@ -139,6 +231,7 @@ |
|
|
|
border-radius: 5px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin-left: 10px; |
|
|
|
.target_temp{ |
|
|
|
color: #384D5D; |
|
|
|
@ -204,6 +297,58 @@ |
|
|
|
width: 800px; |
|
|
|
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> |
|
|
|
|
LiLongLong
6 months ago