baoman / Ezquiz_Platform

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>问答-数据报表</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.clazzId"
          placeholder=""
          @change="changClazz"
        >
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >{{ item.label }}
          </el-option>
        </el-select>
        <el-select
          v-if="role == '班主任'"
          class="sel"
          multiple
          collapse-tags
          v-model="query.subjectId"
          placeholder=""
          @change="_QueryData"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-else
          class="sel"
          v-model="query.subjectId"
          placeholder=""
          @change="_QueryData"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker
            v-model="query.startDay"
            type="date"
            @change="handleChangeTimeStart"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="query.endDay"
            type="date"
            placeholder="选择日期时间"
            @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
            >今天</span
          >
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
            >昨天</span
          >
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
            >本周</span
          >
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div class="table-box">
      <el-radio-group v-model="tabIndex" style="margin-bottom: 20px">
        <el-radio-button :label="1">单课时报表</el-radio-button>
        <el-radio-button :label="2" v-if="this.role != '班主任'"
          >阶段问答报表</el-radio-button
        >
        <el-radio-button :label="3">阶段互动报表</el-radio-button>
      </el-radio-group>
      <p class="table-tit" v-if="tabIndex != 1">
        <span>总课时数：10</span>
        <span>互动总数：22</span>
      </p>
      <div v-if="tabIndex == 1">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :default-sort="{ prop: 'canyudu', order: 'descending' }"
        >
          <el-table-column
            prop="keshi"
            label="课时"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="zongshu"
            label="题目总数"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="shijian"
            label="上课时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="canyudu"
            label="参与度"
            sortable
            align="center"
          > <template slot-scope="scoped">{{scoped.row.canyudu}}%</template></el-table-column>
          <el-table-column
            prop="zhengque"
            label="已答总正确率"
            sortable
            align="center"
          >
          <template slot-scope="scoped">{{scoped.row.zhengque}}%</template>
          </el-table-column>
          <el-table-column
            prop="allzheng"
            label="班级总正确率"
            sortable
            align="center"
          ><template slot-scope="scoped">{{scoped.row.allzheng}}%</template></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scoped">
              <el-tooltip effect="dark" content="详情" placement="left">
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-arrow-right"
                  @click="linkTo(scoped.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="修改答案" placement="right">
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-file-text"
                  @click="edit(scoped.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="tabIndex == 2">
        <el-table
          :data="tableAsk"
          border
          style="width: 100%"
          :default-sort="{ prop: 'cishu', order: 'descending' }"
        >
          <el-table-column
            prop="xuehao"
            label="学号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="xingming"
            label="姓名"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="cishu"
            label="累计答题次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dadui"
            label="累计答对次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="canyudu"
            label="总参与度"
            sortable
            align="center"
          > <template slot-scope="scoped">{{scoped.row.canyudu}}%</template></el-table-column>
          <el-table-column
            prop="allzheng"
            label="总正确率"
            sortable
            align="center"
          > <template slot-scope="scoped">{{scoped.row.allzheng}}%</template></el-table-column>
          <el-table-column
            prop="yidazheng"
            label="已答总正确率"
            sortable
            align="center"
          >
          <template slot-scope="scoped">{{scoped.row.yidazheng}}%</template>
          </el-table-column>
          <el-table-column
            prop="zongpaiming"
            label="总正确率班排名"
            sortable
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div v-if="tabIndex == 3">
        <el-table
          :data="tableAsk"
          border
          style="width: 100%"
          :default-sort="{ prop: 'cishu', order: 'descending' }"
        >
          <el-table-column
            prop="xuehao"
            label="学号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="xingming"
            label="姓名"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="cishu"
            label="抢答成功次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dadui"
            label="答对次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="chouda"
            label="抽答次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="choudadui"
            label="抽答答对次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="canyu"
            label="参与得分"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="duicuo"
            label="对错得分"
            sortable
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <p class="down" v-if="tabIndex == 3||tabIndex == 2">
        <el-button type="info" plain round icon="fa fa-cloud-download">导出报表</el-button>
      </p>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="400" center>
      <div slot="title">
        <p>
          <!-- 设置答案 <i class="fa fa-exchange" @click="editType = !editType"></i> -->
          设置答案
        </p>
      </div>
      <div v-show="editType">
        <div v-for="(item, index) in form.questionList" :key="index">
          <template v-for="(subQuestions, indexs) in item.subQuestions">
            <div
              class="sub-questions"
              :key="indexs"
              v-if="subQuestions.correctAnswer"
            >
              <div class="qs-num">题{{ subQuestions.questionIndex }}</div>
              <div class="qs-options qs-options2">
                <p v-if="subQuestions.questionType == 4" class="answer-box">
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 1"
                    >✓</span
                  >
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 2"
                    >✗</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 3" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions"
                    :class="
                      subQuestions.correctAnswer.includes(option)
                        ? 'active'
                        : ''
                    "
                    :key="option"
                    @click="changAnswer(subQuestions, option)"
                    >{{ option }}</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 2" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions"
                    :class="
                      subQuestions.correctAnswer == option ? 'active' : ''
                    "
                    :key="option"
                    @click="subQuestions.correctAnswer = option"
                    >{{ option }}</span
                  >
                </p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- <div v-show="!editType">
        <p class="dia-tips">
            请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
          </p>
        <div class="dia-question-box">
          <div v-for="(item, index) in form2.questionList" :key="index">
            <template v-for="(items, indexs) in item.subQuestions">
              <div class="set-questions" :key="indexs">
                <div class="qs-num">
                  <p>{{ items.name }}</p>
                  <p>共{{ items.list.length }}题</p>
                </div>
                <div class="qs-options">
                  <p class="ipt">
                    <el-input
                      v-model="items.answerList"
                      @keydown.native="keydownAnswer($event)"
                    ></el-input>
                  </p>
                  <p class="answer-box">
                    <template v-if="items.list[0].questionType == 4">
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += '✓')
                            : ''
                        "
                        >✓</span
                      >
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += '✗')
                            : ''
                        "
                        >✗</span
                      >
                    </template>
                    <template v-if="items.list[0].questionType == 3">
                      <span
                        class="answer-s active"
                        v-for="option in items.list[0].answerOptions"
                        :key="option"
                        @click="setAnswer(items,option)"
                        >{{ option }}</span
                      >
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.split(',').length < items.list.length
                            ? (items.answerList += ',')
                            : ''
                        "
                        >,</span
                      >
                    </template>
                    <template
                      v-if="items.list[0].questionType == 2"
                      class="answer-box"
                    >
                      <span
                        class="answer-s active"
                        v-for="option in items.list[0].answerOptions"
                        :key="option"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += option)
                            : ''
                        "
                        >{{ option }}</span
                      >
                    </template>
                    <span
                      class="answer-s delButton"
                      @click="items.answerList = items.answerList.slice(0, -1)"
                      >x</span
                    >
                    <span
                      class="answer-s ac"
                      @click="items.answerList = ''"
                      >AC</span
                    >
                  </p>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div> -->
      <div slot="footer">
        <el-button class="dia-btn" type="primary" @click="saveAnswer"
          >确 定</el-button
        >
        <el-button class="dia-btn" type="danger" @click="dialogVisible = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate, deepClone,checkAnswer } from "utils";
export default {
  data() {
    return {
      role: "",
      loading: false,
      dialogVisible: false, //修改答案
      editType: true, //修改答案模式
      editId: "",
      form: { questionList: [] },
      form2: { questionList: [] },
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        clazzId: "",
        subjectId: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      classList: [], //班级
      subjectList: [], //科目
      tabIndex: 1, //选项卡
      tableData: [
        //单课时报表
        {
          id: 1,
          keshi: "课时一",
          zongshu: 10,
          shijian: "2022-11-9 21:30至22:30",
          canyudu: 60,
          zhengque: 90,
          allzheng: 80,
          questionList: [
            {
              questionTitle: "f",
              score: 1,
              subQuestions: [
                {
                  questionIndex: 1,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D"],
                  correctAnswer: "B",
                },
                {
                  questionIndex: 2,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "A",
                },
                {
                  questionIndex: 2,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 2,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 3,
                  questionType: 4,
                  score: 1,
                  partScore: 0,
                  selectNum: 0,
                  answerOptions: [],
                  correctAnswer: "1",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          keshi: "课时二",
          zongshu: 8,
          shijian: "2022-11-10 21:30至22:30",
          canyudu: 70,
          zhengque: 80,
          allzheng: 60,
          questionList: [
            {
              questionTitle: "a",
              score: 1,
              subQuestions: [
                {
                  questionIndex: 2,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D"],
                  correctAnswer: "A,C",
                },
              ],
            },
          ],
        },
      ],
      tableAsk:[
        {
          xuehao: 1,
          xingming: "丁芳菲",
          cishu: 5,
          dadui: 60,
          canyudu: 90,
          allzheng: 80,
          yidazheng:50,
          zongpaiming:5
        },
        {
          xuehao: 1,
          xingming: "丁芳菲2",
          cishu: 3,
          dadui: 20,
          canyudu: 80,
          allzheng: 60,
          yidazheng:65,
          zongpaiming:4
        }
      ],
      tableStage:[
        {
          xuehao: 1,
          xingming: "丁芳菲",
          cishu: 5,
          dadui: 60,
          chouda: 90,
          choudadui: 80,
          canyu:50,
          duicuo:5
        }
      ]
    };
  },
  async created() {
    this.role = this.$store.getters.info.permissions[0]?.roleName;
    if (this.role == "班主任") {
      this.query.subjectId = [];
    }
    // await this._QueryClassList();
    // await this._QuerySubjectList();
    // await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  methods: {
    linkTo(obj) {
      //去详情
      this.$router.push({
        path: "/askAnalysis",
        query: {
          id: obj.id,
        },
      });
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    edit(item) {
      this.form = deepClone(item);
      // this.form2 = deepClone(item);
      // //组合每道大题中的相同题目
      // let questionList = deepClone(item.questionList);
      // for (let i = 0; i < questionList.length; i++) {
      //   let jsons = {};
      //   let answerOptions = [];
      //   questionList[i].subQuestions.map((items) => {
      //     let txt = this.setSubPro(items.questionType);
      //     if (jsons[txt]) {
      //       jsons[txt].push(items);
      //     } else {
      //       jsons[txt] = [items];
      //     }
      //     if (items.questionType == 2 || items.questionType == 3) {
      //       if (items.answerOptions.length > answerOptions.length) {
      //         answerOptions = items.answerOptions;
      //       }
      //       jsons[txt][0].answerOptions = answerOptions;
      //     }
      //   });
      //   this.form2.questionList[i].subQuestions = Object.keys(jsons).map(
      //     (item) => {
      //       return {
      //         name: item,
      //         list: jsons[item],
      //         answerList: "",
      //       };
      //     }
      //   );
      // }
      this.dialogVisible = true;
    },
    keydownAnswer(event) {//快速答案设置禁止输入
      if (
        event.key == "Meta" ||
        event.key == "CapsLock" ||
        event.key == "Shift" ||
        event.key == "Enter" ||
        event.key == "Alt" ||
        event.key == "Backspace" ||
        event.key == "Delete" ||
        event.key == "ArrowUp" ||
        event.key == "ArrowDown" ||
        event.key == "ArrowLeft" ||
        event.key == "v" ||
        event.key == "V" ||
        event.key == "ArrowRight"
      ) {
        return;
      } else {
        event.returnValue = "";
      }
    },
    setAnswer(obj,answer){//多选答案设置
      obj.answerList+=answer
       let str = obj.answerList;
      let str2 = checkAnswer(
        str,
        3,
        obj.list[0].answerOptions,
        obj.list.length
      );
      obj.answerList = str2;
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          break;
        case 2: {
          let times = new Date().getTime() - 24 * 60 * 60 * 1000;
          that.query.day = formatDate(new Date(times), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          break;
        }
        case 3: {
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          let times1 = new Date().getTime() - 24 * 60 * 60 * 1000 * (day - 1);
          let times2 = new Date().getTime() - 24 * 60 * 60 * 1000 * (day - 7);
          that.query.startDay = formatDate(new Date(times1), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(times2), "yyyy-MM-dd");
          break;
        }
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    changAnswer(sub, option) {
      //设置多选答案
      let str = new RegExp(option, "g");
      if (sub.correctAnswer?.includes(option)) {
        sub.correctAnswer = sub.correctAnswer.replace(str, "");
      } else {
        let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
        arrs.push(option);
        sub.correctAnswer = arrs.sort().join("");
      }
    },
    async saveAnswer(){
       // const { data, code, message } = await this.$request.modifyPaper({...this.form});
      // if (code == 0) {
       this.dialogVisible = false
      // } else {
      //   this.$message.error(message);
      // }
    },
    async changClazz() {
      await this._QuerySubjectList();
      await this.setDate(1);
    },
    async _QueryClassList() {
      const { data, code, message } = await this.$request.fetchClassList();
      if (code === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: item.clazzId,
            label: item.clazzName,
          };
        });
        this.query.clazzId = this.classList[0].value;
      } else {
        this.$message.error(message);
      }
    },
    async _QuerySubjectList() {
      const datas = this.query.clazzId
        ? {
            clazzId: this.query.clazzId,
          }
        : {};
      const { data, code, message } = await this.$request.fetchSubjectList(
        datas
      );
      if (code === 0) {
        this.subjectList = data.list.map((item) => {
          return {
            value: item.subjectId,
            label: item.subjectName,
          };
        });
        if (this.role == "班主任") {
          this.subjectList.unshift({
            value: "",
            label: "全部",
          });
        }
        this.query.subjectId = this.subjectList[0].value;
      } else {
        this.$message.error(message);
      }
    },
    async _QueryData() {
      this.loading = true;
      //多课时对比
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      const { data, code, message } = await this.$request.fetchQuizList({
        ...query,
      });
      this.loading = false;
      if (code === 0) {
      } else {
        this.$message.error(message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-box {
  margin: 0 20px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 5px;
  :deep(.fa-arrow-right) {
    padding-left: 2px;
  }
  :deep(.fa-file-text) {
    padding-left: 2px;
  }
}

.sub-questions {
  width: 100%;
  display: flex;
  &:hover {
    background: #f8f8f8;
  }
  & > div {
    min-height: 40px;
    padding: 5px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qs-num {
    width: 80px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  .qs-options {
    flex: 1;
  }
  .qs-options2 {
    text-align: left;
    justify-content: flex-start;
    padding-left: 20px;
    .answer-s {
      cursor: pointer;
      border-color: #667ffd;
      color: #667ffd;
      margin: 0 15px;
      &.active {
        color: #fff;
      }
    }
  }
  :deep(.el-select) {
    .el-input__inner {
      border-radius: 20px;
      border-color: #667ffd;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
.fa-exchange {
  color: #667ffd;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}
.dia-btn {
  border-radius: 20px;
  margin: 0 20px;
  padding: 10px 20px;
}
.dia-tips{
    padding-bottom:10px;
  }
.dia-question-box {
  padding: 16px 16px 1px;
  background: #f8f8f8;
  border-radius: 10px;
  
  .answer-s {
    width: 36px;
    height: 28px;
    cursor: pointer;
  }
}
.set-questions {
  display: flex;
  margin-bottom: 12px;
  width: 100%;
  .qs-num {
    flex-shrink: 0;
    margin-right: 10px;
  }
  .qs-options {
    flex: 1;
    .ipt {
      margin-bottom: 5px;
    }
  }
  .delButton {
    border-color: #ff6868;
    background: #ff6868 url("../../assets/images/arrow.png") no-repeat center;
    background-size: 19px;
    color: transparent;
  }
  .ac{
    border-color: #ff6868;
    background: #ff6868;
    color:#fff
  }
}
.down{
padding-top:16px;
}
</style>