From 8b31ebab2fd3bb4397f4966767a1ed7ddef3ff2c Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 27 九月 2021 17:42:06 +0800
Subject: [PATCH] 系统设置v1.1
---
src/pages/settings/views/NetSettings.vue | 378 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 254 insertions(+), 124 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 15737bf..5cc0c70 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -1,23 +1,24 @@
<template>
<div class="all">
- <div class="cluster-content">
- <div class="cluster-center" ref="left">
+ <div class="net-content">
+ <div class="net-center" ref="left">
<div
class="menu-item"
+ :class="activePage == i ? 'menu-item-active' : ''"
v-for="(item, i) in tabList"
:key="i"
- @click="openRight(item, i)"
+ @click="openRight(i)"
ref="leftbar"
>
<div>
- <span class="icon iconfont"></span>
- {{ item.name }}
+ <span class="icon iconfont">{{ item.icon }}</span>
+ <span class="text">{{ item.name }}</span>
</div>
- <div class="status">宸茶繛鎺�</div>
+ <span v-if="showStatus && i==2" class="status">宸茶繛鎺�</span>
</div>
</div>
- <div class="cluster-right">
- <div class="net-set" v-if="activePage == '缃戠粶璁剧疆'">
+ <div class="net-right">
+ <div class="net-set" v-if="activePage == 0">
<div class="title">缃戠粶璁剧疆</div>
<el-form
:model="ruleForm"
@@ -27,18 +28,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>
+ <div class="wifi" v-if="activePage == 1 && !inWifiDetail">
+ <switchBar
+ :barName="`鏃犵嚎缃戝崱`"
+ @switchChange="wifiControl"
+ :value="isOpenWifi"
+ ></switchBar>
<div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
<div class="name">
@@ -52,11 +65,12 @@
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 == 2 && inWifiDetail">
<div class="btns">
<div class="left">鍒犻櫎</div>
<div class="right">鏂紑杩炴帴</div>
@@ -76,14 +90,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 +123,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 +174,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 +194,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>
@@ -155,24 +219,38 @@
</div>
</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="wire" v-if="activePage == 2 && !inWireDetail">
+ <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&&item.active"
+ ></span
+ >
+ <span class="icon iconfont bad" v-if="!item.lower_up&&item.active"></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 == 2 && 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 +258,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>
@@ -206,32 +296,16 @@
<script>
import {
- createSerfCluster,
- randomPwd,
- search,
- getSearchNodes,
- stopSearching,
- findCluster,
- updateClusterName,
- joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
-} from "@/api/clusterManage";
-import {
setServerName,
getWireList,
setNetWorkCard,
getNetWorkCardInfo,
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 +328,6 @@
};
return {
isHighClass: false,
-
ruleForm: {
deviceName: "",
port: "",
@@ -275,7 +348,7 @@
ip: "",
},
wireFormRules: {},
- activePage: "缃戠粶璁剧疆",
+ activePage: 0,
activeWireItem: {},
rules: {
deviceName: [
@@ -286,27 +359,16 @@
ipv6Form: {},
ipv4FormRules: {},
tabList: [
- { name: "缃戠粶璁剧疆" },
- { name: "鏃犵嚎缃戠粶" },
- { name: "鏈夌嚎缃戠粶" },
+ { name: "缃戠粶璁剧疆", icon: "\ue6ed" },
+ { name: "鏃犵嚎缃戠粶", icon: "\ue991" },
+ { name: "鏈夌嚎缃戠粶", icon: "\ue6dd" },
],
ipv6FormRules: {},
- options: [
- {
- value: "閫夐」1",
- label: "鎵嬪姩",
- },
- {
- value: "閫夐」2",
- label: "鑷姩",
- },
- ],
+ options: [],
value: "",
- netCardValue: "",
};
},
components: {
- cloudNode,
ipInput,
switchBar,
},
@@ -314,16 +376,36 @@
this.getCurServer();
this.fetchWireList();
},
- 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();
+ }
+ },
+ (err) => {
+ item.active = false;
+ this.$message.error(err.msg);
+ }
+ );
+ } else {
+ downNetCard({ ifname: item.name }).then(
+ (res) => {
+ if (res.success) {
+ this.$message.success(res.data);
+ this.fetchWireList();
+ }
+ },
+ (err) => {
+ item.active = true;
+ this.$message.error(err.msg);
+ }
+ );
+ }
+ },
getCurServer() {
getDevInfo().then((res) => {
this.ruleForm.deviceName = res.data.server_name;
@@ -333,23 +415,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);
+ });
}
});
},
@@ -365,23 +435,16 @@
server_name: this.ruleForm.deviceName,
server_port: this.ruleForm.port,
}).then((res) => {
- console.log(res);
if (res && res.success) {
this.$message.success(res.data);
}
});
},
- openRight(item, i) {
- this.activePage = item.name;
+ openRight(i) {
+ this.activePage = i;
if (i == 1) {
this.inWifiDetail = false;
}
- this.$refs["leftbar"].forEach((x) => {
- x.style.backgroundColor = "rgba(248, 248, 248, 1)";
- x.style.color = "#333";
- });
- this.$refs["leftbar"][i].style.backgroundColor = "rgb(61, 104, 225)";
- this.$refs["leftbar"][i].style.color = "white";
},
saveWire(ifname) {
let data = {
@@ -402,11 +465,11 @@
}
);
},
- wifiControl(val) { },
+ wifiControl(val) {},
checkWifi() {
this.inWifiDetail = true;
},
- checkWire(item) {
+ openWireDetail(item) {
this.inWireDetail = true;
this.activeWireItem = item;
getNetWorkCardInfo({
@@ -425,6 +488,24 @@
}
);
},
+ checkWire(item) {
+ if (item.addrs) {
+ this.openWireDetail(item);
+ return;
+ }
+ this.$confirm("鎮ㄨ繕鏈厤缃綉缁滀俊鎭紝鏄惁鐜板湪閰嶇疆锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }).then(() => {
+ this.openWireDetail(item);
+ });
+ },
+ },
+ computed: {
+ showStatus(){
+ return this.wireArr.some((item) => item.lower_up==true)
+ }
},
};
</script>
@@ -433,6 +514,10 @@
width: 100%;
}
.wire-detail {
+ .title {
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.btns {
display: flex;
justify-content: space-between;
@@ -455,8 +540,10 @@
}
.net-set {
.title {
- font-size: 16px;
- margin-bottom: 12px;
+ font-size: 16px;
+ margin-bottom: 10px;
+ height: 30px;
+ line-height: 30px;
}
.el-input--small .el-input__inner {
height: 35px;
@@ -468,14 +555,14 @@
color: rgba(134, 134, 134, 1);
}
}
-.cluster-content {
+.net-content {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ .net-center {
height: 100%;
width: 280px;
overflow: auto;
@@ -486,26 +573,39 @@
.menu-item {
background-color: #f8f8f8;
- height: 40px;
+ height: 50px;
margin-bottom: 10px;
border-radius: 8px;
- line-height: 40px;
+ line-height: 50px;
box-sizing: border-box;
- font-size: 14px;
+ font-size: 14px; cursor: pointer;
padding: 0 20px;
display: flex;
justify-content: space-between;
+ .icon {
+ margin-right: 8px;
+ font-size: 18px;
+ }
+ .text {
+ font-size: 15px;
+ }
+ }
+ .menu-item-active {
+ background-color: var(--colorCard);
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: var(--colorCard);
+ color: white;
}
}
- .cluster-right {
+ .net-right {
flex: 1;
flex-basis: auto;
overflow: auto;
- // background-color: rgba(240, 242, 245, 1);
box-sizing: border-box;
position: relative;
padding: 20px 40px;
- // .create-new .join-exist {
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -516,12 +616,14 @@
.el-select {
width: 100%;
}
+ .el-form-item__label{
+ font-size: 15px;
+ }
.el-form-item {
margin-bottom: 10px;
height: 54px;
padding: 6px 20px;
background: #f8f8f8;
- -webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
.el-form-item__label {
@@ -532,12 +634,13 @@
.el-form-item__content {
line-height: 40px;
position: relative;
- font-size: 15px;
+ .el-input--small {
+ font-size: 15px;
+}
}
.ip-input-container {
max-width: none !important;
}
- // }
.wifi {
.wifi-option {
height: 50px;
@@ -587,15 +690,41 @@
}
}
.wire {
+ .title {
+ line-height: 30px;
+ height: 30px;
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.wire-bar {
height: 50px;
background-color: #f8f8f8;
+ cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 20px;
margin-bottom: 10px;
+ border-radius: 10px;
+ .name {
+ font-size: 15px;
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ .icon {
+ margin-right: 15px;
+ }
+ .good {
+ color: #3d68e1;
+ font-size: 18px;
+ }
+ .bad {
+ color: rgb(243, 105, 54);
+ font-size: 18px;
+ }
+ }
}
.wifi-name {
height: 40px;
@@ -613,6 +742,7 @@
border-radius: 10px;
color: #fff;
line-height: 40px;
+ cursor: pointer;
font-size: 14px;
margin-top: 30px;
}
--
Gitblit v1.8.0