zc

src/views/gasManage3_0/manage/recognizerManage/recognizerManage.vue

@@ -72,10 +72,13 @@
       @pagination="getList"
     />
     <!-- 添加或修改传感器对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body class="recognizer add-hardware-dialog-box">
-      <el-form ref="form" :model="form" :rules="rules" :inline="true">
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body class="recognizer recognizer-manage add-hardware-dialog-box">
+      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="130px">
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input v-model="form.deviceName" maxlength="30" placeholder="请输入识别器编号" style="width: 400px"/>
+        </el-form-item>
         <el-form-item label="识别器编号" prop="hardwareNum">
-          <el-input v-model="form.hardwareNum" placeholder="请输入识别器编号" style="width: 400px"/>
+          <el-input v-model="form.hardwareNum" maxlength="30" placeholder="请输入识别器编号" style="width: 400px"/>
         </el-form-item>
         <el-form-item label="所属实验室" prop="subjectId">
           <el-select v-model="form.subjectId" placeholder="请选择实验室" style="width: 400px">
@@ -87,23 +90,28 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="IP地址" >
-          <el-input v-model="form.ipAddress" placeholder="请输入IP地址" style="width: 400px"/>
-        </el-form-item>
-        <el-form-item label="连接方式">
+        <div class="form-input-ip-box">
+          <el-form-item label="IP地址" label-width="54px" prop="ipAddress" class="form-ip">
+            <el-input v-model="form.ipAddress" maxlength="30" placeholder="请输入IP地址"/>
+          </el-form-item>
+          <el-form-item label="端口" label-width="54px" prop="port" class="form-port">
+            <el-input style="width:120px;" maxlength="5" v-model="form.port" placeholder="请输入端口"/>
+          </el-form-item>
+        </div>
+        <el-form-item label="连接方式" prop="manufacturerType">
           <el-select v-model="form.manufacturerType" placeholder="请选择" style="width:400px;" >
             <el-option :label="item.dictLabel" :value="item.dictValue" v-for="(item,index) in materialTypeList" :key="index"></el-option>
           </el-select>
         </el-form-item>
 
-        <el-form-item label="推送频率" >
+        <el-form-item label="推送频率" prop="sessionIndex">
           <el-select v-model="form.sessionIndex" placeholder="请选择设备推送频率"  style="width:400px;">
             <el-option  label="最大" value="0"></el-option>
             <el-option  label="中等" value="1"></el-option>
             <el-option  label="最小" value="2"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="天线数量" >
+        <el-form-item label="天线数量" prop="channels">
           <el-select v-model="form.channels" placeholder="请选择信道数量" @change="antennaNumFun()"  style="width:400px;">
             <el-option  label="1" value="1"></el-option>
             <el-option  label="2" value="2"></el-option>
@@ -115,7 +123,7 @@
         <el-row  v-for="(item,index) in antennaNum" :key="index">
           <el-col :span="12">
             <el-form-item :label="(index+1)+'号天线感应距离'">
-              <el-input-number v-model="uniformPower[index]" placeholder="请输入设备输出频率" style="width:140px;"/>
+              <el-input-number v-model="uniformPower[index]" maxlength="10" placeholder="请输入设备输出频率" style="width:140px;"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -162,6 +170,20 @@ export default {
   name: "Sensor",
   components: { Treeselect },
   data() {
+    const ipVerification  = (rule, value, callback) => {
+      if(!/^((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))(\.((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))){3}$/.test(value)) {
+        callback(new Error("IP地址错误"));
+      } else {
+        callback()
+      }
+    };
+    const portVerification  = (rule, value, callback) => {
+      if(!/^[0-9]+$/.test(value)) {
+        callback(new Error("端口号错误"));
+      } else {
+        callback()
+      }
+    };
     return {
       // 遮罩层
       loading: true,
@@ -192,7 +214,7 @@ export default {
         channels:4,//信道
         sessionIndex:0,//设备推送频率
         uniformPower:'',//设备推送频率
-        manufacturerType:'',//供应商
+        manufacturerType:null,//连接方式
       },
       materialTypeList:[],
       uniformPower:[20,20,20,20],
@@ -201,15 +223,32 @@ export default {
       detectionArr:[],//检测类型数组
       // 表单校验
       rules: {
-        name:[
-          {required: true, message: '识别器名称不能为空', trigger: 'blur'}
+        deviceName:[
+          {required: true, message: '设备名称不能为空', trigger: 'blur'}
         ],
         hardwareNum:[
           {required: true, message: '识别器编号不能为空', trigger: 'blur'}
         ],
         subjectId:[
           {required: true, message: '所属实验室不能为空', trigger: 'blur'}
-        ]
+        ],
+        ipAddress:[
+          {required: true, message: 'IP地址不能为空', trigger: 'blur'},
+          { required: true, validator: ipVerification, trigger: "blur" },
+        ],
+        port:[
+          {required: true, message: '端口不能为空', trigger: 'blur'},
+          { required: true, validator: portVerification, trigger: "blur" },
+        ],
+        manufacturerType:[
+          {required: true, message: '请选择连接方式', trigger: 'blur'},
+        ],
+        sessionIndex:[
+          {required: true, message: '请选择推送频率', trigger: 'blur'},
+        ],
+        channels:[
+          {required: true, message: '请选择天线数量', trigger: 'blur'},
+        ],
       },
     };
   },
@@ -312,6 +351,8 @@ export default {
         hardwareNum: null,
         subjectId: null,
         ipAddress: null,
+        port: null,
+        manufacturerType:null,
         channels: '4',
         sessionIndex: '0',
         uniformPower: '',
@@ -356,6 +397,7 @@ export default {
       this.form.hardwareNum=row.hardwareNum
       this.form.subjectId=row.subjectId
       this.form.ipAddress=row.ipAddress
+      this.form.port=row.port
       this.form.channels=row.channels+''
       this.form.sessionIndex=row.sessionIndex+''
       this.form.manufacturerType=row.manufacturerType+''
@@ -481,10 +523,13 @@ export default {
     left: 21%!important;
   }
 }
-.recognizer{
+.recognizer-manage{
   .el-form-item__label{
     width:130px!important;
   }
+  .el-form-item__error {
+    left: 0 !important;
+  }
   //.el-input--suffix{
   //  width:340px!important;
   //}
@@ -497,6 +542,27 @@ export default {
   //.el-input-number--medium{
   //  width:240px!important;
   //}
+  .form-input-ip-box{
+    display: flex;
+    .form-ip{
+      width:350px;
+      .el-form-item__label{
+        width:130px!important;
+      }
+      input{
+        width:220px;
+      }
+    }
+    .form-port{
+      width:170px;
+      .el-form-item__label{
+        width:50px!important;
+      }
+      input{
+        width:120px;
+      }
+    }
+  }
 }
 </style>