<template>
|
<div class="hazard-report">
|
<!-- 搜索区域 -->
|
<div class="search-area">
|
<el-form :inline="true" :model="searchForm">
|
<el-form-item label="上报类型">
|
<el-select v-model="searchForm.reportType" placeholder="请选择类型" clearable>
|
<el-option label="线路巡检" value="线路巡检" />
|
<el-option label="安全设施巡检" value="安全设施巡检" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="严重程度">
|
<el-select v-model="searchForm.severity" placeholder="请选择程度" clearable>
|
<el-option label="轻微" value="轻微" />
|
<el-option label="一般" value="一般" />
|
<el-option label="严重" value="严重" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="整改状态">
|
<el-select v-model="searchForm.rectificationStatus" placeholder="请选择状态" clearable>
|
<el-option label="待整改" value="待整改" />
|
<el-option label="整改中" value="整改中" />
|
<el-option label="已完成" value="已完成" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="上报人">
|
<el-input v-model="searchForm.reporter" placeholder="请输入上报人" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 操作按钮 -->
|
<div class="actions">
|
<el-button type="primary" @click="handleAdd">上报隐患</el-button>
|
<el-button type="success" @click="handleExport">导出</el-button>
|
</div>
|
|
<!-- 隐患列表 -->
|
<el-table :data="reportList" style="width: 100%; margin-top: 10px;" border>
|
<el-table-column prop="reportType" label="上报类型" width="150" />
|
<el-table-column prop="facilityName" label="关联设施" width="150" />
|
<el-table-column prop="hazardDescription" label="隐患描述" min-width="200" show-overflow-tooltip />
|
<el-table-column prop="severity" label="严重程度" width="120">
|
<template #default="{ row }">
|
<el-tag :type="getSeverityType(row.severity)">
|
{{ row.severity }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="reporter" label="上报人" width="120" />
|
<el-table-column prop="reportTime" label="上报时间" width="180" />
|
<el-table-column prop="rectificationStatus" label="整改状态" width="120">
|
<template #default="{ row }">
|
<el-tag :type="getRectificationStatusType(row.rectificationStatus)">
|
{{ row.rectificationStatus }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="rectificationPerson" label="整改责任人" width="120" />
|
<el-table-column label="操作" width="280" fixed="right">
|
<template #default="{ row }">
|
<el-button
|
v-if="row.rectificationStatus === '待整改'"
|
type="warning"
|
link
|
@click="handleRectify(row)"
|
>
|
整改
|
</el-button>
|
<el-button
|
v-if="row.rectificationStatus === '已完成' && !row.acceptancePerson"
|
type="success"
|
link
|
@click="handleAccept(row)"
|
>
|
验收
|
</el-button>
|
<el-button type="primary" link @click="handleView(row)">查看</el-button>
|
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pagination.currentPage"
|
v-model:page-size="pagination.pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<!-- 上报隐患对话框 -->
|
<el-dialog title="上报隐患" v-model="showAddDialog" width="600px">
|
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
|
<el-form-item label="上报类型" prop="reportType">
|
<el-select v-model="addForm.reportType" placeholder="请选择类型">
|
<el-option label="线路巡检" value="线路巡检" />
|
<el-option label="安全设施巡检" value="安全设施巡检" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="关联设施">
|
<el-select v-model="addForm.facilityId" placeholder="请选择设施" clearable>
|
<el-option
|
v-for="item in facilityOptions"
|
:key="item.id"
|
:label="item.facilityName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="隐患描述" prop="hazardDescription">
|
<el-input type="textarea" v-model="addForm.hazardDescription" placeholder="请输入隐患描述" />
|
</el-form-item>
|
<el-form-item label="严重程度" prop="severity">
|
<el-select v-model="addForm.severity" placeholder="请选择程度">
|
<el-option label="轻微" value="轻微" />
|
<el-option label="一般" value="一般" />
|
<el-option label="严重" value="严重" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="上报人" prop="reporter">
|
<el-input v-model="addForm.reporter" placeholder="请输入上报人" />
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input type="textarea" v-model="addForm.remarks" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="submitAddForm">确定</el-button>
|
<el-button @click="showAddDialog = false">取消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 整改对话框 -->
|
<el-dialog title="记录整改结果" v-model="showRectifyDialog" width="500px">
|
<el-form :model="rectifyForm" label-width="100px">
|
<el-form-item label="隐患描述">
|
<el-input type="textarea" v-model="rectifyForm.hazardDescription" disabled />
|
</el-form-item>
|
<el-form-item label="整改责任人">
|
<el-input v-model="rectifyForm.rectificationPerson" placeholder="请输入整改责任人" />
|
</el-form-item>
|
<el-form-item label="整改描述">
|
<el-input type="textarea" v-model="rectifyForm.rectificationDescription" placeholder="请输入整改措施" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="submitRectify">确定</el-button>
|
<el-button @click="showRectifyDialog = false">取消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 验收对话框 -->
|
<el-dialog title="记录验收结果" v-model="showAcceptDialog" width="500px">
|
<el-form :model="acceptForm" label-width="100px">
|
<el-form-item label="整改描述">
|
<el-input type="textarea" v-model="acceptForm.rectificationDescription" disabled />
|
</el-form-item>
|
<el-form-item label="验收人">
|
<el-input v-model="acceptForm.acceptancePerson" placeholder="请输入验收人" />
|
</el-form-item>
|
<el-form-item label="验收结果">
|
<el-radio-group v-model="acceptForm.acceptanceResult">
|
<el-radio label="通过">通过</el-radio>
|
<el-radio label="不通过">不通过</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="submitAccept">确定</el-button>
|
<el-button @click="showAcceptDialog = false">取消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 查看详情对话框 -->
|
<el-dialog title="隐患详情" v-model="showViewDialog" width="600px">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="上报类型">{{ viewData.reportType }}</el-descriptions-item>
|
<el-descriptions-item label="关联设施">{{ viewData.facilityName }}</el-descriptions-item>
|
<el-descriptions-item label="隐患描述" :span="2">{{ viewData.hazardDescription }}</el-descriptions-item>
|
<el-descriptions-item label="严重程度">{{ viewData.severity }}</el-descriptions-item>
|
<el-descriptions-item label="上报人">{{ viewData.reporter }}</el-descriptions-item>
|
<el-descriptions-item label="上报时间">{{ viewData.reportTime }}</el-descriptions-item>
|
<el-descriptions-item label="整改状态">{{ viewData.rectificationStatus }}</el-descriptions-item>
|
<el-descriptions-item label="整改责任人">{{ viewData.rectificationPerson }}</el-descriptions-item>
|
<el-descriptions-item label="整改时间">{{ viewData.rectificationTime }}</el-descriptions-item>
|
<el-descriptions-item label="整改描述" :span="2">{{ viewData.rectificationDescription }}</el-descriptions-item>
|
<el-descriptions-item label="验收人">{{ viewData.acceptancePerson }}</el-descriptions-item>
|
<el-descriptions-item label="验收时间">{{ viewData.acceptanceTime }}</el-descriptions-item>
|
<el-descriptions-item label="验收结果">{{ viewData.acceptanceResult }}</el-descriptions-item>
|
</el-descriptions>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="showViewDialog = false">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import {
|
getHazardReportList,
|
addHazardReport,
|
rectifyHazardReport,
|
acceptHazardReport,
|
deleteHazardReport,
|
exportHazardReport
|
} from '@/api/safeProduction/hazardReport'
|
import { getSafetyFacilityList } from '@/api/equipmentManagement/safetyFacility'
|
|
// 搜索表单
|
const searchForm = reactive({
|
reportType: '',
|
severity: '',
|
rectificationStatus: '',
|
reporter: ''
|
})
|
|
// 分页数据
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
})
|
|
// 列表数据
|
const reportList = ref([])
|
|
// 设施选项
|
const facilityOptions = ref([])
|
|
// 对话框状态
|
const showAddDialog = ref(false)
|
const showRectifyDialog = ref(false)
|
const showAcceptDialog = ref(false)
|
const showViewDialog = ref(false)
|
|
// 上报表单
|
const addForm = reactive({
|
reportType: '',
|
facilityId: null,
|
hazardDescription: '',
|
severity: '',
|
reporter: '',
|
remarks: ''
|
})
|
|
// 上报表单验证规则
|
const addFormRules = reactive({
|
reportType: [{ required: true, message: '请选择上报类型', trigger: 'change' }],
|
hazardDescription: [{ required: true, message: '请输入隐患描述', trigger: 'blur' }],
|
severity: [{ required: true, message: '请选择严重程度', trigger: 'change' }],
|
reporter: [{ required: true, message: '请输入上报人', trigger: 'blur' }]
|
})
|
|
const addFormRef = ref(null)
|
|
// 整改表单
|
const rectifyForm = reactive({
|
id: null,
|
hazardDescription: '',
|
rectificationPerson: '',
|
rectificationDescription: ''
|
})
|
|
// 验收表单
|
const acceptForm = reactive({
|
id: null,
|
rectificationDescription: '',
|
acceptancePerson: '',
|
acceptanceResult: '通过'
|
})
|
|
// 查看数据
|
const viewData = ref({})
|
|
// 获取严重程度标签类型
|
const getSeverityType = (severity) => {
|
const map = {
|
'轻微': 'info',
|
'一般': 'warning',
|
'严重': 'danger'
|
}
|
return map[severity] || 'info'
|
}
|
|
// 获取整改状态标签类型
|
const getRectificationStatusType = (status) => {
|
const map = {
|
'待整改': 'danger',
|
'整改中': 'warning',
|
'已完成': 'success'
|
}
|
return map[status] || 'info'
|
}
|
|
// 获取隐患列表
|
const fetchList = async () => {
|
try {
|
const params = {
|
...searchForm,
|
current: pagination.currentPage,
|
size: pagination.pageSize
|
}
|
const res = await getHazardReportList(params)
|
if (res.code === 200) {
|
reportList.value = res.data.records || []
|
pagination.total = res.data.total || 0
|
} else {
|
ElMessage.error(res.message || '获取列表失败')
|
}
|
} catch (error) {
|
ElMessage.error('获取列表失败')
|
}
|
}
|
|
// 获取设施列表
|
const fetchFacilityOptions = async () => {
|
try {
|
const res = await getSafetyFacilityList({ size: 1000 })
|
if (res.code === 200) {
|
facilityOptions.value = res.data.records || []
|
}
|
} catch (error) {
|
console.error('获取设施列表失败')
|
}
|
}
|
|
// 搜索
|
const handleSearch = () => {
|
pagination.currentPage = 1
|
fetchList()
|
}
|
|
// 重置搜索
|
const resetSearch = () => {
|
Object.assign(searchForm, {
|
reportType: '',
|
severity: '',
|
rectificationStatus: '',
|
reporter: ''
|
})
|
handleSearch()
|
}
|
|
// 上报隐患
|
const handleAdd = () => {
|
Object.assign(addForm, {
|
reportType: '',
|
facilityId: null,
|
hazardDescription: '',
|
severity: '',
|
reporter: '',
|
remarks: ''
|
})
|
showAddDialog.value = true
|
}
|
|
// 整改
|
const handleRectify = (row) => {
|
Object.assign(rectifyForm, {
|
id: row.id,
|
hazardDescription: row.hazardDescription,
|
rectificationPerson: '',
|
rectificationDescription: ''
|
})
|
showRectifyDialog.value = true
|
}
|
|
// 验收
|
const handleAccept = (row) => {
|
Object.assign(acceptForm, {
|
id: row.id,
|
rectificationDescription: row.rectificationDescription,
|
acceptancePerson: '',
|
acceptanceResult: '通过'
|
})
|
showAcceptDialog.value = true
|
}
|
|
// 查看详情
|
const handleView = (row) => {
|
viewData.value = { ...row }
|
showViewDialog.value = true
|
}
|
|
// 删除
|
const handleDelete = async (row) => {
|
try {
|
await ElMessageBox.confirm('确认删除该隐患记录吗？', '提示', {
|
type: 'warning'
|
})
|
const res = await deleteHazardReport([row.id])
|
if (res.code === 200) {
|
ElMessage.success('删除成功')
|
fetchList()
|
} else {
|
ElMessage.error(res.message || '删除失败')
|
}
|
} catch (error) {
|
// 取消删除
|
}
|
}
|
|
// 提交上报表单
|
const submitAddForm = async () => {
|
if (!addFormRef.value) return
|
try {
|
await addFormRef.value.validate()
|
const res = await addHazardReport(addForm)
|
if (res.code === 200) {
|
ElMessage.success('上报成功')
|
showAddDialog.value = false
|
fetchList()
|
} else {
|
ElMessage.error(res.message || '上报失败')
|
}
|
} catch (error) {
|
ElMessage.error('请填写完整表单信息')
|
}
|
}
|
|
// 提交整改
|
const submitRectify = async () => {
|
try {
|
const res = await rectifyHazardReport(rectifyForm)
|
if (res.code === 200) {
|
ElMessage.success('整改记录成功')
|
showRectifyDialog.value = false
|
fetchList()
|
} else {
|
ElMessage.error(res.message || '操作失败')
|
}
|
} catch (error) {
|
ElMessage.error('操作失败')
|
}
|
}
|
|
// 提交验收
|
const submitAccept = async () => {
|
try {
|
const res = await acceptHazardReport(acceptForm)
|
if (res.code === 200) {
|
ElMessage.success('验收记录成功')
|
showAcceptDialog.value = false
|
fetchList()
|
} else {
|
ElMessage.error(res.message || '操作失败')
|
}
|
} catch (error) {
|
ElMessage.error('操作失败')
|
}
|
}
|
|
// 导出
|
const handleExport = async () => {
|
try {
|
const res = await exportHazardReport(searchForm)
|
const blob = new Blob([res])
|
const url = window.URL.createObjectURL(blob)
|
const link = document.createElement('a')
|
link.href = url
|
link.download = '隐患上报记录.xlsx'
|
link.click()
|
window.URL.revokeObjectURL(url)
|
ElMessage.success('导出成功')
|
} catch (error) {
|
ElMessage.error('导出失败')
|
}
|
}
|
|
// 分页大小改变
|
const handleSizeChange = (val) => {
|
pagination.pageSize = val
|
fetchList()
|
}
|
|
// 当前页改变
|
const handleCurrentChange = (val) => {
|
pagination.currentPage = val
|
fetchList()
|
}
|
|
onMounted(() => {
|
fetchList()
|
fetchFacilityOptions()
|
})
|
</script>
|
|
<style scoped>
|
.hazard-report {
|
padding: 20px;
|
}
|
|
.search-area {
|
background: #f5f7fa;
|
padding: 20px;
|
border-radius: 4px;
|
margin-bottom: 15px;
|
}
|
|
.actions {
|
margin-bottom: 15px;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
