Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改mqtt文件下载问题

Browse Source
This commit is contained in:
GGJ
2024-11-08 14:02:27 +08:00
parent 058fc4b2bf
commit c56c301365
6 changed files with 68 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/views/govern/device/fileService/index.vue
View File

@@ -8,12 +8,8 @@
<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"
@click="handleIntoByPath(item)"
>
<el-breadcrumb-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>
@@ -24,25 +20,14 @@
</div>
<div class="filter" v-if="activePathList.length != 0">
<el-input
style="width: 200px; height: 32px"
placeholder="请输入文件或文件夹名称"
clearable
v-model="filterText"
type="text"
></el-input>
<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">
@@ -60,29 +45,19 @@
</div>
<!-- 以列表形式展示 -->
<div :style="tableHeight">
<vxe-table
style="margin-top: 10px"
border
auto-resize
height="auto"
:data="dirList"
v-bind="defaultAttribute"
>
<vxe-table style="margin-top: 10px" border auto-resize height="auto" :data="dirList"
v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="80"></vxe-column>
<vxe-column field="prjDataPath" align="center" title="名称" #default="{ row }">
<span
style="cursor: pointer; color: #551a8b"
:style="{
'text-decoration': row.type == 'dir' ? 'underline' : 'none',
color: row.type == 'dir' ? '#551a8b' : '#000'
}"
@click="handleIntoDir(row)"
>
<span style="cursor: pointer; color: #551a8b" :style="{
'text-decoration': row.type == 'dir' ? 'underline' : 'none',
color: row.type == 'dir' ? '#551a8b' : '#000'
}" @click="handleIntoDir(row)">
{{
row &&
row?.prjDataPath &&
row?.prjDataPath.includes(activePath) &&
row?.prjDataPath.length > activePath.length
row?.prjDataPath &&
row?.prjDataPath.includes(activePath) &&
row?.prjDataPath.length > activePath.length
? row?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
: row?.prjDataPath.replace('/', ' ')
}}
@@ -97,7 +72,7 @@
{{ row.type == 'dir' ? '文件夹' : row.type == 'file' ? '文件' : '/' }}
</span>
</vxe-column>
<vxe-column field="size" align="center" width="120" title="大小" #default="{ row }">
<vxe-column field="size" align="center" width="120" title="大小" #default="{ row }">
<span>
{{ row.size && row.type == 'file' ? row.size + 'KB' : '/' }}
</span>
@@ -108,13 +83,8 @@
<vxe-column title="操作" width="200px">
<template #default="{ row }">
<el-button link size="small" type="danger" @click="handleDelDirOrFile(row)">删除</el-button>
<el-button
v-if="row.type == 'file'"
link
size="small"
type="primary"
@click="handleDownLoad(row)"
>
<el-button v-if="row.type == 'file'" link size="small" type="primary"
@click="handleDownLoad(row)">
下载
</el-button>
</template>
@@ -125,13 +95,8 @@
<div class="list" v-if="dirList.length != 0 && !loading" style="display: none">
<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"
@click="handleDelDirOrFile(item)"
circle
>
<el-button v-if="activePath && activePath != '/'" type="danger" size="small"
@click="handleDelDirOrFile(item)" circle>
<el-icon>
<Delete />
</el-icon>
@@ -143,19 +108,15 @@
</el-button>
</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'"
src="@/assets/img/wenjian.svg"
/>
<img 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.includes(activePath) &&
item?.prjDataPath.length > activePath.length
item?.prjDataPath &&
item?.prjDataPath.includes(activePath) &&
item?.prjDataPath.length > activePath.length
? item?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
: item?.prjDataPath.replace('/', ' ')
}}
@@ -165,18 +126,9 @@
<!-- <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-form
ref="formRef"
:model="form"
:rules="{ path: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }] }"
>
<el-dialog v-model="addDeviceDirOpen" :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>
@@ -207,13 +159,14 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue'
import popup from './popup.vue'
import mqtt from 'mqtt'
import { useAdminInfo } from '@/stores/adminInfo'
import { passwordConfirm } from '@/api/user-boot/user'
defineOptions({
name: 'govern/device/fileService'
})
const pageHeight = mainHeight(20)
const tableHeight = mainHeight(130)
const adminInfo = useAdminInfo()
const loading = ref(false)
//nDid
const nDid = ref<string>('')
@@ -496,7 +449,7 @@ 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]
// localStorage.setItem('fileName', fileName.value)
changeType.value = 'download'
@@ -569,15 +522,21 @@ const status: any = ref()
mqttRef.value.on('message', (topic: any, message: any) => {
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
let regex = /fileName:(.*?),allStep/
let regex1 = /allStep:(.*?),nowStep/
let regex2 = /nowStep:(.*?)}/
let regex2 = /nowStep:(.*?),userId/
let regex3 = /userId:(.*?)}/
mqttMessage.value = {
fileName: str.match(regex)[1],
allStep: str.match(regex1)[1],
nowStep: str.match(regex2)[1]
nowStep: str.match(regex2)[1],
userId: str.match(regex3)[1]
}
console.log("🚀 ~ str.match(regex3)[1]:", str.match(regex3)[1])
status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
fileRef.value.setStatus(mqttMessage.value)
fileName.value = mqttMessage.value.fileName
@@ -613,6 +572,7 @@ onBeforeUnmount(() => {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
.main_left {
// width: 280px;
}
@@ -696,6 +656,7 @@ onBeforeUnmount(() => {
padding-bottom: 200px;
z-index: 100;
position: relative;
.list_item {
flex: none;
width: 23.3%;
@@ -714,6 +675,7 @@ onBeforeUnmount(() => {
height: 40px;
margin: 0;
border: 1px solid #eee;
.item_download,
.item_upload {
position: absolute;