Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改文件预览

Browse Source
This commit is contained in:
guanj
2025-12-25 13:19:24 +08:00
parent 454d612a32
commit 17589e30da
4 changed files with 121 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/PreviewFile/index.vue
View File

@@ -1,11 +1,19 @@
<template> <template>
<div style="overflow: auto; height: 100vh"> <div style="overflow: auto; height: 100vh">
<vue-office-docx v-if="urlKey.includes('.doc') || urlKey.includes('.docx')" :src="url" /> <vue-office-docx v-if="urlKey.includes('.doc') || urlKey.includes('.docx')" :src="url" />
<vue-office-excel v-if="urlKey.includes('.xls') || urlKey.includes('.xlsx')" :src="url" :options="excelOptions" /> <vue-office-excel
v-if="urlKey.includes('.xls') || urlKey.includes('.xlsx')"
:src="url"
:options="excelOptions"
/>
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> --> <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
<iframe v-if="urlKey.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe> <iframe v-if="urlKey.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
<img v-if="urlKey.includes('.png') || urlKey.includes('.jpg') || urlKey.includes('.gif') || urlKey.includes('.bmp')" <img
:src="url" /> v-if="
urlKey.includes('.png') || urlKey.includes('.jpg') || urlKey.includes('.gif') || urlKey.includes('.bmp')
"
:src="url"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -19,7 +27,7 @@ import VueOfficeExcel from '@vue-office/excel'
//引入VueOfficePdf组件 //引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf' import VueOfficePdf from '@vue-office/pdf'
import { downloadFile } from '@/api/system-boot/file' import { downloadFile } from '@/api/system-boot/file'
import{previewFile} from '@/utils/fileDownLoad' import { previewFile } from '@/utils/fileDownLoad'
const { push, options, currentRoute } = useRouter() const { push, options, currentRoute } = useRouter()
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei' const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
@@ -27,15 +35,16 @@ const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
const url = ref('') const url = ref('')
const excelOptions = ref({}) const excelOptions = ref({})
const urlKey = currentRoute.value?.href?.split('?')[1] const urlKey = currentRoute.value?.href?.split('?')[1]
if(VITE_FLAG){ if (VITE_FLAG) {
url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1] url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
excelOptions.value = ref({ excelOptions.value = ref({
xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
}) })
}else{ } else {
setTimeout(async () => {
const previewUrl = await previewFile(currentRoute.value?.href?.split('?')[1]) const previewUrl = await previewFile(currentRoute.value?.href?.split('?')[1])
url.value = previewUrl url.value = previewUrl
}, 0)
} }
onMounted(() => { onMounted(() => {

131
src/utils/fileDownLoad.ts
View File

@@ -1,38 +1,48 @@
import { downloadFile } from '@/api/system-boot/file' import { downloadFile } from '@/api/system-boot/file'
// 下载文件 // 下载文件
export const download = (urls: any) => { export const download = (urls: string) => {
console.log('下载',urls) console.log('下载', urls)
downloadFile({ filePath: urls }).then((res: any) => {
let blob = new Blob([res], { downloadFile({ filePath: urls })
type: urls.includes('.pdf') .then((res: any) => {
? 'application/pdf' // 1. 确定文件MIME类型（优化：用更简洁的方式）
: urls.includes('.zip') const getFileType = (url: string) => {
? 'application/zip' const ext = url.split('.').pop()?.toLowerCase() || ''
: urls.includes('.doc') const mimeMap: Record<string, string> = {
? 'application/msword' pdf: 'application/pdf',
: urls.includes('.docx') zip: 'application/zip',
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' doc: 'application/msword',
: urls.includes('.xls') docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
? 'application/vnd.ms-excel' xls: 'application/vnd.ms-excel',
: urls.includes('.xlsx') xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' png: 'image/png',
: urls.includes('.png') jpeg: 'image/jpeg',
? 'image/png' jpg: 'image/jpg'
: urls.includes('.jpeg') }
? 'image/jpeg' return mimeMap[ext] || ''
: urls.includes('.jpg') }
? 'image/jpg'
: '' const blob = new Blob([res], { type: getFileType(urls) })
// 2. 提取文件名并保留原生后缀（核心修复点）
const fileName = urls.split('/').at(-1) || '下载文件' // 先提取URL最后一段（文件名）
// 3. 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName // 直接使用原文件名（保留后缀）
document.body.appendChild(link)
link.click()
// 4. 清理资源（优化）
link.remove()
window.URL.revokeObjectURL(url) // 释放blob URL
})
.catch(err => {
console.error('下载失败：', err)
// 可添加错误提示（如Toast）
}) })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
let name = removeLastDotSuffix(urls.split('/')[2])
link.href = url
link.download = name
document.body.appendChild(link)
link.click()
link.remove()
})
} }
function removeLastDotSuffix(str: string) { function removeLastDotSuffix(str: string) {
// 找到最后一个 . 的位置 // 找到最后一个 . 的位置
@@ -41,35 +51,40 @@ function removeLastDotSuffix(str: string) {
return lastDotIndex !== -1 ? str.slice(0, lastDotIndex) : str return lastDotIndex !== -1 ? str.slice(0, lastDotIndex) : str
} }
// 预览文件 // 预览文件
export const previewFile = async (urls: any) => { export const previewFile = async (urls: any) => {
console.log('预览',urls) console.log('预览', urls)
let url = '' let url = ''
await downloadFile({ filePath: urls }).then((res: any) => {
let blob = new Blob([res], { await downloadFile({ filePath: decodeURI(urls) })
type: urls.includes('.pdf') .then((res: any) => {
? 'application/pdf' // 1. 确定文件MIME类型（优化：用更简洁的方式）
: urls.includes('.zip') const getFileType = (url: string) => {
? 'application/zip' const ext = url.split('.').pop()?.toLowerCase() || ''
: urls.includes('.doc') const mimeMap: Record<string, string> = {
? 'application/msword' pdf: 'application/pdf',
: urls.includes('.docx') zip: 'application/zip',
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' doc: 'application/msword',
: urls.includes('.xls') docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
? 'application/vnd.ms-excel' xls: 'application/vnd.ms-excel',
: urls.includes('.xlsx') xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' png: 'image/png',
: urls.includes('.png') jpeg: 'image/jpeg',
? 'image/png' jpg: 'image/jpg'
: urls.includes('.jpeg') }
? 'image/jpeg' return mimeMap[ext] || ''
: urls.includes('.jpg') }
? 'image/jpg'
: '' const blob = new Blob([res], { type: getFileType(decodeURI(urls)) })
// 3. 创建下载链接
url = window.URL.createObjectURL(blob)
}) })
url = window.URL.createObjectURL(blob) .catch(err => {
}) console.error('下载失败：', err)
console.log('url',url) // 可添加错误提示（如Toast）
})
console.log('url', url)
return url return url
} }

6
src/views/pqs/database/stencil/index.vue
View File

@@ -59,9 +59,9 @@ const tableStore = new TableStore({
type: 'primary', type: 'primary',
icon: 'el-icon-Plus', icon: 'el-icon-Plus',
render: 'basicButton', render: 'basicButton',
disabled: row => { // disabled: row => {
return !VITE_FLAG // return !VITE_FLAG
}, // },
click: row => { click: row => {
window.open(window.location.origin + '/#/previewFile?' + row.url) window.open(window.location.origin + '/#/previewFile?' + row.url)
} }

46
src/views/pqs/supervise/electricalEnergy/components1/form/abnormal.vue
View File

@@ -12,7 +12,7 @@
> >
<vxe-column type="seq" title="序号" width="60px"></vxe-column> <vxe-column type="seq" title="序号" width="60px"></vxe-column>
<!-- <vxe-column field="date" title="日期"></vxe-column> --> <!-- <vxe-column field="date" title="日期"></vxe-column> -->
<vxe-column field="name" title="统计日期"></vxe-column> <vxe-column field="date" title="统计日期"></vxe-column>
<!-- <vxe-column field="monitorName" title="监测点名称"></vxe-column> <!-- <vxe-column field="monitorName" title="监测点名称"></vxe-column>
<vxe-column field="timeSum" title="异常天数" width="80px"> <vxe-column field="timeSum" title="异常天数" width="80px">
<template v-slot="{ row }"> <template v-slot="{ row }">
@@ -25,19 +25,23 @@
<div style="width: 920px" v-loading="loading1"> <div style="width: 920px" v-loading="loading1">
<el-form :inline="true" class="form"> <el-form :inline="true" class="form">
<!-- <el-form-item label="统计日期"> <el-form-item label="统计指标">
<el-select <el-select
v-model="timeList" v-model="targetKey"
multiple filterable
collapse-tags
clearable clearable
placeholder="请选择异常天数" placeholder="请选择指标"
style="width: 200px" style="width: 150px"
@change="init"
> >
<el-option v-for="item in dateList" :key="item" :label="item" :value="item" /> <el-option
v-for="item in targetList"
:key="item.key"
:label="item.targetName"
:value="item.key"
/>
</el-select> </el-select>
</el-form-item> --> </el-form-item>
<el-form-item class="form_but"> <el-form-item class="form_but">
<span class="mr20"> <span class="mr20">
异常时间： 异常时间：
@@ -58,7 +62,6 @@
height="auto" height="auto"
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
v-bind="defaultAttribute" v-bind="defaultAttribute"
> >
<vxe-column type="seq" title="序号" width="80px"> <vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }"> <template #default="{ rowIndex }">
@@ -147,6 +150,7 @@ const targetKey = ref('')
const errCount = ref('') const errCount = ref('')
const timeSum = ref('') const timeSum = ref('')
const timeList = ref([]) const timeList = ref([])
const targetList = ref([])
const showColumn = ref(true) const showColumn = ref(true)
const open = (data: anyObj, time: string[]) => { const open = (data: anyObj, time: string[]) => {
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情' // title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
@@ -157,18 +161,15 @@ const open = (data: anyObj, time: string[]) => {
timeList.value = [] timeList.value = []
targetKey.value = data.key targetKey.value = data.key
monitorAbnormalTable({ monitorAbnormalTable({
monitorIds:[data.lineId], monitorIds: [data.lineId],
targetKey: '', targetKey: '',
searchBeginTime: time[0], searchBeginTime: time[0],
searchEndTime: time[1] searchEndTime: time[1]
}) })
.then(async res => { .then(async res => {
TableData.value = res.data TableData.value = res.data
timeList.value = TableData.value[0]?.dateList.map((item: any) => { timeList.value = TableData.value[0]?.dateTargetList
return { targetList.value = timeList.value[0].targetKeys
name: item
}
})
await tableRef.value.setCurrentRow(timeList.value[0]) await tableRef.value.setCurrentRow(timeList.value[0])
await currentChangeEvent() await currentChangeEvent()
loading.value = false loading.value = false
@@ -180,7 +181,10 @@ const open = (data: anyObj, time: string[]) => {
} }
const currentChangeEvent = () => { const currentChangeEvent = () => {
let data = tableRef.value.getCurrentRecord() let data = tableRef.value.getCurrentRecord()
targetList.value = data.targetKeys
if (!targetList.value.some(item => item.key == targetKey.value)) {
targetKey.value = ''
}
// dateList.value = data.dateList // dateList.value = data.dateList
//[data.dateList[0]] //[data.dateList[0]]
init() init()
@@ -191,9 +195,9 @@ const init = () => {
let data = tableRef.value.getCurrentRecord() let data = tableRef.value.getCurrentRecord()
monitorAbnormalTableDetail({ monitorAbnormalTableDetail({
monitorIds: [TableData.value[0]?.monitorId], monitorIds: [TableData.value[0]?.monitorId],
time: [data.name], time: [data.date],
searchBeginTime: TableData.value[0].date, searchBeginTime: TableData.value[0].date,
targetKey: '' targetKey: targetKey.value
}) })
.then(res => { .then(res => {
errCount.value = res.data.errCount errCount.value = res.data.errCount
@@ -234,7 +238,7 @@ defineExpose({ open })
// justify-content: end; // justify-content: end;
// position: relative; // position: relative;
// .form_but { // .form_but {
// right: -22px; // right: -22px;
// } // }
} }