From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/syslog/views/operationLog.vue | 264 ++++++++++++++++++++++++++-------------------------- 1 files changed, 130 insertions(+), 134 deletions(-) diff --git a/src/pages/syslog/views/operationLog.vue b/src/pages/syslog/views/operationLog.vue index f904cfb..639d73e 100644 --- a/src/pages/syslog/views/operationLog.vue +++ b/src/pages/syslog/views/operationLog.vue @@ -23,14 +23,15 @@ v-model="fuzzySearch" size="small" class="input-with-select" + @keyup.enter.native="getOperationLog(1)" > - <span - class="icon iconfont" - @click="getOperationLog(1)" - slot="append" - > + <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">  </span> + <!-- <el-button slot="append" icon="el-icon-search" @@ -43,20 +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" value-key="proc_name"> <el-option label="鍏ㄩ儴" :value="''"> </el-option> - <el-option - v-for="item in moduleOptions" - :key="item.proc_name" - :label="item.proc_name" - :value="item.proc_name" - > - </el-option> + <el-option v-for="(item, i) in moduleOptions" :key="i" :label="item.name_zh" :value="item"> </el-option> </el-select> </div> <div class="bar"> @@ -69,30 +59,13 @@ @change="getOperationLog(1)" > <!-- :disabled="gongnengOptions.length==0" --> - <el-option - v-for="item in gongnengOptions" - :key="item.name" - :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 in resultOptions" - :key="item.value" - :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> @@ -105,9 +78,12 @@ :data="tableData" :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" style="width: 100%" + border > - <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> - </el-table-column> + <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'" sortable @@ -115,41 +91,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> @@ -167,13 +114,15 @@ </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", data() { return { + png: require("../../../../public/images/syslog/娌℃暟鎹�.png"), loading: false, loadingText: "", input3: "", @@ -184,16 +133,16 @@ resultOptions: [ { value: "", - label: "鍏ㄩ儴", + label: "鍏ㄩ儴" }, { value: "鎴愬姛", - label: "鎴愬姛", + label: "鎴愬姛" }, { value: "澶辫触", - label: "澶辫触", - }, + label: "澶辫触" + } ], value: "", page: 1, @@ -205,95 +154,106 @@ 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: val.proc_name }).then((res) => { - this.gongnengOptions = res.data; - }); + this.gongnengOptions = res.data + }) }, getOptions() { getModules().then((res) => { - this.moduleOptions = res.data; - }); + const indexArr = [] + res.data.forEach((item, index) => { + if (item.proc_name == "") { + indexArr.push(index) + } + }) + if (indexArr.length != 0) { + indexArr.forEach((i) => { + res.data.splice(i) + }) + } + this.moduleOptions = res.data + }) }, choseRange(item, i) { switch (item) { case "浠婃棩": - this.getTimeRange(); - 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.getOperationLog(1) + this.activeDateChoise = i }, getOperationLog(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.curModule, + module: this.curModule.name_zh, 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.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()) //鏃� + return `${date.getFullYear()}-${month}-${day}` }, 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 date = new Date() + var preDay = new Date(new Date().getTime() - gap + 24 * 60 * 60 * 1000) + this.timeStart = this.getTimeStr(preDay) + " 00:00:00" + this.timeEnd = this.getTimeStr(date) + " 23:59:59" }, - }, -}; + clearSearch() { + this.fuzzySearch = "" + this.getOperationLog(1) + } + } +} </script> <style lang="scss"> .op-log { @@ -358,6 +318,10 @@ display: flex; align-items: center; + .icon_clear:hover { + color: #4e94ff; + } + .input-with-select { width: 100%; height: 100%; @@ -368,13 +332,14 @@ border: 2px solid #f2f2f7; border-right: none; - // &:focus + .el-input-group__append { - // border-color: #409eff; - // } + &:focus, + &:focus + .el-input-group__append { + border-color: #409eff; + } } .el-input-group__append { - // transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #fff; border: 2px solid #f2f2f7; border-radius: 0 18px 18px 0; @@ -431,16 +396,47 @@ border-radius: 5px; padding: 12px; background-color: white; + .empty_img { + margin: 80px auto; + width: 164px; + } .tableBox { + border: none; + &::before, + &::after { + display: none; + } + tr { + td:first-child { + border-radius: 4px 0 0 4px; + } + td:last-child { + border-radius: 0 4px 4px 0; + } + &.current-row td { + background-color: #4e94ff !important; + color: #fff; + } + &:hover td { + background-color: rgb(242, 242, 247); + } + } th { padding: 0 !important; height: 40px; line-height: 40px; + border-color: #fff !important; + border-right: 2px solid #fff; + border-radius: 4px; + font-size: 12px; + background: #f2f2f7; } td { padding: 0 !important; height: 34px; line-height: 34px; + border: none; + font-size: 12px; } } } -- Gitblit v1.8.0