add log Data
This commit is contained in:
龚祖望
parent
1220ac9ee2
commit
2e1411009d
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/log/requestLog',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/log/deviceLog',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
</el-row>
|
||||
<div v-for="(item, index) in logList" :key="index" class="log-container">
|
||||
<p class="ip"><img src="@/assets/images/ip.png" width="40px">访问IP</p>
|
||||
<p class="ip_val">{{ item.ip }}</p>
|
||||
<p class="ip_val">{{ item.requestip }}</p>
|
||||
<div class="line" />
|
||||
<p class="content"><img src="@/assets/images/take_time.png">请求耗时</p>
|
||||
<p class="content_val">{{ item.requestTime }}</p>
|
||||
<p class="content_val">{{ item.processtime+'ms' }}</p>
|
||||
<p class="content"><img src="@/assets/images/path.png">请求路径</p>
|
||||
<p class="content_val">{{ item.path }}</p>
|
||||
<p class="content_val">{{ item.requesturl }}</p>
|
||||
<p class="content"><img src="@/assets/images/timestamp.png">请求时间</p>
|
||||
<p class="content_val">{{ item.time }}</p>
|
||||
<p class="content_val">{{ item.requesttime }}</p>
|
||||
<div class="footer">
|
||||
<span class="usr">
|
||||
<img src="@/assets/images/usr.png">{{ item.user }}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<p class="ip">
|
||||
<img src="@/assets/images/ip_white_border.png" width="40px">访问IP
|
||||
</p>
|
||||
<p class="ip_val">{{ current.ip }}</p>
|
||||
<p class="ip_val">{{ current.requestip }}</p>
|
||||
<div class="remove_icon" @click="close">X</div>
|
||||
</div>
|
||||
<div class="dialog_content">
|
||||
|
|
@ -55,40 +55,40 @@
|
|||
<div class="item_title">
|
||||
<img src="@/assets/images/clip.png">URL
|
||||
</div>
|
||||
<div class="item_content">XXXXXXX</div>
|
||||
<div class="item_content">{{ current.requesturl }}</div>
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/ip_without_border.png"
|
||||
style="margin-right: 20px"
|
||||
>IP
|
||||
</div>
|
||||
<div class="item_content">XXXXX</div>
|
||||
<div class="item_content">{{ current.requestip }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img src="@/assets/images/http_method.png">请求<br>方法
|
||||
</div>
|
||||
<div class="item_content">XXXXXXX</div>
|
||||
<div class="item_content">{{ current.requesttype }}</div>
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/timestamp_without_border.png"
|
||||
>请求<br>时间
|
||||
</div>
|
||||
<div class="item_content">XXXXX</div>
|
||||
<div class="item_content">{{ current.requesttime }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img src="@/assets/images/action.png">动作
|
||||
<img src="@/assets/images/action.png">请求<br>参数
|
||||
</div>
|
||||
<div class="item_content">XXXXXXX</div>
|
||||
<div class="item_content">{{ current.requestparam }}</div>
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/take_time_without_border.png"
|
||||
>请求<br>耗时
|
||||
</div>
|
||||
<div class="item_content">XXXXX</div>
|
||||
<div class="item_content">{{ current.processtime+'ms' }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
</div>
|
||||
|
|
@ -97,29 +97,29 @@
|
|||
<div class="item_title">
|
||||
<img src="@/assets/images/class.png">类名
|
||||
</div>
|
||||
<div class="item_content">XXXXXXX</div>
|
||||
<div class="item_content">{{ current.classname }}</div>
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/method.png"
|
||||
>方法<br>名
|
||||
</div>
|
||||
<div class="item_content">XXXXX</div>
|
||||
<div class="item_content">{{ current.methodname }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img src="@/assets/images/header.png">请求<br>头
|
||||
</div>
|
||||
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
|
||||
<div class="item_content">{{ current.requestheader }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/param.png"
|
||||
>请求<br>参数
|
||||
>返回<br>结果
|
||||
</div>
|
||||
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
|
||||
<div class="item_content">{{ current.requestresult }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
</div>
|
||||
|
|
@ -130,61 +130,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from '@/api/log/accessLog'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
logList: [
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
},
|
||||
{
|
||||
ip: '196.105.55.103',
|
||||
requestTime: '35ms',
|
||||
path: '/device/select?activestatus=0',
|
||||
time: '2022-11-14 0:11:54',
|
||||
user: '大胜达'
|
||||
}
|
||||
],
|
||||
logList: [],
|
||||
visible: false,
|
||||
radio: '基本信息',
|
||||
current: {}
|
||||
|
|
@ -192,8 +144,14 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.date = new Date().toLocaleDateString()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
getList().then(res => {
|
||||
this.logList = res.data
|
||||
})
|
||||
},
|
||||
showDetail(item) {
|
||||
this.current = item
|
||||
this.visible = true
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@
|
|||
<span class="date">{{ date }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
<div v-for="(item, index) in logList" :key="index" class="log-container" :style="{'background-image':'url('+getBgImg(item.level)+')'}">
|
||||
<div v-for="(item, index) in logList" :key="index" class="log-container" :style="{'background-image':'url('+item.bgImg+')'}">
|
||||
<p class="ip"><img src="@/assets/images/sysLog_type.png" width="40px">设备名称</p>
|
||||
<p class="ip_val">{{ item.type }}</p>
|
||||
<p class="ip_val">{{ item.deviceType }}</p>
|
||||
<div class="line" />
|
||||
<p class="content"><img src="@/assets/images/sysLog_no.png">设备序列号</p>
|
||||
<p class="content_val">{{ item.no }}</p>
|
||||
<p class="content_val">{{ item.deviceNo }}</p>
|
||||
<p class="content"><img src="@/assets/images/sysLog_time.png">日志时间</p>
|
||||
<p class="content_val">{{ item.time }}</p>
|
||||
<p class="content_val">{{ item.logTime }}</p>
|
||||
<p class="content"><img src="@/assets/images/sysLog_thread.png">线程</p>
|
||||
<p class="content_val">{{ item.thread }}</p>
|
||||
<p class="content_val">{{ item.threadNo }}</p>
|
||||
<div class="footer">
|
||||
<span class="usr" :style="getColor(item.level)">
|
||||
{{ item.level }}
|
||||
<span class="usr" :style="{'color':item.color}">
|
||||
{{ item.levelDesc }}
|
||||
</span>
|
||||
<span
|
||||
class="detail"
|
||||
|
|
@ -40,22 +40,31 @@
|
|||
<p class="ip">
|
||||
<img src="@/assets/images/sysLog_type_white.png" width="40px">设备名称
|
||||
</p>
|
||||
<p class="ip_val">{{ current.type }}</p>
|
||||
<p class="ip_val">{{ current.deviceType }}</p>
|
||||
<div class="remove_icon" @click="close">X</div>
|
||||
</div>
|
||||
<div class="dialog_content">
|
||||
<div class="form">
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img src="@/assets/images/sysLog_link.png">链路<br>ID
|
||||
<img src="@/assets/images/sysLog_link.png">设备<br>序列号
|
||||
</div>
|
||||
<div class="item_content">XXXXXXX</div>
|
||||
<div class="item_content">{{ current.deviceNo }}</div>
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/sysLog_msg.png"
|
||||
>消息<br>ID
|
||||
>线程
|
||||
</div>
|
||||
<div class="item_content">XXXXX</div>
|
||||
<div class="item_content">{{ current.threadNo }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
<div class="item_title">
|
||||
<img
|
||||
src="@/assets/images/sysLog_content.png"
|
||||
>日志<br>时间
|
||||
</div>
|
||||
<div class="item_content">{{ current.logTime }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div class="form_content">
|
||||
|
|
@ -64,7 +73,7 @@
|
|||
src="@/assets/images/sysLog_content.png"
|
||||
>日志<br>内容
|
||||
</div>
|
||||
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
|
||||
<div class="item_content">{{ current.deviceLog }}</div>
|
||||
</div>
|
||||
<div class="line" />
|
||||
</div>
|
||||
|
|
@ -75,83 +84,47 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from '@/api/log/systemLog'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
logList: [
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Info'
|
||||
},
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Warning'
|
||||
},
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Error'
|
||||
},
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Error'
|
||||
},
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Info'
|
||||
},
|
||||
{
|
||||
type: 'RV400-NPU16T-5G-AR100',
|
||||
no: 'A000008',
|
||||
thread: 'thread1',
|
||||
time: '2022-11-14 0:11:54',
|
||||
level: 'Info'
|
||||
}
|
||||
],
|
||||
logList: [],
|
||||
visible: false,
|
||||
current: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
this.date = new Date().toLocaleDateString()
|
||||
},
|
||||
methods: {
|
||||
getBgImg(level) {
|
||||
if (level === 'Info') {
|
||||
return require('@/assets/images/systemlog_box_info.png')
|
||||
}
|
||||
if (level === 'Warning') {
|
||||
return require('@/assets/images/systemlog_box_warning.png')
|
||||
}
|
||||
if (level === 'Error') {
|
||||
return require('@/assets/images/systemlog_box_error.png')
|
||||
}
|
||||
},
|
||||
getColor(level) {
|
||||
if (level === 'Info') {
|
||||
return 'color:#FAF200'
|
||||
}
|
||||
if (level === 'Warning') {
|
||||
return 'color:#FFB300'
|
||||
}
|
||||
if (level === 'Error') {
|
||||
return 'color:#FF4E00'
|
||||
}
|
||||
getList() {
|
||||
getList().then(res => {
|
||||
this.logList = res.data.map(item => {
|
||||
switch (item.logLevel) {
|
||||
case 0:
|
||||
item.bgImg = require('@/assets/images/systemlog_box_info.png')
|
||||
item.color = '#FAF200'
|
||||
item.levelDesc = 'Info'
|
||||
break
|
||||
case 1:
|
||||
item.bgImg = require('@/assets/images/systemlog_box_warning.png')
|
||||
item.color = '#FFB300'
|
||||
item.levelDesc = 'Warning'
|
||||
break
|
||||
case 2:
|
||||
item.bgImg = require('@/assets/images/systemlog_box_error.png')
|
||||
item.color = '#FF4E00'
|
||||
item.levelDesc = 'Error'
|
||||
break
|
||||
}
|
||||
return item
|
||||
})
|
||||
})
|
||||
},
|
||||
showDetail(item) {
|
||||
this.current = item
|
||||
|
|
|
|||
Loading…
Reference in New Issue