|
|
@@ -3,30 +3,26 @@
|
|
|
<ContentWrap style="border: 0">
|
|
|
<!-- 搜索工作栏 -->
|
|
|
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
|
|
|
- <el-form-item label="计量器具名称" prop="measureName">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.measureName"
|
|
|
- placeholder="请输入计量器具名称"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-150px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="计量项目" prop="measureProject">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.measureProject"
|
|
|
- placeholder="请输入计量项目"
|
|
|
+ <el-form-item label="风险等级" prop="riskGrade">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.riskGrade"
|
|
|
+ placeholder="请选择风险等级"
|
|
|
clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-150px"
|
|
|
- />
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
|
- <el-button type="primary" plain @click="openForm('create')">
|
|
|
+ <el-button type="primary" @click="openForm('create')" color="#626aef">
|
|
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
|
|
</el-button>
|
|
|
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
|
|
@@ -43,59 +39,76 @@
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#333' }"
|
|
|
:cell-style="{ padding: '12px 8px' }"
|
|
|
+ height="70vh"
|
|
|
>
|
|
|
- <!-- 区域/位置 列 -->
|
|
|
- <el-table-column prop="area" label="区域/位置" width="150" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <div v-if="row.area && !row.subRow" class="area-header">{{ row.area }}</div>
|
|
|
- <div v-else class="sub-row">{{ row.subRow }}</div>
|
|
|
+ <!-- 区域/位置 列（已合并） -->
|
|
|
+ <el-table-column prop="region" label="区域/位置" width="150" align="center" />
|
|
|
+
|
|
|
+ <!-- 其他列保持不变 -->
|
|
|
+ <el-table-column label="序号" width="70" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
- <!-- 序号 -->
|
|
|
- <el-table-column prop="index" label="序号" width="60" align="center" />
|
|
|
-
|
|
|
- <!-- 危害因素描述 -->
|
|
|
<el-table-column
|
|
|
prop="elementDescription"
|
|
|
label="危害因素描述"
|
|
|
width="200"
|
|
|
align="center"
|
|
|
/>
|
|
|
-
|
|
|
- <!-- 可导致的后果 -->
|
|
|
<el-table-column prop="maybeResult" label="可导致的后果" align="center" />
|
|
|
|
|
|
- <!-- 风险评价（多列） -->
|
|
|
- <el-table-column label="风险评价" width="240" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <div class="risk-evaluation">
|
|
|
- <div class="risk-item">可能性 (L)</div>
|
|
|
- <div class="risk-item">严重性 (S)</div>
|
|
|
- <div class="risk-item">风险值 (R)</div>
|
|
|
- <div
|
|
|
- class="risk-item risk-level"
|
|
|
- :style="{ backgroundColor: getRiskColor(row.riskLevel) }"
|
|
|
- >
|
|
|
- {{ row.riskLevel }}
|
|
|
+ <!-- 风险评价列保持不变 -->
|
|
|
+ <el-table-column label="风险评价" width="320" align="center">
|
|
|
+ <el-table-column prop="evalKn" label="可能性 (L)" width="80" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.evalKn }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="evalYz" label="严重性 (S)" width="80" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.evalYz }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="evalFxz" label="风险值 (R)" width="80" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.evalFxz }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="riskGrade" label="风险等级" width="100" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="bg-[#ffff00] w-full rounded-md" v-if="scope.row.riskGrade === 'normal'">
|
|
|
+ 一般风险
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <div class="bg-[#ffc000] w-full rounded-md" v-else-if="scope.row.riskGrade === 'big'">
|
|
|
+ 较大风险
|
|
|
+ </div>
|
|
|
+ <div class="bg-[#0070c0] w-full text-white rounded-md" v-else>低风险</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <!-- 控制措施 -->
|
|
|
- <el-table-column prop="controlMethod" label="控制措施" align="center" />
|
|
|
-
|
|
|
- <!-- 操作列 -->
|
|
|
+ <el-table-column
|
|
|
+ prop="controlMethod"
|
|
|
+ label="控制措施"
|
|
|
+ min-width="200"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
<el-table-column label="操作" width="150" align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <div class="flex gap-2">
|
|
|
- <el-link :underline="false" size="small" type="primary" @click="openForm('edit', row)"
|
|
|
- >编辑</el-link
|
|
|
- >
|
|
|
- <el-link :underline="false" size="small" type="danger" @click="openForm('edit', row)"
|
|
|
- >删除</el-link
|
|
|
+ <div class="flex gap-3 justify-center">
|
|
|
+ <el-link
|
|
|
+ :underline="false"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="openForm('edit', row)"
|
|
|
>
|
|
|
+ 编辑
|
|
|
+ </el-link>
|
|
|
+ <el-link :underline="false" size="small" type="danger" @click="deleteRow(row)">
|
|
|
+ 删除
|
|
|
+ </el-link>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -119,67 +132,105 @@
|
|
|
<!-- 新增/编辑弹窗 -->
|
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @close="resetForm">
|
|
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
|
|
- <!-- 区域/位置 -->
|
|
|
- <el-form-item label="区域/位置" prop="region">
|
|
|
- <el-input v-model="formData.region" placeholder="请输入区域/位置" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 危害因素描述 -->
|
|
|
- <el-form-item label="危害因素描述" prop="elementDescription">
|
|
|
- <el-input v-model="formData.elementDescription" placeholder="请输入危害因素描述" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 可能导致的后果 -->
|
|
|
- <el-form-item label="可能导致的后果" prop="maybeResult">
|
|
|
- <el-input v-model="formData.maybeResult" placeholder="请输入可能导致的后果" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 风险评价可能性 (L) -->
|
|
|
- <el-form-item label="风险评价可能性" prop="evalKn">
|
|
|
- <el-input-number v-model="formData.evalKn" controls-position="right" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 风险评价严重性 (S) -->
|
|
|
- <el-form-item label="风险评价严重性" prop="evalYz">
|
|
|
- <el-input-number v-model="formData.evalYz" controls-position="right" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 风险评价风险值 (R) -->
|
|
|
- <el-form-item label="风险评价风险值" prop="evalFxz">
|
|
|
- <el-input-number v-model="formData.evalFxz" disabled />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 风险等级 -->
|
|
|
- <el-form-item label="风险等级" prop="riskGrade">
|
|
|
- <!-- <el-select v-model="formData.riskGrade" placeholder="请选择风险等级">
|
|
|
- <el-option label="一般风险" value="一般风险" />
|
|
|
- <el-option label="低风险" value="低风险" />
|
|
|
- </el-select> -->
|
|
|
-
|
|
|
- <el-select v-model="formData.riskGrade" placeholder="请选择风险等级" clearable>
|
|
|
- <el-option
|
|
|
- v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 控制措施 -->
|
|
|
- <el-form-item label="控制措施" prop="controlMethod">
|
|
|
- <el-input
|
|
|
- v-model="formData.controlMethod"
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- placeholder="请输入控制措施"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 备注 -->
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="formData.remark" placeholder="请输入备注" />
|
|
|
- </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 第一行 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区域/位置" prop="region">
|
|
|
+ <el-input v-model="formData.region" placeholder="请输入区域/位置" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="危害因素描述" prop="elementDescription">
|
|
|
+ <el-input v-model="formData.elementDescription" placeholder="请输入危害因素描述" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 第二行 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="可能导致的后果" prop="maybeResult">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.maybeResult"
|
|
|
+ placeholder="请输入可能导致的后果"
|
|
|
+ type="textarea"
|
|
|
+ :rows="1"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="风险评价可能性" prop="evalKn">
|
|
|
+ <el-input-number
|
|
|
+ v-model="formData.evalKn"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 第三行 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="风险评价严重性" prop="evalYz">
|
|
|
+ <el-input-number
|
|
|
+ v-model="formData.evalYz"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="风险评价风险值" prop="evalFxz">
|
|
|
+ <el-input-number v-model="formData.evalFxz" disabled style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 第四行 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="风险等级" prop="riskGrade">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.riskGrade"
|
|
|
+ placeholder="请选择风险等级"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.remark"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ :rows="1"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 控制措施单独一行（占满） -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="控制措施" prop="controlMethod">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.controlMethod"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入控制措施"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
|
|
@@ -197,8 +248,7 @@ import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
|
|
|
|
|
// 查询参数
|
|
|
const queryParams = reactive({
|
|
|
- measureName: '',
|
|
|
- measureProject: ''
|
|
|
+ riskGrade: ''
|
|
|
})
|
|
|
|
|
|
// 表格数据
|
|
|
@@ -232,13 +282,6 @@ const rules = {
|
|
|
controlMethod: [{ required: true, message: '请输入控制措施', trigger: 'blur' }]
|
|
|
}
|
|
|
|
|
|
-// 获取风险等级颜色
|
|
|
-const getRiskColor = (level) => {
|
|
|
- if (level === '一般风险') return '#fff9c4'
|
|
|
- if (level === '低风险') return '#e3f2fd'
|
|
|
- return '#ffffff'
|
|
|
-}
|
|
|
-
|
|
|
watch(
|
|
|
() => [formData.evalKn, formData.evalYz],
|
|
|
([kn, yz]) => {
|
|
|
@@ -250,7 +293,35 @@ watch(
|
|
|
)
|
|
|
// 搜索
|
|
|
const handleQuery = () => {
|
|
|
- console.log('搜索:', queryParams)
|
|
|
+ pagination.pageNo = 1 // 搜索后回到第一页
|
|
|
+ loadTableData()
|
|
|
+}
|
|
|
+
|
|
|
+// 重置查询
|
|
|
+const resetQuery = () => {
|
|
|
+ queryParams.riskGrade = '' // 清空风险等级筛选
|
|
|
+ pagination.pageNo = 1 // 重置为第一页
|
|
|
+ loadTableData()
|
|
|
+}
|
|
|
+
|
|
|
+// 删除确认
|
|
|
+const deleteRow = async (row) => {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(`确认删除 ${row.elementDescription} 吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+
|
|
|
+ await IotDangerApi.deleteDanger(row.id)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ loadTableData() // 重新加载数据
|
|
|
+ } catch (error) {
|
|
|
+ // 用户取消或删除失败
|
|
|
+ if (error !== 'cancel') {
|
|
|
+ ElMessage.error('删除失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 每页数量变化
|
|
|
@@ -260,18 +331,53 @@ const handleSizeChange = (val) => {
|
|
|
loadTableData()
|
|
|
}
|
|
|
|
|
|
+// 预先计算合并信息
|
|
|
+const spanArr = ref([])
|
|
|
+const pos = ref(0)
|
|
|
+
|
|
|
+// 计算合并信息
|
|
|
+const getSpanArr = (data) => {
|
|
|
+ spanArr.value = []
|
|
|
+ pos.value = 0
|
|
|
+
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ spanArr.value.push(1)
|
|
|
+ pos.value = 0
|
|
|
+ } else {
|
|
|
+ if (data[index].region === data[index - 1].region) {
|
|
|
+ spanArr.value[pos.value] += 1
|
|
|
+ spanArr.value.push(0)
|
|
|
+ } else {
|
|
|
+ spanArr.value.push(1)
|
|
|
+ pos.value = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 行合并方法
|
|
|
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ const _row = spanArr.value[rowIndex]
|
|
|
+ const _col = _row > 0 ? 1 : 0
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 当前页变化
|
|
|
const handleCurrentChange = (val) => {
|
|
|
pagination.pageNo = val
|
|
|
loadTableData()
|
|
|
}
|
|
|
|
|
|
-// 重置查询
|
|
|
-const resetQuery = () => {
|
|
|
- queryParams.measureName = ''
|
|
|
- queryParams.measureProject = ''
|
|
|
-}
|
|
|
-
|
|
|
// 打开表单
|
|
|
const openForm = (type, row = null) => {
|
|
|
dialogTitle.value = type === 'create' ? '新增' : '编辑'
|
|
|
@@ -306,7 +412,8 @@ const submitForm = async () => {
|
|
|
await IotDangerApi.createDanger(params)
|
|
|
ElMessage.success('新增成功')
|
|
|
} else {
|
|
|
- await IotDangerApi.updateDanger(formData.id, params)
|
|
|
+ params.id = formData.id
|
|
|
+ await IotDangerApi.updateDanger(params)
|
|
|
ElMessage.success('修改成功')
|
|
|
}
|
|
|
|
|
|
@@ -326,12 +433,22 @@ const pagination = reactive({
|
|
|
})
|
|
|
const loadTableData = async () => {
|
|
|
try {
|
|
|
- const res = await IotDangerApi.getDangerList({
|
|
|
+ const params = {
|
|
|
pageNo: pagination.pageNo,
|
|
|
- pageSize: pagination.pageSize
|
|
|
- })
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ riskGrade: queryParams.riskGrade // 添加搜索参数
|
|
|
+ }
|
|
|
+ const res = await IotDangerApi.getDangerList(params)
|
|
|
tableData.value = res.list || []
|
|
|
total.value = res.total || 0
|
|
|
+
|
|
|
+ // // 按 region 排序（支持中文）
|
|
|
+ // tableData.value.sort((a, b) => {
|
|
|
+ // return a.region.localeCompare(b.region, 'zh-CN')
|
|
|
+ // })
|
|
|
+
|
|
|
+ // 计算合并信息
|
|
|
+ getSpanArr(tableData.value)
|
|
|
} catch (error) {
|
|
|
console.error('加载失败:', error)
|
|
|
}
|
|
|
@@ -343,9 +460,18 @@ onMounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+::v-deep .el-button {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-select__wrapper {
|
|
|
+ border-radius: 0 !important;
|
|
|
+ height: 26px;
|
|
|
+}
|
|
|
.hazard-table-container {
|
|
|
margin: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.area-header {
|
