baoman / Ezquiz_Platform

  <template>
      <div style="margin-right: 20px;width: 100%">
          <el-row class="row-type">
              <label>阶段报表类型</label>
              <el-select class="opration-select" v-model="currentType">
                  <el-option v-for="(item, index) in types" :lable="item" :key="index" :value="item" />
              </el-select>
              <div style="float: right;">
                  <el-button type="primary" @click="_export" icon="el-icon-upload2" class="opration-btn">导出报表</el-button>
                  <el-button type="primary" @click="_print" icon="el-icon-printer" class="opration-btn">打印报表</el-button>
              </div>
          </el-row>
          <div id="print-content">
              <div v-if="currentType == '题目作答表现汇总'">
                  <el-row class="row-subfix" style="margin-top:10px">
                      <div class="row-line">
                          <span class="line-subfix">班级：</span>
                          <span class="line-value">{{ detail.className }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">科目：</span>
                          <span class="line-value">{{ detail.subjectName }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">课时数：</span>
                          <span class="line-value">{{ $props.askReportIds.length }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">上课时间：</span>
                          <span class="line-value">{{ detail.startTime }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">下课时间：</span>
                          <span class="line-value">{{ detail.endTime }}</span>
                      </div>
                  </el-row>
                  <el-row class="row-subfix">
                      <div class="row-line">
                          <span class="line-subfix">班级人数：</span>
                          <span class="line-value">{{ detail.classPersonNum }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">签到人数：</span>
                          <span class="line-value">{{ detail.checkInCount }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">题目总数：</span>
                          <span class="line-value">{{ detail.questionNum }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">答题总数：</span>
                          <span class="line-value">{{ detail.totalAnswersNum }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">课时时长：</span>
                          <span class="line-value">{{ setDuration(detail.duration) }}</span>
                      </div>
                  </el-row>
                  <el-row class="row-subfix">
                      <div class="row-line">
                          <span class="line-subfix">答对总数：</span>
                          <span class="line-value">{{ detail.totalCorrectAnswersNum }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">总参与度：</span>

                          <span class="line-value">{{ detail.participationRate ? detail.participationRate : 0 }}%</span>

                      </div>
                      <div class="row-line">
                          <span class="line-subfix">班级正确率：</span>

                          <span class="line-value">{{ detail.classCorrectRate ? detail.classCorrectRate : 0 }}%</span>

                      </div>
                      <div class="row-line">
                          <span class="line-subfix">已达正确率：</span>

                          <span class="line-value">{{ detail.answerCorrectRate ? detail.answerCorrectRate : 0 }}%</span>

                      </div>
                      <div class="row-line">
                          <span class="line-subfix">反馈时长：</span>
                          <span class="line-value">{{ setDuration(detail.consumingDuration) }}</span>
                      </div>
                  </el-row>
                  <el-row class="row-table">
                      <el-table class="default-table" :data="singleSubjectSummary" border>
                          <el-table-column prop="title" label="课时-题号" />

                          <el-table-column label="题干" width="80">

                              <template slot-scope="scoped">
                                  <el-button type="text" @click="openStem(scoped.row)">查看</el-button>
                              </template>
                          </el-table-column>
                          <el-table-column prop="questionType" label="题型" width="100">
                              <template slot-scope="scoped">{{ setSubPro(scoped.row.questionType) }}</template>
                          </el-table-column>
                          <el-table-column prop="answeredNum" label="答题人数" width="100" />
                          <el-table-column prop="correctAnswerNum" label="答对人数" width="100" />

                          <el-table-column prop="participationRate" label="班级参与度(单题)" width="170">

                              <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template>
                          </el-table-column>

                          <el-table-column prop="classCorrectRate" label="班级正确率(单题)" width="170">

                              <template slot-scope="scoped">{{ scoped.row.classCorrectRate }}%</template>
                          </el-table-column>
  

                          <el-table-column prop="answerCorrectRate" label="已答正确率(单题)" width="170">

                              <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
                          </el-table-column>
  

                          <el-table-column prop="knowledge" label="知识点(单题)" width="150">
                              <template slot-scope="scoped">
                                  <el-tooltip effect="dark" :content="scoped.row.knowledge" placement="left">
                                      <span class="overflowText">
                                          {{  scoped.row.knowledge }}
                                      </span>
                                  </el-tooltip>
                              </template>
                          </el-table-column>

                          <el-table-column prop="correctAnswer" label="正确答案(单题)" width="150">
                              <template slot-scope="scoped">
                                  {{
                  scoped.row.correctAnswer == 1 ? "✓" :
                      scoped.row.correctAnswer == 2 ? "✗" :
                          scoped.row.correctAnswer
              }}
                              </template>
                          </el-table-column>
                          <el-table-column prop="fallible" label="干扰选项(单题)" width="150">
                              <template slot-scope="scoped">
                                  {{
                      scoped.row.fallible == 1 ? "✓" :
                          scoped.row.fallible == 2 ? "✗" :
                              scoped.row.fallible
                  }}
                              </template>
                          </el-table-column>
                      </el-table>
                  </el-row>
              </div>
              <div v-if="currentType == '学生单科表现作答汇总表'">
                  <el-row class="row-subfix" style="margin-top:10px">
                      <div class="row-line">
                          <span class="line-subfix">班级：</span>
                          <span class="line-value">{{ detail.className }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">科目：</span>
                          <span class="line-value">{{ detail.subjectName }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">开始时间：</span>
                          <span class="line-value">{{ $props.queryParams.dateRange[0] }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">截止时间：</span>
                          <span class="line-value">{{ $props.queryParams.dateRange[1] }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">下课时间：</span>
                          <span class="line-value">{{ detail.endTime }}</span>
                      </div>
                  </el-row>
                  <el-row class="row-subfix">
                      <div class="row-line">
                          <span class="line-subfix">课时数：</span>
                          <span class="line-value">{{ $props.askReportIds.length }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">总出题数：</span>
                          <span class="line-value">{{ detail.questionNum }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">查询时间：</span>
                          <span class="line-value">{{ detail.selectDate }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">查询老师：</span>
                          <span class="line-value">{{ detail.answerCorrectRate }}</span>
                      </div>
                      <div class="row-line">
                          <span class="line-subfix">课时时长：</span>
                          <span class="line-value">{{ setDuration(detail.consumingDuration) }}</span>
                      </div>
                  </el-row>
                  <el-row class="row-table">
                      <el-table class="default-table" :data="studentPerformance">
                          <el-table-column prop="studentCode" label="学号" />
                          <el-table-column prop="studentName" label="姓名" width="160" />
                          <el-table-column prop="answerTimes" label="累计答题次数" width="160" />
                          <el-table-column prop="correctAnswerTimes" label="累计答对次数" width="160" />
                          <el-table-column prop="participationRate" label="总参与度" width="160">
                              <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template>
                          </el-table-column>
                          <el-table-column prop="participationRateRank" label="总参与度排名" width="160" />
                          <el-table-column prop="correctRate" label="总正确率" width="120">
                              <template slot-scope="scoped">{{ scoped.row.correctRate }}%</template>
                          </el-table-column>

                          <el-table-column prop="correctRateRank" label="总正确率排名" width="140" />

                          <el-table-column prop="answerCorrectRate" label="已答正确率" width="120">
                              <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
                          </el-table-column>
                          <el-table-column prop="correctAnswerNum" label="查看折线图" width="120">
                              <template slot-scope="scoped">
                                  <el-button type="text" text @click="openLineChart(scoped.row)">查看</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </el-row>
              </div>
              <div v-if="currentType == '学生单科互动表现排名表'">
                  <el-row class="row-table">
                      <el-table class="default-table" :data="studentInteractive">
                          <el-table-column prop="studentCode" label="学号" />
                          <el-table-column prop="studentName" label="姓名" width="160" />
                          <el-table-column prop="interactionsNum" label="参与得分" width="210" />
                          <el-table-column prop="interactionsCorrectNum" label="对错得分" width="210" />
                          <el-table-column prop="rushAnswerTimes" label="抢答成功次数" width="210" />
                          <el-table-column prop="rushAnswerCorrectTimes" label="抢答答对次数" width="210" />

                          <el-table-column prop="checkAnswerTimes" label="被抽答次数" width="210" />
                          <el-table-column prop="checkAnswerCorrectTimes" label="抽答答对次数" width="210" />

                      </el-table>
                  </el-row>
              </div>
          </div>

          <el-dialog :append-to-body="true" class="chart-dia" :visible.sync="lineChart.visible" :title="lineChart.title"
              width="800">

              <div class="chart-box">
                  <LineChart id="askLineChart" :params="lineChart.data" :xAxis="lineChart.xAxis"
                      :tooltipFormatter="true" />
              </div>
          </el-dialog>

          <el-dialog :append-to-body="true" class="stem" :visible.sync="stem.visible" :title="'题干'" width="800">

              <iframe v-if="stem && stem.src" :src="stem.src" style="width: 100%;min-height: 400px;" />
          </el-dialog>
          <ExportDia :exportStudent="exportStudent" :diaShow="diaShow" @cancel="cancel" @exportData="_exportData"
              :type="'折线图'" />
      </div>
  </template>
  <script>

  import { formatDate,getKnowledge } from "utils";

  import { downloadFile, tablePrint } from "@/utils";
  import LineChart from "@/components/charts/lineChart";
  export default {
      name: "askSummaryReport",
      components: {
          LineChart
      },
      props: {
          askReportIds: Array,

          queryParams: Object,
              role: "",

      },
  
      watch: {
          currentType: {
              handler: async function (val) {
                  await this._changeType();
              },
              deep: false,
          },
          $props: {
              handler: async function (val) {
                  await this._changeType();
              },
              deep: false,
          }
      },
      data() {
          return {
              types: ["题目作答表现汇总", "学生单科表现作答汇总表", "学生单科互动表现排名表"],
              currentType: "题目作答表现汇总",
              detail: {},
              page: 1,
              exportStudent: [],
              diaShow: false,
              size: 10,
              total: 0,
              studentPerformance: [],
              singleSubjectSummary: [],
              studentInteractive: [],
              //折线图数据对象
              lineChart: {
                  data: [],
                  xAxis: [],
                  title: "",
                  visible: false
              },
              //题干数据对象
              stem: {
                  visible: false,
                  src: null
              }
          };
      },
      async created() {
          await this._changeType();
          await this._detail();
      },
      methods: {
          _export() {
              this.diaShow = true;
          },
          _print() {

              let title = this.detail.title || this.subjectNames.join();
  
              tablePrint("print-content", title + "_" + this.currentType);

          },
          cancel() {
              this.diaShow = false;
          },
          async _exportData(arr) {
  
              let studentIds = arr;
  
              let query = {};
  
              if (studentIds != null) {
                  if (studentIds.length > 0) {
                      query.studentIds = studentIds;
                  } else {
                      query.studentIds = [];
                  }
              }
  
              let exportPeriodReport = "";
  
              query.periodIds = this.$props.askReportIds;
  
              query.classIds = [this.$props.queryParams.class];
  
              exportPeriodReport =
                  this.role == "ROLE_PERSONAL"
                      ? this.$request.pExportPhaseAnswerReport
                      : this.$request.exportPhaseAnswerReport;
  
              const data = await exportPeriodReport({
                  ...query,
              });
  
              if (data) {
                  this.cancel();
                  let blob = new Blob([data], {
                      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                  });
                  let name = `随堂问-${this.detail.className}-${this.detail.subjectName}汇总分析报表.xlsx`
                  downloadFile(this.status ? "随堂问-已归档单课时报表.xlsx" : name, blob);
              } else {
                  this.$message.error("下载失败");
              }

          },

          async refresh() {
              await this._changeType();
              await this._detail();
          },
          async _changeType() {
              switch (this.currentType) {
                  case "题目作答表现汇总": { await this._singleSubjectSummary(); }; break;
                  case "学生单科表现作答汇总表": { await this._studentPerformance(); }; break;
                  case "学生单科互动表现排名表": { await this._studentInteractive(); }; break;
              }
          },
          setSubPro(type) {
              let tit;
              switch (type) {
                  case 2:
                      tit = "单选题";
                      break;
                  case 3:
                      tit = "多选题";
                      break;
                  case 4:
                      tit = "判断题";
                      break;
                  case 5:
                      tit = "主观题";
                      break;
                  default:
                      tit = "其他";
              }
              return tit;
          },
          setDuration(times) {

  
              if (!Number(times)) return "0分0秒";

              let m = parseInt(times / 1000 / 60);
              let s = parseInt((times / 1000) % 60);
              let ms = times;
              let aTime;

              if (times == 0) {
                  aTime = `0`;
              } else {
                  if (m == 0 && s == 0) {
                      aTime = `${ms}毫秒`;

                  } else if (m == 0) {

                      aTime = `${s}秒`;

                  } else {
                      if (s == 0) {
                          aTime = `${m}分`;
                      }
                      else {
                          aTime = `${m}分${s}秒`;
                      }

                  }
              }

              // c=(aTime);

              return aTime;
          },
          async _detail() {
  
              this.detail = {};
  
              if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
  
              const periodDetail =
                  this.role == "ROLE_PERSONAL"
                      ? this.$request.pPeriodDetail :
                      this.role == "ROLE_BANZHUREN" ?
                          this.$request.periodDetail
                          : this.$request.periodDetail;
  
              let detailReponse = await periodDetail({
                  periodIds: this.$props.askReportIds
              });
  
              if (detailReponse.status != 0) {
                  this.$message.error(detailReponse.info);
                  return;
              }
              this.detail = detailReponse.data;
              this.detail.selectDate = formatDate(new Date(), "yyyy-MM-dd");
          },
          async _singleSubjectSummary() {
  
              this.singleSubjectSummary = [];
  
              if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
  
              const periodList =
                  this.role == "ROLE_PERSONAL"
                      ? this.$request.pPeriodQuestionReport
                      : this.$request.periodQuestionReport;
  
              let query = {
                  periodIds: this.$props.askReportIds,
                  classIds: [this.$props.queryParams.class],
              };
  
              let periodListReponse = await periodList({
                  ...query
              });
  
              if (periodListReponse.status != 0) {
                  this.$message.error(periodListReponse.info);
                  return;
              }
  
              this.singleSubjectSummary = periodListReponse.data.list;
  
              this.total = periodListReponse.data.count;
          },
          async _studentPerformance() {
  
              this.studentPerformance = [];
  
              if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
  
              const phaseAnswerList =
                  this.role == "ROLE_PERSONAL"
                      ? this.$request.pPhaseAnswerReport
                      : this.$request.phaseAnswerReport;
  
              let query = {
                  periodIds: this.$props.askReportIds,
                  classIds: [this.$props.queryParams.class],
              };
  
              let phaseAnswerReponse = await phaseAnswerList({
                  ...query
              });
  
              if (phaseAnswerReponse.status != 0) {
                  this.$message.error(phaseAnswerReponse.info);
                  return;
              }
  
              this.studentPerformance = phaseAnswerReponse.data.list;
  
              this.total = phaseAnswerReponse.data.count;
          },
          async _studentInteractive() {
  
              this.studentInteractive = [];
  
              if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
  
              const interactiveList =
                  this.role == "ROLE_PERSONAL"
                      ? this.$request.phaseInteractiveReport
                      : this.$request.phaseInteractiveReport;
  
              let query = {
                  periodIds: this.$props.askReportIds,
                  classIds: [this.$props.queryParams.class],
              };
  
              let interactiveListReponse = await interactiveList({
                  ...query
              });
  
              if (interactiveListReponse.status != 0) {
                  this.$message.error(interactiveListReponse.info);
                  return;
              }
  
              this.studentInteractive = interactiveListReponse.data.list;
  
              this.total = interactiveListReponse.data.count;
          },
          openLineChart(chartRow) {

              var subejct = this.$props.role == 'ROLE_BANZHUREN' ? this.$props.queryParams.subjects[0] : this.$props.queryParams.subject;
              this.lineChart.title = `${chartRow.studentName}-${subejct}-多课时作答表现图`;

              this.lineChart.visible = true;
              let participationRate = [];
              let correctRate = [];
              let answerCorrectRate = [];
              this.lineChart.xAxis = chartRow.dataList.map((item) => {
                  participationRate.push(item.participationRate);
                  correctRate.push(item.correctRate);
                  answerCorrectRate.push(item.answerCorrectRate);
                  return item.name;
              });
              this.lineChart.data = [
                  {
                      name: "参与度",
                      value: participationRate,
                  },
                  {
                      name: "正确率",
                      value: correctRate,
                  },
                  {
                      name: "已答正确率",
                      value: answerCorrectRate,
                  },

              ]; 

          },
          openStem(stemRow) {
              this.stem.src = stemRow.screenshot ?? "";
              this.stem.visible = true;
          },
          openExport() {
  
          }
      }
  };
  </script>
  <style scoped lang="scss">
  .chart-dia {
      .chart-box {
          width: 100%;
          height: 300px;
      }
  
      :deep(.el-dialog__body) {
          padding: 0 0 20px 0;
      }
  }
  
  .opration-btn {
      margin-right: 10px;
  }
  
  .opration-select {
      margin-left: 10px;
  }
  
  .row-line {

      width: calc(20% - 4px);

      border: 1px solid #ebeef5;
      background: #f5f7fa;
      display: inline-block;
      height: 40px;
      line-height: 40px;
  
      .line-subfix {
          margin-left: 10px;
  
      }
  }
  
  .row-table {
      margin-top: 20px;
  }
  </style>