From c83e653ebaef064b0741c1f35cf6576762ccbc68 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期六, 10 七月 2021 16:30:14 +0800
Subject: [PATCH] 系统设置修改
---
src/pages/settings/views/NetSettings.vue | 241 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 181 insertions(+), 60 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 15737bf..fad8495 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -27,18 +27,30 @@
label-width="150px"
>
<el-form-item label="璁惧鍚嶇О" prop="deviceName">
- <el-input v-model="ruleForm.deviceName" size="small" placeholder="蹇呭～"></el-input>
+ <el-input
+ v-model="ruleForm.deviceName"
+ size="small"
+ placeholder="蹇呭～"
+ ></el-input>
</el-form-item>
<el-form-item label="绔彛" prop="port">
- <el-input v-model="ruleForm.port" placeholder="閫夊～锛屽閮ㄨ闂殑绔彛" size="small"></el-input>
+ <el-input
+ v-model="ruleForm.port"
+ placeholder="閫夊～锛屽閮ㄨ闂殑绔彛"
+ size="small"
+ ></el-input>
</el-form-item>
</el-form>
<div class="save-btn" @click="saveServerName">淇濆瓨</div>
</div>
<div class="wifi" v-if="activePage == '鏃犵嚎缃戠粶' && !inWifiDetail">
- <switchBar :barName="`鏃犵嚎缃戝崱`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>
+ <switchBar
+ :barName="`鏃犵嚎缃戝崱`"
+ @switchChange="wifiControl"
+ :value="isOpenWifi"
+ ></switchBar>
<div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
<div class="name">
@@ -52,11 +64,15 @@
class="icon iconfont"
style="margin-left: 10px; cursor: pointer"
@click="checkWifi(item)"
- ></span>
+ ></span
+ >
</div>
</div>
</div>
- <div class="wifi-detail" v-if="activePage == '鏃犵嚎缃戠粶' && inWifiDetail">
+ <div
+ class="wifi-detail"
+ v-if="activePage == '鏃犵嚎缃戠粶' && inWifiDetail"
+ >
<div class="btns">
<div class="left">鍒犻櫎</div>
<div class="right">鏂紑杩炴帴</div>
@@ -76,14 +92,28 @@
</el-form-item>
<el-form-item label="瀵嗙爜" prop="password">
- <el-input v-model="wifiForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" size="small" show-password></el-input>
+ <el-input
+ v-model="wifiForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ ></el-input>
</el-form-item>
</el-form>
- <switchBar :barName="`楂樼骇璁剧疆`" @switchChange="highClassSetting" :value="isHighClass"></switchBar>
+ <switchBar
+ :barName="`楂樼骇璁剧疆`"
+ @switchChange="highClassSetting"
+ :value="isHighClass"
+ ></switchBar>
<div class="title">IPV4</div>
- <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form" label-width="150px">
+ <el-form
+ :model="ipv4Form"
+ :rules="ipv4FormRules"
+ ref="ipv4Form"
+ label-width="150px"
+ >
<el-form-item label="鏂规硶">
<el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
<el-option
@@ -95,26 +125,46 @@
</el-select>
</el-form-item>
<el-form-item label="IP" prop="ip">
- <ip-input :ip="ipv4Form.ip" @on-blur="ipv4Form.ip = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv4Form.ip"
+ @on-blur="ipv4Form.ip = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
- <ip-input :ip="ipv4Form.subMask" @on-blur="ipv4Form.subMask = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv4Form.subMask"
+ @on-blur="ipv4Form.subMask = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="缃戝叧" prop="gateway">
- <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv4Form.gateway"
+ @on-blur="ipv4Form.gateway = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="棣栭�塂NS" prop="dns">
- <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv4Form.dns1"
+ @on-blur="ipv4Form.dns1 = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="澶囩敤DNS" prop="dns">
- <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv4Form.dns2"
+ @on-blur="ipv4Form.dns2 = arguments[0]"
+ ></ip-input>
</el-form-item>
</el-form>
<div class="title">IPV6</div>
- <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form" label-width="150px">
+ <el-form
+ :model="ipv6Form"
+ :rules="ipv6FormRules"
+ ref="ipv4Form"
+ label-width="150px"
+ >
<el-form-item label="鏂规硶">
<el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
<el-option
@@ -126,11 +176,18 @@
</el-select>
</el-form-item>
<el-form-item label="IP鍦板潃" prop="ip">
- <ip-input :ip="ipv6Form.ip" @on-blur="ipv6Form.ip = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv6Form.ip"
+ @on-blur="ipv6Form.ip = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="鍓嶇紑" prop="subMask">
<div style="display: flex">
- <el-input v-model="wifiForm.password" placeholder size="small"></el-input>
+ <el-input
+ v-model="wifiForm.password"
+ placeholder
+ size="small"
+ ></el-input>
<div class="ad">-</div>
<div class="ad">+</div>
@@ -139,13 +196,22 @@
</el-form-item>
<el-form-item label="缃戝叧" prop="gateway">
- <ip-input :ip="ipv6Form.gateway" @on-blur="ipv6Form.gateway = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv6Form.gateway"
+ @on-blur="ipv6Form.gateway = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="棣栭�塂NS" prop="dns">
- <ip-input :ip="ipv6Form.dns1" @on-blur="ipv6Form.dns1 = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv6Form.dns1"
+ @on-blur="ipv6Form.dns1 = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="澶囩敤DNS" prop="dns">
- <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input>
+ <ip-input
+ :ip="ipv6Form.dns2"
+ @on-blur="ipv6Form.dns2 = arguments[0]"
+ ></ip-input>
</el-form-item>
</el-form>
@@ -156,23 +222,37 @@
</div>
<div class="wire" v-if="activePage == '鏈夌嚎缃戠粶' && !inWireDetail">
- <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">
+ <div class="title">鏈夌嚎缃戠粶</div>
+ <div
+ class="wire-bar"
+ v-for="(item, i) in wireArr"
+ :key="i"
+ @click.self="checkWire(item)"
+ >
<div class="name">{{ "缃戠粶" + item.index }}</div>
<div class="right">
- <span class="icon iconfont"></span>
-
+ <span class="icon iconfont good" v-if="item.lower_up"></span>
+ <span class="icon iconfont bad" v-else></span>
<el-switch
v-model="item.active"
active-color="rgba(61, 104, 225, 1)"
- @change="switchNetCard"
+ @change="switchNetCard(item)"
></el-switch>
</div>
</div>
</div>
- <div class="wire-detail" v-if="activePage == '鏈夌嚎缃戠粶' && inWireDetail">
+ <div
+ class="wire-detail"
+ v-if="activePage == '鏈夌嚎缃戠粶' && inWireDetail"
+ >
<div class="title">缃戠粶璁剧疆</div>
- <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm" label-width="150px">
+ <el-form
+ :model="wireForm"
+ :rules="wireFormRules"
+ ref="wireForm"
+ label-width="150px"
+ >
<el-form-item label="缃戠粶鍚嶇О" prop="name">
<div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
@@ -180,17 +260,29 @@
<div class="wifi-name">{{ activeWireItem.name }}</div>
</el-form-item>
<el-form-item label="IP" prop="ip">
- <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>
+ <ip-input
+ :ip="wireForm.ip"
+ @on-blur="wireForm.ip = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
- <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>
+ <ip-input
+ :ip="wireForm.subMask"
+ @on-blur="wireForm.subMask = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="缃戝叧" prop="gateway">
- <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>
+ <ip-input
+ :ip="wireForm.gateway"
+ @on-blur="wireForm.gateway = arguments[0]"
+ ></ip-input>
</el-form-item>
<el-form-item label="DNS" prop="dns">
- <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
+ <ip-input
+ :ip="wireForm.dns"
+ @on-blur="wireForm.dns = arguments[0]"
+ ></ip-input>
</el-form-item>
</el-form>
@@ -226,12 +318,10 @@
getWireList,
setNetWorkCard,
getNetWorkCardInfo,
- getDevInfo,
+ getDevInfo,downNetCard,upNetCard,
} from "@/api/system";
-import cloudNode from "../components/CloudNode";
import ipInput from "@/components/subComponents/IPInput";
-import { isIPv4 } from "@/scripts/validate";
import switchBar from "../components/switchBar";
export default {
@@ -254,7 +344,6 @@
};
return {
isHighClass: false,
-
ruleForm: {
deviceName: "",
port: "",
@@ -306,7 +395,6 @@
};
},
components: {
- cloudNode,
ipInput,
switchBar,
},
@@ -314,16 +402,29 @@
this.getCurServer();
this.fetchWireList();
},
- beforeDestroy() { },
+ beforeDestroy() {},
props: ["barName"],
methods: {
- // parseFlags(flags) {
- // let arr = flags.split("|");
- // if (arr.length) {
- // return arr[0] == "up";
- // }
- // return false;
- // },
+ switchNetCard(item){
+ if (item.active) {
+ upNetCard({
+ ifname :item.name
+ }).then((res) => {
+ if (res.success) {
+ this.$message.success(res.data)
+ this.fetchWireList();
+ }
+ })
+ } else {
+ downNetCard({ifname :item.name}).then((res) => {
+ if (res.success) {
+ this.$message.success(res.data)
+ this.fetchWireList();
+ }
+ })
+ }
+
+ },
getCurServer() {
getDevInfo().then((res) => {
this.ruleForm.deviceName = res.data.server_name;
@@ -333,23 +434,11 @@
fetchWireList() {
getWireList().then((res) => {
if (res && res.success) {
- this.wireArr = res.data
- .filter((x) => x.wireless == false)
- .map((itm) => {
- let arr = itm.flags.split("|");
- let f = false;
- if (arr.length) {
- f = arr[0] == "up";
- }
- return {
- flags: itm.flags,
- index: itm.index,
- mtu: itm.mtu,
- name: itm.name,
- wireless: itm.wireless,
- active: f
- }
- });
+ this.wireArr = res.data;
+ this.wireArr.forEach((x) => {
+ let t = x.flags.split("|")[0] == "up";
+ this.$set(x, "active", t);
+ });
}
});
},
@@ -361,10 +450,12 @@
this.wireForm.subMask = "";
},
saveServerName() {
+ debugger
setServerName({
server_name: this.ruleForm.deviceName,
server_port: this.ruleForm.port,
}).then((res) => {
+ debugger
console.log(res);
if (res && res.success) {
this.$message.success(res.data);
@@ -402,7 +493,7 @@
}
);
},
- wifiControl(val) { },
+ wifiControl(val) {},
checkWifi() {
this.inWifiDetail = true;
},
@@ -433,6 +524,10 @@
width: 100%;
}
.wire-detail {
+ .title{
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.btns {
display: flex;
justify-content: space-between;
@@ -587,6 +682,12 @@
}
}
.wire {
+ .title{
+ line-height: 30px;
+ height: 30px;
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.wire-bar {
height: 50px;
background-color: #f8f8f8;
@@ -596,6 +697,25 @@
box-sizing: border-box;
padding: 0 20px;
margin-bottom: 10px;
+ border-radius:10px ;
+ .name{
+ font-size: 16px;
+ }
+ .right{
+ display: flex;
+ align-items: center;
+ .icon{
+ margin-right: 15px;
+ }
+ .good{
+ color: #3d68e1;
+ font-size: 18px;
+ }
+ .bad{
+ color: orangered;
+ font-size: 18px;
+ }
+ }
}
.wifi-name {
height: 40px;
@@ -613,6 +733,7 @@
border-radius: 10px;
color: #fff;
line-height: 40px;
+ cursor: pointer;
font-size: 14px;
margin-top: 30px;
}
--
Gitblit v1.8.0