zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP 重构日志界面结构

This commit is contained in:
sc 2021-06-25 12:29:59 +08:00
parent c1a5786cd0
commit bbd45bbc15
2 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/setting/log/index.vue
View File

@ -1,32 +1,45 @@
<template>
<el-container>
<el-container>
<el-header>
<div class="left-panel">
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="ID" prop="id" width="180"></el-table-column>
<el-table-column label="日志名" prop="name" width="150"></el-table-column>
<el-table-column label="请求接口" prop="url" width="150"></el-table-column>
<el-table-column label="请求方法" prop="type" width="150"></el-table-column>
<el-table-column label="用户" prop="user" width="150"></el-table-column>
<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
<el-table-column label="日志时间" prop="time" width="150"></el-table-column>
</scTable>
</el-main>
</el-container>
<el-aside width="340px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:20px;">
<info ref="info"></info>
<el-aside width="220px">
<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="dicClick">
</el-tree>
</el-aside>
<el-container>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="left-panel">
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"></el-date-picker>
</div>
<div class="right-panel">
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
<el-table-column label="级别" prop="level" width="50">
<template #default="scope">
<i v-if="scope.row.level=='error'" class="el-icon-error" style="color: #F56C6C;font-size: 14px;"></i>
<i v-if="scope.row.level=='warn'" class="el-icon-warning" style="color: #E6A23C;font-size: 14px;"></i>
<i v-if="scope.row.level=='info'" class="el-icon-info" style="color: #409EFF;font-size: 14px;"></i>
</template>
</el-table-column>
<el-table-column label="ID" prop="id" width="180"></el-table-column>
<el-table-column label="日志名" prop="name" width="150"></el-table-column>
<el-table-column label="请求接口" prop="url" width="150"></el-table-column>
<el-table-column label="请求方法" prop="type" width="150"></el-table-column>
<el-table-column label="用户" prop="user" width="150"></el-table-column>
<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
<el-table-column label="日志时间" prop="time" width="150"></el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
<div style="height:10px;border-top: 1px solid #e6e6e6;"></div>
<el-footer style="height:50%;overflow: auto;">
<info ref="info"></info>
</el-footer>
</el-container>
</el-container>
</template>
@ -40,6 +53,26 @@
},
data() {
return {
category: [
{
label: '系统日志',
children: [
{label: 'debug'},
{label: 'info'},
{label: 'warn'},
{label: 'error'},
{label: 'fatal'}
]
},
{
label: '应用日志',
children: [
{label: 'selfHelp'},
{label: 'WechatApp'}
]
}
],
date: [],
apiObj: this.$API.log.list,
search: {
keyword: ""

52
src/views/setting/log/info.vue
View File

@ -1,26 +1,30 @@
<template>
<template v-if="data&&data.id">
<el-descriptions title="基础信息" :column="1" size="small">
<el-descriptions-item label="请求接口">{{data.url}}</el-descriptions-item>
<el-descriptions-item label="请求方法">{{data.type}}</el-descriptions-item>
<el-descriptions-item label="状态代码">{{data.code}}</el-descriptions-item>
<el-descriptions-item label="日志名">{{data.name}}</el-descriptions-item>
<el-descriptions-item label="日志时间">{{data.time}}</el-descriptions-item>
</el-descriptions>
<el-collapse>
<el-collapse-item title="Request" name="1">
<div>
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198
Safari/537.36
<el-tabs>
<el-tab-pane label="常规">
<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false" style="margin-bottom:15px;"></el-alert>
<el-descriptions :column="2" border size="small">
<el-descriptions-item label="请求接口">{{data.url}}</el-descriptions-item>
<el-descriptions-item label="请求方法">{{data.type}}</el-descriptions-item>
<el-descriptions-item label="状态代码">{{data.code}}</el-descriptions-item>
<el-descriptions-item label="日志名">{{data.name}}</el-descriptions-item>
<el-descriptions-item label="日志时间">{{data.time}}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="详细">
<div class="code">
Request: {
User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
},
Response: {
Content-Type: "application/json; charset=utf-8",
Date: "Fri, 25 Jun 2021 03:02:14 GMT",
Server: "nginx/1.17.8"
}
</div>
</el-collapse-item>
<el-collapse-item title="Response" name="2">
<div>
id=100
</div>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</template>
<template v-else>
@ -33,7 +37,12 @@
export default {
data() {
return {
data: {}
data: {},
typeMap: {
'info': "info",
'warn': "warning",
'error': "error"
}
}
},
methods: {
@ -44,5 +53,6 @@
}
</script>
<style>
<style scoped>
.code {background: #848484;padding:15px;color: #fff;font-size: 12px;border-radius: 4px;}
</style>