From c52375e2e3448b5809018ca6c52ebf801137d007 Mon Sep 17 00:00:00 2001
From: jiangxucong <jiangxucong@qq.com>
Date: Thu, 23 Oct 2025 17:43:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=A1=88=E4=BE=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AccidentCases.js               | 263 ++++++++++++++++++
 .../components/AccidentCases.less             | 114 ++++++++
 .../business_emergencyPlan/components/sgla.js |  15 -
 .../components/sgla.less                      |  21 --
 4 files changed, 377 insertions(+), 36 deletions(-)
 create mode 100644 src/pages/business_emergencyPlan/components/AccidentCases.js
 create mode 100644 src/pages/business_emergencyPlan/components/AccidentCases.less
 delete mode 100644 src/pages/business_emergencyPlan/components/sgla.js
 delete mode 100644 src/pages/business_emergencyPlan/components/sgla.less

diff --git a/src/pages/business_emergencyPlan/components/AccidentCases.js b/src/pages/business_emergencyPlan/components/AccidentCases.js
new file mode 100644
index 0000000..616d6c7
--- /dev/null
+++ b/src/pages/business_emergencyPlan/components/AccidentCases.js
@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Select, message, Modal, DatePicker, Form } from 'antd';
+import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './AccidentCases.less';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const AccidentCases = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const [dateRange, setDateRange] = useState([]);
+    const [pagination, setPagination] = useState({
+        current: 1,
+        pageSize: 10,
+        total: 48,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `共${total}条`,
+    });
+
+    // 模拟数据
+const [dataSource, setDataSource] = useState([
+        {
+            key: '1',
+            name: '生产安全事故',
+            level: '石油化工',
+            type: '仓库失火',
+            location: '光明路清波26号',
+            death: 13,
+            injury: 21,
+            transfer: 93,
+            loss: 10,
+        },
+        {
+            key: '2',
+            name: '公共卫生事件',
+            level: '化学纤维',
+            type: '办公楼疫情',
+            location: '中山北17号附近',
+            death: 5,
+            injury: 13,
+            transfer: 74,
+            loss: 12,
+        },
+        {
+            key: '3',
+            name: '生产安全事故',
+            level: '石油化工',
+            type: '饮水机漏电',
+            location: '蓝田景嘉通道76号',
+            death: 2,
+            injury: 11,
+            transfer: 71,
+            loss: 30,
+        },
+        {
+            key: '4',
+            name: '公共卫生事件',
+            level: '化学纤维',
+            type: '地面电线、网络乱扯、短路',
+            location: '补村东街13号(新建事业公司对面)',
+            death: 5,
+            injury: 5,
+            transfer: 69,
+            loss: 65,
+        },
+        {
+            key: '5',
+            name: '公共卫生事件',
+            level: '化学纤维',
+            type: '电脑蓝屏故障',
+            location: '中山南44号',
+            death: 7,
+            injury: 9,
+            transfer: 21,
+            loss: 27,
+        },
+        {
+            key: '6',
+            name: '生产安全事故',
+            level: '石油化工',
+            type: '仓库失火',
+            location: '双兴库房1-5号',
+            death: 1,
+            injury: 5,
+            transfer: 19,
+            loss: 19,
+        },
+    ]);
+
+    // 表格列配置
+    const columns = [
+        {
+            title: '事故名称',
+            dataIndex: 'name',
+            key: 'name',
+            width: 150,
+        },
+        {
+            title: '事故等级',
+            dataIndex: 'level',
+            key: 'level',
+            width: 120,
+        },
+        {
+            title: '事故类型',
+            dataIndex: 'type',
+            key: 'type',
+            width: 150,
+        },
+        {
+            title: '事故地点',
+            dataIndex: 'location',
+            key: 'location',
+            width: 200,
+        },
+        {
+            title: '死亡人数（人）',
+            dataIndex: 'death',
+            key: 'death',
+            width: 120,
+        },
+        {
+            title: '受伤人数（人）',
+            dataIndex: 'injury',
+            key: 'injury',
+            width: 120,
+        },
+        {
+            title: '转移人数（人）',
+            dataIndex: 'transfer',
+            key: 'transfer',
+            width: 120,
+        },
+        {
+            title: '财产损失（万元）',
+            dataIndex: 'loss',
+            key: 'loss',
+            width: 120,
+        },
+    ];
+
+    // 搜索处理
+    const handleSearch = () => {
+        setLoading(true);
+        // 模拟搜索请求
+        setTimeout(() => {
+            setLoading(false);
+            message.success('查询完成');
+        }, 1000);
+    };
+
+    // 新增处理
+    const handleAdd = () => {
+        message.info('新增功能待实现');
+    };
+
+    // 批量删除处理
+    const handleBatchDelete = () => {
+        if (selectedRowKeys.length === 0) {
+            message.warning('请选择要删除的数据');
+            return;
+        }
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
+                setSelectedRowKeys([]);
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 编辑处理
+    const handleEdit = (record) => {
+        message.info(`编辑 ${record.name} 的信息`);
+    };
+
+    // 删除处理
+    const handleDelete = (record) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: `确定要删除 ${record.name} 吗？`,
+            onOk() {
+                setDataSource(dataSource.filter(item => item.key !== record.key));
+                message.success('删除成功');
+            },
+        });
+    };
+
+    // 分页处理
+    const handleTableChange = (pagination) => {
+        setPagination(pagination);
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 页面标题 */}
+            <div className={styles.header}>
+                <div className={styles.titleBar}></div>
+                <h2 className={styles.title}>事故案例</h2>
+            </div>
+
+            {/* 搜索和操作区域 */}
+            <Form
+                layout="inline"
+                className={styles.searchBar}
+                onFinish={handleSearch}
+            >
+                <Form.Item label="事故时间" name="dateRange">
+                    <RangePicker
+                        value={dateRange}
+                        onChange={setDateRange}
+                        className={styles.datePicker}
+                    />
+                </Form.Item>
+                <Form.Item label="" name="searchValue">
+                    <Input
+                        placeholder='请输入事故名称'
+                        style={{ width: 200 }}
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        allowClear
+                        className={styles.searchInput}
+                    />
+                </Form.Item>
+                <Form.Item>
+                    <Button 
+                        type="primary" 
+                        icon={<SearchOutlined />}
+                        htmlType="submit"
+                        loading={loading}
+                        className={styles.searchButton}
+                    >
+                        查询
+                    </Button>
+                </Form.Item>
+            </Form>
+
+            {/* 数据表格 */}
+            <div className={styles.tableContainer}>
+                <StandardTable
+                    columns={columns}
+                    data={{
+                        list: dataSource,
+                        pagination: pagination
+                    }}
+                    rowKey="key"
+                    selectedRows={selectedRowKeys}
+                    onSelectRow={setSelectedRowKeys}
+                    onChange={handleTableChange}
+                    loading={loading}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default AccidentCases;
diff --git a/src/pages/business_emergencyPlan/components/AccidentCases.less b/src/pages/business_emergencyPlan/components/AccidentCases.less
new file mode 100644
index 0000000..689f93e
--- /dev/null
+++ b/src/pages/business_emergencyPlan/components/AccidentCases.less
@@ -0,0 +1,114 @@
+.container {
+    padding: 20px;
+    background: #fff;
+    height: 100vh;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    max-width: none;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .titleBar {
+        width: 3px;
+        height: 16px;
+        background: #2E4CD4;
+        margin-right: 12px;
+    }
+
+    .title {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+    }
+}
+
+.searchBar {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    margin-bottom: 10px;
+    padding: 5px;
+
+
+    .searchInput {
+        border-radius: 4px !important;
+    }
+
+    .searchButton {
+        background-color: #2E4CD4 !important;
+        border-color: #2E4CD4 !important;
+        border-radius: 4px !important;
+
+        &:hover {
+            background-color: #1e3bb8 !important;
+            border-color: #1e3bb8 !important;
+        }
+    }
+
+}
+
+.tableContainer {
+    background: #fff;
+    border-radius: 0px;
+    overflow: hidden;
+
+    .actionButtons {
+        display: flex;
+        gap: 8px;
+        font-size: 10px;
+        justify-content: center;
+
+        .ant-btn-link {
+            padding: 0;
+            height: auto;
+            font-size: 10px;
+        }
+    }
+}
+
+// 表格样式优化
+.tableContainer {
+    :global {
+        .ant-table-thead>tr>th {
+            background: #F5F5FA;
+            font-weight: 500;
+            color: #333333;
+            font-size: 14px;
+            text-align: center;
+        }
+
+        .ant-table-tbody>tr>td {
+            color: #666666;
+            font-size: 13px;
+            text-align: center;
+        }
+
+        .ant-table-tbody>tr:hover>td {
+            background: #f5f5f5;
+        }
+
+        .ant-pagination {
+            margin-top: 10px;
+            text-align: right;
+        }
+
+        // 覆盖操作列按钮样式
+        .ant-btn.ant-btn-sm {
+            font-size: 13px !important;
+            height: 20px !important;
+            padding: 0px 4px !important;
+        }
+
+        .ant-btn-link.ant-btn-sm {
+            font-size: 13px !important;
+            height: auto !important;
+            padding: 0 !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/business_emergencyPlan/components/sgla.js b/src/pages/business_emergencyPlan/components/sgla.js
deleted file mode 100644
index f6e397f..0000000
--- a/src/pages/business_emergencyPlan/components/sgla.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import styles from './sgla.less';
-
-const Sgla = () => {
-    return (
-        <div className={styles.container}>
-            <div className={styles.content}>
-                <h3>事故案例</h3>
-                <p>内容待开发</p>
-            </div>
-        </div>
-    );
-};
-
-export default Sgla;
diff --git a/src/pages/business_emergencyPlan/components/sgla.less b/src/pages/business_emergencyPlan/components/sgla.less
deleted file mode 100644
index 4c5baa2..0000000
--- a/src/pages/business_emergencyPlan/components/sgla.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.container {
-    padding: 20px;
-    
-    .content {
-        background: #fff;
-        border-radius: 8px;
-        padding: 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        
-        h3 {
-            margin-bottom: 16px;
-            color: #333;
-            font-size: 18px;
-        }
-        
-        p {
-            color: #666;
-            font-size: 14px;
-        }
-    }
-}