From 46b274e6b5d0bd7f2afe46a8adeac4faaa446dc9 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 29 九月 2021 17:59:18 +0800
Subject: [PATCH] 系统设置/维护v0
---
src/pages/vindicate/index/App.vue | 269 +++++++++++++++++++++++++-
src/pages/vindicate/views/updateSettings.vue | 240 +++++++++++++++++++----
src/pages/vindicate/views/restartSettings.vue | 1
src/pages/vindicate/views/systemClean.vue | 69 ++++++
4 files changed, 515 insertions(+), 64 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index eb915de..90e6935 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,5 +1,5 @@
<template>
- <div class="container">
+ <div class="container" v-if="!showWelcome">
<div class="container-left">
<div
class="left-card"
@@ -13,11 +13,61 @@
<span class="card-text">{{ item.name }}</span>
</div>
</div>
- <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></systemClean>
- <updateSettings v-if="activePage == 0" style="width: 100%"></updateSettings>
+ <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer" ref="view_1"></systemClean>
+ <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings>
<!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
- <restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings>
- <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
+ <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings>
+ <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
+ </div>
+
+ <div class="welcome-page" v-else ref="curPage">
+ <div
+ class="search-box"
+ :class="showRecomand ? 'border-change' : ''"
+ @click.stop
+ >
+ <!-- @blur="showRecomand = false" -->
+ <el-input
+ class="search-input"
+ placeholder="鏌ユ壘璁剧疆"
+ size="mini"
+ @focus="showRecomand = true"
+ clearable
+ @input="filterRecomand"
+ :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
+ v-model="searchText"
+ >
+ </el-input>
+
+ <div class="search-res" v-if="showRecomand">
+ <div
+ class="res-bar"
+ v-for="(item, index) in searchArrForShow"
+ :key="index"
+ @click="pickQuick(item.addr)"
+ >
+ {{ item.name }}
+ </div>
+ <div class="no-res-bar" v-if="searchArrForShow.length == 0">
+ 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�
+ </div>
+ </div>
+ <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
+ </div>
+ <div class="nav-items">
+ <div
+ class="nav-child"
+ @click="openWelcome(i)"
+ v-for="(item, i) in menuArr"
+ :key="i"
+ >
+ <div class="child-info">
+ <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
+ <img :src="item.img_black" alt="" />
+ <span class="welcome-title">{{ item.name }}</span>
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -47,9 +97,19 @@
{ name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",},
{ name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",},
],
+ searchArr: [
+ { name: "绯荤粺璁剧疆", addr: [0] },
+ { name: "绯荤粺鏇存柊", addr: [0, 0] },
+ { name: "鏇存柊璁剧疆", addr: [0, 1] },
+ { name: "绯荤粺娓呯悊", addr: [1] },
+ { name: "閲嶅惎璁剧疆", addr: [2] },
+ { name: "绯荤粺淇℃伅", addr: [3] },
+ ],
activePage: 0,
free: 0,
full: 0,
+ showWelcome:true,
+ searchText:'',
};
},
created() {
@@ -78,10 +138,190 @@
this.full = res.data.all
})
},
+ pickQuick(addr) {
+ if (addr.length == 1) {
+ this.openWelcome(addr[0]);
+ } else {
+ this.openWelcome(addr[0]);
+ this.$nextTick(() => {
+ if (addr[0] == 1) {
+ // addr[1] == 0
+ // ? this.changeSwitch("isNtp")
+ // : this.changeSwitch("isManual");
+ return;
+ }
+ this.$refs[`view_${addr[0]}`].openRight(addr[1]);
+ });
+ }
+ },
+ openWelcome(i) {
+ this.showWelcome = false;
+ this.openMenu(1,i);
+ },
},
+ computed:{
+ searchArrForShow() {
+ if (this.searchText == "") {
+ return this.searchArr;
+ } else {
+ return this.searchArr.filter((item) => {
+ return item.name.indexOf(this.searchText.toUpperCase()) > -1;
+ });
+ }
+ },
+ }
};
</script>
<style lang="scss">
+.welcome-page {
+ width: 100%;
+ height: 100%;
+ display: -ms-flexbox;
+ padding: 145px 32px 50px 32px;
+ box-sizing: border-box;
+ background-color: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(4px);
+ .border-change {
+ border-radius: 20px !important;
+ }
+ .search-box {
+ width: 332px;
+ z-index: 999;
+ // margin: 55px auto;
+ position: fixed;
+ left: calc(50% - 166px);
+ top: 50px;
+ background: rgba(255, 255, 255, 0.8);
+
+ border: 2px solid #4e94ff;
+ box-sizing: border-box;
+ backdrop-filter: blur(4px);
+ border-radius: 40px;
+ .search-input {
+ font-size: 14px;
+ .el-input--mini .el-input__inner {
+ height: 36px;
+ line-height: 36px;
+ }
+ .el-input--suffix .el-input__inner {
+ padding-right: 40px;
+ }
+ .el-input__inner {
+ background-color: #fff;
+ background-image: none;
+ border-radius: 40px;
+ border: none;
+ box-sizing: border-box;
+ color: #606266;
+ display: inline-block;
+ font-size: 14px;
+ height: 36px;
+ line-height: 36px;
+ outline: 0;
+ padding: 0 20px;
+ -webkit-transition: border-color 0.2s
+ cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+ width: 100%;
+ font-weight: bold;
+ }
+ .el-input__suffix {
+ display: flex;
+ align-items: center;
+ padding-right: 10px;
+ .el-input__suffix-inner {
+ border-color: none;
+ .el-icon-circle-close:before {
+ content: "\e79d" !important;
+ font-size: 17px;
+ }
+ .el-icon-search {
+ color: #2f2d3d;
+ font-weight: bold;
+ font-size: 17px;
+ }
+ }
+ }
+ }
+ .search-res {
+ max-height: 240px;
+ overflow: auto;
+ .res-bar {
+ height: 40px;
+ line-height: 40px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ color: #333333;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .no-res-bar {
+ height: 40px;
+ line-height: 40px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ color: #333333;
+ font-size: 14px;
+ }
+ .res-bar:hover {
+ background: #f5f5f6 10%;
+ font-weight: bold;
+ color: #4e94ff;
+ }
+ // .res-bar:last-child {
+ // border-radius: 0 0 20px 20px;
+ // }
+ }
+ }
+ .nav-items {
+ .nav-child {
+ box-sizing: border-box;
+ background-color: rgba(251, 251, 255, 0.1);
+ backdrop-filter: blur(4px);
+ float: left;
+ width: 46%;
+ height: 190px;
+ margin: 0 15px;
+ margin-bottom: 30px;
+ border-radius: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ // box-shadow: 2px 2px 4px rgb(226, 226, 226);
+ .child-info {
+ display: flex;
+ flex-direction: column;
+ // justify-content: space-around;
+ height: 100%;
+ .welcome-icon {
+ font-size: 72px;
+ }
+ img {
+ width: 64px;
+ margin: 0 auto;
+ margin-top: 65px;
+ height: 50px;
+ }
+ .welcome-title {
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 24px;
+ color: #333333;
+ }
+ }
+ }
+ .nav-child:hover {
+ // box-shadow: 4px 4px 12px rgb(218, 218, 218);
+ // transform: translate3d(0, -1px, 0);
+ // transition: all 0.3s;
+ }
+ }
+}
+
.container {
height: 100%;
width: 100%;
@@ -99,6 +339,7 @@
padding: 17px 10px 0 10px;
box-sizing: border-box;
background: #fff;
+ border-top:2px solid #E1E0E6 ;
.left-card {
position: relative;
width: 224px;
@@ -107,7 +348,7 @@
border-radius: 8px;
margin-bottom: 4px;
display: flex;
- background-color: #F2F2F7;
+ background-color: #fff;
align-items: center;
.icon_white {
position: absolute;
@@ -131,7 +372,7 @@
}
.left-card-active {
color: #fff;
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
.icon_black {
visibility: hidden;
}
@@ -145,18 +386,8 @@
}
.left-card:hover {
- background-color: var(--colorCard);
- color: #fff;
- .iconfont {
- color: #333333;
- background-color: #fff;
- }
- .icon_black {
- visibility: hidden;
- }
- .icon_white{
- visibility: visible;
- }
+ background-color: #F2F2F7;
+
}
}
diff --git a/src/pages/vindicate/views/restartSettings.vue b/src/pages/vindicate/views/restartSettings.vue
index f19c4d4..5396dee 100644
--- a/src/pages/vindicate/views/restartSettings.vue
+++ b/src/pages/vindicate/views/restartSettings.vue
@@ -343,6 +343,7 @@
.restart {
margin: 0 auto;
padding: 10px;
+ width: 74% !important;
font-size: 16px;
color: #333;
font-weight: 700;
diff --git a/src/pages/vindicate/views/systemClean.vue b/src/pages/vindicate/views/systemClean.vue
index 703213a..2dc13a9 100644
--- a/src/pages/vindicate/views/systemClean.vue
+++ b/src/pages/vindicate/views/systemClean.vue
@@ -9,7 +9,7 @@
<el-progress v-if="percent == 0" type="circle" :percentage="100-percent" status="exception" stroke-width="10"></el-progress>
</div>
<div class="cap-text">
- <span>纾佺洏鍙敤: {{ percent }}%</span>
+ <span class="useable">纾佺洏鍙敤: {{ percent }}%</span>
</div>
</div>
@@ -19,7 +19,7 @@
<div class="clear-list">
<span class="t">璇烽�夋嫨瑕佹竻鐞嗙殑鏁版嵁鑼冨洿</span>
- <el-date-picker
+ <el-date-picker popper-class="clean-time-picker"
style="width: 100%"
v-model="dataRange"
value-format="yyyy-MM-dd"
@@ -110,6 +110,7 @@
}
.clear {
+ position: relative;
padding: 10px;
border-top:2px solid #E1E0E6 ;
border-left:2px solid #E1E0E6 ;
@@ -122,6 +123,9 @@
align-items: center;
justify-content: space-between;
padding: 0 45px;
+ color: #333333;
+ font-weight: bold;
+ font-size: 16px;
&:first-child {
border-bottom: 1px solid #E1E0E6;
@@ -164,9 +168,68 @@
.el-progress__text {
display: none !important;
}
+ }
+
+ .cap-text {
+ color: #333333;
+ font-weight: bold;
+ font-size: 16px;
+ .useable {
+ margin-left:20px ;
+ }
+ }
+ }
+ .el-button.el-button--primary {
+ width: 150px !important;
+ height: 30px !important;
+ line-height: 7px !important;
+ font-size: 14px !important;
+ color: #fff !important;
+ background: var(--colorCard) !important;
+ border-radius: 25px !important;
+ border: none !important;
+ }
+
+ .el-date-editor.el-range-editor {
+ height: 48px;
+ width: 361px !important;
+ border-radius: 8px;
+ .el-input__icon.el-range__icon.el-icon-date {
+ margin:0 15px ;
+ &::before {
+ line-height: 40px;
+ font-size: 20px;
+ color: #333;
+ }
+ }
+ .el-range-separator{
+ line-height: 41px;
+ }
+ input {
+ width: 127px;
+ height: 32px;
+ font-size: 12px;
+ background: #F2F2F7;
+ border-radius: 20px;
+ }
+ }
+
+ .t {
+ height: 22px;
+ width: 242px;
}
+}
+
+.warm {
+ position: absolute;
+ bottom: 60px;
+ left: 50%;
+ width: 420px;
+ transform:translateX(-50%) ;
+ .icontishi-zhuyi {
+ margin-right:10px ;
+ color: red;
}
-
}
}
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 9e2a0b6..94ba62e 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -47,8 +47,14 @@
<div class="desc desc-suc" v-if="!checking && !hasNewVersion">
褰撳墠宸茬粡鏄渶鏂扮増鏈�
</div>
+
+
+ <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
+ {{verText}}
+ </div>
+
<el-button
- v-if="hasNewVersion && !checking"
+ v-if="hasNewVersion && !checking&&!upgrading"
:loading="upgrading"
type="primary"
style="width: 150px"
@@ -56,21 +62,37 @@
@click="upgradeNewVersion"
>鏇存柊</el-button
>
-
- <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
- {{verText}}
- </div>
</div>
+
+
+
<div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
+ <div class="upload-info"><span class="icon iconfont"></span> 涓婁紶瀹夎杞欢</div>
<div class="upload-top">
- <el-upload
+
+ <div class="upload-container">
+ <div class="upload-fail " v-if="upStatus===0">
+ <i class="icon iconfont upload-icon">
+ 
+ </i>
+ <p>涓婁紶澶辫触锛岃閲嶆柊涓婁紶銆�</p>
+ </div>
+
+ <div class="upload-success" v-if="upStatus===1">
+ <i class="icon iconfont upload-icon">
+ 
+ </i>
+ <p>涓婁紶鎴愬姛锛岃鐐瑰嚮鏇存柊鎸夐挳寮�濮嬫洿鏂般��</p>
+ </div>
+
+ <el-upload
class="upload-demo"
drag
action
v-show="!shengjiing"
:http-request="uploadPkg"
:limit="1"
- >
+ >
<i class="el-icon-upload"></i>
<div
class="el-upload__text"
@@ -83,6 +105,8 @@
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
+ </div>
+
<span
class="icon iconfont spin-bg"
:class="shengjiing ? 'spin-bg-rot' : ''"
@@ -91,6 +115,7 @@
>
<div class="desc" v-if="shengjiing">姝ｅ湪杩涜鏇存柊鈥︹��</div>
<el-button
+ v-if="!upgrading"
type="primary"
style="width: 150px; font-size: 15px"
@click="upgrade"
@@ -168,7 +193,8 @@
upgrading: false,
checking: true,
newVersionName: "",
- hasNewVersion: true,
+ hasNewVersion: false,
+ upStatus:'',
sysSetList: [
{ title: "鑷姩娓呯悊杞欢鍖呯紦瀛�", val: false, name: "sys_auto_clean" },
{ title: "鏇存柊鎻愰啋", val: false, name: "sys_update_notice" },
@@ -251,7 +277,16 @@
uploadUpgradePkg(param).then((res) => {
this.upgrading = false;
this.pkgID = res.data.id;
- });
+ this.upStatus = 1
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ }).catch(()=>{
+ this.upStatus = 0
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ })
},
upgrade() {
this.shengjiing = true;
@@ -314,6 +349,7 @@
}
});
},
+
},
};
</script>
@@ -341,7 +377,6 @@
border-right: 4px solid #f8f8f8;
.menu-item {
- background-color: #F2F2F7;
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
@@ -365,7 +400,7 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
.iconfont {
color: #fff !important;
}
@@ -374,13 +409,7 @@
}
}
.menu-item:hover {
- background-color: var(--colorCard);
- .iconfont {
- color: #fff;
- }
- .menu-text {
- color: #fff;
- }
+ background-color: #F2F2F7;
}
}
.cluster-right {
@@ -423,8 +452,35 @@
.net-set {
display: flex;
flex-direction: column;
- justify-content: space-between;
+ justify-content: start;
height: 95%;
+ padding: 0 30px;
+ .el-radio-group {
+ margin-top:33px ;
+ .el-radio-button__inner {
+ font-size: 14px;
+ width: 84px;
+ height: 28px;
+ padding: 0;
+ border-radius: 20px;
+ text-align: center;
+ line-height: 28px;
+ background: #F2F2F7 !important;
+ border: none !important;
+ box-shadow:none !important;
+ &:hover {
+ color: var(--colorCard) !important;
+ }
+
+ }
+ & label.is-active .el-radio-button__inner {
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
+ }
+ }
@keyframes spin {
from {
transform: rotate(0deg);
@@ -436,19 +492,17 @@
.spin-bg {
color: rgb(206, 205, 205);
- font-size: 100px;
- margin-bottom: 20px;
+ font-size: 60px;
+ margin-top: 60px;
+ margin-bottom:15px ;
}
.spin-bg-rot {
animation: spin 0.8s linear infinite;
}
.desc {
- height: 20px;
- line-height: 20px;
- font-size: 15px;
- color: rgb(231, 121, 58);
- margin-bottom: 20px;
- font-weight: 600;
+ font-weight: bold;
+ font-size: 16px;
+ color: #333333;
}
.update-center {
display: flex;
@@ -456,26 +510,72 @@
align-items: center;
.desc-suc {
- color: #3a8120;
+ color: #333;
+ border-radius: 8px;
}
.el-button {
- width: 100px;
+ margin-top: 48px;
+ width: 150px;
+ height: 40px;
+ border-radius: 25px;
font-size: 15px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
.text-desc{
- width: 260px;
+ width: 90%;
+ height: 150px;
margin-top: 20px;
- background-color: rgba(250, 250, 250, 1);
- border: 1px dashed rgba(220, 220, 220, 1);
- height: 100px;
- padding: 10px 20px;
- color: rgba(94, 94, 94, 1);
+ background-color: #F2F2F7;
+ padding: 20px 30px;
+ color: #333;
text-align: left;
- font-size: 14px;
- border-radius:5px ;
+ font-size: 12px;
+ border-radius:8px ;
}
}
.upload-center {
+ margin-top:44px ;
+ .upload-info {
+ margin-bottom:20px ;
+ text-align: left;
+ font-weight: bold;
+ font-size: 14px;
+ color: #333333;
+ }
+ .upload-container {
+ position: relative;
+ width: 412px;
+ height: 174px;
+ background-color: #fff;
+ border-radius: 8px;
+ .upload-success,.upload-fail {
+ position: absolute;
+ z-index: 1;
+ width: 100%;
+ height: 174px;
+ top: 0;
+ left: 0;
+ background-color: #fff;
+ font-weight: bold;
+ font-size: 10px;
+
+ transition: all 1000ms linear 0;
+ -o-transition: all 1000ms linear 0; /*鍏煎parsto鍐呮牳*/
+ -moz-transition: all 1000ms linear 0; /*鍏煎gecko鍐呮牳*/
+ -webkit-transition: all 1000ms linear 0; /*鍏煎webkit鍐呮牳*/
+ }
+ .upload-icon {
+ display: block;
+ margin-top: 32px;
+ margin-bottom:42px ;
+ font-size: 50px;
+ }
+ }
+
.update-center {
height: 160px;
@@ -494,7 +594,13 @@
margin-bottom: 10px;
}
.el-button {
- width: 120px;
+ width: 150px;
+ height: 40px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
.el-button--small {
font-size: 14px;
@@ -507,8 +613,47 @@
box-sizing: border-box;
flex-direction: column;
+ .el-upload {
+ width: 340px !important;
+ height: 117.87px !important;
+ margin: 28px auto;
+ .el-upload-dragger {
+ width: 100% !important;
+ height: 100% !important;
+ i {
+ display: none !important;
+ }
+ .el-upload__text {
+ color: #828282 !important;
+ margin-top: 52px !important;
+ font-size: 14px !important;
+ }
+ .el-loading-text {
+ font-size: 14px !important;
+ color: #333333 !important;
+ }
+ }
+ }
+
+ .el-upload.el-upload--text .el-upload-dragger:hover {
+ border-color: var(--colorCard) !important;
+ }
+
+ em {
+ color: var(--colorCard) !important;
+ }
+
.uploader-btn {
- margin-top: 15px;
+ width: 150px;
+ height: 40px;
+ margin-top: 158px;
+ margin-bottom:25px ;
+ background: var(--colorCard) !important;
+ border: none !important;
+ border-radius: 25px !important;
+ &:hover {
+ color: white !important;
+ }
}
}
.up-text {
@@ -525,6 +670,10 @@
}
}
.cur-version {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ transform: translateX(-50%);
font-size: 14px;
}
}
@@ -537,7 +686,7 @@
background-color: #f8f8f8;
justify-content: space-between;
border-radius: 12px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
padding-left:20px ;
.name {
font-size: 14px;
@@ -557,12 +706,12 @@
margin-right: 17px;
}
.is-checked .el-switch__core{
- background-color: #4E97FF !important;
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
}
}
.save-btn {
- background-color: #3d68e1;
width: 240px;
height: 40px;
margin: 0 auto;
@@ -571,7 +720,14 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
}
+
}
+
</style>
--
Gitblit v1.8.0