新增统计

src/components/components/answerData.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="data_body" v-resize="resize">
+    <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%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></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>
+
+<script>
+export default {
+  props: ["people"],
+  data() {
+    return {
+      person: [],
+      timu: [],
+      Aa: "",
+      count: 0,
+      dialogVisible: false,
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "第{b0}题: 答对{c0}人",
+        },
+        grid: {
+          left: "1%",
+          bottom: "10%",
+          top: "15%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 1],
+          minInterval: 1,
+          axisLine: {
+            onZero: false,
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLabel: {
+            textStyle: {
+              color: "#000",
+            },
+          },
+        },
+
+        series: [
+          {
+            type: "bar",
+            data: [],
+            showBackground: true,
+            barWidth: "50px",
+            label: {
+              show: true,
+              position: "top",
+              color: "#2e2e2e",
+            },
+          },
+        ],
+      },
+    };
+  },
+  directives: {
+    // 使用局部注册指令的方式
+    resize: {
+      // 指令的名称
+      bind(el, binding) {
+        // el为绑定的元素，binding为绑定给指令的对象
+        let width = "",
+          height = "";
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value(); // 关键
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      },
+    },
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    getA() {
+      this.timu = this.people;
+      this.dialogVisible = true;
+    },
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    resize() {
+      if (this.chartObj) {
+        this.chartObj.resize();
+      }
+    },
+  },
+  // watch: {
+  //   problemJson(val) {
+
+  //   },
+  // },
+  watch: {
+    people: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          sdata: [],
+        };
+        this.person = [];
+        for (var i = 0; i < this.people.length; i++) {
+          this.ooption.xdata.push(i + 1);
+          this.ooption.sdata.push(0);
+        }
+
+        for (var j = 0; j < this.people.length; j++) {
+          this.person[j] = this.people[j].rightPerson;
+          this.ooption.sdata[j] = this.people[j].rightPerson.length;
+        }
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.yAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.sdata;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.ooption = {
+      xdata: [],
+      sdata: [],
+    };
+    this.person = [];
+    for (var i = 0; i < this.people.length; i++) {
+      this.ooption.xdata.push(i + 1);
+      this.ooption.sdata.push(0);
+    }
+
+    for (var j = 0; j < this.people.length; j++) {
+      this.person[j] = this.people[j].rightPerson;
+      this.ooption.sdata[j] = this.people[j].rightPerson.length;
+    }
+    this.setChart(this.ooption);
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+
+.data_body .title {
+  /* position: absolute;
+  top: 20px;
+  left: 20px; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tips {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  background: #eee;
+  padding: 6px 6px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: #171717;
+}
+
+.tips img {
+  margin-right: 5px;
+}
+
+.tips span span {
+  color: #077aff;
+  margin: 0 3px;
+}
+
+.c_box {
+  margin-top: 10px;
+  display: flex;
+}
+
+.correct + .correct {
+  margin-left: 10px;
+}
+
+.correct {
+  display: flex;
+  align-items: flex-start;
+  width: fit-content;
+  background: #eee;
+  padding: 6px 6px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: #171717;
+}
+
+.correct span span {
+  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>

src/components/studyStudent.vue

@@ -3053,6 +3053,59 @@
                       </div>
                     </div>
                   </div>
+                  <div
+                    v-if="
+                      tType &&
+                      ((tType == 2 && sIsOpen == true) ||
+                        tType == 1 ||
+                        tType == 4) &&
+                      tool.tool.indexOf(47) != -1 &&
+                      (tool.sentenceList || tool.sentenceList.length > 0) &&
+                      checkJson[toolIndex].length
+                    "
+                    class="xuan_right_box"
+                  >
+                    <div
+                      class="tool_right_box"
+                      v-for="(item, index) in tool.sentenceList"
+                      :key="index"
+                    >
+                      <div>
+                        <span>{{ index + 1 + "、" + item.sentenceTitle }}</span>
+                      </div>
+                      <div class="right_box_xuan">
+                        <span>正确率</span>
+                        <span>{{
+                          (checkJson[toolIndex][index].right
+                            ? checkJson[toolIndex][index].right
+                            : 0) + "%"
+                        }}</span>
+                      </div>
+                      <div class="right_box_xuan">
+                        <span>答对人数</span>
+                        <span>{{
+                          checkJson[toolIndex][index].rightPerson.length
+                        }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    v-if="
+                      tType &&
+                      ((tType == 2 && sIsOpen == true) ||
+                        tType == 1 ||
+                        tType == 4) &&
+                      tool.tool.indexOf(47) != -1
+                    "
+                  >
+                    <AnswerData
+                      v-if="
+                        checkJson[toolIndex].length &&
+                        (tool.sentenceList || tool.sentenceList.length > 0)
+                      "
+                      :people="checkJson[toolIndex]"
+                    ></AnswerData>
+                  </div>
                   <div
                     v-if="
                       tType &&
@@ -3169,6 +3222,7 @@
                       </div>
                     </div>
                   </div>
+                  
                 </div>
                 <!-- <div class="upload_toolBtn" @click="addImg($event)">
                   上传文件
@@ -4799,6 +4853,7 @@ import pdf from "./components/vpdf";
 import AskStatic from "./components/askStatic";
 import AskStatic2 from "./components/askStatic2";
 import AnswerData2 from "./components/answerData2";
+import AnswerData from "./components/answerData";
 import EditorBar from "./tools/wangEnduit.vue";
 import Time from "./tools/time.vue";
 import Mind from "./tools/jsmind.vue";
@@ -4820,6 +4875,7 @@ export default {
     Sunburst,
     SeeBoard,
     AnswerData2,
+    AnswerData,
     Audio,
     ImgDraw,
   },
@@ -5130,9 +5186,12 @@ export default {
         });
     },
     addSenWorks() {
-      for(var i =0;i<this.sentenceList.length;i++){
-        for(var j=0;j<this.sentenceList[i].chooseSenList.length;j++){
-          if(this.sentenceList[i].chooseSenList[j] == undefined || this.sentenceList[i].chooseSenList[j] == ''){
+      for (var i = 0; i < this.sentenceList.length; i++) {
+        for (var j = 0; j < this.sentenceList[i].chooseSenList.length; j++) {
+          if (
+            this.sentenceList[i].chooseSenList[j] == undefined ||
+            this.sentenceList[i].chooseSenList[j] == ""
+          ) {
             this.$message.error("请将答案填写完整！");
             return;
           }
@@ -5890,6 +5949,24 @@ export default {
                           ] = 1);
                     }
                   }
+                } else if (data.type == 9 && a[i].tool[0] == 47) {
+                  var checkL = JSON.parse(data.content);
+                  for (var z = 0; z < checkL.length; z++) {
+                    if (!this.checkJson[i][z]) {
+                      this.checkJson[i].push({
+                        checkCount: [],
+                        checkPerson: [],
+                        rightPerson: [],
+                      });
+                    }
+                    this.checkJson[i][z].checkPerson.push(data.name);
+                    if (
+                      checkL[z].chooseSenList.toString() ==
+                      checkL[z].rightAnswer.toString()
+                    ) {
+                      this.checkJson[i][z].rightPerson.push(data.name);
+                    }
+                  }
                 }
                 for (var k = 0; k < d.length; k++) {
                   //点赞
@@ -6122,6 +6199,15 @@ export default {
                       );
                     }
                   }
+                } else if (data.type == 9) {
+                  for (var z = 0; z < this.checkJson[i].length; z++) {
+                    this.checkJson[i][z].checkPerent = [];
+                    this.checkJson[i][z].right = Math.round(
+                      (this.checkJson[i][z].rightPerson.length /
+                        this.checkJson[i][z].checkPerson.length) *
+                        100
+                    );
+                  }
                 }
               }
             }