fix : 新增隧道时多序列号

2024-08-20 00:21:47 +08:00
parent f5f178f2a2
commit 9e4cee4cae
3 changed files with 118 additions and 82 deletions
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -76,19 +76,19 @@
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
-<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
-<!--                <template #default="scope">-->
-<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
-<!--                             @change="changeFanData(scope.row)" class="serialNumber">-->
-<!--                    <el-option-->
-<!--                        v-for="item in serialNumberOptions"-->
-<!--                        :key="item.value"-->
-<!--                        :label="item.label"-->
-<!--                        :value="item.value"-->
-<!--                    />-->
-<!--                  </el-select>-->
-<!--                </template>-->
-<!--              </el-table-column>-->
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                             @change="changeFanData(scope.row)" class="serialNumber">
+                    <el-option
+                        v-for="item in serialNumberOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center" min-width="86">
                <template #default="scope">
                  <div class="switch">
@@ -160,19 +160,19 @@
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
-<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
-<!--                <template #default="scope">-->
-<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
-<!--                             @change="changeWindData(scope.row)" class="serialNumber">-->
-<!--                    <el-option-->
-<!--                        v-for="item in serialNumberOptions"-->
-<!--                        :key="item.value"-->
-<!--                        :label="item.label"-->
-<!--                        :value="item.value"-->
-<!--                    />-->
-<!--                  </el-select>-->
-<!--                </template>-->
-<!--              </el-table-column>-->
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                             @change="changeWindData(scope.row)" class="serialNumber">
+                    <el-option
+                        v-for="item in serialNumberOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -244,19 +244,19 @@
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
-<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
-<!--                <template #default="scope">-->
-<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
-<!--                             @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
-<!--                    <el-option-->
-<!--                        v-for="item in serialNumberOptions"-->
-<!--                        :key="item.value"-->
-<!--                        :label="item.label"-->
-<!--                        :value="item.value"-->
-<!--                    />-->
-<!--                  </el-select>-->
-<!--                </template>-->
-<!--              </el-table-column>-->
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                             @change="changeOtherData(scope.row)" clearable class="serialNumber">
+                    <el-option
+                        v-for="item in serialNumberOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -630,7 +630,7 @@ getList()

    .device-box {
      display: flex;
-      width: 2680px;
+      width: 2800px;
      height: 1600px;
      background: #064B66;
      border-radius: 20px;
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -22,12 +22,18 @@
        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
        </el-form-item>
-        <el-form-item label="序列号" prop="serialNumberOne">
-          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号"/>
-        </el-form-item>
        <el-form-item label="序列号1" prop="serialNumber">
          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
        </el-form-item>
+        <div style="display: flex;flex-direction: column">
+          <div v-for="(item,index) in form.serialNumberList" :key="index" >
+            <el-form-item :label="'序列号'+(index+2)">
+              <div style="flex: 1;display: flex;">
+                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />
+              </div>
+            </el-form-item>
+          </div>
+        </div>
        <el-form-item label="隧道长度">
          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
        </el-form-item>
@@ -103,6 +109,7 @@ const form = ref({
  dropFrequency: '',
  isDefault: false,
  remarks: "",
+  serialNumberList:[]
 });
 const getTunnel = () => {
  const loading = ElLoading.service({
@@ -113,6 +120,7 @@ const getTunnel = () => {
  })
  getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
+      res.data.serialNumberList= res.data.serialNumberList?.map(item=>({serialNumberOne:item}))
      form.value = res.data;
    }
    loading.close()
@@ -136,9 +144,12 @@ const getTunnelInfo = () => {
    if (modelEquipmentList.value === null) {
      modelEquipmentList.value = []
    }
+
+    let serialNumberList=form.value.serialNumberList.map(item=>item.serialNumberOne)
    const data = {
      tunnelId: tunnelId,
      ...form.value,
+      serialNumberList:serialNumberList,
      tunnelLength: form.value.totalLength,
      modelEquipmentList: modelEquipmentList.value,
    };
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -8,16 +8,16 @@
      <div class="site-name">
        {{ siteName }}
      </div>
-<!--      <div class="model-change">-->
-<!--        <div class="model" @click="clickModel=1;showNull=false">-->
-<!--          <div class="card-bg"></div>-->
-<!--          <span>卡片模式</span>-->
-<!--        </div>-->
-<!--        <div class="model" @click="clickModel=2;getSiteImg()">-->
-<!--          <div class="img-bg"></div>-->
-<!--          <span>图纸导航</span>-->
-<!--        </div>-->
-<!--      </div>-->
+      <!--      <div class="model-change">-->
+      <!--        <div class="model" @click="clickModel=1;showNull=false">-->
+      <!--          <div class="card-bg"></div>-->
+      <!--          <span>卡片模式</span>-->
+      <!--        </div>-->
+      <!--        <div class="model" @click="clickModel=2;getSiteImg()">-->
+      <!--          <div class="img-bg"></div>-->
+      <!--          <span>图纸导航</span>-->
+      <!--        </div>-->
+      <!--      </div>-->
      <tunnel-title/>
      <div class="all-del-btn" v-if="showOperation">
        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -78,8 +78,8 @@
      </div>
      <div class="img-box" v-else>
        <!--        @/assets/images/tunnel/img.png-->
-<!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
-<!--             alt="" @click="clickHandler">-->
+        <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
+        <!--             alt="" @click="clickHandler">-->
        <map name="image" id="image">
          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
@@ -97,16 +97,27 @@
        <el-form-item label="隧道简称" prop="tunnelAlias">
          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
        </el-form-item>
-<!--        <el-form-item label="序列号前缀" prop="serialNumberPrefix">-->
-<!--          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="序列号1" prop="serialNumber">-->
-<!--          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
-<!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
-<!--        </el-form-item>-->
-
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <el-form-item label="PLC序列号" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
+        </el-form-item>
+        <div style="display: flex;flex-direction: column">
+          <div v-for="(item,index) in serialNumberList" :key="index" >
+            <el-form-item :label="'序列号'+(index+2)">
+              <div style="flex: 1;display: flex;">
+                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />
+                <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">
+                  <CirclePlus/>
+                </el-icon>
+                <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >
+                  <Remove/>
+                </el-icon>
+              </div>
+            </el-form-item>
+          </div>
+        </div>
        <el-form-item label="隧道长度" prop="totalLength">
          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
        </el-form-item>
@@ -175,17 +186,20 @@ import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
 import {getSiteDrawing, getSiteDetail} from "@/api/site";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
 import {getTunnelBySiteId} from "@/api/largeScreen";
-import { debounce } from 'lodash'
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumberOne: ''
+  }
+])

 const validateNumber = (rule, value) => {
  const reg = /^[A-Za-z0-9]+$/;
  return reg.test(value);
 }
 const validateSerialNumberPrefix = (rule, value) => {
-  return value.length > 13 && value.slice(0,-2) == form.value.serialNumberPrefix;
-}
-const validateSerialNumberOnePrefix = (rule, value) => {
-  return value.length > 13 && value.slice(0,-2) == form.value.serialNumberPrefix;
+  return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
 }
 const router = useRouter()
 const siteImage = ref()
@@ -200,12 +214,12 @@ const formRules = ref({
  serialNumberPrefix: [
    {required: true, message: '请输入序列号前缀', trigger: ['blur', 'change']},
    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号前缀', trigger: ['blur', 'change']},
-    { min:14,max:14,message: '隧道序列号前缀长度为14位',trigger: ['blur', 'change'] },
+    {min: 14, max: 14, message: '隧道序列号前缀长度为14位', trigger: ['blur', 'change']},
  ],
  serialNumber: [
    {required: true, message: '请输入序列号1', trigger: ['blur', 'change']},
    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号1', trigger: ['blur', 'change']},
-    { min:16,max:16,message: '隧道序列号1长度为16位',trigger: ['blur', 'change']},
+    {min: 16, max: 16, message: '隧道序列号1长度为16位', trigger: ['blur', 'change']},
    // {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
  ],
  serialNumberOne: [
@@ -319,11 +333,19 @@ const total = ref(10);
 onMounted(() => {
  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
+const addSerialNumber = () => {
+  serialNumberList.value.push({
+    serialNumberOne: ''
+  })
+}
+const delSerialNumber = (index) => {
+  serialNumberList.value.splice(index, 1)
+}
 const getSiteImg = () => {
-  showNull.value=false
+  showNull.value = false
  getSiteDrawing(siteId).then((res) => {
    if (res.code === 1000) {
-      if(res.data.drawingData===null){
+      if (res.data.drawingData === null) {
        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
@@ -331,10 +353,10 @@ const getSiteImg = () => {
        // }).then(() => {
        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
        // }).catch(()=>{
-          showNull.value=true
+        showNull.value = true
        // })
-      }else{
-        showNull.value=false
+      } else {
+        showNull.value = false
        siteImage.value = res.data.drawingData
      }
    }
@@ -405,12 +427,14 @@ const handleCurrentChange = (val) => {
  getList()
 }
 const handleSubmit = debounce((instance) => {
+  let serialNumberListParam=serialNumberList.value.map(item=>item.serialNumberOne)
  if (!instance) return
  instance.validate(async (valid) => {
    if (!valid) return
    const data = {
      siteId: siteId,
-      ...form.value
+      ...form.value,
+      serialNumberList:serialNumberListParam
    }
    addTunnel(data).then(res => {
      if (res.code === 1000) {
@@ -422,7 +446,7 @@ const handleSubmit = debounce((instance) => {
      }
    })
  })
-},100)
+}, 100)
 //预览隧道
 const handlePreview = (id) => {
  console.log('预览')
@@ -459,7 +483,7 @@ const handleChooseAll = debounce(() => {
      })
    }
  })
-},100)
+}, 100)
 const handleEditDevice = (tunnelId) => {
  if (type === 'bySite') {
    router.push('/device/' + tunnelId + '/bySite/' + userId)
@@ -533,16 +557,17 @@ const handleMoreDelete = debounce(() => {
      })
    })
  }
-},100)
+}, 100)

 </script>

 <style scoped lang="scss">
-.showNull{
+.showNull {
  margin-top: 150px;
  font-size: 60px;
  color: #05FEFF;
 }
+
 :deep(.el-form-item__error) {
  font-size: 35px;
 }