136 lines
4.4 KiB
Vue
136 lines
4.4 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" draggable title="详情" width="1300">
|
|
|
|
<el-descriptions :column="2" border>
|
|
|
|
<el-descriptions-item label="电能质量事件名称">{{ tableData.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="事件经过">{{ tableData.process }}</el-descriptions-item>
|
|
<el-descriptions-item label="处理措施">{{ tableData.measures }}</el-descriptions-item>
|
|
<el-descriptions-item label="治理效果">{{ tableData.effect }}</el-descriptions-item>
|
|
<el-descriptions-item label="附件" :span="3">
|
|
<div v-for="item in tableData.urlList">
|
|
<div style="display: flex;align-items: center;">
|
|
<div>{{ item.name }}</div>
|
|
|
|
<el-icon class="elView" v-if="item.name" @click="view(item)">
|
|
<View />
|
|
</el-icon>
|
|
<el-icon class="elView" v-if="item.name" @click="download(item)">
|
|
<Download />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</el-descriptions-item>]
|
|
<div>
|
|
<el-descriptions-item label="事件简介">
|
|
<div class='editor' v-html="tableData.summary"></div>
|
|
</el-descriptions-item>
|
|
</div>
|
|
</el-descriptions>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
|
|
<vxe-column field="name" title="名称"></vxe-column>
|
|
<vxe-column title="操作" width="150">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link @click="view(row)">查看</el-button>
|
|
<el-button type="primary" link @click="download(row)">下载</el-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table> -->
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
|
import { Download, View } from '@element-plus/icons-vue'
|
|
|
|
const dialogVisible = ref(false)
|
|
const tableData: any = ref({
|
|
|
|
})
|
|
const open = (row: any) => {
|
|
tableData.value = {}
|
|
tableData.value = row
|
|
tableData.value.urlList = []
|
|
row.url.split(',').map((v: any) => {
|
|
tableData.value.urlList.push({ name: v.split('/supervision/')[1], url: v })
|
|
})
|
|
dialogVisible.value = true
|
|
}
|
|
const view = (row: any) => {
|
|
window.open(window.location.origin + '/#/previewFile?' + row.url)
|
|
}
|
|
const download = (row: any) => {
|
|
let url = row.url
|
|
let urls = url
|
|
let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
|
|
downloadFile({ filePath: url }).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>
|
|
:deep(.el-descriptions__label) {
|
|
width: 160px;
|
|
}
|
|
|
|
.elView {
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
color: #0000EE;
|
|
}
|
|
.editor {
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
td {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|