src/views/ask/index.vue

<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.classId"
          placeholder="选择班级"
          @change="changClazz"
        >
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="role == 'ROLE_BANZHUREN'"
          class="sel"
          multiple
          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
          >
          <span @click="setDate(4)" :class="[date == 4 ? '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 != 'ROLE_BANZHUREN'"
          >阶段问答报表</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="top">
                <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="top">
                <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>
    <set-answer :diaVisible="dialogVisible" :questionList="form.questionList" :paperId="form.id" @saveSuccess="handleSuccess" @cancel="cancel"/>
  </div>
</template>
<script>
import { formatDate, deepClone, checkAnswer } from "utils";
export default {
  data() {
    return {
      role: "",
      loading: false,
      dialogVisible:false,
      form: { questionList: [] },
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        classId: "",
        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: 3,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 4,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 5,
                  questionType: 4,
                  score: 1,
                  partScore: 0,
                  selectNum: 0,
                  answerOptions: [],
                  correctAnswer: "1",
                },
              ],
            },
            {
              questionTitle: "f",
              score: 1,
              subQuestions: [
                {
                  questionIndex: 6,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D"],
                  correctAnswer: "B",
                },
                {
                  questionIndex: 7,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "A",
                },
                {
                  questionIndex: 8,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 9,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: ["A", "B", "C", "D", "E", "F"],
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 10,
                  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.find(item=>item.roleName ==  this.$store.getters.info.showRoleName)?.role;
    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,
        },
      });
    },
    
   setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      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 day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 1 && aMonth < 4) {
            aMonth = "01";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "04";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "07";
          } else {
            aMonth = "10";
          }
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "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 = "";
        }
      }
    },
    edit(item) {
      this.form = deepClone(item);
      this.dialogVisible = true;
    },
    cancel(){
      this.dialogVisible = false
    },
    handleSuccess(){
      this.dialogVisible = false
      this._QueryData()
    },
    async changClazz() {
      await this._QuerySubjectList();
      await this.setDate(1);
    },
    async _QueryClassList() {
      const { data, status, info } = await this.$request.fetchClassList();
      if (status === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: item.classId,
            label: item.className,
          };
        });
        this.query.classId = this.classList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QuerySubjectList() {
      const { data, status, info } = await this.$request.fetchSubjectList(
        {classId: this.query.classId,}
      );
      if (status === 0) {
        this.subjectList = data.subjectNames?.map((item) => {
          return {
            value: item,
            label: item,
          };
        })||[];
        if (this.role == "ROLE_BANZHUREN") {
          this.subjectList.unshift({
            value: "",
            label: "全部",
          });
          this.query.subjectId = [this.subjectList[0]?.value];
        }else{
          this.query.subjectId = this.subjectList[0]?.value;
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      //多课时对比
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      const { data, status, info } = await this.$request.fetchQuizList({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
      } else {
        this.$message.error(info);
      }
    },
  },
};
</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;
  }
}
.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>