From 84ad5590bafc58e17ebcf7ebdce2cd70c0c22ea9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 24 九月 2021 18:54:56 +0800
Subject: [PATCH] 日期时间新版
---
src/pages/vindicate/index/App.vue | 723 ++++++++++---------------------------------------------
1 files changed, 135 insertions(+), 588 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index e41e502..eb915de 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,619 +1,166 @@
<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="first">
- <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="second">
- <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)"
+ >
+ <img :src="item.img_black" class="icon iconfont icon_black" />
+ <img :src="item.img_white" class="icon iconfont icon_white" />
+ <span class="card-text">{{ item.name }}</span>
+ </div>
+ </div>
+ <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></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>
+ <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
</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 {
+ freedisk
+} from "@/api/system";
+import { getUrlKey } from "@/api/utils";
+import systemClean from "../views/systemClean";
+import updateSettings from "../views/updateSettings";
+// import BackUp from "../views/backUp";
+import restartSettings from "../views/restartSettings";
+import sysInfo from "../views/sysInfo";
export default {
+ name: "settings",
components: {
- VueCron,
- FileUploader
+ systemClean,
+ updateSettings,
+ // BackUp,
+ restartSettings,sysInfo
},
data() {
return {
- timer: null,
- buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
- rebootCron: "",
- activeName: "first",
- 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: "鏇存柊璁剧疆" ,img_black:"/images/vindicate/鏇存柊璁剧疆-榛�.png", img_white:"/images/vindicate/鏇存柊璁剧疆-鐧�.png",},
+ { name: "绯荤粺娓呯悊" ,img_black:"/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white:"/images/vindicate/绯荤粺娓呯悊-鐧�.png",},
+ { name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",},
+ { name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",},
],
- 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,
+ free: 0,
+ full: 0,
};
},
- mounted() {
- this.getRebootCron()
- if (!this.isShow('videoSystem:sysManage:sysfix')) {
- console.log("榛樿鏄剧ず鏁版嵁搴撶淮鎶�")
- this.activeName = "second"
- }
+ created() {
+ let color = localStorage.getItem('--colorCard')
+ if(color) {
+ document.documentElement.style.setProperty('--colorCard',`${color}`)
+ }
},
- computed: {
- isAdmin() {
- if (
- sessionStorage.getItem('userInfo') &&
- sessionStorage.getItem('userInfo') !== ''
- ) {
- let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
- return (
- loginName === 'superadmin' || loginName === 'basic'
- )
- }
- return false;
+ mounted() {
+ const menu = getUrlKey("menu");
+ if (menu) {
+ this.activePage = this.menuArr.findIndex((x) => x.name == menu);
+ // this.$nextTick(() => {
+ // this.$refs.netSettings.openRight(2);
+ // });
}
+ 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.free = res.data.free
+ this.full = res.data.all
})
},
- 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 = "鏅鸿兘璁＄畻鑺傜偣姝ｅ湪閲嶅惎锛岃鑰愬績绛夊緟..."
- 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 = "姝ｅ湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒"
- 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">姝ｅ湪鍗囩骇...</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;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+ .container-left {
+ height: 100%;
+ width: 244px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 17px 10px 0 10px;
+ box-sizing: border-box;
+ background: #fff;
+ .left-card {
+ position: relative;
+ width: 224px;
+ height: 56px;
+ cursor: pointer;
+ border-radius: 8px;
+ margin-bottom: 4px;
+ display: flex;
+ background-color: #F2F2F7;
+ align-items: center;
+ .icon_white {
+ position: absolute;
+ top: 8px;
+ left: 0;
+ visibility: hidden;
+ }
+ .iconfont {
+ width: 40px;
+ height: 40px;
+ margin: 0 20px 0 20px;
+ background: #333333;
+ border-radius: 8px;
+ }
.card-text {
- padding: 0 30px;
- line-height: 32px;
+ font-family: PingFang SC;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22.4px;
+ }
+ }
+ .left-card-active {
+ color: #fff;
+ background-color: var(--colorCard);
+ .icon_black {
+ visibility: hidden;
+ }
+ .icon_white{
+ visibility: visible;
+ }
+ .iconfont {
+ color: #333333;
+ background-color: #fff;
+ }
+ }
+
+ .left-card:hover {
+ background-color: var(--colorCard);
+ color: #fff;
+ .iconfont {
+ color: #333333;
+ background-color: #fff;
+ }
+ .icon_black {
+ visibility: hidden;
+ }
+ .icon_white{
+ visibility: visible;
}
}
}
- .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;
- height: 50px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: #222222;
- text-align: center;
- border: 0px solid transparent;
- }
- .el-tabs__item:nth-child(2) {
- padding-left: 50px;
- }
- .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;
- }
- }
- .el-tabs__active-bar {
- background-color: #ff7733;
- }
- .el-tabs__content {
- padding-left: 15px !important;
- }
}
</style>
+
+
--
Gitblit v1.8.0