sc
parent
98321aabd4
commit
c56dd68548
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="scTable" ref="scTableMain" v-loading="loading">
|
||||
<div class="scTable-table">
|
||||
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
|
||||
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @row-click="rowClick" @sort-change="sortChange" @filter-change="filterChange">
|
||||
<slot></slot>
|
||||
<template v-for="(item, index) in userColumn" :key="index">
|
||||
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler">
|
||||
|
|
@ -201,6 +201,9 @@
|
|||
},
|
||||
currentChange(selection){
|
||||
this.$emit('current-change', selection)
|
||||
},
|
||||
rowClick(row, column, event){
|
||||
this.$emit('row-click', row, column, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,11 @@
|
|||
|
||||
</div>
|
||||
</el-header>
|
||||
<el-header style="height:150px;">
|
||||
<scEcharts height="100%" :option="logsChartOption"></scEcharts>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
|
||||
<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<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>
|
||||
|
|
@ -35,24 +38,66 @@
|
|||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
<div style="height:10px;border-top: 1px solid #e6e6e6;"></div>
|
||||
<el-footer style="height:40%;overflow: auto;">
|
||||
<info ref="info"></info>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
|
||||
<info ref="info"></info>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import info from './info'
|
||||
import scEcharts from '@/components/scEcharts'
|
||||
|
||||
export default {
|
||||
name: 'log',
|
||||
components: {
|
||||
info
|
||||
info,
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
infoDrawer: false,
|
||||
logsChartOption: {
|
||||
color: ['#409eff','#e6a23c','#f56c6c'],
|
||||
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: [
|
||||
{
|
||||
label: '系统日志',
|
||||
|
|
@ -83,8 +128,11 @@
|
|||
upsearch(){
|
||||
|
||||
},
|
||||
currentChange(row){
|
||||
this.$refs.info.setData(row)
|
||||
rowClick(row){
|
||||
this.infoDrawer = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.info.setData(row)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
|
||||
<template v-if="data&&data.id">
|
||||
<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="详细">
|
||||
<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-item title="常规" name="1">
|
||||
<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="详细" name="2">
|
||||
<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"
|
||||
|
|
@ -23,14 +23,9 @@
|
|||
Server: "nginx/1.17.8"
|
||||
}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-empty description="没有预览" :image-size="120"></el-empty>
|
||||
</template>
|
||||
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -38,6 +33,7 @@
|
|||
data() {
|
||||
return {
|
||||
data: {},
|
||||
activeNames: ['1'],
|
||||
typeMap: {
|
||||
'info': "info",
|
||||
'warn': "warning",
|
||||
|
|
|
|||
Loading…
Reference in New Issue