cpdm_pc/src/views/TestRecord.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import CpmdFooter from '@/components/CpmdFooter.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import { getUnread, planNumGet } from '../utils/test'
//持久化设置 菜单状态
import { menuStatusStore, userInfoStore } from '@/stores'
// import router from '@/router';
import { useRouter } from 'vue-router';
import { getDataApi } from '@/api/plan';
import { userPlanApi, userPlanDetailApi } from '@/api/home';
const router = useRouter()
const menuStatus = menuStatusStore();
menuStatus.saveActiveIndex('5')
const userInfo = userInfoStore()
//分页设计
//当前页
//是哪一页
const pageNum = ref<number>(1)
//一页显示多少条
const pageSize = ref<number>(5)
//数据总共多少条
const totol = ref<number>(0)

//显示是否是在加载中
const isLoading = ref<boolean>(false)
//是否显示noMore
const noMore = ref<boolean>(false)
//页面返回的数据
const list = ref<any>([])

//获取数据报
const getData = async () => {
    //判断总条数是否大于当前页面的数据
    //先判断
    if (totol.value == list.value.length) {
        //显示noMore
        if (totol.value == 0) {
            noMore.value = false;
        } else {
            noMore.value = true;
        }

        return
    }

    //先是加载中的话就不加载了
    if (isLoading.value) {
        return
    }
    isLoading.value = true;
    //参数构造
    pageNum.value++
    //到这里就可以显示加载中
    let res = await initData()
    isLoading.value = false;

}

const initData = async () => {

    //判断用户登录没有
    if (!userInfo.token) {
        return
    }
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        userNo: userInfo.userInfo.userNo
    }
    let res: any = await getDataApi(params)
    if (res.code == 200) {
        //在这里需要将已经测试完成的测试计划下的---的题目都标记出来
        // list.value.push(...res.data)
        if (res.data.content.length > 0) {
            let listInit = []
            listInit.push(...res.data.content)
            // list.value.push(...res.data.content)


            //在这里进行循环--将需要显示的报告查询出来放入数组
            for (let i = 0; i < listInit.length; i++) {

                // list.value[i].listLin = []

                let params = {
                    planId: listInit[i].id,
                    userNo: userInfo.userInfo.userNo
                }
                let temp: any = await userPlanDetailApi(params)

                //在这里循环//且类型等于0 量表的  得到量表的列表
                let scaleList = []
                for (let j = 0; j < temp.data.length; j++) {
                    if (temp.data[j].isDisplayed == '1' && temp.data[j].contentType == '0') {
                        // if (temp.data[j].flag != '20210617140713') {
                        scaleList.push(temp.data[j])
                        // }
                    }
                }
                listInit[i].scaleList = scaleList;
                //在这里循环 //且类型为等于1的量表  得到量表列表
                let taskList = []
                for (let j = 0; j < temp.data.length; j++) {
                    if (temp.data[j].isDisplayed == '1' && temp.data[j].contentType == '1') {
                        taskList.push(temp.data[j])
                    }
                }
                listInit[i].taskList = taskList;
                // list.value[i].list = temp.data
                // list.value[i].listLin = []
            }
            list.value.push(...listInit)

            totol.value = res.data.totalElements
        } else {
            list.value = []
            totol.value = 0
            // totalElements
        }
    }
}

//先判断总条数是否等于 当前页面的参数
//如果等于的话--显示nomore
//如果总条数大于 当前页面的总条数就显示loading


//刚进入页面就将高度设置为页面需要的
onMounted(() => {
    initData()
    if (userInfo.token) {
        getUnread()
        planNumGet()
    }
    //进到界面开始轮询

})
//界面销毁函数

//跳转页面切换页面
const viewReport = (val: any) => {
    router.push({ name: 'report', params: { planId: val.planId, flag: val.flag, name: val.name } })
    // router.push({ name: 'report', params: { planId: 'a', flag: 'b' } })
    // router.push({ name: 'report' })
    // router.push({ name: 'plan' })
}

//轮旋切换页面的方法

//退出页面销毁 方法
onUnmounted(() => {

})




</script>

<template>
    <div class="home_header_out">
        <div class=" home_header_inner">
            <CpmdHeader />
            <div style="text-align: center;">
                <!-- <img class="xlts_img" style="margin-top:40px" src="../assets/home/other_text.png" /> -->
            </div>
        </div>
        <div class="leave_message">
            <!-- <img class="img" src="../assets/zs/community.png" alt=""> -->
            <div class="font_blue"> 测试记录 </div>
        </div>
        <div class="kply">
            <div class="kply_inner">
                <!--  -->
                <div>
                    <!-- <div style="width: 1200px;margin-left:32px; box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
                        v-show="list.length == 0">
                        <img width="400px" src="../assets/planNo.png">
                    </div> -->

                    <div style="box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);width: 1200px;margin-left:32px"
                        v-show="list.length == 0">
                        <div style="padding:10% 20%;display: flex;justify-content: center ;">
                            <!-- <img width="100%" src="../assets/planNo.png"> -->
                            <img width="400px" src=" ../assets/planNo.png">
                        </div>
                    </div>
                    <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
                        <div>
                            <div v-for="item in list" class='record_zt'>
                                <div class="test_record">
                                    <span class="test_plan_name">{{ item.planName }}


                                        <span class="unread_status" style="" v-show="item.isRead == 0">未读</span>
                                        <span class="read_status" v-show="item.isRead == 1">已读</span>
                                    </span>

                                </div>
                                <div class="test_time">
                                    <span>测试时间：{{ item.taskStartTime }}～{{ item.taskEndTime }}</span>
                                </div>
                                <div class="content_out">
                                    <div class="content_inner">
                                        <div class="task_out">
                                            <div class="content_title">1.问答测试</div>
                                            <div class="task_inner">

                                                <div class="task_inner_single" v-for="subItem in item.scaleList"
                                                    :key="subItem.id">
                                                    <div class="task_inner_one">
                                                        <img style="width: 80px;height: 80px"
                                                            src="../assets/kepu/xlwht_active.png" alt="">
                                                        <div class="task_content">
                                                            <div class="title">{{ subItem.name }}</div>
                                                            <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
                                                            subItem.expectTime }}</div> -->
                                                            <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
                                                                subItem.useTime }}</div>
                                                            <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
                                                            <div class='noCompleted_status'> 未完成</div>
                                                        </div> -->
                                                            <div class="isCompleted"
                                                                v-show="subItem.isCompleted == '1'">
                                                                <div @click="viewReport(subItem)"
                                                                    class='isCompleted_status'> 查看报告 <img
                                                                        style='height: 12px;margin-left:4px'
                                                                        src='../assets/zs/jian.png' /></div>
                                                            </div>
                                                            <!-- {{ subItem.isRequired }} -->
                                                            <div class="isMust" v-show="subItem.isRequired == '1'">必做
                                                            </div>
                                                            <div class="isChoosable" v-show="subItem.isRequired == '0'">
                                                                选做
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="task_out">
                                            <div class="content_title">2.认知评估</div>
                                            <div class="task_inner">
                                                <div class="task_inner_single" v-for="subItem in item.taskList">
                                                    <div class="task_inner_one">
                                                        <img style="width: 80px;height: 80px"
                                                            src="../assets/kepu/task_active.png" alt="">
                                                        <div class="task_content">
                                                            <div class="title">{{ subItem.name }}</div>
                                                            <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
                                                            subItem.expectTime }}</div> -->
                                                            <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
                                                                subItem.useTime }}</div>
                                                            <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
                                                            <div class='noCompleted_status'> 未完成</div>
                                                        </div> -->
                                                            <div class="isCompleted"
                                                                v-show="subItem.isCompleted == '1'">
                                                                <div @click="viewReport(subItem)"
                                                                    class='isCompleted_status'> 查看报告 <img
                                                                        style='height: 12px;margin-left:4px'
                                                                        src='../assets/zs/jian.png' /></div>
                                                            </div>
                                                            <div class="isMust" v-show="subItem.isRequired == '1'">必做
                                                            </div>
                                                            <div class="isChoosable" v-show="subItem.isRequired == '0'">
                                                                选做
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div></div>
                                </div>
                                <!-- <div class="record_out">
                                <div class="record_score">
                                    <span>得&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
                                    <span>{{ item.score }}</span>
                                </div>
                                <div class="record_result">
                                    <span>结&nbsp;&nbsp;&nbsp;&nbsp;论：</span>
                                </div>
                            </div> -->


                            </div>
                        </div>

                        <div style="text-align: center;margin-top:20px" v-show="isLoading">努力加载中...</div>
                        <div style="text-align: center;;margin-top:20px" v-show="noMore">没有更多了</div>
                    </div>

                    <!-- 测试记录列表 -->

                </div>

            </div>

        </div>

    </div>

    <div class="home_footer_out">
        <CpmdFooter />
    </div>
</template>
<style lang="scss" scoped>
.home_footer_out {
    width: 100%;
    background-color: #000000;
}

.home_header_out {
    // scroll-snap-align: start;
    // position: relative;
    padding-bottom: 60px;
    width: 100%;
    min-width: 1200px;
    // background-image: url('../assets/home/bg_ty.png');
    background-repeat: no-repeat;
    background-size: contain;
    flex: 1;
    // background-color: #B3F1DA; //估计是需要动态

    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
    .home_header_inner {
        min-height: 1;
        left: 0;
        right: 0;
        margin: auto;
        // height: 100px;
        width: 100%;

        .xlts_img {
            height: 60px;
        }
    }

    .leave_message {
        left: 0;
        right: 0;
        margin: auto;
        width: 1200px;
        margin-bottom: 20px;
        margin-top: 20px;

        .font_blue {
            position: relative;
            color: #00DE7E;
            font-weight: 700;
            font-size: 22px;
            font-family: 'Rammetto One-Regular';
            padding-top: 30px;
            z-index: 10;
            background: url(../assets/zs/test_record1.png) no-repeat;
            background-size: auto 50px;
        }
    }

    .kply {
        width: 100%;
        // background-color: #FAFAFA;

        .kply_inner {
            // padding: 20px 20px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1264px;

            background-color: #ffffff;
            border-radius: 40px;
            // margin-bottom: 20px;

            // height: 1000px;
            .infinite-list-wrapper {
                padding: 32px;

                // max-height: 900px;
                // max-height: 500px;
                // min-height: 500px;
                .record_zt {

                    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
                    margin-bottom: 40px;
                    box-sizing: border-box;
                    padding: 32px 20px;

                }

                .kepu_title {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .kepu_title_des {
                        font-family: Alibaba PuHuiTi 2.0;
                        font-weight: 600;
                        font-size: 30px;
                        color: #000000;

                    }

                    .home_mid_plan_button {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        justify-content: end;

                        // text-align: right;
                        .pub_button {
                            cursor: pointer;
                            // width: 100px;
                            border-radius: 12px;
                            border: 3px solid #48D68E;
                            color: #ffffff;
                            background-color: #000000;

                            padding: 8px 30px;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                        }
                    }

                }

                .com_out {
                    min-height: 500px;
                    padding: 20px 20px;
                }

                .test_record {
                    display: flex;
                    align-items: center;


                    img {
                        width: 50px;
                    }

                    .test_plan_name {
                        background-image: url('../assets/zs/plan_line.png');
                        background-repeat: no-repeat;
                        background-size: contain;
                        padding-bottom: 10px;
                        background-position: bottom;
                        position: relative;

                        .read_status {
                            font-size: 14px;
                            line-height: 24px;

                            font-weight: 100;
                            background-color: #1673FF;
                            color: #ffffff;
                            width: 50px;
                            top: -20px;
                            text-align: center;
                            border-radius: 6px;
                            position: absolute;
                        }

                        .unread_status {
                            font-size: 14px;
                            line-height: 24px;
                            font-weight: 100;
                            background-color: #00DE7E;
                            color: #ffffff;
                            width: 50px;
                            top: -20px;
                            text-align: center;
                            border-radius: 6px;
                            position: absolute;
                        }
                    }

                    span {

                        font-size: 22px;
                        font-weight: 700;
                        letter-spacing: 3px;
                    }
                }

                .test_time {
                    margin-bottom: 10px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        color: #000000;
                        opacity: 0.4;
                        font-size: 18px;
                    }

                    div {
                        cursor: pointer;
                        // width: 100px;
                        border-radius: 12px;
                        border: 3px solid #48D68E;
                        color: #ffffff;
                        background-color: #000000;
                        margin-right: 20px;
                        padding: 8px 30px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                    }
                }

                .record_out {
                    margin-top: 30px;
                    background-color: #F7F7F7;

                    padding: 30px 40px;
                    border-radius: 40px;

                    .record_score {
                        color: #48D68E;
                        margin-bottom: 5px;
                        font-size: 20px;
                        letter-spacing: 3px;
                    }

                    .record_result {
                        line-height: 30px;
                        color: #48D68E;
                        margin-bottom: 10px;
                        font-size: 20px;
                        letter-spacing: 3px;

                    }
                }

                .content_out {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    // height: 200px;
                    background-color: #F7F7F7;
                    border-radius: 5px;

                    .content_inner {
                        padding: 20px 40px;

                        .content_title {
                            margin-bottom: 0px;
                            font-weight: 700;
                            font-size: 18px;
                        }

                        .content_one {
                            border-radius: 20px;

                            // padding: 10px 20px;
                            display: flex;
                            background-color: #ffffff;
                            width: 45%;
                            align-items: center;

                            .content_single {
                                border-radius: 20px;

                                padding: 10px 20px;
                                display: flex;
                                background-color: #ffffff;
                                width: 45%;
                                align-items: center;

                                .content_detail {
                                    display: flex;
                                    margin-left: 15px;
                                    justify-content: start;
                                    height: 80px;
                                    flex-direction: column;

                                    .title {
                                        font-weight: 700;
                                        font-size: 18px;
                                    }

                                    .des {
                                        color: #999999;
                                        font-size: 14px;
                                    }
                                }
                            }


                        }

                        .task_out {
                            margin-top: 20px;
                            display: flex;
                            flex-direction: column;

                            .task_inner {
                                display: flex;
                                flex-direction: row;

                                justify-content: space-between;
                                flex-wrap: wrap;

                                .task_inner_single {
                                    margin-top: 20px;
                                    height: 100px;
                                    border-radius: 20px;
                                    width: 45%;
                                    display: flex;
                                    flex-direction: row;
                                    background-color: #ffffff;
                                    align-items: center;

                                    .task_inner_one {
                                        padding: 10px 20px;
                                        border-radius: 20px;
                                        width: 100%;
                                        display: flex;
                                        flex-direction: row;
                                        background-color: #ffffff;
                                        align-items: center;

                                        .task_content {
                                            position: relative;
                                            height: 80px;
                                            margin-left: 10px;
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;

                                            .isMust {
                                                position: absolute;
                                                right: 0;
                                                background-color: #00DE7E;
                                                font-size: 10px;
                                                color: #ffffff;
                                                padding: 4px 10px;
                                                border-radius: 3px;
                                            }

                                            .isChoosable {
                                                position: absolute;
                                                right: 0;
                                                background-color: #FF8400;
                                                font-size: 10px;
                                                color: #ffffff;
                                                padding: 4px 10px;
                                                border-radius: 3px;
                                                // border: 1px solid #00DE7E;
                                            }

                                            .title {
                                                font-weight: 700;
                                                font-size: 18px;
                                                width: 100%;
                                                letter-spacing: 2px;
                                            }

                                            .des {

                                                color: #999999;
                                                font-size: 14px;
                                                line-height: 24px;
                                                letter-spacing: 2px;
                                            }

                                            .noCompleted {
                                                width: 100%;
                                                color: #ffffff;
                                                display: flex;
                                                justify-content: end;

                                                .noCompleted_status {
                                                    line-height: 24px;
                                                    font-size: 14px;
                                                    border-radius: 20px;
                                                    text-align: center;
                                                    right: 0px;
                                                    width: 70px;
                                                    background-color: red;
                                                }
                                            }

                                            .isCompleted {
                                                width: 100%;
                                                color: #ffffff;
                                                display: flex;
                                                justify-content: end;

                                                .isCompleted_status {
                                                    padding: 8px 20px;
                                                    display: flex;
                                                    line-height: 18px;
                                                    font-size: 14px;
                                                    align-items: center;
                                                    text-align: center;
                                                    right: 0px;
                                                    width: 70px;
                                                    border-radius: 4px;
                                                    border: 1px solid #48D68E;
                                                    color: #ffffff;
                                                    background-color: #3B3B3B;
                                                    cursor: pointer
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }


}

.home_mid {
    // background-color: blanchedalmond;
    width: 1200px;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 40px;
    // position: relative;




    .kepu_title {
        text-align: center;

        font-size: 50px;
        color: #111111;
        line-height: 95px;

        // width: 100%;
        // left: 0;
        // right: 0;
        // margin: auto
    }

    .kepu_title_sub {
        margin-top: 30px;
        text-align: center;
        font-size: 28px;
        color: #48D68E;
        line-height: 26px;
    }

    .man1_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man1 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man1_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: 100px
            }

        }

        .des {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 100px;
                padding-right: 20px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .man2_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man2 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man2_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: -100px
            }

        }

        .des2 {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des2_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 20px;
                padding-right: 100px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .get_more {
        text-align: center;

        img {
            width: 300px;
            margin-top: 60px;
            margin-bottom: 60px;
        }
    }
}

// .home_footer_out {
//     width: 100%;
//     background-color: #000000;
// }</style>