LiLongLong
6 months ago
4 changed files with 352 additions and 319 deletions
-
18src/views/components/Menu.vue
-
12src/views/graphite/components/AddLiquid.vue
-
611src/views/graphite/components/HeatPosition.vue
-
44src/views/graphite/index.vue
@ -1,320 +1,349 @@ |
|||
<template> |
|||
<div class="heat_main" :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : 'border:7px solid #ffffff'}`"> |
|||
<section class="heat_pos_text"> |
|||
<div class="pos_text">{{ `A-${posIndex || ''}` }}</div> |
|||
<div class="pos_text pos_state">已放置</div> |
|||
</section> |
|||
|
|||
<section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`" @click.stop="onSelectTray"> |
|||
<div |
|||
v-for="(isActive, index) in ballStates" |
|||
:key="index" |
|||
> |
|||
<div class="inner-circle" :style="`background: ${trayInfo?.id ? '#F2652D': ''}`"></div> |
|||
<div |
|||
class="heat_main" |
|||
:style="`${ |
|||
tubeIndex === currentIndex && isSelect |
|||
? 'border:4px solid rgb(66 215 76)' |
|||
: 'border:4px solid #ffffff' |
|||
}`" |
|||
> |
|||
<section class="heat_pos_text"> |
|||
<div class="pos_text">{{ `A-${tubeIndex || ""}` }}</div> |
|||
<div class="pos_text pos_state">已放置</div> |
|||
</section> |
|||
|
|||
<section |
|||
class="heat_pos" |
|||
:style="`background:${trayInfo?.id ? '#384D5D' : ''}`" |
|||
@click="onSelectTray" |
|||
> |
|||
<div |
|||
v-for="(tube, index) in tubeList" |
|||
:key="index" |
|||
class="inner-circle" |
|||
@click.stop="onHandleTube(tube)" |
|||
:style="{ background: trayInfo?.id ? '#F2652D' : '' }" |
|||
></div> |
|||
<!--执行中状态的遮罩层--> |
|||
<div class="craft_executing_modal" v-if="trayInfo.state == 1"> |
|||
<div class="loading"> |
|||
<img :src="LoadingSvg" /> |
|||
</div> |
|||
<!--执行中状态的遮罩层--> |
|||
<div class="craft_executing_modal" v-if="trayInfo.state == 1"> |
|||
<div class="loading"> |
|||
<img :src="LoadingSvg"/> |
|||
</div> |
|||
<div class="tray_craft"> |
|||
工艺名称 |
|||
<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.trayTempVale }}℃</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="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="tray_exce"> |
|||
工艺执行中 |
|||
<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> |
|||
</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 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="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> |
|||
</OverlayModal> |
|||
<!--选择工艺--> |
|||
<OverlayModal :visible="craftVisible"> |
|||
<CraftList @changeVisible="changeVisible"></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 ballStates = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]) |
|||
const props = defineProps({ |
|||
heatInfo:Object, |
|||
posIndex:Number |
|||
}) |
|||
const emits = defineEmits(['onSelectedTray']) |
|||
|
|||
onMounted(()=>{ |
|||
}) |
|||
|
|||
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 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 changeVisible = () => { |
|||
craftVisible.value = false; |
|||
} |
|||
//选择工艺 |
|||
const onChooseCraft = () => { |
|||
craftVisible.value = true; |
|||
} |
|||
const setTemperature = () => { |
|||
tempVisivle.value = true; |
|||
} |
|||
</section> |
|||
|
|||
const onConfirm = () => { |
|||
trayInfo.value.id = 3; |
|||
trayInfo.value.trayTempVale = trayTempVale; |
|||
tempVisivle.value = false; |
|||
} |
|||
|
|||
</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; |
|||
<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> |
|||
</OverlayModal> |
|||
<!--选择工艺--> |
|||
<OverlayModal :visible="craftVisible"> |
|||
<CraftList @changeVisible="changeVisible"></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"]); |
|||
|
|||
onMounted(() => {}); |
|||
|
|||
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 isSelect = ref(false); |
|||
const currentIndex = ref(); |
|||
const selectedTrayList = ref<any>([]); |
|||
const onSelectTray = () => { |
|||
if (currentIndex.value !== props.tubeIndex) { |
|||
isSelect.value = true; |
|||
} else { |
|||
isSelect.value = !isSelect.value; |
|||
} |
|||
.heat_pos_text{ |
|||
currentIndex.value = props.tubeIndex; |
|||
|
|||
emits("onSelectedTray", props.heatInfo); |
|||
}; |
|||
|
|||
const changeVisible = () => { |
|||
craftVisible.value = false; |
|||
}; |
|||
//选择工艺 |
|||
const onChooseCraft = () => { |
|||
craftVisible.value = true; |
|||
}; |
|||
const setTemperature = () => { |
|||
tempVisivle.value = true; |
|||
}; |
|||
|
|||
const onConfirm = () => { |
|||
trayInfo.value.id = 3; |
|||
trayInfo.value.trayTempVale = trayTempVale; |
|||
tempVisivle.value = false; |
|||
}; |
|||
|
|||
//试管操作 |
|||
const onHandleTube = (tubeInfo: any) => { |
|||
//选择试管时判断试管架是否为选中状态 |
|||
if (!isSelect.value) onSelectTray(); |
|||
|
|||
console.log("tubeInfo---", tubeInfo, '加热区位置', props.tubeIndex); |
|||
}; |
|||
</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; |
|||
height: 1.75rem; |
|||
padding-left: .875rem; |
|||
padding-right: .75rem; |
|||
.pos_text{ |
|||
font-size: .8125rem; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #4D6882; |
|||
} |
|||
|
|||
.pos_state{ |
|||
margin-left:50% |
|||
} |
|||
align-items: center; |
|||
color: #4d6882; |
|||
} |
|||
.heat_pos{ |
|||
width: 10.375rem; |
|||
height: 10.375rem; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
margin-left: 2px; |
|||
gap: .625rem; |
|||
flex-direction: row; |
|||
border: 2px solid #7592A8; |
|||
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: 1.625rem; |
|||
height: 1.625rem; |
|||
background-color: rgb(212, 212, 212); |
|||
.pos_state { |
|||
margin-left: 50%; |
|||
} |
|||
.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: .75rem; |
|||
} |
|||
|
|||
.heating{ |
|||
color: #FE0A0A; |
|||
font-size: .875rem; |
|||
margin-left: 1rem; |
|||
} |
|||
} |
|||
.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: 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; |
|||
} |
|||
|
|||
.temp_text{ |
|||
font-size: 1.125rem; |
|||
.tray_craft { |
|||
font-size: 1rem; |
|||
margin-top: 0.5rem; |
|||
margin-left: 3rem; |
|||
font-weight: bold; |
|||
color: #4D6882; |
|||
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; |
|||
.tray_exce { |
|||
font-size: 1.2rem; |
|||
margin-left: 1.8rem; |
|||
font-weight: bold; |
|||
color: #4d6882; |
|||
} |
|||
} |
|||
|
|||
.formula_picker{ |
|||
width: 25rem; |
|||
margin: 20% 30%; |
|||
} |
|||
|
|||
.set_temp_modal{ |
|||
} |
|||
.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; |
|||
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; |
|||
justify-content: center; |
|||
.target_temp { |
|||
color: #384d5d; |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
.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; |
|||
.heating { |
|||
color: #fe0a0a; |
|||
font-size: 0.875rem; |
|||
margin-left: 1rem; |
|||
} |
|||
} |
|||
|
|||
.temp_input{ |
|||
border: 1px solid #dadada; |
|||
font-size: 1.25rem; |
|||
width: 10rem; |
|||
.temp_text { |
|||
font-size: 1.125rem; |
|||
font-weight: bold; |
|||
color: #4d6882; |
|||
} |
|||
|
|||
.temp_status{ |
|||
margin-top: 1.5rem; |
|||
display: flex; |
|||
gap: 20px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.temp_radio{ |
|||
.set_temp_title { |
|||
height: 1.875rem; |
|||
width: 5.25rem; |
|||
margin-top: 1.875rem; |
|||
margin-left: 1.25rem; |
|||
font-size: 1.25rem; |
|||
display: flex; |
|||
gap: 20px; |
|||
font-weight: 500; |
|||
color: #40474e; |
|||
} |
|||
|
|||
:deep(.van-radio__icon){ |
|||
i{ |
|||
font-size: 30px; |
|||
margin-top: -10px; |
|||
} |
|||
} |
|||
|
|||
.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> |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue