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.
120 lines
3.6 KiB
120 lines
3.6 KiB
<script lang="ts" setup>
|
|
import { useLiquidStore } from '@/stores/useLiquidsStore'
|
|
import { ref, watch } from 'vue'
|
|
import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'
|
|
|
|
const props = defineProps<{
|
|
order: number
|
|
step: CraftTypes.StepStruct
|
|
type: string
|
|
}>()
|
|
|
|
const $emit = defineEmits<{
|
|
(e: 'del', order: number): void
|
|
(e: 'transferChange', stepData: CraftTypes.StepStruct, order: number): void
|
|
}>()
|
|
|
|
const liquidStore = useLiquidStore()
|
|
const stepInfo = ref(props.step)
|
|
|
|
watch(stepInfo, (newVal) => {
|
|
$emit('transferChange', newVal, props.order)
|
|
}, {
|
|
deep: true,
|
|
})
|
|
|
|
// const onDel = () => {
|
|
// emit('del', props.order)
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<div class="right-contaner">
|
|
<section class="right-main">
|
|
<span class="right-seq">{{ order }}</span>
|
|
<span class="right-base">{{ StepCmdDescMap[stepInfo.method] }}</span>
|
|
<div v-if="type !== 'showlog'" class="text-item" @click="$emit('del', order)">
|
|
<img class="item-img" src="@/assets/images/icon_del_s.svg" alt="del">
|
|
</div>
|
|
</section>
|
|
<template v-if="stepInfo.method !== 'takePhoto'">
|
|
<section v-if="stepInfo.method === 'addLiquid'" class="right-liquid right-base">
|
|
<div v-for="(tubeItem, index) in stepInfo.params.tubeSolList" :key="index" class="right-liquid">
|
|
<el-select v-model="tubeItem.tubeNum" size="small" placeholder="请选择" style="width: 120px" class="right-base" :disabled="type === 'showlog'">
|
|
<el-option v-for="item in tubeSolList" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
<div v-for="(liquidItem, liquidIndex) in tubeItem.addLiquidList" :key="liquidIndex" class="right-liquid right-base">
|
|
<el-select v-model="liquidItem.solId" size="small" placeholder="请选择" style="width: 100px" class="right-base" :disabled="type === 'showlog'">
|
|
<el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
<div>
|
|
<el-input v-model.number="liquidItem.volume" size="small" style="width: 100px" :disabled="type === 'showlog'" />
|
|
<span class="ml-2">ml</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="stepInfo.method === 'shaking' || stepInfo.method === 'delay'" class="right-shaking">
|
|
<div class="flex items-center right-base">
|
|
<el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" />
|
|
<span class="ml-2">秒</span>
|
|
</div>
|
|
</section>
|
|
<section v-if="stepInfo.method === 'startHeating'" class="right-shaking">
|
|
<div class="flex items-center right-base">
|
|
加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" />
|
|
<span class="ml-2">°C</span>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
</div>
|
|
<div style="height:5px;background: white;" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.right-contaner{
|
|
background-color: rgb(82 148 215 / .06);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.right-main{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right-base{
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
margin-left: 1.25rem;
|
|
}
|
|
.text-item{
|
|
margin-left: auto;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.item-img{
|
|
width:1rem
|
|
}
|
|
}
|
|
.right-liquid{
|
|
display: flex;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.right-shaking{
|
|
display: flex;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.right-seq{
|
|
padding-left: 20px;
|
|
color: #19b370;
|
|
}
|
|
.el-select-dropdown__item{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|