fix: 工艺次数复制将选区也带上

src/components/log/sprayParams/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>

src/components/martixCraft/Edit/index.vue

@@ -129,7 +129,12 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
       return
     }
     form.value.times.push(cloneDeep(form.value.times.at(-1)))
+    const selection = sprayRefs.value[activeTab.value].getSelection()
+    console.log(selection)
     activeTab.value = form.value.times.length - 1
+    nextTick(() => {
+      sprayRefs.value[activeTab.value].updateSelection(selection.x1 * 5, selection.y1 * 5, (selection.x2 - selection.x1) * 5, (selection.y2 - selection.y1) * 5)
+    })
   }
   else if (action === 'remove') {
     if (form.value.times.length <= 1) {
@@ -142,9 +147,10 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
     }
     form.value.times.splice(activeTab.value, 1)
   }
-  swiperInstance?.slideTo(activeTab.value)
+
   // 异步任务调用
   setTimeout(() => {
+    swiperInstance?.slideTo(activeTab.value)
     swiperInstance?.update()
   }, 100)
 }

src/components/spray/sprayParams/index.vue

@@ -67,6 +67,7 @@ const loading = ref(false)
 onMounted(async () => {
   loading.value = true
   form.value = cloneDeep(props.formData)
+  console.log(form.value)
   form.value.hasSet && (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)
@@ -151,7 +152,12 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
       return
     }
     form.value.times.push(cloneDeep(form.value.times.at(-1)))
+    const selection = sprayRefs.value[activeTab.value].getSelection()
+    console.log(selection)
     activeTab.value = form.value.times.length - 1
+    nextTick(() => {
+      sprayRefs.value[activeTab.value].updateSelection(selection.x1 * 5, selection.y1 * 5, (selection.x2 - selection.x1) * 5, (selection.y2 - selection.y1) * 5)
+    })
   }
   else if (action === 'remove') {
     if (form.value.times.length <= 1) {

src/views/log/index.vue

@@ -4,7 +4,7 @@ import { del, list } from 'apis/log'
 import { list as matrixList } from 'apis/matrix'
 import { list as matrixCraftList } from 'apis/matrixCraft'
 import FtButton from 'components/common/FTButton/index.vue'
-import SprayParams from 'components/spray/sprayParams/index.vue'
+import SprayParams from 'components/log/sprayParams/index.vue'
 import { ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
 import { onMounted, ref } from 'vue'
@@ -37,7 +37,7 @@ const getList = async () => {
   tableData.value = tableData.value.map((item: any) => {
     return {
       ...item,
-      ...JSON.parse(item.matrixInfo),
+      matrixInfo: JSON.parse(item.matrixInfo),
     }
   })
   const res1 = await matrixList({ pageNum: 1, pageSize: 1000 })
@@ -76,7 +76,7 @@ const selectCraftVisible = ref(false)
 
 const currentFormData = ref<any>({})
 const viewParams = (row: any) => {
-  currentFormData.value = row
+  currentFormData.value = row.matrixInfo
   selectCraftVisible.value = true
 }
 </script>
@@ -138,7 +138,6 @@ const viewParams = (row: any) => {
     </div>
     <SprayParams
       v-if="selectCraftVisible"
-      disabled
       :form-data="currentFormData"
       @cancel="selectCraftVisible = false"
     />