124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="pd-lr-20" style="padding-bottom: 80px;">
|
||
|
|
<block v-for="(item,index) in state.logData" :key="index">
|
||
|
|
<view class="cardBox mg-t-20">
|
||
|
|
<view style="display: flex;">
|
||
|
|
<view class="cardBox-avatar">
|
||
|
|
{{ item.realName?.slice(0, 1) || item.realName?.slice(0, 1)}}
|
||
|
|
</view>
|
||
|
|
<view class="cardBox-rightInf">
|
||
|
|
<view class="cardBox-rightInf-fontSize " style="align-items: baseline;">
|
||
|
|
<span> {{ item.realName }}</span>
|
||
|
|
<up-tag class="mg-l-20" size="mini" borderColor="#ffeed4" bgColor="#ffeed4" plain :text="item.httpMethod" color="#FB8B05" />
|
||
|
|
</view>
|
||
|
|
<view style="font-size: 26rpx;color: #777;" class="mg-t-20">
|
||
|
|
<view style="display: flex;align-items: baseline;">
|
||
|
|
{{ item.location }} <span style="padding: 0 6rpx;"> | </span> {{ item.remoteIp }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<up-line dashed direction="row" color="#ccc" margin="20rpx 0"></up-line>
|
||
|
|
<view class=" cardBox-content">
|
||
|
|
<span class="gray"></span> {{item.displayTitle}}
|
||
|
|
</view>
|
||
|
|
<view class=" cardBox-content mg-t-20">
|
||
|
|
<span class="gray"></span> {{item.requestUrl}}
|
||
|
|
</view>
|
||
|
|
<view class="mg-t-20">
|
||
|
|
<up-tag :text="item.browser" borderColor="#cee3f9" bgColor="#cee3f9" color="#11559c" size="mini" plain></up-tag>
|
||
|
|
<up-tag :text="item.createTime" borderColor="#cee3f9" bgColor="#cee3f9" color="#11559c" size="mini" plain style="margin-left: 20rpx;"></up-tag>
|
||
|
|
<up-tag :text="item.elapsed + '3ms'" borderColor="#ffeed4" bgColor="#ffeed4" color="#FB8B05" size="mini" plain style="margin-left: 20rpx;" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, reactive } from 'vue';
|
||
|
|
import { sysLogOpPageApi } from '@/api/log.js'
|
||
|
|
|
||
|
|
const state = reactive({
|
||
|
|
theme: uni.getStorageSync('theme'),
|
||
|
|
requestBody: {
|
||
|
|
page: 0,
|
||
|
|
pageSize: 10
|
||
|
|
},
|
||
|
|
logData: {} as any,
|
||
|
|
})
|
||
|
|
|
||
|
|
// 页面初始化
|
||
|
|
onMounted(() => {
|
||
|
|
sysLogOpPageApi(state.requestBody).then((res : any) => {
|
||
|
|
state.logData = res.result.items;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pd-lr-20 {
|
||
|
|
padding: 0 20rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox {
|
||
|
|
padding: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 15rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mg-t-20 {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox-avatar {
|
||
|
|
color: #1661AB;
|
||
|
|
background: #F1F0ED;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
flex: none;
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
font-size: 45rpx;
|
||
|
|
line-height: 120rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox-rightInf {
|
||
|
|
width: calc(100% - 130rpx);
|
||
|
|
padding-left: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.cardBox-rightInf-fontSize {
|
||
|
|
font-size: 25rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gray {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox-name {
|
||
|
|
color: #999;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox-leixing {
|
||
|
|
color: $uni-color-primary;
|
||
|
|
padding-top: 5rpx;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardBox-content {
|
||
|
|
color: #333;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
</style>
|