<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 == '检查更新'">
|
<span v-if="hasNewVersion||checking"
|
class="icon iconfont spin-bg"
|
:class="upgrading || checking ? 'spin-bg-rot' : ''"
|
></span
|
>
|
<span v-else
|
class="icon iconfont spin-bg"
|
></span
|
>
|
<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>
|
<el-button
|
v-if="hasNewVersion && !checking"
|
:loading="upgrading"
|
type="primary"
|
style="width: 150px"
|
size="small"
|
@click="upgradeNewVersion"
|
>更新</el-button
|
>
|
|
<div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
|
{{verText}}
|
</div>
|
</div>
|
<div class="upload-center" v-if="radio2 == '上传更新'">
|
<div class="upload-top">
|
<el-upload
|
class="upload-demo"
|
drag
|
action
|
v-show="!shengjiing"
|
: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>
|
|
<span
|
class="icon iconfont spin-bg"
|
:class="shengjiing ? 'spin-bg-rot' : ''"
|
v-if="shengjiing"
|
></span
|
>
|
<div class="desc" v-if="shengjiing">正在进行更新……</div>
|
<el-button
|
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: true,
|
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: "\ue6f2" },
|
{ name: "更新设置", icon: "\ue6db" },
|
],
|
};
|
},
|
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;
|
});
|
},
|
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%;
|
}
|
.update-set-content {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
border-top: 4px solid #f8f8f8;
|
border-left: 4px solid #f8f8f8;
|
.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;
|
|
.menu-item {
|
background-color: #F2F2F7;
|
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 {
|
width: 26px;
|
height: 26px;
|
margin-right: 10px;
|
color: #333;
|
}
|
.menu-text {
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
}
|
.menu-item-active {
|
color: #fff;
|
background-color: #4E94FF;
|
}
|
.menu-item:hover {
|
color: #fff;
|
background-color: #4E94FF;
|
}
|
}
|
.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: space-between;
|
height: 95%;
|
@keyframes spin {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
.spin-bg {
|
color: rgb(206, 205, 205);
|
font-size: 100px;
|
margin-bottom: 20px;
|
}
|
.spin-bg-rot {
|
animation: spin 0.8s linear infinite;
|
}
|
.desc {
|
height: 20px;
|
line-height: 20px;
|
font-size: 15px;
|
color: rgb(231, 121, 58);
|
margin-bottom: 20px;
|
font-weight: 600;
|
}
|
.update-center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.desc-suc {
|
color: #3a8120;
|
}
|
.el-button {
|
width: 100px;
|
font-size: 15px;
|
}
|
.text-desc{
|
width: 260px;
|
margin-top: 20px;
|
background-color: rgba(250, 250, 250, 1);
|
border: 1px dashed rgba(220, 220, 220, 1);
|
height: 100px;
|
padding: 10px 20px;
|
color: rgba(94, 94, 94, 1);
|
text-align: left;
|
font-size: 14px;
|
border-radius:5px ;
|
}
|
}
|
.upload-center {
|
.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: 120px;
|
}
|
.el-button--small {
|
font-size: 14px;
|
}
|
}
|
.upload-top {
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
box-sizing: border-box;
|
flex-direction: column;
|
|
.uploader-btn {
|
margin-top: 15px;
|
}
|
}
|
.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 {
|
font-size: 14px;
|
}
|
}
|
.wifi {
|
padding: 10px 0 0 10px;
|
.bar {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
background-color: #f8f8f8;
|
justify-content: space-between;
|
border-radius: 12px;
|
margin-bottom: 10px;
|
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;
|
}
|
.is-checked .el-switch__core{
|
background-color: #4E97FF !important;
|
}
|
}
|
|
.save-btn {
|
background-color: #3d68e1;
|
width: 240px;
|
height: 40px;
|
margin: 0 auto;
|
border-radius: 10px;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
margin-top: 20px;
|
}
|
}
|
}
|
</style>
|
