944 lines
38 KiB
Vue
944 lines
38 KiB
Vue
<template>
|
||
<div class="content-box">
|
||
<div class="container">
|
||
<el-form ref="sizeForm" :model="sizeForm" :rules="rules" label-width="140px">
|
||
<p class="title">界面</p>
|
||
<el-form-item label="界面：" class="formItem">
|
||
<el-col :span="6">
|
||
<el-select v-model="sizeForm.name" placeholder="请选择" @change="changeName($event)">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="MAC地址：" class="formItem">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.mac" disabled></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="MTU：" class="formItem">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.mtu" disabled></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="网络速度：" class="formItem">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.speed" disabled></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<p class="title">运行状态</p>
|
||
<el-form-item label="启用：" class="formItem">
|
||
<el-col :span="0.9" style="diaplay: flex">
|
||
<div :class="gernerateClass(sizeForm.status)"></div>
|
||
</el-col>
|
||
<el-col :span="2" style="diaplay: flex">
|
||
<span style="margin-left: 10px">{{sizeForm.status}}</span>
|
||
</el-col>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="连接：">
|
||
<el-col :span="0.9" style="diaplay: flex">
|
||
<div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: green"></div>
|
||
</el-col>
|
||
<el-col :span="2" style="diaplay: flex">
|
||
<span style="margin-left: 10px">接通</span>
|
||
</el-col>
|
||
</el-form-item> -->
|
||
<div style="margin-bottom: 24px;">
|
||
<p class="title">dhcp4</p>
|
||
<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-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>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="agreement" label="DHCP">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.agreement" @change="changeVal(scope.row,scope.$index)"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="Range" label="范围">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.Range" placeholder="请选择" @change="changeVal(scope.row,scope.$index)">
|
||
<el-option v-for="item in optionsa" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="term" label="期限">
|
||
<template slot-scope="scope">
|
||
<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"
|
||
>
|
||
<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>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- <p style="margin-top: 10px" class="title">DHCP</p>
|
||
<el-form-item label="启用：">
|
||
<el-col :span="2" style="diaplay: flex">
|
||
<el-switch v-model="sizeForm.desc" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="网关：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.gateway"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="分配IP：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.ip"></el-input>
|
||
</el-col>
|
||
</el-form-item> -->
|
||
<div style="width:100%" v-if="sizeForm.desc == true">
|
||
<!-- <p class="title">静态地址</p>
|
||
<el-form-item label="IP1：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.ip1"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="IP2：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.ip2"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="IP3：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.ip3"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="IP4：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.ip4"></el-input>
|
||
</el-col>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item >
|
||
<el-col :span="6">
|
||
<el-button type="primary" size="small" @click="commit()">保存</el-button>
|
||
</el-col>
|
||
</el-form-item> -->
|
||
<p class="title">默认网关</p>
|
||
<el-form-item label="默认网关：" prop="gateway4" class="formItem">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.gateway4" :disabled="disable"></el-input>
|
||
</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-table :data="sizeForm.tableRouter" border style="width: 95%">
|
||
<!-- <el-table-column prop="name" label="名称">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.name" @change="changeValT(scope.row,scope.$index)"></el-input>
|
||
</template>
|
||
</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-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>
|
||
</template>
|
||
</el-table-column>
|
||
<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>
|
||
</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>
|
||
</template>
|
||
</el-table-column>
|
||
<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>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<p style="margin-top: 10px" class="title">DNS服务</p>
|
||
|
||
<!-- <el-form-item v-for="(item,index) in sectionals" :label="DNS"+index :key="item">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.dns1"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="DNS2：">
|
||
<el-col :span="6">
|
||
<el-input v-model="sizeForm.dns2"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="DNS3：">
|
||
<el-col :span="6">
|
||
<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-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>
|
||
</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-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- <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-col>
|
||
</el-form-item> -->
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
data() {
|
||
let validateIPAddress = (rule, value, callback) => {
|
||
if (value == null) {
|
||
return callback(new Error('IP地址不能为空'));
|
||
}
|
||
let regexp = /^((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}$/;
|
||
let valdata = value.split(',');
|
||
let isCorrect = true;
|
||
if (valdata.length) {
|
||
for (let i = 0; i < valdata.length; i++) {
|
||
if (regexp.test(valdata[i]) == false) {
|
||
isCorrect = false;
|
||
}
|
||
}
|
||
}
|
||
if (!isCorrect) {
|
||
callback(new Error('请输入正确的IP地址'));
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
let validateIPAddressYes = (rule, value, callback) => {
|
||
if (value == null) {
|
||
return callback(new Error('IP地址不能为空'));
|
||
}
|
||
let regexp = /^((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}$/;
|
||
// value.split("/")[0]
|
||
let valdata = value.split('/')[0];
|
||
let valdata2 = value.split('/')[1];
|
||
let valdata3 = value.split('/')[2];
|
||
let isCorrect = true;
|
||
if (valdata.length) {
|
||
for (let i = 0; i < valdata.length; i++) {
|
||
if(valdata3){
|
||
isCorrect = false;
|
||
callback(new Error('请输入正确的IP地址'));
|
||
}else{
|
||
if (regexp.test(valdata) == false) {
|
||
isCorrect = false;
|
||
callback(new Error('请输入正确的IP地址'));
|
||
}else{
|
||
if (!Number(valdata2)) {
|
||
// callback(new Error('请输入整数，值为[1,32]'));
|
||
isCorrect = false;
|
||
callback(new Error('请输入正确的IP地址'));
|
||
} else {
|
||
const re = /^[0-9]*[1-9][0-9]*$/;
|
||
const rsCheck = re.test(valdata2);
|
||
if (valdata2 < 1 || valdata2 > 32|| !rsCheck) {
|
||
callback(new Error('请输入整数，值为[1,32]'));
|
||
isCorrect = false;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
let metric = (rule, value, callback) =>{
|
||
if (!value) {
|
||
return callback(new Error('输入不可以为空'));
|
||
}
|
||
setTimeout(() => {
|
||
if (!Number(value)) {
|
||
callback(new Error('请输入正整数'));
|
||
} else {
|
||
const re = /^[0-9]*[1-9][0-9]*$/;
|
||
const rsCheck = re.test(value);
|
||
if (!rsCheck) {
|
||
callback(new Error('请输入正整数'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}, 0);
|
||
}
|
||
|
||
return {
|
||
dhcp4:false,
|
||
columnLabel: '', //要增加的列名
|
||
columnPropIndex: 0, //列属性自增
|
||
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"}],
|
||
// 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" }],
|
||
},
|
||
|
||
|
||
optionsa:[
|
||
{
|
||
value: '1',
|
||
label: '全局'
|
||
}
|
||
],
|
||
tableRouter: [
|
||
{
|
||
name: 'Router0',
|
||
metric: '',
|
||
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
|
||
},
|
||
{
|
||
name: 'Router0',
|
||
metric: '',
|
||
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
|
||
}
|
||
],
|
||
sizeForm: {
|
||
name: '',
|
||
region: '00:11:14:1a:62:fe',
|
||
MTU: '1500',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: true,
|
||
ip: '192.168.1.5/24',
|
||
ip1: '192.168.50.10/24',
|
||
ip2: 'e.g.192.168.50.10/24',
|
||
ip3: 'e.g.192.168.50.10/24',
|
||
ip4: 'e.g.192.168.50.10/24',
|
||
dns1: 'e.g.1.1.1.1',
|
||
dns2: 'e.g.1.0.0.1',
|
||
dns3: 'e.g.1.0.0.1',
|
||
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:'',
|
||
tableRouter: [
|
||
// {
|
||
// name: 'Router0',
|
||
// metric: '',
|
||
// to:'',
|
||
// via:'',
|
||
// disabled:true
|
||
// },
|
||
// {
|
||
// name: 'Router0',
|
||
// metric: '',
|
||
// to:'',
|
||
// via:'',
|
||
// disabled:true
|
||
// },
|
||
],
|
||
tableData: [
|
||
// {
|
||
// id:'',
|
||
// address: '',
|
||
// },
|
||
// {
|
||
|
||
// id:'',
|
||
// address: '',
|
||
// },
|
||
// {
|
||
// id:'',
|
||
// address: '',
|
||
// }
|
||
],
|
||
tableDataDNS: [
|
||
// {
|
||
// id:'',
|
||
// address: '',
|
||
// },
|
||
// {
|
||
// id:'',
|
||
// address: '',
|
||
// }
|
||
],
|
||
},
|
||
options: [
|
||
{
|
||
value: '',
|
||
label: ''
|
||
},
|
||
// {
|
||
// value: 'wlan0',
|
||
// label: 'wlan0'
|
||
// }
|
||
],
|
||
//数据获取
|
||
netWork:[
|
||
{
|
||
name: '',
|
||
region: '00:11:14:1a:62:fe',
|
||
MTU: '1500',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: true,
|
||
ip: '192.168.1.5/24',
|
||
gateway4: '192.168.1.5',
|
||
ip1: '192.168.50.10/24',
|
||
ip2: 'e.g.192.168.50.10/24',
|
||
ip3: 'e.g.192.168.50.10/24',
|
||
ip4: 'e.g.192.168.50.10/24',
|
||
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'
|
||
},
|
||
{
|
||
name: 'wlan0',
|
||
region: '00:11:14:1a:62:fe',
|
||
MTU: '1500',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: true,
|
||
ip: '192.168.1.5/24',
|
||
gateway4: '192.168.1.5',
|
||
ip1: '192.168.50.10/24',
|
||
ip2: 'e.g.192.168.50.10/24',
|
||
ip3: 'e.g.192.168.50.10/24',
|
||
ip4: 'e.g.192.168.50.10/24',
|
||
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'
|
||
}
|
||
],
|
||
tableData: [
|
||
{
|
||
// agreement: 'NO',
|
||
// Range: '1',
|
||
id:'',
|
||
address: '192.168.50.10/24',
|
||
// term: '永久',
|
||
// disabled:true
|
||
},
|
||
{
|
||
// agreement: 'YES',
|
||
// Range: '1',
|
||
id:'',
|
||
address: '192.168.1.5/24',
|
||
// term: '17小时',
|
||
// disabled:true
|
||
},
|
||
{
|
||
// agreement: 'YES',
|
||
// Range: '1',
|
||
id:'',
|
||
address: '192.168.1.5/24',
|
||
// term: '17小时',
|
||
// disabled:true
|
||
}
|
||
],
|
||
tableDataDNS: [
|
||
{
|
||
// agreement: 'NO',
|
||
// Range: '1',
|
||
id:'',
|
||
address: '192.168.50.10/24',
|
||
// term: '永久',
|
||
// disabled:true
|
||
},
|
||
{
|
||
// agreement: 'YES',
|
||
// Range: '1',
|
||
id:'',
|
||
address: '192.168.1.5/24',
|
||
// term: '17小时',
|
||
// disabled:true
|
||
}
|
||
],
|
||
tableDataPanduan:[],
|
||
optionsData:'eth0',
|
||
disable:false, //权限禁用
|
||
};
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
created() {
|
||
this.createMqtt()
|
||
setTimeout(() => {
|
||
this.publishClient()
|
||
}, 1000 * 3 );
|
||
},
|
||
mounted() {
|
||
if (localStorage.getItem('roleName') == '系统管理员') {
|
||
this.disable = false
|
||
}else{
|
||
this.disable = true
|
||
}
|
||
},
|
||
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
|
||
})
|
||
|
||
var ner = {
|
||
type:"netplanSet",
|
||
ethName:sizeForm.name,
|
||
dhcp4: this.dhcp4,
|
||
addresses:tableDataN,//静态地址
|
||
gateway4:sizeForm.gateway4,
|
||
nameservers:tableDataDNSN,//DNS
|
||
routes:tableRouterN//静态路由
|
||
}
|
||
this.$confirm('此操作将重新设置网络, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '设置成功!'
|
||
});
|
||
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',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: true,
|
||
ip: '192.168.1.5/24',
|
||
ip1: '192.168.50.10/24',
|
||
ip2: 'e.g.192.168.50.10/24',
|
||
ip3: 'e.g.192.168.50.10/24',
|
||
ip4: 'e.g.192.168.50.10/24',
|
||
dns1: 'e.g.1.1.1.1',
|
||
dns2: 'e.g.1.0.0.1',
|
||
dns3: 'e.g.1.0.0.1',
|
||
status:'NO',
|
||
gateway4: '',
|
||
mtu:'',
|
||
mac:'',
|
||
moren:'',
|
||
speed:'',
|
||
tableRouter: [],
|
||
tableData: [],
|
||
tableDataDNS: [],
|
||
}
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
setTimeout(() => {
|
||
loading.close();
|
||
this.publishClient()
|
||
}, 5000);
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消'
|
||
});
|
||
});
|
||
//
|
||
},
|
||
//添加行静态路由
|
||
addRows() {
|
||
const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象
|
||
if (circle) {
|
||
const newObj = {};
|
||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||
newObj[key] = '';
|
||
}
|
||
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
|
||
}else{
|
||
const newObj = {};
|
||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||
newObj[key] = '';
|
||
}
|
||
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
|
||
}
|
||
},
|
||
|
||
//删除行静态路由
|
||
deleteRows(scope) {
|
||
this.sizeForm.tableRouter.splice(scope.$index, 1);
|
||
},
|
||
//添加行静态地址
|
||
addRowsTableData(){
|
||
const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象
|
||
if (circle) {
|
||
const 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);
|
||
}
|
||
},
|
||
deleteRowsTableData(scope){
|
||
this.sizeForm.tableData.splice(scope.$index, 1);
|
||
},
|
||
//添加DNS
|
||
addRowsDNS(){
|
||
const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象
|
||
if (circle) {
|
||
const newObj = {};
|
||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||
newObj[key] = '';
|
||
}
|
||
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
|
||
}else{
|
||
const newObj = {};
|
||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||
newObj[key] = '';
|
||
}
|
||
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
|
||
}
|
||
},
|
||
deleteRowsDNS(scope){
|
||
this.sizeForm.tableDataDNS.splice(scope.$index, 1);
|
||
},
|
||
/** 创建mqtt */
|
||
createMqtt() {
|
||
// window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||
//创建链接，接收数据
|
||
var topicSends = ['Contorl_server'];
|
||
window.PubScribe(topicSends,-1,this.realInfo);
|
||
|
||
},
|
||
publishClient(){
|
||
window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
// console.log("topic",topic)
|
||
switch (topic) {
|
||
case "Contorl_server":
|
||
try {
|
||
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)
|
||
// const netaddres = JSON.parse(msg.netaddres)
|
||
// console.log("netaddres",netaddres)
|
||
// const netstates = JSON.parse(msg.netstates)
|
||
|
||
this.changeNetstates(msg)
|
||
}
|
||
|
||
} catch (error) {
|
||
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
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
|
||
}
|
||
|
||
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'
|
||
}
|
||
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(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{
|
||
// this.$message({
|
||
// message: '静态地址有误',
|
||
// type: 'warning'
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||
return {
|
||
address: value,
|
||
id: index
|
||
}
|
||
})
|
||
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])
|
||
}
|
||
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= {
|
||
name: this.optionsData,
|
||
region: '00:11:14:1a:62:fe',
|
||
MTU: '1500',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: true,
|
||
status:'NO',
|
||
gateway4: msg.netplan[this.optionsData].gateway4,
|
||
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 addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||
return {
|
||
address: value,
|
||
id: index
|
||
}
|
||
})
|
||
this.sizeForm.tableData = addressesN
|
||
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
|
||
return {
|
||
address: value,
|
||
id: index
|
||
}
|
||
})
|
||
this.sizeForm.tableDataDNS = legend
|
||
}
|
||
|
||
},
|
||
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'
|
||
}
|
||
},
|
||
|
||
changeVal(val,e){
|
||
this.sizeForm.tableData[e].disabled = false
|
||
},
|
||
changeValT(val,e){
|
||
this.sizeForm.tableRouter[e].disabled = false
|
||
},
|
||
handleClick(scope,e){
|
||
console.log(scope,'scope');
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.test-div i {
|
||
font-size: 25px;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.formItem /deep/ .el-form-item__content {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
}
|
||
.formItem /deep/ .el-form-item__label {
|
||
text-align: left;
|
||
font-size: 15px;
|
||
}
|
||
.formItem .el-form-item{
|
||
margin-bottom: 15px;
|
||
}
|
||
.tableFormItem {
|
||
margin-bottom: 15px!important;
|
||
}
|
||
.tableFormItem /deep/ .el-form-item__content{
|
||
margin-left: 0px!important;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
.title {
|
||
width: 95%;
|
||
font-size: 25px;
|
||
text-align: left;
|
||
border-bottom: 1px solid black;
|
||
margin-bottom: 20px;
|
||
}
|
||
.el-col-6{
|
||
padding-left: 0;
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
.status{
|
||
width: 10px; height: 10px; border-radius: 50%; background: green
|
||
}
|
||
.statusNo{
|
||
width: 10px; height: 10px; border-radius: 50%; background: red
|
||
}
|
||
</style>
|
||
|