修改资料库

src/views/pqs/database/case/components/drawer.vue

@@ -2,34 +2,75 @@
     <div>
         <el-drawer v-model="drawer" size="1000px">
             <el-collapse v-model="activeName" accordion>
-                <el-collapse-item title="典型电能质量干扰源" name="1"></el-collapse-item>
-                <el-collapse-item title="典型干扰源电能质量治理措施" name="2">
-                    <iframe
-                        src="http://192.168.1.22:9009/excelreport//supervision/%E5%86%80%E5%8C%97%E8%B5%84%E6%96%99%E5%BA%93%E9%9C%80%E6%B1%82%E6%95%B4%E7%90%86-%E6%89%B9%E6%B3%A8.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20240913%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240913T013952Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=9f8dc2ccb166d7c5508ecd4e9a94b9af907009a962b1eae299cd08636b9fa3ce"
-                        frameborder="0"
-                    ></iframe>
+                <!-- <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" />
+                        <vue-office-pdf v-if="url.includes('.pdf')" :src="url" />
+                        <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'
 const drawer = ref(false)
 const activeName = ref('2')
-const open = () => {
+const num = ref(0)
+import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
+const url = ref('')
+const open = (row: any) => {
+    // console.log('🚀 ~ open ~ row:', row)
+    // url.value = row
     drawer.value = true
+
+    getFileNameAndFilePath({ filePath: row }).then(res => {
+        url.value = res.data.url
+    })
 }
 
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
 /* 设置iframe的样式 */
-iframe {
+.iframe {
     width: 100%; /* 宽度设置为父容器的100% */
-    height: calc(100vh - 210px); /* 高度根据需要设置 */
+    height: calc(100vh - 110px); /* 高度根据需要设置 */
     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);
+    }
 }
 </style>