From 6a5962fe9544005dba620b00fb36c25fe2da4e76 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 十一月 2021 15:24:46 +0800
Subject: [PATCH] 后端没修改的情况下添加默认背景图
---
src/pages/vindicate/views/systemClean.vue | 390 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 284 insertions(+), 106 deletions(-)
diff --git a/src/pages/vindicate/views/systemClean.vue b/src/pages/vindicate/views/systemClean.vue
index 923b54c..50476c8 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 class="useable">纾佺洏鍙敤: {{ percent }}%</span>
+ </div>
+ </div>
+
+ <el-button type="primary" @click="deleteData">鏁版嵁娓呯悊</el-button>
+ </div>
+
+
+ <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"
+ 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>
@@ -43,6 +43,25 @@
<script>
import { deleteData } from "@/api/system";
export default {
+ created(){
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ var year=end.getFullYear();
+ var month=end.getMonth()+1;
+ var day=end.getDate();
+ month=month<10?"0"+month:month;
+ day=day<10?"0"+day:day;
+ const endTime = year+"-"+month+"-"+day
+
+ var year2=start.getFullYear();
+ var month2=start.getMonth()+1;
+ var day2=start.getDate();
+ month2=month2<10?"0"+month2:month2;
+ day2=day2<10?"0"+day2:day2;
+ const startTime = year2+"-"+month2+"-"+day2
+ this.dataRange = [startTime,endTime]
+ },
data() {
return {
pickerOptions: {
@@ -51,10 +70,35 @@
day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
return time.getTime() > day;
},
+ shortcuts: [{
+ text: '鏈�杩戜竴鍛�',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '鏈�杩戜竴涓湀',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '鏈�杩戜笁涓湀',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
},
loading: false,
loadingText: '',
- dataRange: []
+ dataRange: [],
};
},
props:["free","full"],
@@ -70,12 +114,26 @@
return
}
const [showStartTime, showEndTime] = this.dataRange
- this.$confirm(`${showStartTime} 鑷� ${showEndTime} 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵`, "鎻愮ず",{
- 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" }, '\ue71c'),
+ h("span", { class: "warn-title" }, "鎻愮ず "),
+ h("span", { class: "warn-dec" }, `${showStartTime} 鑷� ${showEndTime} 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵`),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ })
+
.then(() => {
this.loading = true
this.loadingText = "姝ｅ湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒"
@@ -83,6 +141,7 @@
startTime: showStartTime,
endTime: showEndTime,
})
+
.then((resp) => {
if (resp.success) {
this.loading = false
@@ -103,95 +162,214 @@
<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;
+ position: relative;
+ padding: 10px;
+ border-top: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
+
+ .clear-list {
+ background: #F2F2F7;
+ border-radius: 8px;
+ height: 114px;
+ display: flex;
+ 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;
+ }
+
+ .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;
+
+ .cap-bar {
+ width: 70px;
+ height: 70px;
+ div {
+ width: 100%;
+ height: 100%;
+ .el-progress-circle {
+ width: 100% !important;
+ height: 100% !important;
+ }
+ &::after {
+ position: relative;
+ top: -77%;
+ background-image: url(/images/vindicate/鍐呭瓨.png);
+ width: 38px;
+ height: 35px;
+ background-size:cover;
+ display: inline-block;
+ margin: auto;
+ content: '';
+ }
+ }
+ svg {
+ width: 70px;
+ height: 70px;
+ }
+ .el-progress__text {
+ display: none !important;
+ }
}
- .el-range-editor--small.el-input__inner {
- border: none;
- }
- .el-range-editor--small .el-range-separator {
- line-height: 26px;
- }
- }
- .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-text {
+ color: #333333;
+ font-weight: bold;
+ font-size: 16px;
+ .useable {
+ margin-left:20px ;
}
}
- .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;
- }
+ }
+ .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;
}
- .cap-text {
- text-align: right;
- height: 25px;
- text-align: right;
- line-height: 25px;
+ }
+ .el-range-separator{
+ line-height: 41px;
+ }
+ input {
+ width: 127px;
+ height: 32px;
font-size: 12px;
+ background: #F2F2F7;
+ border-radius: 20px;
}
}
- .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;
- }
- }
+
+ .t {
+ height: 22px;
+ width: 242px;
}
}
+
+.warm {
+ position: absolute;
+ bottom: 60px;
+ left: 50%;
+ width: 420px;
+ transform:translateX(-50%) ;
+ .icontishi-zhuyi {
+ margin-right:10px ;
+ color: red;
+ }
+}
+}
+
+
+</style>
+
+<style scoped 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;
+ }
+ }
+ }
+</style>
+
+<style lang="scss">
+.clean-time-picker {
+ top: 208px !important;
+ left: 343px !important;
+ width: 624px !important;
+
+ .el-picker-panel__sidebar {
+ background: #EEF5FF;
+ button {
+ margin: 10px 0;
+ }
+ }
+
+ tbody {
+ tr:first-child {
+ background: #EEF5FF;
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0