|
|
@@ -1,7 +1,76 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- {{ people }}
|
|
|
+ <div style="width: 100%;" v-if="sortData.length">
|
|
|
+ <div class="SortTool" v-for="(e,ind) in sortData" :key="ind + 'k'">
|
|
|
+ <el-button type="primary" @click="lookStu(ind)" class="btn" >查看学生</el-button>
|
|
|
+ <div class="tabCon">
|
|
|
+ <div class="con" style="width: 30%;">
|
|
|
+ <div>句子</div>
|
|
|
+ <div v-for="(i,index) in e" :key="index" style="display: flex;align-items: center;">
|
|
|
+ <span :style="{color:i.value == i.trA? '#409EFF' :'' }">{{ i.value }}</span>
|
|
|
+ <img style="height: 15px;width: 15px;margin-left: 10px;" v-if="i.value == i.trA" src="../../assets/right.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 正确率
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="con" style="width: 10%;">
|
|
|
+ <div>小计</div>
|
|
|
+ <div v-for="(i,index) in e" :key="index">
|
|
|
+ {{ i.count }}
|
|
|
+ </div>
|
|
|
+ <template v-if="e.find(k => k.isD)">
|
|
|
+ <span v-for="(i,index) in e" :key="index+'p'">
|
|
|
+ <span v-if="i.value == i.trA">{{ i.pro }}%</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <span v-else>
|
|
|
+ 0%
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="con" style="width: 60%;">
|
|
|
+ <div>比例</div>
|
|
|
+ <div v-for="(i,index) in e" :key="index">
|
|
|
+ <el-progress :percentage="i.pro"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="查看"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="900px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div v-for="(item, index) in PData" :key="index" class="borderB">
|
|
|
+ <div style="font-size: 18px;color: #000;margin-bottom: 10px;">
|
|
|
+ {{ item.sName }}:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 答案：<span :style="{color:JSON.parse(item.works)[itemIndex].chooseSenList.join('') == JSON.parse(item.works)[itemIndex].rightAnswer.join('')? '#409EFF' :'' }">
|
|
|
+ {{ JSON.parse(item.works)[itemIndex].chooseSenList.join('') }}
|
|
|
+ </span>
|
|
|
+ <img style="height: 15px;width: 15px;margin-left: 10px;"
|
|
|
+ v-if="JSON.parse(item.works)[itemIndex].chooseSenList.join('') == JSON.parse(item.works)[itemIndex].rightAnswer.join('')"
|
|
|
+ src="../../assets/right.png" alt="">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">
|
|
|
+ 关 闭
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -9,18 +78,154 @@
|
|
|
props: ["people"],
|
|
|
data(){
|
|
|
return {
|
|
|
-
|
|
|
+ PData:[], //所有作业
|
|
|
+ sortData:[], //作业分类
|
|
|
+ dialogVisible:false,
|
|
|
+ itemIndex:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ people: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (JSON.stringify(newVal) != JSON.stringify(this.PData)) {
|
|
|
+ this.PData = JSON.parse(JSON.stringify(newVal))
|
|
|
+ this.workData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true // 深度监听对象内部变化
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ workData(){
|
|
|
+ let allWork = [] ///整理数据
|
|
|
+ let groups = [] ///结果数据
|
|
|
+ if (this.PData.length == 0) return
|
|
|
+ // console.log('his.PData',this.PData);
|
|
|
+
|
|
|
+ JSON.parse(this.PData[0].works).forEach(e=>{
|
|
|
+ allWork.push([])
|
|
|
+ groups.push([])
|
|
|
+ })
|
|
|
+
|
|
|
+ this.PData.forEach(e => {
|
|
|
+ JSON.parse(e.works).forEach((k,kin)=>{
|
|
|
+ allWork[kin].push(k.chooseSenList.join(''))
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ for (let index = 0; index < allWork.length; index++) {
|
|
|
+ groups[index] = this.countDuplicates(allWork[index])
|
|
|
+ }
|
|
|
|
|
|
+ // let groups = this.countDuplicates(allWork)
|
|
|
+ for (let index = 0; index < groups.length; index++) {
|
|
|
+ for (let kin = 0; kin < groups[index].length; kin++) {
|
|
|
+ groups[index][kin].pro = 0
|
|
|
+ groups[index][kin].isD = groups[index][kin].value == JSON.parse(this.PData[0].works)[index].rightAnswer.join('')
|
|
|
+ groups[index][kin].trA = JSON.parse(this.PData[0].works)[index].rightAnswer.join('')
|
|
|
+ groups[index][kin].pro = ((groups[index][kin].count / this.PData.length) * 100).toFixed()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.sortData = groups
|
|
|
+ // console.log('allWork',allWork);
|
|
|
+
|
|
|
+ // console.log('groups',groups);
|
|
|
+
|
|
|
+ },
|
|
|
+ countDuplicates(arr) {
|
|
|
+ const countMap = {};
|
|
|
+
|
|
|
+ arr.forEach(item => {
|
|
|
+ countMap[item] = (countMap[item] || 0) + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ return Object.entries(countMap).map(([value, count]) => ({
|
|
|
+ value,
|
|
|
+ count
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ lookStu(val){
|
|
|
+ this.itemIndex = val
|
|
|
+ this.dialogVisible = true
|
|
|
+ }
|
|
|
},
|
|
|
mounted(){
|
|
|
-
|
|
|
+ this.PData = JSON.parse(JSON.stringify(this.people))
|
|
|
+ this.workData()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.SortTool{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 0 10px 25px;
|
|
|
+ padding: 18px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.tabCon{
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.con div{
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.btn{
|
|
|
+ position: absolute;top: 0;right: 0;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__header,
|
|
|
+.dialog_diy1 >>> .el-dialog__header {
|
|
|
+ background: #454545 !important;
|
|
|
+ padding: 15px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy >>> .el-dialog__title,
|
|
|
+.dialog_diy1 >>> .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn,
|
|
|
+.dialog_diy1 >>> .el-dialog__headerbtn {
|
|
|
+ top: 19px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
|
|
|
+.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
|
|
|
+.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy1 >>> .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
|
|
|
+.dialog_diy >>> .el-dialog__body,
|
|
|
+.dialog_diy >>> .el-dialog__footer,
|
|
|
+.dialog_diy1 >>> .el-dialog__footer {
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+.borderB{
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.right::after {
|
|
|
+ content: "";
|
|
|
+ /* position: absolute; */
|
|
|
+ background-image: url(../../assets/right.png);
|
|
|
+ min-width: 15px;
|
|
|
+ min-height: 15px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
</style>
|
11wqe1