第62章 在线用户统计的前端实现

1 \src\views\Users\OnlineCustomerView.vue

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');

    }

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;

    }

对以上功能更为具体实现和注释见：230418_017shopvue(在线用户统计的前端实现)。