From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 17:42:58 +0800
Subject: [PATCH] bug修复
---
src/pages/vindicate/views/updateSettings.vue | 388 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 242 insertions(+), 146 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 65355e6..0756a4a 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -17,29 +17,52 @@
</div>
<div class="cluster-right">
<div class="net-set" v-if="activePage == 0">
- <el-radio-group
+ <!-- <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="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>
<div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'">
- <img v-if="!upgrading&&hasNewVersion||checking"
+ <img
+ v-if="(!upgrading && hasNewVersion) || checking"
class="spin-bg"
src="/images/vindicate/妫�娴嬪姞杞�.png"
:class="upgrading || checking ? 'spin-bg-rot' : ''"
- />
- <img v-if="upgrading&&hasNewVersion"
+ />
+ <img
+ v-if="upgrading && hasNewVersion"
class="spin-bg"
src="/images/vindicate/鍔犺浇.png"
- />
- <img v-if="!checking&&!hasNewVersion"
+ />
+ <img
+ v-if="!checking && !hasNewVersion"
class="spin-bg"
src="/images/vindicate/宸叉槸鏈�鏂扮増鏈�.png"
- />
+ />
<div class="desc" v-if="checking && !upgrading">
姝ｅ湪妫�娴嬬増鏈洿鏂扳�︹��
</div>
@@ -51,14 +74,16 @@
<div class="desc desc-suc" v-if="!checking && !hasNewVersion">
褰撳墠宸茬粡鏄渶鏂扮増鏈�
</div>
-
- <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
- {{verText}}
+ <div
+ class="text-desc"
+ v-if="hasNewVersion && !checking && !upgrading"
+ >
+ {{ verText }}
</div>
<el-button
- v-if="hasNewVersion && !checking&&!upgrading"
+ v-if="hasNewVersion && !checking && !upgrading"
:loading="upgrading"
type="primary"
style="width: 150px"
@@ -68,50 +93,46 @@
>
</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-info">
+ <img src="/images/vindicate/閾炬帴 1.png" style="width: 14px" />
+ 涓婁紶瀹夎杞欢
+ </div>
<div class="upload-top">
-
<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"
- v-loading="upgrading"
- element-loading-text="涓婁紶涓紝璇风◢鍚�"
- element-loading-spinner="el-icon-loading"
- >
- 灏� .zip 鏇存柊鏂囦欢鎷栧埌姝ゅ锛屾垨 <em> 鐐瑰嚮涓婁紶 </em>
+ <div class="upload-fail" v-if="upStatus === 0">
+ <i class="icon iconfont upload-icon">  </i>
+ <p>涓婁紶澶辫触锛岃閲嶆柊涓婁紶銆�</p>
</div>
- <div class="el-upload__tip" slot="tip"></div>
- </el-upload>
+ <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"
+ accept=".zip,.tar,.gz,.tar.gz"
+ >
+ <i class="el-icon-upload"></i>
+ <div
+ class="el-upload__text"
+ v-loading="upgrading"
+ element-loading-text="涓婁紶涓紝璇风◢鍚�"
+ element-loading-spinner="el-icon-loading"
+ >
+ 灏� .zip 鏇存柊鏂囦欢鎷栧埌姝ゅ锛屾垨 <em> 鐐瑰嚮涓婁紶 </em>
+ </div>
+ <div class="el-upload__tip" slot="tip"></div>
+ </el-upload>
</div>
-
+
<span
class="icon iconfont spin-bg"
:class="shengjiing ? 'spin-bg-rot' : ''"
@@ -174,7 +195,6 @@
<script>
import {
getDevInfo,
- doUpgrade,
checkNewVersion,
upgradeNewVersion,
uploadUpgradePkg,
@@ -190,7 +210,8 @@
activePage: 0,
patchUpdateStatus: "",
probeSum: 0,
- timer: null,verText:"",
+ timer: null,
+ verText: "",
patchFile: {},
fileAdded: false,
curVersionName: "",
@@ -199,7 +220,7 @@
checking: true,
newVersionName: "",
hasNewVersion: false,
- upStatus:'',
+ upStatus: "",
sysSetList: [
{ title: "鑷姩娓呯悊杞欢鍖呯紦瀛�", val: false, name: "sys_auto_clean" },
{ title: "鏇存柊鎻愰啋", val: false, name: "sys_update_notice" },
@@ -219,10 +240,10 @@
},
mounted() {
const isAutoUpdate = getUrlKey("autoUpdate");
- if (isAutoUpdate==1) {
- this.checking = false
- this.upgradeNewVersion()
- }else{
+ if (isAutoUpdate == 1) {
+ this.checking = false;
+ this.upgradeNewVersion();
+ } else {
this.fetchUpgradInfo();
}
this.fetchSettings();
@@ -253,7 +274,7 @@
this.newVersionName = res.data.newVersion;
this.curVersionName = res.data.curVersion;
this.hasNewVersion = res.data.hasNewVersion;
- this.verText=res.data.newVersionInfo
+ this.verText = res.data.newVersionInfo;
if (!this.hasNewVersion) {
this.upgrading = false;
@@ -279,23 +300,32 @@
let param = new FormData();
param.append("archive", params.file);
this.upgrading = true;
- 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);
- })
+ 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() {
+ if (!this.pkgID) {
+ this.$notify.error({
+ title: "澶辫触",
+ message: "璇峰厛涓婁紶鏇存柊鍖�",
+ });
+ return;
+ }
this.shengjiing = true;
upgradePkg({
id: this.pkgID,
@@ -352,18 +382,17 @@
value: item.val,
}).then((res) => {
if (res.code == 200) {
- this.$notify.success("鏇存柊鎴愬姛");
+ this.$notify.success("閰嶇疆鎴愬姛");
}
});
},
-
},
};
</script>
<style lang="scss">
.all {
width: 100%;
- background-color: #FBFAFF;
+ background-color: #fbfaff;
}
.update-set-content {
height: 100%;
@@ -372,23 +401,22 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- border-top:2px solid #E1E0E6 ;
- border-left:2px solid #E1E0E6 ;
+ border-top: 4px solid rgb(242, 242, 247);
+ border-left: 4px solid rgb(242, 242, 247);
.cluster-center {
height: 100%;
width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 24px 10px 0 10px;
- border-right: 4px solid #f8f8f8;
-
+ padding: 9px 10px 0 10px;
+ border-right: 4px solid rgb(242, 242, 247);
.menu-item {
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
line-height: 56px;
- box-sizing: border-box;
+ box-sizing: border-box;
cursor: pointer;
padding: 0 15px;
display: flex;
@@ -404,21 +432,21 @@
}
.menu-text {
font-size: 16px;
- font-weight: 700;
+ font-weight: 700;
}
}
}
- .menu-item-active {
+ .menu-item-active {
background-color: var(--colorCard) !important;
- .iconfont {
- color: #fff !important;
- }
- .menu-text {
- color: #fff;
- }
+ .iconfont {
+ color: #fff !important;
+ }
+ .menu-text {
+ color: #fff;
+ }
}
- .menu-item:hover {
- background-color: #F2F2F7;
+ .menu-item:hover {
+ background-color: #f2f2f7;
}
}
.cluster-right {
@@ -464,7 +492,7 @@
justify-content: start;
height: 95%;
padding: 0 30px;
- .el-radio-group {
+ /* .el-radio-group {
margin-top:33px ;
.el-radio-button__inner {
font-size: 14px;
@@ -489,6 +517,62 @@
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: var(--colorCard);
+ border-radius: 20px;
+ transition: all 0.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 {
@@ -500,10 +584,9 @@
}
.spin-bg {
-
- width: 60px;
+ width: 60px;
margin-top: 60px;
- margin-bottom:15px ;
+ margin-bottom: 15px;
}
.spin-bg-rot {
animation: spin 0.8s linear infinite;
@@ -531,25 +614,25 @@
background: var(--colorCard) !important;
border: none !important;
&:hover {
- color: white !important;
+ color: white !important;
}
}
- .text-desc{
+ .text-desc {
width: 90%;
height: 150px;
margin-top: 20px;
- background-color: #F2F2F7;
+ background-color: #f2f2f7;
padding: 20px 30px;
color: #333;
text-align: left;
font-size: 12px;
- border-radius:8px ;
+ border-radius: 8px;
}
}
.upload-center {
- margin-top:44px ;
+ margin-top: 44px;
.upload-info {
- margin-bottom:20px ;
+ margin-bottom: 20px;
text-align: left;
font-weight: bold;
font-size: 14px;
@@ -562,16 +645,16 @@
background-color: #fff;
border-radius: 8px;
- .upload-fail .iconfont{
+ .upload-fail .iconfont {
color: rgb(254, 109, 104);
}
- .upload-success .iconfont{
+ .upload-success .iconfont {
color: rgb(78, 148, 255);
}
-
-
- .upload-success,.upload-fail {
+
+ .upload-success,
+ .upload-fail {
position: absolute;
z-index: 1;
width: 100%;
@@ -590,7 +673,7 @@
.upload-icon {
display: block;
margin-top: 32px;
- margin-bottom:42px ;
+ margin-bottom: 42px;
font-size: 50px;
}
}
@@ -618,8 +701,8 @@
background: var(--colorCard) !important;
border: none !important;
&:hover {
- color: white !important;
- }
+ color: white !important;
+ }
}
.el-button--small {
font-size: 14px;
@@ -633,25 +716,25 @@
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;
+ 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__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 {
@@ -666,13 +749,13 @@
width: 150px;
height: 40px;
margin-top: 158px;
- margin-bottom:25px ;
+ margin-bottom: 25px;
background: var(--colorCard) !important;
border: none !important;
border-radius: 25px !important;
&:hover {
- color: white !important;
- }
+ color: white !important;
+ }
}
}
.up-text {
@@ -697,16 +780,16 @@
}
}
.wifi {
- padding: 10px 0 0 10px;
+ padding: 10px 10px 0 10px;
.bar {
display: flex;
align-items: center;
height: 50px;
- background-color: #f8f8f8;
+ background-color: #f2f2f7;
justify-content: space-between;
border-radius: 12px;
margin-bottom: 4px;
- padding-left:20px ;
+ padding-left: 20px;
.name {
font-size: 14px;
font-weight: 700;
@@ -716,17 +799,32 @@
text-align: left;
padding: 17px 0 17px 25px;
font-size: 16px;
- color:#333;
+ color: #333;
font-weight: 700;
}
- .el-switch{
+ .el-switch {
width: 40px;
height: 14px;
margin-right: 17px;
}
- .is-checked .el-switch__core{
- background-color: var(--colorCard) !important;
- border: 1px solid var(--colorCard) !important;
+
+ .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;
+ }
}
}
@@ -739,14 +837,12 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
- background: var(--colorCard) !important;
- border: none !important;
- &:hover {
- color: white !important;
- }
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
}
-
}
-
</style>
--
Gitblit v1.8.0