文件服务修改
This commit is contained in:
@@ -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"
|
||||
@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>
|
||||
@@ -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="请输入文件或文件夹名称"
|
||||
clearable v-model="filterFileName" 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">
|
||||
@@ -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"
|
||||
@click="handleDelDirOrFile(item)" circle>
|
||||
<el-button
|
||||
v-if="activePath && activePath != '/'"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelDirOrFile(item)"
|
||||
circle
|
||||
>
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
@@ -62,25 +80,14 @@
|
||||
<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'"
|
||||
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>
|
||||
{{
|
||||
@@ -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-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>
|
||||
@@ -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,7 +297,8 @@ const handleIntoDir = (row: any) => {
|
||||
if (activePathList.value.indexOf(obj.name) == -1) {
|
||||
activePathList.value.push({ path: obj.name })
|
||||
}
|
||||
getFileServiceFileOrDir(obj).then(res => {
|
||||
getFileServiceFileOrDir(obj)
|
||||
.then(res => {
|
||||
dirList.value = res.data
|
||||
loading.value = false
|
||||
currentDirList.value = res.data
|
||||
@@ -297,10 +308,10 @@ const handleIntoDir = (row: any) => {
|
||||
}
|
||||
})
|
||||
isRoot.value = false
|
||||
}).catch(e => {
|
||||
})
|
||||
.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,7 +343,8 @@ const handleIntoByPath = async (val: any) => {
|
||||
}
|
||||
activePath.value = val.path
|
||||
loading.value = true
|
||||
getFileServiceFileOrDir(obj).then(res => {
|
||||
getFileServiceFileOrDir(obj)
|
||||
.then(res => {
|
||||
dirList.value = res.data
|
||||
activePathList.value.map((item: any, index: any) => {
|
||||
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||
@@ -341,10 +352,10 @@ const handleIntoByPath = async (val: any) => {
|
||||
}
|
||||
})
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch(e => {
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
}
|
||||
const form = ref({
|
||||
path: ''
|
||||
@@ -363,7 +374,8 @@ 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' })
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
loading.value = false
|
||||
dirList.value = resp.data
|
||||
@@ -376,15 +388,11 @@ const reloadCurrentMenu = (msg: string) => {
|
||||
loading.value = false
|
||||
if (!msg) return
|
||||
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
||||
|
||||
|
||||
}
|
||||
}).catch(e => {
|
||||
})
|
||||
.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,11 +430,9 @@ const handleDelDirOrFile = (row: any) => {
|
||||
cancelButtonText: '取消',
|
||||
customClass: 'customInput',
|
||||
inputType: 'text'
|
||||
})
|
||||
.then(({ value }) => {
|
||||
}).then(({ value }) => {
|
||||
if (!value) {
|
||||
ElMessage.warning('请输入密码')
|
||||
|
||||
} else {
|
||||
loading.value = true
|
||||
passwordConfirm(value)
|
||||
@@ -435,7 +440,6 @@ const handleDelDirOrFile = (row: 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 })
|
||||
@@ -448,15 +452,14 @@ const handleDelDirOrFile = (row: any) => {
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
const changeType = ref<any>('')
|
||||
//下载文件
|
||||
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)
|
||||
;(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)
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
<div class="progress_left">
|
||||
正在下载:
|
||||
{{
|
||||
fileData?.prjDataPath
|
||||
? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
|
||||
: '/'
|
||||
// fileData?.prjDataPath
|
||||
// ? 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>
|
||||
|
||||
Reference in New Issue
Block a user