add webnet config setting

This commit is contained in:
龚祖望 2022-10-27 14:05:52 +08:00
parent 6ca6a29c34
commit 15bc202629
1 changed files with 127 additions and 40 deletions

View File

@ -66,31 +66,98 @@
<!-- 新增弹窗 -->
<el-dialog title="新增设备" :visible="visible" width="500px" @close="closeDialog">
<el-form ref="form" :rules="rules" label-width="120px" :model="form" size="medium">
<el-row>
<el-col :span="18" :offset="3">
<el-form-item label="产品分类:" prop="product">
<el-select v-model="form.product" value-key="name" @change="handleChange">
<el-option v-for="(item,index) in productList" :key="index" :label="item.name" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="设备类型:" prop="type">
<el-select v-model="form.type">
<el-option v-for="(item,index) in deviceList" :key="index" :label="item.name" :value="item.name" />
</el-select>
</el-form-item>
<el-form-item label="设备序列号:" prop="no">
<el-input v-model="form.no" />
</el-form-item>
<el-form-item label="设备描述:" prop="devicedesc">
<el-input v-model="form.devicedesc" />
</el-form-item>
<el-form-item label="设备状态:" prop="activestatus">
<el-radio v-model="form.activestatus" :label="1">已激活</el-radio>
<el-radio v-model="form.activestatus" :label="0">未激活</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-form ref="form" :rules="rules" label-width="130px" :model="form" size="medium">
<el-tabs v-model="activeName">
<el-tab-pane label="基本信息" name="first">
<el-row>
<el-col :span="18" :offset="3">
<el-form-item label="产品分类:" prop="product">
<el-select v-model="form.product" value-key="name" @change="handleChange">
<el-option v-for="(item,index) in productList" :key="index" :label="item.name" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="设备类型:" prop="type">
<el-select v-model="form.type">
<el-option v-for="(item,index) in deviceList" :key="index" :label="item.name" :value="item.name" />
</el-select>
</el-form-item>
<el-form-item label="设备序列号:" prop="no">
<el-input v-model="form.no" />
</el-form-item>
<el-form-item label="设备描述:" prop="devicedesc">
<el-input v-model="form.devicedesc" />
</el-form-item>
<el-form-item label="设备状态:" prop="activestatus">
<el-radio v-model="form.activestatus" :label="1">已激活</el-radio>
<el-radio v-model="form.activestatus" :label="0">未激活</el-radio>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="TCP/IP" name="second">
<el-row>
<el-col :span="18" :offset="3">
<el-form-item label="设备IPv4地址" prop="ipaddr">
<el-input v-model="form.ipaddr" />
</el-form-item>
<el-form-item label="IPv4子网掩码" prop="netmask">
<el-input v-model="form.netmask" />
</el-form-item>
<el-form-item label="IPv4默认网关" prop="gateway">
<el-input v-model="form.gateway" />
</el-form-item>
<el-form-item label="首选DNS服务器" prop="dnsserver0">
<el-input v-model="form.dnsserver0" />
</el-form-item>
<el-form-item label="备用DNS服务器" prop="dnsserver1">
<el-input v-model="form.dnsserver1" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="mqtt云平台" name="third">
<el-row>
<el-col :span="18" :offset="3">
<el-form-item label="发布主题:" prop="topic">
<el-input v-model="form.topic" />
</el-form-item>
<el-form-item label="服务器地址:" prop="serveraddr">
<el-input v-model="form.serveraddr" />
</el-form-item>
<el-form-item label="端口号:" prop="serverport">
<el-input v-model="form.serverport" />
</el-form-item>
<el-form-item label="用户名:" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input v-model="form.password" />
</el-form-item>
<el-form-item label="客户端id" prop="clientid">
<el-input v-model="form.clientid" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="私有协议" name="fourth">
<el-row>
<el-col :span="18" :offset="3">
<el-form-item label="服务器地址:" prop="privateserveraddr">
<el-input v-model="form.privateserveraddr" />
</el-form-item>
<el-form-item label="端口号:" prop="privateserverport">
<el-input v-model="form.privateserverport" />
</el-form-item>
<el-form-item label="用户名:" prop="privateserverusername">
<el-input v-model="form.privateserverusername" />
</el-form-item>
<el-form-item label="密码:" prop="privateserverpassword">
<el-input v-model="form.privateserverpassword" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="medium" @click="visible=false"> </el-button>
@ -116,7 +183,22 @@ export default {
type: '',
no: '',
devicedesc: '',
activestatus: 0
activestatus: 0,
ipaddr: '',
netmask: '',
gateway: '',
dnsserver0: '',
dnsserver1: '',
topic: '',
serveraddr: '',
serverport: '',
username: '',
password: '',
clientid: '',
privateserveraddr: '',
privateserverport: '',
privateserverusername: '',
privateserverpassword: ''
},
// productList: [
// {
@ -170,7 +252,8 @@ export default {
product: [{ required: true, message: '请选择产品分类', trigger: 'change' }],
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
no: [{ required: true, message: '请输入设备序列号', trigger: 'blur' }]
}
},
activeName: 'first'
}
},
computed: {
@ -323,6 +406,7 @@ export default {
this.form.src = item.src
this.form.color = item.color
},
handleTabClick(tab, event) {},
submit() {
this.$refs.form.validate(valid => {
if (valid) {
@ -337,19 +421,19 @@ export default {
statusdesc,
kernel: 'rt-thread kenel',
webversion: '1.0',
ipaddr: '192.168.131.29',
netmask: '255.255.254.0',
gateway: '192.168.130.1',
dnsserver0: '10.0.110.21',
dnsserver1: '10.0.110.20',
topic: '/broadcast/hf6mzwdVnJg/989898',
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
serverport: '1883',
username: 'test1&hf6mzwdVnJg',
clientid: '123|securemode=3,signmethod=hmacsha1|',
privateserveraddr: '192.168.131.30',
privateserverport: '9898',
privateserverusername: 'admin'
ipaddr: this.form.ipaddr || '192.168.131.29',
netmask: this.form.netmask || '255.255.254.0',
gateway: this.form.gateway || '192.168.130.1',
dnsserver0: this.form.dnsserver0 || '10.0.110.21',
dnsserver1: this.form.dnsserver1 || '10.0.110.20',
topic: this.form.topic || '/broadcast/hf6mzwdVnJg/989898',
serveraddr: this.form.serveraddr || 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
serverport: this.form.serverport || '1883',
username: this.form.username || 'test1&hf6mzwdVnJg',
clientid: this.form.clientid || '123|securemode=3,signmethod=hmacsha1|',
privateserveraddr: this.form.privateserveraddr || '192.168.131.30',
privateserverport: this.form.privateserverport || '9898',
privateserverusername: this.form.privateserverusername || 'admin'
}
add({
productname, type, no, devicedesc, activestatus: this.form.activestatus, ...dataTemplate
@ -461,6 +545,9 @@ export default {
top: 10%;
background-color: #979797;
}
.el-form-item{
margin-top: 20px;
}
@keyframes in {
from{
opacity: 0;