admin-sjzx/src/views/pqs/database/case/components/drawer.vue

<template>
    <div>
        <el-drawer v-model="drawer" size="60%">
            <div class="box mt20">
                <el-upload :show-file-list="false" action="" :auto-upload="false" class="ml10" :on-change="choose"
                    v-if="information">
                    <el-button icon="el-icon-Top" type="primary">上传常见治理措施</el-button>
                </el-upload>
                <el-button icon="el-icon-Download" type="primary" class="ml10" @click="downloadTheReport">
                    下载常见治理措施
                </el-button>
            </div>
            <el-collapse v-model="activeName" accordion>
                <!-- <el-collapse-item title="典型电能质量干扰源" name="1"></el-collapse-item> -->
                <el-collapse-item title="国家电网有限公司企业标准" name="2">
                    <!-- <el-empty description="暂无数据" class="custom-empty iframe" /> -->
                    <div :style="`overflow: auto;`" class="iframe">
                        <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
                        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
                            :options="excelOptions" />
                        <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
                        <iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
                        <img v-if="
                            url.includes('.png') ||
                            url.includes('.jpg') ||
                            url.includes('.gif') ||
                            url.includes('.bmp')
                        " :src="url" />
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-drawer>
    </div>
</template>
<script setup lang="ts">
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import { ref, reactive } from 'vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { ElMessage } from 'element-plus'
import { uploadFile, getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
import { addStandardCase, queryStandardCase } from '@/api/supervision-boot/database/index'
const adminInfo = useAdminInfo()
const drawer = ref(false)
const activeName = ref('2')
const num = ref(0)
const url = ref('')
const excelOptions = ref({})
const information = adminInfo.roleCode.includes('information_info')
const open = (row: any) => {
    // console.log('🚀 ~ open ~ row:', row)
    // url.value = row
    drawer.value = true
    url.value = `/api-docx/excelreport` + row
    excelOptions.value = { xls: row.split('.')[1] == 'xls' ? true : false }
    // getFileNameAndFilePath({ filePath: row }).then(res => {
    //     url.value = res.data.url
    // })
}
// 上传
const choose = (e: any) => {
    ElMessage.info('上传中,请稍等...')
    uploadFile(e.raw, '/supervision/').then((row: any) => {
        addStandardCase({ caseUrl: row.data.name }).then(res => {
            ElMessage.success('上传成功！')
            queryStandardCase().then(res => {
                open(res.data)
            })
        })
    })
    //
}
const downloadTheReport = () => {
    queryStandardCase().then(res => {
        let urls = res.data
        let name = urls.match(/\/([^/]+)\.(\w+)$/)[1]
        ElMessage.info('下载中,请稍等...')
        downloadFile({ filePath: urls }).then((res: any) => {
            let blob = new Blob([res], {
                type: urls.includes('.pdf')
                    ? 'application/pdf'
                    : urls.includes('.docx')
                        ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                        : urls.includes('.xls')
                            ? 'application/vnd.ms-excel'
                            : urls.includes('.xlsx')
                                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                : urls.includes('.png')
                                    ? 'image/png'
                                    : urls.includes('.jpeg')
                                        ? 'image/jpeg'
                                        : urls.includes('.jpg')
                                            ? 'image/jpg'
                                            : ''
            })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.href = url
            link.download = name
            document.body.appendChild(link)
            link.click()
            link.remove()
        })
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
/* 设置iframe的样式 */
.iframe {
    width: 100%;
    /* 宽度设置为父容器的100% */
    height: calc(100vh - 160px);
    /* 高度根据需要设置 */
    border: none;
    /* 移除边框 */
    transform: scale(1);
    /* 放大200% */
}

/* 自定义 el-empty 的样式 */
:deep(.custom-empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* 调整高度 */
    padding: 20px;

    /* 调整内边距 */
    .el-empty__image {
        display: none;
        /* 隐藏默认图片 */
    }

    .el-empty__description {
        font-size: 14px;
        /* 调整字体大小 */
        color: var(--vxe-font-color);
    }
}

.box {
    position: absolute;
    top: 0;
    display: flex;
}
</style>