|
@@ -0,0 +1,208 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="answerTheResult">
|
|
|
|
+ <div class="atr_detail">
|
|
|
|
+ <div class="atr_d_btn">查看详细</div>
|
|
|
|
+ <div class="atr_d_msg">
|
|
|
|
+ <div>参与人数</div>
|
|
|
|
+ <span>{{workArrayLength}}/{{ workArrayLength + unsubmittedStudentsLength }}</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="atr_d_msg" v-if="workDetail && workDetail.type === '45'">
|
|
|
|
+ <div>正确率</div>
|
|
|
|
+ <span>30%(15/30)</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="atr_d_msg" v-if="workDetail && workDetail.type === '45'">
|
|
|
|
+ <div>正确答案</div>
|
|
|
|
+ <span>B</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <span class="atr_d_line"></span>
|
|
|
|
+
|
|
|
|
+ <div class="no_submit">
|
|
|
|
+ <div>未提交人员</div>
|
|
|
|
+ <img @click="showNoSubmitDetail = !showNoSubmitDetail" :class="{'no_submit_active':!showNoSubmitDetail}" src="../../../assets/img/arrow_up.png" />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="no_submitList" :class="{'no_submitList_active':showNoSubmitDetail}">
|
|
|
|
+ <div v-for="(student, idx) in props.unsubmittedStudents" :key="student.id ?? idx">{{ student.name ?? '' }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="atr_type45Area" v-if="workDetail && workDetail.type === '45'">
|
|
|
|
+ {{ workDetail.json }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+import { ref, computed, watch} from 'vue'
|
|
|
|
+import api from '../../../services/course'
|
|
|
|
+
|
|
|
|
+interface Props {
|
|
|
|
+ workArray?: object[] | null
|
|
|
|
+ unsubmittedStudents?: object[] | null
|
|
|
|
+ workId?:string | null
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
|
+ workArray: () => [],
|
|
|
|
+ unsubmittedStudents: () => [],
|
|
|
|
+ workId: ''
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const workArrayLength = computed(() => {
|
|
|
|
+ let _result = 0
|
|
|
|
+ if (props.workArray) {
|
|
|
|
+ _result = props.workArray.length
|
|
|
|
+ }
|
|
|
|
+ return _result
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const unsubmittedStudentsLength = computed(() => {
|
|
|
|
+ let _result = 0
|
|
|
|
+ if (props.unsubmittedStudents) {
|
|
|
|
+ _result = props.unsubmittedStudents.length
|
|
|
|
+ }
|
|
|
|
+ return _result
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+console.log('workArray', props.workArray)
|
|
|
|
+console.log('unsubmittedStudents', props.unsubmittedStudents)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const workIndex = ref<number>(0)
|
|
|
|
+
|
|
|
|
+const showNoSubmitDetail = ref<boolean>(false)
|
|
|
|
+
|
|
|
|
+const workDetail = ref<any>({})
|
|
|
|
+
|
|
|
|
+// 获取作业详细
|
|
|
|
+const getWorkDetail = async () => {
|
|
|
|
+ if (props.workId) {
|
|
|
|
+ const _res = await api.getWorkDetail({id: props.workId})
|
|
|
|
+ const _data = _res[0][0]
|
|
|
|
+ if (_data) {
|
|
|
|
+ _data.json = JSON.parse(_data.json)
|
|
|
|
+ workDetail.value = _data
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 监听作业Id
|
|
|
|
+watch(
|
|
|
|
+ () => props.workId,
|
|
|
|
+ (newVal, oldVal) => {
|
|
|
|
+ console.log('props.workId变化', { newVal, oldVal })
|
|
|
|
+ if (newVal && newVal !== oldVal) {
|
|
|
|
+ getWorkDetail()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ { immediate: true }
|
|
|
|
+)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.answerTheResult {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ max-height: 100%;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 12px;
|
|
|
|
+ .atr_detail {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ padding: 10px 15px 10px 15px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border: solid 1px rgba(0, 0, 0, 0.1);
|
|
|
|
+ .atr_d_btn{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ background: rgba(0, 0, 0, 0.9);
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .atr_d_msg{
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: 15px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
|
+ &>div{
|
|
|
|
+ width: 4em;
|
|
|
|
+ margin-right: 35px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .atr_d_line{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 2px;
|
|
|
|
+ display: block;
|
|
|
|
+ background: rgba(242, 243, 245, 1);
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .no_submit{
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ .no_submit_active{
|
|
|
|
+ transform: rotate(180deg);
|
|
|
|
+ }
|
|
|
|
+ &>img{
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .no_submitList{
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ flex-wrap: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ gap: 10px;
|
|
|
|
+ &>div{
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ background: rgba(255, 236, 232, 1);
|
|
|
|
+ color: rgba(245, 63, 63, 1);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .no_submitList_active{
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .atr_type45Area{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|