修改mqtt文件下载问题
This commit is contained in:
@@ -19,7 +19,7 @@ const cascaderProps = {
|
||||
const cascader = ref()
|
||||
const dictData = useDictData()
|
||||
const options = dictData.state.area
|
||||
const areaName = ref(dictData.state.area[0].name)
|
||||
const areaName = ref(dictData.state.area[0]?.name || '')
|
||||
const change = (e: any) => {
|
||||
if (cascader.value.getCheckedNodes()[0].pathLabels.length == 1) {
|
||||
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
|
||||
|
||||
@@ -110,6 +110,7 @@ const handlerHeight = () => {
|
||||
}
|
||||
// 刷新页面handler高度出下拉
|
||||
const computedSearchRow = () => {
|
||||
|
||||
if (!headerForm.value.$el) return
|
||||
|
||||
|
||||
|
||||
@@ -590,7 +590,7 @@ const formatCountOptions = (list: any) => {
|
||||
}
|
||||
setTimeout(() => {
|
||||
tableHeaderRef.value.computedSearchRow()
|
||||
}, 100)
|
||||
}, 500)
|
||||
}
|
||||
// 判断下拉框是否存在
|
||||
const onCountChange = (val: any, index: any) => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -3,16 +3,14 @@
|
||||
<div :class="downLoading ? 'all_disabled' : ''">
|
||||
<el-dialog v-model="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
|
||||
<div v-loading="loading">
|
||||
<div
|
||||
class="download_progress"
|
||||
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100"
|
||||
>
|
||||
<div class="download_progress"
|
||||
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100">
|
||||
<div class="progress_left">
|
||||
正在下载:
|
||||
{{
|
||||
// fileData?.prjDataPath
|
||||
// ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
|
||||
// : '/'
|
||||
// ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
|
||||
// : '/'
|
||||
mqttFileName
|
||||
}}
|
||||
</div>
|
||||
@@ -59,9 +57,11 @@ import {
|
||||
downLoadDeviceFilePath
|
||||
} from '@/api/cs-device-boot/fileService.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const adminInfo = useAdminInfo()
|
||||
const downLoading = ref(false)
|
||||
const emit = defineEmits(['downLoadFile'])
|
||||
const handleClose = () => {
|
||||
@@ -146,14 +146,16 @@ const handleDownLoad = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {})
|
||||
onUnmounted(() => {})
|
||||
onMounted(() => { })
|
||||
onUnmounted(() => { })
|
||||
const status = ref(0)
|
||||
const mqttFileName = ref('')
|
||||
const setStatus = (val: any) => {
|
||||
status.value = parseInt(Number((val.nowStep / val.allStep) * 100))
|
||||
status.value = parseInt(Number((val.nowStep / val.allStep) * 100)) || 0
|
||||
|
||||
mqttFileName.value = val.fileName
|
||||
downLoading.value=true
|
||||
if (adminInfo.userIndex != val.userId) return
|
||||
downLoading.value = true
|
||||
if (status.value == 100) {
|
||||
downLoadDeviceFilePath({ nDid: fileData.value.nDid, name: fileData.value.prjDataPath }).then((ress: any) => {
|
||||
if (ress.code == 'A0000') {
|
||||
@@ -196,9 +198,11 @@ defineExpose({ open, setStatus })
|
||||
margin: 10px 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.progress_left {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.progress_right {
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
|
||||
@@ -113,6 +113,12 @@
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="统计类型" label-width="80px">
|
||||
<el-select style="width: 120px" v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="值类型">
|
||||
<el-select style="width: 12px !important" v-model="searchForm.dataLevel">
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
@@ -129,12 +135,7 @@
|
||||
:value="vv"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="统计类型" label-width="80px">
|
||||
<el-select style="width: 120px" v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="handleExport">
|
||||
@@ -756,7 +757,8 @@ const formatCountOptions = (list: any) => {
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
tableHeaderRef.value && tableHeaderRef.value[activeName.value]?.computedSearchRow()
|
||||
|
||||
tableHeaderRef.value && tableHeaderRef.value?.computedSearchRow()
|
||||
}, 100)
|
||||
}
|
||||
const flag = ref(false)
|
||||
|
||||
Reference in New Issue
Block a user