parent
0a1af829b6
commit
72eab321f5
After Width: | Height: | Size: 571 B |
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="container login-record">
|
||||
<div class="subject">
|
||||
<div class="lc"></div>
|
||||
<div class="lh">登录记录</div>
|
||||
</div>
|
||||
<div class="record">
|
||||
<div class="items" v-for="(record, dateKey) in records" :key="dateKey">
|
||||
<div class="date">{{ dateKey }}</div>
|
||||
<div class="item" v-for="(item, index) in record" :key="item.id">
|
||||
<div class="item-1">
|
||||
<div class="item-1-left">
|
||||
<el-image :src="RecordImg" fit="fill" />
|
||||
</div>
|
||||
<div class="item-1-right">
|
||||
<div class="username">{{ item.username }}</div>
|
||||
<div class="ip">本地 {{ item.ip }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-2">
|
||||
<el-icon>
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<span style="margin-left: 5px;">2023-08-22 12:01:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination background layout="prev, pager, next" :total="page.total" hide-on-single-page
|
||||
v-model:current-page="page.current" v-model:page-size="page.pageSize" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Clock } from '@element-plus/icons-vue'
|
||||
import RecordImg from '@/assets/imgs/system.png';
|
||||
|
||||
defineOptions({ name: 'LoginRecord' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
interface RecordType {
|
||||
id: number,
|
||||
username?: string,
|
||||
ip?: string,
|
||||
createTime?: string
|
||||
}
|
||||
|
||||
const logData = ref<RecordType[]>([]);
|
||||
|
||||
const page = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 400
|
||||
});
|
||||
|
||||
const records = computed<any>(() => {
|
||||
let arr = {};
|
||||
for (let log of logData.value) {
|
||||
let datePart = log.createTime?.split(" ")[0] || "unknow";
|
||||
if (!arr[datePart]) {
|
||||
arr[datePart] = [];
|
||||
}
|
||||
arr[datePart].push(log);
|
||||
}
|
||||
// console.log(arr);
|
||||
return arr;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getRecordsData();
|
||||
console.log(123456);
|
||||
});
|
||||
|
||||
const getRecordsData = () => {
|
||||
logData.value = [
|
||||
{
|
||||
'id': 1,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-22 13:08:31',
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-22 12:08:31',
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-22 11:08:31',
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-22 10:08:31',
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-22 09:08:31',
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 13:08:31',
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 12:08:31',
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 11:08:31',
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 10:08:31',
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 09:08:31',
|
||||
},
|
||||
{
|
||||
'id': 11,
|
||||
'username': 'Kang-MB',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 08:08:31',
|
||||
},
|
||||
{
|
||||
'id': 12,
|
||||
'username': 'Kang-PC',
|
||||
'ip': '127.0.0.1',
|
||||
'createTime': '2022-08-21 07:08:31',
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-record {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding-left: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.subject {
|
||||
height: 60px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
|
||||
.lc {
|
||||
width: 8px;
|
||||
height: 20px;
|
||||
background: #409eff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.lh {
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
width: 100%;
|
||||
|
||||
.date {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100px;
|
||||
border: 1px solid #ededed;
|
||||
padding: 20px;
|
||||
margin-top: 10px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.item-1 {
|
||||
display: flex;
|
||||
|
||||
.item-1-left ::v-deep {
|
||||
margin-right: 20px;
|
||||
|
||||
.el-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-1-right {
|
||||
.username {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ip {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page {
|
||||
float: right;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,7 +1,8 @@
|
||||
import BaseInfo from './BaseInfo.vue'
|
||||
import ProfileUser from './ProfileUser.vue'
|
||||
import LoginRecord from './LoginRecord.vue'
|
||||
import ResetPwd from './ResetPwd.vue'
|
||||
import ProfileUser from './ProfileUser.vue'
|
||||
import UserAvatarVue from './UserAvatar.vue'
|
||||
import UserSocial from './UserSocial.vue'
|
||||
|
||||
export { BaseInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }
|
||||
export { BaseInfo, ResetPwd, LoginRecord,ProfileUser, UserAvatarVue, UserSocial }
|
||||
|
Loading…
Reference in new issue