上传文件进度条

src/views/module_kzks/fileImportLog/FileImportLogList.vue

@@ -127,6 +127,12 @@
   import FileImportLogModal from './modules/FileImportLogModal'
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
   import { getFileAccessHttpUrl, downloadFile } from '@/api/manage'
+  import store from '@/store'
+  import Vue from 'vue'
+  import signMd5Utils from '@/utils/encryption/signMd5Utils'
+  import { axios } from '@/utils/request'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  const key = 'updatable';
 
   export default {
     name: 'FileImportLogList',
@@ -137,6 +143,7 @@
     data () {
       return {
         description: '导入并下载管理页面',
+        websock: null,
         // 表头
         columns: [
           {
@@ -191,7 +198,9 @@
       }
     },
     created() {
-    this.getSuperFieldList();
+      // 初始化websocket
+      this.initWebSocket()
+      this.getSuperFieldList();
     },
     computed: {
       importExcelUrl: function(){
@@ -212,7 +221,71 @@
       exportExcel(record){
         let url = getFileAccessHttpUrl(record.fileAddress);
         downloadFile(url, record.fileName)
-      }
+      },
+      // websocket
+      initWebSocket () { // 初始化weosocket(必须)
+        var userId = 'e9ca23d68d884d4ebb19d07889727dae';
+        if (store && store.getters && store.getters.userInfo && store.getters.userInfo.id) {
+          userId=store.getters.userInfo.id;
+        }
+        var wsuri = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
+        console.log("地址", wsuri)
+        // var wsuri = 'ws://192.168.2.247:8866/websocket';
+        // console.log(wsuri);
+        //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
+        let token = Vue.ls.get(ACCESS_TOKEN)
+        // 大屏免登录，去掉token
+        // this.websock = new WebSocket(wsuri);
+        this.websock = new WebSocket(wsuri, [token]);
+        // 新建一个webstock对象
+        // this.websock = new WebSocket(wsuri)
+        this.websock.onmessage = this.websocketonmessage
+        this.websock.onopen = this.websocketonopen
+        this.websock.onerror = this.websocketonerror
+        this.websock.onclose = this.websocketclose
+      },
+      // 数据接收
+      websocketonmessage (e) {
+        console.log("-----接收消息-------",e);
+        const redata = JSON.parse(e.data)
+        console.log(redata);
+        this.initData(redata);
+      },
+      initData(redata) {
+        console.log('接收的数据',redata)
+        var data = redata.msgTxt
+        // this.$refs.modalForm.newPercent = data
+        // this.$refs.modalForm.sendnewPercent();
+        if (data != 0) {
+          this.$notification.open({
+            key,
+            message: '上传进度',
+            description:(
+              <a-progress percent={data} status="active" />
+            ),
+            duration: 0,
+          });
+        }
+      },
+      // websocket连接后发送数据(send发送)
+      websocketonopen () {
+        console.log("WebSocket连接成功");
+        // let actions = {} // 请根据实际项目需要进行修改
+        // this.websocketsend()
+      },
+      // 数据发送
+      websocketsend (d) {
+        this.websock.send(d)
+        console.log(d)
+      },
+      // 连接建立失败重连
+      websocketonerror () {
+        this.initWebSocket()
+      },
+      // 关闭
+      websocketclose (e) {
+        console.log('断开连接', e)
+      },
     }
   }
 </script>

src/views/module_kzks/fileImportLog/modules/FileImportLogForm.vue

@@ -35,6 +35,7 @@
   import { httpAction, getAction } from '@/api/manage'
   import { importJX } from '@/api/api'
   import { validateDuplicateValue } from '@/utils/util'
+  const key = 'updatable';
 
   export default {
     name: 'FileImportLogForm',
@@ -75,7 +76,9 @@
           add: "/projectImportList/projectImportList/add",
           edit: "/projectImportList/projectImportList/edit",
           queryById: "/projectImportList/projectImportList/queryById",
-        }
+        },
+        // 进度
+        newPercent: null
       }
     },
     computed: {
@@ -117,6 +120,7 @@
               httpurl+=this.url.edit;
                method = 'put';
             }
+            this.openNotification()
             console.log(111111,this.model)
             this.model.fileAddress = this.model.file[0].filePath
             this.model.fileName = this.model.file[0].fileName
@@ -137,6 +141,29 @@
 
         })
       },
+      // 进度条
+      openNotification() {
+        console.log(999)
+        // this.newPercent = 30
+        this.$notification.open({
+          key,
+          message: '上传进度',
+          description:(
+            <a-progress percent={this.newPercent} status="active" />
+          ),
+          duration: 0,
+        });
+        // setTimeout(() => {
+        //   this.$notification.open({
+        //     key,
+        //     message: '上传进度',
+        //     description:(
+        //       <a-progress percent={this.newPercent} status="active" />
+        //     ),
+        //     duration: 0,
+        //   });
+        // }, 1000);
+      },
     }
   }
 </script>