文件服务修改

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

@@ -7,11 +7,13 @@
         <div class="main_right" v-loading="loading">
             <div class="right_nav">
                 <div class="menu" v-if="activePathList.length != 0">
-
                     <el-breadcrumb separator="/">
-                        <el-breadcrumb-item v-for="(item, index) in activePathList" style="cursor: pointer" :key="index"
+                        <el-breadcrumb-item
-                            @click="handleIntoByPath(item)">
+                            v-for="(item, index) in activePathList"
-
+                            style="cursor: pointer"
+                            :key="index"
+                            @click="handleIntoByPath(item)"
+                        >
                             <span>{{ outPutPath(item, index) }}</span>
                         </el-breadcrumb-item>
                     </el-breadcrumb>
@@ -22,14 +24,25 @@
             </div>
 
             <div class="filter" v-if="activePathList.length != 0">
-                <el-input style="width: 200px; height: 32px;-webkit-text-security:disc;" placeholder="请输入文件或文件夹名称"
+                <el-input
-                    clearable v-model="filterFileName" type="text"></el-input>
+                    style="width: 200px; height: 32px"
+                    placeholder="请输入文件或文件夹名称"
+                    clearable
+                    v-model="filterText"
+                    type="text"
+                ></el-input>
                 <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                 <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
-                <el-upload v-if="activePath != '/'" action="" :auto-upload="false" :show-file-list="false" :on-change="(file: any, fileList: any) => {
+                <el-upload
+                    v-if="activePath != '/'"
+                    action=""
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    :on-change="(file: any, fileList: any) => {
                     handleUpload(file, fileList, activePath)
                 }
-                    ">
+                    "
+                >
                     <el-button>
                         文件上传
                         <el-icon class="el-icon--right">
@@ -51,8 +64,13 @@
             <div class="list" v-if="dirList.length != 0 && !loading">
                 <div class="list_item" v-for="(item, index) in dirList" :key="index">
                     <div class="item_download">
-                        <el-button v-if="activePath && activePath != '/'" type="danger" size="small"
+                        <el-button
-                            @click="handleDelDirOrFile(item)" circle>
+                            v-if="activePath && activePath != '/'"
+                            type="danger"
+                            size="small"
+                            @click="handleDelDirOrFile(item)"
+                            circle
+                        >
                             <el-icon>
                                 <Delete />
                             </el-icon>
@@ -62,32 +80,21 @@
                                 <Download />
                             </el-icon>
                         </el-button>
-
-                        <!-- <el-popconfirm
-                            width="220"
-                            confirm-button-text="确认"
-                            cancel-button-text="取消"
-                            :title="item?.type == 'file' ? '是否确认删除当前文件?' : '是否确认删除当前文件夹?'"
-                            @confirm="handleDelDirOrFile(item)"
-                            @cancel="cancelEvent"
-                        >
-                            <template #reference>
-                                <el-button v-if="activePath && activePath != '/'" type="danger" size="small" circle>
-                                    <el-icon><Delete /></el-icon>
-                                </el-button>
-                            </template>
-</el-popconfirm> -->
                     </div>
                     <img v-if="item?.type == 'dir'" @click="handleIntoDir(item)" src="@/assets/img/wenjianjia.svg" />
-                    <img class="img_file" @click="handleIntoDir(item)" v-if="item?.type == 'file'"
+                    <img
-                        src="@/assets/img/wenjian.svg" />
+                        class="img_file"
+                        @click="handleIntoDir(item)"
+                        v-if="item?.type == 'file'"
+                        src="@/assets/img/wenjian.svg"
+                    />
                     <span v-if="!item.type">暂无数据</span>
                     <p>
                         {{
                             item &&
-                                item?.prjDataPath &&
+                            item?.prjDataPath &&
-                                item?.prjDataPath.includes(activePath) &&
+                            item?.prjDataPath.includes(activePath) &&
-                                item?.prjDataPath.length > activePath.length
+                            item?.prjDataPath.length > activePath.length
                                 ? item?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
                                 : item?.prjDataPath.replace('/', ' ')
                         }}
@@ -97,9 +104,18 @@
             <el-empty v-if="dirList.length === 0" />
         </div>
         <popup ref="fileRef"></popup>
-        <el-dialog v-model="addDeviceDirOpen" :destroy-on-close="true" title="新建文件夹目录" width="500" @closed="close">
+        <el-dialog
-            <el-form ref="formRef" :model="form"
+            v-model="addDeviceDirOpen"
-                :rules="{ path: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }] }">
+            :destroy-on-close="true"
+            title="新建文件夹目录"
+            width="500"
+            @closed="close"
+        >
+            <el-form
+                ref="formRef"
+                :model="form"
+                :rules="{ path: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }] }"
+            >
                 <el-form-item label="文件夹名称" prop="path">
                     <el-input v-model="form.path" placeholder="请输入文件夹名称" />
                 </el-form-item>
@@ -159,9 +175,7 @@ const activePath = ref<string>('')
 //判断是否是根目录
 const isRoot = ref<boolean>(true)
 //储存所有点击过的目录
-const activePathList: any = ref([
+const activePathList: any = ref([])
-
-])
 const nodeClick = (e: any) => {
     if (e.level == 2) {
         loading.value = true
@@ -184,51 +198,48 @@ const nodeClick = (e: any) => {
     }
 }
 //搜索文件或文件夹
-const filterFileName = ref('')
+const filterText = ref('')
 const handleSearch = () => {
     let filterList: any = []
     dirList.value = currentDirList.value
     dirList.value.map(item => {
-        if (filterFileName.value && item.prjDataPath.includes(filterFileName.value)) {
+        if (filterText.value && item.prjDataPath.includes(filterText.value)) {
             filterList.push(item)
         }
     })
     if (filterList.length != 0) {
         dirList.value = filterList
     }
-    if (!filterFileName) {
+    if (filterList.length == 0) {
+        dirList.value = []
+    }
+    if (!filterText.value) {
         dirList.value = currentDirList.value
     }
 }
 //重置搜索
 const handleRefresh = () => {
     loading.value = true
-    filterFileName.value = ''
+    filterText.value = ''
     dirList.value = currentDirList.value
     reloadCurrentMenu('')
 }
 
-
 const reboot: any = ref('')
 const vNode = () => {
     return h('div', {}, [
-
-
         h(ElInput, {
             modelValue: reboot.value,
             'onUpdate:modelValue': ($event: any) => {
-                reboot.value = $event;
+                reboot.value = $event
             },
             placeholder: '请输入姓名',
             type: 'password',
-            autocomplete: "off",
+            autocomplete: 'off',
             class: 'displayPass'
-        }),
+        })
-
+    ])
-    ]);
+}
-};
-
-
 
 //装置重启
 const deviceRestartLoading = ref<boolean>(false)
@@ -238,10 +249,7 @@ const handleRestartDevice = () => {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         customClass: 'customInput',
-        inputType: 'text',
+        inputType: 'text'
-
-
-
     })
         .then(({ value }) => {
             if (!value) {
@@ -256,6 +264,8 @@ const handleRestartDevice = () => {
                                 if (res.code == 'A0000') {
                                     deviceRestartLoading.value = false
                                     ElMessage({ message: res.message, type: 'success', duration: 5000 })
+                                }else{
+                                    deviceRestartLoading.value = false
                                 }
                             })
                         }
@@ -287,20 +297,21 @@ const handleIntoDir = (row: any) => {
     if (activePathList.value.indexOf(obj.name) == -1) {
         activePathList.value.push({ path: obj.name })
     }
-    getFileServiceFileOrDir(obj).then(res => {
+    getFileServiceFileOrDir(obj)
-        dirList.value = res.data
+        .then(res => {
-        loading.value = false
+            dirList.value = res.data
-        currentDirList.value = res.data
+            loading.value = false
-        activePathList.value.map((item: any, index: any) => {
+            currentDirList.value = res.data
-            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+            activePathList.value.map((item: any, index: any) => {
-                activePathList.value.splice(index, 1)
+                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
-            }
+                    activePathList.value.splice(index, 1)
+                }
+            })
+            isRoot.value = false
+        })
+        .catch(e => {
+            loading.value = false
         })
-        isRoot.value = false
-    }).catch(e => {
-        loading.value = false
-    })
-
 }
 
 //处理导航栏路径
@@ -318,7 +329,6 @@ const outPutPath = (row: any, key: any) => {
         }
         if (row.path.split('/').length !== 0) {
             path = '/' + row.path.split('/')[row.path.split('/').length - 1]
-
         }
     }
     return path.split('/')[1]
@@ -333,18 +343,19 @@ const handleIntoByPath = async (val: any) => {
     }
     activePath.value = val.path
     loading.value = true
-    getFileServiceFileOrDir(obj).then(res => {
+    getFileServiceFileOrDir(obj)
-        dirList.value = res.data
+        .then(res => {
-        activePathList.value.map((item: any, index: any) => {
+            dirList.value = res.data
-            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+            activePathList.value.map((item: any, index: any) => {
-                activePathList.value.splice(index, 1)
+                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
-            }
+                    activePathList.value.splice(index, 1)
+                }
+            })
+            loading.value = false
+        })
+        .catch(e => {
+            loading.value = false
         })
-        loading.value = false
-    }).catch(e => {
-        loading.value = false
-    })
-
 }
 const form = ref({
     path: ''
@@ -363,28 +374,25 @@ const formRef = ref()
 //重新加载当前页面菜单
 const reloadCurrentMenu = (msg: string) => {
     loading.value = true
-    getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' }).then((resp: any) => {
+    getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
-        if (resp.code == 'A0000') {
+        .then((resp: any) => {
+            if (resp.code == 'A0000') {
+                loading.value = false
+                dirList.value = resp.data
+                currentDirList.value = resp.data
+                activePathList.value.map((item: any, index: any) => {
+                    if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+                        activePathList.value.splice(index, 1)
+                    }
+                })
+                loading.value = false
+                if (!msg) return
+                ElMessage({ message: msg, type: 'success', duration: 5000 })
+            }
+        })
+        .catch(e => {
             loading.value = false
-            dirList.value = resp.data
+        })
-            currentDirList.value = resp.data
-            activePathList.value.map((item: any, index: any) => {
-                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
-                    activePathList.value.splice(index, 1)
-                }
-            })
-            loading.value = false
-            if (!msg) return
-            ElMessage({ message: msg, type: 'success', duration: 5000 })
-
-
-        }
-    }).catch(e => {
-        loading.value = false
-    })
-    // setTimeout(() => {
-    //     loading.value = false 
-    // },0)
 }
 //新建文件夹
 const submitDeviceDir = () => {
@@ -410,7 +418,6 @@ const submitDeviceDir = () => {
 }
 //删除文件夹或文件
 const handleDelDirOrFile = (row: any) => {
-
     // delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
     //     if (res.code == 'A0000') {
     //         reloadCurrentMenu(res.message)
@@ -423,40 +430,36 @@ const handleDelDirOrFile = (row: any) => {
         cancelButtonText: '取消',
         customClass: 'customInput',
         inputType: 'text'
+    }).then(({ value }) => {
+        if (!value) {
+            ElMessage.warning('请输入密码')
+        } else {
+            loading.value = true
+            passwordConfirm(value)
+                .then((resp: any) => {
+                    if (resp.code == 'A0000') {
+                        delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
+                            if (res.code == 'A0000') {
+                                reloadCurrentMenu(res.message)
+
+                                // ElMessage({ message: res.message, type: 'success', duration: 5000 })
+                            }
+                        })
+                    }
+                })
+                .catch(e => {
+                    loading.value = false
+                })
+        }
     })
-        .then(({ value }) => {
-            if (!value) {
-                ElMessage.warning('请输入密码')
-
-            } else {
-                loading.value = true
-                passwordConfirm(value)
-                    .then((resp: any) => {
-                        if (resp.code == 'A0000') {
-                            delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
-                                if (res.code == 'A0000') {
-
-                                    reloadCurrentMenu(res.message)
-
-                                    // ElMessage({ message: res.message, type: 'success', duration: 5000 })
-                                }
-                            })
-                        }
-                    })
-                    .catch(e => {
-                        loading.value = false
-                    })
-            }
-        })
-
 }
 const changeType = ref<any>('')
 //下载文件
 const fileRef = ref()
 const handleDownLoad = async (row: any) => {
-    ; (await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
+    ;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
-    fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
+    // fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
-    localStorage.setItem('fileName', fileName.value)
+    // localStorage.setItem('fileName', fileName.value)
     changeType.value = 'download'
     localStorage.setItem('changeType', changeType.value)
 }
@@ -513,6 +516,7 @@ const connectMqtt = () => {
         username: 't_user',
         password: 'njcnpqs'
     }
+    // 线上
     // const url = 'wss://pqmcn.com:8087/mqtt'
     const url = 'ws://192.168.1.24:8085/mqtt'
     mqttRef.value = mqtt.connect(url, options)
@@ -525,15 +529,28 @@ mqttRef.value.on('connect', (e: any) => {
     mqttRef.value.subscribe('/Web/Progress/+')
 })
 const mqttMessage = ref<any>({})
-const status = ref<any>()
+const status: any = ref()
+
 mqttRef.value.on('message', (topic: any, message: any) => {
     // console.log('🚀 ~ mqttRef.value.on ~ message:', JSON.parse(message))
+    // console.log('mqtt接收到消息', message,topic)
     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 + ')')
+    // eval('(' + str + ')').includes('fileName')
+    let regex = /fileName:(.*?),allStep/
+    let regex1 = /allStep:(.*?),nowStep/
+    let regex2 = /nowStep:(.*?)}/
+    mqttMessage.value = {
+        fileName: str.match(regex)[1],
+        allStep: str.match(regex1)[1],
+        nowStep: str.match(regex2)[1]
+    }
+    console.log(mqttMessage.value, '?????????')
     status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
-    fileRef.value.setStatus(status.value)
+    fileRef.value.setStatus(mqttMessage.value)
+    fileName.value = mqttMessage.value.fileName
+    localStorage.setItem('fileName', fileName.value)
     if (status.value == 100) {
         status.value = 99
     }
@@ -711,7 +728,6 @@ onBeforeUnmount(() => {
 :deep(.el-breadcrumb__separator) {
     margin: 0px -10px 0px 0px;
 }
-
 </style>
 <style lang="scss">
 .customInput {

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

@@ -6,9 +6,10 @@
                 <div class="progress_left">
                     正在下载：
                     {{
-                        fileData?.prjDataPath
+                        // fileData?.prjDataPath
-                            ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
+                        //     ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
-                            : '/'
+                        //     : '/'
+                        fileName
                     }}
                 </div>
                 <div class="progress_right">
@@ -125,8 +126,10 @@ const handleDownLoad = () => {
 onMounted(() => {})
 onUnmounted(() => {})
 const status = ref(0)
+const fileName=ref('')
 const setStatus = (val: any) => {
-    status.value = val
+    status.value = parseInt(Number((val.nowStep / val.allStep) * 100))
+    fileName.value = val.fileName
 }
 defineExpose({ open, setStatus })
 </script>