baoman / Ezquiz_Platform

  <template>
    <div ref="main" class="page-container">
      <back-box>
        <template slot="title">

          <span>多班_{{ subjectNames }}_{{ title }}_测练成绩对比分析</span>

        </template>
      </back-box>
      <div class="page-content">
        <div class="content-header">
          <div class="tab-box">

            <span v-for="(item, index) in tabList" :key="item" class="tab-item" :class="type == index ? 'active' : ''"
              @click="setType(index)">{{ item }}</span>

          </div>

          <el-button class="setMinScore" @click="openDia" round size="small">对比成绩等级设置</el-button>

        </div>
        <div id="print-content" class="table-box" v-loading="loading">

          <el-table :max-height="tableMaxHeight" v-show="type == 0" :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
            <el-table-column prop="className" label="班级" align="center" fixed></el-table-column>

            <el-table-column label="测验人数/班级人数" align="center" width="84">
              <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.count.split('/')">
                  {{ item }}{{ index == 0 ? "/" : "" }}
                </p>
              </template>
            </el-table-column>

            <el-table-column prop="percent" label="参与度" align="center"></el-table-column>
            <el-table-column prop="avg" label="班平均分" align="center"></el-table-column>
            <el-table-column prop="max" label="班最高分" sortable align="center"></el-table-column>
            <el-table-column prop="min" label="班最低分" sortable align="center"></el-table-column>
  
            <el-table-column v-for="(item, index) in defaultLevels.levels" :label="item[0] + '数(率)'"
              align="center"><template slot-scope="scoped">

                <p class="p1">{{ scoped.row.levels[index].people }}</p>
                <p class="p1">({{ scoped.row.levels[index].percent }})</p>

              </template></el-table-column>

          </el-table>

          <el-table v-show="type == 1" :max-height="tableMaxHeight" :data="tableData2" border style="width: 100%">
            <el-table-column prop="rank" label="排名" sortable align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="className" label="班级" align="center"></el-table-column>
            <el-table-column prop="score" label="总分" sortable align="center"></el-table-column>
            <el-table-column prop="levelName" label="成绩等级" align="center"></el-table-column>

          </el-table>
        </div>
        <div class="down">
          <div>

            <el-button v-loading="exportLoading" @click="exportData" 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>

          </div>
        </div>
  

        <el-dialog :close-on-click-modal="false" title="等级设置" :visible.sync="diaLogBox" width="800px" @closed="closeDia">

          <el-form class="use-form">
            <el-form-item class="use-form-item-box">
              <el-form-item label="等级名称：" class="use-form-item">

                <el-select size="small" v-model="fromData.type" @change="changeType">

                  <el-option label="优良合格不合格" :value="0"></el-option>
                  <el-option label="ABCD" :value="1"></el-option>
                  <el-option label="自定义" :value="2"></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="等级设置模式：" class="use-form-item">

                <el-select size="small" v-model="fromData.levelType">
                  <el-option label="按分数比例" :value="0"></el-option>
                  <el-option label="按已考人数比例" :value="1"></el-option>

                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <div class="dia-tab-box">
                <p class="dia-tab-tit">
                  <span class="item1">编号</span>
                  <span class="item2"><i>*</i>等级名称</span>

                  <span class="item3"><i>*</i>等级最高</span>
                  <span class="item3"><i>*</i>等级最低</span>
                  <span class="item"></span>

                </p>

                <div class="dia-tab-item" v-for="(item, index) in fromData.levels">

                  <span class="item1">{{ index + 1 }}</span>
                  <p class="item2">

                    <el-input class="score-ipt" v-model="item[0]" :maxlength="12"
                      @keydown.native="keydownRange($event)"></el-input>

                  </p>

                  <p class="item3">

                    <el-input class="score-ipt" type="number" v-model="item[1]" :min="item[2]"

                      :max="index == 0 ? 100 : fromData.levels[index - 1][2]"

                      @keydown.native="keydownRange($event)"></el-input>

                    %
                    <template v-if="fromData.levelType == 0">

                      ({{ index != 0 ? "不含" : ""

                      }}{{

    Number(((item[1] / 100) * examPaperScore).toFixed(1))
  }}分)

                    </template>

                    <template v-else>{{ index != 0 ? "不含" : "" }}</template>

                  </p>

                  <p>~</p>
                  <p class="item3">

                    <el-input class="score-ipt" type="number" v-model="item[2]" :min="0" :max="item[1]"
                      @keydown.native="keydownRange($event)"></el-input>

                    %
                    <template v-if="fromData.levelType == 0">

                      ({{

                        Number(((item[2] / 100) * examPaperScore).toFixed(1))
                      }}分)
                    </template>

                  </p>

                  <p class="item">

                    <el-link type="danger" :underline="false" @click="fromData.levels.splice(index, 1)">删除</el-link>

                  </p>
                </div>
                <div class="add">
                  <p @click="fromData.levels.push(['', '', ''])">

                    <el-button size="mini" icon="el-icon-plus" circle type="primary"></el-button>添加一行

                  </p>
                </div>
              </div>
            </el-form-item>
          </el-form>
  
          <div class="dialog-footer" slot="footer" align="center">
            <el-button type="danger" @click="savefrom">保存</el-button>
            <el-button @click="diaLogBox = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { downloadFile, tablePrint } from "@/utils";
  export default {
    data() {
      return {
        ids: "",
        title: "",
        subjectNames: "",
        tabList: ["班级对比情况", "学生成绩排名"],
        type: 0,
        loading: false,

        exportLoading: false,

        diaLogBox: false,
        fromData: {

          type: 0,

          levelType: 0,
          levels: [
            ["优秀", 100, 90],
            ["良好", 89.9, 70],
            ["合格", 69.9, 60],
            ["不合格", 59.9, 0],
          ],
        },

        defaultLevels: {
          levelType: 0,
          levels: [],
        },

        tableMaxHeight: 600,
        tableData: [],
        tableData2: [],

        examPaperScore: 100, //卷面最高分

      };
    },

    async created() {

      this.ids = this.$route.query.ids;

      this.examPaperScore = Number(this.$route.query.examPaperScore || 100);

      await this._QueryDefaultLevels();

      await this._QueryData();

    },

    destroyed() {
      sessionStorage.setItem("levelFromData", "");
    },

    methods: {

      // 禁止输入负数
      keydownRange(event) {
        if (event.key == "-" || event.key == "e") {
          event.returnValue = "";
        }
      },

      print() {

        tablePrint(
          "print-content",
          `多班_${this.subjectNames}_${this.title}_测练成绩对比分析`
        );

      },
      setType(type) {
        console.log(this.$refs.main.offsetHeight - 50);
        this.tableMaxHeight = this.$refs.main.offsetHeight;
        this.type = type;
      },

      openDia() {
        this.diaLogBox = true;
      },

      closeDia() {

        let levelFromData = sessionStorage.getItem("levelFromData");
        if (levelFromData) {
          levelFromData = JSON.parse(levelFromData);
          this.fromData.type = levelFromData.type;
          this.fromData.levelType = levelFromData.levelType;
          this.fromData.levels = [...levelFromData.levels];
        } else {

          this.fromData.type = 0;

          this.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];
        }

      },
      changeType(val) {

        if (val == this.defaultLevels.type) {

          this.fromData.levels = [...this.defaultLevels.levels];

        } else {

          this.fromData.levels = this.fromData.levels.splice(0, 4);
          if (val == 0) {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              let arrTxt = ["优秀", "良好", "合格", "不合格"];
              return [arrTxt[index], item[1], item[2]];
            });
          } else if (val == 1) {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              let arrTxt = ["A", "B", "C", "D"];
              return [arrTxt[index], item[1], item[2]];
            });
          } else {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              return ["", item[1], item[2]];
            });
          }

        }
      },

      savefrom() {

        for (let i = 0; i < this.fromData.levels.length; i++) {
          if (this.fromData.levels[i].includes("")) {
            this.$message.warning("请补全编号" + (i + 1) + "设置信息！");
            return;
          }
        }

        if (this.fromData.levels.length == 0) {
          this.$message.warning("请添加等级设置！");

          return;
        }
        let nums = [];
        let ERR_OK = false;
        this.fromData.levels.map((item) => {
          nums.push(Number(item[1]));
          nums.push(Number(item[2]));
        });
        for (let i = 0; i < nums.length; i++) {

          if (nums[i + 1] && nums[i + 1] > nums[i]) {

            ERR_OK = true;
            this.$message.warning("高等级比例不能低于低等级比例！请检查");
            break;
          }

        }

        if (ERR_OK) return;

        this.tableData = [];
        this.tableData2 = [];

        this.defaultLevels.type = this.fromData.type;

        this.defaultLevels.levelType = this.fromData.levelType;
        this.defaultLevels.levels = [...this.fromData.levels];
        sessionStorage.setItem("levelFromData", JSON.stringify(this.fromData));
        this.diaLogBox = false;

        this._QueryData({
          levelType: this.fromData.levelType,
          levels: this.fromData.levels,
        });
      },
  

      async _QueryDefaultLevels() {
        const { data, info, status } = await this.$request.defaultLevels();
        if (status === 0) {
          this.defaultLevels = { ...data } || {

            levelType: 0,
            levels: [
              ["优秀", 100, 90],
              ["良好", 89.9, 70],
              ["合格", 69.9, 60],
              ["不合格", 59.9, 0],
            ],
          };

          this.defaultLevels.type = 0

          this.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];

          sessionStorage.setItem(
            "levelFromData",
            JSON.stringify(this.defaultLevels)
          );

        } else {
          this.$message.error(info);
        }
      },

      async _QueryData() {

        let query = {};

        let paramObj = JSON.parse(JSON.stringify(this.fromData))
        if (paramObj.levelType == 0) {
          paramObj.levels = paramObj.levels.map((item) => {
            item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
            item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
            return item;
          });

        }

        query = { ...paramObj };

        const { data, info, status } = await this.$request.examMultiClassReport({
          examIds: this.ids,
          ...query,
        });

        if (status === 0) {
          this.title = data.title;

          this.examPaperScore = data.examPaperScore || 100;

          this.subjectNames = data.subjectName;
          this.tableData = data.classes || [];

          this.tableData2 =
            data.students.map((item) => {
              item.score = Number(item.score);
              return item;
            }) || [];

        } else {
          this.$message.error(info);
        }
      },
  
      //导出
      async exportData() {
        if (this.exportLoading == true) return;
        this.exportLoading = true;

        let params = { ...this.fromData };
        if (params.levelType == 0) {
          params.levels = params.levels.map((item) => {

            item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
            item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
            return item;
          });
        }

        const data = await this.$request.exportExamMultiReport({

          examIds: this.ids,

          levels: params.levels,
          levelType: params.levelType,

        });
        this.exportLoading = false;
        if (data) {
          let blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });

          downloadFile(
            `多班_${this.subjectNames}_${this.title}_测练成绩对比分析`,
            blob
          );

        } else {
          this.$message.error("下载失败");
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    position: relative;
    height: 100%;

    .table-box {
      min-height: 100%;
    }

    &.active {
      overflow: hidden;
    }

    .content-header {
      width: 100%;
      position: relative;

      .setMinScore {
        position: absolute;
        bottom: 0;

        right: 0;

      }
    }

    .page-content {
      padding: 20px 20px 0;
    }
  }

  .tab-box {

    width: 400px;

    margin: 0 auto 12px;
    background: #f8f8f8;
    border-radius: 20px;
    display: flex;
    user-select: none;

    .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;
      }
    }
  }

  .down {
    padding-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .use-form {
    padding: 0 12px;

    .use-form-item-box {
      :deep(.el-form-item__content) {
        display: flex;
      }

      .use-form-item {
        width: 40%;
        margin-right: 20px;
      }
    }
  }

  .dia-tab-box {

    .dia-tab-tit,
    .dia-tab-item {
      margin-bottom: 10px;

      i {
        color: #f30;
        padding-right: 5px;
      }

      display: flex;

      .item {
        width: 40px;
      }

      .item1 {
        padding-left: 10px;

        width: 10%;

      }

      .item2 {

        width: 18%;
      }

      .item3 {
        padding-left: 12px;

        flex: 1;
      }

      .score-ipt {
        width: 100px;
      }
    }

    .dia-tab-tit {
      background: rgba(243, 243, 243, 1);
    }

    .add {
      display: flex;
      justify-content: center;
      margin: 0 auto;

      p {
        cursor: pointer;
      }

      .el-button {
        margin-right: 6px;
      }
    }
  }

  .p1 {
    line-height: 18px;

  }

  </style>