student-assessment/src/views/appView/SelfQuestionnaireProcess.vue

<template>
    <div class="main_container hide_scrollbar">
        <!-- 顶部筛选与统计区域 -->
        <div class="page_search">
            <div class="search_content">
                <div class="content_left stats_container">
                    <div class="stat-item">
                        <span class="stat-num blue">{{teacherCount}}</span>
                        <span class="stat-label">评价教师</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num green">{{evaluationOverCount}}</span>
                        <span class="stat-label">已评科目</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num red">{{evaluationNotOverCount}}</span>
                        <span class="stat-label">待评科目</span>
                    </div>
                </div>
                <div class="content_right">
                    <el-button class="button_border" @click="GoToElectiveSubject" >更改科目班级</el-button>
                </div>
            </div>
        </div>

        <!-- 教师卡片列表区域 -->
        <ul class="teacher_list">
            <li  v-for="(item) in teacherList" 
                :key="item.id"  
                class="teacher_card">
                <div class="card_header">
                    <div class="subject_tag" :style="{ backgroundColor: subjectToColor(item.evaluationSubjectName)?.color }">
                        {{ item.evaluationSubjectName }}
                    </div>
                    <div class="info_text">
                        <div class="teacher_name">{{ item.teacherName }}</div>
                        <div class="class_name">{{ item.evaluationClassName }}</div>
                    </div>
                </div>
                <div class="card_footer">
                    <span class="status_text" :style="{color:fillOutStatusToColor(item.evaluationStatus)?.color}" >
                        {{ fillOutStatusToColor(item.evaluationStatus)?.statusName }}
                    </span>
                </div>
            </li>
        </ul>

        <!-- 底部操作区域 -->
        <div class="bottom_action">
            <!-- 开始评价按钮 -->
            <el-button class="button_background" @click="GoToFillOutQuestionnaire">开始评价</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { subjectToColor,fillOutStatusToColor } from '@/components/commonDictConvert';

import {getEvaluationProcessMsgApi} from '@/api/selfQuestionnaireProcess'


interface TeacherItm {
    id: string|number
    evaluationClassName: string     //班级
    evaluationStatus: number   //评价状态  0-待评价  1-进行中  2-已评价
    subjectType: number      // 科目类型 0-班主任  1 科目（单科）
    teacherName: string      //教师名称
    evaluationSubjectName:string  //科目名称
}


const router = useRouter()

// 基础信息数据
const teacherCount = ref()            // 评价教师数量
const evaluationOverCount = ref()   // 已评科目数量
const evaluationNotOverCount = ref()  //待评科目数量
const deadlineTime = ref()      //评价截止时间
const remainTime = ref()      //剩余时间

// 教师列表数据
const teacherList = ref<TeacherItm[]>([]);



const GoToElectiveSubject = ()=>{
    router.push('/app/questionnaireElectiveSubject')
}

// 跳转到填写问卷页
const GoToFillOutQuestionnaire = ()=>{
    // 模拟数据
    sessionStorage.setItem('teacherList',JSON.stringify(teacherList.value)) 
    router.push('/app/questionnaireCommit')
}


onMounted( async()=>{
    let res = await getEvaluationProcessMsgApi()
    if(res?.code == 200){
        teacherCount.value = res.data.teacherCount
        evaluationOverCount.value = res.data.evaluationOverCount
        evaluationNotOverCount.value = res.data.evaluationNotOverCount
        deadlineTime.value = res.data.endDateTime
        remainTime.value = res.data.endTime
        teacherList.value = res.data.dataList
    }
})
</script>

<style lang="scss" scoped>

.main_container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
    padding:calc(16 * var(--app-rpx)) calc(12 * var(--app-rpx))  calc(90 * var(--app-rpx)) !important;
    
    .search_content{
        .content_right{
            height: auto;
            :deep(.button_border){
                width: calc(88 * var(--app-rpx));
                height: calc(36 * var(--app-rpx)) !important;
                font-size: calc(12 * var(--app-rpx));
                border-radius: calc(4 * var(--app-rpx));
            }
        }
    }

    /* 覆盖外部样式的一些特定调整 */
    .stats_container {
        gap: calc(20 * var(--app-rpx)) !important;
        align-items: center;
        .stat-item {
            display: flex;
            flex-direction: column;
            gap: calc(4 * var(--app-rpx));
            line-height: 1.5;
            .stat-num {
                font-weight: 600;
                font-size:calc(16 * var(--app-rpx));
                &.blue { color: #2E64FA; }
                &.green { color: #2BC644; }
                &.red { color: #F56C6C }
            }
            .stat-label {
                font-weight: 400;
                font-size:calc(12 * var(--app-rpx));
                color: #999999;
            }
        }
        .stat-divider {
            width: calc(1 * var(--app-rpx));
            height: calc(32 * var(--app-rpx));
            background-color: #F3F3F3;
        }
    }

        
    /* 教师列表网格布局 */
    .teacher_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(10* var(--app-rpx));
        margin-top: calc(16 * var(--app-rpx));

        .teacher_card {
            display: flex;
            flex-direction: column;
            height: calc(110 * var(--app-rpx));
            border: calc(1 * var(--app-rpx)) solid #EBEEF5;
            border-radius:  calc(10 * var(--app-rpx)) ;
            cursor: pointer;

            .card_header {
                display: flex;
                align-items: center;
                gap:calc(8 * var(--app-rpx));
                padding:calc(14 * var(--app-rpx)) ;
                background: #F8FAFE;
                border-radius:  calc(10 * var(--app-rpx))  calc(10 * var(--app-rpx)) 0px 0px;
                border-bottom: calc(1 * var(--app-rpx)) solid #EBEEF5;

                > *{
                    flex-shrink: 0;
                }
                .subject_tag {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width:  calc(40 * var(--app-rpx));
                    height: calc(40 * var(--app-rpx));
                    border-radius:calc(4 * var(--app-rpx));
                    font-weight: 600;
                    font-size: calc(12 * var(--app-rpx));
                    color: #FFFFFF;
                    text-align: center;
                }
                .info_text {
                    height: calc(40 * var(--app-rpx));
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    color: #333333;
                    .teacher_name {
                        font-weight: 600;
                        font-size: calc(16 * var(--app-rpx));
                    }
                    .class_name {
                        font-size: calc(12 * var(--app-rpx));
                    }
                }
            }
            .card_footer {
                flex: 1 1;
                display: flex;
                justify-content: center;
                align-items: center;
                .status_text {
                    font-weight: 600;
                    font-size:  calc(14 * var(--app-rpx)) ;
                }
            }
        }
    }

    /* 底部区域 */
    .bottom_action {
        margin-top: calc(84 * var(--app-rpx)) ;
        margin-bottom:  calc(10 * var(--app-rpx)) ;
        flex: 1 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        .button_background{
            width:calc(100% - 16 * var(--app-rpx));
            height: calc(44 * var(--app-rpx));
            font-size:  calc(16 * var(--app-rpx));
            border-radius: calc(4 * var(--app-rpx));
            font-weight: 600;
        }
    }
}
</style>