web/src/views/exam/exam-plan-kj-hz-solfege.vue

<template>
  <div class="exam_plan_kj_hz_solfege pg-main">
    <div class="pg-title">
      <span>结果汇总进度(视唱机考)</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="kj_progress_queryform_one" :label-width="80" inline>
        <Row>
          <Col span="8">
            <FormItem label="考试任务" style="width: 100%">
              <Select @on-change="selectExam" v-model="query.examCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.examCodeList"
                  :value="item.examCode"
                  :key="item.examCode"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="考点" style="width: 100%">
              <Select @on-change="selectPlace" v-model="query.placeCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.placeCodeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="考场" style="width: 100%">
              <Select v-model="query.roomCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.roomCodeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Form ref="kj_progress_queryform_two" :label-width="80" inline>
        <FormItem :label-width="20">
          <Row>
            <Col span="5">
              <Button @click="doQuery" type="primary" icon="md-search"
                >查询</Button
              >
            </Col>
            <Col span="6">
              <Upload
                :before-upload="beforeBatchImport"
                action=""
                style="display: inline-block; margin-left: 10px"
              >
                <Button type="primary" icon="md-folder">本地导入</Button>
              </Upload>
            </Col>
            <Col span="8">
              <Button
                style="margin-left: 30px"
                @click="doExport"
                type="primary"
                icon="md-document"
                >OW导出(无答案)</Button
              >
            </Col>
          </Row>
        </FormItem>
      </Form>
      <Row v-for="(item, index) in batchFileList" :key="index">
        <Col span="22">
          <Alert type="success"
            >文件：{{ item.name }}上传进度：
            <Progress :percent="item.percent"></Progress>
          </Alert>
        </Col>
      </Row>
    </div>
    <div class="pg-body">
      <Table
        ref="kj_progress_table"
        :columns="columns"
        :data="list"
        :stripe="true"
        :disabled-hover="true"
      ></Table>
      <Page
        placement="top"
        :current="query.pageNo"
        :loading="true"
        :page-size="query.pageSize"
        :total="query.totalElements"
        show-total
        show-sizer
        @on-change="changePageNo"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
  </div>
</template>

<script>
import { axios, baseUrl } from "../../libs/http";
export default {
  name: "exam_plan_kj_hz_solfege",
  data() {
    return {
      formats: ["zip"],
      batchFileList: [],
      xldata: {
        examCodeList: [],
        placeCodeList: [],
        roomCodeList: [],
      },
      query: {
        pageNo: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        examCode: "",
        placeCode: "",
        roomCode: "",
      },
      list: [],
      columns: [
        {
          type: "index_seq",
          title: "序号",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              (this.query.pageNo - 1) * this.query.pageSize + params.index + 1
            );
          },
        },
        {
          title: "考点",
          key: "placeName",
          minWidth: 180,
          align: "center",
        },
        {
          title: "考场",
          key: "roomName",
          minWidth: 180,
          align: "center",
        },
        {
          title: "应考人数",
          key: "total",
          width: 120,
          align: "center",
        },
        {
          title: "已上传人数",
          key: "uploadedCount",
          minWidth: 120,
          align: "center",
        },
        {
          title: "已上传人数占比",
          key: "uploadedPercent",
          minWidth: 140,
          align: "center",
        },
        {
          title: "当前汇总人数",
          key: "answeredCount",
          minWidth: 120,
          align: "center",
        },
        {
          title: "汇总人数占比",
          minWidth: 120,
          key: "answeredPercent",
          align: "center",
        },
      ],
    };
  },
  methods: {
    doExport() {
      if (!this.query.examCode) {
        this.$Notice.error({
          title: "系统提示",
          desc: "<p>请先选择一个考试任务</p>",
        });
        return false;
      }
      let url =
        baseUrl +
        "/system/kj/hz/owexport?examCode=" +
        this.query.examCode +
        "&A-P-T_v_auth=" +
        localStorage.encryptToken;
      axios({
        method: "post",
        url: url, // 请求地址
        data: {}, // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
      }).then((res) => {
        // 处理返回的文件流
        let content = res.data;
        let blob = new Blob([content]);
        let fileName = "阅卷数据.zip";
        if ("download" in document.createElement("a")) {
          let elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    // hideProgress(index) {
    //   let $tr = $(".ivu-table-row").eq(index);
    //   $tr.find(".ivu-progress").hide();
    //   $tr.find(".ivu-progress-bg").width("0%");
    //   $tr.find(".ivu-progress-text-inner").html("0%");
    // },
    // updateProgress(index, pro) {
    //   if (pro > 0) {
    //     let $tr = $(".ivu-table-row").eq(index);
    //     $tr.find(".ivu-progress").show();
    //     $tr.find(".ivu-progress-bg").width(pro + "%");
    //     $tr.find(".ivu-progress-text-inner").html(pro + "%");
    //   }
    // },
    formatFileSize(size) {
      let fileSize = size != undefined && size != null ? size : 0;
      if (size > 1024 * 1024)
        fileSize =
          (Math.round((size * 100) / (1024 * 1024)) / 100).toString() + "MB";
      else fileSize = (Math.round((size * 100) / 1024) / 100).toString() + "KB";
      return fileSize;
    },
    beforeBatchImport(file) {
      if (!this.query.examCode) {
        this.$Notice.error({
          title: "系统提示",
          desc: "<p>请先选择一个考试任务</p>",
        });
        return false;
      }
      if (file.name.indexOf(".qm") == -1) {
        this.$Notice.error({
          title: "系统消息",
          desc: "<p>上传数据包格式错误,不是qm格式</p>",
        });
        return false;
      }
      if (file.size > 1073741824) {
        this.$Notice.error({
          title: "系统消息",
          desc: "<p>文件大小超过了系统限制的文件大小1G</p>",
        });
        return false;
      }
      //上传操作
      file.percent = 0;
      this.batchFileList.push(file);
      let fd = new FormData();
      fd.append("file", file);
      let xhr = new XMLHttpRequest();
      xhr.upload.addEventListener(
        "progress",
        (evt) => {
          if (evt.lengthComputable) {
            let percentComplete = Math.round((evt.loaded * 100) / evt.total);
            file.percent = percentComplete;
          }
        },
        false
      );
      xhr.addEventListener(
        "error",
        (evt) => {
          let index = this.batchFileList.indexOf(file);
          if (index > -1) {
            this.batchFileList.splice(index, 1);
          }
          this.$store.commit("closeloading");
          this.$Notice.error({
            title: "系统提示",
            desc: "<p>" + evt + "</p>",
          });
        },
        false
      );
      xhr.addEventListener(
        "load",
        (evt) => {
          let index = this.batchFileList.indexOf(file);
          if (index > -1) {
            this.batchFileList.splice(index, 1);
          }
          this.$store.commit("closeloading");
          let statusCode = evt.target.status;
          if (statusCode == 200) {
            let data = JSON.parse(evt.target.responseText);
            if (data.code != 0) {
              this.$Notice.error({
                title: "系统提示",
                desc:
                  "<p>文件：" + file.name + "导入失败," + data.message + "</p>",
              });
            } else {
              //刷新当前的列表页面
              this.load();
              this.$Notice.success({
                title: "导入成功",
                desc: "<p>文件:" + file.name + "导入成功" + "</p>",
              });
            }
          } else {
            this.$Notice.error({
              title: "系统提示",
              desc: "<p>文件：" + file.name + "上传失败" + "</p>",
            });
          }
        },
        false
      );
      xhr.open(
        "POST",
        baseUrl + "/system/kj/hz/file/solfegeImport/" + this.query.examCode
      ); //修改成自己的接口
      xhr.setRequestHeader(
        "authorization-token",
        this.$store.state.user.accessToken
      );
      xhr.setRequestHeader("fileName", encodeURIComponent(file.name));
      xhr.setRequestHeader("schoolId", this.$store.state.user.schoolId);
      xhr.send(fd);
      this.$store.commit("showloading");
      return false;
    },
    load() {
      if (this.query.examCode) {
        axios
          .post("/system/kj/hz/getSolfegeKjProgress", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.list = data.content || [];
              this.query.totalElements = data.totalElements;
              this.query.totalPages = data.totalPages;
            }
          });
      }
    },
    selectPlace() {
      if (this.query.placeCode && this.query.placeCode.length > 0) {
        axios
          .post("/system/kj/hz/getRoomByPlaceCode", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.xldata.roomCodeList = [];
              this.xldata.roomCodeList = data;
            }
          });
      } else {
        this.xldata.roomCodeList = [];
      }
    },
    selectExam() {
      if (this.query.examCode && this.query.examCode.length > 0) {
        axios
          .post("/system/kj/hz/getPlaceByExamCode", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.xldata.placeCodeList = [];
              this.xldata.placeCodeList = data;
            }
          });
      } else {
        this.xldata.placeCodeList = [];
      }
    },
    doQuery() {
      if (!this.query.examCode || this.query.examCode.length == 0) {
        this.query.pageNo = 1;
        this.query.pageSize = 10;
        this.query.totalElements = 0;
        this.query.totalPages = 0;
        this.list = [];
      } else {
        this.query.pageNo = 1;
        this.load();
      }
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNo = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      if (this.query.examCode) {
        this.query.pageSize = pageSize;
        this.load();
      }
    },
  },
  created() {
    let myexamCode = this.query.examCode;
    axios.post("/system/kj/hz/getPlans", {}).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.examCodeList = [];
        data.forEach((item, index) => {
          if (item.examType == "SOLFEGE") {
            this.xldata.examCodeList.push(item);
            this.query.examCode = myexamCode;
          }
        });
      }
    });
  },
};
</script>