From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期三, 21 七月 2021 16:40:17 +0800 Subject: [PATCH] all --- src/pages/vindicate/index/App.vue | 671 +++++++------------------------------------------------ 1 files changed, 85 insertions(+), 586 deletions(-) diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue index 7f0e417..d6af057 100644 --- a/src/pages/vindicate/index/App.vue +++ b/src/pages/vindicate/index/App.vue @@ -1,617 +1,116 @@ <template> - <div class="s-system-manage"> - <el-tabs - id="systemMaintenance" - v-model="activeName" - v-loading="loading" - :element-loading-text="loadingText" - > - <el-tab-pane label="璁惧缁存姢" name="device" v-if="isShow('vindicate:device')"> - <div class="s-system-maintenance"> - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">閲嶅惎</div> - </div> - <el-divider></el-divider> - - <div class="box-card-content"> - <el-button type="primary" size="small" style="width:80px" @click="reboot">閲嶅惎</el-button> - - <b class="card-text">閲嶅惎鑺傜偣</b> - - <el-row style="margin-top:20px"> - <el-col> - <vue-cron :expression="rebootCron" @update="setRebootCron" /> - </el-col> - </el-row> - </div> - </div> - <!-- - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鎭㈠榛樿鍊�</div> - </div> - <el-divider></el-divider> - - <div class="box-card-content"> - <el-row> - <el-col :span="1"> - <el-button type="primary" size="small">绠�鍗曟仮澶�</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">绠�鍗曟仮澶嶈澶囧弬鏁�</b> - </el-col> - </el-row> - <el-row style="margin-top:20px"> - <el-col :span="1"> - <el-button type="primary" size="small">瀹屽叏鎭㈠</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">瀹屽叏鎭㈠璁惧鍙傛暟鍒板嚭鍘傝缃�</b> - </el-col> - </el-row> - </div> - </div> - - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鍙傛暟瀵煎叆瀵煎嚭</div> - </div> - <el-divider></el-divider> - - <div class="box-card-content"> - <el-row :gutter="4"> - <el-col :span="1"> - <el-button type="info" size="small" style="width:80px">瀵煎叆</el-button> - </el-col> - <el-col :span="3" style="padding-left:30px"> - <el-input placeholder="涓婁紶鍙傛暟鏂囦欢" size="small" :readonly="true"> - <el-upload slot="suffix" action="https://jsonplaceholder.typicode.com/posts/"> - <el-button - type="text" - icon="el-icon-upload2" - size="small" - style="font-size:18px; color:#0088ff" - ></el-button> - </el-upload> - </el-input> - </el-col> - </el-row> - <el-row style="margin-top:20px"> - <el-col :span="1"> - <el-button type="primary" size="small">璁惧鍙傛暟</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">鍙傛暟瀵煎嚭</b> - </el-col> - </el-row> - </div> - </div> - --> - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鍗囩骇</div> - </div> - </div> - <el-divider></el-divider> - <div class="box-card-content"> - <el-row :gutter="4"> - <el-col :span="12"> - <file-uploader - single - uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢" - url="/data/api-v/sysset/patchUpdate" - @complete="onFileUpload" - @file-added="onFileAdded" - /> - </el-col> - <el-col :span="2"> - <el-button - type="primary" - size="small" - style="width:80px" - @click="upgrade" - :disabled="!fileAdded" - :loading="upgrading" - >鍗囩骇</el-button> - </el-col> - <el-col :span="16" class="upload-msg"> - <span v-html="patchUpdateStatus"></span> - </el-col> - </el-row> - </div> - </div> - </el-tab-pane> - <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="dbvdc" v-if="isShow('vindicate:db')"> - <div class="box"> - <p class="title"> - <label>鏁版嵁娓呯悊</label> - </p> - <div class="range"> - <div class="left"> - <p>閫夋嫨鏁版嵁鑼冨洿锛�</p> - </div> - <div class="middle"> - <el-date-picker - v-model="dataRange" - type="daterange" - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - style="height:38px" - :picker-options="pickerOptions" - ></el-date-picker> - </div> - <div class="right"> - <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button> - </div> - </div> - <div class="tip"> - <i class="iconfont icontishi-zhuyi"></i> - <p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p> - </div> - </div> - </el-tab-pane> - </el-tabs> + <div class="container"> + <div class="container-left"> + <div + class="left-card" + v-for="(item, i) in menuArr" + :key="i" + :class="activePage == i ? 'left-card-active' : ''" + @click="openMenu(item, i)" + > + <span class="icon iconfont">{{item.icon}}</span> + <span class="card-text">{{ item.name }}</span> + </div> + </div> + <systemClean v-if="activePage == 1" style="width: 100%" :percent="storagePercent"></systemClean> + <updateSettings v-if="activePage == 0" style="width: 100%"></updateSettings> + <back-up v-if="activePage == 3" style="width: 100%"></back-up> + <restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings> </div> </template> <script> -import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system" -import VueCron from "@/components/subComponents/VueCron" -import FileUploader from "@/components/subComponents/FileUpload/index" - +import { + getClockInfo, + saveClockInfo, + testNTPserver,freedisk +} from "@/api/system"; +import systemClean from "../views/systemClean"; +import updateSettings from "../views/updateSettings"; +import BackUp from "../views/backUp"; +import restartSettings from "../views/restartSettings"; export default { + name: "settings", components: { - VueCron, - FileUploader + systemClean, + updateSettings, + BackUp, + restartSettings, }, data() { return { - timer: null, - buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], - rebootCron: "", - activeName: "device", - restartValue: "涓嶉噸鍚�", - restartTimeValue: new Date(2019, 9, 10, 18, 40), - loading: false, - loadingText: '', - probeSum: 0, - patchUpdateStatus: "", - dataRange: [ - this.$moment().format("YYYY-MM-DD HH:mm:ss"), - this.$moment().format("YYYY-MM-DD HH:mm:ss") + menuArr: [ + { name: "鏇存柊璁剧疆" ,icon:"\ue60f" }, + // { name: "澶囦唤杩樺師",icon:"" }, + { name: "绯荤粺娓呯悊" ,icon:"\ue6e0" }, + { name: "閲嶅惎璁剧疆" ,icon:"" }, ], - fileUploadUrl: fileUpload, - patchFile: {}, - pickerOptions: { - disabledDate(time) { - var day = new Date() - day.setTime(day.getTime() - 24 * 60 * 60 * 1000) - return time.getTime() > day; - }, - }, - upgrading: false, - fileAdded: false, + activePage: 0, + storagePercent: 0, }; }, mounted() { - this.getRebootCron() - if (!this.isShow('vindicate:device')) { - this.activeName = "dbvdc" - } - }, - computed: { - isAdmin() { - if ( - sessionStorage.getItem('userInfo') && - sessionStorage.getItem('userInfo') !== '' - ) { - let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username - return ( - loginName === 'superadmin' || loginName === 'basic' - ) - } - return false; - } + this.getLeftPer() }, methods: { - isShow(authority) { - if (this.isAdmin) { - return true - } else if ( - this.buttonAuthority.indexOf(',' + authority + ',') > -1 - ) { - return true - } else { - return false - } + openMenu(item, i) { + this.activePage = i; }, - format(array) { - return [ - this.$moment(array[0]).format("YYYY-MM-DD"), - this.$moment(array[1]).format("YYYY-MM-DD") - ]; - }, - getRebootCron() { - getRebootTask().then(rsp => { - this.rebootCron = rsp.data + getLeftPer(){ + freedisk().then((res) => { + this.storagePercent = Math.round(res.data.free/ res.data.all *100) }) }, - setRebootCron(value) { - this.rebootCron = value - setRebootTask({ task: value }).then(rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }) - } - }).catch(err => { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }) - }) - }, - reboot() { - this.$confirm('纭畾瑕侀噸鍚鑺傜偣鍚�?', { - center: true, - cancelButtonClass: 'comfirm-class-cancle', - confirmButtonClass: 'comfirm-class-sure' - }).then(() => { - this.loading = true; - this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..." - rebootServer().then(rsp => { - this.probeServer(this.reLogin) - }).catch(err => { - if (err.status == 400) { - this.loading = false; - this.$notify({ - type: "error", - message: "閲嶅惎璁$畻鑺傜偣澶辫触" - }) - } else { - this.probeServer(this.reLogin) - } - }) - }) - }, - deleteData() { - var timeRange = this.format(this.dataRange); - var showStartTime = timeRange[0] - var showEndTime = timeRange[1] - console.log("鏃堕棿锛�", showStartTime, showEndTime) - this.$confirm("鎻愮ず锛�" + showStartTime + " 鑷� " + showEndTime + " 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵", { - center: true, - cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure" - }).then(() => { - this.loading = true - this.loadingText = "姝e湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒" - var param = { - startTime: showStartTime, - endTime: showEndTime - } - deleteDate(param).then(resp => { - if (resp.success) { - this.$message({ - type: "success", - message: "鍒犻櫎鏁版嵁鎴愬姛" - }) - this.loading = false - } - }).catch(err => { - this.$message({ - type: "error", - message: "鍒犻櫎鏁版嵁澶辫触锛�" - }) - this.loading = false - }) - - }).catch(() => { - console.log("鍙栨秷浜嗭紒") - }) - }, - reLogin() { - this.$router.push("/") - }, - probeServer(callback) { - this.probeSum++; - let _this = this - if (this.probeSum > 60) { - this.$confirm('杩炴帴鏈嶅姟鍣ㄥけ璐�, 璇峰埛鏂伴〉闈㈡垨鑱旂郴绠$悊鍛�', '澶辫触', { - type: 'error', - cancelButtonClass: 'comfirm-class-cancle', - confirmButtonClass: 'comfirm-class-sure' - }).then(() => { - // _this.$router.push("/") - callback() - }) - return - } - - this.timer = setTimeout(() => { - getDevInfo().then(() => { - // _this.$router.push("/") - callback() - }).catch(err => { - _this.probeServer(callback) - }) - }, 10000) - }, - 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">姝e湪鍗囩骇...</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() - }) - } - } + }, }; </script> <style lang="scss"> -.s-system-manage { - width: 100% !important; - min-width: 759px; - box-sizing: border-box; - padding: 10px; - // background-color: #e9ebf2; - background-color: #fff; - .s-system-manage-breadcrumb { - height: 5%; - box-sizing: border-box; - border: 1px solid #e4e7ed; - box-shadow: #e4e7ed 0px 0px 9px inset; - box-shadow: #e4e7ed 0px 0px 9px inset; - border-radius: 5px; - } - - .el-tabs--border-card { - border: 0px solid #dcdfe6; - -webkit-box-shadow: none; - box-shadow: none; - .el-tabs__header { - border: 0px solid #dcdfe6; - .el-tabs__item { - padding: 5px 50px; - height: 50px; - font-family: PingFangSC-Regular; - font-size: 15px; - color: #222222; - text-align: center; - border: 0px solid transparent; - } - .el-tabs__item:nth-child(2) { - padding-left: 50px !important; - } - .el-tabs__item:last-child { - padding-right: 50px !important; - } - .el-tabs__item.is-active { - color: #3d68e1; - font-weight: bold; - // border-right-color: #fff; - // border-left-color: #fff; - } - .el-tabs__item:not(.is-disabled):hover { - color: #3d68e1; - } - } - } - .el-tabs__content { - height: calc(100% - 64px); - width: calc(100% - 20px); - box-sizing: border-box; - overflow-y: auto; - padding: 10px 40px !important; - .el-tab-pane { - width: 100%; - .s-title { - text-align: left; - padding: 15px 0px; - font-size: 16px; - } - } - } - - .s-table { - border: 1px solid #e8e8e9; - margin-top: 40px; - } - - .ui-top-title { - padding-bottom: 10px; - /* border-bottom: 1px solid #ebebeb; */ - position: relative; - text-align: left; - padding-left: 15px; - font-size: 16px; - font-weight: bold; - } - - .ui-top-title:before { - content: " "; - border-left: 4px solid #f53d3d; - display: inline-block; - height: 16px; - position: absolute; - top: 50%; - left: 0; - margin-top: -13px; - } - - .el-button--text { - color: #3d68e1; - text-decoration: underline; - } -} -.s-system-maintenance { - width: 100%; +.container { height: 100%; - .el-button--primary { - color: #ffffff; - background-color: #3d68e1; - border-color: #3d68e1; - } - .el-button--primary.is-disabled, - .el-button--primary.is-disabled:hover, - .el-button--primary.is-disabled:focus, - .el-button--primary.is-disabled:active { - color: #ffffff; - background-color: #9eb4f0; - border-color: #9eb4f0; - } - .box-card { - text-align: left; - height: auto; - margin: 10px 0px; - .box-card-content { - padding-bottom: 40px; - .card-text { - padding: 0 30px; - line-height: 32px; - } - } - } + display: flex; + flex-direction: row; + flex: 1; + flex-basis: auto; + box-sizing: border-box; + .container-left { + height: 100%; + width: 240px; - .upload-icon { - font-size: 18px; - color: #0088ff; - } - .upload-msg { - padding-left: 10px; - text-align: left; - span { - line-height: 32px; - font-size: 13px; - } - } -} -.box { - width: 50%; - min-width: 700px; - height: 270px; - border: 1px solid #eee; - .title { - font-size: 20px; - font-weight: bold; - text-align: left; - padding: 20px; - border-bottom: 1px solid #eee; - } - .range { - width: 100%; - padding-top: 30px; - height: 38px; - .left { - width: 120px; - float: left; - text-align: right; - font-size: 14px; - p { - height: 38px; - line-height: 38px; - margin: 0; - } - } - .middle { - width: 50%; - min-width: 400px; - height: 38px; - float: left; - } - .right { - width: 20%; - height: 38px; - float: left; - } - } - .tip { - width: 100%; - padding: 30px 0px 0px 30px; - height: 34px; - - .zhuyi { - font-size: 14px; - height: 34px; - line-height: 34px; - margin-left: 20px; - float: left; - } - i { - font-size: 32px; - color: #e99038; - float: left; - } - } -} -#systemMaintenance { - .el-tabs__header { - border: 0px solid #dcdfe6; - .el-tabs__item { - padding: 5px 50px; + overflow: auto; + box-sizing: border-box; + flex-shrink: 0; + padding: 10px; + border-right: 5px solid rgba(248, 248, 248, 1); + box-sizing: border-box; + .left-card { height: 50px; - font-family: PingFangSC-Regular; - font-size: 14px; - color: #222222; - text-align: center; - border: 0px solid transparent; + cursor: pointer; + border-radius: 10px; + margin-bottom: 10px; + display: flex; background-color: #f8f8f8; + + align-items: center; + .iconfont { + margin-left: 15px; + margin-right: 10px; + font-size: 18px; + } + .card-text { + font-size: 15px; + } } - .el-tabs__item:nth-child(2) { - padding-left: 50px; + .left-card-active { + color: #fff; + background-color: rgba(61, 104, 225, 1); } - .el-tabs__item:last-child { - padding-right: 50px; - } - .el-tabs__item.is-active { - color: #ff7733; - font-weight: bold; - // border-right-color: #fff; - // border-left-color: #fff; - } - .el-tabs__item:not(.is-disabled):hover { - color: #ff7733; + + .left-card:hover { + background-color: rgba(61, 104, 225, 1); + color: #fff; } } - .el-tabs__active-bar { - background-color: #ff7733; - } - .el-tabs__content { - padding-left: 15px !important; - } + } </style> + + -- Gitblit v1.8.0