src/views/standard/test/contrast.vue

<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">
                    ({{ index < fromData.levels.length - 1 ? "不含" : ""
                    }}{{
                      Number(((item[2] / 100) * examPaperScore).toFixed(1))
                    }}分)
                  </template>
                  <template v-else>{{
                    index < fromData.levels.length - 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;
    await this._QueryData();
    await this._QueryDefaultLevels();
  },
  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() {
      console.log(this.fromData);
      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++) {
        console.log(nums[i + 1] && nums[i + 1] >= nums[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 } || {
          type: 0,
          levelType: 0,
          levels: [
            ["优秀", 100, 90],
            ["良好", 89.9, 70],
            ["合格", 69.9, 60],
            ["不合格", 59.9, 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(params) {
      let query = {};
      if (params) {
        if (params.levelType == 0) {
          params.levels = params.levels.map((item) => {
            console.log(item);
            item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
            item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
            return item;
          });
        }
        query = { ...params };
      }
      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) => {
          console.log(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>