471 lines
15 KiB
Vue
471 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 监测点列表 -->
|
||
<TableHeader
|
||
ref="TableHeaderRef"
|
||
:showReset="false"
|
||
@selectChange="selectChange"
|
||
v-if="fullscreen"
|
||
:timeKeyList="prop.timeKey"
|
||
>
|
||
<template #select>
|
||
<el-form-item label="关键字筛选">
|
||
<el-input
|
||
maxlength="32"
|
||
show-word-limit
|
||
style="width: 240px"
|
||
v-model.trim="tableStore.table.params.searchValue"
|
||
clearable
|
||
placeholder="请输入监测点名称"
|
||
/>
|
||
</el-form-item>
|
||
</template>
|
||
</TableHeader>
|
||
<Table
|
||
ref="tableRef"
|
||
@cell-click="cellClickEvent"
|
||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
||
></Table>
|
||
<!-- 指标越限详情 -->
|
||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||
|
||
<!-- 上传对话框 -->
|
||
<el-dialog
|
||
v-model="uploadDialogVisible"
|
||
title="上传报告"
|
||
append-to-body
|
||
width="500px"
|
||
@closed="handleDialogClosed"
|
||
>
|
||
<el-upload
|
||
ref="uploadRef"
|
||
class="upload-demo"
|
||
action=""
|
||
accept=".doc,.docx,.PDF"
|
||
:on-change="handleChange"
|
||
:before-upload="beforeUpload"
|
||
:limit="1"
|
||
:auto-upload="false"
|
||
:on-exceed="handleExceed"
|
||
:on-remove="handleRemove"
|
||
:file-list="fileList"
|
||
>
|
||
<el-button type="primary">点击上传</el-button>
|
||
<template #tip>
|
||
<div class="el-upload__tip">请上传Word或PDF文件</div>
|
||
</template>
|
||
</el-upload>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="handleUpload">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import Table from '@/components/table/index.vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue'
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit'
|
||
import { getTime } from '@/utils/formatTime'
|
||
|
||
const prop = defineProps({
|
||
w: { type: [String, Number] },
|
||
h: { type: [String, Number] },
|
||
width: { type: [String, Number] },
|
||
height: { type: [String, Number] },
|
||
timeKey: { type: Array as () => string[] },
|
||
timeValue: { type: Object },
|
||
interval: { type: Number }
|
||
})
|
||
|
||
const headerHeight = ref(57)
|
||
|
||
const TableHeaderRef = ref()
|
||
|
||
// 上传相关
|
||
const uploadDialogVisible = ref(false)
|
||
const currentUploadRow = ref<any>(null)
|
||
const uploadRef = ref()
|
||
const fileList = ref([])
|
||
|
||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||
headerHeight.value = height
|
||
|
||
// if (datePickerValue && datePickerValue.timeValue) {
|
||
// // 更新时间参数
|
||
// tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||
// tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||
// }
|
||
}
|
||
|
||
// 计算是否全屏展示
|
||
const fullscreen = computed(() => {
|
||
const w = Number(prop.w)
|
||
const h = Number(prop.h)
|
||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||
// 执行相应逻辑
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
|
||
const OverLimitDetailsRef = ref()
|
||
const tableStore: any = new TableStore({
|
||
url: '/cs-device-boot/csline/getSensitiveUserLineList',
|
||
method: 'POST',
|
||
showPage: fullscreen.value ? true : false,
|
||
exportName: '监测点列表',
|
||
column: [
|
||
{
|
||
field: 'index',
|
||
title: '序号',
|
||
width: '80',
|
||
formatter: (row: any) => {
|
||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||
}
|
||
},
|
||
{
|
||
title: '监测点名称',
|
||
field: 'lineName',
|
||
minWidth: '120',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
|
||
}
|
||
},
|
||
{
|
||
title: '监测类型',
|
||
field: 'position',
|
||
minWidth: '80',
|
||
formatter: (row: any) => {
|
||
return row.cellValue || '/'
|
||
}
|
||
},
|
||
// {
|
||
// title: '监测点状态',
|
||
// field: 'runStatus',
|
||
// minWidth: '90',
|
||
// render: 'customTemplate',
|
||
// customTemplate: (row: any) => {
|
||
// return `<span style='color: ${row.runStatus === '中断' ? '#FF0000' : ''}'>${row.runStatus==null?'/':row.runStatus}</span>`
|
||
// }
|
||
// },
|
||
{
|
||
title: '监测点状态',
|
||
field: 'runStatus',
|
||
render: 'tag',
|
||
|
||
width: 100,
|
||
custom: {
|
||
停运: 'danger',
|
||
退运: 'danger',
|
||
运行: 'success',
|
||
在线: 'success',
|
||
中断: 'warning',
|
||
离线: 'danger',
|
||
检修: 'warning',
|
||
调试: 'warning',
|
||
null: 'info'
|
||
},
|
||
replaceValue: {
|
||
运行: '运行',
|
||
在线: '在线',
|
||
退运: '退运',
|
||
停运: '停运',
|
||
中断: '中断',
|
||
检修: '检修',
|
||
离线: '离线',
|
||
调试: '调试',
|
||
null: '/'
|
||
}
|
||
},
|
||
{
|
||
title: '治理对象',
|
||
field: 'sensitiveUser',
|
||
minWidth: '90',
|
||
formatter: (row: any) => {
|
||
return row.cellValue || '/'
|
||
}
|
||
},
|
||
|
||
{
|
||
title: '电压等级',
|
||
field: 'volGrade',
|
||
minWidth: '80',
|
||
formatter: (row: any) => {
|
||
return row.cellValue == 0 ? '/' : row.cellValue + 'kV' || '/'
|
||
}
|
||
},
|
||
{
|
||
title: '是否治理',
|
||
field: 'govern',
|
||
minWidth: '80',
|
||
formatter: (row: any) => {
|
||
return row.cellValue || '/'
|
||
}
|
||
},
|
||
|
||
{
|
||
title: '最新数据时间',
|
||
field: 'latestTime',
|
||
minWidth: '140',
|
||
render: 'customTemplate',
|
||
customTemplate: (row: any) => {
|
||
if (row.latestTime) {
|
||
return `<span>${row.latestTime}</span>`
|
||
} else {
|
||
return `<span>/</span>`
|
||
}
|
||
}
|
||
},
|
||
// {
|
||
// title: '报告',
|
||
// field: 'reportFilePath',
|
||
// minWidth: '120',
|
||
// render: 'customTemplate',
|
||
// customTemplate: (row: any) => {
|
||
// return row.reportFilePath == null
|
||
// ? '/'
|
||
// : `<span style='cursor: pointer;text-decoration: underline;'>${row.reportFilePath
|
||
// .split('/')
|
||
// .pop()}</span>`
|
||
// }
|
||
// },
|
||
{
|
||
title: '报告',
|
||
field: 'reportFilePath',
|
||
minWidth: '120',
|
||
formatter: (row: any) => {
|
||
return row.cellValue == null ? '/' : row.cellValue.split('/').pop()
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
fixed: 'right',
|
||
width: 150,
|
||
render: 'buttons',
|
||
buttons: [
|
||
{
|
||
name: 'productSetting',
|
||
title: '上传报告',
|
||
type: 'primary',
|
||
icon: 'el-icon-upload',
|
||
render: 'basicButton',
|
||
click: row => {
|
||
uploadReportRow(row)
|
||
},
|
||
disabled: row => {
|
||
return row.reportFilePath
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'productSetting',
|
||
title: '下载报告',
|
||
type: 'primary',
|
||
icon: 'el-icon-EditPen',
|
||
render: 'basicButton',
|
||
click: row => {
|
||
downloadTheReport(row.lineId, row.reportFilePath)
|
||
},
|
||
disabled: row => {
|
||
return row.reportFilePath == null || row.reportFilePath.length == 0
|
||
}
|
||
},
|
||
{
|
||
name: 'productSetting',
|
||
title: '重新上传',
|
||
type: 'primary',
|
||
icon: 'el-icon-upload',
|
||
render: 'basicButton',
|
||
click: row => {
|
||
uploadReportRow(row)
|
||
},
|
||
disabled: row => {
|
||
return row.reportFilePath == null || row.reportFilePath.length == 0
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
beforeSearchFun: () => {
|
||
setTime()
|
||
},
|
||
loadCallback: () => {
|
||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||
}
|
||
})
|
||
|
||
const tableRef = ref()
|
||
provide('tableRef', tableRef)
|
||
tableStore.table.params.keywords = ''
|
||
tableStore.table.params.searchValue = ''
|
||
provide('tableStore', tableStore)
|
||
|
||
const setTime = () => {
|
||
// const time = getTime(
|
||
// (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||
// prop.timeKey,
|
||
// fullscreen.value
|
||
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||
// : prop.timeValue
|
||
// )
|
||
// if (Array.isArray(time)) {
|
||
// tableStore.table.params.searchBeginTime = time[0]
|
||
// tableStore.table.params.searchEndTime = time[1]
|
||
// TableHeaderRef.value?.setInterval(time[2] - 0)
|
||
// TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||
// } else {
|
||
// console.warn('获取时间失败，time 不是一个有效数组')
|
||
// }
|
||
}
|
||
|
||
// 点击行
|
||
const cellClickEvent = ({ row, column }: any) => {
|
||
if (column.field == 'lineName') {
|
||
OverLimitDetailsRef.value.open(
|
||
row,
|
||
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||
tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
||
)
|
||
}
|
||
}
|
||
|
||
// 下载报告
|
||
const downloadTheReport = (lineId: string, name: string) => {
|
||
getReportUrl({ lineId: lineId }).then((res: any) => {
|
||
forceDownloadPdf(res.data, name.split('/').pop() || '')
|
||
})
|
||
}
|
||
const forceDownloadPdf = async (pdfUrl, fileName = '文件.pdf') => {
|
||
try {
|
||
// 1. 请求 PDF 并转为 Blob（关键：绕开浏览器直接解析）
|
||
const response = await fetch(pdfUrl, {
|
||
method: 'GET'
|
||
// 若需要鉴权，添加请求头（如 token）
|
||
})
|
||
|
||
// 校验响应是否成功
|
||
if (!response.ok) throw new Error(`请求失败：${response.status}`)
|
||
|
||
// 2. 将响应转为 Blob（指定类型为 PDF，确保兼容性）
|
||
const blob = await response.blob()
|
||
const pdfBlob = new Blob([blob], { type: 'application/pdf' })
|
||
|
||
// 3. 创建临时 URL 并触发下载
|
||
const blobUrl = URL.createObjectURL(pdfBlob)
|
||
const a = document.createElement('a')
|
||
a.href = blobUrl
|
||
a.download = fileName // 此时 Blob URL 是同源的，download 必生效
|
||
a.style.display = 'none'
|
||
document.body.appendChild(a)
|
||
a.click() // 触发下载
|
||
|
||
// 4. 清理资源（避免内存泄漏）
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(blobUrl)
|
||
} catch (error) {
|
||
console.error('PDF 下载失败：', error)
|
||
// ElMessage.error('文件下载失败，请检查网络或文件地址') // 适配 Element Plus
|
||
}
|
||
}
|
||
|
||
// 上传报告
|
||
const uploadReportRow = (row: any) => {
|
||
currentUploadRow.value = row
|
||
// 打开弹窗前清空文件列表
|
||
fileList.value = []
|
||
uploadDialogVisible.value = true
|
||
}
|
||
|
||
// 处理弹窗关闭事件
|
||
const handleDialogClosed = () => {
|
||
// 清空文件列表
|
||
fileList.value = []
|
||
}
|
||
|
||
// 处理文件超出限制
|
||
const handleExceed = (files: any) => {
|
||
ElMessage.warning('只能上传一个文件，请先删除已选择的文件')
|
||
}
|
||
const handleRemove = (files: any) => {
|
||
fileList.value = []
|
||
}
|
||
|
||
// 文件变更处理函数
|
||
const handleChange = (file: any) => {
|
||
// 在这里直接处理文件上传逻辑
|
||
// beforeUpload(file.raw) // 注意使用 file.raw 获取原始文件对象
|
||
fileList.value = [file] // 只保留最新选择的文件
|
||
}
|
||
|
||
// 处理上传前检查
|
||
const beforeUpload = (file: any) => {
|
||
const isWord =
|
||
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||
file.type === 'application/msword' ||
|
||
file.name.endsWith('.doc') ||
|
||
file.name.endsWith('.docx')
|
||
|
||
const isPDF = file.type === 'application/pdf' || file.name.endsWith('.pdf')
|
||
|
||
const isValidType = isWord || isPDF
|
||
const isLt10M = file.size / 1024 / 1024 < 10
|
||
|
||
if (!isValidType) {
|
||
ElMessage.error('请上传(.doc/.docx/.pdf)格式文件!')
|
||
return false
|
||
}
|
||
|
||
// 校验通过后允许上传，交由 http-request 处理
|
||
return true
|
||
}
|
||
|
||
const handleUpload = async () => {
|
||
// return
|
||
|
||
const formData = new FormData()
|
||
formData.append('file', fileList.value[0]?.raw)
|
||
formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '')
|
||
|
||
try {
|
||
const result = await uploadReport(formData)
|
||
ElMessage.success('上传成功')
|
||
uploadDialogVisible.value = false
|
||
tableStore.index()
|
||
return Promise.resolve(result)
|
||
} catch (error: any) {
|
||
ElMessage.error('上传失败: ' + (error.message || '未知错误'))
|
||
return Promise.reject(error)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
tableStore.index()
|
||
})
|
||
watch(
|
||
() => prop.timeKey,
|
||
val => {
|
||
tableStore.index()
|
||
}
|
||
)
|
||
watch(
|
||
() => prop.timeValue,
|
||
(newVal, oldVal) => {
|
||
tableStore.index()
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
</script>
|
||
<style lang="scss" scoped></style>
|