add：新增日志
This commit is contained in:
146
acs/nladmin-ui/src/views/monitor/logQuery/index.vue
Normal file
146
acs/nladmin-ui/src/views/monitor/logQuery/index.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<Search />
|
||||
<crudOperation />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55"/>-->
|
||||
<!-- <el-table-column v-if="false" prop="id" label="id"/>-->
|
||||
<!-- <el-table-column prop="trace_id" label="链路追踪" /> -->
|
||||
<el-table-column prop="method" label="方法" width="150px" />
|
||||
<el-table-column prop="requestparam" label="请求参数" class="text-wrapper">
|
||||
<template slot-scope="scope">
|
||||
<div @click="handleClick(scope.row.requestparam)">
|
||||
{{ truncateOrFullText(scope.row.requestparam) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="responseparam" label="返回参数" class="text-wrapper">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<pre class="json-pre">{{ scope.row.responseparam }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="logTime" label="记录时间" width="190px" />
|
||||
<el-table-column prop="content" label="内容详情" class="text-wrapper" />
|
||||
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from './search'
|
||||
import CRUD, { crud, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import { delAll } from '@/api/acs/lucene/log'
|
||||
|
||||
export default {
|
||||
name: 'LuceneLog',
|
||||
components: { Search, pagination, crudOperation },
|
||||
mixins: [presenter(), header(), crud()],
|
||||
cruds: function() {
|
||||
return CRUD({
|
||||
title: '系统参数', url: 'api/lucene/getAddressLog', idField: 'id', sort: 'id,desc',
|
||||
queryOnPresenterCreated: true,
|
||||
optShow: {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: false
|
||||
},
|
||||
page: {
|
||||
size: 40,
|
||||
total: 0,
|
||||
page: 0
|
||||
},
|
||||
query: {
|
||||
createTime: [new Date(new Date().setTime(new Date().getTime() - 3600 * 1000)), new Date(new Date().setTime(new Date().getTime() + 3600 * 1000))]
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: { blurry: '123' },
|
||||
permission: {
|
||||
add: ['admin', 'param:add'],
|
||||
edit: ['admin', 'param:edit'],
|
||||
del: ['admin', 'param:del']
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
truncateOrFullText(text) {
|
||||
if (text.length > 1000) {
|
||||
return text.slice(0, 1000) + '...'
|
||||
}
|
||||
return text
|
||||
},
|
||||
handleClick(content) {
|
||||
if (content.length > 1000) {
|
||||
this.$alert(content, '完整内容', {
|
||||
confirmButtonText: '关闭',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'full-content-alert'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
confirmDelAll() {
|
||||
this.$confirm(`确认清空所有操作日志吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crud.delAllLoading = true
|
||||
delAll('device_execute').then(res => {
|
||||
this.crud.delAllLoading = false
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(err => {
|
||||
this.crud.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-wrapper {
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.full-content-alert {
|
||||
max-width: none; /* 如果需要自定义 tooltip 的宽度可以在这里设置 */
|
||||
}
|
||||
.json-pre {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
max-height: 200px; /* 根据需要设置最大高度 */
|
||||
overflow: auto; /* 添加滚动条 */
|
||||
white-space: pre-wrap; /* 保留空格和换行 */
|
||||
}
|
||||
</style>
|
||||
125
acs/nladmin-ui/src/views/monitor/logQuery/search.vue
Normal file
125
acs/nladmin-ui/src/views/monitor/logQuery/search.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="query.method"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- placeholder="请输入你要搜索的方法名"-->
|
||||
<!-- style="width: 200px;"-->
|
||||
<!-- class="filter-item"-->
|
||||
<!-- />-->
|
||||
<el-select
|
||||
v-model="query.method"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的方法名"
|
||||
class="filter-item"
|
||||
style="width: 200px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in methods" :key="item.id" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="query.requestparam"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的请求参数"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.responseparam"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的返回参数"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的内容详情"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<!--
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
-->
|
||||
|
||||
<el-date-picker
|
||||
v-model="query.createTime"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
class="date-item1"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import { queryAddressCodeList } from '@/api/acs/Address'
|
||||
|
||||
export default {
|
||||
components: { rrOperation },
|
||||
mixins: [header()],
|
||||
|
||||
data() {
|
||||
return {
|
||||
methods: [],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
queryAddressCodeList().then(data => {
|
||||
this.methods = data.content
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.date-item1 {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
height: 30.5px !important;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user