bug修改
This commit is contained in:
parent
d6c3990908
commit
76f90e3f88
|
|
@ -31,7 +31,7 @@
|
|||
<div :class="gernerateClass(sizeForm.status)"></div>
|
||||
</el-col>
|
||||
<el-col :span="2" style="diaplay: flex">
|
||||
<span style="margin-left: 10px">{{sizeForm.status}}</span>
|
||||
<span style="margin-left: 10px">{{ sizeForm.status }}</span>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="连接：">
|
||||
|
|
@ -42,24 +42,19 @@
|
|||
<span style="margin-left: 10px">接通</span>
|
||||
</el-col>
|
||||
</el-form-item> -->
|
||||
<div style="margin-bottom: 24px;">
|
||||
<div style="margin-bottom: 24px">
|
||||
<p class="title">dhcp4</p>
|
||||
<el-switch
|
||||
v-model="dhcp4"
|
||||
active-text="开"
|
||||
inactive-text="关">
|
||||
</el-switch>
|
||||
<el-switch v-model="dhcp4" active-text="开" inactive-text="关"> </el-switch>
|
||||
</div>
|
||||
<div v-show="!dhcp4">
|
||||
<p class="title">静态地址</p>
|
||||
<el-button type="primary" @click="addRowsTableData()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
|
||||
<el-button type="primary" @click="addRowsTableData()" style="margin-bottom: 10px" v-if="!disable">新增</el-button>
|
||||
<el-table :data="sizeForm.tableData" border style="width: 95%">
|
||||
<el-table-column prop="address" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableData.'+ scope.$index + '.address'" :rules="rules.address" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.address"
|
||||
placeholder="例：172.1.1.16/24" :disabled="disable"/>
|
||||
<el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules="rules.address" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.address" placeholder="例：172.1.1.16/24" :disabled="disable" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -80,15 +75,17 @@
|
|||
<el-input v-model="scope.row.term" @change="changeVal(scope.row,scope.$index)"></el-input>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<el-table-column fixed="right" label="操作" width="350">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index < sizeForm.tableData.length-1" type="text" size="small">删除行
|
||||
</el-button> -->
|
||||
<el-button @click="deleteRowsTableData(scope)" v-if="scope.$index != 0" type="text" size="small" :disabled="disable">删除行
|
||||
<el-button
|
||||
@click="deleteRowsTableData(scope)"
|
||||
v-if="scope.$index != 0"
|
||||
type="text"
|
||||
size="small"
|
||||
:disabled="disable"
|
||||
>删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -111,7 +108,7 @@
|
|||
<el-input v-model="sizeForm.ip"></el-input>
|
||||
</el-col>
|
||||
</el-form-item> -->
|
||||
<div style="width:100%" v-if="sizeForm.desc == true">
|
||||
<div style="width: 100%" v-if="sizeForm.desc == true">
|
||||
<!-- <p class="title">静态地址</p>
|
||||
<el-form-item label="IP1：">
|
||||
<el-col :span="6">
|
||||
|
|
@ -146,7 +143,7 @@
|
|||
</el-col>
|
||||
</el-form-item>
|
||||
<p class="title">静态路由</p>
|
||||
<el-button type="primary" @click="addRows()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
|
||||
<el-button type="primary" @click="addRows()" style="margin-bottom: 10px" v-if="!disable">新增</el-button>
|
||||
<el-table :data="sizeForm.tableRouter" border style="width: 95%">
|
||||
<!-- <el-table-column prop="name" label="名称">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -155,43 +152,46 @@
|
|||
</el-table-column> -->
|
||||
<!-- <el-table-column type="index" label="序号" fixed align='center'>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="to" label="to" >
|
||||
<template slot-scope="scope" >
|
||||
<el-table-column prop="to" label="to">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.to" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.to'" :rules="rules.to" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.to"
|
||||
placeholder="例：172.1.1.16/24" :disabled="disable" />
|
||||
<el-form-item :prop="'tableRouter.' + scope.$index + '.to'" :rules="rules.to" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.to" placeholder="例：172.1.1.16/24" :disabled="disable" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="via" label="via" >
|
||||
<el-table-column prop="via" label="via">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.via" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.via'" :rules="rules.via" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.via"
|
||||
placeholder="例：172.1.1.16" :disabled="disable"/>
|
||||
<el-form-item :prop="'tableRouter.' + scope.$index + '.via'" :rules="rules.via" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.via" placeholder="例：172.1.1.16" :disabled="disable" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="metric" label="metric">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.metric'" :rules="rules.metric" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.metric"
|
||||
placeholder="例：100" :disabled="disable"/>
|
||||
<el-form-item
|
||||
:prop="'tableRouter.' + scope.$index + '.metric'"
|
||||
:rules="rules.metric"
|
||||
class="tableFormItem"
|
||||
>
|
||||
<el-input v-model.trim="scope.row.metric" placeholder="例：100" :disabled="disable" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<el-table-column fixed="right" label="操作" width="350">
|
||||
<!-- <template slot-scope="scope" >
|
||||
<el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button>
|
||||
</template> -->
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="deleteRows(scope)" v-if="scope.$index < sizeForm.tableRouter.length" type="text" size="small" :disabled="disable">删除行
|
||||
<el-button
|
||||
@click="deleteRows(scope)"
|
||||
v-if="scope.$index < sizeForm.tableRouter.length"
|
||||
type="text"
|
||||
size="small"
|
||||
:disabled="disable"
|
||||
>删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -213,25 +213,29 @@
|
|||
<el-input v-model="sizeForm.dns3"></el-input>
|
||||
</el-col>
|
||||
</el-form-item> -->
|
||||
<el-button type="primary" @click="addRowsDNS()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
|
||||
<el-button type="primary" @click="addRowsDNS()" style="margin-bottom: 10px" v-if="!disable">新增</el-button>
|
||||
<el-table :data="sizeForm.tableDataDNS" border style="width: 95%">
|
||||
|
||||
<el-table-column prop="address" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableDataDNS.'+ scope.$index + '.address'" :rules="rules.addressDNS" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.address"
|
||||
placeholder="例：172.1.1.16" :disabled="disable" />
|
||||
<el-form-item
|
||||
:prop="'tableDataDNS.' + scope.$index + '.address'"
|
||||
:rules="rules.addressDNS"
|
||||
class="tableFormItem"
|
||||
>
|
||||
<el-input v-model.trim="scope.row.address" placeholder="例：172.1.1.16" :disabled="disable" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope" >
|
||||
<el-button @click="deleteRowsDNS(scope)" v-if="scope.$index < sizeForm.tableDataDNS.length" type="text" size="small" :disabled="disable">删除行
|
||||
<el-table-column fixed="right" label="操作" width="350">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="deleteRowsDNS(scope)"
|
||||
v-if="scope.$index < sizeForm.tableDataDNS.length"
|
||||
type="text"
|
||||
size="small"
|
||||
:disabled="disable"
|
||||
>删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -239,7 +243,13 @@
|
|||
</div>
|
||||
<!-- <el-form-item >
|
||||
<el-col :span="6"> -->
|
||||
<el-button type="primary" @click="commit(sizeForm.tableRouter,sizeForm.tableData,sizeForm.tableDataDNS,sizeForm)" style="margin-top:10px" v-if="!disable">保存</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="commit(sizeForm.tableRouter, sizeForm.tableData, sizeForm.tableDataDNS, sizeForm)"
|
||||
style="margin-top: 10px"
|
||||
v-if="!disable"
|
||||
>保存</el-button
|
||||
>
|
||||
<!-- </el-col>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
|
|
@ -249,7 +259,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let validateIPAddress = (rule, value, callback) => {
|
||||
|
|
@ -269,9 +278,9 @@ export default {
|
|||
if (!isCorrect) {
|
||||
callback(new Error('请输入正确的IP地址'));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
let validateIPAddressYes = (rule, value, callback) => {
|
||||
if (value == null) {
|
||||
return callback(new Error('IP地址不能为空'));
|
||||
|
|
@ -284,14 +293,14 @@ export default {
|
|||
let isCorrect = true;
|
||||
if (valdata.length) {
|
||||
for (let i = 0; i < valdata.length; i++) {
|
||||
if(valdata3){
|
||||
if (valdata3) {
|
||||
isCorrect = false;
|
||||
callback(new Error('请输入正确的IP地址'));
|
||||
}else{
|
||||
} else {
|
||||
if (regexp.test(valdata) == false) {
|
||||
isCorrect = false;
|
||||
callback(new Error('请输入正确的IP地址'));
|
||||
}else{
|
||||
} else {
|
||||
if (!Number(valdata2)) {
|
||||
// callback(new Error('请输入整数，值为[1,32]'));
|
||||
isCorrect = false;
|
||||
|
|
@ -299,18 +308,17 @@ export default {
|
|||
} else {
|
||||
const re = /^[0-9]*[1-9][0-9]*$/;
|
||||
const rsCheck = re.test(valdata2);
|
||||
if (valdata2 < 1 || valdata2 > 32|| !rsCheck) {
|
||||
if (valdata2 < 1 || valdata2 > 32 || !rsCheck) {
|
||||
callback(new Error('请输入整数，值为[1,32]'));
|
||||
isCorrect = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
let metric = (rule, value, callback) =>{
|
||||
};
|
||||
let metric = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('输入不可以为空'));
|
||||
}
|
||||
|
|
@ -327,25 +335,40 @@ export default {
|
|||
}
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
dhcp4:false,
|
||||
dhcp4: false,
|
||||
columnLabel: '', //要增加的列名
|
||||
columnPropIndex: 0, //列属性自增
|
||||
columnData: [],//列标题数组
|
||||
columnData: [], //列标题数组
|
||||
rules: {
|
||||
gateway4: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
|
||||
via: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
|
||||
gateway4: [
|
||||
{
|
||||
required: true,
|
||||
pattern:
|
||||
/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,
|
||||
message: '请输入正确的IP地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
via: [
|
||||
{
|
||||
required: true,
|
||||
pattern:
|
||||
/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,
|
||||
message: '请输入正确的IP地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// via:[{ required: true, validator: validateIPAddress, trigger: "blur" }]
|
||||
addressDNS:[{ required: true, validator: validateIPAddress, trigger: "blur" }],
|
||||
address:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
|
||||
to:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
|
||||
metric:[{ required: true, validator: metric, trigger: "blur" }],
|
||||
addressDNS: [{ required: true, validator: validateIPAddress, trigger: 'blur' }],
|
||||
address: [{ required: true, validator: validateIPAddressYes, trigger: 'blur' }],
|
||||
to: [{ required: true, validator: validateIPAddressYes, trigger: 'blur' }],
|
||||
metric: [{ required: true, validator: metric, trigger: 'blur' }]
|
||||
},
|
||||
|
||||
|
||||
optionsa:[
|
||||
optionsa: [
|
||||
{
|
||||
value: '1',
|
||||
label: '全局'
|
||||
|
|
@ -355,30 +378,30 @@ export default {
|
|||
{
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
to: 'e.g.10.0.0.0/8',
|
||||
via: 'e.g.192.168.0.1',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
to: 'e.g.10.0.0.0/8',
|
||||
via: 'e.g.192.168.0.1',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
to: 'e.g.10.0.0.0/8',
|
||||
via: 'e.g.192.168.0.1',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
to: 'e.g.10.0.0.0/8',
|
||||
via: 'e.g.192.168.0.1',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
sizeForm: {
|
||||
|
|
@ -398,16 +421,16 @@ export default {
|
|||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'NO',
|
||||
status: 'NO',
|
||||
// mtu:'00:11:14:1a:62:fe',
|
||||
// mac:'00:11:14:1a:62:fe',
|
||||
// moren:'e.g.1.0.0.1',
|
||||
// speed:'1000',
|
||||
gateway4: '',
|
||||
mtu:'',
|
||||
mac:'',
|
||||
moren:'',
|
||||
speed:'',
|
||||
mtu: '',
|
||||
mac: '',
|
||||
moren: '',
|
||||
speed: '',
|
||||
tableRouter: [
|
||||
// {
|
||||
// name: 'Router0',
|
||||
|
|
@ -430,7 +453,6 @@ export default {
|
|||
// address: '',
|
||||
// },
|
||||
// {
|
||||
|
||||
// id:'',
|
||||
// address: '',
|
||||
// },
|
||||
|
|
@ -448,20 +470,20 @@ export default {
|
|||
// id:'',
|
||||
// address: '',
|
||||
// }
|
||||
],
|
||||
]
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: '',
|
||||
label: ''
|
||||
},
|
||||
}
|
||||
// {
|
||||
// value: 'wlan0',
|
||||
// label: 'wlan0'
|
||||
// }
|
||||
],
|
||||
//数据获取
|
||||
netWork:[
|
||||
netWork: [
|
||||
{
|
||||
name: '',
|
||||
region: '00:11:14:1a:62:fe',
|
||||
|
|
@ -480,11 +502,11 @@ export default {
|
|||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'YES',
|
||||
mtu:'00:11:14:1a:62:fe',
|
||||
mac:'00:11:14:1a:62:fe',
|
||||
moren:'e.g.1.0.0.1',
|
||||
speed:'1000'
|
||||
status: 'YES',
|
||||
mtu: '00:11:14:1a:62:fe',
|
||||
mac: '00:11:14:1a:62:fe',
|
||||
moren: 'e.g.1.0.0.1',
|
||||
speed: '1000'
|
||||
},
|
||||
{
|
||||
name: 'wlan0',
|
||||
|
|
@ -504,35 +526,35 @@ export default {
|
|||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'YES',
|
||||
mtu:'00:11:14:1a:62:fe',
|
||||
mac:'00:11:14:1a:62:fe',
|
||||
moren:'e.g.1.0.0.1',
|
||||
speed:'1000'
|
||||
status: 'YES',
|
||||
mtu: '00:11:14:1a:62:fe',
|
||||
mac: '00:11:14:1a:62:fe',
|
||||
moren: 'e.g.1.0.0.1',
|
||||
speed: '1000'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
// agreement: 'NO',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.50.10/24',
|
||||
id: '',
|
||||
address: '192.168.50.10/24'
|
||||
// term: '永久',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
id: '',
|
||||
address: '192.168.1.5/24'
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
id: '',
|
||||
address: '192.168.1.5/24'
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
}
|
||||
|
|
@ -541,66 +563,64 @@ export default {
|
|||
{
|
||||
// agreement: 'NO',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.50.10/24',
|
||||
id: '',
|
||||
address: '192.168.50.10/24'
|
||||
// term: '永久',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
id: '',
|
||||
address: '192.168.1.5/24'
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
}
|
||||
],
|
||||
tableDataPanduan:[],
|
||||
optionsData:'eth0',
|
||||
disable:false, //权限禁用
|
||||
tableDataPanduan: [],
|
||||
optionsData: 'eth0',
|
||||
disable: false //权限禁用
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.createMqtt()
|
||||
this.createMqtt();
|
||||
setTimeout(() => {
|
||||
this.publishClient()
|
||||
}, 1000 * 3 );
|
||||
},
|
||||
this.publishClient();
|
||||
}, 1000 * 3);
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.getItem('roleName') == '系统管理员') {
|
||||
this.disable = false
|
||||
}else{
|
||||
this.disable = true
|
||||
this.disable = false;
|
||||
} else {
|
||||
this.disable = true;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
//点击保存
|
||||
commit(tableRouter,tableData,tableDataDNS,sizeForm){
|
||||
console.log("tableData",tableData)
|
||||
console.log("tableDataDNS",tableDataDNS)
|
||||
console.log("sizeForm",sizeForm)
|
||||
var tableRouterN = tableRouter.map(value => {
|
||||
return value.to+','+value.via+','+value.metric
|
||||
})
|
||||
var tableDataN = tableData.map(item => {
|
||||
return item.address
|
||||
})
|
||||
var tableDataDNSN = tableDataDNS.map(item => {
|
||||
return item.address
|
||||
})
|
||||
commit(tableRouter, tableData, tableDataDNS, sizeForm) {
|
||||
console.log('tableData', tableData);
|
||||
console.log('tableDataDNS', tableDataDNS);
|
||||
console.log('sizeForm', sizeForm);
|
||||
var tableRouterN = tableRouter.map((value) => {
|
||||
return value.to + ',' + value.via + ',' + value.metric;
|
||||
});
|
||||
var tableDataN = tableData.map((item) => {
|
||||
return item.address;
|
||||
});
|
||||
var tableDataDNSN = tableDataDNS.map((item) => {
|
||||
return item.address;
|
||||
});
|
||||
|
||||
var ner = {
|
||||
type:"netplanSet",
|
||||
ethName:sizeForm.name,
|
||||
type: 'netplanSet',
|
||||
ethName: sizeForm.name,
|
||||
dhcp4: this.dhcp4,
|
||||
addresses:tableDataN,//静态地址
|
||||
gateway4:sizeForm.gateway4,
|
||||
nameservers:tableDataDNSN,//DNS
|
||||
routes:tableRouterN//静态路由
|
||||
}
|
||||
addresses: tableDataN, //静态地址
|
||||
gateway4: sizeForm.gateway4,
|
||||
nameservers: tableDataDNSN, //DNS
|
||||
routes: tableRouterN //静态路由
|
||||
};
|
||||
this.$confirm('此操作将重新设置网络, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -611,9 +631,9 @@ export default {
|
|||
type: 'success',
|
||||
message: '设置成功!'
|
||||
});
|
||||
console.log("JSON.stringify(ner)",JSON.stringify(ner))
|
||||
window.publish('Contorl_client',JSON.stringify(ner));
|
||||
this.sizeForm={
|
||||
console.log('JSON.stringify(ner)', JSON.stringify(ner));
|
||||
window.publish('Contorl_client', JSON.stringify(ner));
|
||||
this.sizeForm = {
|
||||
name: '',
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
|
|
@ -630,16 +650,16 @@ export default {
|
|||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'NO',
|
||||
status: 'NO',
|
||||
gateway4: '',
|
||||
mtu:'',
|
||||
mac:'',
|
||||
moren:'',
|
||||
speed:'',
|
||||
mtu: '',
|
||||
mac: '',
|
||||
moren: '',
|
||||
speed: '',
|
||||
tableRouter: [],
|
||||
tableData: [],
|
||||
tableDataDNS: [],
|
||||
}
|
||||
tableDataDNS: []
|
||||
};
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
|
@ -648,7 +668,7 @@ export default {
|
|||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
this.publishClient()
|
||||
this.publishClient();
|
||||
}, 5000);
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -664,13 +684,15 @@ export default {
|
|||
const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
for (let key in circle) {
|
||||
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
|
||||
}else{
|
||||
} else {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
for (let key in circle) {
|
||||
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
|
||||
|
|
@ -682,40 +704,43 @@ export default {
|
|||
this.sizeForm.tableRouter.splice(scope.$index, 1);
|
||||
},
|
||||
//添加行静态地址
|
||||
addRowsTableData(){
|
||||
addRowsTableData() {
|
||||
const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
for (let key in circle) {
|
||||
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
// this.sizeForm.tableData.splice(this.sizeForm.tableData.length-1, 0, newObj);
|
||||
this.sizeForm.tableData.splice(this.sizeForm.tableData.length, 0, newObj);
|
||||
}else {
|
||||
this.sizeForm.tableData.push({address:''});
|
||||
} else {
|
||||
this.sizeForm.tableData.push({ address: '' });
|
||||
}
|
||||
},
|
||||
deleteRowsTableData(scope){
|
||||
deleteRowsTableData(scope) {
|
||||
this.sizeForm.tableData.splice(scope.$index, 1);
|
||||
},
|
||||
//添加DNS
|
||||
addRowsDNS(){
|
||||
addRowsDNS() {
|
||||
const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
for (let key in circle) {
|
||||
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
|
||||
}else{
|
||||
} else {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
for (let key in circle) {
|
||||
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
|
||||
}
|
||||
},
|
||||
deleteRowsDNS(scope){
|
||||
deleteRowsDNS(scope) {
|
||||
this.sizeForm.tableDataDNS.splice(scope.$index, 1);
|
||||
},
|
||||
/** 创建mqtt */
|
||||
|
|
@ -723,82 +748,77 @@ export default {
|
|||
// window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||||
//创建链接，接收数据
|
||||
var topicSends = ['Contorl_server'];
|
||||
window.PubScribe(topicSends,-1,this.realInfo);
|
||||
|
||||
window.PubScribe(topicSends, -1, this.realInfo);
|
||||
},
|
||||
publishClient(){
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||||
publishClient() {
|
||||
window.publish('Contorl_client', JSON.stringify({ type: 'getNet' }));
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
case "Contorl_server":
|
||||
case 'Contorl_server':
|
||||
try {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
|
||||
if(msg.type=='getNet'){
|
||||
console.log("msg",msg)
|
||||
if (msg.type == 'getNet') {
|
||||
console.log('msg', msg);
|
||||
// const netaddres = JSON.parse(msg.netaddres)
|
||||
// console.log("netaddres",netaddres)
|
||||
// const netstates = JSON.parse(msg.netstates)
|
||||
|
||||
this.changeNetstates(msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
this.changeNetstates(msg);
|
||||
}
|
||||
} catch (error) {}
|
||||
break;
|
||||
}
|
||||
},
|
||||
changeNetstates(msg){
|
||||
console.log("msg",msg)
|
||||
changeNetstates(msg) {
|
||||
console.log('msg', msg);
|
||||
// var optionsDataN = this.optionsData
|
||||
console.log(" msg.netstates[this.optionsData]",this.optionsData)
|
||||
if(msg.netplan[this.optionsData]!=undefined){
|
||||
this.dhcp4 = msg.netplan[this.optionsData].dhcp4||false
|
||||
console.log(' msg.netstates[this.optionsData]', this.optionsData);
|
||||
if (msg.netplan[this.optionsData] != undefined) {
|
||||
this.dhcp4 = msg.netplan[this.optionsData].dhcp4 || false;
|
||||
}
|
||||
|
||||
if(msg.netstates[this.optionsData]!=undefined){
|
||||
this.sizeForm.name = this.optionsData
|
||||
this.sizeForm.mtu = msg.netstates[this.optionsData].mtu
|
||||
var data = msg.netaddres[this.optionsData]
|
||||
this.sizeForm.speed = msg.netstates[this.optionsData].speed
|
||||
this.tableDataPanduan = []
|
||||
var optionN = Object.keys(msg.netplan)
|
||||
if (msg.netstates[this.optionsData] != undefined) {
|
||||
this.sizeForm.name = this.optionsData;
|
||||
this.sizeForm.mtu = msg.netstates[this.optionsData].mtu;
|
||||
var data = msg.netaddres[this.optionsData];
|
||||
this.sizeForm.speed = msg.netstates[this.optionsData].speed;
|
||||
this.tableDataPanduan = [];
|
||||
var optionN = Object.keys(msg.netplan);
|
||||
var optionNrr = optionN.map((value, index) => {
|
||||
return {
|
||||
value: value,
|
||||
label: value
|
||||
}
|
||||
})
|
||||
console.log("optionNrr",optionNrr)
|
||||
this.options = optionNrr
|
||||
if(msg.netstates[this.optionsData].isup==true){
|
||||
this.sizeForm.status='YES'
|
||||
}else{
|
||||
this.sizeForm.status='NO'
|
||||
};
|
||||
});
|
||||
console.log('optionNrr', optionNrr);
|
||||
this.options = optionNrr;
|
||||
if (msg.netstates[this.optionsData].isup == true) {
|
||||
this.sizeForm.status = 'YES';
|
||||
} else {
|
||||
this.sizeForm.status = 'NO';
|
||||
}
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(data[i].family==17){
|
||||
this.sizeForm.mac =data[i].address
|
||||
}else if(data[i].family==2){
|
||||
this.tableDataPanduan.push(data[i])
|
||||
if (data[i].family == 17) {
|
||||
this.sizeForm.mac = data[i].address;
|
||||
} else if (data[i].family == 2) {
|
||||
this.tableDataPanduan.push(data[i]);
|
||||
}
|
||||
}
|
||||
if(this.tableDataPanduan.length==msg.netplan[this.optionsData].addresses.length){
|
||||
for (let i = 0;i < this.tableDataPanduan.length; i++) {
|
||||
for (let b= 0;b < msg.netplan[this.optionsData].addresses.length; b++) {
|
||||
if (this.tableDataPanduan.length == msg.netplan[this.optionsData].addresses.length) {
|
||||
for (let i = 0; i < this.tableDataPanduan.length; i++) {
|
||||
for (let b = 0; b < msg.netplan[this.optionsData].addresses.length; b++) {
|
||||
// console.log("str1",netstates.netplan.eth0.addresses[b].substring(0,netstates.netplan.eth0.addresses[b].indexOf("/")))
|
||||
var ipos = msg.netplan[this.optionsData].addresses[b].indexOf("/");//指定开始的字符串
|
||||
let str1=msg.netplan[this.optionsData].addresses[b].substring(0,ipos);
|
||||
if(this.tableDataPanduan[i].address == str1){
|
||||
|
||||
}else{
|
||||
var ipos = msg.netplan[this.optionsData].addresses[b].indexOf('/'); //指定开始的字符串
|
||||
let str1 = msg.netplan[this.optionsData].addresses[b].substring(0, ipos);
|
||||
if (this.tableDataPanduan[i].address == str1) {
|
||||
} else {
|
||||
// this.$message({
|
||||
// message: '静态地址有误',
|
||||
// type: 'warning'
|
||||
|
|
@ -807,29 +827,32 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
let addressesN = [];
|
||||
if (msg.netplan[this.optionsData].addresses && msg.netplan[this.optionsData].addresses.length > 0) {
|
||||
addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableData = addressesN
|
||||
this.sizeForm.tableData = addressesN;
|
||||
//获取静态路由
|
||||
var dataJ = msg.netplan[this.optionsData].routes
|
||||
this.sizeForm.tableRouter=[]
|
||||
for (let r= 0;r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r])
|
||||
var dataJ = msg.netplan[this.optionsData].routes;
|
||||
this.sizeForm.tableRouter = [];
|
||||
for (let r = 0; r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r]);
|
||||
}
|
||||
this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4
|
||||
this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4;
|
||||
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableDataDNS = legend
|
||||
}else {
|
||||
this.sizeForm= {
|
||||
};
|
||||
});
|
||||
this.sizeForm.tableDataDNS = legend;
|
||||
} else {
|
||||
this.sizeForm = {
|
||||
name: this.optionsData,
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
|
|
@ -838,59 +861,62 @@ export default {
|
|||
type: [],
|
||||
resource: '',
|
||||
desc: true,
|
||||
status:'NO',
|
||||
status: 'NO',
|
||||
gateway4: msg.netplan[this.optionsData].gateway4,
|
||||
mtu:'',
|
||||
mac:'',
|
||||
moren:'',
|
||||
speed:'',
|
||||
}
|
||||
mtu: '',
|
||||
mac: '',
|
||||
moren: '',
|
||||
speed: ''
|
||||
};
|
||||
//获取静态路由
|
||||
var dataJ = msg.netplan[this.optionsData].routes
|
||||
this.sizeForm.tableRouter=[]
|
||||
for (let r= 0;r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r])
|
||||
var dataJ = msg.netplan[this.optionsData].routes;
|
||||
this.sizeForm.tableRouter = [];
|
||||
for (let r = 0; r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r]);
|
||||
}
|
||||
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
let addressesN = [];
|
||||
if (msg.netplan[this.optionsData].addresses && msg.netplan[this.optionsData].addresses.length > 0) {
|
||||
addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableData = addressesN
|
||||
|
||||
this.sizeForm.tableData = addressesN;
|
||||
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
};
|
||||
});
|
||||
this.sizeForm.tableDataDNS = legend;
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableDataDNS = legend
|
||||
}
|
||||
|
||||
},
|
||||
changeName(val){
|
||||
console.log("val",val)
|
||||
this.sizeForm.name = val
|
||||
this.optionsData = val
|
||||
this.publishClient()
|
||||
changeName(val) {
|
||||
console.log('val', val);
|
||||
this.sizeForm.name = val;
|
||||
this.optionsData = val;
|
||||
this.publishClient();
|
||||
},
|
||||
gernerateClass(status){
|
||||
console.log("status",status)
|
||||
if(status=='YES'){
|
||||
return 'status'
|
||||
}else {
|
||||
return 'statusNo'
|
||||
gernerateClass(status) {
|
||||
console.log('status', status);
|
||||
if (status == 'YES') {
|
||||
return 'status';
|
||||
} else {
|
||||
return 'statusNo';
|
||||
}
|
||||
},
|
||||
|
||||
changeVal(val,e){
|
||||
this.sizeForm.tableData[e].disabled = false
|
||||
changeVal(val, e) {
|
||||
this.sizeForm.tableData[e].disabled = false;
|
||||
},
|
||||
changeValT(val,e){
|
||||
this.sizeForm.tableRouter[e].disabled = false
|
||||
changeValT(val, e) {
|
||||
this.sizeForm.tableRouter[e].disabled = false;
|
||||
},
|
||||
handleClick(scope,e){
|
||||
console.log(scope,'scope');
|
||||
handleClick(scope, e) {
|
||||
console.log(scope, 'scope');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -911,14 +937,14 @@ export default {
|
|||
text-align: left;
|
||||
font-size: 15px;
|
||||
}
|
||||
.formItem .el-form-item{
|
||||
.formItem .el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.tableFormItem {
|
||||
margin-bottom: 15px!important;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
.tableFormItem /deep/ .el-form-item__content{
|
||||
margin-left: 0px!important;
|
||||
.tableFormItem /deep/ .el-form-item__content {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
|
|
@ -934,16 +960,22 @@ export default {
|
|||
border-bottom: 1px solid black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-col-6{
|
||||
.el-col-6 {
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
width: 10px; height: 10px; border-radius: 50%; background: green
|
||||
.status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: green;
|
||||
}
|
||||
.statusNo{
|
||||
width: 10px; height: 10px; border-radius: 50%; background: red
|
||||
.statusNo {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue