update

src/views/document/uploadProgress.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div v-if="uploading" class="progress-bar">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>上传列表</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="uploading = false">关闭</el-button>
+        </div>
+        <el-table :data="progressArr" max-height="400px">
+          <el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
+          <el-table-column label="进度">
+            <template slot-scope="scope">
+              <el-progress :percentage="parseInt(scope.row.progress)"></el-progress>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+     <!-- <el-progress :percentage="progress"></el-progress>-->
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        uploading: false,
+        progressArr: [],
+        progress: 0
+      }
+    },
+    created(){
+      this.initWebSocket();
+    },
+    methods: {
+      initWebSocket() {
+        this.websocket = new WebSocket(process.env.VUE_APP_WS_URL);
+        this.websocket.onmessage = (event) => {
+          this.uploading = true;
+          const msgStr = event.data;
+          let msgArr = msgStr.split('|');
+          let item = {}
+          item['docId'] = msgArr[0]
+          item['docName'] = msgArr[1]
+          item['progress'] = msgArr[2]
+          if((this.progressArr.findIndex(t => t['docId'] == item['docId'])) == -1){
+            this.progressArr.push(item)
+          }
+          this.progressArr.forEach(p => {
+            if(p['docId'] == item['docId']){
+              p['progress'] = item['progress']
+            }
+          })
+          console.log('this.progressArr=' + this.progressArr);
+         /* let progress = msgStr.substring(msgStr.indexOf("/") + 1, msgStr.length);
+          this.progress = parseInt(msgArr[2])*/
+          // if (progress === '100%') {
+          //   this.websocket.close();
+          // }
+        };
+        this.websocket.onclose = () => {
+          console.log('WebSocket connection closed');
+        };
+      },
+      checkDuplicate(docId) {
+        return this.progressArr.findIndex(t => t['docId'] == docId) == -1
+      }
+    }
+  };
+</script>
+
+<style>
+  .progress-bar {
+    position: fixed;
+    bottom: 10px;
+    left: 85%;
+    transform: translateX(-50%);
+    width: 30%;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #fff;
+    text-align: center;
+    user-select: none;
+  }
+</style>