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 | 285 +++++++++++++++++++++++---------------------------------
1 files changed, 118 insertions(+), 167 deletions(-)
diff --git a/src/views/maintenance/eventlogManage.vue b/src/views/maintenance/eventlogManage.vue
index 25d7c0d..44fae20 100644
--- a/src/views/maintenance/eventlogManage.vue
+++ b/src/views/maintenance/eventlogManage.vue
@@ -1,32 +1,40 @@
<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 ref="formData2" :model="form" :inline="true">
- <el-form-item
- :label="$t('operatManage.operationLogObj.username')"
+ <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
- v-model="form.uname"
+ style="width:200px"
+ size="small"
+ v-model="sizeForm.uname"
:placeholder="$t('operatManage.operationLogObj.pleaseInput')"
/>
</el-form-item>
-
<el-form-item
- :label="$t('operatManage.operationLogObj.operationType')"
prop="type"
+ :label="$t('operatManage.operationLogObj.operationType')"
>
<el-select
+ style="width:200px"
+ size="small"
+ :popper-append-to-body="false"
clearable
- v-model="form.type"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ v-model="sizeForm.type"
+ :placeholder="$t('operatManage.operationLogObj.operationTypeHolder')"
>
<el-option
:label="$t('operatManage.operationLogObj.check')"
@@ -59,46 +67,66 @@
: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="form.start"
- style="width: 100%"
+ v-model="sizeForm.start"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- >
- </el-date-picker>
+ :placeholder="$t('operatManage.operationLogObj.startTimeHolder')"
+ ></el-date-picker>
</el-form-item>
<el-form-item
prop="end"
: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="form.end"
- style="width: 100%"
+ v-model="sizeForm.end"
+ style="width:200px"
type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ :placeholder="$t('operatManage.operationLogObj.endTimeHolder')"
>
</el-date-picker>
</el-form-item>
- <el-form-item>
- <el-button @click="onSubmit" icon="el-icon-search">{{
- $t('operatManage.operationLogObj.inquire')
- }}</el-button>
- <el-button @click="onEmpty('formData2')" icon="el-icon-delete">{{
- $t('operatManage.operationLogObj.empty')
- }}</el-button>
+ </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="onEmpty('sizeForm')"
+ 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">
- <el-table :data="tableData" style="width: 100%" height="85%">
+ <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"
@@ -129,12 +157,12 @@
:label="$t('operatManage.ELM.operationType')"
/>
</el-table>
- <div style="margin-top: 40px" 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"
@@ -146,8 +174,8 @@
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
-import { resOpSelectByPageAndCount } from '../../api/api';
+import MyBread from "../../components/MyBread.vue";
+import { resOpSelectByPageAndCount } from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -157,19 +185,42 @@
data() {
return {
currentPage: 1,
- form: {},
+ sizeForm: {
+ uname: "",
+ start: null,
+ end: null,
+ type: [],
+ },
tableData: [],
listData: {
pageIndex: 1,
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;
+ return m < 10 ? "0" + m : m;
},
//鏍煎紡鍖栨椂闂�
format(shijianchuo) {
@@ -182,7 +233,7 @@
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) +
// ":" +
@@ -204,25 +255,25 @@
let data;
switch (row[column.property]) {
case 0:
- data = '鍏跺畠';
+ data = "鍏跺畠";
break;
case 1:
- data = '鏌ョ湅';
+ data = "鏌ョ湅";
break;
case 2:
- data = '鏂板';
+ data = "鏂板";
break;
case 3:
- data = '淇敼';
+ data = "淇敼";
break;
case 4:
- data = '鍒犻櫎';
+ data = "鍒犻櫎";
break;
case 5:
- data = '涓婁紶';
+ data = "涓婁紶";
break;
case 6:
- data = '涓嬭浇';
+ data = "涓嬭浇";
break;
}
return data;
@@ -236,28 +287,31 @@
this.getList();
},
onSubmit() {
- this.listData = { ...this.listData, ...this.form };
+ this.listData = { ...this.listData, ...this.sizeForm };
// console.log(this.listData)
this.getList();
},
onEmpty(formData1) {
this.$refs[formData1].resetFields(); //閲嶇疆琛ㄥ崟鏁版嵁
- // this.form = {}
- this.form.start = null;
- this.form.end = null;
},
- resetForm(formName) {
- this.$refs[formName].resetFields();
- },
+
async getList() {
const data = await resOpSelectByPageAndCount(this.listData);
- console.log(data);
+
if (data.code != 200) {
- return this.$message.error('鍒楄〃璋冪敤澶辫触');
+ 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();
@@ -267,130 +321,27 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
- border-radius: 10px;
- height: 100%;
+ height: 98%;
+ width: 98%;
+ padding: 0.5% 1%;
- box-sizing: border-box;
.el-input {
width: 300px;
}
.inquire {
- height: 110px;
- 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;
- height: 70%;
- padding: 10px;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- height: 480px;
- /*淇敼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