6 changed files with 199 additions and 39 deletions
-
2src/apis/crafts.ts
-
4src/app.vue
-
190src/components/home/ExecuteCraft/index.vue
-
4src/components/home/Tube/index.vue
-
2src/types/home.d.ts
-
36src/views/home/index.vue
@ -0,0 +1,190 @@ |
|||
<script setup lang="ts"> |
|||
import { startCraft } from 'apis/crafts' |
|||
import { getOreList } from 'apis/ore' |
|||
import { FtMessage } from 'libs/message' |
|||
import { useHomeStore } from 'stores/homeStore' |
|||
import { useSystemStore } from 'stores/systemStore' |
|||
import { computed, onMounted, ref } from 'vue' |
|||
|
|||
const emits = defineEmits(['ok', 'cancel']) |
|||
|
|||
const homeStore = useHomeStore() |
|||
|
|||
const systemStore = useSystemStore() |
|||
|
|||
onMounted(() => { |
|||
getOres() |
|||
}) |
|||
|
|||
const form = ref<{ |
|||
columns?: number[] |
|||
craftId?: number |
|||
heatId?: number |
|||
}>({}) |
|||
const formRef = ref() |
|||
|
|||
const validateHandle = (rule: any, value: any, callback: any) => { |
|||
if (!value?.length) { |
|||
callback(new Error('请选择试管')) |
|||
} |
|||
else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
const rules = { |
|||
columns: [ |
|||
{ required: true, message: '请选择试管', trigger: 'change', validator: validateHandle }, |
|||
], |
|||
craftId: [ |
|||
{ required: true, message: '请选择预设', trigger: 'change' }, |
|||
], |
|||
} |
|||
|
|||
const okHandle = async () => { |
|||
try { |
|||
const valid = await formRef.value.validate() |
|||
if (!valid) { |
|||
return |
|||
} |
|||
await startCraft({ |
|||
heatId: useHomeStore().heatAreaList.find(item => item.selected)?.value, |
|||
...form.value, |
|||
}) |
|||
FtMessage.success('工艺已开始') |
|||
emits('ok') |
|||
} |
|||
catch (error) { |
|||
console.log(error) |
|||
} |
|||
} |
|||
|
|||
const cancel = () => { |
|||
emits('cancel') |
|||
} |
|||
|
|||
// |
|||
const tubes = computed(() => { |
|||
return systemStore.systemStatus.trays?.find(item => item.heatModuleCode === homeStore.heatAreaList.find(item => item.selected)?.value)?.tubes |
|||
}) |
|||
|
|||
const selectedColumns = ref(Array.from({ length: 5 }).fill(false)) |
|||
|
|||
const mousedownHandle = async (index: number) => { |
|||
if (!tubes.value?.find(item => item.columnNum === index)?.exists) { |
|||
FtMessage.error('该列没有试管') |
|||
return |
|||
} |
|||
selectedColumns.value[index - 1] = !selectedColumns.value[index - 1] |
|||
form.value.columns = selectedColumns.value.map((item, index) => { |
|||
return item ? index + 1 : false |
|||
}).filter(item => item !== false) |
|||
formRef.value.validateField('columns') |
|||
} |
|||
|
|||
const oreList = ref<Ore.OreItem[]>([]) |
|||
|
|||
const getOres = async () => { |
|||
const res = await getOreList() |
|||
oreList.value = res.list |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<FtDialog visible title="执行预设" width="40%" :ok-handle="okHandle" @cancel="cancel"> |
|||
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> |
|||
<el-form-item v-if=" homeStore.heatAreaList.filter(item => item.selected).length" label="加热区"> |
|||
<el-tag v-for="item in homeStore.heatAreaList.filter(item => item.selected)" :key="item.value" class="mask-tag"> |
|||
{{ item.label }} |
|||
</el-tag> |
|||
</el-form-item> |
|||
<el-form-item label="选择试管" prop="columns"> |
|||
<div class="tube-item"> |
|||
<div |
|||
v-for="item in 5" |
|||
:key="item" |
|||
class="tube-line" |
|||
:class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': homeStore.heatAreaList.filter(item => item.selected).length && !tubes?.find(tu => tu.columnNum === item)?.exists }" |
|||
|
|||
@click.prevent="() => mousedownHandle(item)" |
|||
@touch.prevent="() => mousedownHandle(item)" |
|||
> |
|||
<span v-for="i in 8" :key="i" class="tube-line-inner" /> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="工艺" prop="craftId"> |
|||
<el-select v-model="form.craftId" placeholder="请选择工艺"> |
|||
<el-option-group |
|||
v-for="group in oreList" |
|||
:key="group.id" |
|||
:label="group.oresName" |
|||
> |
|||
<el-option |
|||
v-for="item in group.craftsList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-option-group> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</FtDialog> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.el-tag { |
|||
margin-right: 5px; |
|||
} |
|||
.el-row { |
|||
height: 450px; |
|||
.el-col { |
|||
height: 100%; |
|||
overflow: auto; |
|||
:deep(.el-tag) { |
|||
width: 100%; |
|||
margin-bottom: 5px; |
|||
.el-tag__content { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tube-item { |
|||
padding: 5px; |
|||
background: #384D5D; |
|||
border-radius: 10px; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(1, 1fr); |
|||
grid-gap: 5px; |
|||
position: relative; |
|||
.tube-line { |
|||
display: flex; |
|||
flex-direction: column; |
|||
.tube-line-inner { |
|||
display: inline-block; |
|||
width: 25px; |
|||
height: 25px; |
|||
border-radius: 50%; |
|||
background: #fff; |
|||
margin: 2px; |
|||
transition: background 0.5s; |
|||
} |
|||
} |
|||
.tube-line-disable { |
|||
.tube-line-inner { |
|||
background: #C6C6C6; |
|||
} |
|||
} |
|||
.tube-line-active { |
|||
.tube-line-inner { |
|||
background: #26D574; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue