This commit is contained in:
lll 2023-11-07 08:27:38 +08:00
parent 35c4c58b16
commit f5a17b3395
5 changed files with 564 additions and 243 deletions

View File

@ -216,7 +216,7 @@ export default {
.el-dialog__body { .el-dialog__body {
/* border-top: 0 !important; */ /* border-top: 0 !important; */
/* background-color: rgba(19, 31, 59, 0); */ /* background-color: rgba(19, 31, 59, 0); */
color: #FFFFFF; color: #ffffff;
background-image: url(./assets/image/bg.png); background-image: url(./assets/image/bg.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -246,7 +246,7 @@ export default {
} }
.el-dialog__header { .el-dialog__header {
color: #FFFFFF; color: #ffffff;
background-image: url(./assets/image/bg.png); background-image: url(./assets/image/bg.png);
background-size: cover; background-size: cover;
} }

View File

@ -50,41 +50,99 @@
</el-select> </el-select>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="入口网关:" prop="clgl_rkwg"> <el-row>
<el-col :span="3">
<el-form-item label="入口网关:" prop="clgl_rkwg1">
<el-col :span="5"> <el-col :span="5">
<el-input v-model="clgl_rkwg1"></el-input> <el-input
v-model="ruleForm1.clgl_rkwg1"
:maxlength="3"
></el-input>
</el-col> </el-col>
<el-col :span="1">.</el-col> <el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkwg2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkwg3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkwg4"></el-input>
</el-col>
</el-form-item> </el-form-item>
<el-form-item label="出口网关:" prop="clgl_ckwg"> </el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkwg2">
<el-col :span="5"> <el-col :span="5">
<el-input v-model="clgl_ckwg1"></el-input> <el-input
v-model="ruleForm1.clgl_rkwg2"
:maxlength="3"
></el-input>
</el-col> </el-col>
<el-col :span="1">.</el-col> <el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckwg2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckwg3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckwg4"></el-input>
</el-col>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkwg3">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_rkwg3"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkwg4">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_rkwg4"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<el-form-item label="出口网关:" prop="clgl_ckwg1">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckwg1"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckwg2">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckwg2"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckwg3">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckwg3"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckwg4">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckwg4"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="协议:" prop="clgl_xy"> <el-form-item label="协议:" prop="clgl_xy">
<el-col :span="19"> <el-col :span="19">
@ -159,41 +217,99 @@
<el-input v-model="ruleForm1.clgl_mddx"></el-input> <el-input v-model="ruleForm1.clgl_mddx"></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="入口IP:" prop="clgl_rkip"> <el-row>
<el-col :span="3">
<el-form-item label="入口IP:" prop="clgl_rkip1">
<el-col :span="5"> <el-col :span="5">
<el-input v-model="clgl_rkip1" :maxlength="3"></el-input> <el-input
v-model="ruleForm1.clgl_rkip1"
:maxlength="3"
></el-input>
</el-col> </el-col>
<el-col :span="1">.</el-col> <el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkip2" :maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkip3" :maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_rkip4" :maxlength="3"></el-input>
</el-col>
</el-form-item> </el-form-item>
<el-form-item label="出口IP:" prop="clgl_ckip"> </el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkip2">
<el-col :span="5"> <el-col :span="5">
<el-input v-model="clgl_ckip1" :maxlength="3"></el-input> <el-input
v-model="ruleForm1.clgl_rkip2"
:maxlength="3"
></el-input>
</el-col> </el-col>
<el-col :span="1">.</el-col> <el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckip2" :maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckip3" :maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="clgl_ckip4" :maxlength="3"></el-input>
</el-col>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkip3">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_rkip3"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_rkip4">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_rkip4"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<el-form-item label="出口IP:" prop="clgl_ckip1">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckip1"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckip2">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckip2"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckip3">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckip3"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" prop="clgl_ckip4">
<el-col :span="5">
<el-input
v-model="ruleForm1.clgl_ckip4"
:maxlength="3"
></el-input>
</el-col>
<el-col :span="1">.</el-col>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="目的端口:" prop="clgl_mddk"> <el-form-item label="目的端口:" prop="clgl_mddk">
<el-col :span="19"> <el-col :span="19">
@ -225,7 +341,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<span>记录日志</span> <span style="color: #fff">记录日志</span>
<el-switch style="margin-left: 6%" v-model="switchvalue"> </el-switch> <el-switch style="margin-left: 6%" v-model="switchvalue"> </el-switch>
<div <div
class="title" class="title"
@ -235,7 +351,9 @@
margin-top: 10px; margin-top: 10px;
" "
> >
<h3 style="margin-top: 10px; margin-bottom: 3px">命令列表</h3> <h3 style="margin-top: 10px; margin-bottom: 3px; color: #fff">
命令列表
</h3>
<el-button @click="flag = true">新增命令</el-button> <el-button @click="flag = true">新增命令</el-button>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
@ -366,26 +484,6 @@ export default {
return { return {
switchvalue: false, switchvalue: false,
clgl_qidong: true, clgl_qidong: true,
// IP
clgl_rkip1: "",
clgl_rkip2: "",
clgl_rkip3: "",
clgl_rkip4: "",
// ip
clgl_ckip1: "",
clgl_ckip2: "",
clgl_ckip3: "",
clgl_ckip4: "",
//
clgl_rkwg1: "",
clgl_rkwg2: "",
clgl_rkwg3: "",
clgl_rkwg4: "",
//
clgl_ckwg1: "",
clgl_ckwg2: "",
clgl_ckwg3: "",
clgl_ckwg4: "",
options1: [ options1: [
{ {
label: "有线区策略", label: "有线区策略",
@ -530,6 +628,10 @@ export default {
clgl_ckwg: "", clgl_ckwg: "",
clgl_mddx: "无限区路由器", clgl_mddx: "无限区路由器",
clgl_mddk: "", clgl_mddk: "",
clgl_rkip1: "",
clgl_rkip2: "",
clgl_rkip3: "",
clgl_rkip4: "",
}, },
], ],
tableData1: [ tableData1: [
@ -560,6 +662,22 @@ export default {
clgl_wdyml: "拒绝", clgl_wdyml: "拒绝",
dlport: "", dlport: "",
wdyml: "", wdyml: "",
clgl_rkip1: "",
clgl_rkip2: "",
clgl_rkip3: "",
clgl_rkip4: "",
clgl_ckip1: "",
clgl_ckip2: "",
clgl_ckip3: "",
clgl_ckip4: "",
clgl_rkwg1: "",
clgl_rkwg2: "",
clgl_rkwg3: "",
clgl_rkwg4: "",
clgl_ckwg1: "",
clgl_ckwg2: "",
clgl_ckwg3: "",
clgl_ckwg4: "",
}, },
rules1: { rules1: {
clgl_name: [ clgl_name: [
@ -584,10 +702,166 @@ export default {
clgl_ckwk: [ clgl_ckwk: [
{ required: true, trigger: "change", message: "选择一个出口网卡" }, { required: true, trigger: "change", message: "选择一个出口网卡" },
], ],
clgl_rkip: [{ required: true, message: "IP地址不能为空" }], clgl_rkip1: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[1-9][0-9]?)$/,
},
],
clgl_rkip2: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_rkip3: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_rkip4: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckip: [ clgl_ckip1: [
{ required: true, trigger: "change", message: "IP地址不能为空" }, { required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[1-9][0-9]?)$/,
},
],
clgl_ckip2: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckip3: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckip4: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_rkwg1: [
{ trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[1-9][0-9]?)$/,
},
],
clgl_rkwg2: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_rkwg3: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_rkwg4: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckwg1: [
{ trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[1-9][0-9]?)$/,
},
],
clgl_ckwg2: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckwg3: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
],
clgl_ckwg4: [
{ required: true, trigger: "blur", message: "片段为空" },
{
min: 0,
max: 10,
message: "片段无效",
trigger: "blur",
pattern: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
},
], ],
clgl_ydx: [ clgl_ydx: [
{ required: true, trigger: "change", message: "选择一个源对象" }, { required: true, trigger: "change", message: "选择一个源对象" },
@ -715,4 +989,10 @@ export default {
height: 30px; height: 30px;
} }
} }
/deep/ .el-form-item__error {
min-width: 50px;
}
/deep/.el-col-1 {
height: 10px !important;
}
</style> </style>

View File

@ -12,10 +12,22 @@
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm"> <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc"> <el-form-item
<el-select v-model="wgpz_wgmc" placeholder="请选择" style="width: 200px;"> label="网关名称:"
<el-option v-for="item in options1" :key="item.value" :label="item.label" :label-width="formLabelWidth"
:value="item.value"> prop="wgpz_wgmc"
>
<el-select
v-model="wgpz_wgmc"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -23,17 +35,31 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid"> <el-form-item
<el-select v-model="wgpz_wgid" placeholder="请选择" style="width: 200px;"> label="网关ID:"
<el-option v-for="item in options2" :key="item.value" :label="item.label" :label-width="formLabelWidth"
:value="item.value"> prop="wgpz_wgid"
>
<el-select
v-model="wgpz_wgid"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<div class="footer"> <div class="footer">
<el-button type="primary" @click="innerVisible = true"> </el-button> <el-button type="primary" @click="innerVisible = true"
> </el-button
>
<el-button @click="isShow = false"> </el-button> <el-button @click="isShow = false"> </el-button>
</div> </div>
@ -41,10 +67,19 @@
</div> </div>
</div> </div>
<div> <div>
<el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px"> <el-dialog
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p> title="系统提示"
:visible.sync="innerVisible"
append-to-body
width="382px"
>
<p class="inner_content" style="color: #fff">
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
</p>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="innerVisible = false">确定</el-button> <el-button type="primary" @click="innerVisible = false"
>确定</el-button
>
<el-button @click="innerVisible = false"> </el-button> <el-button @click="innerVisible = false"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -54,24 +89,30 @@
<script> <script>
export default { export default {
name: 'TestChiGate', name: "TestChiGate",
data() { data() {
return { return {
options1: [{ options1: [
{
value: "有线区网关2", value: "有线区网关2",
label: "有线区网关2" label: "有线区网关2",
}, { },
{
value: "无线区网关2", value: "无线区网关2",
label: "无线区网关2" label: "无线区网关2",
}], },
options2: [{ ],
options2: [
{
value: "LAN-BOX2", value: "LAN-BOX2",
label: "LAN-BOX2" label: "LAN-BOX2",
}, { },
{
value: "WLAN-BOX2", value: "WLAN-BOX2",
label: "WLAN-BOX2" label: "WLAN-BOX2",
}], },
],
wgpz_wgmc: "有线区网关2", wgpz_wgmc: "有线区网关2",
wgpz_wgid: "LAN-BOX2", wgpz_wgid: "LAN-BOX2",
innerVisible: false, innerVisible: false,
@ -79,36 +120,40 @@ export default {
formLabelWidth: "96px", formLabelWidth: "96px",
count: 0, count: 0,
isShow: true, isShow: true,
options: [{ options: [
value: '选项1', {
label: '测试1' value: "选项1",
}, { label: "测试1",
value: '选项2', },
label: '测试2' {
}, { value: "选项2",
value: '选项3', label: "测试2",
label: '测试3' },
}, { {
value: '选项4', value: "选项3",
label: '测试4' label: "测试3",
}, { },
value: '选项5', {
label: '测试5' value: "选项4",
}], label: "测试4",
},
{
value: "选项5",
label: "测试5",
},
],
rules: { rules: {
gateway_id: [ gateway_id: [
{ required: true, message: '请输入网关ID', trigger: 'blur' }, { required: true, message: "请输入网关ID", trigger: "blur" },
], ],
gateway_name: [ gateway_name: [
{ required: true, message: '请输入网关名称', trigger: 'blur' }, { required: true, message: "请输入网关名称", trigger: "blur" },
], ],
}, },
}; };
}, },
mounted() { mounted() {},
},
methods: { methods: {
// getShow() { // getShow() {

View File

@ -236,8 +236,4 @@ export default {
.el-table { .el-table {
margin-top: 10px; margin-top: 10px;
} }
/deep/.el-form-item label {
color: red;
}
</style> </style>

View File

@ -238,7 +238,7 @@ export default {
}, },
// //
handleDelete(a, b) { handleDelete(a, b) {
this.wgwh.splice(a, 1); this.tableData.splice(a, 1);
localStorage.setItem("wgwh", JSON.stringify(this.tableData)); localStorage.setItem("wgwh", JSON.stringify(this.tableData));
this.$message({ this.$message({
message: "删除成功", message: "删除成功",