From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/vindicate/views/updateSettings.vue | 573 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 457 insertions(+), 116 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index dac6c1f..0756a4a 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,62 +17,135 @@
</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
- class="upload-demo"
- drag
- action
- :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-container">
+ <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>
- <!-- <fileUploader
- single
- url="/version/upload"
- @complete="onFileUpload"
- @file-added="onFileAdded"
- /> -->
+
+ <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' : ''"
+ 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 +155,6 @@
<div class="cur-version">褰撳墠鐗堟湰锛歿{ curVersionName }}</div>
</div>
-
<div class="wifi" v-if="activePage == 1">
<div class="content">
<div class="title">绯荤粺鏇存柊璁剧疆</div>
@@ -106,6 +178,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,8 +195,6 @@
<script>
import {
getDevInfo,
- fileUpload,
- doUpgrade,
checkNewVersion,
upgradeNewVersion,
uploadUpgradePkg,
@@ -130,19 +202,8 @@
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: "妫�鏌ユ洿鏂�",
@@ -150,13 +211,16 @@
patchUpdateStatus: "",
probeSum: 0,
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 +233,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 +266,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();
});
},
@@ -222,18 +300,38 @@
let param = new FormData();
param.append("archive", params.file);
this.upgrading = true;
- uploadUpgradePkg(param).then((res) => {
- this.upgrading = false;
- this.pkgID = res.data.id;
- });
+ 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,
}).then((res) => {
this.shengjiing = false;
- this.$message.success("鏇存柊鐗堟湰鎴愬姛");
+ this.$notify.success("鏇存柊鐗堟湰鎴愬姛");
this.pkgID = "";
});
},
@@ -279,13 +377,12 @@
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("閰嶇疆鎴愬姛");
}
});
},
@@ -295,52 +392,61 @@
<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;
+ line-height: 56px;
box-sizing: border-box;
- font-size: 14px;
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);
+ 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);
+ background-color: #f2f2f7;
}
}
.cluster-right {
@@ -349,7 +455,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 +489,195 @@
.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: 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 {
+ 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 +696,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 +715,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 +772,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,6 +837,11 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
}
}
--
Gitblit v1.8.0