From bcdb083a696b7e43f21b15e0c07195d409f36bce Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 19 十一月 2024 09:30:50 +0800
Subject: [PATCH] 前端添加sse获取进度
---
src/views/student/components/upload-student.vue | 276 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 165 insertions(+), 111 deletions(-)
diff --git a/src/views/student/components/upload-student.vue b/src/views/student/components/upload-student.vue
index 6814ed9..cbc7afc 100644
--- a/src/views/student/components/upload-student.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0