前端添加sse获取进度

zhanghua

2024-11-19 bcdb083a696b7e43f21b15e0c07195d409f36bce

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

@@ -8,30 +8,47 @@
            :orgId="parseInt(orgId)"
            :staffId="parseInt(staffId)"
            @fileSuccess="fatherMethod"
                        @file-uploading="showUploadProcess"
            :type="'AUDIENCE'"
            :action="'/dream/player/importPlayer'"
                        :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>
                        <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>
                    <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>
                <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",
@@ -40,6 +57,9 @@
      orgId: 0,
      staffId: 0,
      hasAudience: false,
            progress: false,
            percentage: 0,
            progressStatus: ""
    };
  },
  components: { dragUpload },
@@ -52,23 +72,57 @@
      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) {
        this.$message.success("上传数据成功");
        this.$emit("load-success");
                            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('[]','');
        });
        this.$message({
                            self.$message({
          message: `导入数据成功导入${res.successNum}条,错误信息:${errortips}`,
          type: "error",
          duration: 6000,
        });
      }
    },
                    }
                };

                eventSource.onerror = function (err) {
                    console.error("EventSource failed:", err);
                    eventSource.close();
                };
            }, 3 * 1000);
        }
  },
  created() {
        self = this
    const selectStaff = JSON.parse(localStorage.getItem("selectStaff"));
    this.orgId = selectStaff.org.id;
    this.staffId = selectStaff.id;