pbl-teacher-table/src/components/pages/test/index.vue

<template>
    <div class="pb_content" style="height: auto; width: calc(100% - 40px); margin: 0 auto;background: unset;">
        <div style="width:100%;padding:0;box-sizing: border-box;">
            <div class="pb_head top">
                <div style="display: flex;align-items: center;">
                    <span class="sub_head">表单管理</span>
                    <!-- v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'" -->
                    <span class="subClick" @click="
                        goTo(
                            '/trainCourse?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">培训管理</span>
                </div>
            </div>
        </div>
        <div class="bbox_nav">
            <span class="active">个人总览</span>
        </div>
        <div class="bbox">
            <div class="test_data_box" v-loading="isLoadingData">
                <div class="data_box">
                    <div class="left">
                        <div class="title">表单状态总览</div>
                        <div class="box">
                            <span class="color1">{{ dataJ.doing }}个进行中</span>
                            <span class="color5">{{ dataJ.nodo }}个未进行</span>
                            <span class="color2">{{ dataJ.noLook }}个未发布</span>
                            <span class="color3">{{ dataJ.is }}个已完成</span>
                            <span class="color4">{{ dataJ.no }}个逾期</span>
                        </div>
                    </div>
                    <div class="right">
                        <pie-1 :dataJ="dataJ"></pie-1>
                    </div>
                </div>
                <div class="data_box">
                    <div class="left">
                        <div class="title">教师完成情况</div>
                        <div class="box">
                            <span class="color1">{{ 10 }}个未完成</span>
                            <span class="color2">{{ 8 }}个进行中</span>
                            <span class="color3">{{ 6 }}个已完成</span>
                            <span class="color4">{{ 7 }}个逾期</span>
                        </div>
                    </div>
                    <div class="right">
                        <pie-2></pie-2>
                    </div>
                </div>
                <div class="data_box" v-if="typeArray.length">
                    <div class="left">
                        <div class="title">综合平均分</div>
                        <div class="box2">
                            <span>{{ zscore.toFixed(0) }}</span>
                        </div>
                    </div>
                    <div class="right">
                        <randar-1 :typeJArray="typeJArray"></randar-1>
                    </div>
                </div>
                <div class="data_box" v-if="typeArray.length" style="flex-direction: column;">
                    <div class="left" style="height: fit-content;text-align: left;width: 100%;">
                        <div class="title" style="margin: 0;">逾期情况</div>
                        <!-- <div class="box2">
                            <span>{{ 12 }}%</span>
                        </div> -->
                    </div>
                    <div class="right" style="height: calc(100% - 20px);">
                        <randar-2 :typeJArray="typeJArray"></randar-2>
                    </div>
                </div>
            </div>
            <div class="search_nav">
                <div class="right">
                    <span :class="{ active: stype == 1 }" @click="checkDataType(1)">按问卷查看</span>
                    <span :class="{ active: stype == 2 }" @click="checkDataType(2)">按人员查看</span>
                </div>
                <div class="left">
                    <span class="list" :class="{ active: stype2 == 1 }" @click="checkStype2(1)"></span>
                    <span class="table" :class="{ active: stype2 == 2 }" @click="checkStype2(2)"></span>
                </div>
            </div>
            <div style="width: calc(100% - 20px);margin: 0 auto;">
                <div class="student_head">
                    <div class="choose">
                        <div class="student_search" v-if="typeArray.length && stype == 1">
                            <el-select v-model="typeCheck" placeholder="请选择类型" clearable @change="search">
                                <el-option v-for="(item, index) in typeArray" :key="index" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="student_search" style="width:100px" v-if="stype == 1">
                            <!-- <span></span> -->
                            <el-select v-model="groupA" @change="search">
                                <el-option value="0" label="我的"></el-option>
                                <el-option value="2" label="他人"></el-option>
                                <el-option value="4" label="所有人"></el-option>
                            </el-select>
                        </div>
                        <!-- <div @click="clear" class="clear" v-if="CourseType.length">重置</div> -->
                    </div>

                    <div class="student_right">
                        <div class="head_left">
                            <div style="margin-right: 10px;position: relative;">
                                <el-input v-model="courseName" class="student_input" placeholder="请输入项目名称"></el-input>
                                <span class="serach_icon" @click="searchCourse"></span>
                            </div>
                            <!-- <el-button type="primary" @click="searchCourse">查询</el-button> -->
                            <el-button type="primary" class="bgColor" @click="openTestDataBoard()"
                                v-if="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'">表单看板</el-button>
                            <el-button type="primary" class="bgColor" @click="goToCourse()">新建表单</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pb_content_body" style="height: 100%;width: 100%;">
                <div class="student_table" v-loading="isLoading" v-if="stype == 1 && stype2 == 1">
                    <div class="course_box">
                        <div class="test_box" v-for="(item, index) in course" :key="index">
                            <div class="test_top">
                                <div class="test_top_img" v-if="!item.typeN"></div>
                                <el-tooltip :content="item.typeN" placement="top" effect="dark" v-else>
                                    <div class="test_top_img"
                                        :class="{ gr: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355a', md: item.typeid == '478bcccd-e3a1-472b-aa29-3ed7bc479469', js: item.typeid == '178a377a-b4f1-4a75-b3c3-2787a7c98784', yy: item.typeid == 'dda9728e-5f11-469e-89ee-aca518daf223', bj: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355c' }">
                                    </div>
                                </el-tooltip>
                                <div class="test_top_title">
                                    <span>{{ item.title }}</span>
                                    <!-- <span>创建人：{{ item.uname }}</span> -->
                                    <span>提交数量：{{ item.worksCount }}</span>
                                </div>
                            </div>
                            <div class="test_time">
                                <span><span>创建人</span></span><span>{{ item.uname }}</span>
                            </div>
                            <div class="test_time">
                                <span><span>创建日期</span></span><span>{{ item.time }}</span>
                            </div>
                            <div class="test_time">
                                <span><span>修改日期</span></span><span>{{ item.utime }}</span>
                            </div>
                            <div class="test_time">
                                <span><span>截止日期</span></span><span>{{ item.overtime ? item.overtime : '未设置' }}</span>
                            </div>
                            <div class="test_time">
                                <span><span>填写范围</span></span><el-tooltip :content="item.juriP ? item.juriP : '所有人'"
                                    placement="top" effect="dark">
                                    <!-- content to trigger tooltip here -->
                                    <span>{{ item.juriP ? item.juriP : '所有人' }}</span>
                                </el-tooltip>

                            </div>
                            <div class="test_time tset_type" v-if="typeArray.length">
                                <span><span>类型</span></span>
                                <span v-if="!item.typeN">未设置类型</span>
                                <span v-else>{{ item.typeN }}</span>
                            </div>
                            <!-- <div class="test_time">
                            <span><span>分类</span></span>
                            <span v-if="!item.typename">未设置分类</span>
                            <el-tooltip :content="item.typename" placement="top" effect="dark" v-else>
                                <span>{{ item.typename }}</span>
                            </el-tooltip>
                        </div> -->
                            <div class="test_btn">
                                <div class="test_o_btn">
                                    <el-tooltip content="编辑" placement="top" effect="dark">
                                        <span class="edit" @click="goToCourse2(item)" v-if="((item.userid == userid) ||
                                            (item.course_teacher &&
                                                item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
                                    </el-tooltip>
                                    <el-tooltip content="查看" placement="top" effect="dark">
                                        <span class="check" @click="checkToTest(item.courseId)"></span>
                                    </el-tooltip>
                                    <el-tooltip content="复制" placement="top" effect="dark">
                                        <span class="copy" @click="copyTest(item.courseId)"></span>
                                    </el-tooltip>
                                    <el-tooltip content="提醒" placement="top" effect="dark">
                                        <span class="share" @click="shareTest(item)" v-if="((item.userid == userid) ||
                                            (item.course_teacher &&
                                                item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top" effect="dark">
                                        <span class="delete" @click="deleteCourse(item.courseId)" v-if="((item.userid == userid) ||
                                            (item.course_teacher &&
                                                item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
                                    </el-tooltip>
                                </div>
                                <!-- <div class="test_type" :class="{ no: item.look == '1', is: item.look == '2' }"> -->
                                <div class="test_type" :class="getLookType(item)">
                                    <!-- <span>{{ item.look == '1' ? '未发布' : '已发布' }}</span> -->
                                    <span>{{ getLook(item) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="course_empty" v-if="course.length == 0">暂无数据</div>
                    </div>
                </div>
                <el-table ref="table" :data="course" border v-loading="isLoading" :key="1"
                    :header-cell-style="{ color: '#00000066', fontSize: '16px', fontWeight: 'unset' }"
                    :row-class-name="tableRowClassName2" v-if="stype == 1 && stype2 == 2" class="tableClass">
                    <el-table-column label="序号" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="问卷名称" min-width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="uname" label="创建者" min-width="80" align="center">
                    </el-table-column>
                    <el-table-column v-if="typeArray.length" prop="typeN" label="问卷类型" min-width="80" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.typeN ? scope.row.typeN : '未设置类型' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="worksCount" label="已提交数量" min-width="80" align="center">
                    </el-table-column>
                    <el-table-column label="表单状态" min-width="80" align="center">
                        <template slot-scope="scope">
                            <!-- <div class="test_type2" style="width: fit-content;margin: 0 auto;" :class="{ no: scope.row.look == '1', is: scope.row.look == '2' }"> -->
                            <div class="test_type2" style="width: fit-content;margin: 0 auto;"
                                :class="getLookType(scope.row)">
                                <!-- <span>{{ scope.row.look == '1' ? '未发布' : '已发布' }}</span> -->
                                <span>{{ getLook(scope.row) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="350px">
                        <template slot-scope="scope">
                            <el-button @click="goToCourse2(scope.row)" type="text" size="small" v-if="((scope.row.userid == userid) ||
                                (scope.row.course_teacher &&
                                    scope.row.course_teacher.indexOf(userid) !== -1) || role == '1')">编辑</el-button>
                            <el-button @click="checkToTest(scope.row.courseId)" type="text" size="small">查看</el-button>
                            <el-button @click="copyTest(scope.row.courseId)" type="text" size="small">复制</el-button>
                            <el-button @click="shareTest(scope.row)" type="text" size="small" v-if="((scope.row.userid == userid) ||
                                (scope.row.course_teacher &&
                                    scope.row.course_teacher.indexOf(userid) !== -1) || role == '1')">提醒</el-button>
                            <el-button @click="deleteCourse(scope.row.courseId)" type="text" size="small"
                                style="color: #EE3E3E;"
                                v-if="((scope.row.userid == userid) ||
                                    (scope.row.course_teacher &&
                                        scope.row.course_teacher.indexOf(userid) !== -1) || role == '1')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="student_table" v-loading="isLoading" v-if="stype == 2 && stype2 == 1">
                    <div class="course_box">
                        <div class="test_box" v-for="(item, index) in course2" :key="index">
                            <div class="test_top">
                                <div class="test_top_img"></div>
                                <div class="test_top_title">
                                    <span>{{ item.name }}</span>
                                    <!-- <span>创建人：{{ item.uname }}</span> -->
                                    <span>提交数量：{{ item.worksCount }}</span>
                                </div>
                            </div>
                            <div class="test_time">
                                <span><span>已完成表单</span></span><span>{{ item.testCount }}</span>
                            </div>
                            <div class="test_time">
                                <span><span>教研室</span></span><el-tooltip :content="item.className ? item.className : '无'"
                                    placement="top" effect="dark">
                                    <!-- content to trigger tooltip here -->
                                    <span>{{ item.className ? item.className : '无' }}</span>
                                </el-tooltip>
                            </div>
                            <div class="test_btn">
                                <div class="test_o_btn">
                                    <el-tooltip content="查看" placement="top" effect="dark">
                                        <span class="check" @click="checkToTest2(item.userid)"></span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="course_empty" v-if="stype == 1 && course.length == 0">暂无数据</div>
                        <div class="course_empty" v-if="stype == 2 && course2.length == 0">暂无数据</div>
                    </div>
                </div>
                <el-table ref="table" :data="course2" border v-loading="isLoading" :key="2"
                    :header-cell-style="{ color: '#00000066', fontSize: '16px', fontWeight: 'unset' }"
                    :row-class-name="tableRowClassName2" v-if="stype == 2 && stype2 == 2" class="tableClass">
                    <el-table-column label="序号" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="教师姓名" min-width="80" align="center">
                    </el-table-column>
                    <el-table-column label="教研室" min-width="80" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.className ? scope.row.className : '无' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="worksCount" label="已提交数量" min-width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="testCount" label="已完成表单" min-width="80" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="350px">
                        <template slot-scope="scope">
                            <el-button @click="checkToTest2(scope.row.userid)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="student_page">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                    v-if="stype == 1 && page && course.length" style="padding: 0 0 20px 0;"
                    @current-change="handleCurrentChange"></el-pagination>
                <el-pagination background layout="prev, pager, next" :page-size="pageSize2" :total="total2"
                    v-if="stype == 2 && page2 && course2.length" style="padding: 0 0 20px 0;"
                    @current-change="handleCurrentChange2"></el-pagination>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible1" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <el-dialog title="查看提问" :visible.sync="dialogVisible" :append-to-body="true" width="750px"
            :before-close="handleClose" class="dialog_diy">
            <div>
                <div class="a_addBox">
                    <CourseProblem :problemCourse="problemCourse"></CourseProblem>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="查看协同项目" :visible.sync="dialogVisibleCourse" :append-to-body="true" width="850px"
            :before-close="handleClose" class="dialog_diy">
            <div class="ct_box">
                <div class="out_box" v-for="(item, index) in courseTeam" :key="index" style="margin-left: 15px">
                    <div class="tup">
                        <img :src="item.cover != null && item.cover != ''
                            ? JSON.parse(item.cover).length > 0
                                ? JSON.parse(item.cover)[0].url
                                : mr
                            : mr
                            " alt />
                    </div>
                    <div class="bottom_box">
                        <div>{{ item.title }}</div>
                        <div class="kc_t">创建人：{{ item.uname }}</div>
                        <div class="kc_time">{{ item.time }}</div>
                    </div>
                    <div class="three_bottom">
                        <!-- <div @click="jump(item.courseId)">查看内容</div> -->
                        <div @click="
                            goTo(
                                '/studentAddCourse?cid=' +
                                item.courseId +
                                '&userid=' +
                                userid +
                                '&oid=' +
                                oid +
                                '&org=' +
                                org +
                                '&role=' +
                                role
                            )
                            ">
                            编辑
                        </div>
                    </div>
                </div>
                <div class="course_empty" v-if="courseTeam.length == 0">暂无数据</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleCourse = false">关 闭</el-button>
            </span>
        </el-dialog>
        <share-box :testJson="scid" :dialogVisibleShare.sync="dialogVisibleShare"></share-box>
    </div>
</template>
  
<script>
import "../../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../../components/tools/wangEnduit";
import CourseProblem from "../components/courseProblem";
import pie2 from "./data/pie2.vue";
import pie1 from "./data/pie1.vue";
import randar1 from "./data/randar1.vue";
import randar2 from "./data/randar2.vue";
import shareBox from './shareBox/index.vue'
export default {
    name: 'test',
    components: { EditorBar, CourseProblem, pie1, pie2, randar1, randar2, shareBox },
    data() {
        return {
            itemCount: 1,
            courseTitle: "",
            courseText: "",
            courseTime: "",
            isLoading: false,
            isLoadingData: false,
            fileList: [],
            fileList1: [],
            homeworkList: [{ name: "" }],
            formLabelWidth: "100px",
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisibleCourse: false,
            dialogImageUrl: "",
            group: "",
            userid: this.$route.query.userid,
            oid: this.$route.query.oid,
            org: this.$route.query.org,
            role: this.$route.query.role,
            orgArray: ["150e3120-9195-11ed-b13d-005056b86db5"],
            oidArray: [],
            Juri: "",
            groupList: [],
            JuriList: [],
            page: 1,
            total: 0,
            pageSize: 20,
            tableData: [],
            now: "",
            courseDetail: {},
            addCourse: {},
            groupA: "0",
            classX: "",
            course: [],
            courseName: "",
            mr: require("../../../assets/icon/kc1.png"),
            CourseType: [],
            CourseTypeJson: {},
            courseTypeId: {},
            courseTypeSon: [],
            isChoose: 0,
            problemCourse: null, //查看提问的项目
            courseTeam: [],
            typeArray: [],
            typeCheck: "",
            stype: 1,
            stype2: 1,
            scid: {},
            dialogVisibleShare: false,
            page2: 1,
            total2: 0,
            pageSize2: 20,
            course2: [],
            dataJ: {},
            typeJArray: [],
            zscore: 0
        };
    },
    computed: {
        getLook() {
            return function (item) {
                let content = "";
                if (item.look == '1') {
                    content = '未发布'
                }
                let now = new Date().getTime()
                let isTime = item.over_at && new Date(item.over_at).getTime()
                if (item.over_at && item.look == '2' && now > isTime && ((item.isUserCount > 0 && item.isUserCount > item.worksPerson) || item.isUserCount == 0)) {
                    content = '逾期'
                }

                if (((item.over_at && item.look == '2' && isTime > now) || (!item.over_at && item.look == '2')) && ((item.isUserCount == 0 && item.worksPerson > 0) || (item.isUserCount > 0 && 0 < item.worksPerson && item.worksPerson < item.isUserCount))) {
                    content = '进行中'
                }


                if (((item.over_at && item.look == '2' && isTime > now) || (!item.over_at && item.look == '2')) && item.worksPerson == 0) {
                    content = '未进行'
                }

                if (item.look == '2' && (item.isUserCount > 0 && item.isUserCount <= item.worksPerson)) {
                    content = '已完成'
                }
                return content;
            };
        },
        getLookType() {
            return function (item) {
                let content = "";
                if (item.look == '1') {
                    // content = '未发布'
                    content = 'no'
                }
                let now = new Date().getTime()
                let isTime = item.over_at && new Date(item.over_at).getTime()
                if (item.over_at && item.look == '2' && now > isTime && ((item.isUserCount > 0 && item.isUserCount > item.worksPerson) || item.isUserCount == 0)) {
                    // content = '逾期'
                    content = 'noTime'
                }

                if (((item.over_at && item.look == '2' && isTime > now) || (!item.over_at && item.look == '2')) && ((item.isUserCount == 0 && item.worksPerson > 0) || (item.isUserCount > 0 && 0 < item.worksPerson && item.worksPerson < item.isUserCount))) {
                    // content = '进行中'
                    content = 'doing'
                }


                if (((item.over_at && item.look == '2' && isTime > now) || (!item.over_at && item.look == '2')) && item.worksPerson == 0) {
                    // content = '未进行'
                    content = 'nodo'
                }

                if (item.look == '2' && (item.isUserCount > 0 && item.isUserCount <= item.worksPerson)) {
                    // content = '已完成'
                    content = 'is'
                }
                return content;
            };
        }
    },
    methods: {
        random() {
            return Math.random().toString(36).substr(2);
        },
        tableRowClassName2({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "rowClass";
            } else {
                return "rowClass";
            }
        },
        change(val) {
            console.log(val);
        },
        time() {
            if (!this.now) {
                this.now = new Date().getTime();
                return true;
            } else {
                let time = new Date().getTime();
                if (time - this.now > 3000) {
                    this.now = time;
                    return true;
                } else {
                    return false;
                }
            }
        },
        addHomeworkBox() {
            this.homeworkList.push({ name: "" });
            this.itemCount++;
        },
        reduceHomeworkBox() {
            var a = this.homeworkList;
            a.splice(a.length - 1);
            this.itemCount--;
        },
        goTo(path) {
            this.$router.push(path);
        },
        goToCourse(courseId) {
            if (courseId) {
                this.$router.push(
                    "/addTest?cid=" +
                    courseId +
                    "&userid=" +
                    this.userid +
                    "&oid=" +
                    this.oid +
                    "&org=" +
                    this.org +
                    "&role=" +
                    this.role
                );
            } else {
                this.$router.push(
                    "/addTest?userid=" +
                    this.userid +
                    "&oid=" +
                    this.oid +
                    "&org=" +
                    this.org +
                    "&role=" +
                    this.role
                );
            }
            // this.$router.push(path);
        },
        goToCourse2(item) {
            if (item.worksCount > 0) {
                this.$confirm("该表单已存在数据，如果修改题目可能会清空已提交数据，是否重新编辑？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$router.push(
                            "/addTest?cid=" +
                            item.courseId +
                            "&userid=" +
                            this.userid +
                            "&oid=" +
                            this.oid +
                            "&org=" +
                            this.org +
                            "&type=2" +
                            "&role=" +
                            this.role
                        );
                    })
                    .catch(() => {
                        return;
                    });
            } else {
                this.$router.push(
                    "/addTest?cid=" +
                    item.courseId +
                    "&userid=" +
                    this.userid +
                    "&oid=" +
                    this.oid +
                    "&org=" +
                    this.org +
                    "&type=2" +
                    "&role=" +
                    this.role
                );
            }
        },
        checkToTest(cid) {
            this.$router.push(
                "/checkToTest?cid=" +
                cid +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=2" +
                "&role=" +
                this.role
            );
        },
        checkToTest2(uid) {
            this.$router.push(
                "/checkToTest2?uid=" +
                uid +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=2" +
                "&role=" +
                this.role
            );
        },
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "even_row";
            } else {
                return "";
            }
        },
        jump(cid) {
            // window.open(
            //   "//pbl.cocorobo.cn/pbl-student-table/dist/#/courseDetail?courseId=" +
            //     cid +
            //     "&userid=" +
            //     this.userid
            // );
            window.parent.postMessage({ cid: cid, screenType: "2s" }, "*");
        },
        get(cid) {
            window.parent.postMessage({ cid: cid, screenType: "3s" }, "*");
        },
        openTestDataBoard() {
            window.parent.postMessage({ tools: "dataBoardTest" }, "*");
        },
        getA(cid) {
            this.$router.push("/courseProgress?cid=" + cid + "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org)
        },
        handle_remove(file, fileList) {
            var _tmp = this.fileList;
            for (var i = 0, len = _tmp.length; i < len; i++) {
                if (_tmp[i].uid == file.uid) {
                    _tmp.splice(i, 1);
                    break;
                }
                this.fileList = _tmp;
            }
        },
        handle_remove1(file, fileList) {
            var _tmp = this.fileList1;
            for (var i = 0, len = _tmp.length; i < len; i++) {
                if (_tmp[i].uid == file.uid) {
                    _tmp.splice(i, 1);
                    break;
                }
                this.fileList1 = _tmp;
            }
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val;
            this.getCourse();
        },
        handleCurrentChange2(val) {
            this.page2 = val
            this.getCourse2();
        },
        init() { },
        handleClose(done) {
            done();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible1 = true;
        },
        onExceed() {
            this.$message.error("项目海报仅支持上传一张，请删除后再进行上传");
        },
        //uuid生成
        guid() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                /[xy]/g,
                function (c) {
                    var r = (Math.random() * 16) | 0,
                        v = c == "x" ? r : (r & 0x3) | 0x8;
                    return v.toString(16);
                }
            );
        },
        time() {
            if (!this.now) {
                this.now = new Date().getTime();
                return true;
            } else {
                let time = new Date().getTime();
                if (time - this.now > 3000) {
                    this.now = time;
                    return true;
                } else {
                    return false;
                }
            }
        },
        searchCourse() {
            if (this.stype == 1) {
                this.page = 1
                this.getCourse();
            } else if (this.stype == 2) {
                this.page2 = 1
                this.getCourse2();
            }
        },
        clear() {
            if (this.CourseType.length) {
                for (var i = 0; i < this.CourseType[0].length; i++) {
                    this.courseTypeId[this.CourseType[0][i].id] = "";
                }
            }
            this.typeCheck = ''
            if (this.stype == 1) {
                this.page = 1
                this.getCourse();
            } else if (this.stype == 2) {
                this.page2 = 1
                this.getCourse2();
            }
        },
        getCourse() {
            var typeE = [];
            var typea, typeb, typec, typed, typef;
            if (this.isChoose == 1) {
                for (var i = 0; i < this.CourseType[0].length; i++) {
                    if (this.courseTypeId[this.CourseType[0][i].id] == "1") {
                        typeE.push(this.CourseType[0][i].id);
                    } else if (this.courseTypeId[this.CourseType[0][i].id] != "") {
                        if (this.CourseType[0][i].name == "年级") {
                            typea = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "学科") {
                            typeb = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "栏目") {
                            typeb = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "学院") {
                            typeb = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "新技能") {
                            typec = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "赛道") {
                            typed = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "项目类型") {
                            typed = this.courseTypeId[this.CourseType[0][i].id];
                        } else if (this.CourseType[0][i].name == "主题") {
                            // typef = this.courseTypeId[this.CourseType[0][i].id];
                        }
                        this.courseTypeSon.push(
                            this.courseTypeId[this.CourseType[0][i].id]
                        );
                    }
                }
            }
            this.isLoading = true;
            let params = {
                type: this.groupA,
                uid: this.userid,
                oid: this.oid,
                org: this.org,
                typea: typea != undefined ? typea : "",
                typeb: typeb != undefined ? typeb : "",
                typec: typec != undefined ? typec : "",
                typed: typed != undefined ? typed : "",
                typef: this.typeCheck,
                typeE: typeE.join(","),
                cu: "",
                cn: this.courseName,
                page: this.page,
                pageSize: this.pageSize,
            };
            this.ajax
                .get(this.$store.state.api + "selectTesttCourse", params)
                .then((res) => {
                    this.isLoading = false;
                    this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
                    this.course = res.data[0];

                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        getCourse2() {
            this.isLoading = true;
            let params = {
                oid: this.oid,
                org: this.org,
                type: this.typeCheck,
                cn: this.courseName,
                page: this.page2,
                pageSize: this.pageSize2,
            };
            this.ajax
                .get(this.$store.state.api + "selectTesttCourse2", params)
                .then((res) => {
                    this.isLoading = false;
                    this.total2 = res.data[0].length > 0 ? res.data[0][0].num : 0;
                    this.course2 = res.data[0];
                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        getData() {
            let params = {
                oid: this.oid,
                org: this.org,
            };
            this.ajax
                .get(this.$store.state.api + "testDataBoard", params)
                .then((res) => {
                    this.isLoadingData = false;
                    let test = res.data[0]
                    let work = res.data[1]
                    let dataJ = {
                        doing: 0,
                        nodo: 0,
                        noLook: 0,
                        is: 0,
                        no: 0
                    }
                    for (var i = 0; i < test.length; i++) {
                        if (test[i].look == '1') {
                            dataJ.noLook++
                            console.log('index-----------', i)
                        }
                        let now = new Date().getTime()
                        let isTime = test[i].over_at && new Date(test[i].over_at).getTime()
                        if (test[i].over_at && test[i].look == '2' && now > isTime && ((test[i].isUserCount > 0 && test[i].isUserCount > test[i].isWorkCount) || test[i].isUserCount == 0)) {
                            dataJ.no++
                            console.log('index-----------', i)
                        }

                        if (((test[i].over_at && test[i].look == '2' && isTime > now) || (!test[i].over_at && test[i].look == '2')) && ((test[i].isUserCount == 0 && test[i].isWorkCount > 0) || (test[i].isUserCount > 0 && 0 < test[i].isWorkCount && test[i].isWorkCount < test[i].isUserCount))) {
                            dataJ.doing++
                            console.log('index-----------', i)
                        }


                        if (((test[i].over_at && test[i].look == '2' && isTime > now) || (!test[i].over_at && test[i].look == '2')) && test[i].isWorkCount == 0) {
                            dataJ.nodo++
                            console.log('index-----------', i)
                        }

                        if (test[i].look == '2' && (test[i].isUserCount > 0 && test[i].isUserCount <= test[i].isWorkCount)) {
                            dataJ.is++
                            console.log('index-----------', i)
                        }
                    }
                    this.dataJ = dataJ

                    if (this.typeArray.length) {
                        let typeJ = {}
                        for (var i = 0; i < this.typeArray.length; i++) {
                            typeJ[this.typeArray[i].id] = {
                                name: this.typeArray[i].name,
                                count: 0,
                                scroe: 0,
                                zcount: 0,
                                kcount: 0
                            }
                        }
                        typeJ['qita'] = {
                            name: '其他',
                            count: 0,
                            scroe: 0,
                            zcount: 0,
                            kcount: 0
                        }
                        for (var i = 0; i < work.length; i++) {
                            if (work[i].typeid) {
                                let score = this.getScore(work[i].courseJson)
                                typeJ[work[i].typeid].count++
                                typeJ[work[i].typeid].scroe += score
                            } else {
                                let score = this.getScore(work[i].courseJson)
                                typeJ['qita'].count++
                                typeJ['qita'].scroe += score
                            }
                        }
                        let typeJArray = Object.values(typeJ)
                        let zscore = 0
                        for (var i = 0; i < typeJArray.length; i++) {
                            typeJArray[i].zcount = typeJArray[i].scroe ? Math.round(typeJArray[i].scroe / typeJArray[i].count) : 0
                            zscore += typeJArray[i].zcount
                        }
                        this.zscore = zscore ? zscore / typeJArray.length : 0
                        for (var i = 0; i < test.length; i++) {
                            let now = new Date().getTime()
                            let isTime = test[i].over_at && new Date(test[i].over_at).getTime()
                            if (test[i].over_at && test[i].look == '2' && now > isTime && test[i].typeid && ((test[i].isUserCount > 0 && test[i].isUserCount > test[i].isWorkCount) || test[i].isUserCount == 0)) {
                                typeJ[test[i].typeid].kcount++
                            } else if (test[i].over_at && test[i].look == '1' && now > isTime && ((test[i].isUserCount > 0 && test[i].isUserCount > test[i].isWorkCount) || test[i].isUserCount == 0)) {
                                typeJ['qita'].kcount++
                            }
                        }
                        this.typeJArray = typeJArray
                    }

                })
                .catch((err) => {
                    this.isLoadingData = false;
                    console.error(err);
                });
        },
        getScore(courseJson) {
            // let _array = JSON.parse(array)
            let _score = 0;
            let _array = JSON.parse(courseJson);
            for (var j = 0; j < _array.length; j++) {
                let el = _array[j];
                if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                    for (var k = 0; k < el.array.length; k++) {
                        let item = el.array[k];
                        if (item.ttype == 2 && item.array.length > 0) {
                            for (var z = 0; z < item.array.length; z++) {
                                let item2 = item.array[z];
                                if (item2.ttype == 1 && item2.json && item2.json.score2) {
                                    _score += parseInt(item2.json.score2);
                                }
                            }
                        } else if (item.ttype == 1 && item.json && item.json.score2) {
                            _score += parseInt(item.json.score2);
                        }
                    }
                } else if (el.ttype == 1 && el.json && el.json.score2) {
                    _score += parseInt(el.json.score2);
                }
            }
            return _score ? _score : 0;
        },
        getTypeName() {
            this.$forceUpdate();
            this.page = 1;
            this.isChoose = 1;
            this.getCourse();
        },
        // searchCourse() {
        //   this.isLoading = true;
        //   let params = {
        //     cu: "",
        //     cn: this.courseName,
        //     page: this.page,
        //   };
        //   this.ajax
        //     .get(this.$store.state.api + "searchCourse", params)
        //     .then((res) => {
        //       this.isLoading = false;
        //       this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
        //       this.course = res.data[0];
        //     })
        //     .catch((err) => {
        //       this.isLoading = false;
        //       console.error(err);
        //     });
        // },
        shareTest(cid) {
            this.scid = cid
            this.dialogVisibleShare = true
        },
        deleteCourse(cid) {
            // if (this.time()) {
            this.$confirm("确定删除此表单吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.isLoading = true;
                    let params = [{
                        cid: cid,
                    }];
                    this.ajax
                        .post(this.$store.state.api + "deleteTestCourse", params)
                        .then((res) => {
                            this.isLoading = false;
                            this.$message.success("删除成功");
                            this.getCourse();
                        })
                        .catch((err) => {
                            loading.close();
                            this.isLoading = false;
                            console.error(err);
                        });
                })
                .catch(() => {
                    return;
                });
            // }
        },
        selectAllType() {
            let params = {
                org: this.org && this.org != "" ? this.org : "",
                oid: this.oid && this.oid != "" ? this.oid : "",
            };
            this.ajax
                .get(this.$store.state.api + "selectAllTypeT", params)
                .then((res) => {
                    this.CourseType = res.data;

                    for (var i = 0; i < res.data[0].length; i++) {
                        if (res.data[0][i].id == "34629907-d02f-11ec-8c78-005056b86db5") {
                            res.data[0][i].name = "学科";
                        } else if (res.data[0][i].id == "34628934-d02f-11ec-8c78-005056b86db5") {
                            res.data[0][i].name = "年级";
                        }
                        if (!this.cid) {
                            this.courseTypeId[res.data[0][i].id] = '';
                        }
                        if (!this.CourseTypeJson[res.data[0][i].id]) {
                            this.CourseTypeJson[res.data[0][i].id] = [];
                        }

                        if (res.data[2].length == 0 && res.data[3].length == 0) {
                            // for (var j = 0; j < res.data[1].length; j++) {
                            //   if (res.data[0][i].id == res.data[1][j].pid) {
                            //     this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                            //   }
                            // }
                            // if(this.org == '150e3120-9195-11ed-b13d-005056b86db5'){
                            for (var j = 0; j < res.data[1].length; j++) {
                                if (res.data[0][i].id == res.data[1][j].pid) {
                                    this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                                }
                            }
                            // }else{
                            //   this.CourseType = []
                            // }
                        } else {
                            if (res.data[2].length > 0) {
                                for (var j = 0; j < res.data[2].length; j++) {
                                    if (res.data[0][i].id == res.data[2][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                                    }
                                }
                            }
                            if (res.data[3].length > 0) {
                                for (var j = 0; j < res.data[3].length; j++) {
                                    if (res.data[0][i].id == res.data[3][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                                    }
                                }
                            }
                        }
                    }
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        selectTestType() {
            this.isLoadingData = true
            let params = {
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectTestType", params)
                .then((res) => {
                    this.typeArray = res.data[0];
                    this.getData()
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        selectType() {
            this.ajax
                .get(this.$store.state.api + "selectStudentType")
                .then((res) => {
                    this.CourseType = res.data;
                    for (var i = 0; i < res.data[0].length; i++) {
                        if (!this.cid) {
                            this.courseTypeId[res.data[0][i].id] = "";
                        }
                        if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
                            if (res.data[0][i].name == "栏目") {
                                this.CourseType[0][i].name = "主题";
                            }
                        }
                        for (var j = 0; j < res.data[1].length; j++) {
                            if (res.data[0][i].id == res.data[1][j].pid) {
                                if (!this.CourseTypeJson[res.data[0][i].id]) {
                                    this.CourseTypeJson[res.data[0][i].id] = [];
                                }
                                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); //去除公共分类
                            }
                        }
                    }
                    this.selectTypeByOid();
                    this.selectTypeByOrg();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        selectTypeByOid() {
            let params = {
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectStudentTypeByOid", params)
                .then((res) => {
                    for (var i = 0; i < res.data[0].length; i++) {
                        for (var j = 0; j < res.data[1].length; j++) {
                            if (res.data[0][i].id == res.data[1][j].pid) {
                                if (!this.CourseTypeJson[res.data[0][i].id]) {
                                    this.CourseTypeJson[res.data[0][i].id] = [];
                                }
                                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
                            }
                        }
                    }
                    this.$forceUpdate();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        selectTypeByOrg() {
            let params = {
                oid: this.org,
            };
            this.ajax
                .get(this.$store.state.api + "selectStudentTypeByOid", params)
                .then((res) => {
                    for (var i = 0; i < res.data[0].length; i++) {
                        for (var j = 0; j < res.data[1].length; j++) {
                            if (res.data[0][i].id == res.data[1][j].pid) {
                                if (!this.CourseTypeJson[res.data[0][i].id]) {
                                    this.CourseTypeJson[res.data[0][i].id] = [];
                                }
                                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
                            }
                        }
                    }
                    this.$forceUpdate();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        openCourse() {
            this.dialogVisibleCourse = true;
            this.getTeamCourse();
        },
        getTeamCourse() {
            let params = {
                uid: this.userid,
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectCourseTeam", params)
                .then((res) => {
                    this.courseTeam = res.data[0];
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        checkStype2(type) {
            if (this.stype2 != type) {
                this.stype2 = type
            }
        },
        checkDataType(type) {
            if (this.stype != type) {
                this.stype = type
                if (type == 1) {
                    this.page = 1
                    this.getCourse()
                } else {
                    this.page2 = 1
                    this.getCourse2()
                }
            }
        },
        search() {
            if (this.stype == 1) {
                this.page = 1
                this.getCourse();
            } else if (this.stype == 2) {
                this.page2 = 1
                this.getCourse2();
            }
        },
        checkProblem(res) {
            this.problemCourse = res;
            this.dialogVisible = true;
        },
        copyTest(cid) {
            let params = [{
                cid: cid,
                uid: this.userid
            }]
            this.ajax
                .post(this.$store.state.api + "copyTest", params)
                .then((res) => {
                    this.page = 1
                    if (this.role == "1") {
                        this.groupA = "0";
                    } else {
                        this.groupA = "0";
                    }
                    this.$message.success("复制成功")
                    this.clear()
                })
                .catch((err) => {
                    console.error(err);
                });
        }
    },
    activated() {
        console.log(1);
        this.selectAllType();
        if (this.stype == 1) {
            this.getCourse();
        } else if (this.stype == 2) {
            this.getCourse2();
        }
        this.selectTestType();
    },
    mounted() {
        console.log(2);
        if (this.role == '1') {
            this.groupA = '0'
        }
        this.page = 1;
        this.selectAllType();
        if (this.stype == 1) {
            this.getCourse();
        } else if (this.stype == 2) {
            this.getCourse2();
        }
        this.selectTestType();
    },
};
</script>
  
<style scoped>
@media screen and (max-width: 1380px) {
    .test_box {
        width: calc(100% / 4 - (15px * 3) / 4) !important;
    }

    .test_box:nth-child(5n) {
        margin-right: 15px !important;
    }

    .test_box:nth-child(4n) {
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 1080px) {
    .test_box {
        width: calc(100% / 3 - (15px * 2) / 3) !important;
    }

    .test_box:nth-child(5n) {
        margin-right: 15px !important;
    }

    .test_box:nth-child(4n) {
        margin-right: 15px !important;
    }

    .test_box:nth-child(3n) {
        margin-right: 0 !important;
    }
}

.dialog_diy>>>.el-dialog__header {
    background: #3d67bc !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.student_head>>>.el-button--primary {
    background-color: #3681fc;
}

.xls_button {
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    color: rgb(34, 104, 188);
}

.student_head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 0;
}

.top {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 10px 0;
    height: 54px;
}

.bgColor {
    background: #3681fc;
}

.student_search {
    display: flex;
    align-items: center;
    /* width: calc(100% / 3); */
    width: 190px;
}

.student_search span {
    margin: 0 10px 0 0;
    min-width: 50px;
    text-align-last: justify;
}

.student_button {
    display: flex;
    overflow: hidden;
    height: 40px;
}

.upload-demo {
    display: flex;
    flex-direction: column;
    align-items: end;
    /* position: relative; */
    width: 100px;
    overflow: hidden;
}

.student_table {
    padding: 0 0;
    height: 100%;
    /* overflow: auto; */
    min-height: 360px;
    width: calc(100% - 20px);
    margin: 0 auto;
}

.student_empty {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-table>>>.even_row {
    background-color: #f1f1f1;
}

.time {
    font-size: 13px;
    color: #999;
}

.course_button {
    padding: 10px 20px;
}

.course_button_box {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
}

.course_rate {
    margin-top: 5px;
}

.course_view {
    display: flex;
    align-items: center;
    margin: 5px 0 0 0;
}

.course_view i {
    background-image: url("../../../assets/liulan.png");
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    /* margin-top: 1px; */
    line-height: 25px;
    vertical-align: text-top;
    background-repeat: no-repeat;
}

.image {
    width: 100%;
    height: 150px;
    display: block;
}

.course_box {
    display: flex;
    flex-wrap: wrap;
}

.student_page {
    width: calc(100% - 20px);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.course_create_box {
    font-size: 18px;
}

.course_name {
    margin-top: 10px;
}

.course_name span {
    margin-bottom: 10px;
    display: block;
}

.homework_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.course_homework {
    width: 130px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 10px 10px 0;
}

.course_type {
    margin-top: 10px;
    display: flex;
}

.course_type1 span {
    margin-bottom: 10px;
    display: block;
}

.course_type2 {
    margin-left: 20px;
}

.course_type2 span {
    margin-bottom: 10px;
    display: block;
}

.course_empty {
    color: rgb(110, 110, 110);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el_cards>>>.el-card__body {
    height: 100%;
}

.courseBtnBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 170px);
    padding: 10px;
}

.wordUpload {
    display: flex;
}

.wordUpload>.buttonUp {
    margin-right: 5px;
}

.out_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 250px;
    background: #fff;
    margin-right: 25px;
    border: 1px solid #ccc;
    height: fit-content;
    box-sizing: border-box;
    border-radius: 0px 0px 5px 5px;
    /* overflow: hidden; */
    margin-bottom: 15px;
    position: relative;
    padding-top: 30px;
}

.bottom_box {
    display: flex;
    padding: 0 0 10px 10px;
    flex-direction: column;
    box-sizing: border-box;
    height: 140px;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.bottom_box>div:nth-child(1) {
    width: 230px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bottom_box>div:nth-child(1) span:nth-child(1) {
    font-weight: bold;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.bottom_box>div:nth-child(1) span:nth-child(2) {
    font-size: 14px;
    min-width: fit-content;
    margin-left: 5px;
    color: #0074ff;
}

.tup {
    width: 100%;
    height: 141.06px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.tup>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kc_time {
    margin-top: 8px;
    font-size: 14px;
    color: #999;
}

.kc_t {
    margin-top: 5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.three_bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 40px;
    align-items: center;
    background: #f5f4f4;
    font-size: 14px;
}

.three_bottom>div {
    cursor: pointer;
}

.three_bottom>div:hover {
    color: #79a2ff;
}

.head_left {
    display: flex;
    margin-top: 15px;
}

.student_input>>>.el-input__inner {
    height: 40px;
    width: 190px;
    font-size: 13px;
    padding: 0 10px;
}

.course_button {
    color: #fff;
    background: #3681fc;
    width: 75px;
    height: 40px;
    padding: 0 !important;
    font-size: 12px;
    line-height: 40px;
}

.all_choose {
    /* margin: 15px 0 10px; */
    /* height: 20%; */
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 180px;
    width: 180px;
}

.all_choose>span {
    min-width: 50px;
    display: block;
    margin-right: 10px;
    text-align-last: justify;
}

.choose {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
    justify-content: flex-start;
    /* width: 60%; */
    /* min-width: 868px; */
    align-items: center;
}

.choose>div {
    /* margin-left: 10px; */
    width: 180px;
    /* margin-top: 15px; */
}

.choose>div+div {
    margin-left: 10px;
}

.choose>.clear {
    width: 70px
}

.clear {
    width: 70px;
    max-width: 70px;
    height: 35px;
    background: #3681fc;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    line-height: 35px;
    cursor: pointer;
    margin-left: 20px;
}

.ct_box {
    height: 500px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}

.myCourse {
    position: absolute;
    background: #3c3c3c;
    width: 65px;
    height: 25px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    top: 0;
    right: 0;
}

.xtCourse {
    position: absolute;
    background: #3681fc;
    width: 70px;
    height: 30px;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    top: 5px;
    left: 5px;
}

.subClick {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    /* color: #ab582f; */
    color: #409eff;
}

.more {
    position: relative;

}

.more:hover div {
    display: block;
    color: #000;
}

.more div {
    position: absolute;
    bottom: 0px;
    transform: translate(-50%, 100%);
    background: #f5f4f4;
    padding: 10px 20px;
    z-index: 99;
    width: 40px;
    border-radius: 5px;
    box-shadow: 0 0 3px 3px #80808020;
    display: none;
}

.more div>span+span {
    margin-top: 10px;
}

.more div>span {
    display: block;
    width: 100%;
    text-align: center;
}

.more div>span:hover {
    color: #79a2ff;
}

.test_box {
    width: calc(100% / 5 - (15px * 4) / 5);
    /* width: 250px; */
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin: 5px 15px 10px 0;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
}

.test_box:nth-child(5n) {
    margin-right: 0;
}

.test_top {
    width: 100%;
    display: flex;
    align-items: center;
}

.test_top>.test_top_img {
    height: 40px;
    width: 40px;
    background: rgb(108 150 217);
    margin-right: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test_top>.gr {
    background: rgb(142, 189, 176);
}

.test_top>.md {
    background: rgb(139, 174, 227);
}

.test_top>.js {
    background: rgb(64, 149, 174);
}

.test_top>.yy {
    background: rgb(98, 102, 188);
}

.test_top>.bj {
    background: rgb(98, 158, 188);
}

.test_top>.test_top_img:after {
    content: '';
    display: block;
    width: 23px;
    height: 23px;
    background-size: 100% 100%;
    background-image: url('../../../assets/icon/test/all_icon_b.png');
}

.test_top>.gr:after {
    background-image: url('../../../assets/icon/test/gr_icon_b.png');
}

.test_top>.md:after {
    background-image: url('../../../assets/icon/test/md_icon_b.png');
}

.test_top>.js:after {
    background-image: url('../../../assets/icon/test/js_icon_b.png');
}

.test_top>.yy:after {
    background-image: url('../../../assets/icon/test/yy_icon_b.png');
}

.test_top>.bj:after {
    background-image: url('../../../assets/icon/test/bj_icon_b.png');
}

.test_top>.test_top_title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 40px;
    width: calc(100% - 40px - 10px)
}

.test_top>.test_top_title>span {
    width: 100;
    display: block;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test_top>.test_top_title>span:nth-child(1) {
    font-size: 15px;
}

.test_top>.test_top_title>span:nth-child(2) {
    font-size: 14px;
    color: rgb(58, 131, 252);
}

.test_box>.test_time {
    margin-top: 10px;
    font-size: 14px;
    color: #a7a7a7;
    display: flex;
}

.test_box>.test_time>span:nth-child(1) {
    width: 85px;
    display: flex;
}


.test_box>.test_time>span:nth-child(1)>span {
    width: 100%;
    text-align-last: justify;
}

.test_box>.test_time>span:nth-child(1)::after {
    content: '：';
}

.test_box>.test_time>span:nth-child(2) {
    max-width: calc(100% - 70px);
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.test_box>.test_btn {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.test_box>.test_btn>.test_o_btn {
    display: flex;
    align-items: center;
}

.test_box>.test_btn>.test_o_btn>span {
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    cursor: pointer;
}

.test_box>.test_btn>.test_o_btn>.edit {
    background-image: url('../../../assets/icon/test/edit_test_icon.png');
    margin-right: 20px;
}

.test_box>.test_btn>.test_o_btn>.check {
    background-image: url('../../../assets/icon/test/check_test_icon.png');
    margin-right: 20px;
}

.test_box>.test_btn>.test_o_btn>.copy {
    background-image: url('../../../assets/icon/test/paste-icon.png');
    margin-right: 20px;
}

.test_box>.test_btn>.test_o_btn>.share {
    background-image: url('../../../assets/icon/test/share_test_icon.png');
    margin-right: 20px;
}

.test_box>.test_btn>.test_o_btn>.delete {
    background-image: url('../../../assets/icon/test/delete_test_icon.png');
}

.test_type {
    font-size: 12px;
    border-radius: 5px;
    border: 1.5px solid;
    padding: 3px 8px;
}

.is {
    color: rgb(57, 204, 127);
    background-color: rgba(57, 204, 127, .1);
}

.no {
    color: rgb(235, 154, 96);
    background-color: rgba(235, 154, 96, .1);
}

.noTime {
    color: rgb(77, 77, 77);
    background-color: rgba(77, 77, 77, .1);
}

.doing {
    color: rgb(54, 116, 231);
    background-color: rgba(54, 116, 231, .1);
}

.nodo {
    color: rgb(97, 184, 255);
    background-color: rgba(97, 184, 255, .1);
}

.test_type2 {
    font-size: 14px;
    border-radius: 5px;
    /* border: 1.5px solid; */
    padding: 3px 8px;
}

.sub_head {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding: 0 15px;
}

.sub_head::after {
    content: "";
    width: 100%;
    background: #3681FC;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.subClick {
    /* font-size: 16px; */
    font-size: 20px;
    cursor: pointer;
    /* margin-left: 17.5px; */
    /* color: #ab582f; */
    /* color: #409eff; */
    color: #999;
    padding: 0 15px;
}

.subClick:hover {
    color: #000;
}

.sub_head+.subClick,
.subClick+.subClick,
.subClick+.sub_head {
    margin-left: 17.5px;
}

.bbox_nav {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.bbox_nav>span {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #e0eafb;
    font-size: 18px;
    color: #41506D;
    padding: 0 35px;
    border-radius: 5px 5px 0 0;
}

.bbox_nav>.active {
    background: #3681fc;
    color: #fff;
}

.bbox {
    background: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 15px 0;
    box-sizing: border-box;
}

.search_nav {
    border-bottom: 1px solid #E7E7E7;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.search_nav>.right {
    display: flex;
    align-items: center;
}

.search_nav>.right>span {
    height: 30px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    position: relative;
}

.search_nav>.right>span+span {
    margin-left: 35px;
}

.search_nav>.right>span.active {
    color: #3681FC;
    font-weight: 600;
}

.search_nav>.right>span.active::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 3px;
    background: #3681fc;
    left: 50%;
    transform: translateX(-50%);
}

.search_nav>.left {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.search_nav>.left>span {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
}

.search_nav>.left>span+span {
    margin-left: 10px;
}

.search_nav>.left>span.active {
    background: #E0EAFB;
}

.search_nav>.left>span::before {
    content: "";
    width: 12px;
    height: 12px;
    background-size: 100% 100%;
}

.search_nav>.left>span.list::before {
    background-image: url("../../../assets/icon/test/test_list.png");
}

.search_nav>.left>span.table::before {
    background-image: url("../../../assets/icon/test/test_table.png");
}

.search_nav>.left>span.table.active::before {
    background-image: url("../../../assets/icon/test/test_table_active.png");
}

.search_nav>.left>span.list.active::before {
    background-image: url("../../../assets/icon/test/test_list_active.png");
}

.serach_icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: url("../../../assets/icon/test/test_search.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.student_input>>>.el-input__inner {
    padding-right: 35px;
}


.test_data_box {
    display: flex;
    width: calc(100% - 20px);
    margin: 0 auto 15px;
    flex-wrap: wrap;
}

.test_data_box>.data_box {
    width: calc(100% / 4 - (45px / 4));
    height: 150px;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
}

.test_data_box>.data_box+.data_box {
    margin-left: 15px;
}

.test_data_box>.data_box>.left {
    /* width: 110px; */
    min-width: fit-content;
    height: 100%;
}

.test_data_box>.data_box>.left>.title {
    font-size: 16px;
    color: #00000099;
    margin-bottom: 10px;
}

.test_data_box>.data_box>.left>.box {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: calc(100% - 30px);
    justify-content: space-between;
}

.test_data_box>.data_box>.left>.box2 {
    display: flex;
    flex-direction: column;
    font-size: 30px;
    font-weight: 600;
    height: calc(100% - 60px);
    /* align-items:center; */
    justify-content: center;
}

.test_data_box>.data_box>.left>.box>span {
    display: flex;
    align-items: center;
}

.test_data_box>.data_box>.left>.box>span::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* background: #000; */
    margin-right: 5px;
}

.test_data_box>.data_box>.left>.box>.color1::before {
    background: #3673e8;
}

.test_data_box>.data_box>.left>.box>.color2::before {
    background: #61b8ff;
}

.test_data_box>.data_box>.left>.box>.color3::before {
    background: #96d8a8;
}

.test_data_box>.data_box>.left>.box>.color4::before {
    background: #f5b763;
}

.test_data_box>.data_box>.left>.box>.color5::before {
    background: #b362ff;
}

.test_data_box>.data_box>.right {
    /* width: calc(100% - 110px); */
    width: calc(100%);
    height: 100%;
}

.el-table>>>.rowClass>td {
    padding: 7px 0;
}

.tableClass {
    width: calc(100% - 20px);
    margin: 0 auto;
}
</style>