第62章 在线用户统计的前端实现
1 \\src\\views\\Users\\OnlineCustomerView.vue
<template>
<div class="wrap">
<!--注意：1、“回到顶部”组件及其回滚内容都必须包含到同1个div容器中。-->
<!-- 2、div容器中必须有1个唯1性的样式类（例如：wrap）的定义，以便“回到顶部”组件进行回滚时进行定位。 -->
<!-- 3、“回到顶部”组件 必须在所有的回滚内容之上。 -->
<el-backtop :bottom="100" target=".wrap" style="background-color: #666;">
<el-icon style="color: #99ffff; font-size: 40px; margin-top: -2px;">
<CaretTop />
</el-icon>
</el-backtop>
<el-table :data="currentPageList" style="width: 100%">
<el-table-column label="编号" property="id" />
<el-table-column label="帐号" property="name" />
<el-table-column label="邮箱" property="email" />
<el-table-column label="最后活动时间" property="lastActivityDateTime" width="155" :formatter="dateTimeformat" />
</el-table>
<!-- “->”:设定 “el-pagination”分页组件靠右显示。 -->
<el-pagination v-model:current-page="pagination.pageIndex" v-model:page-size="pagination.pageSize"
:page-sizes="[1, 10, 15, 20, 50, 100]" :total="pagination.totalCount" prev-text="上一页" next-text="下一页"
background layout="->, total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
</div>
</template>
<script setup>
import {
ref,
} from 'vue';
import {
onlineCustomerIndex,
} from '../../common/http.api.js';
import moment from 'moment';
const pagination = ref({
pageIndex: 1, //初始化当前页，即第1页。
pageSize: 15, //初始化每页最多所包含的项数值，即每页最多所包含15项。
totalCount: 0, //初始化数据源的总计项数值，由于还没有加载数据源所以该值为：0。
//初始化排序字段及其方式。
OrderByModel: JSON.stringify({
OrderByFiled: '',
OrderByType: '',
}),
QueryCondition: ""
});
//初始化当前页的渲染数据集列表实例。
const currentPageList = ref([]);
//获取当前页面渲染显示所需的数据源。
const currentPageInit = async () => {
const res = await onlineCustomerIndex(pagination.value);
currentPageList.value = res.data.response.data;
pagination.value.totalCount = res.data.response.totalCount;
//console.log(currentPageList.value);
//console.log(pagination.value.totalCount);
//console.log(currentPageList.value[0].lastActivityDateTime);
//console.log(moment(currentPageList.value[0].lastActivityDateTime).format('YYYY-MM-DD HH:mm:ss'));
};
currentPageInit();
//该事件在改变每页最多所包含的项数值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。
const handleSizeChange = async(size) => {
//console.log(`${size} `);
pagination.value.pageSize = size;
await currentPageInit();
};
//该事件在改变当前页的索引值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。
const handleCurrentChange= async(currentPage) => {
pagination.value.PageIndex = currentPage;
await currentPageInit();
};
function dateTimeformat(row, column) {
let data = row[column.property];
if (data == null) {
return null;
}
return moment(data).format('YYYY-MM-DD HH:mm:ss');
}
</script>
<style scoped lang="scss">
.wrap {
height: 100%;
overflow-x: hidden;
}
//表单“label”字体样式
:deep(.el-form-item__label) {
font-weight: 400;
}
// 修改表头样式。
:deep(.el-table__header thead th) {
background-color: #000000;
color: #ffd04b;
font-weight: 400;
text-align: center;
}
//表格隔行变换颜色。
:deep(.el-table__body tbody tr:nth-child(odd)) {
background-color: #FFFFFF;
}
:deep(.el-table__body tbody tr:nth-child(even) td) {
background-color: #CCFFFF;
}
.userinfo-inner {
cursor: pointer;
float: left;
}
//“el-pagination”分页组件样式。
.el-pagination {
margin-top: 10px;
//font-size: 25px;
//"上一页"样式。
:deep(.btn-prev) {
background-color: transparent;
height: 40px;
margin-right: 20px;
}
//"下一页"样式。
:deep(.btn-next) {
background-color: transparent;
height: 40px;
margin-left: 20px;
}
//分页索引样式。
:deep(.number) {
background-color: transparent;
min-width: 40px;
height: 40px;
margin-right: 15px;
}
}
//“el-pagination”分页组件中下拉框控件字体样式。
:deep(.el-input__wrapper) {
//font-size: 25px;
}
.lightgreen-box {
//background-color: lightgreen;
//height: 24px;
float: right;
}
</style>
对以上功能更为具体实现和注释见：230418_017shopvue(在线用户统计的前端实现)。