cpdm_pc/src/views/Plan.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import CpmdQuestionnaire from '@/components/CpmdQuestionnaire.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

//调用子组件的ref
const question = ref<any>()

//持久化设置 菜单状态
import { menuStatusStore, userInfoStore } from '@/stores'
import { queryIsQuestionApi, userPlanApi, userPlanDetailApi } from '@/api/home';
import { ElMessage } from 'element-plus';
const userInfo = userInfoStore();
const menuStatus = menuStatusStore();
menuStatus.saveActiveIndex('4')
//标志  设置--方法是否结束的标志
const isFinshed = ref<boolean>(false)
//定义计划列表数据
const planList = ref<any>([

])

//临时存储数组的
const tempPlanList = ref<any>({})
//时间格式化 1000  60  60
// const formatterTi = (val: number) => {
//     let mill = Math.floor(val / 1000)
//     let ss = Math.floor(mill / 60)

//     //先判断是多少个小时
//     let hour = Math.floor(val / 1000 / 60 / 60)
//     return hour + ':时'
// }
//调用--接口
//紧接着开始
const continueFun = () => {
    startPlan(tempPlanList.value);
}


//点击了开始测试--跳转到测试页面
const startPlan = async (val: any) => {
    tempPlanList.value = val
    //先判断
    //是否做了问卷
    //如果未做问卷需要弹出问卷的弹出框
    //做完以后开始测试
    let res: any = await queryIsQuestionApi()
    if (res.data != null) {
        //此时是问卷未做
        //调用问卷组件打开
        question.value.open(res.data, '1')
        return
    }
    let nextFlag = '';
    let type = '';
    if (val.scaleList.length > 0) {
        //循环判断是否都完成了
        for (let i = 0; i < val.scaleList.length; i++) {
            if (val.scaleList[i].isCompleted != '1') {
                nextFlag = val.scaleList[i].flag;
                type = val.scaleList[i].contentType;
                break;
            }
        }
    }
    //当标志是空的时候证明所有量表的问答测试都已经完成了
    //接下就需要判断认知任务的完成情况了
    if (nextFlag == '') {
        //那就需要判断是否是 认知任务是否做完了
        for (let i = 0; i < val.taskList.length; i++) {
            if (val.taskList[i].isCompleted !== '1') {
                nextFlag = val.taskList[i].flag;
                type = val.taskList[i].contentType;
                break
            }
        }
    } else {
        //那就需要
        //假如没做完的---判断是flag 是否是scl90
        if (nextFlag == "20210617140713") {
            //设置---
            //判断scl 90 的完成状态是0还是2
            for (let i = 0; i < val.scaleList.length; i++) {
                if (val.scaleList[i].flag == '20210617140713') {
                    if (val.scaleList[i].isCompleted == '0') {

                    }
                    if (val.scaleList[i].isCompleted == '2') {
                        //如果是2的话
                        //几个量表
                        //拿到
                        //需要--找到下一个需要做的不展示但是需要必测的
                    }
                }
            }
        }
    }
    //如果是量表就开始跳转到量表页面
    //判断是type 0还是1
    //如果是0的话，需要跳转到量表中间页面
    if (type == '0') {
        //跳转量表中间页
        //传输
        router.push({
            name: 'scaleDetail', params: {
                planId: val.id,
                planName: val.planName,
                flag: nextFlag,
                type: type
            }
        })

    } else if (type == '1') {
        //跳转到认知任务中间页
        router.push({
            name: 'cognize', params: {
                planId: val.id,
                planName: val.planName,
                flag: nextFlag,
                type: type
            }
        })
    }
    //如果是1的话，需要跳转到认知任务中间页面


    //先判断量表接口中是否都完成了
    //如果量表接口都完成了
    //则开始循环认知任务接口
}

const planNumGet = async () => {
    isFinshed.value = false
    //如果在就是登录了
    if (userInfo.token) {
        let userNo = ''
        //登录的话
        //判断当前是否有后台管理

        userNo = userInfo.userInfo.userNo

        //调用根据用户查询计划的API
        let res: any = await userPlanApi(userNo)
        userInfo.savePlanCurrentNum(res.data.length)
        planList.value = res.data

        //循环list 给她赋值
        for (let i = 0; i < planList.value.length; i++) {
            let params = {
                planId: planList.value[i].id,
                userNo: userInfo.userInfo.userNo
            }
            let temp: any = await userPlanDetailApi(params)
            planList.value[i].list = temp.data

            //应该再这里再掉用一个数据?
        }



        //-------------处理SCL90的完成状态----------------
        for (let i = 0; i < planList.value.length; i++) {
            //

            if (planList.value[i].list.length > 0) {
                planList.value[i].scaleList = []
                planList.value[i].taskList = []
                //判断是否有----不显示必做但是必做未完成的
                let flag = false
                for (let j = 0; j < planList.value[i].list.length; j++) {
                    //
                    //不需要展示--但是必做--且含有未完成的
                    if (planList.value[i].list[j].isDisplayed == '0'
                        && planList.value[i].list[j].isAvailable == '1'
                        && planList.value[i].list[j].isCompleted == '0') {
                        flag = true
                    }
                    //判断是否是SCL90的flag
                    //如果是SCL的Flag则判断其完成状态
                    //如果完成状态是0则正常开始
                    //如果完成状态为1，则判断后边的到底有没有必做不显示但是其中有未完成的
                    //如果完成状态为1，则判断后边的到底有没有必做不显示但是其中有未完成的
                }
                for (let j = 0; j < planList.value[i].list.length; j++) {
                    //不需要展示--但是必做--且含有未完成的
                    if (flag) {
                        if (planList.value[i].list[j].flag == "20210713155333" && planList.value[i].list[j].isCompleted == "1") {
                            //如果满足以上条件则scl90的状态切换为2  --也是未完成--但是预示着后边还有需要做的
                            planList.value[i].list[j].isCompleted = '2'
                        }
                    }

                    if (planList.value[i].list[j].contentType == '0' && planList.value[i].list[j].isAvailable == '1' && planList.value[i].list[j].isDisplayed == '1') {
                        planList.value[i].scaleList.push(planList.value[i].list[j])
                    }
                    if (planList.value[i].list[j].contentType == '1' && planList.value[i].list[j].isAvailable == '1' && planList.value[i].list[j].isDisplayed == '1') {
                        planList.value[i].taskList.push(planList.value[i].list[j])
                    }
                    //判断是否是SCL90的flag
                    //如果是SCL的Flag则判断其完成状态
                    //如果完成状态是0则正常开始
                    //如果完成状态为1，则判断后边的到底有没有必做不显示但是其中有未完成的
                    //如果完成状态为1，则判断后边的到底有没有必做不显示但是其中有未完成的
                }
                //判断是显示开始测试还是继续测试
                let isContinue = []
                isContinue = planList.value[i].list.filter((item: any) => {
                    return item.isCompleted != '0'
                })
                if (isContinue.length == 0) {
                    planList.value[i].isCompleted = '0'
                } else {
                    planList.value[i].isCompleted = '2'
                }
            }
        }
        //判断是开始测试还好继续测试
        //数据格式改变抽出需要展示的量表、、放入数组
        //抽出需要展示的认知任务--放入数组

    }

    isFinshed.value = true
}

//刚进入页面就将高度设置为页面需要的
onMounted(() => {
    //查询计划内容
    planNumGet()
    //进到界面开始轮询
})
//界面销毁函数


//退出页面销毁 方法
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="kply">

            <div class="kply_inner">
                <div>
                    <div style="padding: 20px 40px;" v-show="planList.length == 0 && isFinshed">
                        <div style="padding:10% 20% ;" v-show="planList.length == 0 && isFinshed">
                            <!-- <img width="100%" src="../assets/planNo.png"> -->
                            <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
                        </div>
                    </div>
                    <div class="test_record_out" v-for="item in planList">
                        <div class="record_tip">
                            <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>{{ item.createTime
                                }}</span>
                            <span><span class="record_tip_inner">结束时间：</span>{{ item.planEndTime }}</span>
                        </div>
                        <div class="test_record">
                            <img src="../assets/kepu/task_1.png" />
                            <span>{{ item.planName }}</span>
                        </div>
                        <!-- <div class="test_time">
                            <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</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 class='isCompleted_status'> 已完成</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 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 class='isCompleted_status'> 已完成</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="start_button_out">
                            <div class="start_button_self" @click="startPlan(item)"><span
                                    v-if="item.isCompleted == '0'">开始测试</span><span
                                    v-if="item.isCompleted == '2'">继续测试</span></div>
                        </div>
                    </div>
                    <!-- 测试记录列表 -->
                </div>
            </div>
        </div>
        <CpmdQuestionnaire ref="question" @continueFun="continueFun" />
    </div>
</template>
<style lang="scss" scoped>
.home_header_out {
    // 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;
    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: 1200px;

        .xlts_img {
            height: 60px;
        }
    }

    .kply {
        width: 100%;
        margin-top: 40px;
        // background-color: #FAFAFA;

        .kply_inner {
            // padding: 20px 20px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            min-height: 600px;
            background-color: #FAFAFA;
            border-radius: 40px;
            // height: 1000px;

            // margin-bottom: 60px;
            .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 {
                margin-top: 20px;
                display: flex;
                align-items: center;

                img {
                    width: 50px;
                }

                span {
                    margin-left: 20px;
                    font-size: 22px;
                    font-weight: 700;
                    letter-spacing: 3px;
                }
            }

            .test_time {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                letter-spacing: 3px;
                line-height: 30px;

                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;
                display: flex;
                justify-content: center;
                align-items: center;

                .record_img_out {
                    position: relative;

                    .record_img_inner_name {
                        position: absolute;
                        margin-top: -150px;
                        height: 100%;
                        width: 100%;
                        text-align: center;

                        .test_des_name {
                            font-weight: 700;
                            color: #000000;
                            font-size: 20px;
                            letter-spacing: 3px;
                            line-height: 15px;
                        }
                    }

                    .record_img_inner {
                        bottom: 0;
                        margin-bottom: 10px;
                        padding-left: 20px;
                        width: 100%;
                        position: absolute;
                        display: flex;
                        flex-direction: column;
                        // background-color: #000000;
                        justify-content: center;

                        .test_des {
                            color: #FEFFFE;
                            font-size: 10px;
                            line-height: 15px;

                            .test_time1 {
                                color: #ffffff;
                                font-size: 10px;
                                // line-height: 30px;
                                line-height: 15px;
                            }
                        }

                        .test_time1 {
                            color: #ffffff;
                            font-size: 10px;
                            line-height: 15px;
                        }
                    }
                }

                .record_diceng {
                    width: 80px;
                    margin-left: 10px;
                    margin-right: 10px;
                }

                .record_img {
                    cursor: pointer;
                    width: 180px;
                }

            }

            .start_button_out {
                margin-top: 40px;
                margin-bottom: 40px;
                display: flex;
                flex-direction: row;
                justify-content: end;

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

                }
            }

            .test_record_out {
                margin-top: 40px;
                padding: 20px 40px;
                background-color: #ffffff;
                border-radius: 40px;
                position: relative;

                .record_tip {
                    background-color: #FFF6DF;
                    position: absolute;
                    right: 0;
                    display: flex;
                    flex-direction: column;
                    top: 0;

                    border-top-right-radius: 40px;
                    border-bottom-left-radius: 40px;
                    padding: 10px 40px;
                    color: #FFB700;
                    font-size: 14px;
                    font-weight: 700;
                    letter-spacing: 2px;

                    .record_tip_inner {
                        font-size: 13px;
                        letter-spacing: 3px;
                    }

                    .record_tip_out {
                        margin-bottom: 4px;

                        .record_tip_inner {
                            font-size: 13px;
                            letter-spacing: 3px;
                        }

                    }
                }

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

                    .content_inner {
                        padding: 20px 40px;

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

                        .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%;

                                            .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 {
                                                    // font-weight: 600;
                                                    color: #222222;
                                                    line-height: 24px;
                                                    font-size: 14px;
                                                    border-radius: 20px;
                                                    text-align: center;
                                                    right: 0px;
                                                    width: 70px;
                                                    background-color: #EDEDED;
                                                }
                                            }

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

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

                                            .isMust {
                                                position: absolute;
                                                right: 0;
                                                background-color: #48D68E;
                                                font-size: 10px;
                                                color: #ffffff;
                                                padding: 2px 6px;
                                                border-radius: 10px;
                                            }

                                            .isChoosable {
                                                position: absolute;
                                                right: 0;
                                                background-color: #EDEDED;
                                                font-size: 10px;
                                                color: #222222;
                                                padding: 2px 6px;
                                                border-radius: 10px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }


                }
            }
        }
    }


}
</style>