From 9e4cee4cae1dd70843661c53f06f2fba0906ee51 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Tue, 20 Aug 2024 00:21:47 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E6=96=B0=E5=A2=9E=E9=9A=A7=E9=81=93?=
 =?UTF-8?q?=E6=97=B6=E5=A4=9A=E5=BA=8F=E5=88=97=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device-manage/index.vue |  80 +++++++++++------------
 src/views/edit/edit.vue           |  17 ++++-
 src/views/tunnel-manage/index.vue | 103 +++++++++++++++++++-----------
 3 files changed, 118 insertions(+), 82 deletions(-)

diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
index b3b4fbf..45f4203 100644
--- 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;
diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue
index 96b1fea..d652339 100644
--- 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,
     };
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index 39659ea..fb0e45a 100644
--- 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;
 }