355 lines
14 KiB
Vue
355 lines
14 KiB
Vue
<!-- 斥候有线网关页面 -->
|
|
<template>
|
|
<div>
|
|
<el-button type="info" plain @click="getShow">斥候有线网关</el-button>
|
|
<div class="gateway" v-show="isShow">
|
|
<div class="title">
|
|
<p class="title_l">IP配置</p>
|
|
<p class="title_center">本页面涉及排错，请检查修改默认值</p>
|
|
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div class="content">
|
|
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
|
<!-- <div>
|
|
<h3 class="interface_type">接口类型</h3>
|
|
<el-radio v-model="radio" label="1">LAN</el-radio>
|
|
<el-radio v-model="radio" label="2">WAN</el-radio>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div class="lan">
|
|
<h3 class="interface_type">LAN</h3>
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="mask">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</div>
|
|
<el-divider></el-divider> -->
|
|
<div class="lan">
|
|
<!-- <h3 class="interface_type">WAN</h3> -->
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
|
<el-select v-model="value" placeholder="静态IP" style="width: 200px;">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="mask">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="网关:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="DNS:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<!-- <el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="MTU:" :label-width="formLabelWidth" prop="passage">
|
|
<el-input v-model="value" placeholder="" style="width: 200px;height: 30px;"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row> -->
|
|
<!-- <el-row>
|
|
<el-col :span="24"> <el-form-item label="二层状态联动:" :label-width="formLabelWidth">
|
|
<el-switch v-model="value1"></el-switch>
|
|
</el-form-item></el-col>
|
|
</el-row> -->
|
|
</div>
|
|
<div class="footer">
|
|
<el-button type="primary">保 存</el-button>
|
|
<el-button @click="isShow = false">取 消</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TestChiGate',
|
|
|
|
data() {
|
|
return {
|
|
value1: "",
|
|
input1: "192",
|
|
input2: "",
|
|
input3: "",
|
|
input4: "",
|
|
radio: "1",
|
|
labelPosition: "left",
|
|
formLabelWidth: "116px",
|
|
value: "测试",
|
|
count: 0,
|
|
isShow: false,
|
|
options: [{
|
|
value: '选项1',
|
|
label: '测试1'
|
|
}, {
|
|
value: '选项2',
|
|
label: '测试2'
|
|
}, {
|
|
value: '选项3',
|
|
label: '测试3'
|
|
}, {
|
|
value: '选项4',
|
|
label: '测试4'
|
|
}, {
|
|
value: '选项5',
|
|
label: '测试5'
|
|
}],
|
|
rules: {
|
|
ip: [
|
|
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
|
],
|
|
mask: [
|
|
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
|
|
],
|
|
type: [
|
|
{ required: true, message: '请输入网络类型', trigger: 'blur' },
|
|
],
|
|
// client_id: [
|
|
// { required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
|
// ],
|
|
// passage: [
|
|
// { required: true, message: '请输入通道', trigger: 'blur' },
|
|
// ],
|
|
},
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
getShow() {
|
|
this.count++;
|
|
if (this.count % 2 == 0) {
|
|
this.isShow = false;
|
|
} else {
|
|
this.isShow = true;
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.gateway {
|
|
position: absolute;
|
|
left: 394px;
|
|
top: 145px;
|
|
width: 470px;
|
|
height: 458px;
|
|
// height: 725px;
|
|
line-height: 20px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
// text-align: center;
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|
|
|
.title {
|
|
margin: 13px 6px 0px 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.title_l {
|
|
width: 53px;
|
|
height: 26px;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.title_center {
|
|
width: 288px;
|
|
height: 26px;
|
|
color: rgba(189, 49, 36, 1);
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.title_r {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
color: rgba(111, 103, 103, 1);
|
|
}
|
|
}
|
|
|
|
/deep/ .content {
|
|
margin: 0px 53px 0px 56px;
|
|
|
|
// .el-form-item {
|
|
// margin-bottom: 0px;
|
|
// }
|
|
|
|
.el-divider--horizontal {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.interface_type {
|
|
width: 80px;
|
|
height: 29px;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 20px;
|
|
margin-bottom: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 30px;
|
|
}
|
|
|
|
.lan {
|
|
.el-input__inner {
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.el-col-1 {
|
|
text-align: center;
|
|
line-height: 52px;
|
|
height: 20px;
|
|
}
|
|
|
|
.el-col-5 {
|
|
width: 43px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .footer {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.el-button {
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |