394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<!-- 斥候IP设置——无线网关页面 -->
|
||
<template>
|
||
<div v-loading="loading">
|
||
<div class="gateway" :style="$i18n.locale==='zh'?'height:450px':''" v-show="isShow">
|
||
<div class="title">
|
||
<p class="title_l">{{ $t('wirelessgatewayip.title') }}</p>
|
||
<p class="title_center" v-if="$i18n.locale==='en'">{{ $t('wirelessgatewayip.prompt') }}</p>
|
||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div :class="this.$i18n.locale==='zh'?'zhContent content':'content'">
|
||
<p class="zh-pro" v-if="$i18n.locale==='zh'">{{$t('wiredgatewayip.prompt')}}</p>
|
||
<el-form
|
||
:model="formData"
|
||
:label-position="labelPosition"
|
||
:rules="rules"
|
||
ref="formData"
|
||
>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item
|
||
:label="$t('wirelessgatewayip.clientSSID')"
|
||
:label-width="formLabelWidth"
|
||
prop="ippz_ssid"
|
||
>
|
||
<el-input
|
||
v-model="formData.ippz_ssid"
|
||
:placeholder="$t('Please')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item :label="$t('wirelessgatewayip.certificationMethod')" :label-width="formLabelWidth">
|
||
<el-select v-model="formData.ippz_rzfs" placeholder="开放式">
|
||
<el-option
|
||
v-for="item in options1"
|
||
: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="24">
|
||
<el-form-item :label="$t('wirelessgatewayip.encryptionMethod')" :label-width="formLabelWidth">
|
||
<el-select v-model="formData.ippz_jmfs" placeholder="NONE">
|
||
<el-option
|
||
v-for="item in options2"
|
||
: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="24">
|
||
<el-form-item
|
||
:label="$t('wirelessgatewayip.password')"
|
||
:label-width="formLabelWidth"
|
||
prop="ippz_mm"
|
||
>
|
||
<el-input
|
||
v-model="formData.ippz_mm"
|
||
:placeholder="$t('Please')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="footer">
|
||
<el-button type="primary" @click="submitForm">{{ $t('save') }}</el-button>
|
||
<el-button @click="isShow = false">{{ $t('cancel') }}</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {SaveUserAnswer, GetUserAnswer, getQueryAnswer} from "@/api/user";
|
||
export default {
|
||
name: "ChiGate",
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
user_id: "",
|
||
formData: {
|
||
ippz_ssid: "",
|
||
ippz_rzfs: "", //答案：WPA2-PSK
|
||
ippz_jmfs: "", //答案：AES
|
||
ippz_mm: "",
|
||
step: "",
|
||
wgpz_wgmc: "",
|
||
wgpz_wgid: "",
|
||
|
||
sbpz_sbmc: "",
|
||
sbpz_kzqxy: " ",
|
||
sbpz_ip: "",
|
||
sbpz_port: "",
|
||
sbpz_czdz: "",
|
||
sbpz_lxzq: "",
|
||
sbpz_qyhmcj: "",
|
||
sbpz_qyplcj: "",
|
||
sbpz_zdplcjs: "",
|
||
sbpz_cjcgsj: "",
|
||
sbpz_zqsbonchange: "",
|
||
sbpz_txsjjg: "",
|
||
sbpz_xqjcqxr: "",
|
||
sbpz_bcjcqxr: "",
|
||
|
||
cjdpz_tagid: "",
|
||
cjdpz_mc: "",
|
||
cjdpz_sjq: "",
|
||
cjdpz_jcqdz: "",
|
||
cjdpz_cjsjlx: "",
|
||
cjdpz_dxsx: "",
|
||
cjdpz_scms: "",
|
||
|
||
mqtt_ip: "",
|
||
mqtt_wgsn: "",
|
||
mqtt_port: "",
|
||
mqtt_keepalive: "",
|
||
|
||
mqtt_sssjfbzt: "",
|
||
mqtt_qos: "",
|
||
|
||
mqtt_cjd_sbmc: "",
|
||
mqtt_cjd_tagid: "",
|
||
},
|
||
options1: this.$t('wirelessgatewayip.options1'),
|
||
options2: [
|
||
{
|
||
value: "NONE",
|
||
label: "NONE",
|
||
},
|
||
{
|
||
value: "WEP40",
|
||
label: "WEP40",
|
||
},
|
||
{
|
||
value: "WEP104",
|
||
label: "WEP104",
|
||
},
|
||
{
|
||
value: "AES",
|
||
label: "AES",
|
||
},
|
||
],
|
||
labelPosition: "left",
|
||
formLabelWidth: this.$i18n.locale === 'zh'?'160px':'116px',
|
||
value: "测试",
|
||
count: 0,
|
||
isShow: true,
|
||
rules: {
|
||
ippz_ssid: [
|
||
{ required: true, message: this.$t('wirelessgatewayip.rules.ippz_wifi_ssid'), trigger: "blur" },
|
||
],
|
||
ippz_mm: [{ required: true, message: this.$t('wirelessgatewayip.rules.ippz_wifi_mm'), trigger: "blur" }],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.user_id = window.location.href.split("?")[1];
|
||
},
|
||
methods: {
|
||
// 登陆时进行校验
|
||
submitForm() {
|
||
this.$refs["formData"].validate((valid) => {
|
||
if (valid) {
|
||
this.saveGate();
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
async saveGate() {
|
||
// console.log(this.formData);
|
||
let res = await SaveUserAnswer({
|
||
mark: "CHGYWG_wx",
|
||
user_id: this.user_id,
|
||
// user_id: "USER202307301109254198",
|
||
mark_value: JSON.stringify(this.formData),
|
||
step: this.step,
|
||
});
|
||
// console.log(res);
|
||
if (res.data.state) {
|
||
this.$message({
|
||
message: "保存成功",
|
||
type: "success",
|
||
});
|
||
// console.log(res);
|
||
// alert(JSON.stringify(res.data.data.mark_value));
|
||
} else {
|
||
this.$message({
|
||
message: `保存失败,原因是${res.data.message}`,
|
||
type: "error",
|
||
});
|
||
}
|
||
},
|
||
async getUserAnswer() {
|
||
this.loading = true;
|
||
let { data } = await GetUserAnswer({
|
||
mark: "CHGYWG_wx",
|
||
user_id: this.user_id,
|
||
// user_id: "USER202307301109254198",
|
||
});
|
||
this.loading = false;
|
||
// alert(JSON.stringify(data.data.mark_value));
|
||
if (data.data && data.state) {
|
||
// console.log(JSON.parse(data.data.mark_value));
|
||
if (data.data.step) {
|
||
this.step = data.data.step;
|
||
}
|
||
let obj = JSON.parse(data.data.mark_value);
|
||
if (obj.ippz_rzfs) {
|
||
this.formData.ippz_rzfs = obj.ippz_rzfs;
|
||
this.formData.ippz_jmfs = obj.ippz_jmfs;
|
||
}
|
||
this.formData.ippz_ssid = obj.ippz_ssid;
|
||
// alert(this.formData.ippz_ssid);
|
||
this.formData.ippz_mm = obj.ippz_mm;
|
||
this.formData.wgpz_wgmc = obj.wgpz_wgmc;
|
||
this.formData.wgpz_wgid = obj.wgpz_wgid;
|
||
this.formData.sbpz_sbmc = obj.sbpz_sbmc;
|
||
this.formData.sbpz_kzqxy = obj.sbpz_kzqxy;
|
||
this.formData.sbpz_ip = obj.sbpz_ip;
|
||
this.formData.sbpz_port = obj.sbpz_port;
|
||
this.formData.sbpz_czdz = obj.sbpz_czdz;
|
||
this.formData.sbpz_lxzq = obj.sbpz_lxzq;
|
||
this.formData.sbpz_qyhmcj = obj.sbpz_qyhmcj;
|
||
this.formData.sbpz_qyplcj = obj.sbpz_qyplcj;
|
||
this.formData.sbpz_zdplcjs = obj.sbpz_zdplcjs;
|
||
this.formData.sbpz_cjcgsj = obj.sbpz_cjcgsj;
|
||
this.formData.sbpz_zqsbonchange = obj.sbpz_zqsbonchange;
|
||
this.formData.sbpz_txsjjg = obj.sbpz_txsjjg;
|
||
this.formData.sbpz_xqjcqxr = obj.sbpz_xqjcqxr;
|
||
this.formData.sbpz_bcjcqxr = obj.sbpz_bcjcqxr;
|
||
this.formData.cjdpz_tagid = obj.cjdpz_tagid;
|
||
this.formData.cjdpz_mc = obj.cjdpz_mc;
|
||
this.formData.cjdpz_sjq = obj.cjdpz_sjq;
|
||
this.formData.cjdpz_jcqdz = obj.cjdpz_jcqdz;
|
||
this.formData.cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
|
||
this.formData.cjdpz_dxsx = obj.cjdpz_dxsx;
|
||
this.formData.cjdpz_scms = obj.cjdpz_scms;
|
||
this.formData.mqtt_ip = obj.mqtt_ip;
|
||
this.formData.mqtt_wgsn = obj.mqtt_wgsn;
|
||
this.formData.mqtt_port = obj.mqtt_port;
|
||
this.formData.mqtt_keepalive = obj.mqtt_keepalive;
|
||
this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
|
||
this.formData.mqtt_qos = obj.mqtt_qos;
|
||
this.formData.mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
|
||
this.formData.mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
|
||
}else{
|
||
getQueryAnswer({
|
||
mark: "CHGYWG_wx",
|
||
user_id: this.user_id
|
||
}).then(res => {
|
||
if (res.data.data.step) {
|
||
this.step = res.data.data.step;
|
||
}
|
||
let obj = JSON.parse(res.data.data.r3);
|
||
if (obj.ippz_rzfs) {
|
||
this.formData.ippz_rzfs = obj.ippz_rzfs;
|
||
this.formData.ippz_jmfs = obj.ippz_jmfs;
|
||
}
|
||
this.formData.ippz_ssid = obj.ippz_ssid;
|
||
// alert(this.formData.ippz_ssid);
|
||
this.formData.ippz_mm = obj.ippz_mm;
|
||
this.formData.wgpz_wgmc = obj.wgpz_wgmc;
|
||
this.formData.wgpz_wgid = obj.wgpz_wgid;
|
||
this.formData.sbpz_sbmc = obj.sbpz_sbmc;
|
||
this.formData.sbpz_kzqxy = obj.sbpz_kzqxy;
|
||
this.formData.sbpz_ip = obj.sbpz_ip;
|
||
this.formData.sbpz_port = obj.sbpz_port;
|
||
this.formData.sbpz_czdz = obj.sbpz_czdz;
|
||
this.formData.sbpz_lxzq = obj.sbpz_lxzq;
|
||
this.formData.sbpz_qyhmcj = obj.sbpz_qyhmcj;
|
||
this.formData.sbpz_qyplcj = obj.sbpz_qyplcj;
|
||
this.formData.sbpz_zdplcjs = obj.sbpz_zdplcjs;
|
||
this.formData.sbpz_cjcgsj = obj.sbpz_cjcgsj;
|
||
this.formData.sbpz_zqsbonchange = obj.sbpz_zqsbonchange;
|
||
this.formData.sbpz_txsjjg = obj.sbpz_txsjjg;
|
||
this.formData.sbpz_xqjcqxr = obj.sbpz_xqjcqxr;
|
||
this.formData.sbpz_bcjcqxr = obj.sbpz_bcjcqxr;
|
||
this.formData.cjdpz_tagid = obj.cjdpz_tagid;
|
||
this.formData.cjdpz_mc = obj.cjdpz_mc;
|
||
this.formData.cjdpz_sjq = obj.cjdpz_sjq;
|
||
this.formData.cjdpz_jcqdz = obj.cjdpz_jcqdz;
|
||
this.formData.cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
|
||
this.formData.cjdpz_dxsx = obj.cjdpz_dxsx;
|
||
this.formData.cjdpz_scms = obj.cjdpz_scms;
|
||
this.formData.mqtt_ip = obj.mqtt_ip;
|
||
this.formData.mqtt_wgsn = obj.mqtt_wgsn;
|
||
this.formData.mqtt_port = obj.mqtt_port;
|
||
this.formData.mqtt_keepalive = obj.mqtt_keepalive;
|
||
this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
|
||
this.formData.mqtt_qos = obj.mqtt_qos;
|
||
this.formData.mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
|
||
this.formData.mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
|
||
})
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getUserAnswer();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.zh-pro{
|
||
color: rgba(189, 49, 36, 1);
|
||
margin-bottom: 15px;
|
||
}
|
||
.gateway {
|
||
position: absolute;
|
||
left: 648px;
|
||
top: 226px;
|
||
width: 470px;
|
||
height: 384px;
|
||
line-height: 20px;
|
||
background: url(../assets/image/bg.png);
|
||
background-size: 100% 100%;
|
||
// background-color: rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
border: 1px solid rgba(187, 187, 187, 1);
|
||
|
||
.el-divider--horizontal {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.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 {
|
||
color: rgb(255, 255, 255);
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
// color: rgba(111, 103, 103, 1);
|
||
}
|
||
}
|
||
|
||
/deep/ .content {
|
||
margin-left: 62px;
|
||
margin-right: 138px;
|
||
|
||
.el-input__inner {
|
||
width: 200px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
/deep/ .zhContent{
|
||
margin: 30px;
|
||
}
|
||
|
||
/deep/ .footer {
|
||
.el-button {
|
||
width: 80px;
|
||
height: 30px;
|
||
line-height: 0.5;
|
||
}
|
||
}
|
||
}
|
||
</style>
|