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

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;
@@ -501,7 +518,7 @@ onBeforeUnmount(() => {
         border: 1px solid #eee;
         .el-input__wrapper {
             -webkit-text-security: disc !important;
-}
+        }
         .right_nav {
             width: 100%;
             height: 32px;
@@ -615,5 +632,4 @@ onBeforeUnmount(() => {
     padding: 20px 10px;
     box-sizing: border-box;
 }
-
 </style>

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

@@ -2,6 +2,19 @@
 <template>
     <div :class="downLoading ? 'all_disabled' : ''">
         <el-dialog v-model="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
+            <div class="download_progress" v-if="status != 0 && status != 100">
+                <div class="progress_left">
+                    正在下载：
+                    {{
+                        fileData?.prjDataPath
+                            ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
+                            : '/'
+                    }}
+                </div>
+                <div class="progress_right">
+                    <el-progress :percentage="status" />
+                </div>
+            </div>
             <el-descriptions title="" style="margin: 10px 0" :column="2" :border="true" v-loading="loading">
                 <el-descriptions-item label="文件名称">
                     {{
@@ -21,7 +34,7 @@
                 </el-descriptions-item>
             </el-descriptions>
             <template #footer>
-                <div class="dialog-footer">
+                <div class="dialog-footer download_status">
                     <el-button @click="handleClose">取消</el-button>
                     <el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
                         {{ downLoading ? '下载中...' : '下载' }}
@@ -32,7 +45,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineExpose, onBeforeUnmount, onUnmounted, defineEmits } from 'vue'
+import { ref, onMounted, defineExpose, defineProps, onBeforeUnmount, onUnmounted, defineEmits, watch } from 'vue'
 import { getFileServiceFileOrDir, downLoadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
 import { ElMessage } from 'element-plus'
 import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
@@ -76,7 +89,6 @@ const handleDownLoad = () => {
         .then((res: any) => {
             if (res.code == 'A0000') {
                 downLoadFile(res.data).then((resp: any) => {
-                    console.log(resp, '999999999999')
                     if (resp.type != 'application/json') {
                         // 'application/vnd.ms-excel'
                         let blob = new Blob([resp], { type: resp.type })
@@ -89,11 +101,11 @@ const handleDownLoad = () => {
                         document.body.appendChild(link)
                         downLoading.value = false
                         link.click()
+                        status.value = 100
                         ElMessage.success('文件下载成功')
                         link.remove()
                         handleClose()
                     } else {
-                        console.log(6666)
                         if (resp.code == 'A0000') {
                             window.open(res.data, '_blank')
                             downLoading.value = false
@@ -112,10 +124,26 @@ const handleDownLoad = () => {
 }
 onMounted(() => {})
 onUnmounted(() => {})
-defineExpose({ open })
+const status = ref(0)
+const setStatus = (val: any) => {
+    status.value = val
+}
+defineExpose({ open, setStatus })
 </script>
 <style lang="scss" scoped>
-.all_disabled {
-    // pointer-events: none;
+.download_progress {
+    display: flex;
+    width: 100%;
+    margin: 10px 0;
+    align-items: center;
+    justify-content: space-between;
+    .progress_left{
+        width: auto;
+    }
+    .progress_right{
+        flex:1;
+        padding-left: 10px;
+        box-sizing: border-box;
+    }
 }
 </style>