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

<!-- 设备文件下载 -->
<template>
    <div :class="downLoading ? 'all_disabled' : ''">
        <el-dialog v-model.trim="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="progress_left">
                        正在下载：
                        {{
                            // fileData?.prjDataPath
                            // ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
                            // : '/'
                            mqttFileName
                        }}
                    </div>
                    <div class="progress_right">
                        <el-progress :percentage="status" />
                    </div>
                </div>
                <el-descriptions title="" style="margin: 10px 0" :column="2" :border="true">
                    <el-descriptions-item label="文件名称">
                        {{
                            fileData?.prjDataPath
                                ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
                                : '/'
                        }}
                    </el-descriptions-item>
                    <el-descriptions-item label="文件大小">
                        {{ fileData?.size ? fileData?.size + '字节' : '/' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="文件时间">
                        {{ fileData?.startTime ? fileData?.startTime : '/' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="文件校验码">
                        {{ fileData?.fileCheck ? fileData?.fileCheck : '/' }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <template #footer>
                <div class="dialog-footer download_status">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
                        {{ downLoading ? '下载中...' : '下载' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, onUnmounted, defineEmits } from 'vue'
import {
    getFileServiceFileOrDir,
    downLoadDeviceFile,
    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 = () => {
    status.value = 0
    mqttFileName.value = ''
    downLoading.value = false
    dialogVisible.value = false
}
//文件信息
const fileData: any = ref({})
//文件名称信息
const fileNameInfoMation = ref<any>('')
const open = async (row: any, id: any) => {
    status.value = 0
    fileData.value = {}
    dialogVisible.value = true
    loading.value = true
    const obj = {
        nDid: id,
        name: row.prjDataPath,
        type: row.type
    }
    await getFileServiceFileOrDir(obj).then((res: any) => {
        if (res.code == 'A0000') {
            if (res.data && res.data.length != 0) {
                fileData.value = res.data[0]
                fileData.value.nDid = id
                if (fileData.value && fileData.value.prjDataPath) {
                    fileNameInfoMation.value =
                        fileData.value.prjDataPath.split('/')[fileData.value.prjDataPath.split('/').length - 1]
                } else {
                    fileNameInfoMation.value = '/'
                }
            }
            loading.value = false
        }
    })
}
const handleDownLoad = () => {
    const obj = {
        nDid: fileData.value.nDid,
        name: fileData.value.prjDataPath,
        size: fileData.value.size,
        fileCheck: fileData.value.fileCheck
    }
    downLoading.value = true
    downLoadDeviceFile(obj)
        .then((res: any) => {
            if (res.code == 'A0000') {
                // downLoadFile(res.data).then((resp: any) => {
                //     if (resp.type != 'application/json') {
                //         // 'application/vnd.ms-excel'
                //         let blob = new Blob([resp], { type: resp.type })
                //         const url = window.URL.createObjectURL(blob)
                //         const link = document.createElement('a')
                //         link.href = url
                //         link.download = fileData.value?.prjDataPath
                //             ? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
                //             : '/'
                //         document.body.appendChild(link)
                //         downLoading.value = false
                //         link.click()
                //         status.value = 100
                //         ElMessage.success('文件下载成功')
                //         link.remove()
                //         handleClose()
                //     } else {
                //         if (resp.code == 'A0000') {
                //             window.open(res.data, '_blank')
                //             downLoading.value = false
                //             ElMessage.success(resp.message)
                //             handleClose()
                //         }
                //     }
                // })
            }
        })
        .catch(e => {
            console.log(e, '0000000')
            if (e) {
                downLoading.value = false
            }
        })
}
onMounted(() => { })
onUnmounted(() => { })
const status = ref(0)
const mqttFileName = ref('')
const setStatus = (val: any) => {
    status.value = parseInt(Number((val.nowStep / val.allStep) * 100)) || 0

    mqttFileName.value = val.fileName
    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') {
                downLoadFile(ress.data).then((resp: any) => {
                    if (resp.type != 'application/json') {
                        // 'application/vnd.ms-excel'
                        let blob = new Blob([resp], { type: resp.type })
                        const url = window.URL.createObjectURL(blob)
                        const link = document.createElement('a')
                        link.href = url
                        link.download = fileData.value?.prjDataPath
                            ? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
                            : '/'
                        document.body.appendChild(link)
                        downLoading.value = false
                        link.click()
                        status.value = 100
                        ElMessage.success('文件下载成功')
                        link.remove()
                        handleClose()
                    } else {
                        if (resp.code == 'A0000') {
                            window.open(ress.data, '_blank')
                            downLoading.value = false
                            ElMessage.success(resp.message)
                            handleClose()
                        }
                    }
                })
            }
        })
    }
}
defineExpose({ open, setStatus })
</script>
<style lang="scss" scoped>
.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>