GuoAnPeng
/
matrix-spray-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: times增加id

master
guoapeng 2 weeks ago
parent
062003fbfa
commit
737983f121
4 changed files with 233 additions and 172 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      src/components/martixCraft/Edit/index.vue
  2. 202
      src/components/spray/sprayParams/index.vue
  3. 3
      src/components/spray/trayGraph/index.vue
  4. 4
      src/stores/useSprayStore.ts

196
src/components/martixCraft/Edit/index.vue
View File

@ -62,6 +62,7 @@ const form = ref({
matrixId: undefined,
times: [
{
id: Date.now(),
matrixPathType: 'horizontal', // 路径类型
motorZHeight: undefined, // 高度
gasPressure: undefined, // Mpa兆帕
@ -135,7 +136,7 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
FtMessage.warning('最多添加10次喷涂')
return
}
form.value.times.push(cloneDeep(form.value.times.at(-1)))
form.value.times.push(cloneDeep({ ...form.value.times.at(-1), id: Date.now() }))
const selection = sprayRefs.value[activeTab.value].getSelection()
console.log(selection)
activeTab.value = form.value.times.length - 1
@ -203,9 +204,7 @@ const touchendHandle = () => {
<el-form ref="formRef" label-width="120" :model="form" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item
label="工艺名称" prop="name"
>
<el-form-item label="工艺名称" prop="name">
<el-input v-model="form.name" placeholder="" />
</el-form-item>
</el-col>
@ -230,7 +229,15 @@ const touchendHandle = () => {
>
<SwiperSlide v-for="(item, index) in form.times" :key="index">
<div class="tab-content">
<TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
<TrayGraph
ref="sprayRefs"
:key="item.id"
:container="`spray-${index + 1}`"
select
@touchstart="touchstartHandle"
@touchmove="touchmoveHandle"
@touchend="touchendHandle"
/>
<div class="content-form">
<el-form-item label="喷涂路线">
<div class="route-img">
@ -283,43 +290,46 @@ const touchendHandle = () => {
<el-form-item
label="氮气气压"
:prop="`times.${index}.gasPressure`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入氮气气压'));
}
else if (value < 0 || value > 100) {
callback(new Error('氮气气压需在0-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入氮气气压'));
}
else if (value < 0 || value > 100) {
callback(new Error('氮气气压需在0-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input
v-model="item.gasPressure" min="0.1"
max="100" type="number"
/>
<el-input v-model="item.gasPressure" min="0.1" max="100" type="number" />
<span class="unit-text">Mpa</span>
</el-form-item>
<el-form-item
label="基质流速"
:prop="`times.${index}.volume`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入基质流速'));
}
else if (value < 0 || value > 60) {
callback(new Error('基质流速需在0-60之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入基质流速'));
}
else if (value < 0 || value > 60) {
callback(new Error('基质流速需在0-60之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.volume" type="number" />
@ -363,19 +373,22 @@ const touchendHandle = () => {
<el-form-item
label="移动速度"
:prop="`times.${index}.movingSpeed`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入移动速度'));
}
else if (value < 1 || value > 100) {
callback(new Error('移动速度需在1-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入移动速度'));
}
else if (value < 1 || value > 100) {
callback(new Error('移动速度需在1-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.movingSpeed" type="number" />
@ -384,19 +397,22 @@ const touchendHandle = () => {
<el-form-item
label="间距"
:prop="`times.${index}.spacing`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入间距'));
}
else if (value < 0 || value > 100) {
callback(new Error('间距需在0-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入间距'));
}
else if (value < 0 || value > 100) {
callback(new Error('间距需在0-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.spacing" type="number" />
@ -405,19 +421,22 @@ const touchendHandle = () => {
<el-form-item
label="等待时间"
:prop="`times.${index}.delay`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 1200) {
callback(new Error('等待时间需在0-1200之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 1200) {
callback(new Error('等待时间需在0-1200之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.delay" type="number" />
@ -427,19 +446,22 @@ const touchendHandle = () => {
v-if="item.matrixPathType === 'grid'"
label="中间等待时间"
:prop="`times.${index}.gridDelay`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 120) {
callback(new Error('等待时间需在0-120之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value && value !== 0) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 120) {
callback(new Error('等待时间需在0-120之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.gridDelay" type="number" />

202
src/components/spray/sprayParams/index.vue
View File

@ -151,7 +151,7 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
FtMessage.warning('最多添加10次喷涂')
return
}
form.value.times.push(cloneDeep(form.value.times.at(-1)))
form.value.times.push(cloneDeep({ ...form.value.times.at(-1), id: Date.now() }))
const selection = sprayRefs.value[activeTab.value].getSelection()
console.log(selection)
activeTab.value = form.value.times.length - 1
@ -169,6 +169,7 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
console.log(activeTab.value)
}
form.value.times.splice(activeTab.value, 1)
console.log(activeTab.value)
}
// 异步任务调用
@ -244,14 +245,24 @@ const touchendHandle = () => {
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="基质" prop="matrixId" :rules="[{ required: true, message: '请选择基质', trigger: 'change' }]">
<el-form-item
label="基质"
prop="matrixId"
:rules="[{ required: true, message: '请选择基质', trigger: 'change' }]"
>
<el-select v-model="form.matrixId" 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" :editable="!disabled" type="card" @edit="handleTabsEdit" @tab-change="tabChangeHandle">
<el-tabs
v-model="activeTab"
:editable="!disabled"
type="card"
@edit="handleTabsEdit"
@tab-change="tabChangeHandle"
>
<el-tab-pane v-for="(item, index) in form.times" :key="index" :label="`第${index + 1}次`" :name="index" />
</el-tabs>
<Swiper
@ -264,7 +275,16 @@ const touchendHandle = () => {
>
<SwiperSlide v-for="(item, index) in form.times" :key="index">
<div class="tab-content">
<TrayGraph ref="sprayRefs" :key="index" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
<TrayGraph
ref="sprayRefs"
:key="item.id"
:edit-select="!disabled"
:container="`spray-params-${index + 1}`"
select
@touchstart="touchstartHandle"
@touchmove="touchmoveHandle"
@touchend="touchendHandle"
/>
<div class="content-form">
<el-form-item label="喷涂路线">
<div class="route-img">
@ -317,19 +337,22 @@ const touchendHandle = () => {
<el-form-item
label="氮气气压"
:prop="`times.${index}.gasPressure`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入氮气气压'));
}
else if (value < 0 || value > 100) {
callback(new Error('氮气气压需在0-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入氮气气压'));
}
else if (value < 0 || value > 100) {
callback(new Error('氮气气压需在0-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.gasPressure" type="number" />
@ -338,19 +361,22 @@ const touchendHandle = () => {
<el-form-item
label="基质流速"
:prop="`times.${index}.volume`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入基质流速'));
}
else if (value < 0 || value > 60) {
callback(new Error('基质流速需在0-60之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入基质流速'));
}
else if (value < 0 || value > 60) {
callback(new Error('基质流速需在0-60之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.volume" type="number" />
@ -391,19 +417,22 @@ const touchendHandle = () => {
<el-form-item
label="移动速度"
:prop="`times.${index}.movingSpeed`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入移动速度'));
}
else if (value < 1 || value > 100) {
callback(new Error('移动速度需在1-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入移动速度'));
}
else if (value < 1 || value > 100) {
callback(new Error('移动速度需在1-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.movingSpeed" type="number" />
@ -412,19 +441,22 @@ const touchendHandle = () => {
<el-form-item
label="间距"
:prop="`times.${index}.spacing`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入间距'));
}
else if (value < 0 || value > 100) {
callback(new Error('间距需在0-100之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入间距'));
}
else if (value < 0 || value > 100) {
callback(new Error('间距需在0-100之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.spacing" type="number" />
@ -433,19 +465,22 @@ const touchendHandle = () => {
<el-form-item
label="等待时间"
:prop="`times.${index}.delay`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 1200) {
callback(new Error('等待时间需在0-1200之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 1200) {
callback(new Error('等待时间需在0-1200之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.delay" type="number" />
@ -455,19 +490,22 @@ const touchendHandle = () => {
v-if="item.matrixPathType === 'grid'"
label="中间等待时间"
:prop="`times.${index}.gridDelay`"
:rules="[{ required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 120) {
callback(new Error('等待时间需在0-120之间'));
}
else {
callback();
}
} },
:rules="[
{
required: true,
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请输入等待时间'));
}
else if (value < 0 || value > 120) {
callback(new Error('等待时间需在0-120之间'));
}
else {
callback();
}
},
},
]"
>
<el-input v-model="item.gridDelay" type="number" />

3
src/components/spray/trayGraph/index.vue
View File

@ -99,7 +99,6 @@ const addSelect = () => {
const height = newHeight
const stageWidth = stage.value.width()
const stageHeight = stage.value.height()
console.log(width, height, stageWidth, stageHeight)
// 计算边界约束
// 1. 左上角不超出画布左/上边界
@ -122,8 +121,6 @@ const addSelect = () => {
boundBoxFunc(oldBoundBox, newBoundBox) {
const stageWidth = stage.value.width()
const stageHeight = stage.value.height()
console.log('oldBoundBox', oldBoundBox)
console.log('newBoundBox', newBoundBox)
// 新边界必须满足以下条件：
// 1. 左上角不超出画布左/上边界

4
src/stores/useSprayStore.ts
View File

@ -12,6 +12,7 @@ export const useSprayStore = defineStore('spray', {
matrixId: undefined,
times: [
{
id: 1,
matrixPathType: 'horizontal', // 路径类型
motorZHeight: undefined, // 高度
gasPressure: undefined, // Mpa兆帕
@ -34,6 +35,7 @@ export const useSprayStore = defineStore('spray', {
matrixId: undefined,
times: [
{
id: 1,
matrixPathType: 'horizontal', // 路径类型
motorZHeight: undefined, // 高度
gasPressure: undefined, // Mpa兆帕
@ -56,6 +58,7 @@ export const useSprayStore = defineStore('spray', {
matrixId: undefined,
times: [
{
id: 1,
matrixPathType: 'horizontal', // 路径类型
motorZHeight: undefined, // 高度
gasPressure: undefined, // Mpa兆帕
@ -78,6 +81,7 @@ export const useSprayStore = defineStore('spray', {
matrixId: undefined,
times: [
{
id: 1,
matrixPathType: 'horizontal', // 路径类型
motorZHeight: undefined, // 高度
gasPressure: undefined, // Mpa兆帕

Write Preview
Loading…
Cancel
Save