552 lines
18 KiB
Vue
552 lines
18 KiB
Vue
<template>
|
||
><div id="siteMain">
|
||
<div id="maxSite">
|
||
<a-layout>
|
||
<!-- 页头 -->
|
||
<headerPage />
|
||
<!-- 主体部分 -->
|
||
<a-layout-content style="background-color: white; margin-top: 10px">
|
||
<a-row>
|
||
<a-col :span="24" style="text-align: center">
|
||
<span class="title">{{ zyInfo.title }}</span>
|
||
</a-col>
|
||
<a-col :span="24" style="text-align: right">
|
||
<span style="color: #999">开始时间：</span><span style="color: #666">{{ dayjs(zyInfo.startTime).format('MM.DD HH:mm') }}</span> ~
|
||
<span style="color: #999">结束时间：</span
|
||
><span style="color: #666; margin-right: 20px">{{ dayjs(zyInfo.endTime).format('MM.DD HH:mm') }}</span>
|
||
</a-col>
|
||
<a-col :span="24" style="margin-top: 10px">
|
||
<div style="display: flex">
|
||
<div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '')"
|
||
><span class="tjfx-colt">{{ zyInfo.xkrs }}</span
|
||
><span class="tjfx-colw"> 总人数</span></div
|
||
>
|
||
<div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '1')"
|
||
><span class="tjfx-colt">{{ zyInfo.ywcrs }}</span
|
||
><span class="tjfx-colw"> 已完成人数</span></div
|
||
>
|
||
<div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '0')"
|
||
><span class="tjfx-colt">{{ zyInfo.wwcrs }}</span
|
||
><span class="tjfx-colw"> 未完成人数</span></div
|
||
>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" style="margin-top: 10px; text-align: right">
|
||
<a-switch style="margin-right: 20px" checkedChildren="统计" unCheckedChildren="图表" v-model:checked="twoShowType" />
|
||
</a-col>
|
||
<a-col :span="23.5" style="margin: 10px 20px" v-if="twoShowType">
|
||
<a-collapse accordion expandIconPosition="right">
|
||
<a-collapse-panel :key="index" v-for="(item, index) in zyInfo.tmlbList">
|
||
<template #header>
|
||
<a-row :span="24" style="width: 90%">
|
||
<a-col :span="24" class="title2">{{ item.wjTitle }}</a-col>
|
||
<a-col :span="8" style="color: #909399; display: flex; flex-direction: column; text-align: left; font-size: 12px"
|
||
><span style="font-weight: bold; font-size: 20px; margin-left: 5px">{{ item.yzd }}</span
|
||
>已作答人数</a-col
|
||
>
|
||
<a-col :span="8" style="color: #1ab394; display: flex; flex-direction: column; text-align: left; font-size: 12px"
|
||
><span style="font-weight: bold; font-size: 20px; margin-left: 5px">{{ item.ddrs }}</span
|
||
>{{ item.wjType == '8' ? '已批阅人数' : '答对人数' }}</a-col
|
||
>
|
||
<a-col :span="8" style="color: #f56c6c; display: flex; flex-direction: column; text-align: left; font-size: 12px"
|
||
><span style="font-weight: bold; font-size: 20px; margin-left: 5px">{{ item.dcrs }}</span
|
||
>{{ item.wjType != '8' ? '答错人数' : '未批阅人数' }}</a-col
|
||
>
|
||
</a-row>
|
||
</template>
|
||
<div style="width: 98%; margin: 0 auto" v-if="item.wjType == 3">
|
||
<a-card>
|
||
<template #extra v-if="zyInfo.atype == 6">
|
||
<span class="question-type" style="margin-left: 40px">单选题</span>
|
||
<span style="margin-left: 40px"
|
||
>题目分值：<span class="answer-word"> {{ item.wjScore }}</span> 分</span
|
||
>
|
||
</template>
|
||
<a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
|
||
<div style="width: 100%" v-for="(tmxx, index2) in item.wjxWjxxTmxxList" :key="index2">
|
||
<a-radio :value="tmxx.itemIndex + ``" style="width: 100%; margin-bottom: 5px">
|
||
<span v-html="tmxx.itemTitle" style="font-size: 16px; color: #000"></span>
|
||
<span v-if="tmxx.itemSelected == 'true'" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案)</span>
|
||
<span class="tjfx-xzrs">选择人数：{{ tmxx.num }}人</span>
|
||
</a-radio>
|
||
</div>
|
||
</a-radio-group>
|
||
</a-card>
|
||
</div>
|
||
<!-- 多选题 -->
|
||
<div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 4">
|
||
<a-card>
|
||
<template #extra v-if="zyInfo.atype == 6">
|
||
<span class="question-type" style="margin-left: 40px">多选题</span>
|
||
<span style="margin-left: 40px"
|
||
>题目分值： <span class="answer-word">{{ item.wjScore }}</span> 分</span
|
||
>
|
||
</template>
|
||
<a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
|
||
<a-row>
|
||
<a-col :span="24" v-for="(tmxx, index2) in item.wjxWjxxTmxxList" :key="index2">
|
||
<a-checkbox :value="tmxx.itemIndex" style="width: 100%; margin-bottom: 5px">
|
||
<span v-html="tmxx.itemTitle" style="width: 80%; font-size: 16px; color: #000"></span>
|
||
<span v-if="tmxx.itemSelected == 'true'" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案)</span>
|
||
<span class="tjfx-xzrs">选择人数：{{ tmxx.num }}人</span>
|
||
</a-checkbox>
|
||
</a-col>
|
||
</a-row>
|
||
</a-checkbox-group>
|
||
</a-card>
|
||
</div>
|
||
<!-- 填空题 -->
|
||
<div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 5">
|
||
<a-card>
|
||
<template #title>
|
||
<span v-if="item.wjAnswer" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案:{{ item.wjAnswer }})</span>
|
||
<span class="tjfx-xzrs1" style="color: #9e9e9e">正确人数：{{ item.num }}人</span>
|
||
<span class="tjfx-xzrs1" style="color: #9e9e9e">错误人数：{{ item.num2 }}人</span>
|
||
</template>
|
||
<template #extra v-if="zyInfo.atype == 6">
|
||
<span class="question-type" style="margin-left: 40px">填空题</span>
|
||
<span style="margin-left: 40px"
|
||
>题目分值：<span class="answer-word"> {{ item.wjScore }}</span> 分</span
|
||
>
|
||
</template>
|
||
</a-card>
|
||
</div>
|
||
<!-- 文件题 -->
|
||
<div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 8">
|
||
<!-- <span style="text-align: left;width: 50%;font-weight: bold;font-size: 18px;padding: 20px;">填空题</span> -->
|
||
<!-- <span class="tjfx-zql">正确率：15%</span> -->
|
||
<a-card>
|
||
<template #title>
|
||
<j-upload v-model:value="item.picPath" fileType="image" :max-count="1" disabled :buttonVisible="false"></j-upload>
|
||
<!-- <span>{{ index + 1 }}、</span><span v-html="item.wjTitle" style="white-space: pre-wrap; word-wrap: break-word" /> -->
|
||
<!-- <span v-if="item.wjAnswer" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案:{{ item.wjAnswer }})</span>
|
||
<span class="tjfx-xzrs1" style="color: #9e9e9e">正确人数：{{ item.num }}人</span>
|
||
<span class="tjfx-xzrs1" style="color: #9e9e9e">错误人数：{{ item.num2 }}人</span> -->
|
||
</template>
|
||
<template #extra v-if="zyInfo.atype == 6">
|
||
<span class="question-type" style="margin-left: 40px">文件题</span>
|
||
<span style="margin-left: 40px"
|
||
>题目分值：<span class="answer-word"> {{ item.wjScore }}</span> 分</span
|
||
>
|
||
</template>
|
||
</a-card>
|
||
</div>
|
||
<div v-else> 无对应类型 </div>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</a-col>
|
||
|
||
<!-- 图表 -->
|
||
<a-col :span="23.5" style="margin: 10px 20px" v-if="!twoShowType">
|
||
<a-collapse accordion expandIconPosition="right">
|
||
<a-collapse-panel :key="index" v-for="(item, index) in zyInfo.tmlbList">
|
||
<template #header>
|
||
<a-row :span="24" style="width: 100%">
|
||
<a-col :span="24" class="title2">{{ item.wjTitle }}</a-col>
|
||
</a-row>
|
||
</template>
|
||
<!-- 单选题 -->
|
||
<div style="width: 98%; margin: 0 auto">
|
||
<a-row :span="24">
|
||
<a-col :span="12">
|
||
<pie :chartData="getPieData(item)" :option="pieOption" height="300px" style="width: 500px" />
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<BarMulti :chartData="getBarData(item)" :option="multiBarOption" height="300px" style="width: 500px"></BarMulti>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<!-- 多选题 -->
|
||
<!-- <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 4">
|
||
</div> -->
|
||
<!-- 填空题 -->
|
||
<!-- <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 5">
|
||
</div> -->
|
||
<!-- <div v-else> 无对应类型 </div> -->
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</a-col>
|
||
<a-col style="height: 40px"> </a-col>
|
||
</a-row>
|
||
</a-layout-content>
|
||
<!-- 页尾 -->
|
||
<footerPage style="margin-top: 10px" />
|
||
</a-layout>
|
||
</div>
|
||
<WjxWjxxTmlbDjjgsModal ref="WjxWjxxTmlbDjjgsModalPage"></WjxWjxxTmlbDjjgsModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" name="zyInfo-zyInfo" setup>
|
||
import { ref, reactive, onMounted, unref, onBeforeUnmount } from 'vue';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { useRouter } from 'vue-router';
|
||
import dayjs, { Dayjs } from 'dayjs';
|
||
import { Form } from 'ant-design-vue';
|
||
import { getValueType } from '/@/utils';
|
||
import headerPage from '/@/views/site/common/header.vue';
|
||
import footerPage from '/@/views/site/common/footer.vue';
|
||
import Pie from '/@/components/chart/Pie.vue';
|
||
import BarMulti from '/@/components/chart/BarMulti.vue';
|
||
|
||
import WjxWjxxTmlbDjjgsModal from '/@/views/kc/wjxWjxx/components/WjxWjxxTmlbDjjgsModal.vue';
|
||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
||
|
||
//当前路由信息
|
||
const { currentRoute } = useRouter();
|
||
const { query } = unref(currentRoute);
|
||
const { rwbh, xqxn, type, teano, cyid } = query; //获取传递参数
|
||
const { createConfirm, createMessage } = useMessage();
|
||
const zyInfo = ref<any>({});
|
||
const WjxWjxxTmlbDjjgsModalPage = ref();
|
||
|
||
const twoShowType = ref<boolean>(true);
|
||
let intervalId: ReturnType<typeof setInterval> | null;
|
||
const aaaaa = ref<number>(0);
|
||
|
||
const multiBarOption = {
|
||
title: { text: '答题情况统计', left: 'center' },
|
||
};
|
||
|
||
const pieOption = {
|
||
title: { text: '正确率统计', left: 'center' },
|
||
};
|
||
|
||
function getPieData(item) {
|
||
console.log('👩', item);
|
||
if(item.wjType == 8){
|
||
const pieData = [
|
||
{ value: parseInt(item.ddrs), name: '已批阅人数' },
|
||
{ value: parseInt(item.dcrs), name: '未批阅人数' },
|
||
];
|
||
return pieData;
|
||
}else{
|
||
const pieData = [
|
||
{ value: parseInt(item.ddrs), name: '答对人数' },
|
||
{ value: parseInt(item.dcrs), name: '答错人数' },
|
||
];
|
||
return pieData;
|
||
}
|
||
|
||
}
|
||
|
||
function getBarData(item) {
|
||
if(item.wjType == 8){
|
||
const barMultiData = [
|
||
{ value: parseInt(item.yzd), name: '作答人数' },
|
||
{ value: parseInt(item.ddrs), name: '已批阅人数' },
|
||
{ value: parseInt(item.dcrs), name: '未批阅人数' },
|
||
];
|
||
return barMultiData;
|
||
}else{
|
||
const barMultiData = [
|
||
{ value: parseInt(item.yzd), name: '作答人数' },
|
||
{ value: parseInt(item.ddrs), name: '答对人数' },
|
||
{ value: parseInt(item.dcrs), name: '答错人数' },
|
||
];
|
||
return barMultiData;
|
||
}
|
||
}
|
||
function reloadZy() {
|
||
defHttp.get({ url: '/wjxWjxx/wjxWjxx/queryCyjgById', params: { id: cyid } }).then((res) => {
|
||
zyInfo.value = res;
|
||
});
|
||
}
|
||
/**
|
||
* 学生答卷列表
|
||
*/
|
||
function handleDjjgs(record: Recordable, flag) {
|
||
WjxWjxxTmlbDjjgsModalPage.value.disableSubmit = true;
|
||
WjxWjxxTmlbDjjgsModalPage.value.edit(record, flag);
|
||
}
|
||
|
||
onMounted(() => {
|
||
reloadZy();
|
||
intervalId = setInterval(() => {
|
||
// 执行要重复执行的逻辑
|
||
reloadZy();
|
||
if (zyInfo.value.xkrs == zyInfo.value.ywcrs) {
|
||
clear();
|
||
}
|
||
}, 15000);
|
||
});
|
||
|
||
function clear() {
|
||
intervalId && window.clearInterval(intervalId);
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.title {
|
||
line-height: 100px;
|
||
font-size: 18px;
|
||
}
|
||
.title2 {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
.ant-divider-horizontal {
|
||
display: flex;
|
||
clear: both;
|
||
width: 100%;
|
||
min-width: 100%;
|
||
margin: 3px 0 5px;
|
||
}
|
||
.tishi {
|
||
width: 100%;
|
||
font-size: 12px;
|
||
color: #fd8f02;
|
||
margin-top: -4px;
|
||
background: #fffbf2;
|
||
text-align: center;
|
||
padding: 6px 0;
|
||
}
|
||
.cardClass {
|
||
min-height: 200px;
|
||
}
|
||
.sznrClass {
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
.ant-card {
|
||
box-sizing: border-box;
|
||
margin: 2px 0;
|
||
padding: 0;
|
||
color: rgb(0 0 0);
|
||
font-size: 14px;
|
||
font-variant: tabular-nums;
|
||
line-height: 1.5715;
|
||
list-style: none;
|
||
font-feature-settings: tnum;
|
||
position: relative;
|
||
border-radius: 5px;
|
||
border: 1px solid #dadada;
|
||
background: #fff;
|
||
}
|
||
.ant-card-head {
|
||
min-height: 48px;
|
||
margin-bottom: -1px;
|
||
padding: 0 24px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
background: transparent;
|
||
border-bottom: 1px solid #dadada;
|
||
border-radius: 2px 2px 0 0;
|
||
}
|
||
.ellipsis {
|
||
overflow: hidden; /* 确保超出容器的内容被裁剪 */
|
||
white-space: nowrap; /* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
}
|
||
.ellip-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.elli-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
.ellip-word {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
.zuanqu:hover {
|
||
cursor: pointer;
|
||
color: #18a689;
|
||
}
|
||
.data-suggest {
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
width: 25%;
|
||
margin-right: 3px;
|
||
padding: 8px 3px;
|
||
border-radius: 5px;
|
||
background: #f7f7f7;
|
||
margin-top: 10px;
|
||
}
|
||
.data-suggest span:nth-child(1) {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
.data-suggest span:nth-child(2) {
|
||
font-size: 12px;
|
||
}
|
||
.work-img {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 80px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.work-img-img {
|
||
width: 180px;
|
||
height: 139px;
|
||
}
|
||
.buttonClass {
|
||
background: #1ab394;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
border-radius: 3px;
|
||
border: none;
|
||
}
|
||
.mar-right20 {
|
||
margin-right: 14px;
|
||
}
|
||
.button-zhta {
|
||
color: #666666;
|
||
cursor: pointer;
|
||
}
|
||
.button-zhta:hover {
|
||
cursor: pointer;
|
||
color: #18a689;
|
||
}
|
||
|
||
.diva {
|
||
cursor: pointer;
|
||
color: #18a689;
|
||
}
|
||
.sear-distance {
|
||
padding: 0 10px;
|
||
}
|
||
.ant-form-item {
|
||
box-sizing: border-box;
|
||
margin: 10px 0;
|
||
padding: 0;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
font-size: 14px;
|
||
font-variant: tabular-nums;
|
||
line-height: 1.5715;
|
||
list-style: none;
|
||
font-feature-settings: tnum;
|
||
/* margin-bottom: 24px; */
|
||
vertical-align: top;
|
||
}
|
||
.bled-countenance {
|
||
color: #333333;
|
||
}
|
||
.bled-countenance2 {
|
||
color: #999999;
|
||
font-size: 12px;
|
||
}
|
||
.region {
|
||
margin: 5px 10px;
|
||
padding-bottom: 20px;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
}
|
||
.region-title {
|
||
font-size: 16px;
|
||
color: #029c88;
|
||
padding: 8px 20px;
|
||
border-left: 5px solid #029c88;
|
||
margin: 10px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
}
|
||
.tjfx-col {
|
||
font-size: 12px;
|
||
padding: 8px 20px;
|
||
line-height: 25px;
|
||
}
|
||
.tjfx-col-title {
|
||
font-size: 16px;
|
||
padding: 8px 20px;
|
||
line-height: 25px;
|
||
font-weight: bold;
|
||
}
|
||
.tjfx-line {
|
||
width: 33%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f7f7f7;
|
||
border-radius: 5px;
|
||
margin: 0 15px;
|
||
padding: 8px 0;
|
||
}
|
||
.tjfx-colt {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #1ab394;
|
||
}
|
||
.tjfx-colw {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
.tjfx-title {
|
||
width: 90%;
|
||
float: left;
|
||
}
|
||
.tjfx-type {
|
||
width: 10%;
|
||
float: left;
|
||
}
|
||
.tjfx-xzrs {
|
||
margin-left: 30px;
|
||
font-size: 12px;
|
||
position: absolute;
|
||
right: 15px;
|
||
}
|
||
.tjfx-xzrs1 {
|
||
margin-left: 30px;
|
||
font-size: 12px;
|
||
}
|
||
.tjfx-zql {
|
||
text-align: right;
|
||
width: 50%;
|
||
font-size: 16px;
|
||
padding: 20px;
|
||
}
|
||
.question-type {
|
||
background: #eaf9f6;
|
||
color: #1ab394;
|
||
padding: 0 5px;
|
||
border-radius: 3px;
|
||
border: 1px solid #1ab394;
|
||
}
|
||
.answer-word {
|
||
color: #ff8710;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#siteMain {
|
||
// font-size: ;
|
||
// height: 100%;
|
||
background: #f3f3f4;
|
||
#maxSite {
|
||
//最大宽度
|
||
max-width: 1170px;
|
||
//居中
|
||
margin: 0 auto;
|
||
.rowGutter {
|
||
margin-top: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.ant-layout-header {
|
||
color: #fff;
|
||
background: #1ab394;
|
||
}
|
||
.ant-layout-footer {
|
||
line-height: 1.5;
|
||
background: #fff;
|
||
}
|
||
.ant-layout-sider {
|
||
color: #fff;
|
||
background: #3ba0e9;
|
||
}
|
||
.ant-layout-content {
|
||
color: #000;
|
||
background: #f3f3f4;
|
||
}
|
||
.dictBox :deep(.ant-select) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|