ccongli
1 year ago
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 BaseInfo from './BaseInfo.vue'
|
||||||
import ProfileUser from './ProfileUser.vue'
|
import LoginRecord from './LoginRecord.vue'
|
||||||
import ResetPwd from './ResetPwd.vue'
|
import ResetPwd from './ResetPwd.vue'
|
||||||
|
import ProfileUser from './ProfileUser.vue'
|
||||||
import UserAvatarVue from './UserAvatar.vue'
|
import UserAvatarVue from './UserAvatar.vue'
|
||||||
import UserSocial from './UserSocial.vue'
|
import UserSocial from './UserSocial.vue'
|
||||||
|
|
||||||
export { BaseInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }
|
export { BaseInfo, ResetPwd, LoginRecord,ProfileUser, UserAvatarVue, UserSocial }
|
||||||
|
|||||||
Loading…
Reference in new issue