<template>
|
<div class="all">
|
<div class="update-set-content">
|
<div class="cluster-center" ref="left">
|
<div
|
class="menu-item"
|
v-for="(item, i) in tabList"
|
:key="i"
|
:class="activePage == i ? 'menu-item-active' : ''"
|
@click="openRight(i)"
|
>
|
<div class="con">
|
<span class="icon iconfont">{{ item.icon }}</span>
|
<span class="menu-text">{{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="cluster-right">
|
<div class="net-set" v-if="activePage == 0">
|
<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>
|
|
<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 && !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="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>
|
<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; font-size: 15px"
|
@click="upgrade"
|
size="small"
|
class="uploader-btn"
|
:loading="shengjiing"
|
>{{ shengjiing ? "更新中" : "更新" }}</el-button
|
>
|
</div>
|
</div>
|
|
<div class="cur-version">当前版本：{{ curVersionName }}</div>
|
</div>
|
<div class="wifi" v-if="activePage == 1">
|
<div class="content">
|
<div class="title">系统更新设置</div>
|
<div class="bar" v-for="(item, i) in sysSetList" :key="i">
|
<div class="name">{{ item.title }}</div>
|
<el-switch
|
active-value="1"
|
inactive-value="0"
|
v-model="item.val"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange(item)"
|
>
|
</el-switch>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">应用/算法更新设置</div>
|
|
<div class="bar" v-for="(item, i) in appSetList" :key="i">
|
<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)"
|
>
|
</el-switch>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getDevInfo,
|
doUpgrade,
|
checkNewVersion,
|
upgradeNewVersion,
|
uploadUpgradePkg,
|
upgradePkg,
|
getSettings,
|
updateSettings,
|
} from "@/api/system";
|
import { getUrlKey } from "@/api/utils";
|
export default {
|
data() {
|
return {
|
radio2: "检查更新",
|
activePage: 0,
|
patchUpdateStatus: "",
|
probeSum: 0,
|
timer: null,verText:"",
|
patchFile: {},
|
fileAdded: false,
|
curVersionName: "",
|
shengjiing: false,
|
upgrading: false,
|
checking: true,
|
newVersionName: "",
|
hasNewVersion: false,
|
upStatus:'',
|
sysSetList: [
|
{ title: "自动清理软件包缓存", val: false, name: "sys_auto_clean" },
|
{ title: "更新提醒", val: false, name: "sys_update_notice" },
|
{ title: "自动下载更新", val: false, name: "sys_auto_update" },
|
],
|
appSetList: [
|
{ title: "自动清理软件包缓存", val: false, name: "app_auto_clean" },
|
{ title: "更新提醒", val: false, name: "app_update_notice" },
|
{ title: "自动下载更新", val: false, name: "app_auto_update" },
|
],
|
pkgID: "",
|
tabList: [
|
{ name: "系统更新", icon: "\ue735" },
|
{ name: "更新设置", icon: "\ue733" },
|
],
|
};
|
},
|
mounted() {
|
const isAutoUpdate = getUrlKey("autoUpdate");
|
if (isAutoUpdate==1) {
|
this.checking = false
|
this.upgradeNewVersion()
|
}else{
|
this.fetchUpgradInfo();
|
}
|
this.fetchSettings();
|
},
|
methods: {
|
fetchSettings() {
|
getSettings().then((res) => {
|
const map = {};
|
if (res.data && res.data.length) {
|
res.data.forEach((x) => {
|
map[x.name] = x.value;
|
});
|
}
|
this.sysSetList.forEach((x) => {
|
x.val = map[x.name];
|
});
|
this.appSetList.forEach((x) => {
|
x.val = map[x.name];
|
});
|
});
|
},
|
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.$notify.success("更新版本成功");
|
this.fetchUpgradInfo();
|
});
|
},
|
onFileUpload(file) {
|
this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始升级</span>`;
|
this.patchFile = { ...file };
|
this.fileAdded = true;
|
},
|
onFileAdded() {
|
this.patchUpdateStatus = "";
|
},
|
uploadPkg(params) {
|
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);
|
})
|
},
|
upgrade() {
|
this.shengjiing = true;
|
upgradePkg({
|
id: this.pkgID,
|
}).then((res) => {
|
this.shengjiing = false;
|
this.$notify.success("更新版本成功");
|
this.pkgID = "";
|
});
|
},
|
doneUpgrade() {
|
this.upgrading = false;
|
this.patchUpdateStatus = `<span style="color:green">升级成功</span>`;
|
let _this = this;
|
this.$confirm("升级成功, 请重新登录系统", "成功", {
|
type: "success",
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
}).then(() => {
|
_this.reLogin();
|
});
|
},
|
reLogin() {
|
this.$router.push("/");
|
},
|
probeServer(cb) {
|
this.probeSum++;
|
let _this = this;
|
if (this.probeSum > 60) {
|
this.$confirm("连接服务器失败, 请刷新页面或联系管理员", "失败", {
|
type: "error",
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
}).then(() => {
|
cb();
|
});
|
return;
|
}
|
this.timer = setTimeout(() => {
|
getDevInfo()
|
.then(() => {
|
cb();
|
})
|
.catch((err) => {
|
_this.probeServer(cb);
|
});
|
}, 10000);
|
},
|
openRight(typ) {
|
this.activePage = typ;
|
},
|
switchChange(item) {
|
updateSettings({
|
name: item.name,
|
value: item.val,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$notify.success("更新成功");
|
}
|
});
|
},
|
|
},
|
};
|
</script>
|
<style lang="scss">
|
.all {
|
width: 100%;
|
background-color: #FBFAFF;
|
}
|
.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: 300px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
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;
|
cursor: pointer;
|
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: 16px;
|
font-weight: 700;
|
}
|
}
|
}
|
.menu-item-active {
|
background-color: var(--colorCard) !important;
|
.iconfont {
|
color: #fff !important;
|
}
|
.menu-text {
|
color: #fff;
|
}
|
}
|
.menu-item:hover {
|
background-color: #F2F2F7;
|
}
|
}
|
.cluster-right {
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
box-sizing: border-box;
|
position: relative;
|
.el-form-item.is-required:not(.is-no-asterisk)
|
> .el-form-item__label:before,
|
.el-form-item.is-required:not(.is-no-asterisk)
|
.el-form-item__label-wrap
|
> .el-form-item__label:before {
|
display: none;
|
}
|
.el-select {
|
width: 100%;
|
}
|
.el-form-item {
|
margin-bottom: 10px;
|
height: 50px;
|
background: #f8f8f8;
|
padding: 4px 20px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-radius: 10px;
|
.el-form-item__label {
|
text-align: left;
|
line-height: 42px;
|
}
|
}
|
.el-form-item__content {
|
line-height: 40px;
|
position: relative;
|
font-size: 14px;
|
}
|
.ip-input-container {
|
max-width: none !important;
|
}
|
.net-set {
|
display: flex;
|
flex-direction: column;
|
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;
|
}
|
}
|
}
|
@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;
|
|
.desc-suc {
|
color: #333;
|
border-radius: 8px;
|
}
|
.el-button {
|
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;
|
|
.line {
|
width: 180px;
|
height: 5px;
|
background: #e6e6e6;
|
border-radius: 5px;
|
margin: 5px auto;
|
}
|
.desc {
|
height: 20px;
|
line-height: 20px;
|
font-size: 14px;
|
color: rgba(161, 161, 161, 1);
|
margin-bottom: 10px;
|
}
|
.el-button {
|
width: 150px;
|
height: 40px;
|
background: var(--colorCard) !important;
|
border: none !important;
|
&:hover {
|
color: white !important;
|
}
|
}
|
.el-button--small {
|
font-size: 14px;
|
}
|
}
|
.upload-top {
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
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 {
|
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 {
|
height: 32px;
|
line-height: 32px;
|
font-size: 14px;
|
min-width: 105px;
|
margin-right: 5px;
|
}
|
.file-uploader {
|
width: 100%;
|
margin-right: 20px;
|
min-width: 150px;
|
}
|
}
|
.cur-version {
|
position: absolute;
|
bottom: 50px;
|
left: 50%;
|
transform: translateX(-50%);
|
font-size: 14px;
|
}
|
}
|
.wifi {
|
padding: 10px 10px 0 10px;
|
.bar {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
background-color: #F2F2F7;
|
justify-content: space-between;
|
border-radius: 12px;
|
margin-bottom: 4px;
|
padding-left:20px ;
|
.name {
|
font-size: 14px;
|
font-weight: 700;
|
}
|
}
|
.title {
|
text-align: left;
|
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 {
|
width: 240px;
|
height: 40px;
|
margin: 0 auto;
|
border-radius: 10px;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
margin-top: 20px;
|
background: var(--colorCard) !important;
|
border: none !important;
|
&:hover {
|
color: white !important;
|
}
|
}
|
}
|
|
}
|
|
</style>
|
