From dfd86fb847af3a0671b77b4c1fde79da13d6f78c Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Sun, 28 Sep 2025 15:32:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/ResponsibilityImplementation.js    | 169 +++++++-
 .../module/ResponsibilityImplementation.less  | 378 +++++++++++++++++-
 .../safe_majorHazard/module/RiskAssessment.js |   1 +
 3 files changed, 527 insertions(+), 21 deletions(-)

diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
index 2dda0b6..ada5842 100644
--- a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
@@ -1,6 +1,6 @@
 
 import React from 'react'; 
-import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col} from 'antd';  
+import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';  
 import StandardTable from '@/components/StandardTable';
 import styles from './ResponsibilityImplementation.less';
 
@@ -107,32 +107,161 @@ const ResponsibilityImplementation = () => {
     return ( 
         <div  className={styles.containerR}> 
             <div className={styles.containerOne}> 
-                <div className={styles.containerOneLeft}>1</div>
-                <div className={styles.containerOneRight}>2</div>
+                <div className={styles.containerOneLeft}>
+                    {/* 第一块：蓝色块 + 标题 履职时间轴 */}
+                    <div className={styles.leftTopSection}>
+                        <div className={styles.titleLeft}>
+                            <div className={styles.titleIcon}></div>
+                            <div>履职时间轴</div>
+                        </div>
+                    </div>
+                    
+                    {/* 第二块：时间轴内容 */}
+                    <div className={styles.leftBottomSection}>
+                        <div className={styles.timelineHorizontal}>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-01-15</div>
+                                    <div className={styles.timelineText}>完成安全培训</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-02-20</div>
+                                    <div className={styles.timelineText}>设备巡检完成</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#FAAD14' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-03-10</div>
+                                    <div className={styles.timelineText}>隐患排查处理</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-04-05</div>
+                                    <div className={styles.timelineText}>月度安全会议</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-05-12</div>
+                                    <div className={styles.timelineText}>安全检查</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#FAAD14' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-06-18</div>
+                                    <div className={styles.timelineText}>应急演练</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-07-25</div>
+                                    <div className={styles.timelineText}>设备维护</div>
+                                </div>
+                            </div>
+                            <div className={styles.timelineItem}>
+                                <div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineDate}>2024-08-30</div>
+                                    <div className={styles.timelineText}>安全评估</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div className={styles.containerOneRight}>
+                    {/* 第一块：标题 + 下拉选择框 + 导出按钮 */}
+                    <div className={styles.rightTopSection}>
+                        <div className={styles.rightTopLeft}>
+                            <div className={styles.titleLeft}>
+                                <div className={styles.titleIcon}></div>
+                                <div>履职时间轴</div>
+                            </div>
+                            <Select
+                                style={{ width: 100, marginLeft: 15 }}
+                                defaultValue="每月"
+                                className={styles.rightTopSelect}
+                                options={[
+                                    { value: '每月', label: '每月' },
+                                    { value: '每年', label: '每年' },
+                                ]}
+                                optionRender={(option) => (
+                                    <div className={styles.customOption}>
+                                        <span className={styles.optionIcon}>📅</span>
+                                        <span className={styles.optionText}>{option.label}</span>
+                                    </div>
+                                )}
+                            />
+                        </div>
+                        <div className={styles.rightTopRight}>
+                            <Button 
+                                type="primary" 
+                                className={styles.exportBtn}
+                                icon="📄"
+                            >
+                                导出PDF考核报告
+                            </Button>
+                        </div>
+                    </div>
+                    
+                    {/* 第二块：图片内容 */}
+                    <div className={styles.rightBottomSection}>
+                        <div className={styles.imagePlaceholder}>
+                            <div className={styles.imageIcon}>📊</div>
+                            <div className={styles.imageText}>数据图表</div>
+                        </div>
+                    </div>
+                </div>
             </div>  
 
             <div className={styles.containerTwo}>
-                <div>重大危险源安全包信息库</div>
-                    <div>
+                {/* 第一个大块：标题 */}
+                <div className={styles.containerTwoTitle}>
+                    <div className={styles.titleLeft}>
+                        <div className={styles.titleIcon}></div>
+                        <div>重大危险源安全包信息库</div>
+                    </div>
+                </div>
+                
+                {/* 第二个大块：搜索和按钮 */}
+                <div className={styles.containerTwoActions}>
+                    <div className={styles.searchSection}>
                         <Input placeholder="搜索危险源编号" />
+                    </div>
+                    <div className={styles.buttonSection}>
                         <Button>新增责任人</Button>
                         <Button>导出清单</Button>
-                        <StandardTable
-                            columns={columns}  // ======== 表格列配置 ========
-                            data={{  // ======== 数据对象，包含list和pagination ========
-                                list: tableData,  // ======== 表格数据列表 ========
-                                pagination: {  // ======== 分页配置 ========
-                                    currentPage: 1,  // ======== 当前页码 ========
-                                    pageSize: 5,  // ======== 每页显示10条数据 ========
-                                    total: tableData.length,  // ======== 总数据条数 ========
-                                }  // ======== 分页配置结束 ========
-                            }}  // ======== 数据对象结束 ========
-                            selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
-                            onSelectRow={() => {}}  // ======== 行选择事件处理函数 ========
-                            onChange={() => {}}  // ======== 表格变化事件处理函数 ========
-                        /> 
-                    </div>
                     </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={() => {}}  // ======== 表格变化事件处理函数 ========
+                    /> 
+                </div>
+            </div>
         </div> 
     );  
 }; 
diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
index e36f5cc..b607c38 100644
--- a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
@@ -13,11 +13,191 @@
         .containerOneLeft{
             background-color: white;
             width:58%;
-            // margin-right: 12px;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            border: 1px solid #f0f0f0;
+            border-radius: 4px;
+
+            .leftTopSection {
+                margin-bottom: 15px;
+
+                .titleLeft {
+                    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;
+                    }
+                }
+            }
+
+            .leftBottomSection {
+                flex: 1;
+                overflow-x: auto;
+                overflow-y: hidden;
+                height: 80px;
+
+                .timelineHorizontal {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    height: 100%;
+                    padding: 12px 0;
+                    width: 100%;
+
+                    .timelineItem {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        gap: 4px;
+                        width: 20%;
+                        position: relative;
+                        flex-shrink: 0;
+
+                        .timelineDot {
+                            width: 10px;
+                            height: 10px;
+                            border-radius: 50%;
+                            flex-shrink: 0;
+                            position: relative;
+                            z-index: 2;
+
+                            &::after {
+                                content: '';
+                                position: absolute;
+                                left: 10px;
+                                top: 50%;
+                                width: calc(20% - 10px);
+                                height: 2px;
+                                background-color: #e8e8e8;
+                                transform: translateY(-50%);
+                            }
+                        }
+
+                        &:last-child .timelineDot::after {
+                            display: none;
+                        }
+
+                        .timelineContent {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            gap: 2px;
+                            text-align: center;
+                            width: 100%;
+
+                            .timelineDate {
+                                font-size: 11px;
+                                color: #999999;
+                                font-weight: 400;
+                                white-space: nowrap;
+                            }
+
+                            .timelineText {
+                                font-size: 10px;
+                                color: #333333;
+                                font-weight: 500;
+                                white-space: nowrap;
+                                max-width: 100%;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+                        }
+                    }
+                }
+            }
         }
+
         .containerOneRight{
             background-color: white;
             width:42%;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            border: 1px solid #f0f0f0;
+            border-radius: 4px;
+
+            .rightTopSection {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 15px;
+
+                .rightTopLeft {
+                    display: flex;
+                    align-items: center;
+
+                    .titleLeft {
+                        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;
+                        }
+                    }
+                }
+
+                .rightTopRight {
+                    .exportBtn {
+                        background-color: #2E4CD4 !important;
+                        border-color: #2E4CD4 !important;
+                        color: #fff !important;
+                        font-size: 14px !important;
+                        font-weight: 500 !important;
+                        height: 32px;
+                        padding: 0 16px;
+
+                        &:hover {
+                            background-color: #1e3bb8 !important;
+                            border-color: #1e3bb8 !important;
+                        }
+                    }
+                }
+            }
+
+            .rightBottomSection {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .imagePlaceholder {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    background-color: #f5f5f5;
+                    border: 2px dashed #d9d9d9;
+                    border-radius: 4px;
+
+                    .imageIcon {
+                        font-size: 48px;
+                        margin-bottom: 10px;
+                    }
+
+                    .imageText {
+                        font-size: 14px;
+                        color: #999999;
+                    }
+                }
+            }
         }
     }
     
@@ -25,5 +205,201 @@
     .containerTwo{
         flex: 1;
         background-color: white;
+        display: flex;
+        flex-direction: column;
+        padding: 15px;
+        border: 1px solid #f0f0f0;
+        border-radius: 4px;
+
+        .containerTwoTitle {
+            margin-bottom: 15px;
+
+            .titleLeft {
+                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;
+                }
+            }
+        }
+
+        .containerTwoActions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+
+            .searchSection {
+                flex: 1;
+                max-width: 300px;
+
+                :global(.ant-input) {
+                    height: 32px;
+                    border-radius: 4px;
+                    border: 1px solid #d9d9d9;
+
+                    &:focus {
+                        border-color: #2E4CD4;
+                        box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2);
+                    }
+                }
+            }
+
+            .buttonSection {
+                display: flex;
+                gap: 8px;
+
+                :global(.ant-btn) {
+                    height: 32px;
+                    padding: 0 16px;
+                    border-radius: 4px;
+                    font-size: 14px;
+                    border: 1px solid #d9d9d9;
+                    background-color: #fff;
+                    color: #333;
+
+                    &:hover {
+                        border-color: #2E4CD4;
+                        color: #2E4CD4;
+                    }
+
+                    &:focus {
+                        border-color: #2E4CD4;
+                        color: #2E4CD4;
+                    }
+                }
+            }
+        }
+
+        .containerTwoTable {
+            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;
+            }
+        }
+    }
+}
+
+
+.rightTopSelect{
+    // 下拉框本身的样式
+    :global(.ant-select-selector) {
+        background-color: #f8f9fa !important;
+        border: 1px solid #d9d9d9 !important;
+        border-radius: 6px !important;
+        height: 32px !important;
+        min-height: 32px !important;
+        
+        &:hover {
+            border-color: #2E4CD4 !important;
+        }
+        
+        &:focus {
+            border-color: #2E4CD4 !important;
+            box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
+        }
+    }
+    
+    // 下拉框内的文字样式
+    :global(.ant-select-selection-item) {
+        color: #333333 !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 30px !important;
+    }
+    
+    // 下拉箭头样式
+    :global(.ant-select-arrow) {
+        color: #666666 !important;
+        font-size: 12px !important;
+    }
+    
+    // 下拉菜单容器样式
+    :global(.ant-select-dropdown) {
+        background-color: #ffffff !important;
+        border: 1px solid #e8e8e8 !important;
+        border-radius: 8px !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+        padding: 4px 0 !important;
+    }
+    
+    // 下拉选项样式
+    :global(.ant-select-item) {
+        color: #333333 !important;
+        font-size: 14px !important;
+        padding: 8px 12px !important;
+        border-radius: 4px !important;
+        margin: 2px 8px !important;
+        
+        &:hover {
+            background-color: #f0f2ff !important;
+            color: #2E4CD4 !important;
+        }
+        
+        &.ant-select-item-option-selected {
+            background-color: #e6f7ff !important;
+            color: #2E4CD4 !important;
+            font-weight: 600 !important;
+        }
+    }
+    
+    // 选中状态的样式
+    :global(.ant-select-focused .ant-select-selector) {
+        border-color: #2E4CD4 !important;
+        box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
+    }
+}
+
+// 自定义选项样式
+.customOption {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+    
+    .optionIcon {
+        font-size: 16px;
+        color: #2E4CD4;
+    }
+    
+    .optionText {
+        font-size: 14px;
+        color: #333333;
+        font-weight: 500;
     }
 }
\ No newline at end of file
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js
index 66e2d23..ad4430f 100644
--- a/src/pages/safe_majorHazard/module/RiskAssessment.js
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.js
@@ -5,6 +5,7 @@ import { CheckCircleOutlined } from '@ant-design/icons';
 import * as echarts from 'echarts';
 import StandardTable from '@/components/StandardTable';
 import styles from './RiskAssessment.less';
+// import './RiskAssessment.less';
 
 import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
 import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';