From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/settings/views/NetSettings.vue | 211 ++++++++++++++++++++++++++--------------------------
1 files changed, 105 insertions(+), 106 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index fad8495..4abaf73 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -1,23 +1,21 @@
<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)"
ref="leftbar"
>
- <div>
- <span class="icon iconfont"></span>
- {{ item.name }}
- </div>
- <div class="status">宸茶繛鎺�</div>
+ <span class="icon iconfont">{{ item.icon }}</span>
+ <span class="text">{{ item.name }}</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"
@@ -45,7 +43,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"
@@ -69,10 +67,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>
@@ -221,7 +216,7 @@
</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"
@@ -232,7 +227,9 @@
<div class="name">{{ "缃戠粶" + item.index }}</div>
<div class="right">
- <span class="icon iconfont good" v-if="item.lower_up"></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"
@@ -242,10 +239,7 @@
</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"
@@ -298,27 +292,13 @@
<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,
+ getDevInfo,
+ downNetCard,
+ upNetCard,
} from "@/api/system";
import ipInput from "@/components/subComponents/IPInput";
@@ -364,7 +344,7 @@
ip: "",
},
wireFormRules: {},
- activePage: "缃戠粶璁剧疆",
+ activePage: 0,
activeWireItem: {},
rules: {
deviceName: [
@@ -375,23 +355,13 @@
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: {
@@ -402,28 +372,35 @@
this.getCurServer();
this.fetchWireList();
},
- beforeDestroy() {},
- props: ["barName"],
methods: {
- switchNetCard(item){
+ switchNetCard(item) {
if (item.active) {
- upNetCard({
- ifname :item.name
- }).then((res) => {
- if (res.success) {
- this.$message.success(res.data)
- this.fetchWireList();
+ 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();
+ 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) => {
@@ -450,29 +427,20 @@
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);
}
});
},
openRight(item, i) {
- this.activePage = item.name;
+ 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 = {
@@ -497,7 +465,7 @@
checkWifi() {
this.inWifiDetail = true;
},
- checkWire(item) {
+ openWireDetail(item) {
this.inWireDetail = true;
this.activeWireItem = item;
getNetWorkCardInfo({
@@ -516,6 +484,19 @@
}
);
},
+ checkWire(item) {
+ if (item.addrs) {
+ this.openWireDetail(item);
+ return;
+ }
+ this.$confirm("鎮ㄨ繕鏈厤缃綉缁滀俊鎭紝鏄惁鐜板湪閰嶇疆锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }).then(() => {
+ this.openWireDetail(item);
+ });
+ },
},
};
</script>
@@ -524,7 +505,7 @@
width: 100%;
}
.wire-detail {
- .title{
+ .title {
font-size: 16px;
margin-bottom: 10px;
}
@@ -550,8 +531,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;
@@ -563,14 +546,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;
@@ -581,26 +564,38 @@
.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;
padding: 0 20px;
display: flex;
- justify-content: space-between;
+ .icon {
+ margin-right: 12px;
+ font-size: 19px;
+ }
+ .text {
+ font-size: 16px;
+ }
+ }
+ .menu-item-active {
+ background-color: #3d68e1;
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: #3d68e1;
+ 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)
@@ -611,12 +606,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 {
@@ -627,12 +624,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;
@@ -682,7 +680,7 @@
}
}
.wire {
- .title{
+ .title {
line-height: 30px;
height: 30px;
font-size: 16px;
@@ -691,28 +689,29 @@
.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: 16px;
+ border-radius: 10px;
+ .name {
+ font-size: 15px;
}
- .right{
- display: flex;
- align-items: center;
- .icon{
- margin-right: 15px;
- }
- .good{
+ .right {
+ display: flex;
+ align-items: center;
+ .icon {
+ margin-right: 15px;
+ }
+ .good {
color: #3d68e1;
font-size: 18px;
}
- .bad{
- color: orangered;
+ .bad {
+ color: rgb(243, 105, 54);
font-size: 18px;
}
}
--
Gitblit v1.8.0