From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/settings/views/keyboardLanguage.vue | 191 ++++++++++++++++++++++++++---------------------
1 files changed, 105 insertions(+), 86 deletions(-)
diff --git a/src/pages/settings/views/keyboardLanguage.vue b/src/pages/settings/views/keyboardLanguage.vue
index e8ee1da..c8a7d6c 100644
--- a/src/pages/settings/views/keyboardLanguage.vue
+++ b/src/pages/settings/views/keyboardLanguage.vue
@@ -1,31 +1,53 @@
<template>
<div class="all">
- <div class="cluster-content">
- <div class="cluster-center" ref="left">
+ <div class="kb-content">
+ <div class="kb-center" ref="left">
<div
class="menu-item"
v-for="(item, i) in tabList"
+ :class="activePage == i ? 'menu-item-active' : ''"
:key="i"
- @click="openRight(item, i)"
+ @click="openRight( i)"
ref="leftbar"
>
- <div>{{ item.name }}</div>
+ <img :src="item.icon_black" alt="" v-if="activePage != i" class="secondIcon">
+ <img :src="item.icon_white" alt="" v-else class="secondIcon">
+ <span class="title">{{ item.name }}</span>
</div>
</div>
- <div class="cluster-right">
- <div class="lang" v-if="activePage == '绯荤粺璇█'">
- <div class="title">璇█鍒楄〃</div>
- <div class="bar" v-for="(item, i) in langList" :key="i" @click="pickLang(item, i)">
+ <div class="language-right">
+ <div class="lang" v-if="activePage == 0">
+ <div class="bar title">璇█鍒楄〃</div>
+ <div
+ class="bar"
+ v-for="(item, i) in langList"
+ :key="i"
+ @click="pickLang(item, i)"
+ >
<span class="name">{{ item.Name }}</span>
- <span class="icon iconfont" v-show="activeLang == item.Lang">宸查��</span>
+ <span
+ class="icon iconfont"
+ style="color: var(--colorCard);font-size:16px;"
+ v-show="activeLang == item.Lang"
+ ></span
+ >
</div>
</div>
- <div class="lang" v-if="activePage == '閿洏绠＄悊'">
- <div class="title">閿洏甯冨眬</div>
- <div class="bar" v-for="(item, i) in keyboardList" :key="i" @click="pickKb(item, i)">
+ <div class="lang" v-if="activePage == 1">
+ <div class="title bar">閿洏甯冨眬</div>
+ <div
+ class="bar"
+ v-for="(item, i) in keyboardList"
+ :key="i"
+ @click="pickKb(item, i)"
+ >
<span class="name">{{ item.name }}</span>
- <span class="icon iconfont" v-show="activeKb == item.id">宸查��</span>
- <!-- <span class="icon iconfont"></span> -->
+ <span
+ class="icon iconfont"
+ style="color: #4E94FF;font-size:16px;"
+ v-show="activeKb == item.id"
+ ></span
+ >
</div>
</div>
</div>
@@ -35,23 +57,6 @@
<script>
import {
- createSerfCluster,
- randomPwd,
- search,
- getSearchNodes,
- stopSearching,
- findCluster,
- updateClusterName,
- joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
-} from "@/api/clusterManage";
-
-import {
getLangs,
setLang,
getLang,
@@ -59,25 +64,19 @@
getCurKeyboardLayout,
setKeyboardLayout,
} from "@/api/system";
-import { isIPv4 } from "@/scripts/validate";
export default {
data() {
return {
activeLang: "",
activeKb: "",
- inWifiDetail: false,
- inWireDetail: false,
langList: [],
keyboardList: [],
- tabList: [{ name: "绯荤粺璇█" }, { name: "閿洏绠＄悊" }],
- activePage: "绯荤粺璇█",
- rules: {
- deviceName: [
- { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
- ],
- },
- value: "",
+ tabList: [
+ { name: "绯荤粺璇█", icon: "\ue74a" ,icon_white:"/images/settings/璇█-鐧�.png",icon_black:"/images/settings/璇█-榛�.png"},
+ { name: "閿洏绠＄悊", icon: "\ue74e" ,icon_white:"/images/settings/閿洏-鐧�.png",icon_black:"/images/settings/閿洏-榛�.png"},
+ ],
+ activePage: 0,
};
},
mounted() {
@@ -86,14 +85,12 @@
this.fetchKeyBoardList();
this.getCurKb();
},
- props: ["barName"],
methods: {
getCurKb() {
getCurKeyboardLayout().then((res) => {
this.activeKb = res.data.keyboard;
});
},
-
getCurLang() {
getLang().then((res) => {
if (res && res.success) {
@@ -116,6 +113,9 @@
});
},
pickLang(item) {
+ if (item.Lang==this.activeLang) {
+ return
+ }
setLang({
lang: item.Lang,
}).then(
@@ -129,11 +129,14 @@
);
},
pickKb(item) {
+ if (this.activeKb==item.id) {
+ return
+ }
setKeyboardLayout({
layout: item.id,
}).then(
(res) => {
- this.getCurKb()
+ this.getCurKb();
this.$message.success(res.data);
},
(err) => {
@@ -141,21 +144,8 @@
}
);
},
- openRight(item, i) {
- this.activePage = item.name;
- 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";
- },
- wifiControl(val) { },
- checkWifi() {
- this.inWifiDetail = true;
- },
- checkWire(item) {
- this.inWireDetail = true;
+ openRight(i) {
+ this.activePage = i;
},
},
};
@@ -165,45 +155,60 @@
width: 100%;
}
-.cluster-content {
+.kb-content {
+ font-weight: 700;
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ .kb-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid #f8f8f8;
-
- // background-color: lavender;
+ padding: 24px 10px 0px 10px;
+ background-color: #FBFAFF;
+ border-right: 4px solid #F2F2F7;
.menu-item {
- background-color: #f8f8f8;
- height: 40px;
- margin-bottom: 10px;
+ /* background-color: #F2F2F7; */
+ height: 56px;
+ margin-bottom: 4px;
border-radius: 8px;
- line-height: 40px;
+ line-height: 56px;
box-sizing: border-box;
- font-size: 14px;
- padding: 0 20px;
+ padding: 0 20px;cursor: pointer;
display: flex;
- justify-content: space-between;
+ align-items: center;
+ color: #333;
+ .title {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ .secondIcon {
+ margin: 15px;
+ width: 24px;
+ height: 24px;
+ }
+ }
+ .menu-item-active {
+ background-color: var(--colorCard) !important;
+ color: white;
+
+ }
+ .menu-item:hover {
+ background-color: #F2F2F7;
}
}
- .cluster-right {
+ .language-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 {
+ padding: 10px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -237,18 +242,32 @@
}
.lang {
.bar {
- height: 50px;
- background-color: aliceblue;
- border-radius: 10px;
+ height: 48px;
+ background-color: #f8f8f8;
+ border-radius: 8px;
line-height: 50px;
- box-sizing: border-box;
- padding: 0 20px;
+ box-sizing: content-box;
+ padding: 0 15px 0 20px;
display: flex;
justify-content: space-between;
- margin-bottom: 10px;
+ cursor: pointer;
+ margin-bottom: 4px;
+ border: 2px solid #f8f8f8;
+ .name{
+ font-size: 14px;
+ }
+ }
+ .bar:hover{
+ border: 2px solid var(--colorCard);
+ }
+ .title {
+ cursor:default ;
+ font-size: 16px;
+ justify-content: center;
+ border: 2px solid #f8f8f8 !important;
}
}
- .save-btn {
+ /* .save-btn {
background-color: #3d68e1;
width: 240px;
height: 40px;
@@ -258,7 +277,7 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
- }
+ } */
}
}
</style>
--
Gitblit v1.8.0