no message
This commit is contained in:
parent
a9dfc5ec97
commit
ea2599d8e0
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-aside width="220px">
|
<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"> </el-tree>
|
<el-tree ref="typeList" class="menu" node-key="label" :data="typeList" :default-expand-all="true" @node-click="nodeClick" :current-node-key="current" :highlight-current="true" :expand-on-click-node="false"> </el-tree>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-main class="nopadding">
|
<el-main class="nopadding">
|
||||||
@ -10,29 +10,17 @@
|
|||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-panel">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-header style="height:150px;">
|
<el-header style="height:120px;" v-if="typeof chartoption === 'object' && Object.keys(chartoption).length > 0">
|
||||||
<xEcharts height="100%" :option="logsChartOption"></xEcharts>
|
<xEcharts height="100%" :option="chartoption"></xEcharts>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main class="nopadding">
|
<el-main class="nopadding">
|
||||||
<xTable ref="table" :data="data" stripe highlightCurrentRow @row-click="rowClick">
|
<xTable ref="table" :api="api" :params="params" :tableColumn="tableColumn" stripe highlightCurrentRow @row-click="rowClick">
|
||||||
<el-table-column label="级别" prop="level" width="60">
|
<el-table-column type="index" width="55">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
|
<span>{{scope.$index+(currentPage - 1) * limit + 1}}</span>
|
||||||
<el-icon v-if="scope.row.level=='warn'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
|
|
||||||
<el-icon v-if="scope.row.level=='info'" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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="170"></el-table-column>
|
|
||||||
</xTable>
|
</xTable>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
@ -40,7 +28,7 @@
|
|||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
|
||||||
<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
|
<el-drawer v-model="infoDrawer" title="日志详情" :size="700" destroy-on-close>
|
||||||
<info ref="info"></info>
|
<info ref="info"></info>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
@ -58,67 +46,55 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
infoDrawer: false,
|
infoDrawer: false,
|
||||||
logsChartOption: {
|
chartoption: {},
|
||||||
color: ['#409eff','#e6a23c','#f56c6c'],
|
typeList: [],
|
||||||
grid: {
|
|
||||||
top: '0px',
|
|
||||||
left: '10px',
|
|
||||||
right: '10px',
|
|
||||||
bottom: '0px'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
show: false,
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'log',
|
|
||||||
barWidth: '15px'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'log',
|
|
||||||
barWidth: '15px'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'log',
|
|
||||||
barWidth: '15px'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
category: [],
|
|
||||||
date: [],
|
date: [],
|
||||||
data: [
|
data: [],
|
||||||
[{id:1}]
|
|
||||||
],
|
|
||||||
// apiObj: this.$api.system.log.list,
|
|
||||||
search: {
|
search: {
|
||||||
keyword: ""
|
keyword: ""
|
||||||
}
|
},
|
||||||
|
api: '',
|
||||||
|
params: [],
|
||||||
|
current : '',
|
||||||
|
config : {},
|
||||||
|
tableColumn : {},
|
||||||
|
column : 'default',
|
||||||
|
currentPage:1,
|
||||||
|
limit:20,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getType();
|
this.getType();
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
//监听从props里拿到值了
|
||||||
|
current(){
|
||||||
|
this.getCurrent();
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//树点击
|
||||||
|
nodeClick(data){
|
||||||
|
if (data.disabled) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.current = data.label;
|
||||||
|
this.column = data.column || 'column';
|
||||||
|
},
|
||||||
getType(){
|
getType(){
|
||||||
this.$http.get('log/admin/types', {}, { cacheparameters: true }).then((res) => {
|
this.$http.get('log/admin/types', {}, { cacheparameters: true }).then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
this.category= res.data
|
Object.assign(this.$data, res.data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getCurrent(){
|
||||||
|
this.tableColumn = this.config[this.column] || this.config.default;
|
||||||
|
this.params = { type: this.current }
|
||||||
|
this.api = 'log/admin/lists'
|
||||||
|
this.$refs.table.reload(this.params)
|
||||||
|
},
|
||||||
upsearch(){
|
upsearch(){
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,28 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<el-main style="padding:0 20px;">
|
<el-main style="padding:0 20px;">
|
||||||
<el-descriptions :column="1" 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-collapse v-model="activeNames" style="margin-top: 20px;">
|
<el-collapse v-model="activeNames" style="margin-top: 20px;">
|
||||||
<el-collapse-item title="常规" name="1">
|
<el-collapse-item title="常规" name="1">
|
||||||
<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
|
<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="详细" name="2">
|
<el-collapse-item title="详细" name="2">
|
||||||
<div class="code">
|
<el-descriptions border :column="1">
|
||||||
Request: {
|
<el-descriptions-item v-for="(value, key) in data" :key="key" :label="key">
|
||||||
User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
|
<template v-if="typeof value === 'object'">
|
||||||
},
|
<pre>{{ JSON.stringify(value, null, 2) }}</pre>
|
||||||
Response: {
|
</template>
|
||||||
Content-Type: "application/json; charset=utf-8",
|
<template v-else>
|
||||||
Date: "Fri, 25 Jun 2021 03:02:14 GMT",
|
{{ value }}
|
||||||
Server: "nginx/1.17.8"
|
</template>
|
||||||
}
|
</el-descriptions-item>
|
||||||
</div>
|
</el-descriptions>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</el-main>
|
</el-main>
|
||||||
@ -33,7 +26,7 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data: {},
|
data: {},
|
||||||
activeNames: ['1'],
|
activeNames: ['1', '2'],
|
||||||
typeMap: {
|
typeMap: {
|
||||||
'info': "info",
|
'info': "info",
|
||||||
'warn': "warning",
|
'warn': "warning",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user