前端添加sse获取进度

zhanghua

2024-11-19 bcdb083a696b7e43f21b15e0c07195d409f36bce

 src/views/student/components/upload-student.vue

@@ -1,140 +1,194 @@
<template>
  <el-form class="demo-ruleForm">
    <el-form-item label="" style="display: inline-block">
      <div class="uploading-center">
        <div class="uploading">
          <dragUpload
            :limit="1"
            :orgId="parseInt(orgId)"
            :staffId="parseInt(staffId)"
            @fileSuccess="fatherMethod"
            :type="'AUDIENCE'"
            :action="'/dream/player/importPlayer'"
          >
            <div class="uploading-btn-to">
              <i class="iconfont iconAdd"></i> 上传
    <el-form class="demo-ruleForm">
        <el-form-item label="" style="display: inline-block">
            <div class="uploading-center">
                <div class="uploading">
                    <dragUpload
                        :limit="1"
                        :orgId="parseInt(orgId)"
                        :staffId="parseInt(staffId)"
                        @fileSuccess="fatherMethod"
                        @file-uploading="showUploadProcess"
                        :type="'AUDIENCE'"
                        :action="'/dream_dev/player/importPlayer'"
                    >
                        <div class="uploading-btn-to">
                            <i class="iconfont iconAdd"></i> 上传
                        </div>
                        <div class="el-upload__tip" slot="tip">
                            只能上传.xls,.xlsx文件
                        </div>
                    </dragUpload>
                </div>
                <div class="download-file">
                    <i class="iconfont iconFile"></i>
                    <a href="/static/学员导入模板.xlsx" download
                        >下载学员模板</a
                    >
                </div>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传.xls,.xlsx文件</div>
          </dragUpload>
        </div>
        <div class="download-file">
          <i class="iconfont iconFile"></i>
          <a href="/static/学员导入模板.xlsx" download>下载学员模板</a>
        </div>
      </div>
      <div style="font-size: 12px; color: #6993ff" v-if="hasAudience">
        已上传,如需修改直接点击上传
        <i class="el-icon-close" title="删除" @click="clearaudience"></i>
      </div>
    </el-form-item>
  </el-form>
            <div style="font-size: 12px; color: #6993ff" v-if="hasAudience">
                已上传,如需修改直接点击上传
                <i
                    class="el-icon-close"
                    title="删除"
                    @click="clearaudience"
                ></i>
            </div>
        </el-form-item>

        <el-progress
            v-show="progress"
            type="circle"
            :percentage="percentage"
            :status="progressStatus"
        ></el-progress>
    </el-form>
</template>

<script>
import dragUpload from "@/components/drag-upload";
var self = null;
export default {
  inject: ["reload"],
  name: "Creation",
  data() {
    return {
      orgId: 0,
      staffId: 0,
      hasAudience: false,
    };
  },
  components: { dragUpload },
  methods: {
    downloadlist() {
      window.open("../../../assets/学员导入模板.xlsx", "_blank");
      // this.download('downPlayerTemplate', '学员导入模板.xlsx')
    inject: ["reload"],
    name: "Creation",
    data() {
        return {
            orgId: 0,
            staffId: 0,
            hasAudience: false,
            progress: false,
            percentage: 0,
            progressStatus: ""
        };
    },
    clearaudience() {
      this.hasAudience = false;
    components: { dragUpload },
    methods: {
        downloadlist() {
            window.open("../../../assets/学员导入模板.xlsx", "_blank");
            // this.download('downPlayerTemplate', '学员导入模板.xlsx')
        },
        clearaudience() {
            this.hasAudience = false;
        },
        fatherMethod(res, type) {
            // if (res.falseLst === null) {
            //     this.$message.success("上传数据成功");
            //     this.$emit("load-success");
            // } else if (res.falseLst.length >= 1) {
            //     let errortips = "";
            //     res.falseLst.map((item) => {
            //         errortips += (`${item.playerRoll}` + `${item.cause} \r\n`).replace('[]', '');
            //     });
            //     this.$message({
            //         message: `导入数据成功导入${res.successNum}条,错误信息:${errortips}`,
            //         type: "error",
            //         duration: 6000,
            //     });
            // }
        },
        showUploadProcess() {
            self.progress = true
            setTimeout(function () {
                const eventSource = new EventSource('/dream_dev/sse-stream/' + JSON.parse(localStorage.getItem("selectStaff")).id);

                eventSource.onmessage = function (event) {
                    const res = JSON.parse(event.data)
                    self.percentage = parseInt(res.current * 100 / res.total)
                    if (res.current == res.total) {
                        self.progressStatus = 'success'
                        if (res.falseLst === null) {
                            self.$message.success("上传数据成功");
                            self.$emit("load-success");
                        } else if (res.falseLst.length >= 1) {
                            let errortips = "";
                            res.falseLst.map((item) => {
                                errortips += (`${item.playerRoll}` + `${item.cause} \r\n`).replace('[]', '');
                            });
                            self.$message({
                                message: `导入数据成功导入${res.successNum}条,错误信息:${errortips}`,
                                type: "error",
                                duration: 6000,
                            });
                        }
                    }
                };

                eventSource.onerror = function (err) {
                    console.error("EventSource failed:", err);
                    eventSource.close();
                };
            }, 3 * 1000);
        }
    },
    fatherMethod(res, type) {
      if (res.falseLst === null) {
        this.$message.success("上传数据成功");
        this.$emit("load-success");
      } else if (res.falseLst.length >= 1) {
        let errortips = "";
        res.falseLst.map((item) => {
          errortips += (`${item.playerRoll}`+`${item.cause} \r\n`).replace('[]','');
        });
        this.$message({
          message: `导入数据成功导入${res.successNum}条,错误信息:${errortips}`,
          type: "error",
          duration: 6000,
        });
      }
    created() {
        self = this
        const selectStaff = JSON.parse(localStorage.getItem("selectStaff"));
        this.orgId = selectStaff.org.id;
        this.staffId = selectStaff.id;
    },
  },
  created() {
    const selectStaff = JSON.parse(localStorage.getItem("selectStaff"));
    this.orgId = selectStaff.org.id;
    this.staffId = selectStaff.id;
  },
};
</script>
  
<style lang="scss" scoped>
.demo-ruleForm {
  text-align: center;
    text-align: center;
}
.creation-center {
  padding: 40px 40px 40px 40px;
    padding: 40px 40px 40px 40px;
}
.uploading-center {
  display: flex;
  flex-direction: row;
  > .uploading {
    min-height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .uploading-btn-to {
    width: 100px;
    line-height: 38px;
    height: 38px;
    border-radius: 3px;
    text-align: center;
    padding: 0 0px;
    cursor: pointer;
    user-select: none;
    margin-left: 0;
    color: #ffa800;
    font-size: 14px;
    border: 1px solid #ffbe41;
    > i {
      color: #ffbe41;
      font-size: 12px;
      margin-right: 5px;
    }
  }
  > .download-file {
    float: left;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    color: #6993ff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    height: 40px;
    > div {
      width: 117px;
      margin-left: 5px;
    > .uploading {
        min-height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        border-radius: 4px;
    }
  }
    .uploading-btn-to {
        width: 100px;
        line-height: 38px;
        height: 38px;
        border-radius: 3px;
        text-align: center;
        padding: 0 0px;
        cursor: pointer;
        user-select: none;
        margin-left: 0;
        color: #ffa800;
        font-size: 14px;
        border: 1px solid #ffbe41;
        > i {
            color: #ffbe41;
            font-size: 12px;
            margin-right: 5px;
        }
    }
    > .download-file {
        float: left;
        display: flex;
        flex-direction: row;
        margin-left: 20px;
        color: #6993ff;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        height: 40px;
        > div {
            width: 117px;
            margin-left: 5px;
        }
    }
}
.uploading-center-style {
  ::v-deep .upload-demo {
    ::v-deep .el-upload {
      line-height: 38px;
    ::v-deep .upload-demo {
        ::v-deep .el-upload {
            line-height: 38px;
        }
    }
  }
}
::v-deep .uploading-center > .uploading {
  line-height: 37px;
    line-height: 37px;
}
</style>