From 0d3db253cad1fb49c4fae9b9a537c8c318c7172f Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 29 十一月 2023 10:23:59 +0800 Subject: [PATCH] 优化应用中心卸载 --- src/pages/syslog/views/systemLog.vue | 342 +++++++++++++++++++++++++++++++------------------------- 1 files changed, 187 insertions(+), 155 deletions(-) diff --git a/src/pages/syslog/views/systemLog.vue b/src/pages/syslog/views/systemLog.vue index 4bd479f..fb9c3a5 100644 --- a/src/pages/syslog/views/systemLog.vue +++ b/src/pages/syslog/views/systemLog.vue @@ -23,19 +23,14 @@ v-model="fuzzySearch" size="small" class="input-with-select" + @keyup.enter.native="getVaSystemLog(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="getVaSystemLog(1)" slot="append">  </span> - <!-- <el-button - slot="append" - icon="el-icon-search" - @click="getOperationLog(1)" - ></el-button> --> </el-input> </div> </div> @@ -43,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 in levelOptions" - :key="item.proc_name" - :label="item.proc_name" - :value="item.proc_name" - > + <el-select v-model="level" placeholder="璇烽�夋嫨" size="small" @change="getVaSystemLog"> + <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 in hostNameOptions" - :key="item.value" - :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> @@ -86,44 +66,30 @@ :data="tableData" :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" style="width: 100%" + border + :row-class-name="tableRowClassName" > - <!-- <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> - </el-table-column> --> - <el-table-column + <template slot="empty"> + <img :src="png" class="empty_img" alt="" /> + </template> + <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> @@ -141,132 +107,157 @@ </template> <script> -import { deleteDate } from "@/api/system"; -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() { return { + png: require("../../../../public/images/syslog/娌℃暟鎹�.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 + this.getVaSystemLog() }, handleCurrentChange(val) { - this.page = val; - // this.getOperationLog(); - }, - levelChange(val) { - // this.getOperationLog(1); - // this.hostName = ""; - // getOperations({ - // module: this.level, - // }).then((res) => { - // this.hostNameOptions = res.data; - // }); + this.page = val + this.getVaSystemLog() }, getOptions() { - getModules().then((res) => { - this.levelOptions = res.data; - }); + queryProcName().then((res) => { + this.procOptions = res.data + }) }, 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 + this.getVaSystemLog() }, - 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, + fuzzySearch: this.fuzzySearch, + 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()) //鏃� + return `${date.getFullYear()}-${month}-${day}` }, 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 + 24 * 60 * 60 * 1000) + this.timeStart = this.getTimeStr(preDay) + " 00:00:00" + this.timeEnd = this.getTimeStr(date) + " 23:59:59" }, - }, -}; + clearSearch() { + this.fuzzySearch = "" + this.getVaSystemLog(1) + } + } +} </script> <style lang="scss"> .sys-log { @@ -341,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; @@ -403,17 +395,49 @@ margin-top: 16px; border-radius: 5px; padding: 12px; - background-color: white; + background-color: rgb(255, 255, 255); + .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; } } } @@ -423,5 +447,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