train-director/src/views/classes/completion-detail.vue

<template>
  <div id="detail">
    <detail-frame :title="pageTitle" :returns="toReturns">
      <el-card :header="quest.name">
        <el-tabs v-model="tabs" :stretch="true" type="card">
          <el-tab-pane label="图表分析" name="chart">
            <el-row
              v-for="(quest, qi) in quest.question"
              :key="qi"
              type="flex"
              align="middle"
              justify="center"
              style="text-align:center;border-bottom: 1px solid #EBEEF5;"
            >
              <el-col :span="24">
                <charts :data="quest" :nodata="nodata"></charts>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="具体数据" name="data">
            <el-row type="flex" align="middle" justify="end" style="margin-bottom:20px"  v-if="cdata.length > 0">
              <el-col :span="2">
                <el-button size="mini" type="primary" @click="toExcel">导出数据</el-button>
              </el-col>
            </el-row>
            <el-collapse v-model="collapse" accordion>
              <el-collapse-item v-for="(data, qi) in cdata" :key="qi" :title="data.studentname" :name="`${qi}`">
                <el-row type="flex" align="middle" justify="center" style="border-bottom: 1px solid #EBEEF5;">
                  <el-col :span="24">
                    <reports :report="data"></reports>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </detail-frame>
  </div>
</template>

<script>
//组件全部转移到frame中,和班主任端共用
import _ from 'lodash';
import charts from '@frame/parts/statistics/quest-chart.vue';
import reports from '@frame/parts/statistics/report.vue';
import detailFrame from '@frame/layout/admin/detail-frame';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
const { mapActions: questionanswer } = createNamespacedHelpers('questionanswer');

export default {
  name: 'detail',
  props: {},
  components: { detailFrame, charts, reports },
  data: function() {
    return {
      mylb: null,
      tabs: 'chart',
      collapse: '',
      quest: {},
      cdata: [], //具体数据
      nodata: false,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...questionnaire(['fetch']),
    ...questionanswer(['query']),
    async search() {
      let res = await this.fetch(this.querys.questionnaireid);
      if (!this.$checkRes(res)) return;
      let ansres = await this.query(this.querys); //{ questionnaireid: this.id, termid: this.termid, batchid: this.batchid, classid: this.classid }
      if (this.$checkRes(ansres)) {
        if (_.get(ansres.data, 'length', 0) <= 0) {
          this.$set(this, `nodata`, true);
        }
        let data = _.cloneDeep(_.get(res, 'data'));
        let quests = _.cloneDeep(_.get(res.data, `question`, []));
        let allAnswer = _.cloneDeep(ansres.data);
        let naa = _.flatten(allAnswer.map(i => i.answers)).map(i => {
          i.answer = JSON.parse(i.answer);
          return i;
        });
        //统计
        let nq = this.getStatistics(naa, quests);
        let sta = _.cloneDeep(data);
        sta.question = nq;
        this.$set(this, `quest`, sta);
        //具体数据
        let concreteData = this.getConcreteData(quests, allAnswer);
        this.$set(this, `cdata`, concreteData);
      }
    },
    //获取图表分析部分
    getStatistics(answer, quests) {
      let allAnswer = _.cloneDeep(answer);
      let questList = _.cloneDeep(quests);
      let newquest = questList.map(i => {
        //单选题
        if (i.type == 0) i = this.dealRadio(i, allAnswer);

        //多选题
        if (i.type == 1) i = this.dealCheckBox(i, allAnswer);
        //简答,应该不需要了

        return i;
      });
      return newquest;
    },
    dealRadio(quest, answers) {
      let rl = answers.filter(f => f.questionid == quest._id);
      let ga = _.groupBy(rl, 'answer');
      quest.option.map(i => {
        let r = _.get(ga[i.opname], 'length', 0);
        i.value = r || 0;
        return i;
      });
      return quest;
    },
    dealCheckBox(quest, answers) {
      let rl = answers.filter(f => f.questionid == quest._id);
      let mid = _.flatten(rl.map(i => i.answer));
      quest.option.map(i => {
        let r = mid.filter(f => f == i.opname);
        i.value = r.length || 0;
        return i;
      });
      return quest;
    },
    //具体数据部分
    getConcreteData(quests, answers) {
      let dquests = _.cloneDeep(quests);
      let danswers = _.cloneDeep(answers);
      danswers.map(i => {
        i.answers = i.answers.map(answer => {
          let r = quests.find(f => f._id == answer.questionid);
          if (r) {
            answer.topic = r.topic;
            answer.type = r.type;
          }
          return answer;
        });
        return i;
      });
      return danswers;
    },
    toReturns() {
      window.history.go(-1);
    },
    //导出excel数据
    toExcel() {
      const { export_json_to_excel } = require('@frame/excel/Export2Excel');
      let duplicate = _.cloneDeep(this.cdata);
      let data = [];
      for (const dup of duplicate) {
        const elm = { studentname: dup.studentname };
        for (const answer of dup.answers) {
          elm[answer.questionid] = answer.answer;
        }
        data.push(elm);
      }
      let dquest = _.cloneDeep(this.quest.question);
      let qarr = dquest.map(i => ({ questionid: i._id, topic: i.topic }));
      let tHeader = qarr.map(i => i.topic);
      tHeader.unshift('学生姓名');
      let filterVal = qarr.map(i => i.questionid);
      filterVal.unshift('studentname');
      data = data.map(v => filterVal.map(j => v[j]));
      export_json_to_excel(tHeader, data, this.quest.name);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
    querys() {
      return this.$route.query;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>