|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
import { Card, Result, Select, Button } from 'antd';
|
|
|
import * as echarts from 'echarts';
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
import styles from './RealtimeMonitoring.less';
|
|
|
|
|
|
import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
|
|
|
import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
|
|
|
import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
|
|
|
import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
|
|
|
import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png';
|
|
|
import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png';
|
|
|
|
|
|
const RealtimeMonitoring = () => {
|
|
|
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) {
|
|
|
const chart = echarts.init(chartRef.current);
|
|
|
|
|
|
const option = {
|
|
|
color: ['#04A7F3', '#E7C42C', '#EC6941'],
|
|
|
|
|
|
legend: {
|
|
|
data: ['液位', '温度', '压力'],
|
|
|
top: "-3px",
|
|
|
left: "center",
|
|
|
itemGap: 40, // 图例间距
|
|
|
textStyle: {
|
|
|
fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '2%',
|
|
|
right: '4%',
|
|
|
bottom: '2%',
|
|
|
top: '12%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
|
|
|
axisLabel: {
|
|
|
fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
min: 0,
|
|
|
max: 500,
|
|
|
axisLabel: {
|
|
|
formatter: '{value}',
|
|
|
fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '液位',
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
width: 1.5,
|
|
|
color: '#04A7F3'
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{ offset: 0, color: 'rgba(4, 167, 243, 0.3)' },
|
|
|
{ offset: 1, color: 'rgba(4, 167, 243, 0)' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
symbol: 'none', // 不显示数据点
|
|
|
data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
|
|
|
},
|
|
|
{
|
|
|
name: '温度',
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
width: 1.5,
|
|
|
color: '#E7C42C'
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{ offset: 0, color: 'rgba(231, 196, 44, 0.3)' },
|
|
|
{ offset: 1, color: 'rgba(231, 196, 44, 0)' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
symbol: 'none',
|
|
|
data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
|
|
|
},
|
|
|
{
|
|
|
name: '压力',
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
width: 1.5,
|
|
|
color: '#EC6941'
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
colorStops: [
|
|
|
{ offset: 0, color: 'rgba(236, 105, 65, 0)' },
|
|
|
{ offset: 1, color: 'rgba(236, 105, 65, 0.3)' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
symbol: 'none',
|
|
|
data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
|
// 响应式调整 - 使用ResizeObserver监听容器尺寸变化
|
|
|
let resizeTimer = null;
|
|
|
const handleResize = () => {
|
|
|
// 防抖处理，避免频繁调用resize
|
|
|
if (resizeTimer) {
|
|
|
clearTimeout(resizeTimer);
|
|
|
}
|
|
|
resizeTimer = setTimeout(() => {
|
|
|
chart.resize();
|
|
|
}, 100);
|
|
|
};
|
|
|
|
|
|
// 监听窗口大小变化
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
|
|
// 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
|
|
|
let resizeObserver = null;
|
|
|
if (window.ResizeObserver) {
|
|
|
resizeObserver = new ResizeObserver(() => {
|
|
|
// 使用setTimeout确保DOM更新完成后再调整图表
|
|
|
setTimeout(() => {
|
|
|
handleResize();
|
|
|
}, 0);
|
|
|
});
|
|
|
resizeObserver.observe(chartRef.current);
|
|
|
}
|
|
|
|
|
|
return () => {
|
|
|
window.removeEventListener('resize', handleResize);
|
|
|
if (resizeObserver) {
|
|
|
resizeObserver.disconnect();
|
|
|
}
|
|
|
if (resizeTimer) {
|
|
|
clearTimeout(resizeTimer);
|
|
|
}
|
|
|
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: 'alarmTime',
|
|
|
key: 'alarmTime',
|
|
|
width: 150,
|
|
|
},
|
|
|
{
|
|
|
title: '报警传感器名称',
|
|
|
dataIndex: 'sensorName',
|
|
|
key: 'sensorName',
|
|
|
width: 150,
|
|
|
},
|
|
|
{
|
|
|
title: '报警类型',
|
|
|
dataIndex: 'alarmType',
|
|
|
key: 'alarmType',
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '报警内容',
|
|
|
dataIndex: 'alarmContent',
|
|
|
key: 'alarmContent',
|
|
|
width: 200,
|
|
|
},
|
|
|
{
|
|
|
title: '优先级',
|
|
|
dataIndex: 'priority',
|
|
|
key: 'priority',
|
|
|
width: 80,
|
|
|
render: (text) => {
|
|
|
const colorMap = {
|
|
|
'高': '#FF4D4F',
|
|
|
'中': '#FAAD14',
|
|
|
'低': '#52C41A'
|
|
|
};
|
|
|
return <span style={{ color: colorMap[text] || '#333' }}>{text}</span>;
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
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: '处理时间',
|
|
|
dataIndex: 'processTime',
|
|
|
key: 'processTime',
|
|
|
width: 150,
|
|
|
},
|
|
|
{
|
|
|
title: '处理人',
|
|
|
dataIndex: 'processor',
|
|
|
key: 'processor',
|
|
|
width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
key: 'action',
|
|
|
width: 120,
|
|
|
render: (_, record) => (
|
|
|
<div>
|
|
|
<Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}>
|
|
|
查看
|
|
|
</Button>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
// 模拟数据
|
|
|
const mockData = [
|
|
|
{
|
|
|
key: '1',
|
|
|
id: '001',
|
|
|
alarmTime: '2024-01-15 08:30:25',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '温度超限',
|
|
|
alarmContent: '储罐温度超过安全阈值',
|
|
|
priority: '高',
|
|
|
status: '未处理',
|
|
|
processTime: '-',
|
|
|
processor: '-',
|
|
|
},
|
|
|
{
|
|
|
key: '2',
|
|
|
id: '002',
|
|
|
alarmTime: '2024-01-15 09:15:10',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '压力异常',
|
|
|
alarmContent: '管道压力异常波动',
|
|
|
priority: '中',
|
|
|
status: '处理中',
|
|
|
processTime: '2024-01-15 09:20:00',
|
|
|
processor: '张三',
|
|
|
},
|
|
|
{
|
|
|
key: '3',
|
|
|
id: '003',
|
|
|
alarmTime: '2024-01-15 10:45:30',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '液位异常',
|
|
|
alarmContent: '储罐液位低于警戒线',
|
|
|
priority: '高',
|
|
|
status: '已处理',
|
|
|
processTime: '2024-01-15 11:00:15',
|
|
|
processor: '李四',
|
|
|
},
|
|
|
{
|
|
|
key: '4',
|
|
|
id: '004',
|
|
|
alarmTime: '2024-01-15 11:20:45',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '气体泄漏',
|
|
|
alarmContent: '检测到可燃气体泄漏',
|
|
|
priority: '高',
|
|
|
status: '未处理',
|
|
|
processTime: '-',
|
|
|
processor: '-',
|
|
|
},
|
|
|
{
|
|
|
key: '5',
|
|
|
id: '005',
|
|
|
alarmTime: '2024-01-15 12:10:20',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '设备振动',
|
|
|
alarmContent: '设备异常振动',
|
|
|
priority: '低',
|
|
|
status: '已处理',
|
|
|
processTime: '2024-01-15 12:30:00',
|
|
|
processor: '王五',
|
|
|
},
|
|
|
{
|
|
|
key: '6',
|
|
|
id: '006',
|
|
|
alarmTime: '2024-01-15 13:25:15',
|
|
|
sensorName: 'LNG管道',
|
|
|
alarmType: '流量异常',
|
|
|
alarmContent: '管道流量异常波动',
|
|
|
priority: '中',
|
|
|
status: '未处理',
|
|
|
processTime: '-',
|
|
|
processor: '-',
|
|
|
},
|
|
|
{
|
|
|
key: '7',
|
|
|
id: '007',
|
|
|
alarmTime: '2024-01-15 14:10:30',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '温度异常',
|
|
|
alarmContent: '储罐温度异常升高',
|
|
|
priority: '高',
|
|
|
status: '处理中',
|
|
|
processTime: '2024-01-15 14:15:00',
|
|
|
processor: '赵六',
|
|
|
},
|
|
|
{
|
|
|
key: '8',
|
|
|
id: '008',
|
|
|
alarmTime: '2024-01-15 15:45:20',
|
|
|
sensorName: 'LNG管道',
|
|
|
alarmType: '压力超限',
|
|
|
alarmContent: '管道压力超过安全阈值',
|
|
|
priority: '高',
|
|
|
status: '已处理',
|
|
|
processTime: '2024-01-15 16:00:00',
|
|
|
processor: '孙七',
|
|
|
},
|
|
|
{
|
|
|
key: '9',
|
|
|
id: '009',
|
|
|
alarmTime: '2024-01-15 16:30:45',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '液位超限',
|
|
|
alarmContent: '储罐液位超过警戒线',
|
|
|
priority: '中',
|
|
|
status: '未处理',
|
|
|
processTime: '-',
|
|
|
processor: '-',
|
|
|
},
|
|
|
{
|
|
|
key: '10',
|
|
|
id: '010',
|
|
|
alarmTime: '2024-01-15 17:15:10',
|
|
|
sensorName: 'LNG管道',
|
|
|
alarmType: '泄漏检测',
|
|
|
alarmContent: '检测到轻微气体泄漏',
|
|
|
priority: '低',
|
|
|
status: '已处理',
|
|
|
processTime: '2024-01-15 17:30:00',
|
|
|
processor: '周八',
|
|
|
},
|
|
|
{
|
|
|
key: '11',
|
|
|
id: '011',
|
|
|
alarmTime: '2024-01-15 18:20:35',
|
|
|
sensorName: 'LNG储罐',
|
|
|
alarmType: '设备故障',
|
|
|
alarmContent: '储罐阀门异常关闭',
|
|
|
priority: '高',
|
|
|
status: '处理中',
|
|
|
processTime: '2024-01-15 18:25:00',
|
|
|
processor: '吴九',
|
|
|
},
|
|
|
{
|
|
|
key: '12',
|
|
|
id: '012',
|
|
|
alarmTime: '2024-01-15 19:05:50',
|
|
|
sensorName: 'LNG管道',
|
|
|
alarmType: '温度异常',
|
|
|
alarmContent: '管道温度异常下降',
|
|
|
priority: '中',
|
|
|
status: '未处理',
|
|
|
processTime: '-',
|
|
|
processor: '-',
|
|
|
},
|
|
|
];
|
|
|
|
|
|
// 初始化数据
|
|
|
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,
|
|
|
}));
|
|
|
};
|
|
|
|
|
|
// 导出功能
|
|
|
const handleExport = () => {
|
|
|
console.log('导出数据');
|
|
|
// 这里可以添加导出逻辑
|
|
|
};
|
|
|
|
|
|
// 批量删除功能
|
|
|
const handleBatchDelete = () => {
|
|
|
if (selectedRowKeys.length === 0) {
|
|
|
console.log('没有选中任何行');
|
|
|
// 可以在这里添加提示用户选择行的逻辑
|
|
|
return;
|
|
|
}
|
|
|
console.log('批量删除', selectedRowKeys);
|
|
|
// 这里可以添加批量删除逻辑
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className={styles.realtimeContainer}>
|
|
|
<div className={styles.realtimeContainerTop}>
|
|
|
<div className={styles.realtimeContainerTopLeft}>
|
|
|
<div className={styles.realtimeContainerTopLeftTop}>
|
|
|
<div className={styles.realtimeAlarmO}>
|
|
|
<div className={styles.realtimeAlarmOLeft}>
|
|
|
<img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.realtimeAlarmORight}>
|
|
|
<div className={styles.realtimeAlarmORightText1}>总报警</div>
|
|
|
<div className={styles.realtimeAlarmORightText2}>1456</div>
|
|
|
<div className={styles.realtimeAlarmORightText3}>
|
|
|
<div>
|
|
|
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
|
|
|
</div>
|
|
|
<div>
|
|
|
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmTw}>
|
|
|
<div className={styles.realtimeAlarmTwLeft}>
|
|
|
<img style={{ width: 58, height: 47 }} src={alarm1} alt='alarm1' />
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmTwRight}>
|
|
|
<div className={styles.realtimeAlarmTwRightText1}>一级报警</div>
|
|
|
<div className={styles.realtimeAlarmTwRightText2}>357</div>
|
|
|
<div className={styles.realtimeAlarmTwRightText3}>
|
|
|
<div>
|
|
|
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
|
|
|
</div>
|
|
|
<div>
|
|
|
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmTh}>
|
|
|
<div className={styles.realtimeAlarmThLeft}>
|
|
|
<img style={{ width: 58, height: 47 }} src={alarm2} alt='alarm2' />
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmThRight}>
|
|
|
<div className={styles.realtimeAlarmThRightText1}>二级报警</div>
|
|
|
<div className={styles.realtimeAlarmThRightText2}>401</div>
|
|
|
<div className={styles.realtimeAlarmThRightText3}>
|
|
|
<div>
|
|
|
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
|
|
|
</div>
|
|
|
<div>
|
|
|
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmF}>
|
|
|
<div className={styles.realtimeAlarmFLeft}>
|
|
|
<img style={{ width: 58, height: 47 }} src={alarm3} alt='alarm3' />
|
|
|
</div>
|
|
|
<div className={styles.realtimeAlarmFRight}>
|
|
|
<div className={styles.realtimeAlarmFRightText1}>三级报警</div>
|
|
|
<div className={styles.realtimeAlarmFRightText2}>556</div>
|
|
|
<div className={styles.realtimeAlarmFRightText3}>
|
|
|
<div>
|
|
|
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
|
|
|
</div>
|
|
|
<div>
|
|
|
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeContainerTopLeftBottom}>
|
|
|
<div className={styles.realtimeContainerTopLeftBottomTitle}>
|
|
|
<div className={styles.realtimeTitleLeft}>
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
<div>预警看板</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeTitleRight}>
|
|
|
<div>检测对象</div>
|
|
|
<Select
|
|
|
style={{ width: 80 }}
|
|
|
defaultValue="储罐"
|
|
|
options={[
|
|
|
{ value: '储罐', label: '储罐' },
|
|
|
{ value: '管道', label: '管道' },
|
|
|
{ value: '设备', label: '设备' }
|
|
|
]}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeContainerTopLeftBottomChart} ref={chartRef}>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeContainerTopRight}>
|
|
|
<div className={styles.realtimeDataHeader}>
|
|
|
<div className={styles.realtimeTitleLeft}>
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
<div>实时数据采集</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeTotalCount}>
|
|
|
总数： <text style={{ color: '#2e4cd4' }}>1378</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.realtimeDataItem1}>
|
|
|
<div className={styles.realtimeDataItemLeft}>
|
|
|
<div className={styles.realtimeAreaName}>储罐液化装置区</div>
|
|
|
<div className={styles.realtimeRValue}>R值: 1765</div>
|
|
|
<div className={styles.realtimeCodeNumber}>编号:XXXXXXXX</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItemRight}>
|
|
|
<div className={styles.realtimeCircleContainer}>
|
|
|
<div className={styles.realtimeOuterCircle}>
|
|
|
<div className={styles.realtimeInnerCircle}>
|
|
|
<div className={styles.realtimeLevelText}>三级</div>
|
|
|
<div className={styles.realtimeRiskText}>危险等级</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItem2}>
|
|
|
<div className={styles.realtimeDataItemLeft}>
|
|
|
<div className={styles.realtimeAreaName}>储罐液化装置区</div>
|
|
|
<div className={styles.realtimeRValue}>R值: 1765</div>
|
|
|
<div className={styles.realtimeCodeNumber}>编号:XXXXXXXX</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItemRight}>
|
|
|
<div className={styles.realtimeCircleContainer}>
|
|
|
<div className={styles.realtimeOuterCircle}>
|
|
|
<div className={styles.realtimeInnerCircle}>
|
|
|
<div className={styles.realtimeLevelText}>一级</div>
|
|
|
<div className={styles.realtimeRiskText}>危险等级</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItem3}>
|
|
|
<div className={styles.realtimeDataItemLeft}>
|
|
|
<div className={styles.realtimeAreaName}>储罐液化装置区</div>
|
|
|
<div className={styles.realtimeRValue}>R值: 1765</div>
|
|
|
<div className={styles.realtimeCodeNumber}>编号:XXXXXXXX</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItemRight}>
|
|
|
<div className={styles.realtimeCircleContainer}>
|
|
|
<div className={styles.realtimeOuterCircle}>
|
|
|
<div className={styles.realtimeInnerCircle}>
|
|
|
<div className={styles.realtimeLevelText}>二级</div>
|
|
|
<div className={styles.realtimeRiskText}>危险等级</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItem4}>
|
|
|
<div className={styles.realtimeDataItemLeft}>
|
|
|
<div className={styles.realtimeAreaName}>储罐液化装置区</div>
|
|
|
<div className={styles.realtimeRValue}>R值: 1765</div>
|
|
|
<div className={styles.realtimeCodeNumber}>编号:XXXXXXXX</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeDataItemRight}>
|
|
|
<div className={styles.realtimeCircleContainer}>
|
|
|
<div className={styles.realtimeOuterCircle}>
|
|
|
<div className={styles.realtimeInnerCircle}>
|
|
|
<div className={styles.realtimeLevelText}>三级</div>
|
|
|
<div className={styles.realtimeRiskText}>危险等级</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 表格 */}
|
|
|
<div className={styles.realtimeContainerBottom}>
|
|
|
{/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
|
|
|
<div className={styles.realtimeTableHeader}>
|
|
|
<div className={styles.realtimeTableTitle}>
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
<div>报警信息列表</div>
|
|
|
</div>
|
|
|
<div className={styles.realtimeTableActions}>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={handleExport}
|
|
|
style={{ marginRight: 8 }}
|
|
|
>
|
|
|
<img src={exportIcon} alt="导出" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px'}} />
|
|
|
导出word 报告
|
|
|
</Button>
|
|
|
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={handleBatchDelete}
|
|
|
>
|
|
|
<img src={deleteIcon} alt="删除" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px' }} />
|
|
|
批量删除
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 表格 5行10列 带页码 每页5条数据 */}
|
|
|
<div className={styles.realtimeTableContainer}>
|
|
|
<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>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default RealtimeMonitoring;
|
