From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 29 三月 2024 09:57:55 +0800
Subject: [PATCH] 代码更新
---
src/views/maintenance/eventlogManage.vue | 222 +++++++++++++++++++++----------------------------------
1 files changed, 85 insertions(+), 137 deletions(-)
diff --git a/src/views/maintenance/eventlogManage.vue b/src/views/maintenance/eventlogManage.vue
index c9988ab..44fae20 100644
--- a/src/views/maintenance/eventlogManage.vue
+++ b/src/views/maintenance/eventlogManage.vue
@@ -1,19 +1,25 @@
<template>
<div class="logLog_box">
- <My-bread
- :list="[
+ <My-bread :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.ResourceLog')}`,
- ]"
- ></My-bread>
+ ]"></My-bread>
<el-divider />
- <div class="inquire">
- <el-form :inline="true" ref="sizeForm" :model="sizeForm">
- <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"
+ size="small"
v-model="sizeForm.uname"
:placeholder="$t('operatManage.operationLogObj.pleaseInput')"
/>
@@ -23,9 +29,12 @@
:label="$t('operatManage.operationLogObj.operationType')"
>
<el-select
+ style="width:200px"
+ size="small"
+ :popper-append-to-body="false"
clearable
v-model="sizeForm.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ :placeholder="$t('operatManage.operationLogObj.operationTypeHolder')"
>
<el-option
:label="$t('operatManage.operationLogObj.check')"
@@ -58,12 +67,13 @@
:label="$t('operatManage.operationLogObj.startTime')"
>
<el-date-picker
+ size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="sizeForm.start"
- style="width: 100%"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ :placeholder="$t('operatManage.operationLogObj.startTimeHolder')"
></el-date-picker>
</el-form-item>
<el-form-item
@@ -71,39 +81,52 @@
:label="$t('operatManage.operationLogObj.endTime')"
>
<el-date-picker
+ size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="sizeForm.end"
- style="width: 100%"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ :placeholder="$t('operatManage.operationLogObj.endTimeHolder')"
>
</el-date-picker>
</el-form-item>
-
- <el-form-item>
+ </div>
+ <div>
+ <el-form-item>
<el-button
@click="onSubmit"
icon="el-icon-search"
- style="background: #409eff; border: 1px solid #409eff; color: white"
- >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
- >
+ size="small"
+ type="primary"
+ >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
<el-button
@click="onEmpty('sizeForm')"
icon="el-icon-delete"
type="info"
- >{{ $t("operatManage.operationLogObj.empty") }}</el-button
- >
+ size="small"
+ >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
</el-form-item>
+ </div>
+ </div>
+
+
+
</el-form>
</div>
- <div class="table_box">
- <el-table :data="tableData" style="width: 100%" height="84%">
+ <div class="dividing-line"></div>
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ border
+ height="calc(100% - 45px)"
+ >
<el-table-column
align="center"
type="index"
:label="$t('operatManage.ELM.index')"
- width="70px"
+ height="calc(100% - 57px)"
/>
<el-table-column
align="center"
@@ -134,12 +157,12 @@
:label="$t('operatManage.ELM.operationType')"
/>
</el-table>
- <div style="margin-top: 10px" class="pagination_box">
+ <div class="pagination_box" style="margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listData.pageIndex"
- :page-sizes="[10, 20, 30, 40]"
+ :page-sizes="[10, 20, 50, 100]"
:page-size="listData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
@@ -174,9 +197,27 @@
pageSize: 10,
},
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 + 30}px)`;
+ });
+ },
//鏍煎紡鍖栨椂闂�
add0(m) {
return m < 10 ? "0" + m : m;
@@ -253,16 +294,24 @@
onEmpty(formData1) {
this.$refs[formData1].resetFields(); //閲嶇疆琛ㄥ崟鏁版嵁
},
-
+
async getList() {
const data = await resOpSelectByPageAndCount(this.listData);
- console.log(data);
+
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
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.getList();
@@ -272,128 +321,27 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
- height: 98%;
+ height: 98%;
width: 98%;
- padding: 1%;
- position: absolute;
+ padding: 0.5% 1%;
+
.el-input {
width: 300px;
}
.inquire {
-
- overflow: auto;
- padding: 10px;
- margin-top: 20px;
+
+ padding: 0 8px;
+ //margin-top: 20px;
border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- margin-bottom: 20px;
+
+ //margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
- /deep/.el-form-item__label {
- color: white;
- }
- /deep/ .el-input__inner {
- background-color: transparent !important;
- border: 1px solid;
- color: white;
- }
+
}
- .table_box {
- overflow: auto;
- padding: 10px;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- height:57%;
- /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
- /deep/ .el-table {
- background-color: transparent;
- th,
- td {
- background-color: transparent;
- }
- .el-table__expanded-cell {
- background-color: transparent !important;
- }
-
- // 琛ㄥご鑳屾櫙鑹�
- th.el-table__cell {
- background-color: #303030;
- color: #fff;
- }
- tr > td {
- background-color: #303030;
- color: #fff;
- }
-
- // hover鏁堟灉
- tr:hover > td {
- background-color: rgba(255, 255, 255, 0.3) !important;
- }
-
- tbody tr:hover {
- background-color: rgba(255, 255, 255, 0.3) !important;
- // text-align: center;
- }
-
- // 婊氬姩鏉″楂�
- .el-table__body-wrapper::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
-
- .el-table__body-wrapper::-webkit-scrollbar {
- width: 5px;
- /*婊氬姩鏉″搴�*/
- height: 10px;
- /*婊氬姩鏉￠珮搴�*/
- }
- /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
- .el-table__body-wrapper::-webkit-scrollbar-track {
- box-shadow: 0px 1px 3px #216fe6 inset;
- /*婊氬姩鏉＄殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
- border-radius: 10px;
- }
-
- /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
- .el-table__body-wrapper::-webkit-scrollbar-thumb {
- box-shadow: 0px 1px 3px #216fe6 inset;
- border-radius: 6px;
- background-color: #216fe6;
- }
- }
- .pagination_box {
- /deep/.el-input__inner {
- background-color: transparent !important;
- border: 1px solid;
- color: white;
- }
- /deep/.el-pagination__total {
- color: white;
- }
- /deep/.el-pagination__jump {
- color: white;
- }
- /deep/.el-pager li.active {
- color: #1890ff;
- }
- /deep/.el-pager li {
- color: white;
- background: transparent;
- }
- /deep/.el-pager li {
- color: white;
- }
- /deep/.btn-prev {
- background: transparent;
- }
- /deep/.btn-next {
- background: transparent;
- }
- }
- }
.text-center {
text-align: center;
}
--
Gitblit v1.9.3