文件服务-上传下载进度条

src/views/govern/device/fileService/index.vue

@@ -33,7 +33,7 @@
                 <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                 <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
                 <el-upload
-                    v-if="!progressVisibile && activePath != '/'"
+                    v-if="activePath != '/'"
                     action=""
                     :auto-upload="false"
                     :show-file-list="false"
@@ -51,11 +51,12 @@
                 <el-button @click="handleAddNewDir" v-if="activePath != '/'" type="primary" :icon="Plus">
                     新建文件夹
                 </el-button>
-                <div class="upload_progress" v-if="progressVisibile">
-                    {{ fileName }}
-                    <el-progress :percentage="30" :indeterminate="true">
+                <div class="upload_progress" v-if="status != 0 && status != 100 && changeType == 'upload'">
+                    正在上传：{{ fileName }}
+                    <el-progress :percentage="status" />
+                    <!-- <el-progress :percentage="30" :indeterminate="true">
                         <el-button text>上传中...</el-button>
-                    </el-progress>
+                    </el-progress> -->
                 </div>
             </div>
             <div class="list" v-if="dirList.length != 0 && !loading">
@@ -393,28 +394,33 @@ const handleDelDirOrFile = (row: any) => {
 }
 //取消删除
 const cancelEvent = () => {}
-
+const changeType = ref<string>('')
 //下载文件
 const fileRef = ref()
 const handleDownLoad = async (row: any) => {
     ;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
+    fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
+    localStorage.setItem('fileName', fileName.value)
+    changeType.value = 'download'
+    localStorage.setItem('changeType', changeType.value)
 }
 //上传文件
-const progressVisibile = ref<boolean>(false)
 const fileName = ref<string>('')
 const handleUpload = (e: any, fileList: any, row: any) => {
     // loading.value=true
     fileName.value = e.name
+    localStorage.setItem('fileName', fileName.value)
+    changeType.value = 'upload'
+    localStorage.setItem('changeType', changeType.value)
     const obj = {
         id: nDid.value,
         file: e.raw,
         filePath: row || row.prjDataPath
     }
-    progressVisibile.value = true
     uploadDeviceFile(obj).then((res: any) => {
         if (res.code == 'A0000') {
             reloadCurrentMenu(res.message)
-            progressVisibile.value = false
+            status.value = 100
         }
     })
 }
@@ -451,21 +457,30 @@ const connectMqtt = () => {
         username: 't_user',
         password: 'njcnpqs'
     }
-    const url = 'wss://pqmcn.com:8087'
-
+    // const url = 'wss://pqmcn.com:8087/mqtt'
+    const url = 'ws://192.168.1.24:8085/mqtt'
     mqttRef.value = mqtt.connect(url, options)
 }
 connectMqtt()
 mqttRef.value.on('connect', (e: any) => {
-    ElMessage.success('连接mqtt服务器成功!')
+    // ElMessage.success('连接mqtt服务器成功!')
     console.log('mqtt客户端已连接....')
-    mqttRef.value.subscribe('/Web/Progress')
+    // mqttRef.value.subscribe('/Web/Progress')
+    mqttRef.value.subscribe('/Web/Progress/+')
 })
-
+const mqttMessage = ref<any>({})
+const status = ref<any>()
 mqttRef.value.on('message', (topic: any, message: any) => {
     // console.log('🚀 ~ mqttRef.value.on ~ message:', JSON.parse(message))
-    console.log('mqtt接收到消息' + message)
+    console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
     // "{allStep:\""+times+"\",nowStep:"+i+"}"
+    let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
+    mqttMessage.value = eval('(' + str + ')')
+    status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
+    fileRef.value.setStatus(status.value)
+    if (status.value == 100) {
+        status.value = 99
+    }
 })
 
 mqttRef.value.on('error', (error: any) => {
@@ -476,7 +491,11 @@ mqttRef.value.on('error', (error: any) => {
 mqttRef.value.on('close', function () {
     console.log('mqtt客户端已断开连接.....')
 })
-onMounted(() => {})
+onMounted(() => {
+    status.value =0
+    fileName.value = localStorage.getItem('fileName') ? localStorage.getItem('fileName') : ''
+    changeType.value = localStorage.getItem('changeType') ? localStorage.getItem('changeType') : ''
+})
 onBeforeUnmount(() => {
     if (mqttRef.value) {
         mqttRef.value.end()
@@ -485,8 +504,6 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-
-
 .main {
     display: flex;
     justify-content: space-between;
@@ -500,8 +517,8 @@ onBeforeUnmount(() => {
         //margin-left: 10px;
         border: 1px solid #eee;
         .el-input__wrapper {
-    -webkit-text-security: disc !important;
-}
+            -webkit-text-security: disc !important;
+        }
         .right_nav {
             width: 100%;
             height: 32px;
@@ -615,5 +632,4 @@ onBeforeUnmount(() => {
     padding: 20px 10px;
     box-sizing: border-box;
 }
-
 </style>