From 5bd66255ccd4e995337b9039094964d2677db4cc Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 22 二月 2022 17:19:06 +0800
Subject: [PATCH] 完善日志监控模块, 需要配合valog-server使用
---
src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue | 236 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 153 insertions(+), 83 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
index cc0bccd..f3f816c 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
@@ -2,7 +2,7 @@
<div class="transfer-memo">
<div class="filter-bar flex-box">
<div>
- <label>鎿嶄綔鏃堕棿:</label>
+ <label>鎿嶄綔鏃堕棿</label>
<el-date-picker
v-model="searchTime"
type="datetimerange"
@@ -12,20 +12,26 @@
start-placeholder="寮�濮嬫棩鏈�"
end-placeholder="缁撴潫鏃ユ湡"
align="right"
+ style="max-width: 350px"
></el-date-picker>
</div>
<div>
- <label>鎿嶄綔浜�:</label>
+ <label>鎿嶄綔浜�</label>
<div>
- <el-input v-model="Operator" size="small"></el-input>
+ <el-input
+ v-model="Operator"
+ size="small"
+ style="width: 130px"
+ ></el-input>
</div>
</div>
<div>
- <label>杞偍鐘舵��:</label>
+ <label>杞偍鐘舵��</label>
<div>
<el-select v-model="Status" size="small">
<el-option value="" label="鍏ㄩ儴"></el-option>
<el-option
+ style="width: 190px"
v-for="item in allTransferStatus"
:key="item.id"
:value="item.name"
@@ -35,26 +41,43 @@
</div>
</div>
<div class="btns">
- <el-button type="primary" size="small" @click="renderTable">鏌ヨ</el-button>
- <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="renderTable"
+ class="query-btn"
+ >鏌ヨ</el-button
+ >
+ <el-button
+ type="primary"
+ size="small"
+ @click="resetFilter"
+ class="reset-btn"
+ >閲嶇疆</el-button
+ >
</div>
</div>
<div class="table-area">
- <el-table :data="tableData" fit>
+ <el-table
+ :data="tableData"
+ fit
+ stripe
+ :header-cell-style="{
+ background: '#2D52D7',
+ color: '#fff',
+ height: '50px',
+ }"
+ >
<el-table-column prop="OperaterDate" label="鎿嶄綔鏃堕棿"></el-table-column>
<el-table-column prop="Operator" label="鎿嶄綔浜�"></el-table-column>
<el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О">
<template slot-scope="scope">
- <div>
- 璁惧{{scope.$index}}
- </div>
+ <div>璁惧{{ scope.row.DeviceID }}</div>
</template>
</el-table-column>
<el-table-column prop="SlotID" label="鍗℃Ы浣嶇疆">
<template slot-scope="scope">
- <div>
- 鎻掓Ы{{scope.row.SlotID}}
- </div>
+ <div>鎻掓Ы{{ scope.row.SlotID }}</div>
</template>
</el-table-column>
<el-table-column prop="Status" label="杞偍鐘舵��"></el-table-column>
@@ -76,125 +99,166 @@
</template>
<script>
-import { getTransferStatusList,getTransferRecord } from "@/api/shuohuang"
+import { getTransferStatusList, getTransferRecord } from "@/api/shuohuang";
export default {
- data () {
+ data() {
return {
pickerOptions: {
- shortcuts: [{
- text: '浠婂ぉ',
- onClick (picker) {
- const end = new Date();
- const start = new Date();
- start.setHours(0, 0, 0);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: '鏄ㄥぉ',
- onClick (picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24);
- start.setHours(0, 0, 0);
- end.setTime(end.getTime() - 3600 * 1000 * 24);
- end.setHours(23, 59, 59);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: '杩戜笁澶�',
- onClick (picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: '杩戜竴鍛�',
- onClick (picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- //start.setHours(0,0,0);
- picker.$emit('pick', [start, end]);
- }
- }]
+ shortcuts: [
+ {
+ text: "浠婂ぉ",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setHours(0, 0, 0);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "鏄ㄥぉ",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24);
+ start.setHours(0, 0, 0);
+ end.setTime(end.getTime() - 3600 * 1000 * 24);
+ end.setHours(23, 59, 59);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "杩戜笁澶�",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "杩戜竴鍛�",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ //start.setHours(0,0,0);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ ],
},
- Status: '',
- Operator: '',
+ Status: "",
+ Operator: "",
allTransferStatus: [],
tableData: [],
tableTotal: 0,
PageIndex: 1,
pageSizes: [8, 15, 20],
PageSize: 8,
- searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
- }
+ searchTime: [
+ "2020-01-01 00:00:00",
+ this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
+ ],
+ };
},
- mounted () {
+ mounted() {
this.renderTable();
this.renderTransferStatusList();
},
methods: {
- handleCurrentChange(){
+ handleCurrentChange() {
this.renderTable();
},
- resetFilter(){
+ resetFilter() {
this.searchTime = [];
- this.Operator = '';
- this.Status = '';
+ this.Operator = "";
+ this.Status = "";
this.renderTable();
},
- handleTableSizeChange (size) {
+ handleTableSizeChange(size) {
this.tablePageSize = size;
this.renderTable();
},
- renderTransferStatusList(){
+ renderTransferStatusList() {
let _this = this;
- getTransferStatusList().then(res=>{
- _this.allTransferStatus = res.data.map((item,index)=>{
+ getTransferStatusList().then((res) => {
+ _this.allTransferStatus = res.data.map((item, index) => {
return {
- id: 'sta'+index,
- name: item
- }
+ id: "sta" + index,
+ name: item,
+ };
});
- })
+ });
},
- renderTable () {
+ renderTable() {
let _this = this;
let params = {
Operator: this.Operator,
Status: this.Status,
PageIndex: this.PageIndex,
PageSize: this.PageSize,
- StartDate: this.searchTime ? this.searchTime[0]:'',
- EndDate: this.searchTime ? this.searchTime[1]:'',
+ StartDate: this.searchTime ? this.searchTime[0] : "",
+ EndDate: this.searchTime ? this.searchTime[1] : "",
};
-
- getTransferRecord(params).then(res=>{
+
+ getTransferRecord(params).then((res) => {
_this.tableData = res.data;
_this.tableTotal = res.total;
- })
- }
- }
-}
+ });
+ },
+ },
+};
</script>
<style lang="scss">
.transfer-memo {
- padding: 20px;
+ padding: 33px;
+ background-color: #fff;
+ height: 100%;
+border-radius: 10px;
+box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ .table-area .el-table {
+ border: none;
+ }
+ .el-table th.el-table__cell > .cell {
+ color: #fff;
+}
+ .btns {
+ .reset-btn {
+ background-color: #a6b5cb !important;
+ border-color: #a6b5cb !important;
+ }
+ .query-btn {
+ background-color: #2d52d7 !important;
+ }
+ button span {
+ color: #fff;
+ }
+ }
+ .flex-box {
+ margin-bottom: 23px;
+ }
.filter-bar.flex-box {
& > div {
display: flex;
align-items: center;
- margin-right: 10px;
+ margin-right: 35px;
+ font-size: 13px;
label {
- padding-right: 10px;
+ padding-right: 15px;
+ color: #425277;
}
}
}
+ .el-table tbody tr:hover > td {
+ background-color: inherit !important;
+ }
+ .el-table th.el-table__cell.is-leaf,
+ .el-table td.el-table__cell {
+ border-bottom: none;
+ }
.el-table {
border: 1px solid #dedede;
- margin-top: 10px;
th {
background: #f5f5f5;
color: #333;
@@ -202,8 +266,14 @@
.operation {
cursor: pointer;
}
+ .el-table--striped
+ .el-table__body
+ tr.el-table__row--striped
+ td.el-table__cell {
+ background: #f4f6f9;
+ }
}
- .pagination-under-table{
+ .pagination-under-table {
margin-top: 20px;
}
}
--
Gitblit v1.8.0