diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.js b/src/pages/safe_majorHazard/module/EvaluationReport.js
index 2c7037e..06e17c2 100644
--- a/src/pages/safe_majorHazard/module/EvaluationReport.js
+++ b/src/pages/safe_majorHazard/module/EvaluationReport.js
@@ -1,31 +1,632 @@
-import React from 'react';
-import { Card, Result } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, Result, CheckCircleOutlined, Button } from 'antd';
+import * as echarts from 'echarts';
+import StandardTable from '@/components/StandardTable';
 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 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 (
         <div className={styles.Econtainer}>
+            {/* 第一个大块 - 高度16% */}
             <div className={styles.EcontainerTop}>
-                <div className={styles.EcontainerLeft}>
-                    <div className={styles.EcontainerLeftTop}>
-                        <div className={styles.EcontainerLeftTopLeft}></div>
+                <div className={styles.sectionContent}>
+                    <div className={styles.blocksContainer}>
+                        {/* 块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>
-                    <div className={styles.EcontainerLeftBottom}></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>
-                <div className={styles.EcontainerRight}></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>
 
+                        {/* 块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.EcontainerBottom}></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 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>
     );
 };
 
diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.less b/src/pages/safe_majorHazard/module/EvaluationReport.less
index e69de29..9ac7a4d 100644
--- a/src/pages/safe_majorHazard/module/EvaluationReport.less
+++ b/src/pages/safe_majorHazard/module/EvaluationReport.less
@@ -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;
+            }
+        }
+    }
+}
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js
index 69c2885..55735ce 100644
--- a/src/pages/safe_majorHazard/module/RiskAssessment.js
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.js
@@ -1,8 +1,9 @@
 
-import React, { useEffect, useRef } from 'react';  
-import { Card, Result, Select } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';  
+import { Card, Result, Select, Button } from 'antd';
 import { CheckCircleOutlined } from '@ant-design/icons';
 import * as echarts from 'echarts';
+import StandardTable from '@/components/StandardTable';
 import styles from './RiskAssessment.less';
 
 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 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) {
@@ -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 (  
         <div className={styles.Rcontainer}>
             {/* 第一个div - 高度20% */}
@@ -406,10 +644,67 @@ const RiskAssessment = () => {
              <div className={styles.RcontainerBottom}>
                  <div className={styles.sectionContent}>
                      <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 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>
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.less b/src/pages/safe_majorHazard/module/RiskAssessment.less
index 200e569..7061863 100644
--- a/src/pages/safe_majorHazard/module/RiskAssessment.less
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.less
@@ -287,30 +287,129 @@
             display: flex;
             flex-direction: row;
             gap: 10px;
-            padding: 15px;
+            padding: 0;
 
             .leftBlock {
-                width: 28%;
+                width: 30%;
                 height: 100%;
                 background-color: #fff;
+                padding: 0;
                 display: flex;
-                align-items: center;
-                justify-content: center;
-                font-family: PingFang SC;
-                font-size: 14px;
-                color: #666666;
+                flex-direction: column;
+                gap: 10px;
+                padding: 15px;
+
+                .leftBlockTitle {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-family: PingFang SC;
+                    font-weight: 500;
+                    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;
+                        margin-bottom: 5px;
+                    }
+
+                    .itemValue {
+                        font-size: 14px;
+                        color: #333333;
+                        font-weight: 500;
+                    }
+                }
             }
 
             .rightBlock {
-                flex: 1;
+                width: 68%;
                 height: 100%;
                 background-color: #fff;
+                padding: 0;
                 display: flex;
-                align-items: center;
-                justify-content: center;
-                font-family: PingFang SC;
-                font-size: 14px;
-                color: #666666;
+                flex-direction: column;
+
+                .tableHeader {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 8px 15px 5px 15px;
+
+                    .tableTitle {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-family: PingFang SC;
+                        font-weight: 500;
+                        font-size: 14px;
+                        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;
+                    }
+                }
             }
         }
     }