From 5f2b02043c5160dbb8377108b418f7a59df727b2 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Fri, 10 Oct 2025 10:08:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A3=E4=BB=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../safe_majorHazard/SafeMajorHazardList.js   |   5 -
 .../module/ResponsibilityImplementation.js    | 499 +++++++++++++-----
 .../module/ResponsibilityImplementation.less  | 101 +---
 3 files changed, 391 insertions(+), 214 deletions(-)

diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.js b/src/pages/safe_majorHazard/SafeMajorHazardList.js
index c35703a..22b9c79 100644
--- a/src/pages/safe_majorHazard/SafeMajorHazardList.js
+++ b/src/pages/safe_majorHazard/SafeMajorHazardList.js
@@ -6,17 +6,12 @@ import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
 import RiskAssessment from './module/RiskAssessment'; //风险管控
 import EvaluationReport from './module/EvaluationReport'; //评估报告
 
- 
-
-
 const SafeMajorHazardList = () => {
     const [activeModule, setActiveModule] = useState('responsibility');
-
     const handleModuleClick = (module) => {
         setActiveModule(module)
     }
 
-
     const renderModule = () => {
         switch (activeModule) {
             case 'responsibility':
diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
index 000090f..ee48f03 100644
--- a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
@@ -1,114 +1,345 @@
 
-import React from 'react'; 
-import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';  
-import { ExportOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select } from 'antd';
+import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
 import StandardTable from '@/components/StandardTable';
+import ReactECharts from 'echarts-for-react';
 import styles from './ResponsibilityImplementation.less';
 
 import timer_shaft from '@/assets/basic_information/timer_shaft.png'
 
 
-const ResponsibilityImplementation = () => {  
+const ResponsibilityImplementation = () => {
 
     const columns = [
         {
-            title:"编号",
-            dataIndex:"id",
-            key:"id",
-            width:60,
+            title: "编号",
+            dataIndex: "id",
+            key: "id",
+            width: 50,
         },
         {
-            title:"责任区域",
-            dataIndex:"zrqy",
-            key:"zrqy",
-            width:120,
+            title: "责任区域",
+            dataIndex: "zrqy",
+            key: "zrqy",
+            width: 80,
         },
         {
-            title:"设备型号",
-            dataIndex:"sbxh",
-            key:"sbxh",
-            width:120,
+            title: "设备型号",
+            dataIndex: "sbxh",
+            key: "sbxh",
+            width: 120,
         },
         {
-            title:"危险源类型",
-            dataIndex:"wxlylx",
-            key:"wxlylx",
-            width:120,
+            title: "危险源类型",
+            dataIndex: "wxlylx",
+            key: "wxlylx",
+            width: 110,
         },
         {
-            title:"责任人",
-            dataIndex:"zrr",
-            key:"zrr",
-            width:120,
+            title: "责任人",
+            dataIndex: "zrr",
+            key: "zrr",
+            width: 80,
         },
         {
-            title:"联系方式",
-            dataIndex:"lxfs",
-            key:"lxfs",
-            width:120,
+            title: "电话",
+            dataIndex: "lxfs",
+            key: "lxfs",
+            width: 120,
         },
         {
-            title:"巡检频率",
-            dataIndex:"xjpl",
-            key:"xjpl",
-            width:120,
+            title: "巡检频率",
+            dataIndex: "xjpl",
+            key: "xjpl",
+            width: 120,
         },
         {
-            title:"最近巡检",
-            dataIndex:"zjxj",
-            key:"zjxj",
-            width:120,
+            title: "最近巡检",
+            dataIndex: "zjxj",
+            key: "zjxj",
+            width: 120,
         },
         {
-            title:"状态",
-            dataIndex:"zt",
-            key:"zt",
-            width:120,
+            title: "状态",
+            dataIndex: "zt",
+            key: "zt",
+            width: 90,
+            render: (text) => {
+                const statusMap = {
+                    '正常': { color: '#44BB5F', bg: '#D8F7DE' },
+                    '待巡检': { color: '#FFC405', bg: '#FFF6DA' },
+                    '需处理': { color: '#FF2526', bg: '#FCEAEA' }
+                };
+                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:"cz",
-            key:"cz",
-            width:120,
-            render: (text, record) => {  // ======== 渲染操作列 ========
-                const handleView = (record) => {  // ======== 定义查看函数 ========
-                    console.log('查看记录:', record);  // ======== 打印记录信息到控制台 ========
-                    // 这里可以添加查看详情的逻辑  // ======== 注释：可以添加查看详情的逻辑 ========
-                };  // ======== 函数结束 ========
+            title: "操作",
+            dataIndex: "cz",
+            key: "cz",
+            width: 120,
+            render: (text, record) => {
+                const handleView = (record) => {
+                    console.log('查看记录:', record);
+                };
                 
-                return (  // ======== 返回按钮组件 ========
-                    <Button type="link" onClick={() => handleView(record)}>查看</Button>  // ======== 查看按钮，点击时调用handleView函数 ========
-                );  // ======== return语句结束 ========
-            }  // ======== render函数结束 ========
+                const handleEdit = (record) => {
+                    console.log('编辑记录:', record);
+                };
+
+                return (
+                    <div>
+                        <Button 
+                            type="link" 
+                            onClick={() => handleView(record)}
+                            style={{ color: '#2E4CD4' }}
+                        >
+                            查看
+                        </Button>
+                        <Button 
+                            type="link" 
+                            onClick={() => handleEdit(record)}
+                            style={{ color: '#2E4CD4' }}
+                        >
+                            编辑
+                        </Button>
+                    </div>
+                );
+            }
+        }
+    ];
+
+    // 12条写死数据
+    const tableData = [
+        {
+            key: '1',
+            id: '01',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '正常'
+        },
+        {
+            key: '2',
+            id: '02',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '待巡检'
+        },
+        {
+            key: '3',
+            id: '03',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '需处理'
+        },
+        {
+            key: '4',
+            id: '04',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '正常'
+        },
+        {
+            key: '5',
+            id: '05',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '待巡检'
+        },
+        {
+            key: '6',
+            id: '06',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '需处理'
+        },
+        {
+            key: '7',
+            id: '07',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '正常'
+        },
+        {
+            key: '8',
+            id: '08',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '待巡检'
+        },
+        {
+            key: '9',
+            id: '09',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '需处理'
+        },
+        {
+            key: '10',
+            id: '10',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '正常'
+        },
+        {
+            key: '11',
+            id: '11',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '待巡检'
+        },
+        {
+            key: '12',
+            id: '12',
+            zrqy: '储罐区A',
+            sbxh: '130910180007',
+            wxlylx: '易燃易爆品存储',
+            zrr: '陈安心',
+            lxfs: '152****7754',
+            xjpl: '每日两次',
+            zjxj: '2025-06-08 13:34',
+            zt: '需处理'
         }
     ];
 
-    // 生成20条假数据
-    const generateMockData = () => {  // ======== 定义生成假数据的函数 ========
-        const data = [];  // ======== 创建空数组存储数据 ========
-        const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区'];  // ======== 责任区域选项 ========
-        const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀'];  // ======== 设备型号选项 ========
-        const statuses = ['正常', '维护中', '故障', '停用', '检修'];  // ======== 状态选项 ========
-        const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二'];  // ======== 责任人姓名选项 ========
-        
-        for (let i = 1; i <= 20; i++) {  // ======== 循环生成20条数据 ========
-            data.push({  // ======== 添加一条数据到数组 ========
-                key: i.toString(),  // ======== 唯一标识 ========
-                id: `WX${String(i).padStart(3, '0')}`,  // ======== 编号：WX001, WX002... ========
-                zrqy: areas[Math.floor(Math.random() * areas.length)],  // ======== 随机选择责任区域 ========
-                sbxh: devices[Math.floor(Math.random() * devices.length)],  // ======== 随机选择设备型号 ========
-                zrr: names[Math.floor(Math.random() * names.length)],  // ======== 随机选择责任人 ========
-                zt: statuses[Math.floor(Math.random() * statuses.length)],  // ======== 随机选择状态 ========
-            });  // ======== 数据对象结束 ========
-        }  // ======== 循环结束 ========
-        return data;  // ======== 返回生成的数据数组 ========
-    };  // ======== 函数结束 ========
-
-    const tableData = generateMockData();  // ======== 调用函数生成假数据 ========
-
-    return ( 
-        <div  className={styles.containerR}> 
-            <div className={styles.containerOne}> 
+    // 雷达图配置方法
+    const getRadarChartOption = () => {
+        return {
+            radar: {
+                indicator: [
+                    { name: '{a|问题处理率} {b|85%}', max: 100, nameLocation: 'start', nameGap: -60 },
+                    { name: '{a|隐患整改率} {b|15%}', max: 100, nameGap: 20 },
+                    { name: '{a|履职频次} {b|92%}', max: 100, nameGap: 20 }
+                ],
+                center: ['50%', '60%'],
+                radius: 48,
+                splitNumber: 4,
+                shape: 'polygon',
+                axisName: {
+                    rich: {
+                        a: {
+                            color: '#333',
+                            fontSize: 12,
+                            fontWeight: 400,
+                        },
+                        b: {
+                            color: '#2E4CD4',
+                            fontSize: 12,
+                            fontWeight: 400,
+                        }
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#BFCBFF']
+                    }
+                },
+                splitArea: {
+                    areaStyle: {
+                        color: ['#fff']
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#E6EAF5'
+                    }
+                }
+            },
+            series: [{
+                type: 'radar',
+                data: [
+                    {
+                        value: [85, 15, 92],
+                        areaStyle: {
+                            color: '#499BFF'
+                        },
+                        lineStyle: {
+                            color: '#1269FF',
+                            width: 2
+                        },
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        itemStyle: {
+                            color: '#2E4CD4',
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        }
+                    }
+                ]
+            }]
+        }
+    };
+
+    return (
+        <div className={styles.containerR}>
+            <div className={styles.containerOne}>
                 <div className={styles.containerOneLeft}>
                     {/* 第一块：蓝色块 + 标题 履职时间轴 */}
                     <div className={styles.leftTopSection}>
@@ -121,10 +352,10 @@ const ResponsibilityImplementation = () => {
                         <div style={{ marginTop: '15px' }}>
                             <img src={timer_shaft} alt="时间轴" style={{ width: '100%', height: 'auto' }} />
                         </div>
-                        
+
                     </div>
                 </div>
-                
+
                 <div className={styles.containerOneRight}>
                     {/* 第一块：标题 + 下拉选择框 + 导出按钮 */}
                     <div className={styles.rightTopSection}>
@@ -150,8 +381,8 @@ const ResponsibilityImplementation = () => {
                             />
                         </div>
                         <div className={styles.rightTopRight}>
-                            <Button 
-                                type="primary" 
+                            <Button
+                                type="primary"
                                 className={styles.exportBtn}
                                 icon={<ExportOutlined />}
                             >
@@ -159,26 +390,28 @@ const ResponsibilityImplementation = () => {
                             </Button>
                         </div>
                     </div>
-                    
-                    {/* 第二块：重叠图片和div */}
+
+                    {/* 第二块：雷达图 */}
                     <div className={styles.rightBottomSection}>
-                        <div className={styles.overlayContainer}>
-                            {/* 背景图片1 */}
-                            <div className={styles.backgroundImage1}>
-                                <div className={styles.placeholderText}>占位图片1</div>
-                            </div>
-                            {/* 背景图片2 */}
-                            <div className={styles.backgroundImage2}>
-                                <div className={styles.placeholderText}>占位图片2</div>
-                            </div>
-                            {/* 重叠的div元素 */}
-                            <div className={styles.overlayDiv1}>待开发123</div>
-                            <div className={styles.overlayDiv2}>待开发123</div>
-                            <div className={styles.overlayDiv3}>待开发123</div>
+                        <div style={{
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            // backgroundColor: 'red',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            position: 'relative',
+                            // padding: '20px'
+                        }}>
+                            <ReactECharts
+                                option={getRadarChartOption()}
+                                style={{ width: '100%', height: '100%' }}
+                                opts={{ renderer: 'canvas' }}
+                            />
                         </div>
                     </div>
                 </div>
-            </div>  
+            </div>
 
             <div className={styles.containerTwo}>
                 {/* 第一个大块：标题 */}
@@ -188,37 +421,63 @@ const ResponsibilityImplementation = () => {
                         <div>重大危险源安全包信息库</div>
                     </div>
                 </div>
-                
+
                 {/* 第二个大块：搜索和按钮 */}
                 <div className={styles.containerTwoActions}>
                     <div className={styles.searchSection}>
-                        <Input placeholder="搜索危险源编号" />
+                        <Input.Search 
+                            placeholder="搜索危险源编号..." 
+                            style={{ fontSize: '12px',  width:'220px' }}
+                        />
                     </div>
                     <div className={styles.buttonSection}>
-                        <Button>新增责任人</Button>
-                        <Button>导出清单</Button>
+                        <Button 
+                            icon={<PlusOutlined />}
+                            style={{ 
+                                color: '#2E4CD4', 
+                                backgroundColor: 'transparent', 
+                                borderColor: '#DFE4F6',
+                                fontSize: '12px'
+                            }}
+                        >
+                            新增责任人
+                        </Button>
+                        <Button 
+                            icon={<ExportOutlined />}
+                            style={{ 
+                                color: '#2E4CD4', 
+                                backgroundColor: 'transparent', 
+                                borderColor: '#DFE4F6',
+                                fontSize: '12px'
+                            }}
+                        >
+                            导出清单
+                        </Button>
                     </div>
                 </div>
-                
+
                 {/* 第三个大块：表格 */}
                 <div className={styles.containerTwoTable}>
                     <StandardTable
-                        columns={columns}  // ======== 表格列配置 ========
-                        data={{  // ======== 数据对象，包含list和pagination ========
-                            list: tableData,  // ======== 表格数据列表 ========
-                            pagination: {  // ======== 分页配置 ========
-                                currentPage: 1,  // ======== 当前页码 ========
-                                pageSize: 5,  // ======== 每页显示10条数据 ========
-                                total: tableData.length,  // ======== 总数据条数 ========
-                            }  // ======== 分页配置结束 ========
-                        }}  // ======== 数据对象结束 ========
-                        selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
-                        onSelectRow={() => {}}  // ======== 行选择事件处理函数 ========
-                        onChange={() => {}}  // ======== 表格变化事件处理函数 ========
-                    /> 
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                currentPage: 1,
+                                pageSize: 5,
+                                total: tableData.length,
+                                showTotal: (total, range) => `共 ${total} 条数据`,
+                                showSizeChanger: false,
+                                jumpText: '前往',
+                            }
+                        }}
+                        selectedRows={[]}
+                        onSelectRow={() => { }}
+                        onChange={() => { }}
+                    />
                 </div>
             </div>
-        </div> 
-    );  
-}; 
+        </div>
+    );
+};
 export default ResponsibilityImplementation;  
diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
index 139d75f..1c7687a 100644
--- a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
@@ -49,7 +49,7 @@
             width:42%;
             display: flex;
             flex-direction: column;
-            padding: 15px;
+            padding:15px 15px 0px 15px;
             border: 1px solid #f0f0f0;
             border-radius: 4px;
 
@@ -103,94 +103,14 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-
-                .overlayContainer {
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    .backgroundImage1 {
-                        position: absolute;
-                        top: 10px;
-                        left: 10px;
-                        width: 60%;
-                        height: 60%;
-                        background-color: #e6f7ff;
-                        border: 2px solid #91d5ff;
-                        border-radius: 8px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        z-index: 1;
-
-                        .placeholderText {
-                            font-size: 12px;
-                            color: #1890ff;
-                            font-weight: 500;
-                        }
-                    }
-
-                    .backgroundImage2 {
-                        position: absolute;
-                        bottom: 10px;
-                        right: 10px;
-                        width: 50%;
-                        height: 50%;
-                        background-color: #f6ffed;
-                        border: 2px solid #b7eb8f;
-                        border-radius: 8px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        z-index: 1;
-
-                        .placeholderText {
-                            font-size: 12px;
-                            color: #52c41a;
-                            font-weight: 500;
+                
+                // 调整雷达图标签位置
+                :global(.echarts-for-react) {
+                    :global(.echarts) {
+                        :global(.echarts-axis-name) {
+                            transform: translateY(10px) !important;
                         }
                     }
-
-                    .overlayDiv1 {
-                        position: absolute;
-                        top: 20px;
-                        right: 20px;
-                        background-color: rgba(255, 77, 79, 0.8);
-                        color: white;
-                        padding: 8px 12px;
-                        border-radius: 4px;
-                        font-size: 12px;
-                        z-index: 3;
-                    }
-
-                    .overlayDiv2 {
-                        position: absolute;
-                        bottom: 30px;
-                        left: 30px;
-                        background-color: rgba(82, 196, 26, 0.8);
-                        color: white;
-                        padding: 8px 12px;
-                        border-radius: 4px;
-                        font-size: 12px;
-                        z-index: 3;
-                    }
-
-                    .overlayDiv3 {
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        background-color: rgba(24, 144, 255, 0.8);
-                        color: white;
-                        padding: 10px 16px;
-                        border-radius: 6px;
-                        font-size: 14px;
-                        font-weight: 500;
-                        z-index: 3;
-                    }
                 }
             }
         }
@@ -253,10 +173,10 @@
                 gap: 8px;
 
                 :global(.ant-btn) {
-                    height: 32px;
+                    height: 28px;
                     padding: 0 16px;
                     border-radius: 4px;
-                    font-size: 14px;
+                    font-size: 12px;
                     border: 1px solid #d9d9d9;
                     background-color: #fff;
                     color: #333;
@@ -296,12 +216,15 @@
                 padding: 8px 12px;
                 border-bottom: 1px solid #f0f0f0;
                 text-align: center;
+                color: #666666;
+                font-size: 12px;
             }
 
             :global(.ant-table-tbody > tr:hover > td) {
                 background-color: #f5f5f5;
             }
 
+
             :global(.ant-pagination) {
                 margin-top: 16px;
                 text-align: right;