diff --git a/src/pages/organmanage_deptmaintain/DeptMaintain.js b/src/pages/organmanage_deptmaintain/DeptMaintain.js
index aaad71d..c6a0997 100644
--- a/src/pages/organmanage_deptmaintain/DeptMaintain.js
+++ b/src/pages/organmanage_deptmaintain/DeptMaintain.js
@@ -1,14 +1,522 @@
-import React, {Fragment, PureComponent} from 'react';
+import React, { PureComponent } from 'react';
+import {
+    Card,
+    Tree,
+    Button,
+    Select,
+    Space,
+    Row,
+    Col,
+    Pagination
+} from 'antd';
+import { history } from 'umi';
+import {
+    ExpandOutlined,
+    UserOutlined,
+    TeamOutlined,
+    ApartmentOutlined,
+    SyncOutlined,
+    DollarOutlined,
+    SettingOutlined,
+    DownloadOutlined, 
+    UserAddOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined
+} from '@ant-design/icons';
 import styles from './DeptMaintain.less';
+import StandardTable from '@/components/StandardTable';
+import DeptMaintainAdd from './form/DeptMaintainAdd';
+import DeptMaintainRenderSimpleForm from "./form/DeptMaintainRenderSimpleForm" //表单
+
+const { Option } = Select;
+
 class DeptMaintain extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchForm: {},
+            selectedKeys: [],
+            expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
+            addModalVisible: false,  // 新增弹窗显示状态
+            addLoading: false,       // 新增loading状态
+            organizationData: [
+                {
+                    title: '飞利信科技有限公司',
+                    key: '0-0',
+                    count: 356,
+                    children: [
+                        {
+                            title: '技术部',
+                            key: '0-0-0',
+                            count: 120,
+                            children: [
+                                { title: '前端组', key: '0-0-0-0', count: 45 },
+                                { title: '后端组', key: '0-0-0-1', count: 52 },
+                                { title: '测试组', key: '0-0-0-2', count: 23 }
+                            ],
+                        },
+                        {
+                            title: '产品部',
+                            key: '0-0-1',
+                            count: 68,
+                            children: [
+                                { title: '产品设计组', key: '0-0-1-0', count: 28 },
+                                { title: '用户体验组', key: '0-0-1-1', count: 25 },
+                                { title: '产品运营组', key: '0-0-1-2', count: 15 }
+                            ],
+                        },
+                        {
+                            title: '运营部',
+                            key: '0-0-2',
+                            count: 52,
+                            children: [
+                                { title: '市场营销组', key: '0-0-2-0', count: 22 },
+                                { title: '客户服务组', key: '0-0-2-1', count: 18 },
+                                { title: '商务合作组', key: '0-0-2-2', count: 12 }
+                            ],
+                        },
+                        {
+                            title: '财务部',
+                            key: '0-0-3',
+                            count: 32,
+                            children: [
+                                { title: '会计组', key: '0-0-3-0', count: 18 },
+                                { title: '审计组', key: '0-0-3-1', count: 14 }
+                            ],
+                        },
+                        {
+                            title: '人事部',
+                            key: '0-0-4',
+                            count: 84,
+                            children: [
+                                { title: 'HR专员组', key: '0-0-4-0', count: 25 },
+                                { title: '招聘组', key: '0-0-4-1', count: 22 },
+                                { title: '培训组', key: '0-0-4-2', count: 18 },
+                                { title: '薪酬组', key: '0-0-4-3', count: 19 }
+                            ],
+                        },
+                    ],
+                },
+            ],
+            tableData: [
+                {
+                    key: '1',
+                    id: 1,
+                    department: '技术部',
+                    departmentHead: '张文军',
+                    employeeCount: 120,
+                    description: '负责公司所有技术研发工作',
+                    createDate: '2020-01-15'
+                },
+                {
+                    key: '2',
+                    id: 2,
+                    department: '产品部',
+                    departmentHead: '李莉',
+                    employeeCount: 68,
+                    description: '负责产品规划、设计和运营',
+                    createDate: '2020-02-10'
+                },
+                {
+                    key: '3',
+                    id: 3,
+                    department: '运营部',
+                    departmentHead: '王强',
+                    employeeCount: 52,
+                    description: '负责市场推广和客户服务',
+                    createDate: '2020-03-05'
+                },
+                {
+                    key: '4',
+                    id: 4,
+                    department: '财务部',
+                    departmentHead: '赵敏',
+                    employeeCount: 32,
+                    description: '负责财务管理和会计核算',
+                    createDate: '2020-01-20'
+                },
+                {
+                    key: '5',
+                    id: 5,
+                    department: '人事部',
+                    departmentHead: '陈晓红',
+                    employeeCount: 84,
+                    description: '负责人力资源管理和员工关系',
+                    createDate: '2020-02-25'
+                },
+            ],
+            pagination: {
+                current: 1,
+                pageSize: 5,
+                total: 356,
+            }
+        };
+        
+        // 默认列配置
+        this.defaultColumns = [
+            {
+                title: '序号',
+                dataIndex: 'id',
+                key: 'id',
+                width: 60,
+                align: 'center',
+            },
+            {
+                title: '部门名称',
+                dataIndex: 'department',
+                key: 'department',
+                width: 50,
+            },
+            {
+                title: '部门负责人',
+                dataIndex: 'departmentHead',
+                key: 'departmentHead',
+                width: 70,
+            },
+            {
+                title: '员工人数',
+                dataIndex: 'employeeCount',
+                key: 'employeeCount',
+                width: 50,
+            },
+            {
+                title: '操作',
+                key: 'action',
+                align: 'center',
+                width: 80,
+                render: (_, record) => (
+                    <Space size="middle">
+                        <Button
+                            type="link"
+                            size="small"
+                            icon={<EditOutlined />}
+                            title="编辑"
+                            onClick={() => this.handleEdit(record)}
+                        />
+                        <Button
+                            type="link"
+                            size="small"
+                            danger
+                            icon={<DeleteOutlined />}
+                            title="删除"
+                            onClick={() => this.handleDelete(record)}
+                        />
+                    </Space>
+                ),
+            },
+        ];
+    }
+
+    // 获取处理后的树形数据
+    getTreeData = () => {
+        const { organizationData } = this.state;
+
+        const processNode = (node) => ({
+            key: node.key,
+            title: (
+                <span className={styles['tree-node-title']}>
+                    {this.getNodeIcon(node.title)}
+                    <span className={styles['node-title']}>{node.title}</span>
+                    <span className={styles['node-count']}>({node.count})</span>
+                </span>
+            ),
+            children: node.children ? node.children.map(processNode) : undefined
+        });
+
+        return organizationData.map(processNode);
+    };
+
+    // 获取节点图标
+    getNodeIcon = (title) => {
+        if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
+        if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
+        if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
+        if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
+        if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
+        if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
+        return <TeamOutlined style={{ color: '#666' }} />;
+    };
+
+    // 搜索处理
+    handleSearch = (values) => {
+        console.log('搜索参数:', values);
+        this.setState({ searchForm: values });
+    };
+
+    // 重置搜索
+    handleReset = () => {
+        this.formRef?.resetFields();
+        this.setState({ searchForm: {} });
+    };
+
+    // 树节点选择
+    onTreeSelect = (selectedKeys, info) => {
+        console.log('选中节点:', selectedKeys, info);
+        this.setState({ selectedKeys });
+    };
+
+    // 树节点展开
+    onTreeExpand = (expandedKeys) => {
+        this.setState({ expandedKeys });
+    };
+
+    // 刷新树数据
+    handleTreeRefresh = () => {
+        // console.log('刷新组织架构');
+        // 这里可以添加刷新树数据的逻辑
+    };
+
+    // 展开/收缩所有节点
+    handleTreeToggle = () => {
+        const { expandedKeys, organizationData } = this.state;
+        if (expandedKeys.length > 0) {
+            // 收缩所有节点
+            this.setState({ expandedKeys: [] });
+        } else {
+            // 展开所有节点
+            const getAllKeys = (nodes) => {
+                let keys = [];
+                nodes.forEach(node => {
+                    keys.push(node.key);
+                    if (node.children) {
+                        keys = keys.concat(getAllKeys(node.children));
+                    }
+                });
+                return keys;
+            };
+            this.setState({ expandedKeys: getAllKeys(organizationData) });
+        }
+    };
+
+    renderSimpleForm() {
+        const { prooperlog = {} } = this.props;
+        const { params = {} } = prooperlog;
+        const parentMethods = {
+            handleSearch: this.handleSearch,
+            handleFormReset: this.handleFormReset,
+            toggleForm: this.toggleForm,
+            submitButtons: styles.submitButtons,
+            params
+        };
+        return (
+            <DeptMaintainRenderSimpleForm {...parentMethods} />
+        );
+    }
+
+    renderAdvancedForm() {
+        const { prooperlog: { params } } = this.props;
+        const parentMethods = {
+            handleSearch: this.handleSearch,
+            handleFormReset: this.handleFormReset,
+            toggleForm: this.toggleForm,
+            params
+        };
+
+        return (
+            <DeptMaintainRenderSimpleForm  {...parentMethods} />
+        );
+    }
+
+    renderForm() {
+        const { expandForm } = this.state;
+        return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+    }
+
+    // 分页处理
+    onPaginationChange = (page, pageSize) => {
+        this.setState({
+            pagination: {
+                ...this.state.pagination,
+                current: page,
+                pageSize,
+            }
+        });
+    };
+
+    // 显示新增弹窗
+    showAddModal = () => {
+        this.setState({ addModalVisible: true });
+    };
+
+    // 关闭新增弹窗
+    hideAddModal = () => {
+        this.setState({ addModalVisible: false });
+    };
+
+    // 新增成功回调
+    handleAddSuccess = (values) => {
+        console.log('新增成功:', values);
+
+        // 这里可以刷新列表数据
+        // 模拟添加到表格数据中
+        const newStaff = {
+            key: String(Date.now()),
+            id: this.state.tableData.length + 1,
+            name: values.name,
+            phone: values.age,  // 年龄
+            idCard: values.department,  // 部门
+            department: values.position,  // 岗位
+            position: values.workType,  // 工作性质
+            status: values.phone,  // 电话
+            entryDate: new Date().toISOString().split('T')[0]
+        };
+
+        this.setState({
+            tableData: [...this.state.tableData, newStaff],
+            pagination: {
+                ...this.state.pagination,
+                total: this.state.pagination.total + 1
+            }
+        });
+    };
+
+    // 处理姓名点击事件
+    handleNameClick = (record) => {
+        console.log('点击员工:', record);
+        // 跳转到人员详情页面，传递员工ID参数
+        history.push(`/topnavbar00/staffmanage/particulars`);
+    };
+
+    // 处理编辑
+    handleEdit = (record) => {
+        console.log('编辑员工:', record);
+        // 这里可以打开编辑弹窗或跳转到编辑页面
+    };
+
+    // 处理删除
+    handleDelete = (record) => {
+        console.log('删除员工:', record);
+        // 这里可以弹出确认框并执行删除操作
+    };
+
     render() {
+        const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
 
         return (
-            <>
-               <iframe title="部门岗位维护" className={styles.frameContent} src="/部门岗位维护.html"/>
-            </>
-        )
+            <div className={styles.staffInfoContainer}>
+                {/* 主体内容 */}
+                <div className={styles.mainContent}>
+                    <Card className={styles.contentCard}>
+                        <Row gutter={24}>
+                            {/* 左侧组织架构树 */}
+                            <Col span={5}>
+                                <Card
+                                    title={
+                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                                                <span>组织架构</span>
+                                            </div>
+                                            <Space>
+                                                <Button
+                                                    type="text"
+                                                    icon={<SyncOutlined />}
+                                                    size="small"
+                                                    style={{ color: '#1890ff' }}
+                                                    onClick={this.handleTreeRefresh}
+                                                    title="刷新"
+                                                />
+                                                <Button
+                                                    type="text"
+                                                    icon={<ExpandOutlined />}
+                                                    size="small"
+                                                    style={{ color: '#1890ff' }}
+                                                    onClick={this.handleTreeToggle}
+                                                    title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+                                                />
+                                            </Space>
+                                        </div>
+                                    }
+                                    className={styles.treeCard}
+                                >
+                                    <div className={styles.treeContainer}>
+                                        <Tree
+                                            showIcon
+                                            expandedKeys={expandedKeys}
+                                            onSelect={this.onTreeSelect}
+                                            onExpand={this.onTreeExpand}
+                                            treeData={this.getTreeData()}
+                                            className={styles.orgTree}
+                                        />
+                                    </div>
+                                </Card>
+                            </Col>
+
+                            {/* 右侧人员信息区 */}
+                            <Col span={19}>
+                                {/* 筛选条件 */}
+                                <Card className={styles.searchCard}>
+                                    {this.renderForm()}
+                                </Card>
+
+                                {/* 操作按钮和统计 */}
+                                <div className={styles.actionBar}>
+                                    <div className={styles.totalInfo}>
+                                        {/* 共 {pagination.total} 条记录 */}
+                                    </div>
+                                    <Space size="middle">
+                                        <Button
+                                            icon={<DownloadOutlined />}
+                                            size="middle"
+                                            // className={styles.exportButton}
+                                        >
+                                            导出
+                                        </Button>
+                                        <Button
+                                            type="primary"
+                                            icon={<PlusOutlined />}
+                                            size="middle"
+                                            // className={styles.addButton}
+                                            onClick={this.showAddModal}
+                                        >
+                                            新增
+                                        </Button>
+                                    </Space>
+                                </div>
+
+                                {/* 人员表格 */}
+                                <Card className={styles.tableCard}>
+                                    <StandardTable
+                                        columns={this.defaultColumns}
+                                        dataSource={tableData}
+                                        pagination={false}
+                                        // scroll={{ x: 1000,y: 600 }}
+                                        size="small"
+                                        selectedRows={[]}
+                                    />
+
+                                    {/* 分页 */}
+                                    <div className={styles.paginationWrapper}>
+                                        <Pagination
+                                            current={pagination.current}
+                                            total={pagination.total}
+                                            pageSize={pagination.pageSize}
+                                            showSizeChanger
+                                            showQuickJumper
+                                            showTotal={(total, range) =>
+                                                `显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
+                                            }
+                                            onChange={this.onPaginationChange}
+                                            onShowSizeChange={this.onPaginationChange}
+                                        />
+                                    </div>
+                                </Card>
+                            </Col>
+                        </Row>
+                    </Card>
+                </div>
+
+                {/* 新增人员弹窗 */}
+                <DeptMaintainAdd
+                    visible={addModalVisible}
+                    loading={addLoading}
+                    onCancel={this.hideAddModal}
+                    onSuccess={this.handleAddSuccess}
+                />
+            </div>
+        );
     }
 }
 
-export default DeptMaintain
+export default DeptMaintain;
\ No newline at end of file
diff --git a/src/pages/organmanage_deptmaintain/DeptMaintain.less b/src/pages/organmanage_deptmaintain/DeptMaintain.less
index d5bff80..205f3aa 100644
--- a/src/pages/organmanage_deptmaintain/DeptMaintain.less
+++ b/src/pages/organmanage_deptmaintain/DeptMaintain.less
@@ -1,10 +1,521 @@
 @import '~@/utils/utils.less';
 
-.frameContent {
-  width: 100%;
-  height: 100vh;
-  border: none;
-  display: block;
-  margin: 0;
-  padding: 0;
+.staffInfoContainer {
+  min-height: 100vh;
+  // background-color: #f5f6fa;
+
+  .announcementBar {
+    background: #e6f7ff;
+    border: 1px solid #91d5ff;
+    margin-bottom: 16px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .announcement {
+      display: flex;
+      align-items: center;
+
+      .announcementLabel {
+        background-color: #fef3c7;
+        color: #92400e;
+        border-radius: 4px;
+        padding: 4px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-right: 12px;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+
+        .anticon {
+          margin-right: 4px;
+        }
+      }
+
+      .scrollContainer {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .scrollContent {
+        display: inline-block;
+        animation: scroll 30s linear infinite;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .mainContent {
+    // padding: 12px;
+
+    .contentCard {
+      .ant-card-head {
+        .ant-card-head-title {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333;
+        }
+      }
+    }
+
+    .treeCard {
+      height: 600px;
+      border: 1px solid #e8e8e8;
+      border-radius: 8px;
+
+      .treeHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .treeContainer {
+        height: 520px;
+        overflow-y: auto;
+
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #d9d9d9;
+          border-radius: 3px;
+
+          &:hover {
+            background: #bfbfbf;
+          }
+        }
+
+        .orgTree {
+          .ant-tree-treenode {
+            padding: 2px 0;
+
+            .ant-tree-node-content-wrapper {
+              border-radius: 4px;
+              transition: all 0.3s ease;
+              padding: 4px 8px;
+
+              &:hover {
+                background-color: #f0f9ff;
+                transform: translateX(2px);
+              }
+
+              &.ant-tree-node-selected {
+                background-color: #e6f7ff !important;
+                box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+              }
+            }
+
+            .ant-tree-iconEle {
+              margin-right: 8px;
+            }
+
+            .ant-tree-title {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+    /* Tree节点标题样式 */
+    .tree-node-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .node-title {
+        flex: 1;
+        font-size: 14px;
+        margin-left: 8px;
+        color: #333;
+      }
+
+      .node-count {
+        color: #999;
+        font-size: 12px;
+        margin-left: auto;
+        background: #f0f0f0;
+        padding: 1px 6px;
+        border-radius: 10px;
+        min-width: 20px;
+        text-align: center;
+      }
+    }
+
+    .searchCard {
+      margin-bottom: 16px;
+      border-radius: 8px;
+      border: 1px solid #e8e8e8;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .ant-card-body {
+        padding: 16px;
+      }
+
+      /* 搜索表单容器样式 */
+      .searchFormContainer {
+        .searchForm {
+          .ant-form-item {
+            margin-bottom: 16px;
+
+            .ant-form-item-label {
+              font-weight: 500;
+              color: #333;
+              
+              label {
+                color: #333 !important;
+                font-size: 14px;
+              }
+            }
+
+            .ant-input,
+            .ant-select-selector,
+            .ant-picker {
+              border-radius: 6px;
+              border: 1px solid #d9d9d9;
+              transition: all 0.3s ease;
+
+              &:hover {
+                border-color: #4c7bff;
+              }
+
+              &:focus,
+              &.ant-select-focused .ant-select-selector,
+              &.ant-picker-focused {
+                border-color: #2d5cf6;
+                box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
+              }
+            }
+
+            .ant-select-selection-placeholder,
+            .ant-input::placeholder,
+            .ant-picker-input input::placeholder {
+              color: #bfbfbf;
+            }
+          }
+        }
+      }
+
+      /* 搜索按钮样式 */
+      .searchButton {
+        background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
+        border: none;
+        border-radius: 6px;
+        color: white;
+        font-weight: 500;
+        font-size: 14px;
+        box-shadow: 0 2px 8px rgba(45, 92, 246, 0.3);
+        transition: all 0.3s ease;
+        height: 32px;
+        padding: 0 16px;
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #4c7bff 0%, #6b8fff 100%);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(45, 92, 246, 0.4);
+          color: white;
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+
+      /* 重置按钮样式 */
+      .resetButton {
+        background: #fff;
+        border: 1px solid #d9d9d9;
+        color: #666;
+        border-radius: 6px;
+        font-weight: 500;
+        font-size: 14px;
+        transition: all 0.3s ease;
+        height: 32px;
+        padding: 0 16px;
+
+        &:hover,
+        &:focus {
+          border-color: #4c7bff;
+          color: #2d5cf6;
+        }
+
+        .anticon {
+          color: #ff7875;
+        }
+      }
+
+      /* 展开按钮样式 */
+      .expandButton {
+        color: #2d5cf6;
+        font-size: 14px;
+        padding: 0 8px;
+        height: 32px;
+        
+        &:hover,
+        &:focus {
+          color: #4c7bff;
+        }
+      }
+    }
+
+    .actionBar {
+
+
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .totalInfo {
+        color: #666;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .exportButton {
+        background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+        border: none;
+        color: white;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+        transition: all 0.3s ease;
+        // margin-top: -8px;
+        height: 35px;
+        padding: 0 16px;
+
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #73d13d 0%, #95de64 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
+          color: white;
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        .anticon {
+          color: white;
+        }
+      }
+
+
+      .addButton {
+        background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
+        transition: all 0.3s ease;
+        // margin-top: -8px;
+        height: 35px;
+        padding: 0 16px;
+
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #ffa940 0%, #ffc069 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+
+    .tableCard {
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      padding-bottom: 10px;
+
+      .ant-table-wrapper {
+        max-height: 600px;
+        overflow-y: auto;
+
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #f5f5f5;
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #d9d9d9;
+          border-radius: 4px;
+
+          &:hover {
+            background: #bfbfbf;
+          }
+        }
+
+        .ant-table-thead>tr>th {
+          background-color: #fafafa;
+          font-weight: 600;
+          color: #333;
+          border-bottom: 1px solid #e8e8e8;
+          position: sticky;
+          top: 0;
+          z-index: 1;
+        }
+
+        .ant-table-tbody>tr {
+          &:hover>td {
+            background-color: #f5f5f5 !important;
+          }
+
+          >td {
+            border-bottom: 1px solid #f0f0f0;
+          }
+        }
+      }
+
+      .paginationWrapper {
+        margin-top: 20px;
+        text-align: right;
+
+        .ant-pagination {
+          .ant-pagination-total-text {
+            color: #666;
+          }
+
+          .ant-pagination-item {
+            border-radius: 4px;
+
+            &.ant-pagination-item-active {
+              background-color: #2d5cf6;
+              border-color: #2d5cf6;
+            }
+          }
+
+          .ant-pagination-prev,
+          .ant-pagination-next {
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.mainContent {
+  // padding: 12px;
+
+  .contentCard {
+    .ant-card-head {
+      .ant-card-head-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+  }
+
+  .actionBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .totalInfo {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 12px 24px 0px 24px;
+    }
+  }
+}
+
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .staffInfoContainer {
+    .mainContent {
+      .searchCard {
+        .ant-row {
+          .ant-col {
+            margin-bottom: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 自定义主题色
+.ant-btn-primary {
+  background-color: #2d5cf6;
+  border-color: #2d5cf6;
+
+  &:hover,
+  &:focus {
+    background-color: #4c7bff;
+    border-color: #4c7bff;
+  }
+}
+
+.ant-tree .ant-tree-node-selected {
+  background-color: #e6f7ff !important;
+}
+
+.ant-select-focused .ant-select-selector,
+.ant-input-affix-wrapper-focused,
+.ant-input:focus,
+.ant-input-focused {
+  border-color: #2d5cf6 !important;
+  box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+}
+
+// 标签样式优化
+.ant-tag {
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+// 按钮组间距调整
+.ant-space-item {
+  .ant-btn+.ant-btn {
+    margin-left: 8px;
+  }
+}
+
+// 表格链接按钮样式
+.ant-btn-link {
+  padding: 0 4px;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/src/pages/organmanage_deptmaintain/form/DeptMaintainAdd.js b/src/pages/organmanage_deptmaintain/form/DeptMaintainAdd.js
new file mode 100644
index 0000000..c26b71f
--- /dev/null
+++ b/src/pages/organmanage_deptmaintain/form/DeptMaintainAdd.js
@@ -0,0 +1,218 @@
+import React, { PureComponent } from 'react';
+import {
+    Modal,
+    Form,
+    Input,
+    Select,
+    InputNumber,
+    Row,
+    Col,
+    message,
+    TreeSelect
+} from 'antd';
+import {
+    ApartmentOutlined,
+    UserOutlined,
+    TeamOutlined,
+    FileTextOutlined,
+    NumberOutlined
+} from '@ant-design/icons';
+
+const { Option } = Select;
+
+class DeptMaintainAdd extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.formRef = React.createRef();
+    }
+
+    // 提交表单
+    handleSubmit = (values) => {
+        console.log('新增部门信息:', values);
+        
+        // 这里可以调用API接口保存数据
+        // 模拟保存成功
+        message.success('新增部门成功！');
+        
+        // 重置表单
+        this.formRef.current?.resetFields();
+        
+        // 调用父组件的回调函数
+        if (this.props.onSuccess) {
+            this.props.onSuccess(values);
+        }
+        
+        // 关闭弹窗
+        this.handleCancel();
+    };
+
+    // 取消操作
+    handleCancel = () => {
+        // 重置表单
+        this.formRef.current?.resetFields();
+        
+        // 调用父组件的关闭回调
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    };
+
+    render() {
+        const { visible, loading = false } = this.props;
+
+        return (
+            <Modal
+                title="新增部门"
+                open={visible}
+                onOk={() => this.formRef.current?.submit()}
+                onCancel={this.handleCancel}
+                width={700}
+                confirmLoading={loading}
+                destroyOnClose={true}
+                maskClosable={false}
+            >
+                <Form
+                    ref={this.formRef}
+                    layout="vertical"
+                    onFinish={this.handleSubmit}
+                    initialValues={{
+                        status: '1',
+                        level: '2'
+                    }}
+                >
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="deptName"
+                                label="部门名称"
+                                rules={[
+                                    { required: true, message: '请输入部门名称' },
+                                    { min: 2, max: 20, message: '部门名称长度为2-20个字符' }
+                                ]}
+                            >
+                                <Input
+                                    placeholder="请输入部门名称"
+                                    prefix={<ApartmentOutlined />}
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="deptCode"
+                                label="部门编码"
+                                rules={[
+                                    { required: true, message: '请输入部门编码' },
+                                    { pattern: /^[A-Z0-9]{3,10}$/, message: '部门编码为3-10位大写字母和数字' }
+                                ]}
+                            >
+                                <Input
+                                    placeholder="请输入部门编码，如：TECH001"
+                                    prefix={<NumberOutlined />}
+                                    style={{ textTransform: 'uppercase' }}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="parentDept"
+                                label="上级部门"
+                                rules={[
+                                    { required: false, message: '请选择上级部门' }
+                                ]}
+                            >
+                                <TreeSelect
+                                    placeholder="请选择上级部门"
+                                    allowClear
+                                    treeDefaultExpandAll
+                                    treeData={[
+                                        {
+                                            title: '飞利信科技有限公司',
+                                            value: '0-0',
+                                            children: [
+                                                { title: '技术部', value: '0-0-0' },
+                                                { title: '产品部', value: '0-0-1' },
+                                                { title: '运营部', value: '0-0-2' },
+                                                { title: '财务部', value: '0-0-3' },
+                                                { title: '人事部', value: '0-0-4' },
+                                            ]
+                                        }
+                                    ]}
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="deptHead"
+                                label="部门负责人"
+                                rules={[
+                                    { required: true, message: '请输入部门负责人' }
+                                ]}
+                            >
+                                <Input
+                                    placeholder="请输入部门负责人姓名"
+                                    prefix={<UserOutlined />}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="level"
+                                label="部门层级"
+                                rules={[
+                                    { required: true, message: '请选择部门层级' }
+                                ]}
+                            >
+                                <Select placeholder="请选择部门层级">
+                                    <Option value="1">一级部门</Option>
+                                    <Option value="2">二级部门</Option>
+                                    <Option value="3">三级部门</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="status"
+                                label="状态"
+                                rules={[
+                                    { required: true, message: '请选择状态' }
+                                ]}
+                            >
+                                <Select placeholder="请选择状态">
+                                    <Option value="1">启用</Option>
+                                    <Option value="0">禁用</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={16}>
+                        <Col span={24}>
+                            <Form.Item
+                                name="description"
+                                label="部门描述"
+                                rules={[
+                                    { max: 200, message: '描述不能超过200个字符' }
+                                ]}
+                            >
+                                <Input.TextArea
+                                    placeholder="请输入部门职责描述"
+                                    rows={3}
+                                    showCount
+                                    maxLength={200}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
+        );
+    }
+}
+
+export default DeptMaintainAdd;
diff --git a/src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.js b/src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.js
new file mode 100644
index 0000000..4fab687
--- /dev/null
+++ b/src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button, Col, Form, Row, DatePicker, Space } from 'antd';
+import { ClearOutlined, SearchOutlined } from '@ant-design/icons';
+import styles from "../DeptMaintain.less";
+
+const FormItem = Form.Item; 
+const DeptMaintainRenderSimpleForm = (props) => {
+    const [form] = Form.useForm();
+    const { submitButtons, handleSearch, handleFormReset, params } = props;
+    
+    React.useEffect(() => {
+        form.setFieldsValue({
+            year: params?.year,
+        });
+    }, [params]);
+
+    const onFinish = values => {
+        const searchParams = {
+            ...values,
+            year: values.year ? values.year.format('YYYY') : undefined,
+        };
+        handleSearch && handleSearch(searchParams);
+    };
+
+    const myhandleFormReset = () => {
+        form.resetFields();
+        handleFormReset && handleFormReset();
+    };
+
+    return (
+        <div className={styles.searchFormContainer}>
+            <Form
+                form={form}
+                onFinish={onFinish}
+                layout="vertical"
+                className={styles.searchForm}
+            >
+                <Row gutter={16}>
+                    <Col span={6}>
+                        <Form.Item
+                            name="year"
+                            label="年份"
+                        >
+                            <DatePicker 
+                                picker="year" 
+                                placeholder="请选择年份"
+                                style={{ width: '100%' }}
+                                allowClear
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={18}>
+                        <Form.Item label=" " colon={false}>
+                            <Space size="middle">
+                                <Button
+                                    type="primary"
+                                    htmlType="submit"
+                                    icon={<SearchOutlined />}
+                                    className={styles.searchButton}
+                                >
+                                    查询
+                                </Button>
+                                <Button
+                                    onClick={myhandleFormReset}
+                                    icon={<ClearOutlined />}
+                                    className={styles.resetButton}
+                                >
+                                    重置
+                                </Button>
+                            </Space>
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </div>
+    );
+
+};
+
+export default DeptMaintainRenderSimpleForm;
diff --git a/src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.less b/src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/organmanage_organchart/OrganChart.js b/src/pages/organmanage_organchart/OrganChart.js
index 5f73836..ef6bb74 100644
--- a/src/pages/organmanage_organchart/OrganChart.js
+++ b/src/pages/organmanage_organchart/OrganChart.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic } from 'antd';
+import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic, Space } from 'antd';
 import {
-  BuildingOutlined,
+  ApartmentOutlined,
   TeamOutlined,
   ClockCircleOutlined,
   DownloadOutlined,
@@ -10,7 +10,8 @@ import {
   UserOutlined,
   DollarOutlined,
   SettingOutlined,
-  BellOutlined
+  BellOutlined,
+  ExpandOutlined
 } from '@ant-design/icons';
 import ReactECharts from 'echarts-for-react';
 import styles from './OrganChart.less';
@@ -21,45 +22,65 @@ class OrganChart extends PureComponent {
     this.state = {
       selectedYear: '2023',
       expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
-      organizationData: [
-        {
-          title: '集团公司',
-          key: '0-0',
-          count: 1284,
-          children: [
-            {
-              title: '行政中心',
-              key: '0-0-0',
-              count: 356,
-              children: [
-                { title: '人力资源部', key: '0-0-0-0', count: 45 },
-                { title: '财务部', key: '0-0-0-1', count: 32 },
-                { title: 'IT部', key: '0-0-0-2', count: 28 }
-              ]
-            },
-            {
-              title: '营销中心',
-              key: '0-0-1',
-              count: 268,
-              children: [
-                { title: '市场部', key: '0-0-1-0', count: 86 },
-                { title: '销售部', key: '0-0-1-1', count: 124 },
-                { title: '客户服务部', key: '0-0-1-2', count: 58 }
-              ]
-            },
-            {
-              title: '研发中心',
-              key: '0-0-2',
-              count: 232,
-              children: [
-                { title: '前端开发部', key: '0-0-2-0', count: 76 },
-                { title: '后端开发部', key: '0-0-2-1', count: 92 },
-                { title: '移动开发部', key: '0-0-2-2', count: 64 }
-              ]
-            }
-          ]
-        }
-      ]
+            organizationData: [
+                {
+                    title: '飞利信科技有限公司',
+                    key: '0-0',
+                    count: 356,
+                    children: [
+                        {
+                            title: '技术部',
+                            key: '0-0-0',
+                            count: 120,
+                            children: [
+                                { title: '前端组', key: '0-0-0-0', count: 45 },
+                                { title: '后端组', key: '0-0-0-1', count: 52 },
+                                { title: '测试组', key: '0-0-0-2', count: 23 }
+                            ],
+                        },
+                        {
+                            title: '产品部',
+                            key: '0-0-1',
+                            count: 68,
+                            children: [
+                                { title: '产品设计组', key: '0-0-1-0', count: 28 },
+                                { title: '用户体验组', key: '0-0-1-1', count: 25 },
+                                { title: '产品运营组', key: '0-0-1-2', count: 15 }
+                            ],
+                        },
+                        {
+                            title: '运营部',
+                            key: '0-0-2',
+                            count: 52,
+                            children: [
+                                { title: '市场营销组', key: '0-0-2-0', count: 22 },
+                                { title: '客户服务组', key: '0-0-2-1', count: 18 },
+                                { title: '商务合作组', key: '0-0-2-2', count: 12 }
+                            ],
+                        },
+                        {
+                            title: '财务部',
+                            key: '0-0-3',
+                            count: 32,
+                            children: [
+                                { title: '会计组', key: '0-0-3-0', count: 18 },
+                                { title: '审计组', key: '0-0-3-1', count: 14 }
+                            ],
+                        },
+                        {
+                            title: '人事部',
+                            key: '0-0-4',
+                            count: 84,
+                            children: [
+                                { title: 'HR专员组', key: '0-0-4-0', count: 25 },
+                                { title: '招聘组', key: '0-0-4-1', count: 22 },
+                                { title: '培训组', key: '0-0-4-2', count: 18 },
+                                { title: '薪酬组', key: '0-0-4-3', count: 19 }
+                            ],
+                        },
+                    ],
+                },
+            ],
     };
   }
 
@@ -84,12 +105,52 @@ class OrganChart extends PureComponent {
 
   // 获取节点图标
   getNodeIcon = (title) => {
-    if (title.includes('集团')) return <TeamOutlined />;
-    if (title.includes('中心')) return <TeamOutlined />;
-    if (title.includes('人力')) return <UserOutlined />;
-    if (title.includes('财务')) return <DollarOutlined />;
-    if (title.includes('IT') || title.includes('开发')) return <SettingOutlined />;
-    return <TeamOutlined />;
+      if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
+      if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
+      if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
+      if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
+      if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
+      if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
+      return <TeamOutlined style={{ color: '#666' }} />;
+  };
+
+  // 树节点展开
+  onExpand = (expandedKeys) => {
+    this.setState({ expandedKeys });
+  };
+
+  // 树节点选择
+  onTreeSelect = (selectedKeys, info) => {
+    console.log('选中节点:', selectedKeys, info);
+    this.setState({ selectedKeys });
+  };
+
+  // 刷新树数据
+  handleTreeRefresh = () => {
+    console.log('刷新组织架构');
+    // 这里可以添加刷新树数据的逻辑
+  };
+
+  // 展开/收缩所有节点
+  handleTreeToggle = () => {
+    const { expandedKeys, organizationData } = this.state;
+    if (expandedKeys.length > 0) {
+      // 收缩所有节点
+      this.setState({ expandedKeys: [] });
+    } else {
+      // 展开所有节点
+      const getAllKeys = (nodes) => {
+        let keys = [];
+        nodes.forEach(node => {
+          keys.push(node.key);
+          if (node.children) {
+            keys = keys.concat(getAllKeys(node.children));
+          }
+        });
+        return keys;
+      };
+      this.setState({ expandedKeys: getAllKeys(organizationData) });
+    }
   };
 
   // 获取年份菜单
@@ -245,7 +306,7 @@ class OrganChart extends PureComponent {
         padding: '16px'
       }}>
         {/* 公告栏 */}
-        <Alert
+        {/* <Alert
           message={
             <div className={styles['announcement-container']}>
               <div className={styles['announcement-badge']}>
@@ -265,11 +326,11 @@ class OrganChart extends PureComponent {
           type="info"
           closable
           className={styles['organ-chart-announcement']}
-        />
+        /> */}
 
         <Row gutter={24}>
           {/* 左侧组织架构树 */}
-          <Col xs={24} md={6}>
+          <Col span={5}>
             <Card
               title={
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
@@ -277,31 +338,44 @@ class OrganChart extends PureComponent {
                     <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                     <span>组织架构</span>
                   </div>
-                  <Button
-                    type="text"
-                    icon={<SyncOutlined />}
-                    size="small"
-                    style={{ color: '#1890ff' }}
-                  />
+                  <Space>
+                    <Button
+                      type="text"
+                      icon={<SyncOutlined />}
+                      size="small"
+                      style={{ color: '#1890ff' }}
+                      onClick={this.handleTreeRefresh}
+                      title="刷新"
+                    />
+                    <Button
+                      type="text"
+                      icon={<ExpandOutlined />}
+                      size="small"
+                      style={{ color: '#1890ff' }}
+                      onClick={this.handleTreeToggle}
+                      title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+                    />
+                  </Space>
                 </div>
               }
-              className={styles['org-sidebar']}
-              style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }}
+              className={styles.treeCard}
             >
-              <div style={{ maxHeight: 'calc(100vh - 280px)', overflowY: 'auto' }}>
+              <div className={styles.treeContainer}>
                 <Tree
                   showIcon
                   expandedKeys={expandedKeys}
+                  onSelect={this.onTreeSelect}
                   onExpand={this.onExpand}
                   treeData={this.getTreeData()}
+                  className={styles.orgTree}
                 />
               </div>
             </Card>
           </Col>
 
           {/* 右侧内容区 */}
-          <Col xs={24} md={18}>
-            <div style={{ height: 'calc(100vh - 200px)', overflowY: 'auto', paddingRight: '8px' }}>
+          <Col span={19}>
+            <div style={{ height: 'calc(100vh - 152px)', overflowY: 'auto', paddingRight: '8px' }}>
               {/* 筛选区域 */}
               <Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
diff --git a/src/pages/organmanage_organchart/OrganChart.less b/src/pages/organmanage_organchart/OrganChart.less
index 18ef0f6..b1c3f7b 100644
--- a/src/pages/organmanage_organchart/OrganChart.less
+++ b/src/pages/organmanage_organchart/OrganChart.less
@@ -45,6 +45,80 @@
       }
     }
   }
+
+  /* 树形组件卡片样式 */
+  .treeCard {
+    height: 600px;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+
+    .treeContainer {
+      height: 520px;
+      overflow-y: auto;
+
+      /* 自定义滚动条样式 */
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 3px;
+
+        &:hover {
+          background: #bfbfbf;
+        }
+      }
+
+      .orgTree {
+        .ant-tree-treenode {
+          padding: 2px 0;
+
+          .ant-tree-node-content-wrapper {
+            border-radius: 4px;
+            transition: background-color 0.2s;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            .ant-tree-title {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* Tree节点标题样式 */
+  .tree-node-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .node-title {
+      flex: 1;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #333;
+    }
+
+    .node-count {
+      color: #999;
+      font-size: 12px;
+      margin-left: auto;
+      background: #f0f0f0;
+      padding: 1px 6px;
+      border-radius: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  }
 }
 
 /* 公告栏样式 */
diff --git a/src/pages/organmanage_reportrelation/ReportRelation.js b/src/pages/organmanage_reportrelation/ReportRelation.js
new file mode 100644
index 0000000..fbc721b
--- /dev/null
+++ b/src/pages/organmanage_reportrelation/ReportRelation.js
@@ -0,0 +1,552 @@
+import React, { PureComponent } from 'react';
+import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic, Space } from 'antd';
+import {
+  ApartmentOutlined,
+  TeamOutlined,
+  ClockCircleOutlined,
+  DownloadOutlined,
+  DownOutlined,
+  SyncOutlined,
+  UserOutlined,
+  DollarOutlined,
+  SettingOutlined,
+  BellOutlined,
+  ExpandOutlined,
+  FilterOutlined
+} from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import styles from './ReportRelation.less';
+
+class ReportRelation extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedYear: '2023',
+      expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
+            organizationData: [
+                {
+                    title: '飞利信科技有限公司',
+                    key: '0-0',
+                    count: 356,
+                    children: [
+                        {
+                            title: '技术部',
+                            key: '0-0-0',
+                            count: 120,
+                            children: [
+                                { title: '前端组', key: '0-0-0-0', count: 45 },
+                                { title: '后端组', key: '0-0-0-1', count: 52 },
+                                { title: '测试组', key: '0-0-0-2', count: 23 }
+                            ],
+                        },
+                        {
+                            title: '产品部',
+                            key: '0-0-1',
+                            count: 68,
+                            children: [
+                                { title: '产品设计组', key: '0-0-1-0', count: 28 },
+                                { title: '用户体验组', key: '0-0-1-1', count: 25 },
+                                { title: '产品运营组', key: '0-0-1-2', count: 15 }
+                            ],
+                        },
+                        {
+                            title: '运营部',
+                            key: '0-0-2',
+                            count: 52,
+                            children: [
+                                { title: '市场营销组', key: '0-0-2-0', count: 22 },
+                                { title: '客户服务组', key: '0-0-2-1', count: 18 },
+                                { title: '商务合作组', key: '0-0-2-2', count: 12 }
+                            ],
+                        },
+                        {
+                            title: '财务部',
+                            key: '0-0-3',
+                            count: 32,
+                            children: [
+                                { title: '会计组', key: '0-0-3-0', count: 18 },
+                                { title: '审计组', key: '0-0-3-1', count: 14 }
+                            ],
+                        },
+                        {
+                            title: '人事部',
+                            key: '0-0-4',
+                            count: 84,
+                            children: [
+                                { title: 'HR专员组', key: '0-0-4-0', count: 25 },
+                                { title: '招聘组', key: '0-0-4-1', count: 22 },
+                                { title: '培训组', key: '0-0-4-2', count: 18 },
+                                { title: '薪酬组', key: '0-0-4-3', count: 19 }
+                            ],
+                        },
+                    ],
+                },
+            ],
+    };
+  }
+
+  // 获取处理后的树形数据
+  getTreeData = () => {
+    const { organizationData } = this.state;
+    
+    const processNode = (node) => ({
+      key: node.key,
+      title: (
+        <span className={styles['tree-node-title']}>
+          {this.getNodeIcon(node.title)}
+          <span className={styles['node-title']}>{node.title}</span>
+          <span className={styles['node-count']}>({node.count})</span>
+        </span>
+      ),
+      children: node.children ? node.children.map(processNode) : undefined
+    });
+    
+    return organizationData.map(processNode);
+  };
+
+  // 获取节点图标
+  getNodeIcon = (title) => {
+      if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
+      if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
+      if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
+      if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
+      if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
+      if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
+      return <TeamOutlined style={{ color: '#666' }} />;
+  };
+
+  // 树节点展开
+  onExpand = (expandedKeys) => {
+    this.setState({ expandedKeys });
+  };
+
+  // 树节点选择
+  onTreeSelect = (selectedKeys, info) => {
+    console.log('选中节点:', selectedKeys, info);
+    this.setState({ selectedKeys });
+  };
+
+  // 刷新树数据
+  handleTreeRefresh = () => {
+    console.log('刷新组织架构');
+    // 这里可以添加刷新树数据的逻辑
+  };
+
+  // 展开/收缩所有节点
+  handleTreeToggle = () => {
+    const { expandedKeys, organizationData } = this.state;
+    if (expandedKeys.length > 0) {
+      // 收缩所有节点
+      this.setState({ expandedKeys: [] });
+    } else {
+      // 展开所有节点
+      const getAllKeys = (nodes) => {
+        let keys = [];
+        nodes.forEach(node => {
+          keys.push(node.key);
+          if (node.children) {
+            keys = keys.concat(getAllKeys(node.children));
+          }
+        });
+        return keys;
+      };
+      this.setState({ expandedKeys: getAllKeys(organizationData) });
+    }
+  };
+
+  // 获取年份菜单
+  getYearMenu = () => {
+    const years = ['2021', '2022', '2023', '2024'];
+    const menuItems = years.map(year => ({
+      key: year,
+      label: year,
+    }));
+    
+    return {
+      items: menuItems,
+      onClick: ({ key }) => this.setState({ selectedYear: key })
+    };
+  };
+
+  // ECharts配置选项
+  getDepartmentChartOption = () => {
+    return {
+      title: {
+        text: '各部门人员分布',
+        left: 'center',
+        textStyle: {
+          fontSize: 16,
+          fontWeight: 'normal'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: '{b}: {c}人'
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        top: '15%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: {
+          lineStyle: { color: '#f0f0f0' }
+        }
+      },
+      yAxis: {
+        type: 'category',
+        data: ['人力资源部', '财务部', 'IT部', '市场部', '销售部', '客户服务部', '前端开发部', '后端开发部', '移动开发部'],
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          name: '人数',
+          type: 'bar',
+          data: [45, 32, 28, 86, 124, 58, 76, 92, 64],
+          itemStyle: {
+            color: '#1890ff',
+            borderRadius: [0, 4, 4, 0]
+          },
+          barWidth: 20,
+          label: {
+            show: true,
+            position: 'right',
+            formatter: '{c}人',
+            fontSize: 11
+          }
+        }
+      ]
+    };
+  };
+
+  // 组织架构分布饼图配置
+  getOrgPieChartOption = () => {
+    return {
+      title: {
+        text: '部门人员占比',
+        left: 'center',
+        textStyle: {
+          fontSize: 16,
+          fontWeight: 'normal'
+        }
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c}人 ({d}%)'
+      },
+      legend: {
+        orient: 'vertical',
+        left: 10,
+        top: 'middle',
+        textStyle: {
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          name: '部门分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['65%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '14',
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: [
+            { value: 356, name: '行政中心' },
+            { value: 268, name: '营销中心' },
+            { value: 232, name: '研发中心' },
+            { value: 428, name: '其他部门' }
+          ],
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#fff',
+            borderWidth: 2
+          }
+        }
+      ]
+    };
+  };
+
+  // 树节点展开/收起处理
+  onExpand = (expandedKeys) => {
+    this.setState({ expandedKeys });
+  };
+
+  render() {
+    const { selectedYear, expandedKeys } = this.state;
+
+    return (
+      <div className={styles['organ-chart-page']} style={{ 
+        height: '100vh', 
+        overflowY: 'auto', 
+        overflowX: 'hidden',
+        padding: '16px'
+      }}>
+        {/* 公告栏 */}
+        {/* <Alert
+          message={
+            <div className={styles['announcement-container']}>
+              <div className={styles['announcement-badge']}>
+                <BellOutlined />
+                公告
+              </div>
+              <div className={styles['announcement-content']}>
+                <div className={styles['marquee-text']}>
+                  <span>2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
+                  <span>系统将于2023年12月25日00:00-06:00进行升级维护</span>
+                  <span>新员工入职培训计划已更新，请相关人员注意查收邮件</span>
+                  <span>年度优秀员工评选活动正式启动，详情请见内网公告</span>
+                </div>
+              </div>
+            </div>
+          }
+          type="info"
+          closable
+          className={styles['organ-chart-announcement']}
+        /> */}
+
+        <Row gutter={24}>
+          {/* 左侧组织架构树 */}
+          <Col span={5}>
+            <Card
+              title={
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                    <span>组织架构</span>
+                  </div>
+                  <Space>
+                    <Button
+                      type="text"
+                      icon={<SyncOutlined />}
+                      size="small"
+                      style={{ color: '#1890ff' }}
+                      onClick={this.handleTreeRefresh}
+                      title="刷新"
+                    />
+                    <Button
+                      type="text"
+                      icon={<ExpandOutlined />}
+                      size="small"
+                      style={{ color: '#1890ff' }}
+                      onClick={this.handleTreeToggle}
+                      title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+                    />
+                  </Space>
+                </div>
+              }
+              className={styles.treeCard}
+            >
+              <div className={styles.treeContainer}>
+                <Tree
+                  showIcon
+                  expandedKeys={expandedKeys}
+                  onSelect={this.onTreeSelect}
+                  onExpand={this.onExpand}
+                  treeData={this.getTreeData()}
+                  className={styles.orgTree}
+                />
+              </div>
+            </Card>
+          </Col>
+
+          {/* 右侧内容区 */}
+          <Col span={19}>
+            <div style={{ height: 'calc(100vh - 152px)', overflowY: 'auto', paddingRight: '8px' }}>
+              {/* 筛选区域 */}
+              <Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <h2 className={styles['section-title']}>汇报关系</h2>
+                <div className={styles['filter-actions']}>
+                  <div className={styles['year-selector']}>
+                    <span>年份:</span>
+                    <Dropdown 
+                      menu={this.getYearMenu()} 
+                      trigger={['click']}
+                    >
+                      <Button type="default">
+                        {selectedYear} <DownOutlined />
+                      </Button>
+                    </Dropdown>
+                  </div>
+                  <Button type="primary" icon={<FilterOutlined />}>
+                    筛选
+                  </Button>
+                </div>
+              </div>
+            </Card>
+
+            {/* 主要内容区 */}
+            <Card className={styles['main-content']}>
+                            {/* 汇报关系图 */}
+              <div className={styles['report-relation-wrapper']}>
+                <div className={styles['report-relation-container']}>
+                  {/* 第一层：CEO */}
+                  <div className={styles['hierarchy-level-1']}>
+                    <div className={styles['person-card-large']}>
+                      <div className={styles['person-avatar-large']}>
+                        <UserOutlined />
+                      </div>
+                      <h4 className={styles['person-name']}>张明远</h4>
+                      <p className={styles['person-title']}>CEO</p>
+                      <p className={styles['person-company']}>集团公司</p>
+                    </div>
+                  </div>
+
+                  {/* 连接线系统 - 第一层到第二层 */}
+                  <div className={styles['connection-system-1']}>
+                    <div className={styles['vertical-main-line']}></div>
+                    <div className={styles['horizontal-main-line']}></div>
+                    <div className={styles['branch-lines-container']}>
+                      <div className={styles['branch-line-left']}></div>
+                      <div className={styles['branch-line-right']}></div>
+                    </div>
+                  </div>
+
+                  {/* 第二层：副总裁 */}
+                  <div className={styles['hierarchy-level-2']}>
+                    <div className={styles['person-row']}>
+                      <div className={styles['person-card-medium']}>
+                        <div className={styles['person-avatar-medium']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>李华</h4>
+                        <p className={styles['person-title']}>副总裁</p>
+                        <p className={styles['person-company']}>华东事业部</p>
+                      </div>
+                      <div className={styles['person-card-medium']}>
+                        <div className={styles['person-avatar-medium']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>王伟</h4>
+                        <p className={styles['person-title']}>副总裁</p>
+                        <p className={styles['person-company']}>华南事业部</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 连接线系统 - 第二层到第三层 */}
+                  <div className={styles['connection-system-2']}>
+                    <div className={styles['dual-vertical-lines']}>
+                      <div className={styles['vertical-line']}></div>
+                      <div className={styles['vertical-line']}></div>
+                    </div>
+                    <div className={styles['horizontal-connector-line']}></div>
+                    <div className={styles['branch-lines-container-wide']}>
+                      <div className={styles['branch-line-left']}></div>
+                      <div className={styles['branch-line-right']}></div>
+                    </div>
+                  </div>
+
+                  {/* 第三层：总监 */}
+                  <div className={styles['hierarchy-level-3']}>
+                    <div className={styles['person-row-wide']}>
+                      <div className={styles['person-card-small']}>
+                        <div className={styles['person-avatar-small']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>陈思</h4>
+                        <p className={styles['person-title']}>总监</p>
+                        <p className={styles['person-company']}>上海分公司</p>
+                      </div>
+                      <div className={styles['person-card-small']}>
+                        <div className={styles['person-avatar-small']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>赵阳</h4>
+                        <p className={styles['person-title']}>总监</p>
+                        <p className={styles['person-company']}>杭州分公司</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 连接线系统 - 第三层到第四层 */}
+                  <div className={styles['connection-system-3']}>
+                    <div className={styles['dual-vertical-lines-wide']}>
+                      <div className={styles['vertical-line']}></div>
+                      <div className={styles['vertical-line']}></div>
+                    </div>
+                    <div className={styles['horizontal-connector-line-wide']}></div>
+                    <div className={styles['branch-lines-container-extra-wide']}>
+                      <div className={styles['branch-line-left']}></div>
+                      <div className={styles['branch-line-right']}></div>
+                    </div>
+                  </div>
+
+                  {/* 第四层：经理 */}
+                  <div className={styles['hierarchy-level-4']}>
+                    <div className={styles['person-row-extra-wide']}>
+                      <div className={styles['person-card-mini']}>
+                        <div className={styles['person-avatar-mini']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>周婷</h4>
+                        <p className={styles['person-title']}>经理</p>
+                        <p className={styles['person-company']}>研发中心</p>
+                      </div>
+                      <div className={styles['person-card-mini']}>
+                        <div className={styles['person-avatar-mini']}>
+                          <UserOutlined />
+                        </div>
+                        <h4 className={styles['person-name']}>黄晨</h4>
+                        <p className={styles['person-title']}>经理</p>
+                        <p className={styles['person-company']}>市场部</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            {/* 图表区域 */}
+            {/* <Row gutter={16} className={styles['charts-row']}>
+              <Col xs={24} lg={14}>
+                <Card title="各部门人员分布" className={styles['chart-section']}>
+                  <ReactECharts
+                    option={this.getDepartmentChartOption()}
+                    style={{ height: '300px' }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} lg={10}>
+                <Card title="部门人员占比" className={styles['chart-section']}>
+                  <ReactECharts
+                    option={this.getOrgPieChartOption()}
+                    style={{ height: '300px' }}
+                  />
+                </Card>
+              </Col>
+            </Row> */}
+            </div>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default ReportRelation;
\ No newline at end of file
diff --git a/src/pages/organmanage_reportrelation/ReportRelation.less b/src/pages/organmanage_reportrelation/ReportRelation.less
new file mode 100644
index 0000000..3b97776
--- /dev/null
+++ b/src/pages/organmanage_reportrelation/ReportRelation.less
@@ -0,0 +1,909 @@
+@import '~@/utils/utils.less';
+
+/* 组织架构页面样式 */
+.organ-chart-page {
+  padding: 16px;
+  background-color: #f9fafb;
+  min-height: 100vh;
+  
+  /* 自定义滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+  
+  /* 内容滚动区域的滚动条样式 */
+  div[style*="overflowY: auto"] {
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #d9d9d9;
+      border-radius: 3px;
+      
+      &:hover {
+        background: #bfbfbf;
+      }
+    }
+  }
+
+  /* 树形组件卡片样式 */
+  .treeCard {
+    height: 600px;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+
+    .treeContainer {
+      height: 520px;
+      overflow-y: auto;
+
+      /* 自定义滚动条样式 */
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 3px;
+
+        &:hover {
+          background: #bfbfbf;
+        }
+      }
+
+      .orgTree {
+        .ant-tree-treenode {
+          padding: 2px 0;
+
+          .ant-tree-node-content-wrapper {
+            border-radius: 4px;
+            transition: background-color 0.2s;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            .ant-tree-title {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* Tree节点标题样式 */
+  .tree-node-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .node-title {
+      flex: 1;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #333;
+    }
+
+    .node-count {
+      color: #999;
+      font-size: 12px;
+      margin-left: auto;
+      background: #f0f0f0;
+      padding: 1px 6px;
+      border-radius: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  }
+}
+
+/* 公告栏样式 */
+.organ-chart-announcement {
+  margin-bottom: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.announcement-container {
+  display: flex;
+  align-items: center;
+}
+
+.announcement-badge {
+  background-color: #fef3c7;
+  color: #92400e;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 12px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  
+  .anticon {
+    margin-right: 4px;
+  }
+}
+
+.announcement-content {
+  overflow: hidden;
+  flex: 1;
+}
+
+.marquee-text {
+  white-space: nowrap;
+  animation: marquee 20s linear infinite;
+  display: inline-block;
+  
+  span {
+    font-size: 14px;
+    margin-right: 32px;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* 组织架构侧边栏样式 */
+.org-sidebar {
+  height: fit-content;
+  
+  .ant-card-body {
+    padding: 16px 8px 16px 16px;
+  }
+  
+  /* 树形组件滚动区域样式 */
+  .ant-tree {
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #d9d9d9;
+      border-radius: 2px;
+      
+      &:hover {
+        background: #bfbfbf;
+      }
+    }
+  }
+}
+
+/* Tree节点标题样式 */
+.tree-node-title {
+  display: flex;
+  align-items: center;
+  
+  .node-text {
+    flex: 1;
+    font-size: 14px;
+    margin-left: 8px;
+  }
+  
+  .node-count {
+    color: #999;
+    font-size: 12px;
+    margin-left: auto;
+  }
+}
+
+.org-node {
+  background-color: #F5F6FA;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all 0.3s ease;
+  
+  &.has-children {
+    cursor: pointer;
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  
+  .node-icon {
+    color: #6b7280;
+    display: flex;
+    align-items: center;
+    
+    .anticon {
+      color: #6b7280;
+    }
+  }
+}
+
+.node-text {
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.expand-icon {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.org-children {
+  margin-left: 24px;
+}
+
+/* 筛选区域样式 */
+.filter-section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.year-selector {
+  display: flex;
+  align-items: center;
+  
+  span {
+    font-size: 14px;
+    color: #6b7280;
+    margin-right: 8px;
+  }
+}
+
+/* 主要内容区样式 */
+.main-content {
+  border-radius: 6px;
+}
+
+/* 组织架构图样式 */
+.org-chart-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.org-chart-node {
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.company-node {
+  background: #2D5CF6;
+  color: #fff;
+  width: 192px;
+  margin-bottom: 16px;
+  
+  :global(.ant-card-body) {
+    padding: 12px;
+  }
+  
+  .node-title {
+    font-weight: 500;
+    font-size: 16px;
+  }
+  
+  .node-count {
+    font-size: 12px;
+    opacity: 0.8;
+  }
+}
+
+.center-row {
+  width: 100%;
+}
+
+.center-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.center-node {
+  background: #dbeafe;
+  width: 160px;
+  margin-bottom: 16px;
+  
+  :global(.ant-card-body) {
+    padding: 12px;
+  }
+  
+  .node-title {
+    font-weight: 500;
+  }
+  
+  .node-count {
+    font-size: 12px;
+    color: #6b7280;
+  }
+}
+
+.department-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.department-node {
+  background: #eff6ff;
+  width: 128px;
+  
+  :global(.ant-card-body) {
+    padding: 8px;
+  }
+  
+  .node-title {
+    font-size: 14px;
+  }
+  
+  .node-count {
+    font-size: 12px;
+    color: #6b7280;
+  }
+}
+
+/* 统计卡片样式 */
+.statistics-row {
+  margin-top: 32px;
+}
+
+.stat-card {
+  background: #F5F6FA;
+  border-radius: 6px;
+}
+
+.stat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.stat-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.stat-icon {
+  .anticon {
+    font-size: 20px;
+    color: #2d5cf6;
+  }
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.stat-desc {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* 图表区域样式 */
+.chart-section {
+  margin-top: 32px;
+}
+
+.chart-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+.chart-container {
+  background: #F5F6FA;
+  border-radius: 6px;
+}
+
+/* 图表区域样式 */
+.charts-row {
+  margin-top: 16px;
+}
+
+.chart-section {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  :global(.ant-card-head-title) {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  :global(.ant-card-body) {
+    padding: 20px;
+  }
+}
+
+/* 统计描述样式 */
+.stat-desc {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #52c41a;
+}
+
+/* 响应式样式 */
+@media (max-width: 768px) {
+  .organ-chart-page {
+    padding: 8px;
+  }
+  
+  .announcement-badge {
+    display: none;
+  }
+  
+  .announcement-content {
+    overflow: hidden;
+  }
+  
+  .filter-actions {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-end;
+  }
+  
+  .center-row {
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+  }
+  
+  .statistics-row {
+    :global(.ant-col) {
+      margin-bottom: 16px;
+    }
+  }
+  
+  .charts-row {
+    :global(.ant-col) {
+      margin-bottom: 16px;
+    }
+  }
+  
+  /* 移动端下的滚动优化 */
+  .organ-chart-page {
+    padding: 8px;
+  }
+  
+  .org-sidebar {
+    margin-bottom: 16px;
+  }
+}
+
+/* 移动端触摸滚动优化 */
+@media screen and (max-width: 768px) {
+  .organ-chart-page {
+    -webkit-overflow-scrolling: touch;
+    
+    div[style*="overflowY: auto"] {
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+  
+  /* 移动端隐藏滚动条但保留滚动功能 */
+  .org-sidebar .ant-tree {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+}
+
+
+/* 汇报关系图样式 */
+.report-relation-wrapper {
+  padding: 24px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.report-relation-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+/* 层级容器 */
+.hierarchy-level-1,
+.hierarchy-level-2,
+.hierarchy-level-3,
+.hierarchy-level-4 {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+  position: relative;
+}
+
+/* 人员卡片行 */
+.person-row {
+  display: flex;
+  gap: 64px;
+  justify-content: center;
+}
+
+.person-row-wide {
+  display: flex;
+  gap: 128px;
+  justify-content: center;
+}
+
+.person-row-extra-wide {
+  display: flex;
+  gap: 256px;
+  justify-content: center;
+}
+
+/* 人员卡片尺寸变体 */
+.person-card-large {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e8e8e8;
+  width: 192px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.person-card-medium {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e8e8e8;
+  width: 192px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.person-card-small {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e8e8e8;
+  width: 192px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.person-card-mini {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e8e8e8;
+  width: 160px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* 头像尺寸变体 */
+.person-avatar-large {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(45, 92, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  
+  .anticon {
+    color: #2D5CF6;
+    font-size: 20px;
+  }
+}
+
+.person-avatar-medium {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(45, 92, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  
+  .anticon {
+    color: #2D5CF6;
+    font-size: 16px;
+  }
+}
+
+.person-avatar-small {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(45, 92, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  
+  .anticon {
+    color: #2D5CF6;
+    font-size: 14px;
+  }
+}
+
+.person-avatar-mini {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(45, 92, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  
+  .anticon {
+    color: #2D5CF6;
+    font-size: 12px;
+  }
+}
+
+/* 文字样式 */
+.person-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+  margin: 0 0 4px 0;
+}
+
+.person-title {
+  font-size: 12px;
+  color: #8c8c8c;
+  margin: 0 0 4px 0;
+}
+
+.person-company {
+  font-size: 12px;
+  color: #bfbfbf;
+  margin: 0;
+}
+
+/* 连接线 */
+.connection-line-top {
+  position: absolute;
+  top: -32px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  height: 32px;
+  background-color: #d9d9d9;
+}
+
+/* 连接线系统样式 */
+.connection-system-1,
+.connection-system-2,
+.connection-system-3 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 16px 0;
+  position: relative;
+  z-index: 5;
+}
+
+/* 主垂直线（从CEO向下） */
+.vertical-main-line {
+  width: 2px;
+  height: 30px;
+  background: #d9d9d9;
+  border-radius: 1px;
+  margin-bottom: 4px;
+}
+
+/* 主水平线 */
+.horizontal-main-line {
+  width: 160px;
+  height: 2px;
+  background: #d9d9d9;
+  border-radius: 1px;
+  margin: 4px 0;
+}
+
+.vertical-line {
+  width: 2px;
+  height: 30px;
+  background: #d9d9d9;
+  border-radius: 1px;
+}
+
+/* 连接水平线 */
+.horizontal-connector-line {
+  width: 180px;
+  height: 2px;
+  background: #d9d9d9;
+  border-radius: 1px;
+  margin: 4px 0;
+}
+
+.horizontal-connector-line-wide {
+  width: 260px;
+  height: 2px;
+  background: #d9d9d9;
+  border-radius: 1px;
+  margin: 4px 0;
+}
+
+/* 分支线容器 */
+.branch-lines-container {
+  display: flex;
+  gap: 160px;
+  margin-top: 4px;
+}
+
+.branch-lines-container-wide {
+  display: flex;
+  gap: 240px;
+  margin-top: 4px;
+}
+
+.branch-lines-container-extra-wide {
+  display: flex;
+  gap: 400px;
+  margin-top: 4px;
+}
+
+.branch-line-left,
+.branch-line-right {
+  width: 2px;
+  height: 30px;
+  background: #d9d9d9;
+  border-radius: 1px;
+}
+
+/* 移除原有的顶部连接线 */
+.connection-line-top {
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 1400px) {
+  .horizontal-main-line {
+    width: 120px;
+  }
+  
+  .horizontal-connector-line {
+    width: 140px;
+  }
+  
+  .horizontal-connector-line-wide {
+    width: 200px;
+  }
+  
+  .dual-vertical-lines {
+    gap: 120px;
+  }
+  
+  .dual-vertical-lines-wide {
+    gap: 180px;
+  }
+  
+  .branch-lines-container {
+    gap: 120px;
+  }
+  
+  .branch-lines-container-wide {
+    gap: 180px;
+  }
+  
+  .branch-lines-container-extra-wide {
+    gap: 300px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .connection-system-1,
+  .connection-system-2,
+  .connection-system-3 {
+    display: none;
+  }
+}
+
+
+
+
+
+