flyLong/pc/src/views/classInfoDetail.vue

<template>
    <div class="context">
        <div class="panel">
            <div class="panel-body">
                <br>
                <el-page-header @back="goBack" content="课程成绩">
                    <br>
                </el-page-header>
                <span class="classNames">
                    {{title}}
                </span>
            </div>
        </div>
        <div class="table">
            <el-table
                    :data="tableData"
                    border
                    is-horizontal-resize
                    :default-sort="{prop: 'date', order: 'descending'}"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    class=""
            >
                >
                <el-table-column
                        type="index"
                        label="排名"
                        align="center"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="head"
                        label="头像"
                        align="center"
                        sortable
                >
                    <template slot-scope="scope">
                        <!--<img class="head" :src="scope.row.Head" alt="" height="51" width="51" v-if="scope.row.Head">-->
                            <div class="demo-image__preview" v-if="scope.row.Head">
                                <el-image
                                        style="width: 25px; height: 25px"
                                        :src="scope.row.Head"
                                        :preview-src-list="[scope.row.Head]"

                                >
                                </el-image>
                            </div>
                            <img src="../assets/img/nav/head.png" alt="" v-else width="25px" height="25px">
                        <!--<img class="head" src="../assets/img/nav/head.png" height="51" width="51" v-else/>-->
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Name"
                        label="会员名"
                        sortable
                >
                </el-table-column>

                <el-table-column
                        prop="Cle"
                        label="卡路里"
                        :formatter="filterCle"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="Ck"
                        label="ck值"
                        :formatter="filterCK"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="MaxHr"
                        label="最大心率"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="AvgHr"
                        label="平均心率"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="Weight"
                        label="体重（kg）"
                        :formatter="filterWeight"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="Height"
                        label="身高(cm)"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        prop="Sex"
                        label="性别"
                        sortable
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.Sex == 1">男</span>
                        <span v-if="scope.row.Sex == 2">女</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="GroupNo"
                        label="队伍"
                        sortable
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.GroupNo == 0">不分组</span>
                        <span v-if="scope.row.GroupNo == 1" style="color: red">红队</span>
                        <span v-if="scope.row.GroupNo == 2" style="color: blue">蓝队</span>
                        <span v-if="scope.row.GroupNo == 3" style="color: goldenrod">黄队</span>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <el-pagination
                    background
                    :total="pageination.total"
                    :page-size="pageination.pageItem"
                    @current-change="pageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>

    import Global from '../Global.js'
    import {
        ClassOverDetailListQuery,
        FinshedDispPlanQuery,
    } from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                tableData: [],
                title: '',
                pageination: {
                    pageItem: 100,
                    pageoptions: pageOptions(),
                    total: 100,
                    pageIndex: 1,
                },
            }
        },
        mounted() {
            this.getTableQuery();
            this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;
        },
        methods: {
            goBack() {
                this.$router.push({
                    path: '/courses', query: {}
                });
            },
            // 页面数据查询
            getTableQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                    stdId: this.$route.query.StdId,
                    start: 1,//
                    tableMax: 9999,//
                };
                let postdata = qs.stringify(param);
                FinshedDispPlanQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.allTableData = json.Rs;
                            that.recordsTotal = json.Rs.length;
                        } else {
                            that.allTableData = [];
                            that.recordsTotal = 0;
                        }
                        // 设置分页数据
                        that.setPaginations();
                    } else {
                        that.$message.error(json.Memo + '错误码：' + json.Code);
                    }
                })
            },
            // 设置分页数据
            setPaginations() {
                // 分页属性
                let that = this;
                that.pageination.total = that.recordsTotal;

                // 默认分页
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
            },
            // 每页显示数量
            handleSizeChange() {
                let that = this;
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
                that.draw = that.pageination.pageItem;
                // that.getTableQuery();
            },
            // 翻页
            pageChange(pageIndex) {
                let that = this;
                // 获取当前页
                let index = that.pageination.pageItem * (pageIndex - 1);
                // 数据总数
                let nums = that.pageination.pageItem * pageIndex;
                // 容器
                let tables = [];
                for (var i = index; i < nums; i++) {
                    if (that.allTableData[i]) {
                        tables.push(that.allTableData[i])
                    }
                    this.tableData = tables;
                }
                that.start = index * that.draw;
                // that.getTableQuery();
            },
            // 单位转换去6个零
            filterCle(value, row, column) {
                return parseFloat(column / 1000000).toFixed(1);
            },
            // 单位转换去6个零
            filterCK(value, row, column) {
                return parseInt(column / 1000000);
            },
            // 单位转换去1个零
            filterWeight(value, row, column) {
                return parseInt(column / 10);
            },

        },
        watch: {
            $route(to) {
                if (to.name == 'classInfoDetail') {
                    this.getTableQuery();
                    this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;

                }
            },
        },
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";

    .context {
        height: 770px;
        overflow-y: scroll;
        display: block;
        margin: 0 auto;
        background-color: #fff !important;
        padding: 30px;
    }

    .classNames {
        width: 211px;
        height: 25px;
        background: #f0f2f5;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 16px;
        color: #3799ff;
        border-radius: 250px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 3px;
        float: left;
    }
    .head {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-radius: 250px;
    }
</style>