update

src/components/components/answerData2.vue

@@ -2,6 +2,7 @@
   <div class="data_body">
     <div class="title">
       <span>答对数量</span>
+      <el-button type="primary" @click="getA()">查看学生</el-button>
     </div>
     <div style="width: 100%; height: 400px">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
@@ -17,13 +18,30 @@
         }}</span></span>
       </div>
       <div class="correct">
-        <span
-          >正确率为<span>{{
-            people.length > 0 ? Math.round(count / people.length * 10000) / 10000 * 100 + "%" : 0
-          }}</span></span
-        >
+        <span>正确率为<span>{{
+        people.length > 0 ? Math.round(count / people.length * 10000) / 10000 * 100 + "%" : 0
+        }}</span></span>
       </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 timu" :key="index" class="borderB">
+          <div class="s_title">第{{index+1}}题</div>
+          <div class="stuBox" style="margin-top: 20px;align-items: flex-start;">
+            <div style="margin: 0 0 10px 0; min-width: 70px; color: #adadad">
+              答对同学：
+            </div>
+            <div class="stuBox" style="flex-wrap: wrap">
+              <span class="studentClass" v-for="(pe, pi) in person[index]" :key="index + '-' + pi">{{ pe }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -32,8 +50,11 @@ export default {
   props: ["problemJson", "answer", "people"],
   data() {
     return {
+      person: [],
+      timu: [],
       Aa: "",
       count: 0,
+      dialogVisible: false,
       chartObj: null,
       ooption: {
         xdata: [],
@@ -85,6 +106,13 @@ export default {
     };
   },
   methods: {
+    handleClose(done) {
+      done();
+    },
+    getA() {
+      this.timu = this.problemJson;
+      this.dialogVisible = true;
+    },
     setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
@@ -110,6 +138,7 @@ export default {
         xdata: [],
         sdata: [],
       };
+      this.person = []
       for (var i = 0; i < this.problemJson.length; i++) {
         this.ooption.xdata.push(i + 1);
         this.ooption.sdata.push(0);
@@ -118,8 +147,10 @@ export default {
       for (var i = 0; i < this.people.length; i++) {
         let el = this.people[i].works.split(",");
         let count2 = 0;
+        this.person[i] = []
         for (var j = 0; j < this.problemJson.length; j++) {
           if (this.problemJson[j] == el[j]) {
+            this.person[i].push(this.people[i].sName)
             this.ooption.sdata[j]++;
             count2++;
           }
@@ -144,6 +175,7 @@ export default {
       xdata: [],
       sdata: [],
     };
+    this.person = []
     for (var i = 0; i < this.problemJson.length; i++) {
       this.ooption.xdata.push(i + 1);
       this.ooption.sdata.push(0);
@@ -152,8 +184,10 @@ export default {
     for (var i = 0; i < this.people.length; i++) {
       let el = this.people[i].works.split(",");
       let count2 = 0;
+      this.person[i] = []
       for (var j = 0; j < this.problemJson.length; j++) {
         if (this.problemJson[j] == el[j]) {
+          this.person[i].push(this.people[i].sName)
           this.ooption.sdata[j]++;
           count2++;
         }
@@ -192,6 +226,9 @@ export default {
   /* position: absolute;
   top: 20px;
   left: 20px; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .tips {
@@ -238,4 +275,76 @@ export default {
   color: #077aff;
   margin: 0 3px;
 }
+
+.dialog_diy>>>.el-dialog__header,
+.dialog_diy1>>>.el-dialog__header {
+  background: #002e81 !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;
+}
+
+.s_title {
+  /* margin-top: 10px; */
+  font-size: 18px;
+  margin-bottom: 10px;
+  word-break: break-word;
+  /* min-width: calc(100% / 2 - 200px); */
+}
+
+.stuBox {
+  display: flex;
+  /* flex-wrap: wrap; */
+  align-items: center;
+}
+
+.studentClass {
+  background: #46a1eb;
+  color: #fff;
+  width: 90px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+  border-radius: 5px;
+  margin: 0 15px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.borderB {
+  margin-bottom: 10px;
+  border-bottom: 1px solid #d8d8d8;
+}
 </style>