From 9e6c9bb009058b1bcf8329c7bb3f5c3c71afb6d1 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 9 Oct 2025 10:55:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=AE=BE=E6=96=BD=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_basic/module/RiskAssessment.js   | 428 ++++++++++--------
 .../business_basic/module/RiskAssessment.less | 164 +++++--
 2 files changed, 371 insertions(+), 221 deletions(-)

diff --git a/src/pages/business_basic/module/RiskAssessment.js b/src/pages/business_basic/module/RiskAssessment.js
index 34b80d6..cc5b80a 100644
--- a/src/pages/business_basic/module/RiskAssessment.js
+++ b/src/pages/business_basic/module/RiskAssessment.js
@@ -1,7 +1,7 @@
 
-import React, { useEffect, useRef, useState } from 'react';  
+import React, { useEffect, useRef, useState } from 'react';
 import { Card, Result, Select, Button, Segmented } from 'antd';
-import { CheckCircleOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
 import * as echarts from 'echarts';
 import StandardTable from '@/components/StandardTable';
 import styles from './RiskAssessment.less';
@@ -19,7 +19,7 @@ import eqicon2 from '@/assets/business_basic/eqicon2.png';
 import eqicon3 from '@/assets/business_basic/eqicon3.png';
 import eqicon4 from '@/assets/business_basic/eqicon4.png';
 
-const RiskAssessment = () => { 
+const RiskAssessment = () => {
     const chartRef = useRef(null);
     const pieChartRef = useRef(null);
     const faultPieChartRef = useRef(null);
@@ -37,7 +37,7 @@ const RiskAssessment = () => {
     useEffect(() => {
         if (pieChartRef.current) {
             const pieChart = echarts.init(pieChartRef.current);
-            
+
             const pieOption = {
                 color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'],
                 legend: {
@@ -105,7 +105,7 @@ const RiskAssessment = () => {
     useEffect(() => {
         if (faultPieChartRef.current) {
             const faultPieChart = echarts.init(faultPieChartRef.current);
-            
+
             const faultPieOption = {
                 color: ['#FF3E48', '#FF8800', '#FFC403'],
                 legend: {
@@ -172,7 +172,7 @@ const RiskAssessment = () => {
     useEffect(() => {
         if (chartRef.current) {
             const chart = echarts.init(chartRef.current);
-            
+
             // 强制初始化时调整大小
             setTimeout(() => {
                 if (chart && !chart.isDisposed()) {
@@ -205,7 +205,7 @@ const RiskAssessment = () => {
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
-                    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00'],
+                    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
                     axisLabel: {
                         fontSize: 10
                     }
@@ -223,7 +223,7 @@ const RiskAssessment = () => {
                     {
                         name: '消防水泵1',
                         type: 'line',
-                        smooth: true,
+                        smooth: false,
                         lineStyle: {
                             width: 2,
                             color: '#8979FF'
@@ -248,12 +248,12 @@ const RiskAssessment = () => {
                             borderColor: '#8979FF',
                             borderWidth: 1
                         },
-                        data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25, 24]
+                        data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
                     },
                     {
                         name: '消防水泵2',
                         type: 'line',
-                        smooth: true,
+                        smooth: false,
                         lineStyle: {
                             width: 2,
                             color: '#3CC3DF'
@@ -278,7 +278,7 @@ const RiskAssessment = () => {
                             borderColor: '#3CC3DF',
                             borderWidth: 1
                         },
-                        data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22, 21]
+                        data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
                     }
                 ]
             };
@@ -298,10 +298,10 @@ const RiskAssessment = () => {
                     }
                 }, 50); // 减少延迟时间
             };
-            
+
             // 监听窗口大小变化
             window.addEventListener('resize', handleResize);
-            
+
             // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
             let resizeObserver = null;
             if (window.ResizeObserver) {
@@ -333,7 +333,7 @@ const RiskAssessment = () => {
             // 使用MutationObserver监听DOM结构变化（菜单展开收起时）
             const mutationObserver = new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
-                    if (mutation.type === 'attributes' && 
+                    if (mutation.type === 'attributes' &&
                         (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
                         // 延迟执行，确保DOM更新完成
                         setTimeout(() => {
@@ -377,7 +377,7 @@ const RiskAssessment = () => {
             title: '编号',
             dataIndex: 'id',
             key: 'id',
-            width: 80,
+            width: 60,
             render: (text, record, index) => {
                 const page = pagination.current || 1;
                 const pageSize = pagination.pageSize || 5;
@@ -389,49 +389,41 @@ const RiskAssessment = () => {
             title: '设备编号',
             dataIndex: 'deviceId',
             key: 'deviceId',
-            width: 120,
+            width: 140,
         },
         {
-            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: 'deviceName',
+            key: 'deviceName',
+            width: 110,
         },
         {
-            title: '预警时间',
-            dataIndex: 'warningTime',
-            key: 'warningTime',
-            width: 150,
+            title: '型号规格',
+            dataIndex: 'modelSpec',
+            key: 'modelSpec',
+            width: 140,
         },
         {
-            title: '主要原因',
-            dataIndex: 'mainReason',
-            key: 'mainReason',
+            title: '安装位置',
+            dataIndex: 'installLocation',
+            key: 'installLocation',
             width: 200,
         },
         {
-            title: '处理状态',
+            title: '状态',
             dataIndex: 'status',
             key: 'status',
-            width: 100,
+            width: 80,
             render: (text) => {
                 const statusMap = {
-                    '未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
-                    '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
-                    '已处理': { color: '#52C41A', bg: '#F6FFED' }
+                    '故障': { color: '#FF4D4F', bg: '#FFF2F0' },
+                    '预警': { color: '#FAAD14', bg: '#FFF3E9' },
+                    '正常': { color: '#44BB5F', bg: '#D8F7DE' }
                 };
                 const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
                 return (
-                    <span style={{ 
-                        color: status.color, 
+                    <span style={{
+                        color: status.color,
                         backgroundColor: status.bg,
                         padding: '2px 8px',
                         borderRadius: '4px',
@@ -442,16 +434,35 @@ const RiskAssessment = () => {
                 );
             }
         },
+        {
+            title: '最后维护',
+            dataIndex: 'lastMaintenance',
+            key: 'lastMaintenance',
+            width: 150,
+        },
         {
             title: '操作',
             key: 'action',
-            width: 120,
+            width: 140,
             render: (_, record) => (
                 <div>
-                    <Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}>
-                        查看
+                    <Button type="link" size="small" style={{ 
+                        padding: '2px 8px', 
+                        fontSize: 12, 
+                        marginRight: 8,
+                        border: '1px solid #E6E9FB',
+                        backgroundColor: 'transparent',
+                        borderRadius: '4px'
+                    }}>
+                        编辑
                     </Button>
-                    <Button type="link" size="small" style={{ padding: 0 }}>
+                    <Button type="link" size="small" style={{ 
+                        padding: '2px 8px', 
+                        fontSize: 12,
+                        border: '1px solid #E6E9FB',
+                        backgroundColor: 'transparent',
+                        borderRadius: '4px'
+                    }}>
                         详情
                     </Button>
                 </div>
@@ -464,110 +475,122 @@ const RiskAssessment = () => {
         {
             key: '1',
             id: '001',
-            deviceId: 'DEV-001',
-            riskLevel: '高',
-            warningTime: '2024-01-15 08:30:25',
-            mainReason: '设备温度异常升高',
-            status: '未处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼1层大厅',
+            status: '故障',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '2',
             id: '002',
-            deviceId: 'DEV-002',
-            riskLevel: '中',
-            warningTime: '2024-01-15 09:15:10',
-            mainReason: '压力波动超出正常范围',
-            status: '处理中',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼3层 东区',
+            status: '预警',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '3',
             id: '003',
-            deviceId: 'DEV-003',
-            riskLevel: '高',
-            warningTime: '2024-01-15 10:45:30',
-            mainReason: '液位传感器故障',
-            status: '已处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '正常',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '4',
             id: '004',
-            deviceId: 'DEV-004',
-            riskLevel: '高',
-            warningTime: '2024-01-15 11:20:45',
-            mainReason: '检测到气体泄漏',
-            status: '未处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '故障',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '5',
             id: '005',
-            deviceId: 'DEV-005',
-            riskLevel: '低',
-            warningTime: '2024-01-15 12:10:20',
-            mainReason: '设备振动异常',
-            status: '已处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '正常',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '6',
             id: '006',
-            deviceId: 'DEV-006',
-            riskLevel: '中',
-            warningTime: '2024-01-15 13:25:15',
-            mainReason: '流量传感器读数异常',
-            status: '未处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '预警',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '7',
             id: '007',
-            deviceId: 'DEV-007',
-            riskLevel: '高',
-            warningTime: '2024-01-15 14:10:30',
-            mainReason: '储罐压力超限',
-            status: '处理中',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '故障',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '8',
             id: '008',
-            deviceId: 'DEV-008',
-            riskLevel: '中',
-            warningTime: '2024-01-15 15:45:20',
-            mainReason: '管道温度异常',
-            status: '已处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '正常',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '9',
             id: '009',
-            deviceId: 'DEV-009',
-            riskLevel: '高',
-            warningTime: '2024-01-15 16:30:45',
-            mainReason: '阀门控制系统故障',
-            status: '未处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '预警',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '10',
             id: '010',
-            deviceId: 'DEV-010',
-            riskLevel: '低',
-            warningTime: '2024-01-15 17:15:10',
-            mainReason: '轻微泄漏检测',
-            status: '已处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '故障',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '11',
             id: '011',
-            deviceId: 'DEV-011',
-            riskLevel: '高',
-            warningTime: '2024-01-15 18:20:35',
-            mainReason: '安全阀异常开启',
-            status: '处理中',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '正常',
+            lastMaintenance: '2025-09-10',
         },
         {
             key: '12',
             id: '012',
-            deviceId: 'DEV-012',
-            riskLevel: '中',
-            warningTime: '2024-01-15 19:05:50',
-            mainReason: '液位计读数不稳定',
-            status: '未处理',
+            deviceId: 'HQ-XF-01-001',
+            deviceName: '消防水泵',
+            modelSpec: 'XBD5.0/30-125',
+            installLocation: '总部大楼地下一层',
+            status: '预警',
+            lastMaintenance: '2025-09-10',
         },
     ];
 
@@ -590,6 +613,18 @@ const RiskAssessment = () => {
         setSelectedRows(newSelectedRows);
     };
 
+    // 新增设备按钮点击事件
+    const handleAddDevice = () => {
+        console.log('新增设备');
+        // TODO: 实现新增设备逻辑
+    };
+
+    // 导出数据按钮点击事件
+    const handleExportData = () => {
+        console.log('导出数据');
+        // TODO: 实现导出数据逻辑
+    };
+
     // 分页变化处理
     const handleTableChange = (pagination) => {
         setPagination(prev => ({
@@ -599,7 +634,7 @@ const RiskAssessment = () => {
         }));
     };
 
-    return (  
+    return (
         <div className={styles.Rcontainer}>
             {/* 第一个div - 高度20% */}
             <div className={styles.RcontainerTop}>
@@ -653,7 +688,7 @@ const RiskAssessment = () => {
                 </div>
             </div>
 
-       
+
             <div className={styles.RcontainerMiddle}>
                 <div className={styles.sectionContent}>
                     <div className={styles.middleBlock1}>
@@ -678,7 +713,7 @@ const RiskAssessment = () => {
                             <img src={map1} alt="地图" className={styles.mapImage} />
                         </div> */}
                     </div>
-                    
+
                     <div className={styles.middleBlock12}>
                         <div className={styles.block1Header}>
                             <div className={styles.block1Title}>
@@ -687,7 +722,7 @@ const RiskAssessment = () => {
                             </div>
                             <Select
                                 className={styles.customSelect}
-                                style={{ width: 120  }}
+                                style={{ width: 120 }}
                                 defaultValue="全部区域"
                                 // defaultValue="全部区域"
                                 options={[
@@ -700,9 +735,9 @@ const RiskAssessment = () => {
                         {/* 设备故障类型饼图 */}
                         <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
                         </div>
-                
+
                     </div>
-                    
+
                     <div className={styles.middleBlock2}>
                         <div className={styles.middleBlock2Title}>
                             <div className={styles.titleLeft}>
@@ -710,7 +745,7 @@ const RiskAssessment = () => {
                                 <div>设备运行参数</div>
                             </div>
                             <div className={styles.titleRight}>
-                        
+
                                 <Select
                                     style={{ width: 80 }}
                                     defaultValue="今日"
@@ -728,76 +763,103 @@ const RiskAssessment = () => {
                 </div>
             </div>
 
-             {/* 第三个div - 占满剩余位置 */}
-             <div className={styles.RcontainerBottom}>
-                 <div className={styles.sectionContent}>
-                     <div className={styles.leftBlock}>
-                         {/* 第一行块 - 蓝色方块加标题 */}
-                         <div className={styles.leftBlockTitle}>
-                             <div className={styles.titleIcon}></div>
-                             <div>风险评估参数</div>
-                         </div>
-                         
-                         {/* 第二行块 - 图片 */}
-                         <div className={styles.leftBlockImage}>
-                             {/* <img src={risk2} alt="风险评估图" style={{ width: '40%', height: '40%', 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}>
-                         {/* 表格 */}
-                         <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>
+            {/* 第三个div - 占满剩余位置 */}
+            <div className={styles.RcontainerBottom}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.leftBlock}>
+                        {/* 第一行块 - 蓝色方块加标题 */}
+                        <div className={styles.leftBlockTitle}>
+                            <div className={styles.titleIcon}></div>
+                            <div>预警信息</div>
+                        </div>
+
+                        <div className={styles.developmentContainer}>
+                            <div className={styles.developmentBlock1}>
+                                <div className={styles.leftContent}>
+                                    <div className={styles.mainText}>灭火器压力不足</div>
+                                    <div className={styles.subText}>2号楼3层 丨 15分钟前</div>
+                                </div>
+                                <div className={styles.rightContent}>
+                                    <div className={styles.importantTag}>重要</div>
+                                </div>
+                            </div>
+                            <div className={styles.developmentBlock1}>
+                                <div className={styles.leftContent}>
+                                    <div className={styles.mainText}>烟雾探测器电池低电量</div>
+                                    <div className={styles.subText}>1号楼5层 丨 1小时前</div>
+                                </div>
+                                <div className={styles.rightContent}>
+                                    <div className={styles.importantTag}>重要</div>
+                                </div>
+                            </div>
+                            <div className={styles.developmentBlock1}>
+                                <div className={styles.leftContent}>
+                                    <div className={styles.mainText}>消防栓维护到期</div>
+                                    <div className={styles.subText}>3号楼1层 丨 2小时前</div>
+                                </div>
+                                <div className={styles.rightContent}>
+                                    <div className={styles.normalTag}>一般</div>
+                                </div>
+                            </div>
+                            <div className={styles.developmentBlock1}>
+                                <div className={styles.leftContent}>
+                                    <div className={styles.mainText}>应急照明故障</div>
+                                    <div className={styles.subText}>地下停车场 丨 3小时前</div>
+                                </div>
+                                <div className={styles.rightContent}>
+                                    <div className={styles.normalTag}>一般</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.rightBlock}>
+                        {/* 表格 */}
+                        <div className={styles.tableHeader}>
+                            <div className={styles.tableTitle}>
+                                <div className={styles.titleIcon}></div>
+                                <div>消防设备台账</div>
+                            </div>
+
+                            <div className={styles.tableActions}>
+                                <button className={styles.actionButton} onClick={handleAddDevice}>
+                                    <span className={styles.buttonIcon}>+</span>
+                                    <span>新增设备</span>
+                                </button>
+                                <button className={styles.actionButton} onClick={handleExportData}>
+                                    <span className={styles.buttonIcon}><ExportOutlined /></span>
+                                    <span>导出数据</span>
+                                </button>
+                            </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>
+        </div>
+    );
+};
 
 export default RiskAssessment; 
\ No newline at end of file
diff --git a/src/pages/business_basic/module/RiskAssessment.less b/src/pages/business_basic/module/RiskAssessment.less
index 71f0328..5932c50 100644
--- a/src/pages/business_basic/module/RiskAssessment.less
+++ b/src/pages/business_basic/module/RiskAssessment.less
@@ -103,9 +103,9 @@
         }
     }
 
-    // 第二个div - 高度30%
+    // 第二个div - 高度39%
     .RcontainerMiddle {
-        height: 35%;
+        height: 33%;
         border-radius: 4px;
         display: flex;
         flex-direction: column;
@@ -123,10 +123,10 @@
                 // flex: 1;
                 width: 28%;
                 height: 100%;
-                background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+                background: #fff;
 
                 border: 2px solid #fff;
-                border-radius: 4px;
+                // border-radius: 4px;
                 position: relative;
                 padding: 0px 10px 10px 2px;
                 font-family: PingFang SC;
@@ -361,9 +361,10 @@
         }
     }
 
-    // 第三个div - 占满剩余位置
+    // 第三个div - 高度不超过45%
     .RcontainerBottom {
-        flex: 1; // 占满剩余空间
+        height: 45%; // 限制高度不超过45%
+        max-height: 45%; // 确保最大高度不超过45%
         display: flex;
         flex-direction: column;
 
@@ -374,10 +375,11 @@
             padding: 0;
 
             .leftBlock {
-                width: 30%;
+                width: 28%;
+                flex-shrink: 0;
                 height: 100%;
-                background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center;
-                background-size: cover;
+                background: #fff;
+                // background-size: cover;
                 padding: 0;
                 display: flex;
                 flex-direction: column;
@@ -392,6 +394,7 @@
                     font-weight: 500;
                     font-size: 14px;
                     color: #333333;
+                    margin-bottom: 10px;
 
                     .titleIcon {
                         width: 3px;
@@ -400,43 +403,91 @@
                     }
                 }
 
-                .leftBlockImage {
-                    height: 40%;
+                .developmentContainer {
                     width: 100%;
-                    border-radius: 4px;
-                    overflow: hidden;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    height: 80%;         
-                }
-
-                .leftBlockItem {
-                    flex: 1;
+                    height: 100%;
                     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;
-                    }
+                    gap: 8px;
 
-                    .itemValue {
-                        font-size: 14px;
-                        color: #333333;
-                        font-weight: 500;
-                    }
+                     .developmentBlock1 {
+                         flex: 1;
+                         background-color: #F1F7FF;
+                         border-radius: 4px;
+                         padding: 15px 20px;
+                         display: flex;
+                         align-items: center;
+                         width: 100%;
+
+                         .leftContent {
+                             flex: 1;
+                             display: flex;
+                             flex-direction: column;
+                             gap: 8px;
+                             min-width: 0;
+
+                             .mainText {
+                                 color: #333333;
+                                 font-size: 14px;
+                                 font-weight: 500;
+                                 font-family: PingFang SC;
+                                 width: 100%;
+                                 max-width: 500px;
+                             }
+
+                             .subText {
+                                 color: #666666;
+                                 font-size: 12px;
+                                 font-weight: 400;
+                                 font-family: PingFang SC;
+                                 width: 100%;
+                                 max-width: 400px;
+                             }
+                         }
+
+                         .rightContent {
+                             flex: 0 0 auto;
+                             display: flex;
+                             justify-content: flex-end;
+                             align-items: center;
+                             padding-right: 10px;
+                             min-width: 80px;
+
+                             .importantTag {
+                                 background-color: #FFE0E2;
+                                 color: #FF3E48;
+                                 font-size: 14px;
+                                 font-weight: 500;
+                                 font-family: PingFang SC;
+                                 width: 45px;
+                                 height: 25px;
+                                 display: flex;
+                                 align-items: center;
+                                 justify-content: center;
+                                 border-radius: 4px;
+                             }
+
+                             .normalTag {
+                                 background-color: #DAF3FF;
+                                 color: #00AAFA;
+                                 font-size: 14px;
+                                 font-weight: 500;
+                                 font-family: PingFang SC;
+                                 width: 45px;
+                                 height: 25px;
+
+                                 display: flex;
+                                 align-items: center;
+                                 justify-content: center;
+                                 border-radius: 4px;
+                             }
+                         }
+                     }
                 }
             }
 
             .rightBlock {
-                width: 68%;
+                width: calc(100% - 28% - 10px);
                 height: 100%;
                 background-color: #fff;
                 padding: 0;
@@ -464,11 +515,48 @@
                             background-color: #2E4CD4;
                         }
                     }
+
+                    .tableActions {
+                        display: flex;
+                        gap: 8px;
+                        margin-top: 5px;
+
+                        .actionButton {
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+                            height: 28px;
+                            border: 1px solid #DFE4F6;
+                            border-radius: 4px;
+                            color: #2E4CD4;
+                            font-weight: 500;
+                            font-size: 12px;
+                            padding: 0px 8px;
+                            background: transparent;
+                            cursor: pointer;
+                            transition: all 0.2s ease;
+
+                            &:hover {
+                                background-color: #f0f2ff;
+                                border-color: #2E4CD4;
+                            }
+
+                            &:active {
+                                background-color: #e6ebff;
+                            }
+
+                            .buttonIcon {
+                                font-size: 14px;
+                                font-weight: bold;
+                            }
+                        }
+                    }
                 }
 
                 .tableContainer {
                     flex: 1;
                     overflow: hidden;
+                    margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
 
                     :global(.ant-table) {
                         font-size: 12px;