上传

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: [],

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 = () => {
                     <div className={styles.tableActions}>
                         <Button 
                             type="primary" 
-                            icon={<DownloadOutlined />} 
                             onClick={handleExport}
                             style={{ marginRight: 8 }}
                         >
-                            导出
+                            <img src={exportIcon} alt="导出" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px'}} />
+                            导出word 报告
                         </Button>
                         <Button 
                             danger 
-                            icon={<DeleteOutlined />} 
                             onClick={handleBatchDelete}
                             disabled={selectedRowKeys.length === 0}
                         >       
+                            <img src={deleteIcon} alt="删除" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px' }} />
                             批量删除
                         </Button>
                     </div>
@@ -551,11 +657,14 @@ const OnlineMonitoring = () => {
                 <div className={styles.tableContainer}>
                     <StandardTable
                         columns={columns}
-                        dataSource={dataSource}
+                        data={{
+                            list: getCurrentPageData(),
+                            pagination: pagination
+                        }}
                         loading={loading}
-                        selectedRows={selectedRows}
-                        selectedRowKeys={selectedRowKeys}
+                        selectionType="checkbox"
                         onSelectRow={onSelectChange}
+                        onChange={handleTableChange}
                         pagination={{
                             ...pagination,
                             showSizeChanger: false,

src/pages/safe_majorHazard/module/OnlineMonitoring.less

@@ -770,7 +770,7 @@
                 gap: 8px;
                 font-family: PingFang SC;
                 font-weight: 500;
-                font-size: 16px;
+                font-size: 14px;
                 color: #333333;
 
                 .titleIcon {
@@ -795,9 +795,10 @@
             }
 
             :global(.ant-table-thead > tr > th) {
-                background-color: #fafafa;
+                background-color: #f5f5fa;
                 font-weight: 500;
-                color: #333;
+                font-size: 14px;
+                color: #333333;
                 border-bottom: 1px solid #f0f0f0;
                 padding: 8px 12px;
                 text-align: center;