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 | 270 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 155 insertions(+), 115 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 4ce99b8..5cc0c70 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -1,20 +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 }}</div>
- <div class="status">宸茶繛鎺�</div>
+ <div>
+ <span class="icon iconfont">{{ item.icon }}</span>
+ <span class="text">{{ item.name }}</span>
+ </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"
@@ -42,7 +46,7 @@
<div class="save-btn" @click="saveServerName">淇濆瓨</div>
</div>
- <div class="wifi" v-if="activePage == '鏃犵嚎缃戠粶' && !inWifiDetail">
+ <div class="wifi" v-if="activePage == 1 && !inWifiDetail">
<switchBar
:barName="`鏃犵嚎缃戝崱`"
@switchChange="wifiControl"
@@ -52,7 +56,7 @@
<div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
<div class="name">
<span class="icon iconfont"></span>
- <span> {{ item.name }} </span>
+ <span>{{ item.name }}</span>
</div>
<div class="more-detail">
@@ -66,10 +70,7 @@
</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>
@@ -118,8 +119,7 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ ></el-option>
</el-select>
</el-form-item>
<el-form-item label="IP" prop="ip">
@@ -170,8 +170,7 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ ></el-option>
</el-select>
</el-form-item>
<el-form-item label="IP鍦板潃" prop="ip">
@@ -184,7 +183,7 @@
<div style="display: flex">
<el-input
v-model="wifiForm.password"
- placeholder=""
+ placeholder
size="small"
></el-input>
@@ -220,7 +219,8 @@
</div>
</div>
- <div class="wire" v-if="activePage == '鏈夌嚎缃戠粶' && !inWireDetail">
+ <div class="wire" v-if="activePage == 2 && !inWireDetail">
+ <div class="title">鏈夌嚎缃戠粶</div>
<div
class="wire-bar"
v-for="(item, i) in wireArr"
@@ -230,24 +230,20 @@
<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"
- >
- </el-switch>
+ @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"
@@ -300,35 +296,23 @@
<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 {
+ components: {
+ ipInput,
+ switchBar,
+ },
data() {
const checkPwd = (rule, value, callback) => {
if (!value) {
@@ -344,7 +328,6 @@
};
return {
isHighClass: false,
-
ruleForm: {
deviceName: "",
port: "",
@@ -365,7 +348,7 @@
ip: "",
},
wireFormRules: {},
- activePage: "缃戠粶璁剧疆",
+ activePage: 0,
activeWireItem: {},
rules: {
deviceName: [
@@ -376,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,
},
@@ -404,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;
@@ -423,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);
+ });
}
});
},
@@ -455,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 = {
@@ -496,7 +469,7 @@
checkWifi() {
this.inWifiDetail = true;
},
- checkWire(item) {
+ openWireDetail(item) {
this.inWireDetail = true;
this.activeWireItem = item;
getNetWorkCardInfo({
@@ -515,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>
@@ -523,6 +514,10 @@
width: 100%;
}
.wire-detail {
+ .title {
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.btns {
display: flex;
justify-content: space-between;
@@ -545,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;
@@ -558,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;
@@ -576,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)
@@ -606,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 {
@@ -622,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;
@@ -677,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;
@@ -703,6 +742,7 @@
border-radius: 10px;
color: #fff;
line-height: 40px;
+ cursor: pointer;
font-size: 14px;
margin-top: 30px;
}
--
Gitblit v1.8.0