4 changed files with 407 additions and 5 deletions
-
391src/components/log/sprayParams/index.vue
-
8src/components/martixCraft/Edit/index.vue
-
6src/components/spray/sprayParams/index.vue
-
7src/views/log/index.vue
@ -0,0 +1,391 @@ |
|||
<script setup lang="ts"> |
|||
import { list as listMatrix } from 'apis/matrix' |
|||
import { getCraftById, list } from 'apis/matrixCraft' |
|||
import route from 'assets/images/route.png' |
|||
import route_active from 'assets/images/route_active.png' |
|||
import route_horizontal_active from 'assets/images/route_horizontal2.png' |
|||
import route_horizontal from 'assets/images/route_horizontal.png' |
|||
import route_vertical_active from 'assets/images/route_vertical2.png' |
|||
import route_vertical from 'assets/images/route_vertical.png' |
|||
import FtDialog from 'components/common/FTDialog/index.vue' |
|||
import TrayGraph from 'components/spray/trayGraph/index.vue' |
|||
import { FtMessage } from 'libs/message' |
|||
import { cloneDeep } from 'lodash' |
|||
import { Navigation, Pagination } from 'swiper/modules' |
|||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
import { nextTick, onMounted, ref } from 'vue' |
|||
import 'swiper/css' |
|||
import 'swiper/css/pagination' |
|||
import 'swiper/css/navigation' |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}) |
|||
const emits = defineEmits(['ok', 'cancel']) |
|||
const matrixList = ref<{ id: number, name: string }[]>([]) |
|||
const matrixCraftList = ref<{ id: number, name: string }[]>([]) |
|||
|
|||
const getMatrixList = async () => { |
|||
const res = await listMatrix({ pageNum: 1, pageSize: 1000, matrixName: '' }) |
|||
matrixList.value = res.list |
|||
} |
|||
|
|||
const getMatrixCraftList = async () => { |
|||
const res = await list({ pageNum: 1, pageSize: 10000 }) |
|||
matrixCraftList.value = res.list |
|||
} |
|||
|
|||
const loading = ref(false) |
|||
const slideIndex = ref(props.formData[0]?.index || 0) |
|||
onMounted(async () => { |
|||
loading.value = true |
|||
form.value = cloneDeep(props.formData[0]) |
|||
console.log(form.value) |
|||
await nextTick(() => { |
|||
form.value.times?.forEach((item: any, index: number) => { |
|||
sprayRefs.value[index].updateSelection(item.x1 * 5, item.y1 * 5, (item.x2 - item.x1) * 5, (item.y2 - item.y1) * 5) |
|||
}) |
|||
}) |
|||
await getMatrixList() |
|||
await getMatrixCraftList() |
|||
setTimeout(() => loading.value = false, 500) |
|||
}) |
|||
|
|||
const form = ref<any>({}) |
|||
|
|||
const formRef = ref() |
|||
|
|||
const okLoading = ref(false) |
|||
const okHandle = () => { |
|||
formRef.value.validate(async (valid: any, err: any) => { |
|||
if (!valid) { |
|||
const keys = Object.keys(err).filter((item: string) => item.split('.').length === 3).map((item: string) => Number(item.split('.')[1])).sort((a, b) => a - b) |
|||
if (keys.length) { |
|||
activeTab.value = keys[0] |
|||
swiperInstance?.slideTo(activeTab.value) |
|||
} |
|||
return |
|||
} |
|||
try { |
|||
okLoading.value = true |
|||
form.value.times = form.value.times.map((item: any, index: number) => { |
|||
return { |
|||
...item, |
|||
...sprayRefs.value[index].getSelection(), |
|||
} |
|||
}) |
|||
FtMessage.success('设置成功') |
|||
emits('ok', form.value) |
|||
} |
|||
catch (e) { |
|||
console.log(e) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const cancel = () => { |
|||
emits('cancel') |
|||
} |
|||
|
|||
const sprayRefs = ref<any>([]) |
|||
|
|||
const activeTab = ref(0) |
|||
|
|||
const matrixCraftChange = async (id: number) => { |
|||
loading.value = true |
|||
form.value = await getCraftById(id) |
|||
console.log(form.value) |
|||
await nextTick(() => { |
|||
form.value.times?.forEach((item: any, index: number) => { |
|||
sprayRefs.value[index].updateSelection(item.x1 * 5, item.y1 * 5, (item.x2 - item.x1) * 5, (item.y2 - item.y1) * 5) |
|||
}) |
|||
loading.value = false |
|||
}) |
|||
} |
|||
|
|||
const onSlideChange = (swiper: any) => { |
|||
activeTab.value = swiper.activeIndex |
|||
} |
|||
|
|||
let swiperInstance: any = null |
|||
const onSwiperInitialized = (swiper: any) => { |
|||
swiperInstance = swiper |
|||
} |
|||
|
|||
const tabChangeHandle = () => { |
|||
swiperInstance?.slideTo(activeTab.value) |
|||
} |
|||
|
|||
const slideChangeHandle = async () => { |
|||
form.value = cloneDeep(props.formData.find(item => item.index === slideIndex.value)) |
|||
await nextTick(() => { |
|||
form.value.times?.forEach((item: any, index: number) => { |
|||
sprayRefs.value[index].updateSelection(item.x1 * 5, item.y1 * 5, (item.x2 - item.x1) * 5, (item.y2 - item.y1) * 5) |
|||
}) |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<FtDialog |
|||
visible |
|||
:loading="loading" |
|||
:ok-loading="okLoading" |
|||
title="喷涂参数" |
|||
width="80%" |
|||
:ok-handle="okHandle" |
|||
@cancel="cancel" |
|||
> |
|||
<el-form ref="formRef" label-width="120" :model="form"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-select v-model="slideIndex" :disabled="false" @change="slideChangeHandle"> |
|||
<el-option v-for="item in formData" :key="item.index" :label="`玻片${item.index + 1}`" :value="item.index" /> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="选择工艺" prop="name"> |
|||
<el-select v-model="form.id" disabled placeholder="选择工艺" @change="matrixCraftChange"> |
|||
<el-option v-for="craft in matrixCraftList" :key="craft.id" :label="craft.name" :value="craft.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="基质" prop="matrixId" :rules="[{ required: true, message: '请选择基质', trigger: 'change' }]"> |
|||
<el-select v-model="form.matrixId" disabled placeholder=""> |
|||
<el-option v-for="matrix in matrixList" :key="matrix.id" :label="matrix.name" :value="matrix.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-tabs v-model="activeTab" type="card" @tab-change="tabChangeHandle"> |
|||
<el-tab-pane v-for="(item, index) in form.times" :key="index" :label="`第${index + 1}次`" :name="index" /> |
|||
</el-tabs> |
|||
<Swiper |
|||
:modules="[Pagination, Navigation]" |
|||
:pagination="{ clickable: true }" |
|||
:navigation="true" |
|||
@swiper="onSwiperInitialized" |
|||
@slide-change="onSlideChange" |
|||
> |
|||
<SwiperSlide v-for="(item, index) in form.times" :key="index"> |
|||
<div class="tab-content"> |
|||
<TrayGraph ref="sprayRefs" :key="index" :edit-select="false" :container="`spray-params-${index + 1}`" select /> |
|||
<div class="content-form"> |
|||
<el-form-item label="喷涂路线"> |
|||
<div class="route-img"> |
|||
<img |
|||
style="margin-left: 20px" |
|||
:src="item.matrixPathType === 'horizontal' ? route_horizontal_active : route_horizontal" |
|||
alt="" |
|||
@click="item.matrixPathType = 'horizontal'" |
|||
> |
|||
<img |
|||
style="margin: 0 20px" |
|||
:src="item.matrixPathType === 'vertical' ? route_vertical_active : route_vertical" |
|||
alt="" |
|||
@click="item.matrixPathType = 'vertical'" |
|||
> |
|||
<img |
|||
:src="item.matrixPathType === 'grid' ? route_active : route" |
|||
alt="" |
|||
@click="item.matrixPathType = 'grid'" |
|||
> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="Z轴高度" |
|||
:prop="`times.${index}.motorZHeight`" |
|||
:rules="[ |
|||
{ |
|||
required: true, |
|||
trigger: 'blur', |
|||
validator: (rule: any, value: any, callback: any) => { |
|||
if (!value) { |
|||
callback(new Error('请输入z轴高度')); |
|||
} |
|||
else |
|||
if (value < 15) { |
|||
callback(new Error('最小安全高度为15mm')); |
|||
} |
|||
else { |
|||
callback(); |
|||
} |
|||
}, |
|||
}, |
|||
]" |
|||
> |
|||
<el-input v-model="item.motorZHeight" disabled type="number" /> |
|||
<span class="unit-text">mm</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="氮气气压" |
|||
:prop="`times.${index}.gasPressure`" |
|||
:rules="[{ required: true, message: '请输入氮气气压', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.gasPressure" disabled type="number" /> |
|||
<span class="unit-text">Mpa</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="基质流速" |
|||
:prop="`times.${index}.volume`" |
|||
:rules="[{ required: true, message: '请输入基质流速', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.volume" disabled type="number" /> |
|||
<span class="unit-text">uL/min</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="是否加电" |
|||
:prop="`times.${index}.highVoltageValue`" |
|||
:rules="[ |
|||
{ |
|||
required: true, |
|||
trigger: 'blur', |
|||
validator: (rule: any, value: any, callback: any) => { |
|||
if (item.highVoltage && !value) { |
|||
callback(new Error('请输入电压')); |
|||
} |
|||
else if (value > 6000) { |
|||
callback(new Error('最大电压为6000V')); |
|||
} |
|||
else { |
|||
callback(); |
|||
} |
|||
}, |
|||
}, |
|||
]" |
|||
> |
|||
<div class="voltage-box"> |
|||
<el-switch v-model="item.highVoltage" disabled /> |
|||
<el-input |
|||
v-show="item.highVoltage" |
|||
v-model="item.highVoltageValue" |
|||
disabled |
|||
type="number" |
|||
class="voltage-input" |
|||
/> |
|||
<span v-show="item.highVoltage" class="unit-text"> V</span> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="移动速度" |
|||
:prop="`times.${index}.movingSpeed`" |
|||
:rules="[{ required: true, message: '请输入移动速度', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.movingSpeed" disabled type="number" /> |
|||
<span class="unit-text">mm/s</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="间距" |
|||
:prop="`times.${index}.spacing`" |
|||
:rules="[{ required: true, message: '请输入间距', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.spacing" disabled type="number" /> |
|||
<span class="unit-text">mm</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="等待时间" |
|||
:prop="`times.${index}.delay`" |
|||
:rules="[{ required: true, message: '请输入等待时间', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.delay" disabled type="number" /> |
|||
<span class="unit-text">s</span> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="item.matrixPathType === 'grid'" |
|||
label="中间等待时间" |
|||
:prop="`times.${index}.gridDelay`" |
|||
:rules="[{ required: true, message: '请输入等待时间', trigger: 'blur' }]" |
|||
> |
|||
<el-input v-model="item.gridDelay" disabled type="number" /> |
|||
<span class="unit-text">s</span> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
</SwiperSlide> |
|||
</Swiper> |
|||
</el-form> |
|||
<template #footer> |
|||
<ft-button @click="cancel"> |
|||
关闭 |
|||
</ft-button> |
|||
</template> |
|||
</FtDialog> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.el-select { |
|||
width: 70%; |
|||
margin: 0 30px; |
|||
} |
|||
.el-input { |
|||
width: 70%; |
|||
margin: 0 30px; |
|||
} |
|||
.unit-text { |
|||
font-size: 40px; |
|||
color: #0349a8; |
|||
font-weight: 500; |
|||
margin-left: 20px; |
|||
} |
|||
.select-box { |
|||
display: flex; |
|||
margin: 40px; |
|||
} |
|||
.route-img { |
|||
display: flex; |
|||
height: 80px; |
|||
width: 50%; |
|||
justify-content: space-evenly; |
|||
img { |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.voltage-box { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 80px; |
|||
margin-left: 40px; |
|||
.voltage-input { |
|||
width: 470px; |
|||
} |
|||
} |
|||
.tab-content { |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
} |
|||
.el-form-item { |
|||
margin-bottom: 55px; |
|||
} |
|||
:deep(.el-form-item__error) { |
|||
margin-left: 40px; |
|||
margin-top: 5px; |
|||
font-size: 25px; |
|||
} |
|||
:deep(.swiper-pagination-bullet) { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
:deep(.el-tabs) { |
|||
.el-tabs__header { |
|||
.el-tabs__nav-wrap { |
|||
.el-tabs__nav-scroll { |
|||
.el-tabs__nav { |
|||
.el-tabs__item { |
|||
padding: 0 40px; |
|||
} |
|||
.el-tabs__item.is-active { |
|||
background: #2b6dea; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue