From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/maintenance/downlog.vue | 255 ++++++++++++++++++++++++++------------------------
1 files changed, 134 insertions(+), 121 deletions(-)
diff --git a/src/views/maintenance/downlog.vue b/src/views/maintenance/downlog.vue
index 2ea71f3..d46f532 100644
--- a/src/views/maintenance/downlog.vue
+++ b/src/views/maintenance/downlog.vue
@@ -1,104 +1,97 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.DownloadLog')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- :inline="true"
- ref="sizeForm"
- :model="sizeForm"
- >
- <el-form-item
- prop="uname"
- :label="$t('operatManage.operationLogObj.username')"
- >
- <el-input
- style="width:200px"
- v-model="sizeForm.uname"
- :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
- />
- </el-form-item>
- <el-form-item
- prop="type"
- :label="$t('operatManage.operationLogObj.operationType')"
- >
- <el-select
- style="width:200px"
- :popper-append-to-body="false"
- v-model="sizeForm.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
- >
- <el-option
- :label="$t('downlog.type1')"
- value="1"
- />
- <el-option
- :label="$t('downlog.type2')"
- value="2"
- />
- <el-option
- :label="$t('downlog.type3')"
- value="3"
- />
- <el-option
- :label="$t('downlog.type4')"
- value="4"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- prop="start"
- :label="$t('operatManage.operationLogObj.startTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.start"
- style="width:200px"
- type="datetime"
- :popper-class="popperclass"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- ></el-date-picker>
- </el-form-item>
- <el-form-item
- prop="end"
- :label="$t('operatManage.operationLogObj.endTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.end"
- style="width:200px"
- type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- >
- </el-date-picker>
- </el-form-item>
-
- <el-form-item style="float:right">
- <el-button
- @click="onSubmit"
- icon="el-icon-search"
- size="small"
- type="primary"
- >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
- <el-button
- @click="resAllTable"
- icon="el-icon-delete"
- type="info"
- size="small"
- >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
- </el-form-item>
+ <div class="inquire subpage_Div" ref="container">
+ <el-form :inline="true" ref="sizeForm" :model="sizeForm">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ prop="uname"
+ :label="$t('operatManage.operationLogObj.username')"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="sizeForm.uname"
+ :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
+ />
+ </el-form-item>
+ <el-form-item
+ prop="type"
+ :label="$t('operatManage.operationLogObj.operationType')"
+ >
+ <el-select
+ style="width: 200px"
+ :popper-append-to-body="false"
+ v-model="sizeForm.type"
+ :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ >
+ <el-option :label="$t('downlog.type1')" value="1" />
+ <el-option :label="$t('downlog.type2')" value="2" />
+ <el-option :label="$t('downlog.type3')" value="3" />
+ <el-option :label="$t('downlog.type4')" value="4" />
+ </el-select>
+ </el-form-item>
+ <el-form-item
+ prop="start"
+ :label="$t('operatManage.operationLogObj.startTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.start"
+ style="width: 200px"
+ type="datetime"
+ :popper-class="popperclass"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item
+ prop="end"
+ :label="$t('operatManage.operationLogObj.endTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.end"
+ style="width: 200px"
+ type="datetime"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ >
+ </el-date-picker>
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button
+ @click="onSubmit"
+ icon="el-icon-search"
+ size="small"
+ type="primary"
+ >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
+ >
+ <el-button
+ @click="resAllTable"
+ icon="el-icon-delete"
+ type="info"
+ size="small"
+ >{{ $t("operatManage.operationLogObj.empty") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div class="table_box subpage_Div">
+ <div class="table_box subpage_Div" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
- height="85%"
+ height="calc(100% - 57px)"
>
<el-table-column
align="center"
@@ -141,10 +134,7 @@
:formatter="formatData"
/>
</el-table>
- <div
- style="margin-top: 10px"
- class="pagination_box"
- >
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -162,9 +152,7 @@
<script>
import MyBread from "../../components/MyBread.vue";
-import {
- downlog_selectByPageAndCount
-} from "../../api/api";
+import { downlog_selectByPageAndCount } from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -173,7 +161,7 @@
data() {
return {
- popperclass: '',
+ popperclass: "",
sizeForm: {
start: null,
end: null,
@@ -187,12 +175,30 @@
start: null,
end: null,
uname: null,
- type: null
+ type: null,
},
count: 0,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
methods: {
+ onResize() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.calHeight();
+ }, 500);
+ },
+ calHeight() {
+ this.$nextTick(() => {
+ const rect = this.$refs.container.getBoundingClientRect();
+ this.tableHeight = `${rect.height + 97}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
+ });
+ },
formatSize(row, column) {
let data = row[column.property];
if (data == null) {
@@ -201,9 +207,9 @@
if (data > 1024) {
var val = data / 1024;
- return val + "GB"
+ return val + "GB";
} else {
- return data + "MB"
+ return data + "MB";
}
},
formatType(row, column) {
@@ -213,19 +219,19 @@
}
switch (data) {
case 1:
- return 'Shp鏂囦欢';
+ return "Shp鏂囦欢";
break;
case 2:
- return '涓撻鍥�';
+ return "涓撻鍥�";
break;
case 3:
- return '鍏冩暟鎹�';
+ return "鍏冩暟鎹�";
break;
case 4:
- return '涓氬姟鏁版嵁';
+ return "涓氬姟鏁版嵁";
break;
default:
- return '鏈煡鏁版嵁';
+ return "鏈煡鏁版嵁";
break;
}
},
@@ -243,7 +249,11 @@
var mm = time.getMinutes();
var s = time.getSeconds();
return (
- y + "-" + this.add0(m) + "-" + this.add0(d) +
+ y +
+ "-" +
+ this.add0(m) +
+ "-" +
+ this.add0(d) +
" " +
this.add0(h) +
":" +
@@ -267,21 +277,21 @@
start: null,
end: null,
uname: null,
- type: null
- }
+ type: null,
+ };
this.sizeForm = {
start: null,
end: null,
uname: null,
type: null,
- }
+ };
this.getAllData();
},
onSubmit() {
this.listData.end = this.sizeForm.end;
this.listData.start = this.sizeForm.start;
this.listData.type = this.sizeForm.type;
- this.listData.uname = this.sizeForm.uname
+ this.listData.uname = this.sizeForm.uname;
this.getAllData();
},
@@ -301,7 +311,15 @@
}
this.tableData = data.result;
this.count = data.count;
- }
+ },
+ },
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
},
created() {
this.getAllData();
@@ -319,22 +337,17 @@
width: 300px;
}
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
border-radius: 5px;
margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
}
- .table_box {
- overflow: auto;
- height: 57%;
- padding: 10px;
- border-radius: 5px;
- }
+
.text-center {
text-align: center;
}
--
Gitblit v1.9.3