floraachy
/
xiuos_IoT
1
0
Fork 1
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
xiuosiot-frontend/src/views/terminal/add/index.vue
View File

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