From 0cfab2b97c0913d2f5ccd55760f8768316f91138 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 11:34:02 +0800
Subject: [PATCH] 系统维护v0
---
src/pages/vindicate/views/sysInfo.vue | 2
src/pages/vindicate/views/backUp.vue | 3
src/pages/vindicate/views/updateSettings.vue | 5
src/pages/settings/views/generalSettings.vue | 4
src/pages/vindicate/views/restartSettings.vue | 218 +++++++++++++++++++++++++++----
src/pages/vindicate/views/systemClean.vue | 181 +++++++++++--------------
6 files changed, 281 insertions(+), 132 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 6fec488..7c3759a 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -1040,6 +1040,9 @@
font-size: 16px;
font-weight: 700;
}
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
}
button:first-child {
background-color: #e0e0e0;
@@ -1049,6 +1052,7 @@
}
button:last-child {
background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
span {
color: #fff;
}
diff --git a/src/pages/vindicate/views/backUp.vue b/src/pages/vindicate/views/backUp.vue
index 2f3071f..075b2a4 100644
--- a/src/pages/vindicate/views/backUp.vue
+++ b/src/pages/vindicate/views/backUp.vue
@@ -144,6 +144,7 @@
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
.backup-content {
@@ -153,6 +154,8 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
.backup-center {
height: 100%;
width: 280px;
diff --git a/src/pages/vindicate/views/restartSettings.vue b/src/pages/vindicate/views/restartSettings.vue
index d64300b..f19c4d4 100644
--- a/src/pages/vindicate/views/restartSettings.vue
+++ b/src/pages/vindicate/views/restartSettings.vue
@@ -1,7 +1,9 @@
<template>
<div class="restart"
v-loading="loading"
- :element-loading-text="loadingText"
+ :element-loading-text="loadingText"
+ element-loading-spinner="restart-loading"
+ element-loading-background="rgba(0, 0, 0, 0.35)"
>
<div class="restart-set">
<div class="t">閲嶅惎璁剧疆</div>
@@ -76,6 +78,7 @@
<div class="bar" v-if="every != 'close'">
<div class="name">閲嶅惎鏃堕棿</div>
<el-time-picker
+ popper-class="restartTimePicker"
v-model="time"
:picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
value-format="HH:mm"
@@ -83,6 +86,7 @@
placeholder="浠绘剰鏃堕棿鐐�"
size="small"
@change="updateExpression"
+ :popper-append-to-body="false"
></el-time-picker>
</div>
</div>
@@ -101,13 +105,14 @@
export default {
data() {
return {
+ warnSpn: "\ue71c",
time: "",
saveBtn: false,
timer: null,
probeSum: 0,
cronText: "",
loading:false,
- loadingText:"",
+ loadingText:"鏅鸿兘璁＄畻鑺傜偣姝ｅ湪閲嶅惎锛岃鑰愬績绛夊緟......",
cronValueObj: {
min: "*",
hour: "*",
@@ -195,10 +200,24 @@
this.$router.push("/");
},
restart() {
- this.$confirm("纭畾瑕侀噸鍚鑺傜偣鍚�?","鎻愮ず", {
- type:"warning",
- cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure",
+ const h = this.$createElement;
+ const icon = this.$msgbox( {
+ title: "",
+ message: h(
+ "div",
+ {
+ style:
+ "display: flex; flex-direction: column; justify-content: center; align-items: center;",
+ },
+ [
+ h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),
+ h("span", { class: "warn-title" }, "鑺傜偣閲嶅惎 "),
+ h("span", { class: "warn-dec" }, "纭畾瑕侀噸鍚鑺傜偣鍚�??"),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
}).then(() => {
this.loading = true;
this.loadingText = "鏅鸿兘璁＄畻鑺傜偣姝ｅ湪閲嶅惎锛岃鑰愬績绛夊緟..."
@@ -319,47 +338,57 @@
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
.restart {
margin: 0 auto;
- padding: 20px;
+ padding: 10px;
+ font-size: 16px;
+ color: #333;
+ font-weight: 700;
+ vertical-align: middle;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
.t {
+ height: 48px;
+ background: #F2F2F7;
box-sizing: border-box;
text-align: left;
- width: 70%;
- margin: 0 auto;
- padding: 10px;
- font-size: 16px;
+ width: 100%;
+ padding: 10px 20px;
+ line-height: 32px;
+ border-radius:8px ;
}
.bar {
height: 50px;
-
- width: 70%;
- background: rgba(248, 248, 248, 1);
- margin: 0 auto;
+ width: 100%;
+ background: #F2F2F7;
min-width: 300px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
- padding: 0 20px;
+ padding: 0 50px;
align-items: center;
- border-radius: 10px;
- margin-bottom: 10px;
+ border-radius: 8px;
+ margin-top: 4px;
+ margin-bottom: 4px;
.reset-btn {
- width: 70px;
- height: 32px;
- border-radius: 5px;
+ width: 150px;
+ height: 32px;
+ border-radius: 20px;
+ background: rgba(78, 148, 255, 0.1) !important;
+ border: 1px solid var(--colorCard);
+ color: #333333;
+ font-weight: bold;
+ font-size: 14px;
}
- .el-select {
- width: 100%;
- }
+
.name {
min-width: 150px;
text-align: left;
- font-size: 14px;
}
.el-input__inner::placeholder {
- color: rgba(107, 107, 107, 1);
+ color: rgba(107, 107, 107, 1) !important;
}
.el-input--small .el-input__inner {
height: 32px;
@@ -375,10 +404,143 @@
.el-date-editor.el-input__inner {
width: 100%;
}
+
+
+ }
+
+ .el-select {
+ width: 509px;
+ height: 32px;
+
+ input {
+ background: #FBFAFF !important;
+ border-radius: 20px !important;
+ text-align: center;
+ }
+ }
+ .el-date-editor {
+ width: 509px;
+ height: 32px;
+ input {
+ background: #FBFAFF !important;
+ border-radius: 20px !important;
+ text-align: center;
+ }
+
+ .el-input__prefix {
+ left: 215px !important;
+ }
}
.save-btn {
- width: 260px;
- margin-top: 50px;
+ width: 251px;
+ height: 40px;
+ margin-top: 80px;
+ background: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ border-radius: 25px;
}
}
+
+.restartTimePicker {
+ width: 509px !important;
+ background-color: #FBFAFF !important;
+ margin-top:8px !important;
+ /* .popper__arrow::after {
+ display: none !important;
+ } */
+ }
+</style>
+
+<style lang="scss">
+.warn-icon {
+ color: #fe6d68;
+ font-size: 40px;
+ margin-top: 11px;
+ }
+ .warn-title {
+ font-weight: bold;
+ font-size: 16px;
+ margin: 6px;
+ line-height: 22px;
+ }
+ .warn-dec {
+ font-weight: bold;
+ font-size: 14px;
+ color: #828282;
+ line-height: 20px;
+ }
+ .el-message-box__headerbtn {
+ top: 12px;
+ }
+ .el-message-box__headerbtn .el-message-box__close {
+ color: #333333;
+ font-weight: bold;
+ }
+ .el-message-box__btns {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ .el-button:focus,
+ .el-button:hover {
+ background-color: none;
+ border: none;
+ }
+ button {
+ width: 175px;
+ height: 40px;
+ border-radius: 25px;
+ span {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
+ }
+ button:first-child {
+ background-color: #e0e0e0;
+ span {
+ color: #333333;
+ }
+ }
+ button:last-child {
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ span {
+ color: #fff;
+ }
+ }
+ }
+
+ .restart .el-loading-mask .el-loading-spinner {
+ top: 40%;
+ }
+
+ .restart .el-loading-mask .el-loading-spinner .el-loading-text {
+ font-size: 16px;
+ font-weight: bold;
+ color: #FFFFFF;
+ margin-top:20px ;
+ }
+
+ .restart .el-loading-mask .restart-loading {
+ background-image: url("/images/desktop/safari.png");
+ display: block;
+ width: 50px;
+ height: 50px;
+ margin-bottom:20px ;
+ background-size:50px ;
+ margin: 0 auto;
+ animation: rotate 6s linear infinite;
+ }
+
+
+@keyframes rotate{
+ 0%{
+ transform: rotateZ(0deg);/*浠�0搴﹀紑濮�*/
+ }
+ 100%{
+ transform: rotateZ(360deg);/*360搴︾粨鏉�*/
+ }
+}
</style>
diff --git a/src/pages/vindicate/views/sysInfo.vue b/src/pages/vindicate/views/sysInfo.vue
index d42de03..c4eb552 100644
--- a/src/pages/vindicate/views/sysInfo.vue
+++ b/src/pages/vindicate/views/sysInfo.vue
@@ -192,6 +192,8 @@
.v-sys-info {
width: 100%;
background-color: #FBFAFF;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
.el-dialog__header {
padding: 15px 20px 10px;
text-align: left;
diff --git a/src/pages/vindicate/views/systemClean.vue b/src/pages/vindicate/views/systemClean.vue
index 923b54c..703213a 100644
--- a/src/pages/vindicate/views/systemClean.vue
+++ b/src/pages/vindicate/views/systemClean.vue
@@ -1,11 +1,28 @@
<template>
<div class="clear" v-loading="loading" :element-loading-text="loadingText">
- <div class="head">
+ <div class="clear-list">
+ <div class="cap">
+ <div class="cap-bar">
+ <!-- <div class="inner-bar" :style="`width: ${100-percent}%;`"></div> -->
+ <el-progress v-if="percent>25" type="circle" :percentage="100-percent" stroke-width="10"></el-progress>
+ <el-progress v-if="percent<=25&&percent>0" type="circle" :percentage="100-percent" status="warning" stroke-width="10"></el-progress>
+ <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>
+ </div>
+ </div>
+
+ <el-button type="primary" @click="deleteData">鏁版嵁娓呯悊</el-button>
+ </div>
+
+
+ <div class="clear-list">
<span class="t">璇烽�夋嫨瑕佹竻鐞嗙殑鏁版嵁鑼冨洿</span>
<el-date-picker
style="width: 100%"
v-model="dataRange"
- value-format="yyyy-MM-dd"
+ value-format="yyyy-MM-dd"
type="daterange"
align="right"
size="small"
@@ -14,28 +31,11 @@
end-placeholder="缁撴潫鏃ユ湡"
:picker-options="pickerOptions"
></el-date-picker>
- </div>
+ </div>
- <div class="desc">
- <div class="disk-img">
- <span class="icon iconfont">{{"\ue8b1"}}</span>
-
- </div>
- <div class="cap">
- <div class="cap-text">
- <span>纾佺洏鍙敤: {{ percent }}%</span>
- </div>
- <div class="cap-bar">
- <div class="inner-bar" :style="`width: ${100-percent}%;`"></div>
- </div>
- </div>
-
- <el-button type="primary" @click="deleteData">鏁版嵁娓呯悊</el-button>
-
- <div class="warm">
+ <div class="warm">
<i class="iconfont icontishi-zhuyi"></i>
<span class="text">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�!</span>
- </div>
</div>
</div>
</template>
@@ -103,95 +103,72 @@
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
+.container {
+ background-color: #FBFAFF;
+}
+
.clear {
- margin: 0 auto;
- padding: 20px;
- .head {
- height: 50px;
- background-color: rgba(248, 248, 248, 1);
- border-radius: 10px;
+ padding: 10px;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
+
+ .clear-list {
+ background: #F2F2F7;
+ border-radius: 8px;
+ height: 114px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 45px;
+
+ &:first-child {
+ border-bottom: 1px solid #E1E0E6;
+ }
+
+ .cap {
display: flex;
align-items: center;
- justify-content: space-around;
- box-sizing: border-box;
- padding: 0 20px;
- width: 560px;
- margin: 0 auto;
- .t {
- font-size: 14px;
- min-width: 175px;
- text-align: left;
- }
- .el-range-editor--small.el-input__inner {
- border: none;
+ .cap-bar {
+ width: 70px;
+ height: 70px;
+ div {
+ width: 100%;
+ height: 100%;
+ .el-progress-circle {
+ width: 100% !important;
+ height: 100% !important;
+ }
+ &::after {
+ position: relative;
+ top: -68%;
+ content: '\e6e8';
+ width: 25px;
+ height: 25px;
+ display: inline-block;
+ margin: auto;
+ font-family: "iconfont" !important;
+ font-size: 25px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ }
}
- .el-range-editor--small .el-range-separator {
- line-height: 26px;
+ svg {
+ width: 70px;
+ height: 70px;
+ }
+ .el-progress__text {
+ display: none !important;
}
}
- .desc {
- margin-top: 50px;
- .disk-img {
- height: 100px;
- width: 100px;
- margin: 0 auto;
- margin-bottom: 10px;
- // background-color: aquamarine;
- .iconfont{
- font-size: 82px;
- color: #3a8120;
- }
- }
- .cap {
- height: 50px;
- margin: 0 auto;
- width: 160px;
- margin-bottom: 20px;
- .cap-bar {
- height: 10px;
- background: rgb(239, 240, 236);
- //
- margin: 0 auto;
- border-radius: 2px;
-
- .inner-bar {
- background: #3a8120;
- height: 100%;
- border-radius: 2px;
- }
- }
- .cap-text {
- text-align: right;
- height: 25px;
- text-align: right;
- line-height: 25px;
- font-size: 12px;
- }
- }
- .el-button--primary {
- width: 200px;
- font-size: 15px;
- }
- .warm {
- line-height: 30px;
- height: 30px;
- margin-top: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- .iconfont {
- font-size: 16px;
-
- color: #e99038;
- margin-right: 5px;
- }
- .text {
- color: rgb(175, 175, 175);
- font-size: 14px;
- }
- }
}
+
}
+}
+
+
</style>
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 263af29..9e2a0b6 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -320,6 +320,7 @@
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
.update-set-content {
height: 100%;
@@ -328,8 +329,8 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- border-top: 4px solid #f8f8f8;
- border-left: 4px solid #f8f8f8;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
.cluster-center {
height: 100%;
width: 300px;
--
Gitblit v1.8.0