按人阅卷切换学生功能

TEAMModelOS/ClientApp/src/view/task/index.less

@@ -142,39 +142,7 @@
 .stu-list-wrap{
     min-height: 120px;
 }
-.filter-tab-item{
-    display: inline-block;
-    width: 80px;
-    text-align: center;
-    background: #1a191c;
-    color: #a5a5a5;
-    margin-right: 1px;
-    border-top-right-radius: 15px;
-    padding: 2px 0px;
-    font-size: 12px;
-    cursor: pointer;
-    border:1px solid rgba(98, 97, 101, 0.4);
-    border-bottom: none;
-}
-.filter-tab-item-active{
-    background: #2b2a2f;
-    color: white;
-}
-.stu-name{
-    font-size: 12px;
-    margin: 5px 5px 5px 2px;
-    background: #606060;
-    padding: 2px 12px;
-    border-radius: 55px;
-    display: inline-block;
-    cursor: pointer;
-    user-select: none;
-    color: #ddd;
-    &:hover{
-        box-shadow: 0px 0px 5px 2px #141414;
-        color: white;
-    }
-}
+
 .ev-list-content{
     height: ~"calc(100% - 45px)" !important;
 }
@@ -185,28 +153,8 @@
     margin-top: 5px;
     font-size: 12px;
 }
-.no-mark-text{
-    user-select: none;
-    .no-mark-count{
-        color: white;
-        font-size: 24px;
-        display: inline-block;
-        margin: 0px 5px;
-    }
-    .continue-mark{
-        color: #fff;
-        padding: 4px 15px;
-        border-radius: 4px;
-        cursor: pointer;
-        background: #1cc0f3;    
-        // text-decoration: underline;
-    }
-}
-.no-stu-wrap{
-    display: flex;
-    align-items: center;
-    // justify-content: center;
-}
+
+
 .qu-prog-list{
     height: 300px;
 }
@@ -247,13 +195,6 @@
     font-size: 16px;
     cursor: default;
 }
-.filter-tab-wrap{
-    margin-top: 15px;
-}
-.stu-name-wrap{
-    margin-top: -1px;
-
-}
 .stu-name-content{
     margin-top: 0px;
     border-top-left-radius: 0px !important;

TEAMModelOS/ClientApp/src/view/task/index.vue

@@ -39,84 +39,7 @@
                         </span>
                     </div>
                     <vuescroll class="mark-info-content">
-                        <!-- 数据概览 -->
-                        <!-- <div class="setting-block" v-show="curBarIndex == 0">
-                            <p class="block-title">{{$t('learnActivity.mark.dataView')}}</p>
-                            <div class="setting-content count-content">
-                                <div class="count-wrap">
-                                    <p class="count-num">13</p>
-                                    <p class="count-label">
-                                        <Icon type="ios-paper" class="count-icon" size="16" />
-                                        {{$t('task.mLabel5')}}
-                                    </p>
-                                </div>
-                                <div class="count-wrap">
-                                    <p class="count-num">1</p>
-                                    <p class="count-label">
-                                        <Icon type="ios-star" class="count-icon" size="16" />
-                                        {{$t('task.mLabel2')}}
-                                    </p>
-                                </div>
-                                <div class="count-wrap">
-                                    <p class="count-num">2</p>
-                                    <p class="count-label">
-                                        <Icon type="ios-star-outline" class="count-icon" size="16" />
-                                        {{$t('task.mLabel3')}}
-                                    </p>
-                                </div>
-                                <div class="count-wrap to-mark-view">
-                                    <p class="count-num">
-                                        9
-                                    </p>
-                                    <p class="count-label">
-                                        <Icon custom="iconfont icon-scanning" class="count-icon" size="16" />
-                                        {{$t('task.mLabel4')}}
-                                    </p>
-                                </div>
-                            </div>
-                        </div> -->
-                        <!--按人 学生信息 -->
-                        <div class="filter-tab-wrap" v-show="curBarIndex == 1">
-                            <span :class="['filter-tab-item', tabIndex == 0 ? 'filter-tab-item-active':'']" @click="tabIndex = 0">
-                                {{`${$t('task.mLabel3')} ( ${unmarked} )`}}
-                            </span>
-                            <span :class="['filter-tab-item', tabIndex == 1 ? 'filter-tab-item-active':'']" @click="tabIndex = 1">
-                                {{`${$t('task.mLabel4')} ( ${marking.length} )`}}
-                            </span>
-                            <span :class="['filter-tab-item', tabIndex == 2 ? 'filter-tab-item-active':'']" @click="tabIndex = 2">
-                                {{`${$t('task.mLabel2')} ( ${marked.length} )`}}
-                            </span>
-                        </div>
-                        <!-- 已阅、未阅、进行中学生 -->
-                        <div class="setting-block stu-name-wrap" v-show="curBarIndex == 1">
-                            <div class="setting-content stu-name-content">
-                                <div class="stu-wrap">
-                                    <div class="stu-list-wrap no-stu-wrap" v-show="tabIndex == 0">
-                                        <p class="no-mark-text" v-if="marking.length > 0 || marked.length > 0">
-                                            还剩
-                                            <span class="no-mark-count">{{unmarked}}</span>
-                                            人未阅,
-                                            <span class="continue-mark" @click="toByStuView()">继续阅卷</span>
-                                        </p>
-                                        <p class="no-mark-text" v-else-if="unmarked > 0">
-                                            阅卷总量
-                                            <span class="no-mark-count">{{unmarked}}</span>
-                                            人，
-                                            <span class="continue-mark" @click="toByStuView()">开始阅卷</span>
-                                        </p>
-                                        <p class="no-mark-text" v-else>
-                                            暂无未阅学生
-                                        </p>
-                                    </div>
-                                    <div class="stu-list-wrap" v-show="tabIndex == 1">
-                                        <span class="stu-name" v-for="(item,index) in marking" :key="index" @click="toByStuView(item.stuId)">{{item.stuId}}</span>
-                                    </div>
-                                    <div class="stu-list-wrap" v-show="tabIndex == 2">
-                                        <span class="stu-name" v-for="(item,index) in marked" :key="index" @click="toByStuView(item.stuId)">{{item.stuId}}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <StuProg v-show="curBarIndex == 1" @getStuId="toByStuView" :stusData="markData ? markData.attr : []"  :total="markList[curTaskIndex] ? markList[curTaskIndex].count : 1"></StuProg>
                         <!-- 按题 批阅进度 -->
                         <div class="setting-block" v-show="curBarIndex == 0" style="margin-top:15px">
                             <p class="block-title">
@@ -163,9 +86,10 @@
 import DataCompare from './mark/Compare.vue'
 import ProgPie from './mark/ProgPie.vue'
 import QuProg from './mark/QuProg.vue'
+import StuProg from './mark/StuProg.vue'
 export default {
     components: {
-        DataCompare, ProgPie, QuProg
+        DataCompare, ProgPie, QuProg, StuProg
     },
     data() {
         return {
@@ -319,6 +243,7 @@ export default {
                     task: this.markList[this.curTaskIndex],
                     stuId: sId,
                     fullPaper: this.fullPaper,
+                    stusData:this.markData.attr,
                     answer,
                     score
                 }
@@ -331,7 +256,6 @@ export default {
         */
         async toByQuView(data) {
             let {quIndex, childIndex} = data
-            console.log(data,quIndex, childIndex)
             sessionStorage.setItem('markFrom', this.$route.name)
             let sas = this.$store.state.user.schoolProfile.blob_sas //目前只有校本评测安排阅卷任务
             let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri //目前只有校本评测安排阅卷任务
@@ -472,43 +396,6 @@ export default {
                 return []
             }
         },
-        //试卷题目数量，包括小题
-        quLength() {
-            if (this.fullPaper && this.fullPaper.item) {
-                let count = 0
-                this.fullPaper.item.forEach(item => {
-                    if (item.children.length) {
-                        count += item.children.length
-                    } else {
-                        count++
-                    }
-                })
-                return count
-            }
-            return 0
-        },
-        //题目进度百分比
-        byQuPct() {
-            let total = this.markList[this.curTaskIndex] ? this.markList[this.curTaskIndex].count : 1
-            return this.byQuCount.map(item => {
-                return item * 100 / total
-            })
-        },
-        //题目进度count
-        byQuCount() {
-            let res = new Array(this.quLength).fill(0)
-            if (this.markData && this.markData.attr) {
-                for (let i = 0; i < this.quLength; i++) {
-                    this.markData.attr.forEach(item => {
-                        if (item.info.score[i] > -1) {
-                            res[i]++
-                        }
-                    })
-                }
-
-            }
-            return res
-        },
     }
 }
 </script>

TEAMModelOS/ClientApp/src/view/task/mark/ByQu.vue

@@ -13,7 +13,9 @@
             <span class="info-label">当前题号：</span>
             <span class="info-value cur-qu-index" v-if="childIndex > -1">{{`${quIndex + 1}-${childIndex + 1}`}}</span>
             <span class="info-value cur-qu-index" v-else>{{quIndex + 1}}</span>
-            <span class="info-label">学生id：</span>
+            <span class="info-label">题目进度：</span>
+            <span class="info-value stu-id-info">{{curProg}}</span>
+            <span class="info-label">学生：</span>
             <span class="info-value stu-id-info">{{stusInfo[stuIndex] ? stusInfo[stuIndex].stuId : ''}}</span>
             <div class="btn-wrap">
                 <span class="action-btn" @click="toggleStatus = !toggleStatus">
@@ -186,7 +188,7 @@ export default {
                 }
                 this.$api.mark.saveScore(requstData).then(
                     res => {
-                        this.$Message.success('保存成功')
+                        // this.$Message.success('保存成功')
                         //按题阅卷自动加载下一人
                         this.getDefStu()
                     },
@@ -227,12 +229,10 @@ export default {
                     }
                 }
             })
-            console.log('输出', realIndex)
             return --realIndex
         },
         //获取批阅学生数据
         getDefStu() {
-            this.score = 0
             let scoreIndex = this.getScoreIndex(this.quIndex, this.childIndex)
             let has = false //当前数据是否有当前题目没有评分的学生
             for (let i = 0; i < this.stusInfo.length; i++) {
@@ -300,7 +300,6 @@ export default {
         this.taskInfo = routeData.task
         this.quIndex = routeData.quIndex
         this.childIndex = routeData.childIndex
-        console.log('路由数据', routeData)
         //获取一个学生数据
         this.getDefStu()
 
@@ -310,11 +309,20 @@ export default {
         }
     },
     computed: {
+        //当前题目进度
+        curProg(){
+            let index = this.getScoreIndex(this.quIndex,this.childIndex)
+            let marked = 0
+            this.stusInfo.forEach(item=>{
+                if(item.info.score[index] != -1){
+                    marked++
+                }
+            })
+            return `${marked}/${this.taskInfo.count}`
+        },
         curAnswer() {
-            // console.log('计算作答数据',this.stuIndex, this.quIndex, this.childIndex)
             if (this.stusInfo && this.stusInfo[this.stuIndex]) {
-                console.log(JSON.stringify(this.stusInfo[this.stuIndex]))
-                console.log(this.stusInfo[this.stuIndex])
+                this.score = this.stusInfo[this.stuIndex].info.score[this.getScoreIndex(this.quIndex, this.childIndex)]
                 if (this.stusInfo[this.stuIndex].info.answer) {
                     return this.stusInfo[this.stuIndex].info.answer[this.getScoreIndex(this.quIndex, this.childIndex)]
                 } else {
@@ -642,7 +650,7 @@ export default {
 </style>
 <style>
 .qu-prog-wrap .qu-info-item {
-    border-color: #ccc;
+    border-color: #e8eaec;
 }
 .qu-prog-wrap .obj-index {
     color: #c1c1c1;

TEAMModelOS/ClientApp/src/view/task/mark/ByStu.vue

@@ -17,8 +17,6 @@
             <span class="info-label">当前题号：</span>
             <span class="info-value cur-qu-index" v-if="childIndex > -1">{{`${quIndex + 1}-${childIndex + 1}`}}</span>
             <span class="info-value cur-qu-index" v-else>{{quIndex + 1}}</span>
-            <!-- <span class="info-label">阅卷进度：</span>
-            <span class="info-value">{{`${12}/${41}`}}</span> -->
             <div class="btn-wrap">
                 <span class="action-btn" @click="toggleStatus = !toggleStatus">
                     <Icon type="md-shuffle" class="action-btn-icon" />
@@ -113,19 +111,20 @@
         </div>
         <!-- 用来单独渲染学生作答数据，提高tocanvas 的效率 -->
         <iframe id="markIframe" :srcdoc="curAnswer"></iframe>
-        <Modal v-model="toggleStatus" title="切换学生">
-            进行中
+        <Modal v-model="toggleStatus" title="切换学生" :width="800" footer-hide>
+            <StuProg  @getStuId="toByStuView" class="light-stu-prog" :total="taskInfo.count" :stusData="stusData"></StuProg>
         </Modal>
     </div>
 </template>
 
 <script>
-import html2canvas from 'html2canvas';
-import MarkCanvas from './MarkCanvas';
+import html2canvas from 'html2canvas'
+import MarkCanvas from './MarkCanvas'
+import StuProg from './StuProg.vue'
 export default {
     name: 'ByStu',
     components: {
-        MarkCanvas
+        MarkCanvas, StuProg
     },
     data() {
         return {
@@ -151,11 +150,17 @@ export default {
             stuAnswer: [],
             stuScore: [],
             taskInfo: {},
-            markData: {},
+            stusData: [],
             stuId: ''
         }
     },
     methods: {
+        /**
+         * 按人阅卷
+         */
+        toByStuView(stuId) {
+            this.$Message.warning('这里切换学生逻辑暂未处理！')    
+        },
         drawImg(imgIndex) {
             // this.activeIcon = imgIndex
             // this.curImg = new Image()
@@ -376,6 +381,7 @@ export default {
         this.paperData = routeData.fullPaper
         this.stuAnswer = routeData.answer
         this.stuScore = routeData.score
+        this.stusData = routeData.stusData
         this.taskInfo = routeData.task
         this.stuId = routeData.stuId
         //初始化题目index
@@ -405,6 +411,7 @@ export default {
         curAnswer() {
             if (this.stuAnswer.length) {
                 let index = this.getScoreIndex(this.quIndex, this.childIndex)
+                this.score = this.stuScore[index] == -1 ? null : this.stuScore[index]
                 return this.stuAnswer[index]
             } else {
                 return this.stuId + '未作答'
@@ -422,6 +429,9 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.light-stu-prog{
+    margin-bottom: 15px;
+}
 .score-setting-wrap {
     margin-top: 50px;
     padding: 0px 5px;
@@ -726,4 +736,30 @@ export default {
     color: red;
     font-weight: 800;
 }
+.light-stu-prog .setting-content{
+    background: #FFF;
+    box-shadow: none;
+    border-color: #e8eaec;
+}
+.light-stu-prog .filter-tab-item{
+    border-color: #e8eaec;
+}
+.light-stu-prog .filter-tab-item-active{
+    background: #FFF !important;
+    color: black;
+}
+.light-stu-prog .filter-tab-item{
+    background: #EEE;
+}
+.light-stu-prog .no-mark-text .no-mark-count{
+    color: #515a6e;
+}
+.light-stu-prog .stu-name{
+    background: #eee;
+    color: #515a6e;
+}
+.light-stu-prog .stu-name:hover{
+    color: #515a6e;
+    box-shadow: 0px 0px 5px 2px #ccc;
+}
 </style>

TEAMModelOS/ClientApp/src/view/task/mark/StuProg.vue

@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <!--按人 学生信息 -->
+        <div class="filter-tab-wrap">
+            <span :class="['filter-tab-item', tabIndex == 0 ? 'filter-tab-item-active':'']" @click="tabIndex = 0">
+                {{`${$t('task.mLabel3')} ( ${unmarked} )`}}
+            </span>
+            <span :class="['filter-tab-item', tabIndex == 1 ? 'filter-tab-item-active':'']" @click="tabIndex = 1">
+                {{`${$t('task.mLabel4')} ( ${marking.length} )`}}
+            </span>
+            <span :class="['filter-tab-item', tabIndex == 2 ? 'filter-tab-item-active':'']" @click="tabIndex = 2">
+                {{`${$t('task.mLabel2')} ( ${marked.length} )`}}
+            </span>
+        </div>
+        <!-- 已阅、未阅、进行中学生 -->
+        <div class="setting-block stu-name-wrap">
+            <div class="setting-content stu-name-content">
+                <div class="stu-wrap">
+                    <div class="stu-list-wrap no-stu-wrap" v-show="tabIndex == 0">
+                        <p class="no-mark-text" v-if="unmarked > 0 && unmarked < total">
+                            还剩
+                            <span class="no-mark-count">{{unmarked}}</span>
+                            人未阅,
+                            <span class="continue-mark" @click="toByStuView()">继续阅卷</span>
+                        </p>
+                        <p class="no-mark-text" v-else-if="unmarked > 0">
+                            阅卷总量
+                            <span class="no-mark-count">{{unmarked}}</span>
+                            人，
+                            <span class="continue-mark" @click="toByStuView()">开始阅卷</span>
+                        </p>
+                        <EmptyData v-else textContent="暂无未阅学生"></EmptyData>
+                    </div>
+                    <div class="stu-list-wrap" v-show="tabIndex == 1">
+                        <span class="stu-name" v-for="(item,index) in marking" :key="index" @click="toByStuView(item.stuId)">{{item.stuId}}</span>
+                        <EmptyData textContent="暂无进行中学生" v-show="!marking.length"></EmptyData>
+                    </div>
+                    <div class="stu-list-wrap" v-show="tabIndex == 2">
+                        <span class="stu-name" v-for="(item,index) in marked" :key="index" @click="toByStuView(item.stuId)">{{item.stuId}}</span>
+                        <EmptyData :top="0" textContent="暂无已阅学生" v-show="!marked.length"></EmptyData>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        stusData: {
+            required: true,
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        total: {
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            tabIndex: 0
+        }
+    },
+    methods: {
+        toByStuView(stuId){
+            this.$emit('getStuId',stuId)
+        }
+    },
+    computed: {
+        //当前阅卷任务未阅数量
+        unmarked() {
+            return this.total - this.marked.length - this.marking.length
+        },
+        //当前阅卷任务已阅学生信息
+        marked() {
+            if (this.stusData) {
+                return this.stusData.filter(item => {
+                    return item.info.score.indexOf(-1) == -1
+                })
+            } else {
+                return []
+            }
+        },
+        //当前阅卷任务进行中学生信息
+        marking() {
+            if (this.stusData) {
+                return this.stusData.filter(item => {
+                    return item.info.score.indexOf(-1) !== -1
+                })
+            } else {
+                return []
+            }
+        },
+    }
+}
+</script>
+<style scoped lang="less">
+.filter-tab-wrap {
+    margin-top: 15px;
+}
+.filter-tab-item {
+    display: inline-block;
+    width: 80px;
+    text-align: center;
+    background: #1a191c;
+    color: #a5a5a5;
+    margin-right: 1px;
+    border-top-right-radius: 15px;
+    padding: 2px 0px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid rgba(98, 97, 101, 0.4);
+    border-bottom: none;
+}
+.filter-tab-item-active {
+    background: #2b2a2f;
+    color: white;
+}
+.setting-block {
+    margin-top: 30px;
+}
+.stu-name-wrap {
+    margin-top: -1px;
+}
+.setting-content {
+    background: #2b2a2f;
+    box-shadow: 1px 1px 13px #141414;
+    border: 1px solid rgba(98, 97, 101, 0.4);
+    padding: 15px 10px;
+    border-radius: 5px;
+    margin-right: 12px;
+    margin-top: 8px;
+    box-shadow: 0 26px 40px -24px rgb(30, 31, 33);
+    padding: 15px 10px 25px 10px;
+}
+.stu-name-content {
+    margin-top: 0px;
+    border-top-left-radius: 0px !important;
+}
+.stu-list-wrap {
+    min-height: 151px;
+}
+.no-stu-wrap {
+    display: flex;
+    align-items: center;
+}
+.no-mark-text {
+    user-select: none;
+    .no-mark-count {
+        color: white;
+        font-size: 24px;
+        display: inline-block;
+        margin: 0px 5px;
+    }
+    .continue-mark {
+        color: #fff;
+        padding: 4px 15px;
+        border-radius: 4px;
+        cursor: pointer;
+        background: #1cc0f3;
+    }
+}
+.stu-name {
+    font-size: 12px;
+    margin: 5px 5px 5px 2px;
+    background: #606060;
+    padding: 2px 12px;
+    border-radius: 55px;
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+    color: #ddd;
+    &:hover {
+        box-shadow: 0px 0px 5px 2px #141414;
+        color: white;
+    }
+}
+</style>