From 260445d936893ccd79ef8742a33306d9acf8ae64 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Sun, 28 Sep 2025 09:06:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../module/EvaluationReport.js | 627 +++++++++++++++++- .../module/EvaluationReport.less | 225 +++++++ .../safe_majorHazard/module/RiskAssessment.js | 303 ++++++++- .../module/RiskAssessment.less | 125 +++- 4 files changed, 1250 insertions(+), 30 deletions(-) diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.js b/src/pages/safe_majorHazard/module/EvaluationReport.js index 2c7037e..06e17c2 100644 --- a/src/pages/safe_majorHazard/module/EvaluationReport.js +++ b/src/pages/safe_majorHazard/module/EvaluationReport.js @@ -1,31 +1,632 @@ -import React from 'react'; -import { Card, Result } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Result, CheckCircleOutlined, Button } from 'antd'; +import * as echarts from 'echarts'; +import StandardTable from '@/components/StandardTable'; import styles from './EvaluationReport.less'; +import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; +import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png'; +import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png'; + const EvaluationReport = () => { + const trendChartRef = useRef(null); + const pieChartRef = useRef(null); + const barChartRef = useRef(null); + + // 表格相关状态 + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState([]); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 5, + total: 0, + }); + + // 隐患趋势分析折线图 + useEffect(() => { + if (trendChartRef.current) { + const chart = echarts.init(trendChartRef.current); + + const option = { + color: ['#FF4D4F', '#FAAD14', '#52C41A'], + legend: { + data: ['重大隐患', '一般隐患', '轻微隐患'], + top: "5px", + left: "center", + itemGap: 20, + textStyle: { + fontSize: 10 + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '20%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + axisLabel: { + fontSize: 10 + } + }, + series: [ + { + name: '重大隐患', + type: 'line', + smooth: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + width: 2, + color: '#FF4D4F' + }, + itemStyle: { + color: '#FF4D4F', + borderColor: '#FF4D4F', + borderWidth: 2 + }, + data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21] + }, + { + name: '一般隐患', + type: 'line', + smooth: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + width: 2, + color: '#FAAD14' + }, + itemStyle: { + color: '#FAAD14', + borderColor: '#FAAD14', + borderWidth: 2 + }, + data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41] + }, + { + name: '轻微隐患', + type: 'line', + smooth: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + width: 2, + color: '#52C41A' + }, + itemStyle: { + color: '#52C41A', + borderColor: '#52C41A', + borderWidth: 2 + }, + data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61] + } + ] + }; + + chart.setOption(option); + + const handleResize = () => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + if (chart && !chart.isDisposed()) { + chart.dispose(); + } + }; + } + }, []); + + // 隐患类型分布玫瑰饼图 + useEffect(() => { + if (pieChartRef.current) { + const chart = echarts.init(pieChartRef.current); + + const option = { + color: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#13C2C2'], + legend: { + orient: 'vertical', + left: 'left', + top: 'center', + textStyle: { + fontSize: 10 + } + }, + series: [ + { + name: '隐患类型', + type: 'pie', + radius: ['20%', '70%'], + center: ['60%', '50%'], + roseType: 'area', + itemStyle: { + borderRadius: 5, + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: true, + formatter: '{b}: {c}', + fontSize: 10 + }, + data: [ + { value: 35, name: '设备故障' }, + { value: 28, name: '操作失误' }, + { value: 22, name: '环境因素' }, + { value: 18, name: '管理缺陷' }, + { value: 15, name: '设计缺陷' }, + { value: 12, name: '其他' } + ] + } + ] + }; + + chart.setOption(option); + + const handleResize = () => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + if (chart && !chart.isDisposed()) { + chart.dispose(); + } + }; + } + }, []); + + // 隐患整改情况柱状图 + useEffect(() => { + if (barChartRef.current) { + const chart = echarts.init(barChartRef.current); + + const option = { + color: ['#FF4D4F', '#FAAD14', '#1890FF', '#52C41A', '#722ED1'], + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '10%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['待处理', '处理中', '待审核', '已完成', '已关闭'], + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + axisLabel: { + fontSize: 10 + } + }, + series: [ + { + name: '数量', + type: 'bar', + data: [25, 18, 12, 35, 8], + itemStyle: { + borderRadius: [4, 4, 0, 0] + }, + barWidth: '60%' + } + ] + }; + + chart.setOption(option); + + const handleResize = () => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + if (chart && !chart.isDisposed()) { + chart.dispose(); + } + }; + } + }, []); + + // 表格列定义 + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + render: (text, record, index) => { + const page = pagination.current || 1; + const pageSize = pagination.pageSize || 5; + const number = (page - 1) * pageSize + index + 1; + return `0${number}`.slice(-2); + } + }, + { + title: '报告名称', + dataIndex: 'reportName', + key: 'reportName', + width: 200, + }, + { + title: '类型', + dataIndex: 'type', + key: 'type', + width: 120, + }, + { + title: '上传时间', + dataIndex: 'uploadTime', + key: 'uploadTime', + width: 150, + }, + { + title: '版本', + dataIndex: 'version', + key: 'version', + width: 80, + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => { + const statusMap = { + '已完成': { color: '#52C41A', bg: '#F6FFED' }, + '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, + '待审核': { color: '#1890FF', bg: '#E6F7FF' } + }; + const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; + return ( + + {text} + + ); + } + }, + { + title: '上传人', + dataIndex: 'uploader', + key: 'uploader', + width: 100, + }, + { + title: '操作', + key: 'action', + width: 80, + render: (_, record) => ( +
+ +
+ ), + }, + ]; + + // 模拟数据 + const mockData = [ + { + key: '1', + id: '001', + reportName: '2024年第一季度安全评估报告', + type: '季度报告', + uploadTime: '2024-01-15 08:30:25', + version: 'V1.0', + status: '已完成', + uploader: '张三', + }, + { + key: '2', + id: '002', + reportName: '重大危险源专项评估报告', + type: '专项报告', + uploadTime: '2024-01-15 09:15:10', + version: 'V2.1', + status: '处理中', + uploader: '李四', + }, + { + key: '3', + id: '003', + reportName: '年度安全风险评估报告', + type: '年度报告', + uploadTime: '2024-01-15 10:45:30', + version: 'V1.5', + status: '待审核', + uploader: '王五', + }, + { + key: '4', + id: '004', + reportName: '设备安全评估报告', + type: '设备报告', + uploadTime: '2024-01-15 11:20:45', + version: 'V1.2', + status: '已完成', + uploader: '赵六', + }, + { + key: '5', + id: '005', + reportName: '应急预案评估报告', + type: '应急报告', + uploadTime: '2024-01-15 12:10:20', + version: 'V3.0', + status: '已完成', + uploader: '孙七', + }, + { + key: '6', + id: '006', + reportName: '环境安全评估报告', + type: '环境报告', + uploadTime: '2024-01-15 13:25:15', + version: 'V1.8', + status: '处理中', + uploader: '周八', + }, + { + key: '7', + id: '007', + reportName: '人员安全培训评估报告', + type: '培训报告', + uploadTime: '2024-01-15 14:10:30', + version: 'V2.3', + status: '待审核', + uploader: '吴九', + }, + { + key: '8', + id: '008', + reportName: '消防安全评估报告', + type: '消防报告', + uploadTime: '2024-01-15 15:45:20', + version: 'V1.1', + status: '已完成', + uploader: '郑十', + }, + { + key: '9', + id: '009', + reportName: '化学品安全评估报告', + type: '化学品报告', + uploadTime: '2024-01-15 16:30:45', + version: 'V2.0', + status: '处理中', + uploader: '钱十一', + }, + { + key: '10', + id: '010', + reportName: '职业健康安全评估报告', + type: '职业健康报告', + uploadTime: '2024-01-15 17:15:10', + version: 'V1.6', + status: '已完成', + uploader: '陈十二', + }, + { + key: '11', + id: '011', + reportName: '安全管理制度评估报告', + type: '制度报告', + uploadTime: '2024-01-15 18:20:35', + version: 'V1.3', + status: '待审核', + uploader: '刘十三', + }, + { + key: '12', + id: '012', + reportName: '安全投入评估报告', + type: '投入报告', + uploadTime: '2024-01-15 19:05:50', + version: 'V1.9', + status: '已完成', + uploader: '黄十四', + }, + ]; + + // 初始化数据 + useEffect(() => { + setPagination(prev => ({ ...prev, total: mockData.length })); + }, []); + + // 根据分页获取当前页数据 + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const startIndex = (current - 1) * pageSize; + const endIndex = startIndex + pageSize; + return mockData.slice(startIndex, endIndex); + }; + + // 表格选择变化 + const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { + setSelectedRowKeys(newSelectedRowKeys); + setSelectedRows(newSelectedRows); + }; + + // 分页变化处理 + const handleTableChange = (pagination) => { + setPagination(prev => ({ + ...prev, + current: pagination.current, + pageSize: pagination.pageSize, + })); + }; + return (
+ {/* 第一个大块 - 高度16% */}
-
-
-
+
+
+ {/* 块1 */} +
+
+
总危险源数量
+
65
+
+ ↑ + 较昨日 +2 +
+
+
+ 总危险源数量 +
+
-
-
+ {/* 块2 */} +
+
+
高风险设备
+
65
+
+ ↑ + 较昨日 +2 +
+
+
+ 高风险设备 +
+
-
-
+ {/* 块3 */} +
+
+
今日预警次数
+
65
+
+ ↑ + 较昨日 +2 +
+
+
+ 今日预警次数 +
+
+ {/* 块4 */} +
+
+
未处理预警
+
65
+
+ ↑ + 较昨日 +2 +
+
+
+ 未处理预警 +
+
+
+
+ {/* 第二个大块 - 三个图表块 */} +
+
+ {/* 第一个小块 - 隐患趋势分析 */} +
+
+
+
隐患趋势分析
+
+
+
-
- - -
+ {/* 第二个小块 - 隐患类型分布 */} +
+
+
+
隐患类型分布
+
+
+
+ {/* 第三小块 - 隐患整改情况 */} +
+
+
+
隐患整改情况
+
+
+
+
+
+ {/* 第三大块 - 评估报告表格 */} +
+ {/* 首行 左侧标题左对齐 右侧按钮右对齐 */} +
+
+
+
评估报告
+
+
+ {/* 表格 5行8列 带页码 每页5条数据 */} +
+ + `共 ${total} 条`, + }} + scroll={{ x: 1000 }} + /> +
+
+ ); }; diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.less b/src/pages/safe_majorHazard/module/EvaluationReport.less index e69de29..9ac7a4d 100644 --- a/src/pages/safe_majorHazard/module/EvaluationReport.less +++ b/src/pages/safe_majorHazard/module/EvaluationReport.less @@ -0,0 +1,225 @@ +.Econtainer { + padding: 8px 6px 0px 6px; + height: 100%; + display: flex; + flex-direction: column; + gap: 10px; + + // 第一个大块 - 高度16% + .EcontainerTop { + height: 16%; + border-radius: 4px; + display: flex; + flex-direction: column; + + .sectionContent { + height: 100%; + display: flex; + flex-direction: column; + + .blocksContainer { + flex: 1; + display: flex; + gap: 10px; + height: 100%; + + .blockItem { + flex: 1; + height: 100%; + display: flex; + background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%); + border-radius: 4px; + border: 2px solid #FFFFFF; + + .blockLeft { + width: 60%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 15px; + padding-left: 20px; + gap: 8px; + + .blockTitle { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #666666; + line-height: 1.2; + } + + .blockNumber { + font-family: PingFang SC; + font-weight: 700; + font-size: 24px; + color: #333333; + line-height: 1.2; + } + + .blockChange { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #1269FF; + line-height: 1.2; + display: flex; + align-items: center; + gap: 4px; + + .arrow { + font-size: 14px; + font-weight: bold; + } + + .checkIcon { + font-size: 16px; + color: #1269FF; + } + } + } + + .blockRight { + flex: 1; + height: 100%; + background-color: transparent; + border-radius: 0 4px 4px 0; + display: flex; + align-items: center; + justify-content: center; + + .blockImage { + height: 130%; + object-fit: contain; + margin-right: -10px; + } + } + } + } + } + } + + // 第二个大块 - 三个图表块 + .EcontainerMiddle { + height: 30%; + border-radius: 4px; + background-color: #fff; + display: flex; + flex-direction: column; + + .sectionContent { + height: 100%; + display: flex; + flex-direction: row; + gap: 10px; + padding: 10px; + + .chartBlock { + flex: 1; + height: 100%; + background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); + border: 2px solid #fff; + border-radius: 4px; + display: flex; + flex-direction: column; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + + .chartTitle { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + padding: 10px 15px 5px 15px; + + .titleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + .chartContainer { + flex: 1; + width: 100%; + height: 120%; + // // min-height: 200px; + } + } + } + } + + // 第三大块 - 评估报告表格 + .EcontainerBottom { + flex: 1; + background-color: #fff; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 10px; + + .tableHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + + .tableTitle { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + + .titleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + } + + .tableContainer { + flex: 1; + overflow: hidden; + + :global(.ant-table-wrapper) { + height: 100%; + } + + :global(.ant-table) { + height: 100%; + } + + :global(.ant-table-container) { + height: 100%; + } + + :global(.ant-table-body) { + height: calc(100% - 55px); // 减去表头高度 + overflow-y: auto; + } + + :global(.ant-table-tbody > tr > td) { + padding: 8px 16px; + font-size: 12px; + } + + :global(.ant-table-thead > tr > th) { + padding: 8px 16px; + font-size: 12px; + font-weight: 500; + background-color: #fafafa; + } + + :global(.ant-pagination) { + margin-top: 10px; + text-align: right; + } + } + } +} diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js index 69c2885..55735ce 100644 --- a/src/pages/safe_majorHazard/module/RiskAssessment.js +++ b/src/pages/safe_majorHazard/module/RiskAssessment.js @@ -1,8 +1,9 @@ -import React, { useEffect, useRef } from 'react'; -import { Card, Result, Select } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Result, Select, Button } from 'antd'; import { CheckCircleOutlined } from '@ant-design/icons'; import * as echarts from 'echarts'; +import StandardTable from '@/components/StandardTable'; import styles from './RiskAssessment.less'; import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; @@ -12,6 +13,15 @@ import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png'; const RiskAssessment = () => { const chartRef = useRef(null); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState([]); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 5, + total: 0, + }); useEffect(() => { if (chartRef.current) { @@ -248,6 +258,234 @@ const RiskAssessment = () => { } }, []); + // 表格列定义 + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + render: (text, record, index) => { + const page = pagination.current || 1; + const pageSize = pagination.pageSize || 5; + const number = (page - 1) * pageSize + index + 1; + return `0${number}`.slice(-2); + } + }, + { + title: '设备编号', + dataIndex: 'deviceId', + key: 'deviceId', + width: 120, + }, + { + title: '风险等级', + dataIndex: 'riskLevel', + key: 'riskLevel', + width: 100, + render: (text) => { + const colorMap = { + '高': '#FF4D4F', + '中': '#FAAD14', + '低': '#52C41A' + }; + return {text}; + } + }, + { + title: '预警时间', + dataIndex: 'warningTime', + key: 'warningTime', + width: 150, + }, + { + title: '主要原因', + dataIndex: 'mainReason', + key: 'mainReason', + width: 200, + }, + { + title: '处理状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => { + const statusMap = { + '未处理': { color: '#FF4D4F', bg: '#FFF2F0' }, + '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, + '已处理': { color: '#52C41A', bg: '#F6FFED' } + }; + const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; + return ( + + {text} + + ); + } + }, + { + title: '操作', + key: 'action', + width: 120, + render: (_, record) => ( +
+ + +
+ ), + }, + ]; + + // 模拟数据 + const mockData = [ + { + key: '1', + id: '001', + deviceId: 'DEV-001', + riskLevel: '高', + warningTime: '2024-01-15 08:30:25', + mainReason: '设备温度异常升高', + status: '未处理', + }, + { + key: '2', + id: '002', + deviceId: 'DEV-002', + riskLevel: '中', + warningTime: '2024-01-15 09:15:10', + mainReason: '压力波动超出正常范围', + status: '处理中', + }, + { + key: '3', + id: '003', + deviceId: 'DEV-003', + riskLevel: '高', + warningTime: '2024-01-15 10:45:30', + mainReason: '液位传感器故障', + status: '已处理', + }, + { + key: '4', + id: '004', + deviceId: 'DEV-004', + riskLevel: '高', + warningTime: '2024-01-15 11:20:45', + mainReason: '检测到气体泄漏', + status: '未处理', + }, + { + key: '5', + id: '005', + deviceId: 'DEV-005', + riskLevel: '低', + warningTime: '2024-01-15 12:10:20', + mainReason: '设备振动异常', + status: '已处理', + }, + { + key: '6', + id: '006', + deviceId: 'DEV-006', + riskLevel: '中', + warningTime: '2024-01-15 13:25:15', + mainReason: '流量传感器读数异常', + status: '未处理', + }, + { + key: '7', + id: '007', + deviceId: 'DEV-007', + riskLevel: '高', + warningTime: '2024-01-15 14:10:30', + mainReason: '储罐压力超限', + status: '处理中', + }, + { + key: '8', + id: '008', + deviceId: 'DEV-008', + riskLevel: '中', + warningTime: '2024-01-15 15:45:20', + mainReason: '管道温度异常', + status: '已处理', + }, + { + key: '9', + id: '009', + deviceId: 'DEV-009', + riskLevel: '高', + warningTime: '2024-01-15 16:30:45', + mainReason: '阀门控制系统故障', + status: '未处理', + }, + { + key: '10', + id: '010', + deviceId: 'DEV-010', + riskLevel: '低', + warningTime: '2024-01-15 17:15:10', + mainReason: '轻微泄漏检测', + status: '已处理', + }, + { + key: '11', + id: '011', + deviceId: 'DEV-011', + riskLevel: '高', + warningTime: '2024-01-15 18:20:35', + mainReason: '安全阀异常开启', + status: '处理中', + }, + { + key: '12', + id: '012', + deviceId: 'DEV-012', + riskLevel: '中', + warningTime: '2024-01-15 19:05:50', + mainReason: '液位计读数不稳定', + status: '未处理', + }, + ]; + + // 初始化数据 + useEffect(() => { + setPagination(prev => ({ ...prev, total: mockData.length })); + }, []); + + // 根据分页获取当前页数据 + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const startIndex = (current - 1) * pageSize; + const endIndex = startIndex + pageSize; + return mockData.slice(startIndex, endIndex); + }; + + // 表格选择变化 + const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { + setSelectedRowKeys(newSelectedRowKeys); + setSelectedRows(newSelectedRows); + }; + + // 分页变化处理 + const handleTableChange = (pagination) => { + setPagination(prev => ({ + ...prev, + current: pagination.current, + pageSize: pagination.pageSize, + })); + }; + return (
{/* 第一个div - 高度20% */} @@ -406,10 +644,67 @@ const RiskAssessment = () => {
-

左侧块内容

+ {/* 第一行块 - 蓝色方块加标题 */} +
+
+
风险评估参数
+
+ + {/* 第二行块 - 图片 */} +
+ 风险评估图 +
+ + {/* 第三行块 */} +
+
风险等级
+
高风险
+
+ + {/* 第四行块 */} +
+
评估时间
+
2024-01-15
+
+ + {/* 第五行块 */} +
+
评估人员
+
张三
+
+
-

右侧块内容

+ {/* 表格 */} +
+
+
+
最新预警信息
+
+
+ + {/* 表格 */} +
+ + `共 ${total} 条`, + }} + scroll={{ x: 1200 }} + /> +
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.less b/src/pages/safe_majorHazard/module/RiskAssessment.less index 200e569..7061863 100644 --- a/src/pages/safe_majorHazard/module/RiskAssessment.less +++ b/src/pages/safe_majorHazard/module/RiskAssessment.less @@ -287,30 +287,129 @@ display: flex; flex-direction: row; gap: 10px; - padding: 15px; + padding: 0; .leftBlock { - width: 28%; + width: 30%; height: 100%; background-color: #fff; + padding: 0; display: flex; - align-items: center; - justify-content: center; - font-family: PingFang SC; - font-size: 14px; - color: #666666; + flex-direction: column; + gap: 10px; + padding: 15px; + + .leftBlockTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .leftBlockImage { + height: 40%; + width: 100%; + border-radius: 4px; + overflow: hidden; + } + + .leftBlockItem { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + background-color: #f5f5f5; + border-radius: 4px; + font-family: PingFang SC; + + .itemTitle { + font-size: 12px; + color: #666666; + margin-bottom: 5px; + } + + .itemValue { + font-size: 14px; + color: #333333; + font-weight: 500; + } + } } .rightBlock { - flex: 1; + width: 68%; height: 100%; background-color: #fff; + padding: 0; display: flex; - align-items: center; - justify-content: center; - font-family: PingFang SC; - font-size: 14px; - color: #666666; + flex-direction: column; + + .tableHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 15px 5px 15px; + + .tableTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + } + + .tableContainer { + flex: 1; + overflow: hidden; + + :global(.ant-table) { + font-size: 12px; + } + + :global(.ant-table-thead > tr > th) { + background-color: #f5f5fa; + font-weight: 500; + font-size: 14px; + color: #333333; + border-bottom: 1px solid #f0f0f0; + padding: 8px 12px; + text-align: center; + } + + :global(.ant-table-tbody > tr > td) { + padding: 8px 12px; + border-bottom: 1px solid #f0f0f0; + text-align: center; + } + + :global(.ant-table-tbody > tr:hover > td) { + background-color: #f5f5f5; + } + + :global(.ant-pagination) { + margin-top: 16px; + text-align: right; + } + } } } }