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/updateSettings.vue | 524 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 424 insertions(+), 100 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index dac6c1f..aeb3ad3 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -1,6 +1,6 @@
<template>
<div class="all">
- <div class="cluster-content">
+ <div class="update-set-content">
<div class="cluster-center" ref="left">
<div
class="menu-item"
@@ -17,41 +17,95 @@
</div>
<div class="cluster-right">
<div class="net-set" v-if="activePage == 0">
- <el-radio-group v-model="radio2" size="medium">
+ <!-- <el-radio-group
+ v-model="radio2"
+ size="medium"
+ fill="rgba(61, 104, 225, 1)"
+ >
<el-radio-button label="妫�鏌ユ洿鏂�"></el-radio-button>
<el-radio-button label="涓婁紶鏇存柊"></el-radio-button>
- </el-radio-group>
+ </el-radio-group> -->
- <div
- class="update-center"
- v-if="radio2 == '妫�鏌ユ洿鏂�'"
- v-loading="upgrading"
- element-loading-text="鏇存柊涓紝璇风◢鍚�"
- element-loading-spinner="el-icon-loading"
- >
- <span class="icon iconfont spin-bg"></span>
- <div class="desc" v-if="hasNewVersion">
- 妫�鏌ュ埌鏈�鏂扮増鏈細{{ newVersionName }}
+ <div class="button-group">
+ <div class="bottom">
+ <div class="top" :class="{ 'toggle':radio2 !== '妫�鏌ユ洿鏂�' }"></div>
+ <div class="label-left" :class="{ 'toggle':radio2 == '妫�鏌ユ洿鏂�' }" @click="radio2 = '妫�鏌ユ洿鏂�'">妫�鏌ユ洿鏂�</div>
+ <div class="label-right" :class="{ 'toggle':radio2 !== '妫�鏌ユ洿鏂�' }" @click="radio2 = '涓婁紶鏇存柊'">涓婁紶鏇存柊</div>
</div>
- <div class="desc desc-suc" v-else>宸叉槸鏈�鏂扮増鏈�</div>
+ </div>
+
+ <div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'">
+ <img v-if="!upgrading&&hasNewVersion||checking"
+ class="spin-bg"
+ src="/images/vindicate/妫�娴嬪姞杞�.png"
+ :class="upgrading || checking ? 'spin-bg-rot' : ''"
+ />
+ <img v-if="upgrading&&hasNewVersion"
+ class="spin-bg"
+ src="/images/vindicate/鍔犺浇.png"
+ />
+ <img v-if="!checking&&!hasNewVersion"
+ class="spin-bg"
+ src="/images/vindicate/宸叉槸鏈�鏂扮増鏈�.png"
+ />
+ <div class="desc" v-if="checking && !upgrading">
+ 姝ｅ湪妫�娴嬬増鏈洿鏂扳�︹��
+ </div>
+ <div class="desc" v-if="!checking && hasNewVersion">
+ {{ upgrading ? "姝ｅ湪鍗囩骇鑷�" : "妫�鏌ュ埌" }}鏈�鏂扮増鏈細{{
+ newVersionName
+ }}
+ </div>
+ <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"
+ v-if="hasNewVersion && !checking&&!upgrading"
+ :loading="upgrading"
type="primary"
+ style="width: 150px"
size="small"
@click="upgradeNewVersion"
>鏇存柊</el-button
>
</div>
+
+
+
<div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
+ <div class="upload-info"><img src="/images/vindicate/閾炬帴 1.png" style="width: 14px;"> 涓婁紶瀹夎杞欢</div>
<div class="upload-top">
- <!-- <div class="up-text">涓婁紶鏇存柊鏂囦欢锛屽彧鑳戒笂浼犳枃浠�</div> -->
- <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
+ ref="myUpload"
class="upload-demo"
drag
action
+ v-show="!shengjiing&&upStatus===''"
:http-request="uploadPkg"
:limit="1"
- >
+ >
<i class="el-icon-upload"></i>
<div
class="el-upload__text"
@@ -63,16 +117,22 @@
</div>
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
- <!-- <fileUploader
- single
- url="/version/upload"
- @complete="onFileUpload"
- @file-added="onFileAdded"
- /> -->
+
+ </div>
+
+ <span
+ class="icon iconfont spin-bg"
+ :class="shengjiing ? 'spin-bg-rot' : ''"
+ v-if="shengjiing"
+ ></span
+ >
+ <div class="desc" v-if="shengjiing">姝ｅ湪杩涜鏇存柊鈥︹��</div>
<el-button
+ v-if="!upgrading"
type="primary"
- style="width: 150px"
+ style="width: 150px; font-size: 15px"
@click="upgrade"
+ size="small"
class="uploader-btn"
:loading="shengjiing"
>{{ shengjiing ? "鏇存柊涓�" : "鏇存柊" }}</el-button
@@ -82,7 +142,6 @@
<div class="cur-version">褰撳墠鐗堟湰锛歿{ curVersionName }}</div>
</div>
-
<div class="wifi" v-if="activePage == 1">
<div class="content">
<div class="title">绯荤粺鏇存柊璁剧疆</div>
@@ -106,6 +165,8 @@
<div class="name">{{ item.title }}</div>
<el-switch
v-model="item.val"
+ active-value="1"
+ inactive-value="0"
active-color="rgba(61, 104, 225, 1)"
@change="switchChange(item)"
>
@@ -121,7 +182,6 @@
<script>
import {
getDevInfo,
- fileUpload,
doUpgrade,
checkNewVersion,
upgradeNewVersion,
@@ -130,33 +190,24 @@
getSettings,
updateSettings,
} from "@/api/system";
+import { getUrlKey } from "@/api/utils";
export default {
- filters: {
- nameFilter(v) {
- switch (v) {
- case value:
- break;
-
- default:
- break;
- }
- return;
- },
- },
data() {
return {
radio2: "妫�鏌ユ洿鏂�",
activePage: 0,
patchUpdateStatus: "",
probeSum: 0,
- timer: null,
+ timer: null,verText:"",
patchFile: {},
fileAdded: false,
curVersionName: "",
shengjiing: false,
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" },
@@ -169,13 +220,19 @@
],
pkgID: "",
tabList: [
- { name: "绯荤粺鏇存柊", icon: "\ue6f2" },
- { name: "鏇存柊璁剧疆", icon: "\ue6db" },
+ { name: "绯荤粺鏇存柊", icon: "\ue735" },
+ { name: "鏇存柊璁剧疆", icon: "\ue733" },
],
};
},
mounted() {
- this.fetchUpgradInfo();
+ const isAutoUpdate = getUrlKey("autoUpdate");
+ if (isAutoUpdate==1) {
+ this.checking = false
+ this.upgradeNewVersion()
+ }else{
+ this.fetchUpgradInfo();
+ }
this.fetchSettings();
},
methods: {
@@ -196,17 +253,25 @@
});
},
fetchUpgradInfo() {
+ this.checking = true;
checkNewVersion().then((res) => {
+ setTimeout(() => {
+ this.checking = false;
+ }, 800);
this.newVersionName = res.data.newVersion;
this.curVersionName = res.data.curVersion;
this.hasNewVersion = res.data.hasNewVersion;
+ this.verText=res.data.newVersionInfo
+
+ if (!this.hasNewVersion) {
+ this.upgrading = false;
+ }
});
},
upgradeNewVersion() {
this.upgrading = true;
upgradeNewVersion().then((res) => {
- this.upgrading = false;
- this.$message.success("鏇存柊鐗堟湰鎴愬姛");
+ this.$notify.success("鏇存柊鐗堟湰鎴愬姛");
this.fetchUpgradInfo();
});
},
@@ -225,7 +290,18 @@
uploadUpgradePkg(param).then((res) => {
this.upgrading = false;
this.pkgID = res.data.id;
- });
+ this.upStatus = 1
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ }).catch(()=>{
+ this.upgrading = false;
+ this.$refs.myUpload.clearFiles()
+ this.upStatus = 0
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ })
},
upgrade() {
this.shengjiing = true;
@@ -233,7 +309,7 @@
id: this.pkgID,
}).then((res) => {
this.shengjiing = false;
- this.$message.success("鏇存柊鐗堟湰鎴愬姛");
+ this.$notify.success("鏇存柊鐗堟湰鎴愬姛");
this.pkgID = "";
});
},
@@ -279,68 +355,78 @@
this.activePage = typ;
},
switchChange(item) {
- let data = {
+ updateSettings({
name: item.name,
value: item.val,
- };
- updateSettings(data).then((res) => {
+ }).then((res) => {
if (res.code == 200) {
- this.$message.success("鏇存柊鎴愬姛");
+ this.$notify.success("鏇存柊鎴愬姛");
}
});
},
+
},
};
</script>
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
-
-.cluster-content {
+.update-set-content {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ border-top:4px solid rgb(242, 242, 247) ;
+ border-left:4px solid rgb(242, 242, 247) ;
.cluster-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid #f8f8f8;
+ padding: 9px 10px 0 10px;
+ border-right: 4px solid rgb(242, 242, 247);
.menu-item {
- background-color: #f8f8f8;
- height: 50px;
- margin-bottom: 10px;
+ height: 56px;
+ margin-bottom: 4px;
border-radius: 8px;
- line-height: 50px;
- box-sizing: border-box;
- font-size: 14px;
+ line-height: 56px;
+ box-sizing: border-box;
cursor: pointer;
- padding: 0 20px;
+ padding: 0 15px;
display: flex;
justify-content: space-between;
.con {
.iconfont {
+ font-size: 20px;
+ line-height: 32px;
+ width: 32px;
+ height: 26px;
margin-right: 10px;
+ color: #333;
}
.menu-text {
- font-size: 15px;
+ font-size: 16px;
+ font-weight: 700;
}
}
}
- .menu-item-active {
- color: #fff;
- background-color: rgba(61, 104, 225, 1);
+ .menu-item-active {
+ background-color: var(--colorCard) !important;
+ .iconfont {
+ color: #fff !important;
+ }
+ .menu-text {
+ color: #fff;
+ }
}
- .menu-item:hover {
- color: #fff;
- background-color: rgba(61, 104, 225, 1);
+ .menu-item:hover {
+ background-color: #F2F2F7;
}
}
.cluster-right {
@@ -349,7 +435,6 @@
overflow: auto;
box-sizing: border-box;
position: relative;
- padding: 20px 40px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -384,37 +469,196 @@
.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;
+ }
+ }
+ } */
+ .button-group {
+ margin: 0 auto;
+ margin-top: 30px;
+ width: 168px;
+ height: 28px;
+ .bottom {
+ position: relative;
+ height: 100%;
+ background: #F2F2F7;
+ border-radius: 20px;
+ cursor: pointer;
+ .top {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 84px;
+ height: 28px;
+ background: #4E94FF;
+ border-radius: 20px;
+ transition: all .2s linear;
+ &.toggle {
+ left: 84px;
+ }
+ }
+ .label-left {
+ position: absolute;
+ width: 84px;
+ height: 28px;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ font-size: 14px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #333333;
+ &.toggle {
+ color: #fff;
+ }
+ }
+ .label-right {
+ position: absolute;
+ width: 84px;
+ height: 28px;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ font-size: 14px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #333333;
+ &.toggle {
+ color: #fff;
+ }
+ }
+ }
+ }
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+ .spin-bg {
+
+ width: 60px;
+ margin-top: 60px;
+ margin-bottom:15px ;
+ }
+ .spin-bg-rot {
+ animation: spin 0.8s linear infinite;
+ }
+ .desc {
+ font-weight: bold;
+ font-size: 16px;
+ color: #333333;
+ }
.update-center {
display: flex;
flex-direction: column;
align-items: center;
- .spin-bg {
- color: rgb(206, 205, 205);
- font-size: 110px;
- margin-bottom: 5px;
- }
-
- .desc {
- height: 20px;
- line-height: 20px;
- font-size: 15px;
- color: rgb(231, 121, 58);
- margin-bottom: 20px;
- font-weight: 600;
- }
.desc-suc {
- color: rgb(58, 231, 58);
+ 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: 90%;
+ height: 150px;
+ margin-top: 20px;
+ background-color: #F2F2F7;
+ padding: 20px 30px;
+ color: #333;
+ text-align: left;
+ 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-fail .iconfont{
+ color: rgb(254, 109, 104);
+ }
+
+ .upload-success .iconfont{
+ color: rgb(78, 148, 255);
+ }
+
+
+ .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;
@@ -433,7 +677,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;
@@ -446,8 +696,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 {
@@ -464,35 +753,63 @@
}
}
.cur-version {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ transform: translateX(-50%);
font-size: 14px;
}
}
.wifi {
- .content {
- margin-bottom: 20px;
- }
+ padding: 10px 10px 0 10px;
.bar {
display: flex;
align-items: center;
height: 50px;
- padding: 0 25px;
- background-color: #f8f8f8;
+ background-color: #F2F2F7;
justify-content: space-between;
border-radius: 12px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
+ padding-left:20px ;
.name {
- font-size: 15px;
+ font-size: 14px;
+ font-weight: 700;
}
}
.title {
text-align: left;
- padding: 10px;
+ padding: 17px 0 17px 25px;
font-size: 16px;
+ color:#333;
+ font-weight: 700;
+ }
+ .el-switch{
+ width: 40px;
+ height: 14px;
+ margin-right: 17px;
+ }
+
+ .el-switch__core {
+ width: 30px !important;
+ height: 14px !important;
+ &::after {
+ top: 0px !important;
+ left: 0px !important;
+ width: 12px !important;
+ height: 12px !important;
+ }
+ }
+
+ .is-checked .el-switch__core{
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ &::after {
+ margin-left: 16px
+ }
}
}
.save-btn {
- background-color: #3d68e1;
width: 240px;
height: 40px;
margin: 0 auto;
@@ -501,7 +818,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