src/views/basic/ask/analysis.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>{{
          types == 1
            ? "单课分析"
            : types == 2
              ? `${className}-${subjectNames[0]}汇总分析`
              : `${className}-多科汇总分析`
        }}</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="tab-box">
        <span class="tab-item" v-for="(item, index) in tabList" :key="index" :class="type == item.value ? 'active' : ''"
          @click="setType(item.value)">{{ item.name }}</span>
      </div>
      <div v-loading="loading">
        <div id="print-content">
          <!-- 学生答题情况 -->
          <Detail v-if="type == 1" :types="types" :detail="detail" :id="id" />
          <!-- 学生答题情况 -->
          <Example v-if="type == 1" :types="types" :tableData="tableData" />
          <!-- 学生问答 -->
          <AnswerQustion v-if="type == 2" :types="types" :tableData="tableData" :subjectNames="subjectNames" />
          <!-- 学生互动表现 -->
          <Interact v-if="type == 3" :types="types" :tableData="tableData" />
          <!-- 签到明细 -->
          <Report v-if="type == 4" :tableData="tableData" />
        </div>
        <div class="pagination-box" v-show="type == 1">
          <el-pagination small="" layout="total,prev, pager, next" :hide-on-single-page="true" :total="total"
            @current-change="changePage" :current-page="page" :page-size="size">
          </el-pagination>
        </div>
        <p class="down">
          <el-button v-if="types == 1" @click="exportData" type="primary" plain round
            icon="fa fa-cloud-download">导出报表</el-button>
          <el-button v-else @click="openDown" type="primary" plain round icon="fa fa-cloud-download">导出报表</el-button>
          <el-button v-if="!this.$store.getters.code" @click="print" type="primary" plain round
            icon="el-icon-printer">打印</el-button>
        </p>
      </div>
      <ExportDia :exportStudent="exportStudent" :diaShow="diaShow" @cancel="cancel" @exportData="exportData"
        :type="types == 3 ? '雷达图' : '折线图'" />
    </div>
  </div>
</template>
<script>
import { downloadFile, tablePrint } from "@/utils";
import Detail from "./components/detail.vue";
import Example from "./components/example.vue";
import AnswerQustion from "./components/answerQustion.vue";
import Interact from "./components/interact.vue";
import Report from "./components/report.vue";
export default {
  components: {
    Detail,
    Example,
    AnswerQustion,
    Interact,
    Report,
  },
  data() {
    return {
      role: "",
      loading: false,
      classIds: [],
      className: "",
      subjectNames: "",
      id: [],
      type: 1,
      tabList: [],
      detail: {},
      tableData: [],
      page: 1,
      size: 20,
      total: 0,
      status: 0,
      //导出相关
      diaShow: false,
      exportStudent: [],
    };
  },
  created() {
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.types = Number(this.$route.query.types);
    // this.className = this.$route.query.className;
    const queryData = JSON.parse(this.$route.query.params);
    this.classIds = this.$route.query.classIds;
    this.subjectNames = this.$route.query.subjectNames.split(",");
    if (this.types == 1) {
      this.tabList = [
        { name: "答题表现", value: 1 },
        { name: "学生问答表现", value: 2 },
        { name: "学生互动表现", value: 3 },
        { name: "签到明细", value: 4 },
      ];
    } else if (this.types == 2) {
      this.tabList = [
        { name: "答题表现", value: 1 },
        { name: "学生问答表现", value: 2 },
        { name: "学生互动表现", value: 3 },
      ];
    } else if (this.types == 3) {
      this.tabList = [
        { name: "学生问答表现", value: 2 },
        { name: "学生互动表现", value: 3 },
      ];
    }
    this.type = this.tabList[0].value;
    this.id = JSON.parse(this.$route.query.id);
    this.status = this.$route.query.status ? this.$route.query.status : 0;
    this._QueryData();
    this.types != 1 ? this._QueryDataQuestionRank() : "";
    // this.types != 3 ? this.periodDetail() : "";
    this.periodDetail();
  },
  methods: {
    print() {
      let title = this.detail.title || this.subjectNames.join();
      let name = "";
      this.tabList.map((item) => {
        if (item.value == this.type) {
          name = item.name;
        }
      });
      if (this.types == 2) {
        title = this.subjectNames.join();
      }
      tablePrint({
        id: "print-content",
        title: this.className + title + "_" + name
      });
    },
    setType(type) {
      this.type = type;
      this.page = 1;
      this._QueryData();
    },
    setDuration(times) {
      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 && s != 0) {
          aTime = `${s}秒`;
        } else if (m != 0 && s != 0) {
          aTime = `${m}分${s}秒`;
        }
      }
      return aTime;
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async periodDetail() {
      const periodDetail =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPeriodDetail
          : this.$request.periodDetail;
      let { data, info, status } = await periodDetail({
        periodIds: this.id,
      });
      if (status == 0) {
        this.className = data.className || "";
        this.detail = { ...data };
        let duration = parseInt(this.detail.duration / 60) + "分";
        let durations = parseInt(this.detail.duration % 60);
        durations = durations ? durations + "秒" : "";
        this.detail.duration = this.detail.duration ? duration + durations : 0;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      let queryData;
      let query = {};
      if (this.role == "ROLE_PERSONAL") {
        if (this.types == 1) {
          query.page = this.page;
          query.size = this.size;
          queryData =
            this.type == 1
              ? this.$request.pPeriodQuestionReport
              : this.$request.pPeriodStudentReport;
        } else if (this.types == 2) {
          queryData =
            this.type == 1
              ? this.$request.pPeriodQuestionReport
              : this.type == 2
                ? this.$request.phaseAnswerReport
                : this.$request.phaseInteractiveReport;
        } else if (this.types == 3) {
          queryData =
            this.type == 2
              ? this.$request.pPhaseAnswerReport
              : this.$request.pPhaseInteractiveReport;
        }
      } else {
        if (this.types == 1) {
          query.page = this.page;
          query.size = this.size;
          queryData =
            this.type == 1
              ? this.$request.periodQuestionReport
              : this.$request.periodStudentReport;
        } else if (this.types == 2) {
          queryData =
            this.type == 1
              ? this.$request.periodQuestionReport
              : this.type == 2
                ? this.$request.phaseAnswerReport
                : this.$request.phaseInteractiveReport;
        } else if (this.types == 3) {
          queryData =
            this.type == 2
              ? this.$request.cTPhaseAnswerReport
              : this.$request.cTPhaseInteractiveReport;
        }
      }
      if (this.types == 1) {
        query.periodId = this.id[0];
        query.type = this.type - 1;
      } else {
        query.periodIds = this.id;
        query.classIds = this.classIds;
        if (this.types == 3) {
          query.subjectNames = this.subjectNames;
        }
      }
      this.loading = true;
      let { data, info, status } = await queryData({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = data?.list || [];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDataQuestionRank() {
      let queryData;
      let query = {};
      query.periodIds = this.id;
      if (this.types == 2) {
        queryData = this.$request.phaseAnswerReport;
      } else if (this.types == 3) {
        queryData = this.$request.cTPhaseAnswerReport;
      }
      if (this.types != 1) {
        query.classIds = this.classIds;
      }
      this.loading = true;
      let { data, info, status } = await queryData({
        onlyRate: true,
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        this.exportStudent = (data?.list && [...data?.list]) || [];
      } else {
        this.$message.error(info);
      }
    },
    //导出
    openDown() {
      this.diaShow = true;
    },
    cancel() {
      this.diaShow = false;
    },
    async exportData(arr) {
      if (this.exportLoading == true) return;
      this.exportLoading = true;
      let studentIds = arr;
      let query = {};
      if (studentIds != null) {
        if (studentIds.length > 0) {
          query.studentIds = studentIds;
        } else {
          query.studentIds = [];
        }
      }
      let exportPeriodReport = "";
      if (this.types == 1) {
        query.periodId = this.id[0];
        exportPeriodReport =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExportPeriodReport
            : this.$request.exportPeriodReport;
      } else if (this.types == 2) {
        query.periodIds = this.id;
        query.classIds = this.classIds;
        exportPeriodReport =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExportPhaseAnswerReport
            : this.$request.exportPhaseAnswerReport;
      } else {
        query.periodIds = this.id;
        query.classIds = this.classIds;
        exportPeriodReport = this.$request.cTExportPhaseAnswerReport;
      }
      const data = await exportPeriodReport({
        ...query,
      });
      this.exportLoading = false;
      if (data) {
        this.cancel();
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        let name =
          this.types == 1
            ? "随堂问-单课时报表.xlsx"
            : this.types == 2
              ? `随堂问-${this.className}-${this.subjectNames[0]}汇总分析报表.xlsx`
              : `随堂问-${this.className}-多科汇总分析报表.xlsx`;
        downloadFile(this.status ? "随堂问-已归档单课时报表.xlsx" : name, blob);
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.down {
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.red {
  color: #f30;
}
.page-content {
  padding: 20px 20px 0;
}
.tab-box {
  width: 800px;
  margin: 0 auto 12px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  .tab-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    &.active {
      background: #667ffd;
      color: #fff;
    }
  }
}
:deep(.el-dialog__body) {
  padding-top: 0;
}
.el-dialog {
  .down-item {
    font-size: 15px;
    margin-bottom: 10px;
    .tit {
      line-height: 18px;
      padding: 10px 0;
    }
  }
  .export-tit {
    text-align: center;
    font-size: 16px;
    padding-bottom: 10px;
  }
}
.dialog-footer {
  text-align: center;
}
</style>