<template>
|
<div class="all">
|
<div class="cluster-content">
|
<div class="cluster-center" ref="left">
|
<div class="menu-item" :class="activePage==0?'menu-item-active':''" @click="openRight(0)">
|
<div class="con">
|
<span class="icon iconfont"></span>
|
<span class="menu-text">系统更新</span>
|
</div>
|
</div>
|
<div class="menu-item" :class="activePage==1?'menu-item-active':''" @click="openRight(1)">
|
<div class="con">
|
<span class="icon iconfont"></span>
|
|
<span class="menu-text">更新设置</span>
|
</div>
|
</div>
|
</div>
|
<div class="cluster-right">
|
<div class="net-set" v-if="activePage == 0">
|
<el-radio-group v-model="radio2" size="medium">
|
<el-radio-button label="检查更新"></el-radio-button>
|
<el-radio-button label="上传更新"></el-radio-button>
|
</el-radio-group>
|
|
<div class="update-center" v-if="radio2 == '检查更新'">
|
<div class="spin-bg"></div>
|
<div class="line"></div>
|
<div class="desc">{{ "检查到最新版本：1.0.2" }}</div>
|
<el-button type="primary" size="small">更新</el-button>
|
</div>
|
<div class="upload-center" v-if="radio2 == '上传更新'">
|
<!-- uploadPlaceholder="上传升级文件" -->
|
<div class="top">
|
<div class="up-text">上传更新文件</div>
|
<fileUploader
|
single
|
url="/data/api-v/sysset/patchUpdate"
|
@complete="onFileUpload"
|
@file-added="onFileAdded"
|
/>
|
<el-button
|
type="primary"
|
size="small"
|
style="width: 80px"
|
@click="upgrade"
|
:disabled="!fileAdded"
|
:loading="upgrading"
|
>升级</el-button
|
>
|
</div>
|
|
<div class="update-center">
|
<div class="spin-bg"></div>
|
<div class="line"></div>
|
<div class="desc">{{ "检查到最新版本：1.0.2" }}</div>
|
<el-button type="primary" size="small">更新</el-button>
|
</div>
|
<!-- <span v-html="patchUpdateStatus"></span> -->
|
</div>
|
|
<div class="cur-version">当前版本：{{ "1.0.1" }}</div>
|
</div>
|
|
<div class="wifi" v-if="activePage == 1">
|
<div class="content">
|
<div class="title">系统更新设置</div>
|
<div class="bar">
|
<div class="name">自动清理软件包缓存</div>
|
<el-switch
|
v-model="sys_auto_clear"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('sys_auto_clear')"
|
>
|
</el-switch>
|
</div>
|
|
<div class="bar">
|
<div class="name">更新提醒</div>
|
<el-switch
|
v-model="sys_remind"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('sys_remind')"
|
>
|
</el-switch>
|
</div>
|
|
<div class="bar" v-if="sys_remind">
|
<div class="name">自动下载更新</div>
|
<el-switch
|
v-model="sys_auto_download"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('sys_auto_download')"
|
>
|
</el-switch>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">应用/算法更新设置</div>
|
|
<div class="bar">
|
<div class="name">自动清理软件包缓存</div>
|
<el-switch
|
v-model="app_auto_clear"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('app_auto_clear')"
|
>
|
</el-switch>
|
</div>
|
|
<div class="bar">
|
<div class="name">更新提醒</div>
|
<el-switch
|
v-model="app_remind"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('app_remind')"
|
>
|
</el-switch>
|
</div>
|
|
<div class="bar" v-if="app_remind">
|
<div class="name">自动下载更新</div>
|
<el-switch
|
v-model="app_auto_download"
|
active-color="rgba(61, 104, 225, 1)"
|
@change="switchChange('app_auto_download')"
|
>
|
</el-switch>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getDevInfo, fileUpload, doUpgrade } from "@/api/system";
|
import FileUploader from "@/components/subComponents/FileUpload/index";
|
|
export default {
|
components: {
|
FileUploader,
|
},
|
data() {
|
return {
|
wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],
|
radio2: "检查更新",
|
activePage: 0,
|
patchUpdateStatus: "",
|
probeSum: 0,
|
sys_auto_clear: false,
|
sys_remind: false,
|
sys_auto_download: false,
|
app_auto_clear: false,
|
app_remind: false,
|
app_auto_download: false,
|
timer: null,
|
patchFile: {},
|
fileAdded: false,
|
upgrading: false,
|
};
|
},
|
methods: {
|
onFileUpload(file) {
|
this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始升级</span>`;
|
this.patchFile = { ...file };
|
this.fileAdded = true;
|
},
|
onFileAdded() {
|
this.patchUpdateStatus = "";
|
},
|
upgrade() {
|
this.upgrading = true;
|
this.patchUpdateStatus = `<span style="color:red">正在升级...</span>`;
|
doUpgrade(this.patchFile)
|
.then((rsp) => {
|
this.upgrading = false;
|
if (rsp && rsp.success) {
|
clearTimeout(this.timer);
|
this.doneUpgrade();
|
}
|
})
|
.catch((err) => {
|
if (err.code) {
|
this.upgrading = false;
|
this.patchUpdateStatus = `<span style="color:red">${err.data}</span>`;
|
clearTimeout(this.timer);
|
} else {
|
this.probeServer(this.doneUpgrade);
|
}
|
});
|
},
|
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(typ) {
|
console.log(this[typ]);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.all {
|
width: 100%;
|
}
|
|
.cluster-content {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
.cluster-center {
|
height: 100%;
|
width: 280px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 10px;
|
border-right: 5px solid #f8f8f8;
|
|
.menu-item {
|
background-color: #f8f8f8;
|
height: 50px;
|
margin-bottom: 10px;
|
border-radius: 8px;
|
line-height: 50px;
|
box-sizing: border-box;
|
font-size: 14px;
|
cursor: pointer;
|
padding: 0 20px;
|
display: flex;
|
justify-content: space-between;
|
.con {
|
.iconfont {
|
margin-right: 10px;
|
}
|
.menu-text {
|
font-size: 15px;
|
}
|
}
|
}
|
.menu-item-active{
|
color: #fff;
|
background-color: rgba(61, 104, 225, 1);
|
}
|
}
|
.cluster-right {
|
flex: 1;
|
flex-basis: auto;
|
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)
|
.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%;
|
|
.update-center {
|
height: 160px;
|
.spin-bg {
|
width: 70px;
|
height: 70px;
|
background: rgba(230, 230, 230, 1);
|
margin: 0 auto;
|
border-radius: 35px;
|
}
|
.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-center {
|
height: 340px;
|
.update-center {
|
height: 160px;
|
.spin-bg {
|
width: 70px;
|
height: 70px;
|
background: rgba(230, 230, 230, 1);
|
margin: 0 auto;
|
border-radius: 35px;
|
}
|
.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;
|
}
|
}
|
.top {
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
background: rgba(248, 248, 248, 1);
|
box-sizing: border-box;
|
padding: 8px 10px;
|
border-radius: 8px;
|
.el-input--small .el-input__inner {
|
border: none;
|
}
|
.uploader-btn {
|
padding: 6px 8px;
|
.el-icon-upload2 {
|
font-size: 21px;
|
font-weight: 600;
|
}
|
}
|
}
|
.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 {
|
.content {
|
margin-bottom: 20px;
|
}
|
.bar {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
padding: 0 25px;
|
background-color: #f8f8f8;
|
justify-content: space-between;
|
border-radius: 12px;
|
margin-bottom: 10px;
|
.name {
|
font-size: 15px;
|
}
|
}
|
.title {
|
text-align: left;
|
padding: 10px;
|
font-size: 16px;
|
}
|
}
|
|
.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>
|
