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="diaLogBox = true"
            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
              prop="count"

              label="测验人数/班级人数"
              align="center"
            ></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="720px"
          @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="1"></el-option>
                  <el-option label="ABCD" :value="2"></el-option>
                  <el-option label="自定义" :value="3"></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="item2"><i>*</i>等级最高</span>
                  <span class="item2"><i>*</i>等级最低</span>
                  <span class="item1"></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="item2">
                    <el-input
                      class="score-ipt"
                      type="number"
                      v-model="item[1]"
                      :min="item[2]"
                      :max="index == 0 ? 150 : fromData.levels[index - 1][2]"

                      @keydown.native="keydownRange($event)"

                    ></el-input>
                    {{ fromData.levelType == 1 ? "%" : "分" }} -
                  </p>
                  <p class="item2">
                    <el-input
                      class="score-ipt"
                      type="number"
                      v-model="item[2]"
                      :min="0"
                      :max="item[1]"

                      @keydown.native="keydownRange($event)"

                    ></el-input>
                    {{ fromData.levelType == 1 ? "%" : "分" }}
                  </p>
                  <p class="item1">
                    <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: 1,
          levelType: 0,
          levels: [
            ["优秀", 100, 90],
            ["良好", 89.9, 70],
            ["合格", 69.9, 60],
            ["不合格", 59.9, 0],
          ],
        },

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

        tableMaxHeight: 600,
        tableData: [],
        tableData2: [],
      };
    },
    created() {
      this.ids = this.$route.query.ids;

      this._QueryDefaultLevels();

      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;
      },
      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 = 1;
          this.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];
        }

      },
      changeType(val) {
        if (val == 1) {

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

        } else if (val == 2) {
          this.fromData.levels = [
            ["A", 100, 90],
            ["B", 89.9, 70],
            ["C", 69.9, 60],
            ["D", 59.9, 0],
          ];
        } else {
          this.fromData.levels = [
            ["", 100, 90],
            ["", 89.9, 70],
            ["", 69.9, 60],
            ["", 59.9, 0],
          ];
        }
      },

      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
        }
        this.tableData = [];
        this.tableData2 = [];

        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.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];
        } else {
          this.$message.error(info);
        }
      },

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

        if (status === 0) {
          this.title = data.title;
          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;
        const data = await this.$request.exportExamMultiReport({

          examIds: this.ids,
          levels: this.fromData.levels,
          levelType: this.fromData.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: 50px;
      }
    }
    .page-content {
      padding: 20px 20px 0;
    }
  }
  .tab-box {
    width: 800px;
    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;
      .item1 {
        padding-left: 10px;
        width: 15%;
      }
      .item2 {
        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>