zhgh_hhu/target/classes/views/platform/legalAid/statistics/apply.html

<!--#
layout("/layouts/platform.html"){
#-->

<style>
    .top-col {
        background-color: white;
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        width: calc((100% - (20px * 3)) / 4);
        overflow: hidden;
        color: #FFFFFF;
        border-radius: 4px;
    }

    .top-col:hover {
        transform: scale(1.01);
    }

    .top-col:not(:last-child), .center-col:not(:last-child) {
        margin-right: 20px;
    }

    .col-title {
        /*color: rgba(0, 0, 0, .45);*/
        font-size: 14px;
        margin-bottom: 10px;
        color: #FFFFFF;
    }

    .top-col-member-number {
        font-size: 30px;
        /*color: rgba(0, 0, 0, .85);*/
        color: #FFFFFF;
    }

    .top-col-chart {
        height: 80px;
        width: 100%;
        position: relative;
    }

    .center-col {
        background-color: white;
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        /*width: calc((100% - (20px)) / 2);*/
    }

    .el-table__body-wrapper::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    .el-table__body-wrapper {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    @media screen and (max-width: 500px) {
        .num-card {
            flex-direction: column;
        }

        .num-card .top-col {
            width: 100%;
            margin-bottom: 10px;
        }
    }

</style>

<div id="app" v-cloak style="background-color: #f0f2f5;padding: 20px;box-sizing: border-box;">

    <el-card shadow="never">

        <el-date-picker
                @change="getData()"
                v-model="pageForm.year"
                value-format="yyyy"
                type="year"
                placeholder="年度">
        </el-date-picker>
    </el-card>

    <el-row type="flex" style="margin-top: 20px" class="num-card">
        <el-col :span="6" class="top-col" style="background: rgb(248, 108, 107)">
            <div class="col-title">总开放场次</div>
            <div class="top-col-member-number">{{numberSessionMap.total}}<span
                    style="font-size: 14px">&ensp;次</span></div>
        </el-col>
        <el-col :span="6" class="top-col" style="background: rgb(133, 149, 244)">
            <div class="col-title">预约成功场次</div>
            <div class="top-col-member-number">{{numberSessionMap.successNum}}<span
                    style="font-size: 14px">&ensp;次</span></div>
        </el-col>
        <el-col :span="6" class="top-col" style="background: rgb(254, 187, 80)">
            <div class="col-title">咨询师人数</div>
            <div class="top-col-member-number">{{doctorList.length}}<span
                    style="font-size: 14px">&ensp;人</span></div>
        </el-col>
        <el-col :span="6" class="top-col" style="background: #26A65B">
            <div class="col-title">总计服务教师人数</div>
            <div class="top-col-member-number">{{serviceTeacherCount}}<span
                    style="font-size: 14px">&ensp;人</span></div>
        </el-col>
    </el-row>

    <el-row type="flex" style="background-color: #f0f2f5;margin-top: 20px">
        <!--        <el-col class="center-col" :span="12">-->
        <!--            <vi-title title="按分工会统计"></vi-title>-->
        <!--            <el-table ref="unionTable" :data="unionData" style="width: 100%;"-->
        <!--                      :height="tableHeight"-->
        <!--                      :header-cell-style="{background:'#FAFAFA'}" row-key="id">-->
        <!--                <el-table-column label="序号" width="100px" type="index"></el-table-column>-->
        <!--                <el-table-column prop="unioncode" label="院级工会" sortable show-overflow-tooltip>-->
        <!--                    <template scope="{row}">-->
        <!--                        {{row.unionName}} {{isDisPlayCode?'（'+row.unionCode+'）':null}}-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="userNum" label="预约人数" width="120px" sortable-->
        <!--                                 show-overflow-tooltip></el-table-column>-->
        <!--            </el-table>-->
        <!--        </el-col>-->
        <el-col class="center-col" :span="24">
            <vi-title title="按咨询统计"></vi-title>
            <el-table ref="unionTable" :data="doctorList" style="width: 100%;"
                      :height="tableHeight"
                      :header-cell-style="{background:'#FAFAFA'}" row-key="id">
                <el-table-column label="序号" width="100px" type="index"></el-table-column>
                <el-table-column prop="doctorUserName" label="咨询师" sortable show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别" sortable show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobTitle" label="职称" sortable show-overflow-tooltip></el-table-column>
                <el-table-column prop="serviceNum" label="服务次数" width="120px" sortable
                                 show-overflow-tooltip></el-table-column>
            </el-table>
        </el-col>

    </el-row>


</div>

<script>
    const vue = new Vue({
        el: '#app',
        data() {
            return {
                numberSessionMap: {},
                unionData: [],
                tableHeight: '0px',
                doctorList: [],
                pageForm: {
                    year: null
                },
                serviceTeacherCount: 0
            }
        },
        methods: {
            async getData() {
                const resp = await $.post(loc() + '/getData', this.pageForm)
                if (resp.code === 0) {
                    this.numberSessionMap = resp.data.numberSessionMap
                    this.unionData = resp.data.unionList
                    this.doctorList = resp.data.doctorList
                    this.serviceTeacherCount = resp.data.serviceTeacherCount
                }
            }
        },
        mounted() {
            setTimeout(() => {
                this.tableHeight = window.innerHeight - (this.$refs.unionTable.$el.getBoundingClientRect().top) - 20 - 20 + 'px'
                window.onresize = () => {
                    this.tableHeight = window.innerHeight - (this.$refs.unionTable.$el.getBoundingClientRect().top) - 20 - 20 + 'px'
                }
            })
        },
        created() {
            this.getData()
        }
    })
</script>

<!--#
}
#-->