<template>
|
<div class="wifi-gateway">
|
<el-form :model="wifiForm" ref="wifiForm">
|
<div class="title form-item">网络设置</div>
|
<el-form-item class="form-item">
|
<switchBar
|
:barName="`允许外网访问`"
|
:value="wifiForm.wanEnable"
|
></switchBar>
|
</el-form-item>
|
|
<div class="block">
|
<el-form-item class="form-item">
|
<div class="item-title">名称</div>
|
<div class="inputContain">
|
<el-input
|
v-model="wifiForm.name"
|
placeholder="请输入无线名称"
|
size="small"
|
></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">密码</div>
|
<div class="inputContain">
|
<el-input
|
v-model="wifiForm.password"
|
placeholder="请输入密码"
|
size="small"
|
show-password
|
auto-complete="new-password"
|
></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">WPS加密</div>
|
<div class="inputContain">
|
<el-select
|
v-model="wifiForm.wps"
|
placeholder="请选择"
|
size="small"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in wps_option"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">授权方式</div>
|
<div class="inputContain">
|
<el-select
|
v-model="wifiForm.authType"
|
placeholder="请选择"
|
size="small"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in auth_option"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">发射功率调整</div>
|
<el-slider
|
v-model="wifiForm.powerRate"
|
id="wifiForm_frequency"
|
:min="0"
|
:max="100"
|
:show-tooltip="false"
|
></el-slider>
|
<div class="slider-info">节能</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">IP地址</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.ip"
|
@on-blur="wifiForm.ip = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">子网掩码</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.mask"
|
@on-blur="wifiForm.mask = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">网关</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.gateway"
|
@on-blur="wifiForm.gateway = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">DNS</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.dns"
|
@on-blur="wifiForm.dns = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<div class="DHCP">DHCP服务器设置</div>
|
|
<el-form-item class="form-item">
|
<div class="item-title">IP池起始地址</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.dhcpIpFrom"
|
@on-blur="wifiForm.dhcpIpFrom = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">IP池结束地址</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.dhcpIpTo"
|
@on-blur="wifiForm.dhcpIpTo = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">默认网关</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.dhcpGateway"
|
@on-blur="wifiForm.dhcpGateway = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
|
<el-form-item class="form-item">
|
<div class="item-title">DNS</div>
|
<div class="inputContain">
|
<ipInput
|
:ip="wifiForm.dhcpDns"
|
@on-blur="wifiForm.dhcpDns = arguments[0]"
|
></ipInput>
|
</div>
|
</el-form-item>
|
</div>
|
</el-form>
|
|
<div class="ok" @click="saveList">保存</div>
|
</div>
|
</template>
|
|
<script>
|
import ipInput from "../components/IPInput";
|
import switchBar from "../components/switchBar";
|
import { getWifi, saveWifi } from "@/api/system";
|
|
export default {
|
name: "wifiGateway",
|
created() {
|
this.getlist();
|
},
|
data() {
|
return {
|
accessible: false,
|
wps_option: [
|
{ label: "加密1", value: "加密1" },
|
{ label: "加密2", value: "加密2" },
|
],
|
auth_option: [
|
{ label: "授权1", value: "授权1" },
|
{ label: "授权2", value: "授权2" },
|
],
|
wifiRules: [],
|
wifiForm: {
|
wanEnable: true,
|
name: "",
|
password: "",
|
wps: "",
|
authType: "",
|
powerRate: 50,
|
ip: "",
|
mask: "",
|
gateway: "",
|
dns: "",
|
dhcpIpFrom: "",
|
dhcpIpTo: "",
|
dhcpGateway: "",
|
dhcpDns: "",
|
},
|
};
|
},
|
components: {
|
switchBar,
|
ipInput,
|
},
|
methods: {
|
async getlist() {
|
const res = await getWifi();
|
console.log(res);
|
this.wifiForm = res.data;
|
},
|
|
async saveList() {
|
this.wifiForm.powerRate = `${this.wifiForm.powerRate}`;
|
const res = await saveWifi(this.wifiForm);
|
console.log(res);
|
},
|
},
|
};
|
</script>
|
<style scoped lang="scss">
|
@import "../asset/common.scss";
|
.wifi-gateway {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.block {
|
margin-top: 20px;
|
}
|
|
.DHCP {
|
text-align: left;
|
margin: 0 auto;
|
padding-left: 20px;
|
height: 56px;
|
width: 450px;
|
line-height: 56px;
|
font-weight: bold;
|
font-size: 14px;
|
color: #4f4f4f;
|
}
|
</style>
|
