diff --git a/src/assets/safe_majorHazard/online_monitoring/delete.png b/src/assets/safe_majorHazard/online_monitoring/delete.png new file mode 100644 index 0000000..24aa367 Binary files /dev/null and b/src/assets/safe_majorHazard/online_monitoring/delete.png differ diff --git a/src/assets/safe_majorHazard/online_monitoring/export.png b/src/assets/safe_majorHazard/online_monitoring/export.png new file mode 100644 index 0000000..b2beef1 Binary files /dev/null and b/src/assets/safe_majorHazard/online_monitoring/export.png differ diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js index 9b4e4d6..94a3dc6 100644 --- a/src/components/StandardTable/index.js +++ b/src/components/StandardTable/index.js @@ -27,7 +27,7 @@ class StandardTable extends PureComponent { static getDerivedStateFromProps(nextProps) { // clean state - if (nextProps.selectedRows.length === 0) { + if (nextProps.selectedRows && nextProps.selectedRows.length === 0) { const needTotalList = initTotalList(nextProps.columns); return { selectedRowKeys: [], diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js index 0920658..f69c766 100644 --- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js +++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js @@ -1,7 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Card, Result, Select, Button } from 'antd'; -import { DownloadOutlined, DeleteOutlined } from '@ant-design/icons'; import * as echarts from 'echarts'; import StandardTable from '@/components/StandardTable'; import styles from './OnlineMonitoring.less'; @@ -10,7 +9,8 @@ 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 OnlineMonitoring = () => { const chartRef = useRef(null); @@ -162,6 +162,12 @@ const OnlineMonitoring = () => { 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: '报警时间', @@ -314,20 +320,120 @@ const OnlineMonitoring = () => { 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(() => { - setDataSource(mockData); 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('导出数据'); @@ -530,18 +636,18 @@ const OnlineMonitoring = () => {