382 lines
11 KiB
Vue
382 lines
11 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">
|
|
<div class="lan">
|
|
<el-form v-loading="loading" :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
|
<el-select v-model="formData.ippz_wllx" placeholder="静态IP" style="width: 200px">
|
|
<el-option label="静态IP" value="静态IP"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_ip1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_ip2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_ip3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_ip4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_zwym1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_zwym2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_zwym3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_zwym4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_mrwg1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_mrwg2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_mrwg3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_mrwg4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="DNS:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_dns_sx1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_dns_sx2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_dns_sx3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ippz_dns_sx4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<div class="footer">
|
|
<el-button type="primary" @click="saveAll">保 存</el-button>
|
|
<el-button @click="isShow = false">取 消</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
|
export default {
|
|
name: "TestChiGate",
|
|
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
user_id: "",
|
|
formData: {
|
|
ippz_wllx: "静态IP",
|
|
ippz_ip: "",
|
|
ippz_zwym: "",
|
|
ippz_mrwg: "",
|
|
ippz_dns_sx: "",
|
|
ippz_dns_by: "",
|
|
},
|
|
ippz_ip1: "192",
|
|
ippz_ip2: "168",
|
|
ippz_ip3: "1",
|
|
ippz_ip4: "1",
|
|
ippz_zwym1: "255",
|
|
ippz_zwym2: "255",
|
|
ippz_zwym3: "255",
|
|
ippz_zwym4: "0",
|
|
ippz_mrwg1: "192",
|
|
ippz_mrwg2: "168",
|
|
ippz_mrwg3: "1",
|
|
ippz_mrwg4: "1",
|
|
ippz_dns_sx1: "8",
|
|
ippz_dns_sx2: "8",
|
|
ippz_dns_sx3: "8",
|
|
ippz_dns_sx4: "8",
|
|
|
|
ippz_dns_by1: "8",
|
|
ippz_dns_by2: "8",
|
|
ippz_dns_by3: "8",
|
|
ippz_dns_by4: "8",
|
|
radio: "1",
|
|
labelPosition: "left",
|
|
formLabelWidth: "116px",
|
|
count: 0,
|
|
isShow: true,
|
|
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' },
|
|
// ],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.GetUserAnswer();
|
|
let that = this;
|
|
window.getParameter = that.getParameter;
|
|
},
|
|
mounted() { },
|
|
|
|
methods: {
|
|
getParameter(data) {
|
|
this.user_id = data;
|
|
},
|
|
Merge(value, value1, value2, value3, value4) {
|
|
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
|
return value;
|
|
},
|
|
SliceData(value) {
|
|
let res = value.split(".");
|
|
// console.log(res);
|
|
return res;
|
|
},
|
|
// 保存数据,发送请求
|
|
async saveAll() {
|
|
// this.dialogFormVisible = false;
|
|
this.isShow = false;
|
|
this.formData.ippz_ip = this.Merge(
|
|
this.formData.ippz_ip,
|
|
this.ippz_ip1,
|
|
this.ippz_ip2,
|
|
this.ippz_ip3,
|
|
this.ippz_ip4
|
|
);
|
|
this.formData.ippz_zwym = this.Merge(
|
|
this.formData.ippz_zwym,
|
|
this.ippz_zwym1,
|
|
this.ippz_zwym2,
|
|
this.ippz_zwym3,
|
|
this.ippz_zwym4
|
|
);
|
|
this.formData.ippz_mrwg = this.Merge(
|
|
this.formData.ippz_mrwg,
|
|
this.ippz_mrwg1,
|
|
this.ippz_mrwg2,
|
|
this.ippz_mrwg3,
|
|
this.ippz_mrwg4
|
|
);
|
|
this.formData.ippz_dns_sx = this.Merge(
|
|
this.formData.ippz_dns_sx,
|
|
this.ippz_dns_sx1,
|
|
this.ippz_dns_sx2,
|
|
this.ippz_dns_sx3,
|
|
this.ippz_dns_sx4
|
|
);
|
|
this.formData.ippz_dns_by = this.Merge(
|
|
this.formData.ippz_dns_by,
|
|
this.ippz_dns_by1,
|
|
this.ippz_dns_by2,
|
|
this.ippz_dns_by3,
|
|
this.ippz_dns_by4
|
|
);
|
|
let res = await SaveUserAnswer({
|
|
mark: "CHGYWG_yx",
|
|
user_id: "USER202307301114011710",
|
|
mark_value: JSON.stringify(this.formData),
|
|
});
|
|
if (res.status == 200) {
|
|
this.$message({
|
|
message: "保存成功",
|
|
type: "success",
|
|
});
|
|
}
|
|
console.log(res);
|
|
sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
|
|
},
|
|
//读取缓存
|
|
async GetUserAnswer() {
|
|
this.loading = true;
|
|
let { data } = await GetUserAnswer({
|
|
mark: "CHGYWG_yx",
|
|
user_id: "USER202307301114011710",
|
|
});
|
|
this.loading = false;
|
|
console.log(data);
|
|
if (data.data && data.state) {
|
|
var obj = JSON.parse(data.data.mark_value);
|
|
this.formData.ippz_wllx = obj.ippz_wllx;
|
|
if (obj.ippz_ip) {
|
|
this.ippz_ip1 = obj.ippz_ip.split(".")[0];
|
|
this.ippz_ip2 = obj.ippz_ip.split(".")[1];
|
|
this.ippz_ip3 = obj.ippz_ip.split(".")[2];
|
|
this.ippz_ip4 = obj.ippz_ip.split(".")[3];
|
|
this.ippz_zwym1 = obj.ippz_zwym.split(".")[0];
|
|
this.ippz_zwym2 = obj.ippz_zwym.split(".")[1];
|
|
this.ippz_zwym3 = obj.ippz_zwym.split(".")[2];
|
|
this.ippz_zwym4 = obj.ippz_zwym.split(".")[3];
|
|
this.ippz_mrwg1 = obj.ippz_mrwg.split(".")[0];
|
|
this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
|
|
this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
|
|
this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
|
|
this.ippz_dns_sx1 = obj.ippz_dns_sx.split(".")[0];
|
|
this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
|
|
this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
|
|
this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.gateway {
|
|
position: absolute;
|
|
top: 145px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 470px;
|
|
// height:358px;
|
|
height: 458px;
|
|
// height: 725px;
|
|
line-height: 20px;
|
|
// background-color: rgba(255, 255, 255, 1);
|
|
// text-align: center;
|
|
background: url(../assets/image/bg.png);
|
|
background-size: 100% 100%;
|
|
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;
|
|
line-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);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: 0px 53px 0px 56px;
|
|
|
|
/deep/.lan {
|
|
.el-input__inner {
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.el-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.el-col-1 {
|
|
padding-left: 2px;
|
|
color: black;
|
|
text-align: left;
|
|
line-height: 15px;
|
|
height: 20px;
|
|
}
|
|
|
|
.el-col-24 {
|
|
padding-right: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .footer {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.el-button {
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 0.5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|