From 9941b6b14fc01ad49c9581c0eab75ac9b29da691 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期一, 24 一月 2022 19:56:18 +0800 Subject: [PATCH] 完善系统日志功能 --- src/pages/syslog/views/systemLog.vue | 297 ++++++++++++++++++++++++++++------------------------------- 1 files changed, 141 insertions(+), 156 deletions(-) diff --git a/src/pages/syslog/views/systemLog.vue b/src/pages/syslog/views/systemLog.vue index 5a52519..fb96e82 100644 --- a/src/pages/syslog/views/systemLog.vue +++ b/src/pages/syslog/views/systemLog.vue @@ -23,30 +23,14 @@ v-model="fuzzySearch" size="small" class="input-with-select" - @keyup.enter.native="getOperationLog(1)" + @keyup.enter.native="getVaSystemLog(1)" > - <span - class="icon iconfont icon_clear" - @click="clearSearch" - slot="append" - v-if="fuzzySearch" - > + <span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch">  </span> - <span - class="icon iconfont icon_search" - @click="getOperationLog(1)" - slot="append" - v-else - > + <span class="icon iconfont icon_search" @click="getVaSystemLog(1)" slot="append" v-else>  </span> - - <!-- <el-button - slot="append" - icon="el-icon-search" - @click="getOperationLog(1)" - ></el-button> --> </el-input> </div> </div> @@ -54,37 +38,22 @@ <div class="bar"> <div class="name">绾у埆锛�</div> - <el-select - v-model="level" - placeholder="璇烽�夋嫨" - size="small" - @change="levelChange" - > - <el-option label="鍏ㄩ儴" :value="''"> </el-option> - <el-option - v-for="(item, index) in levelOptions" - :key="index" - :label="item.proc_name" - :value="item.proc_name" - > + <el-select v-model="level" placeholder="璇烽�夋嫨" size="small" @change="levelChange"> + <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="bar"> - <div class="name">涓绘満鍚嶏細</div> + <div class="name">杩涚▼</div> <el-select - v-model="hostName" + v-model="procName" placeholder="璇烽�夋嫨" size="small" - @change="getOperationLog(1)" + @change="getVaSystemLog(1)" + clearable + multiple > - <el-option - v-for="(item, index) in hostNameOptions" - :key="index" - :label="item.label" - :value="item.value" - > - </el-option> + <el-option v-for="(item, index) in procOptions" :key="index" :label="item" :value="item"> </el-option> </el-select> </div> </div> @@ -98,47 +67,29 @@ :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" style="width: 100%" border + :row-class-name="tableRowClassName" > <template slot="empty"> <img :src="png" class="empty_img" alt="" /> </template> - <!-- <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> - </el-table-column> --> - <el-table-column + <el-table-column :align="'center'" label="搴忓彿" type="index" width="100"> </el-table-column> + <el-table-column :align="'center'" sortable prop="level" label="绾у埆" width="100px"> + <template slot-scope="scope"> + <span>{{ scope.row.level | leverFilter }}</span> + </template> + </el-table-column> + <el-table-column :align="'center'" sortable prop="procName" label="杩涚▼" width="150px"></el-table-column> + <el-table-column :align="'center'" sortable prop="procID" label="杩涚▼鍙�" width="150px"></el-table-column> + <!-- <el-table-column :align="'center'" - sortable - prop="add_time" - label="绾у埆" - ></el-table-column> - <el-table-column - sortable - :align="'center'" - prop="userName" - label="鏃ユ湡鏃堕棿" - ></el-table-column> - <el-table-column - :align="'center'" - sortable - prop="module" - label="杩涚▼" - ></el-table-column> - <el-table-column - :align="'center'" - prop="procName" - label="璇︾粏淇℃伅" - ></el-table-column> - <el-table-column - :align="'center'" - sortable - prop="result" - label="杩涚▼鍙�" - ></el-table-column> - <el-table-column - :align="'center'" - prop="msg" + prop="hostName" min-width="100px" label="涓绘満鍚�" - ></el-table-column> + width="150px" + ></el-table-column> --> + + <el-table-column sortable :align="'center'" prop="createDate" label="鏃ユ湡鏃堕棿" width="200px"></el-table-column> + <el-table-column prop="info" label="璇︾粏淇℃伅"></el-table-column> </el-table> </div> @@ -156,10 +107,40 @@ </template> <script> -import { deleteDate } from "@/api/system"; -import { getModules } from "@/api/log"; -import { pad0 } from "@/api/utils"; -import {} from "@/api/log"; +import { queryVaSystemLog, queryProcName } from "@/api/log" +import { pad0 } from "@/api/utils" +const levelOptions = [ + { + value: 0, + label: "鍏ㄩ儴", + style: "" + }, + { + value: 1, + label: "涓ラ噸", + style: "error-row" + }, + { + value: 2, + label: "閿欒", + style: "error-row" + }, + { + value: 3, + label: "璀﹀憡", + style: "warning-row" + }, + { + value: 4, + label: "淇℃伅", + style: "" + }, + { + value: 5, + label: "璋冭瘯", + style: "" + } +] export default { data() { @@ -167,54 +148,53 @@ png: "", loading: false, loadingText: "", - input3: "", tableData: [], dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"], - levelOptions: [], + + procOptions: [], hostNameOptions: [], - resultOptions: [ - { - value: "", - label: "鍏ㄩ儴", - }, - { - value: "鎴愬姛", - label: "鎴愬姛", - }, - { - value: "澶辫触", - label: "澶辫触", - }, - ], + levelOptions: levelOptions, value: "", page: 1, pageSize: 15, activeDateChoise: 0, - hostName: "", - result: "", - level: "", + procName: [], + level: 0, timeStart: "", timeEnd: "", fuzzySearch: "", - total: 0, - }; + total: 0 + } + }, + filters: { + leverFilter(val) { + for (let i = 0; i < levelOptions.length; i++) { + if (levelOptions[i].value === val) { + return levelOptions[i].label + } + } + } }, mounted() { - this.getTimeRange(24 * 60 * 60 * 1000); - // this.getOperationLog(); - this.getOptions(); + this.getTimeRange(24 * 60 * 60 * 1000) + this.getVaSystemLog() + this.getOptions() }, methods: { + tableRowClassName({ row, rowIndex }) { + for (let i = 0; i < levelOptions.length; i++) { + if (levelOptions[i].value === row.level) { + return levelOptions[i].style + } + } + }, handleSizeChange(val) { - this.pageSize = val; - // this.getOperationLog(); + this.pageSize = val }, handleCurrentChange(val) { - this.page = val; - // this.getOperationLog(); + this.page = val }, levelChange(val) { - // this.getOperationLog(1); // this.hostName = ""; // getOperations({ // module: this.level, @@ -223,72 +203,69 @@ // }); }, getOptions() { - getModules().then((res) => { - this.levelOptions = res.data; - this.png = require("../../../../public/images/syslog/娌℃暟鎹�.png"); - }); + queryProcName().then((res) => { + this.procOptions = res.data + // this.png = require("../../../../public/images/syslog/娌℃暟鎹�.png") + }) }, choseRange(item, i) { switch (item) { case "浠婃棩": - this.getTimeRange(24 * 60 * 60 * 1000); - break; + this.getTimeRange(24 * 60 * 60 * 1000) + break case "杩戜笁澶�": - this.getTimeRange(24 * 60 * 60 * 1000 * 3); - break; + this.getTimeRange(24 * 60 * 60 * 1000 * 3) + break case "杩戜竷澶�": - this.getTimeRange(24 * 60 * 60 * 1000 * 7); - break; + this.getTimeRange(24 * 60 * 60 * 1000 * 7) + break case "杩戜竴涓湀": - this.getTimeRange(24 * 60 * 60 * 1000 * 30); - break; + this.getTimeRange(24 * 60 * 60 * 1000 * 30) + break case "杩戝叚涓湀": - this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6); - break; + this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6) + break default: - break; + break } - // this.getOperationLog(1); - this.activeDateChoise = i; + this.activeDateChoise = i }, - getOperationLog(typ) { + getVaSystemLog(typ) { if (typ == 1) { - this.page = 1; + this.page = 1 } - // queryOperationLog({ - // timeStart: this.timeStart, - // timeEnd: this.timeEnd, - // page: this.page, - // pageSize: this.pageSize, - // module: this.level, - // function: this.hostName, - // result: this.result, - // fuzzySearch: this.fuzzySearch, - // }).then((res) => { - // this.tableData = res.data.logs; - // this.total = res.data.total; - // }); + queryVaSystemLog({ + timeStart: this.timeStart, + timeEnd: this.timeEnd, + level: this.level, + procName: this.procName, + page: this.page, + pageSize: this.pageSize + }).then((res) => { + this.tableData = res.data.logs + this.total = res.data.total + }) }, getTimeStr(date) { - var month = pad0(date.getMonth() + 1); //鏈� - var day = pad0(date.getDate()); //鏃� - var hour = pad0(date.getHours()); //鏃� - var minute = pad0(date.getMinutes()); //鍒� - var second = pad0(date.getSeconds()); //绉� - return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`; + var month = pad0(date.getMonth() + 1) //鏈� + var day = pad0(date.getDate()) //鏃� + var hour = pad0(date.getHours()) //鏃� + var minute = pad0(date.getMinutes()) //鍒� + var second = pad0(date.getSeconds()) //绉� + return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}` }, getTimeRange(gap) { - var date = new Date(); //褰撳墠鏃堕棿 - var preDay = new Date(new Date().getTime() - gap); - this.timeStart = this.getTimeStr(preDay); - this.timeEnd = this.getTimeStr(date); + var date = new Date() //褰撳墠鏃堕棿 + var preDay = new Date(new Date().getTime() - gap) + this.timeStart = this.getTimeStr(preDay) + this.timeEnd = this.getTimeStr(date) }, clearSearch() { - this.fuzzySearch = ""; - this.getOperationLog(1); - }, - }, -}; + this.fuzzySearch = "" + this.getVaSystemLog(1) + } + } +} </script> <style lang="scss"> .sys-log { @@ -478,5 +455,13 @@ box-sizing: border-box; background-color: white; } + + .el-table .warning-row { + background: oldlace; + } + + .el-table .error-row { + background: #f7b9b9; + } } </style> -- Gitblit v1.8.0