|
|
@@ -0,0 +1,437 @@
|
|
|
+<template>
|
|
|
+ <div class="pb_content" style="background: #f0f2f5;" v-loading="loading">
|
|
|
+ <div class="pb_content_body" style="position: relative; margin: 0">
|
|
|
+ <div class="right">
|
|
|
+ <div class="courseTop">
|
|
|
+ <div class="stepsNav">
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item :to="{
|
|
|
+ path:
|
|
|
+ '/test?userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&org=' +
|
|
|
+ org +
|
|
|
+ '&role=' +
|
|
|
+ role,
|
|
|
+ }">评测管理</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ <span style="color: rgb(15, 126, 255)">查看评测</span>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
|
|
|
+ </div>
|
|
|
+ <div class="step_box" ref="stepBox">
|
|
|
+ <div class="test_title">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">{{ testJson.title }}</div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="info_box" v-if="testJson.typeN">
|
|
|
+ <span>类型：</span>
|
|
|
+ <span>{{ testJson.typeN }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_box">
|
|
|
+ <span>填写范围：</span>
|
|
|
+ <span>{{ testJson.juriP ? testJson.juriP : '所有人' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_box" v-if="testJson.overtime">
|
|
|
+ <span>截止时间：</span>
|
|
|
+ <span>{{ testJson.overtime }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="data_box">
|
|
|
+ <span>提交数量</span>
|
|
|
+ <span><span class="big">{{ works.length }}</span>份</span>
|
|
|
+ </div>
|
|
|
+ <div class="data_box" v-if="testJson.juriP">
|
|
|
+ <span>表单完成率</span>
|
|
|
+ <span><span class="big">{{ (iscount / pcount * 100).toFixed(0) }}</span>%</span>
|
|
|
+ </div>
|
|
|
+ <div class="data_box" v-if="testJson.juriP">
|
|
|
+ <span>未完成人数</span>
|
|
|
+ <span><span class="big">{{ pcount - iscount }}</span></span>
|
|
|
+ </div>
|
|
|
+ <div class="btn_box">
|
|
|
+ <span></span>
|
|
|
+ <span>提醒</span>
|
|
|
+ </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">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ role: this.$route.query.role,
|
|
|
+ cid: this.$route.query.cid,
|
|
|
+ title: "",
|
|
|
+ testType: [],
|
|
|
+ see: false,
|
|
|
+ cJson: [],
|
|
|
+ loading: false,
|
|
|
+ look: "",
|
|
|
+ tableHeight: 500,
|
|
|
+ isLoading: false,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ page: 1,
|
|
|
+ tableData: [],
|
|
|
+ testJson: {},
|
|
|
+ works: [],
|
|
|
+ iscount: 0,
|
|
|
+ pcount: 0,
|
|
|
+ stype: 1,
|
|
|
+ courseName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ retrunCourse() {
|
|
|
+ this.goTo(
|
|
|
+ "/test?userid=" +
|
|
|
+ this.userid +
|
|
|
+ "&oid=" +
|
|
|
+ this.oid +
|
|
|
+ "&org=" +
|
|
|
+ this.org +
|
|
|
+ "&role=" +
|
|
|
+ this.role
|
|
|
+ );
|
|
|
+ },
|
|
|
+ goTo(path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ },
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if ((rowIndex + 1) % 2 === 0) {
|
|
|
+ return "even_row";
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeHeight() {
|
|
|
+ // this.tableHeight = this.$refs.stepBox.offsetHeight - 100;
|
|
|
+ // if (this.tableHeight <= 530) {
|
|
|
+ // this.tableHeight = 530;
|
|
|
+ // }
|
|
|
+ // // 监听窗口大小变化
|
|
|
+ // let self = this;
|
|
|
+ // window.onresize = function () {
|
|
|
+ // self.tableHeight = this.$refs.stepBox.offsetHeight - 100;
|
|
|
+ // if (self.tableHeight <= 530) {
|
|
|
+ // self.tableHeight = 530;
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+ // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getTest(row) {
|
|
|
+ this.$router.push(
|
|
|
+ "/checkTest2?cid=" +
|
|
|
+ row.courseid +
|
|
|
+ "&userid=" +
|
|
|
+ this.userid +
|
|
|
+ "&userid2=" +
|
|
|
+ row.userid +
|
|
|
+ "&tid=" +
|
|
|
+ row.id +
|
|
|
+ "&oid=" +
|
|
|
+ this.oid +
|
|
|
+ "&org=" +
|
|
|
+ this.org +
|
|
|
+ "&type=2" +
|
|
|
+ "&role=" +
|
|
|
+ this.role
|
|
|
+ );
|
|
|
+ },
|
|
|
+ checkDataType(type) {
|
|
|
+ if (this.stype != type) {
|
|
|
+ this.stype = type
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchCourse(){
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.isLoading = true;
|
|
|
+ let params = {
|
|
|
+ cid: this.cid,
|
|
|
+ cn: this.courseName
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getTestWorksNoPage", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.testJson = res.data[0][0]
|
|
|
+ this.works = res.data[1]
|
|
|
+ this.iscount = res.data[2][0].count
|
|
|
+ this.pcount = res.data[3][0].count
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.getData();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pb_content {
|
|
|
+ height: 100% !important;
|
|
|
+ /* margin: 0 20px 0 20px; */
|
|
|
+}
|
|
|
+
|
|
|
+.pb_content_body {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.pb_content_body>.right {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.basic_box {
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.courseTop {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.stepsNav {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.step_box {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ margin: 0 auto;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ overflow: auto;
|
|
|
+ background: #ffff;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table>>>.even_row {
|
|
|
+ background-color: #f1f1f1 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.student_page {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title {
|
|
|
+ display: flex;
|
|
|
+ padding: 15px 15px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left {
|
|
|
+ max-width: 100%;
|
|
|
+ margin-top: 10px
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .title {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .info {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .info .info_box {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .info .info_box+.info_box {
|
|
|
+ margin-left: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+ border-left: 1px solid #E7E7E7;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .info .info_box span:nth-child(1) {
|
|
|
+ color: #00000099;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .left .info .info_box span:nth-child(2) {}
|
|
|
+
|
|
|
+.test_title .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .right .data_box {
|
|
|
+ margin-right: 15px;
|
|
|
+ width: 150px;
|
|
|
+ border: 1px solid #e7e7e7;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 57px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #00000099;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .right .data_box span:nth-child(1) {}
|
|
|
+
|
|
|
+.test_title .right .data_box span:nth-child(2) {}
|
|
|
+
|
|
|
+.test_title .right .data_box span:nth-child(2) .big {
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .right .btn_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 57px;
|
|
|
+ height: 57px;
|
|
|
+ background: #3681fc;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .right .btn_box span:nth-child(1) {
|
|
|
+ display: block;
|
|
|
+ width: 12px;
|
|
|
+ height: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ background-image: url('../../../../assets/icon/test/icon_share.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.test_title .right .btn_box span:nth-child(2) {}
|
|
|
+
|
|
|
+.search_nav {
|
|
|
+ border-bottom: 1px solid #E7E7E7;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 15px 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.search_nav>.right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.search_nav>.right>span {
|
|
|
+ height: 24px;
|
|
|
+ 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: -10px;
|
|
|
+ width: 15px;
|
|
|
+ height: 3px;
|
|
|
+ background: #3681fc;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.search_nav>.left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.student_input>>>.el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ width: 190px;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 0 35px 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
