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/operationLog.vue | 220 ++++++++++++++++++------------------------------------ 1 files changed, 75 insertions(+), 145 deletions(-) diff --git a/src/pages/syslog/views/operationLog.vue b/src/pages/syslog/views/operationLog.vue index d5d2dc2..33c1523 100644 --- a/src/pages/syslog/views/operationLog.vue +++ b/src/pages/syslog/views/operationLog.vue @@ -25,20 +25,10 @@ class="input-with-select" @keyup.enter.native="getOperationLog(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="getOperationLog(1)" slot="append" v-else>  </span> @@ -54,19 +44,9 @@ <div class="bar"> <div class="name">鎿嶄綔妯″潡锛�</div> - <el-select - v-model="curModule" - placeholder="璇烽�夋嫨" - size="small" - @change="moduleChange" - > + <el-select v-model="curModule" placeholder="璇烽�夋嫨" size="small" @change="moduleChange"> <el-option label="鍏ㄩ儴" :value="''"> </el-option> - <el-option - v-for="(item, i) in moduleOptions" - :key="i" - :label="item.proc_name" - :value="item.proc_name" - > + <el-option v-for="(item, i) in moduleOptions" :key="i" :label="item.proc_name" :value="item.proc_name"> </el-option> </el-select> </div> @@ -80,30 +60,13 @@ @change="getOperationLog(1)" > <!-- :disabled="gongnengOptions.length==0" --> - <el-option - v-for="(item, i) in gongnengOptions" - :key="i" - :label="item.name" - :value="item.name" - > - </el-option> + <el-option v-for="(item, i) in gongnengOptions" :key="i" :label="item.name" :value="item.name"> </el-option> </el-select> </div> <div class="bar"> <div class="name">鎿嶄綔缁撴灉锛�</div> - <el-select - v-model="result" - placeholder="璇烽�夋嫨" - size="small" - @change="getOperationLog(1)" - > - <el-option - v-for="(item, i) in resultOptions" - :key="i" - :label="item.label" - :value="item.value" - > - </el-option> + <el-select v-model="result" placeholder="璇烽�夋嫨" size="small" @change="getOperationLog(1)"> + <el-option v-for="(item, i) in resultOptions" :key="i" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </div> @@ -121,8 +84,7 @@ <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 :align="'center'" label="搴忓彿" type="index" width="50"> </el-table-column> <el-table-column :align="'center'" sortable @@ -130,41 +92,12 @@ 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="function" - label="鎿嶄綔鍔熻兘" - ></el-table-column> - <el-table-column - :align="'center'" - sortable - prop="result" - label="鎿嶄綔缁撴灉" - ></el-table-column> - <el-table-column - :align="'center'" - prop="msg" - min-width="100px" - label="璇︾粏淇℃伅" - ></el-table-column> - <el-table-column - :align="'center'" - sortable - prop="ip" - label="IP" - ></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="function" label="鎿嶄綔鍔熻兘"></el-table-column> + <el-table-column :align="'center'" sortable prop="result" label="鎿嶄綔缁撴灉"></el-table-column> + <el-table-column :align="'center'" prop="msg" min-width="100px" label="璇︾粏淇℃伅"></el-table-column> + <el-table-column :align="'center'" sortable prop="ip" label="IP"></el-table-column> </el-table> </div> @@ -182,9 +115,9 @@ </template> <script> -import { deleteDate } from "@/api/system"; -import { pad0 } from "@/api/utils"; -import { queryOperationLog, getOperations, getModules } from "@/api/log"; +import { deleteDate } from "@/api/system" +import { pad0 } from "@/api/utils" +import { queryOperationLog, getOperations, getModules } from "@/api/log" export default { name: "operationLog", @@ -201,16 +134,16 @@ resultOptions: [ { value: "", - label: "鍏ㄩ儴", + label: "鍏ㄩ儴" }, { value: "鎴愬姛", - label: "鎴愬姛", + label: "鎴愬姛" }, { value: "澶辫触", - label: "澶辫触", - }, + label: "澶辫触" + } ], value: "", page: 1, @@ -222,75 +155,74 @@ timeStart: "", timeEnd: "", fuzzySearch: "", - total: 0, - }; + total: 0 + } }, mounted() { - this.getTimeRange(); - this.getOperationLog(); - this.getOptions(); + this.getTimeRange() + this.getOperationLog() + this.getOptions() }, methods: { handleSizeChange(val) { - this.pageSize = val; - this.getOperationLog(); + this.pageSize = val + this.getOperationLog() }, handleCurrentChange(val) { - this.page = val; - this.getOperationLog(); + this.page = val + this.getOperationLog() }, moduleChange(val) { - this.getOperationLog(1); - this.gongneng = ""; + this.getOperationLog(1) + this.gongneng = "" getOperations({ - module: this.curModule, + module: this.curModule }).then((res) => { - this.gongnengOptions = res.data; - }); + this.gongnengOptions = res.data + }) }, getOptions() { getModules().then((res) => { - const indexArr = []; + const indexArr = [] res.data.forEach((item, index) => { if (item.proc_name == "") { - indexArr.push(index); + indexArr.push(index) } - }); + }) if (indexArr.length != 0) { indexArr.forEach((i) => { - res.data.splice(i); - }); + res.data.splice(i) + }) } - this.moduleOptions = res.data; - console.log(this.moduleOptions); - }); + this.moduleOptions = res.data + }) }, choseRange(item, i) { switch (item) { case "浠婃棩": - this.getTimeRange(); - break; + this.getTimeRange() + 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.getOperationLog(1) + this.activeDateChoise = i }, getOperationLog(typ) { if (typ == 1) { - this.page = 1; + this.page = 1 } queryOperationLog({ timeStart: this.timeStart, @@ -300,34 +232,32 @@ module: this.curModule, function: this.gongneng, result: this.result, - fuzzySearch: this.fuzzySearch, + fuzzySearch: this.fuzzySearch }).then((res) => { - this.tableData = res.data.logs; - this.total = res.data.total; - this.png = require("../../../../public/images/syslog/娌℃暟鎹�.png"); - }); + this.tableData = res.data.logs + this.total = res.data.total + this.png = require("../../../../public/images/syslog/娌℃暟鎹�.png") + }) }, 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 preDay; - preDay = gap - ? new Date(new Date().getTime() - gap) - : new Date(new Date().setHours(0, 0, 0, 0)); - this.timeStart = this.getTimeStr(preDay); + var preDay + preDay = gap ? new Date(new Date().getTime() - gap) : new Date(new Date().setHours(0, 0, 0, 0)) + this.timeStart = this.getTimeStr(preDay) }, clearSearch() { - this.fuzzySearch = ""; - this.getOperationLog(1); - }, - }, -}; + this.fuzzySearch = "" + this.getOperationLog(1) + } + } +} </script> <style lang="scss"> .op-log { -- Gitblit v1.8.0