feat : 新增/编辑隧道新增序列号1,序列号前缀输入框

src/views/edit/edit.vue

@@ -12,15 +12,21 @@
       </div>
     </div>
     <div class="edit-box">
-      <el-form :model="form" :label-position="right" label-width="188px">
+      <el-form :model="form" :label-position="right" label-width="230px">
         <el-form-item label="隧道名称">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
         <el-form-item label="隧道简称">
           <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
         </el-form-item>
-        <el-form-item label="序列号">
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
+          <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>
         <el-form-item label="隧道长度">
           <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
@@ -86,7 +92,9 @@ const type = reactive(router.currentRoute.value.params.type);
 const modelEquipmentList = ref(null)
 const form = ref({
   tunnelName: "",
-  serialNumber: "",
+  serialNumberPrefix: '',
+  serialNumberOne: '',
+  serialNumber: '',
   totalLength: "",
   referenceFrequency: '',
   upTime: '',

src/views/tunnel-manage/index.vue

@@ -90,15 +90,21 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
         <el-form-item label="隧道名称" prop="tunnelName">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
         <el-form-item label="隧道简称" prop="tunnelAlias">
           <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
         </el-form-item>
-        <el-form-item label="序列号" prop="serialNumber">
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
+          <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>
         <el-form-item label="隧道长度" prop="totalLength">
           <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
@@ -174,6 +180,12 @@ 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;
+}
 const router = useRouter()
 const siteImage = ref()
 const showAddIcon = ref(true)
@@ -184,9 +196,23 @@ const type = reactive(params.type)
 const formRules = ref({
   tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
   tunnelAlias: [{required: true, message: '请输入隧道简称', 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']},
+    {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  serialNumberOne: [
     {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
-    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号', trigger: ['blur', 'change']},
+    { min:16,max:16,message: '隧道序列号长度为16位',trigger: ['blur', 'change']},
+    {validator: validateSerialNumberOnePrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  serialNumberPrefix: [
+    {required: true, message: '请输入序列号前缀', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号前缀', trigger: ['blur', 'change']},
+    { min:14,max:14,message: '隧道序列号前缀长度为14位',trigger: ['blur', 'change'] },
   ],
   totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
   constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
@@ -272,6 +298,8 @@ const siteName = ref(localStorage.getItem('site'))
 const form = ref({
   tunnelName: '',
   tunnelAlias: '',
+  serialNumberPrefix: '',
+  serialNumberOne: '',
   serialNumber: '',
   totalLength: '',
   referenceFrequency: '',

src/views/tunnel/index.vue

@@ -435,7 +435,8 @@ const getScreenInfo = (id) => {
     initSceneData(id).then((res) => {
       tunnelLength.value = res.data.tunnelLength
       constructionLength.value = res.data.constructionLength
-      serialNumber.value = res.data.serialNumber
+      // serialNumber.value = res.data.serialNumber.slice(0, -2)
+      serialNumber.value = res.data.serialNumberPrefix
       initWebSocket();
     })
   }
@@ -563,8 +564,9 @@ const nextBtn = () => {
 };
 
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
   let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   socket = new WebSocket(wsUrl);
   //连接发生错误的回调方法
   socket.onerror = function () {