jiangxucong
/
dq-sms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
main
wangyunfei 1 month ago
parent 3edb0804ae
commit 260445d936
4 changed files with 1250 additions and 30 deletions
Show Stats Download Patch File Download Diff File

621
src/pages/safe_majorHazard/module/EvaluationReport.js
Unescape Escape View File

@ -1,31 +1,632 @@
import React from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Result } from 'antd'; import { Card, Result, CheckCircleOutlined, Button } from 'antd';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './EvaluationReport.less'; 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 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 (
<span style={{
color: status.color,
backgroundColor: status.bg,
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>
{text}
</span>
);
}
},
{
title: '上传人',
dataIndex: 'uploader',
key: 'uploader',
width: 100,
},
{
title: '操作',
key: 'action',
width: 80,
render: (_, record) => (
<div>
<Button type="link" size="small" style={{ padding: 0 }}>
下载
</Button>
</div>
),
},
];
// 模拟数据
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 ( return (
<div className={styles.Econtainer}> <div className={styles.Econtainer}>
{/* 第一个大块 - 高度16% */}
<div className={styles.EcontainerTop}> <div className={styles.EcontainerTop}>
<div className={styles.EcontainerLeft}> <div className={styles.sectionContent}>
<div className={styles.EcontainerLeftTop}> <div className={styles.blocksContainer}>
<div className={styles.EcontainerLeftTopLeft}></div> {/* 块1 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>总危险源数量</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img1} alt="总危险源数量" className={styles.blockImage} />
</div> </div>
<div className={styles.EcontainerLeftBottom}></div>
</div> </div>
<div className={styles.EcontainerRight}></div>
{/* 块2 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>高风险设备</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img2} alt="高风险设备" className={styles.blockImage} />
</div>
</div> </div>
{/* 块3 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>今日预警次数</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img3} alt="今日预警次数" className={styles.blockImage} />
</div>
</div>
<div className={styles.EcontainerBottom}></div> {/* 块4 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>未处理预警</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img1} alt="未处理预警" className={styles.blockImage} />
</div>
</div>
</div>
</div>
</div>
{/* 第二个大块 - 三个图表块 */}
<div className={styles.EcontainerMiddle}>
<div className={styles.sectionContent}>
{/* 第一个小块 - 隐患趋势分析 */}
<div className={styles.chartBlock}>
<div className={styles.chartTitle}>
<div className={styles.titleIcon}></div>
<div>隐患趋势分析</div>
</div>
<div className={styles.chartContainer} ref={trendChartRef}></div>
</div>
{/* 第二个小块 - 隐患类型分布 */}
<div className={styles.chartBlock}>
<div className={styles.chartTitle}>
<div className={styles.titleIcon}></div>
<div>隐患类型分布</div>
</div>
<div className={styles.chartContainer} ref={pieChartRef}></div>
</div> </div>
{/* 第三小块 - 隐患整改情况 */}
<div className={styles.chartBlock}>
<div className={styles.chartTitle}>
<div className={styles.titleIcon}></div>
<div>隐患整改情况</div>
</div>
<div className={styles.chartContainer} ref={barChartRef}></div>
</div>
</div>
</div>
{/* 第三大块 - 评估报告表格 */}
<div className={styles.EcontainerBottom}>
{/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>评估报告</div>
</div>
</div>
{/* 表格 5行8列 带页码 每页5条数据 */}
<div className={styles.tableContainer}>
<StandardTable
columns={columns}
data={{
list: getCurrentPageData(),
pagination: pagination
}}
loading={loading}
selectionType="checkbox"
onSelectRow={onSelectChange}
onChange={handleTableChange}
pagination={{
...pagination,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total, range) =>
`共 ${total} 条`,
}}
scroll={{ x: 1000 }}
/>
</div>
</div>
</div>
); );
}; };

225
src/pages/safe_majorHazard/module/EvaluationReport.less
Unescape Escape View File

@ -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;
}
}
}
}

303
src/pages/safe_majorHazard/module/RiskAssessment.js
Unescape Escape View File

@ -1,8 +1,9 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select } from 'antd'; import { Card, Result, Select, Button } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons'; import { CheckCircleOutlined } from '@ant-design/icons';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './RiskAssessment.less'; import styles from './RiskAssessment.less';
import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; 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 RiskAssessment = () => {
const chartRef = useRef(null); 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(() => { useEffect(() => {
if (chartRef.current) { 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 <span style={{ color: colorMap[text] || '#333' }}>{text}</span>;
}
},
{
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 (
<span style={{
color: status.color,
backgroundColor: status.bg,
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>
{text}
</span>
);
}
},
{
title: '操作',
key: 'action',
width: 120,
render: (_, record) => (
<div>
<Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}>
查看
</Button>
<Button type="link" size="small" style={{ padding: 0 }}>
详情
</Button>
</div>
),
},
];
// 模拟数据
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 ( return (
<div className={styles.Rcontainer}> <div className={styles.Rcontainer}>
{/* 第一个div - 高度20% */} {/* 第一个div - 高度20% */}
@ -406,10 +644,67 @@ const RiskAssessment = () => {
<div className={styles.RcontainerBottom}> <div className={styles.RcontainerBottom}>
<div className={styles.sectionContent}> <div className={styles.sectionContent}>
<div className={styles.leftBlock}> <div className={styles.leftBlock}>
<p>左侧块内容</p> {/* 第一行块 - 蓝色方块加标题 */}
<div className={styles.leftBlockTitle}>
<div className={styles.titleIcon}></div>
<div>风险评估参数</div>
</div>
{/* 第二行块 - 图片 */}
<div className={styles.leftBlockImage}>
<img src={map1} alt="风险评估图" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</div>
{/* 第三行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>风险等级</div>
<div className={styles.itemValue}>高风险</div>
</div>
{/* 第四行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>评估时间</div>
<div className={styles.itemValue}>2024-01-15</div>
</div>
{/* 第五行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>评估人员</div>
<div className={styles.itemValue}>张三</div>
</div>
</div> </div>
<div className={styles.rightBlock}> <div className={styles.rightBlock}>
<p>右侧块内容</p> {/* 表格 */}
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>最新预警信息</div>
</div>
</div>
{/* 表格 */}
<div className={styles.tableContainer}>
<StandardTable
columns={columns}
data={{
list: getCurrentPageData(),
pagination: pagination
}}
loading={loading}
selectionType="checkbox"
onSelectRow={onSelectChange}
onChange={handleTableChange}
pagination={{
...pagination,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total, range) =>
`共 ${total} 条`,
}}
scroll={{ x: 1200 }}
/>
</div>
</div> </div>
</div> </div>
</div> </div>

111
src/pages/safe_majorHazard/module/RiskAssessment.less
Unescape Escape View File

@ -287,30 +287,129 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
padding: 15px; padding: 0;
.leftBlock { .leftBlock {
width: 28%; width: 30%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
.leftBlockTitle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 8px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500;
font-size: 14px; 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; color: #666666;
margin-bottom: 5px;
}
.itemValue {
font-size: 14px;
color: #333333;
font-weight: 500;
}
}
} }
.rightBlock { .rightBlock {
flex: 1; width: 68%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
padding: 0;
display: flex; display: flex;
flex-direction: column;
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; padding: 8px 15px 5px 15px;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500;
font-size: 14px; font-size: 14px;
color: #666666; 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;
}
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save