config/routes.js

@@ -41,7 +41,19 @@ export default [
                         path: '/topnavbar00/business/envmonitoring',
                         name: 'envInformation',
                         component: './business_envmonitoring/EnvMonitoring',
-                    }
+                    },
+                    // 安全管理基础信息
+                    {
+                        path: '/topnavbar00/business/basicinformation',
+                        name: 'basicinformation',
+                        component: './business_basicinformation/BasicInformation',
+                    },
+                    // 隐患排查
+                    {
+                        path: '/topnavbar00/business/hiddentrouble',
+                        name: 'hiddentrouble',
+                        component: './business_hiddentrouble/HiddenTrouble',
+                    },
                 ],
             },
         ],

src/pages/business_basicinformation/BasicInformation.js

@@ -0,0 +1,83 @@
+import React, { PureComponent } from 'react';
+import { connect } from '@umijs/max';
+import { Tabs } from 'antd';
+
+// 导入子组件
+import BasicInfoManagement from './components/BasicInfoManagement';
+import QualificationManagement from './components/QualificationManagement';
+import PersonnelBasicInfo from './components/PersonnelBasicInfo';
+
+import styles from './BasicInformation.less';
+
+@connect(({ staffsheet, loading }) => ({
+    staffsheet,
+    loading: loading.models.staffsheet,
+}))
+
+class BasicInformation extends PureComponent {
+    state = {
+        activeTab: '1',
+    }
+
+    // 渲染Tab内容
+    renderTabContent = () => {
+        const { activeTab } = this.state;
+        const { staffsheet, loading, dispatch } = this.props;
+
+        const childProps = {
+            staffsheet,
+            loading,
+            dispatch
+        };
+
+        switch (activeTab) {
+            case '1':
+                return <BasicInfoManagement {...childProps} />;
+            case '2':
+                return <QualificationManagement {...childProps} />;
+            case '3':
+                return <PersonnelBasicInfo {...childProps} />;
+            default:
+                return <BasicInfoManagement {...childProps} />;
+        }
+    }
+
+    render() {
+        const { activeTab } = this.state;
+
+        const tabItems = [
+            {
+                key: '1',
+                label: '基本信息管理',
+            },
+            {
+                key: '2',
+                label: '资质证照管理',
+            },
+            {
+                key: '3',
+                label: '人员基础信息',
+            }
+        ];
+
+        return (
+            <div>
+                {/* 顶部标签页 */}
+                <div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
+                    <Tabs
+                        activeKey={activeTab}
+                        onChange={(key) => this.setState({ activeTab: key })}
+                        items={tabItems}
+                        className="custom-tabs"
+                        style={{ marginBottom: 0 }}
+                    />
+                </div>
+
+                {/* 根据选中的Tab渲染对应的子组件 */}
+                {this.renderTabContent()}
+            </div>
+        );
+    }
+}
+
+export default BasicInformation;

src/pages/business_basicinformation/components/BasicInfoManagement.js

@@ -0,0 +1,768 @@
+import React, { PureComponent } from 'react';
+import {
+    DeleteOutlined,
+    EditOutlined,
+    PlusOutlined,
+    SearchOutlined,
+    RedoOutlined,
+    DownOutlined,
+    ExclamationCircleFilled,
+    UpOutlined,
+    SafetyOutlined,
+    ImportOutlined,
+    ExportOutlined,
+    UserOutlined,
+    TeamOutlined,
+    SettingOutlined,
+    FileTextOutlined,
+    ProjectOutlined,
+    WarningOutlined,
+    AlertOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree, Progress, Input, Select } from 'antd';
+import StandardTable from '@/components/StandardTable';
+import ReactECharts from 'echarts-for-react';
+
+import { MyIcon } from "@/components/Icon"
+import style from "@/global.less";
+import BasicInfoCreateForm from '../form/BasicInfoCreateForm'; //新增表单
+import BasicInfoUpdateForm from '../form/BasicInfoUpdateForm'; //修改表单
+import BasicInfoViewForm from '../form/BasicInfoViewForm'; //查看表单
+import BasicInfoImportForm from '../form/BasicInfoImportForm'; //修改表单
+import styles from '../BasicInformation.less';
+import datadictionary from "@/utils/dataDictionary";
+import { formatDate } from "@/utils/formatUtils";
+import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
+import riskShieldImg from '@/assets/basic_information/risk-shield.png'; // 新增：引入盾牌图片
+import riskTip from '@/assets/basic_information/risk-tip.png';
+const { confirm } = Modal;
+
+//预约类型
+const sex_type = datadictionary.sex
+const user_status = datadictionary.user_status
+const sys_user_post = datadictionary.sys_user_post
+
+const mockData = {
+    list: [
+        {
+            id: '01',
+            projectName: '安全项目一',
+            location: '北京朝阳区',
+            area: '15,000m²',
+            organization: '安全生产部',
+            staffCount: 168,
+            safetyLevel: '高',
+        },
+        {
+            id: '02',
+            projectName: '安全项目二',
+            location: '北京朝阳区',
+            area: '15,000m²',
+            organization: '安全生产部',
+            staffCount: 168,
+            safetyLevel: '中',
+        },
+        {
+            id: '03',
+            projectName: '安全项目三',
+            location: '北京朝阳区',
+            area: '15,000m²',
+            organization: '安全生产部',
+            staffCount: 168,
+            safetyLevel: '低',
+        },
+        {
+            id: '04',
+            projectName: '安全项目四',
+            location: '北京朝阳区',
+            area: '15,000m²',
+            organization: '安全生产部',
+            staffCount: 168,
+            safetyLevel: '低',
+        },
+        {
+            id: '05',
+            projectName: '安全项目五',
+            location: '北京朝阳区',
+            area: '15,000m²',
+            organization: '安全生产部',
+            staffCount: 168,
+            safetyLevel: '中',
+        },
+    ],
+    pagination: {
+        total: 48,
+        current: 1,
+        pageSize: 5,
+    },
+}
+
+class BasicInfoManagement extends PureComponent {
+    state = {
+        modalVisible: false,
+        updateModalVisible: false,
+        viewModalVisible: false,
+        importModalVisible: false, // 新增导入弹窗状态
+        expandForm: false,
+        selectedRows: [],
+        formValues: {},
+        updateFormValues: {},
+        viewFormValues: {},
+        toggleExpand: false,
+    }
+
+    columns = [
+        {
+            title: '编号',
+            dataIndex: 'id',
+            key: 'id',
+            width: 80,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            width: 150,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '地理信息',
+            dataIndex: 'location',
+            key: 'location',
+            width: 120,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '占地面积',
+            dataIndex: 'area',
+            key: 'area',
+            width: 100,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '组织机构',
+            dataIndex: 'organization',
+            key: 'organization',
+            width: 120,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '职业人数',
+            dataIndex: 'staffCount',
+            key: 'staffCount',
+            width: 100,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text} 人</span>
+            ),
+        },
+        {
+            title: '安全等级',
+            dataIndex: 'safetyLevel',
+            key: 'safetyLevel',
+            width: 100,
+            render: (text) => {
+                let color = '#FF2526';
+                let bgColor = '#FFE0E2';
+                if (text === '中') {
+                    color = '#FF8800';
+                    bgColor = '#FFF3E9';
+                } else if (text === '低') {
+                    color = '#00AAFA';
+                    bgColor = '#DAF3FF';
+                }
+                return (
+                    <Tag
+                        style={{
+                            color: color,
+                            backgroundColor: bgColor,
+                            border: 'none',
+                            borderRadius: 14,
+                            padding: '4px 8px',
+                            fontSize: '12px'
+                        }}
+                    >
+                        {text}
+                    </Tag>
+                );
+            },
+        },
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: 200,
+            render: (text, record) => {
+                return (
+                    <div>
+                        <a className={styles.operateStyle} style={{ marginRight: 15, fontSize: '12px' }} onClick={() => this.handleViewModalVisible(true, record)}> 详情 </a>
+                        <a className={styles.operateStyle} style={{ marginRight: 15, fontSize: '12px' }} onClick={() => this.handleUpdateModalVisible(true, record)}> 修改 </a>
+                        <a className={styles.operateStyle} style={{ color: '#FF2626', fontSize: '12px' }}> 删除 </a>
+                    </div>
+                )
+            }
+        },
+    ]
+
+    getPieChartOption = () => {
+        return {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c}% ({d}%)'
+            },
+            legend: {
+                orient: 'vertical',
+                right: '20%',
+                top: '27%',
+                itemWidth: 16,
+                itemHeight: 4,
+                itemGap: 16,
+                textStyle: {
+                    fontSize: 12,
+                    color: '#666',
+                    fontWeight: 'normal'
+                }
+            },
+            series: [
+                {
+                    name: '功能区域占比',
+                    type: 'pie',
+                    radius: ['30%', '45%'],
+                    center: ['30%', '45%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    emphasis: {
+                        scale: true,
+                        scaleSize: 5
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 45,
+                            name: '生产区',
+                            itemStyle: {
+                                color: '#4B69F1'
+                            }
+                        },
+                        {
+                            value: 20,
+                            name: '仓储区',
+                            itemStyle: {
+                                color: '#44BB5F'
+                            }
+                        },
+                        {
+                            value: 20,
+                            name: '办公区',
+                            itemStyle: {
+                                color: '#A493FB'
+                            }
+                        },
+                        {
+                            value: 15,
+                            name: '辅助区',
+                            itemStyle: {
+                                color: '#FFD85A'
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+
+    handleStandardTableChange = (pagination, sorter) => {
+        const { dispatch } = this.props
+        const { formValues } = this.state
+
+        const params = {
+            currentPage: pagination.current,
+            pageSize: pagination.pageSize,
+            ...formValues
+        }
+
+        sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
+
+        // 这里应该调用实际的数据获取方法
+        // 由于当前使用的是mockData，我们可以在这里添加日志或者调用相应的action
+        console.log('分页参数:', params);
+
+        // 如果有实际的数据获取action，应该这样调用：
+        // dispatch({
+        //     type: 'namespace/fetch',
+        //     payload: params,
+        // });
+    }
+
+    handleFormReset = () => {
+        const { dispatch } = this.props
+        this.setState({
+            formValues: {}
+        })
+    }
+
+    toggleForm = () => {
+        const { expandForm } = this.state
+        this.setState({
+            expandForm: !expandForm
+        })
+    }
+
+    handleSelectRows = rows => {
+        this.setState({
+            selectedRows: rows
+        })
+    }
+
+    handleSearch = values => {
+        const { dispatch } = this.props
+        const { expandForm } = this.state
+
+        this.setState({
+            formValues: values
+        })
+    }
+
+    handleModalVisible = flag => {
+        this.setState({
+            modalVisible: !!flag
+        })
+    }
+
+    handleUpdateModalVisible = (flag, record) => {
+        this.setState({
+            updateModalVisible: !!flag,
+            updateFormValues: record || {}
+        })
+    }
+
+    handleViewModalVisible = (flag, record) => {
+        this.setState({
+            viewModalVisible: !!flag,
+            viewFormValues: record || {}
+        })
+    }
+
+    handleAdd = fields => {
+        const { dispatch } = this.props
+        // 添加逻辑
+    }
+
+    handleDeleteRecord = record => {
+        const { dispatch } = this.props
+        // 删除逻辑
+    }
+
+    handleUpdate = fields => {
+        const { dispatch } = this.props
+        // 更新逻辑
+    }
+
+    handleCollapse = () => {
+        const { toggleExpand } = this.state
+        this.setState({
+            toggleExpand: !toggleExpand
+        })
+    }
+
+    handleImportModalVisible = (flag) => {
+        this.setState({
+            importModalVisible: !!flag
+        });
+    }
+
+    render() {
+        const {
+            loading,
+            dispatch
+        } = this.props
+        const {
+            selectedRows,
+            modalVisible,
+            updateModalVisible,
+            viewModalVisible,
+            updateFormValues,
+            viewFormValues,
+            toggleExpand,
+            importModalVisible,
+        } = this.state
+
+        const parentMethods = {
+            handleAdd: this.handleAdd,
+            handleModalVisible: this.handleModalVisible,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const updateMethods = {
+            handleUpdateModalVisible: this.handleUpdateModalVisible,
+            handleUpdate: this.handleUpdate,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const viewMethods = {
+            handleViewModalVisible: this.handleViewModalVisible
+        }
+
+        return (
+            <Card bordered={false} className={styles['card-container']}>
+                {/* 主要内容区域 */}
+                <Row gutter={16} style={{ marginBottom: 15 }}>
+                    {/* 左侧：组织机构人员管理 */}
+                    <Col span={9}>
+                        <div
+                            className={styles['organ-area-bg']}
+                            style={{
+                                border: '1px solid #e9ecef',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 300
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4 ',
+                                    marginRight: 8
+                                }}></span>
+                                组织机构与人员管理
+                            </div>
+
+                            {/* 组织架构图 */}
+                            <div className={styles['org-chart-container']}>
+                                {/* 顶部按钮 */}
+                                <div className={styles['org-top-button-container']}>
+                                    <Button
+                                        type="primary"
+                                        className={styles['org-top-button']}
+                                    >
+                                        项目安全管理组织架构
+                                    </Button>
+                                </div>
+
+                                {/* 连接线 - 顶部到第一层 */}
+                                <div className={styles['org-connect-line-vertical']}></div>
+
+                                {/* 第一层水平连接线 */}
+                                <div className={styles['org-connect-line-horizontal']}></div>
+
+                                {/* 第一层垂直连接线 */}
+                                <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-left']}`}></div>
+                                <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-center']}`}></div>
+                                <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-right']}`}></div>
+
+                                {/* 第一层部门 */}
+                                <div className={styles['org-departments-container']}>
+                                    <div className={styles['org-department']}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-safety']}`}>
+                                                <SafetyOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-department-label']} style={{ color: '#3CC82D' }}>安监部</div>
+                                        </div>
+
+                                        {/* 安监部连接线 */}
+                                        <div className={styles['org-department-connect-v']}></div>
+                                        <div className={styles['org-department-connect-h']}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
+                                    </div>
+
+                                    <div className={styles['org-department']}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-production']}`}>
+                                                <ProjectOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-department-label']} style={{ color: '#3F78FA' }}>生产部</div>
+                                        </div>
+
+                                        {/* 生产部连接线 */}
+                                        <div className={styles['org-department-connect-v']}></div>
+                                        <div className={styles['org-department-connect-h']}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
+                                    </div>
+
+                                    <div className={styles['org-department']}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-equipment']}`}>
+                                                <SettingOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-department-label']} style={{ color: '#20C3FE' }}>设备部</div>
+                                        </div>
+
+                                        {/* 设备部连接线 */}
+                                        <div className={styles['org-department-connect-v']}></div>
+                                        <div className={styles['org-department-connect-h']}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
+                                        <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
+                                    </div>
+                                </div>
+
+                                {/* 第二层子部门 */}
+                                <div className={styles['org-sub-row-group']}>
+                                    {/* 安监部子部门 */}
+                                    <div className={styles['org-sub-group']}>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-green']}>
+                                                <UserOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-green']}>安全监督岗</div>
+                                        </div>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-green']}>
+                                                <TeamOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-green']}>风险评估岗</div>
+                                        </div>
+                                    </div>
+                                    {/* 生产部子部门 */}
+                                    <div className={styles['org-sub-group']}>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-blue']}>
+                                                <UserOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-blue']}>生产调度岗</div>
+                                        </div>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-blue']}>
+                                                <TeamOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-blue']}>现场管理岗</div>
+                                        </div>
+                                    </div>
+                                    {/* 设备部子部门 */}
+                                    <div className={styles['org-sub-group']}>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-cyan']}>
+                                                <UserOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-cyan']}>设备维护岗</div>
+                                        </div>
+                                        <div className={styles['org-sub-item']}>
+                                            <div className={styles['org-sub-icon-cyan']}>
+                                                <SettingOutlined style={{ color: 'white', fontSize: 16 }} />
+                                            </div>
+                                            <div className={styles['org-sub-label-cyan']}>备件管理岗</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 中间：功能区域占比 */}
+                    <Col span={8}>
+                        <div
+                            className={styles['func-area-bg']}
+                            style={{
+                                border: '1px solid #E3E7FB',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 300
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                功能区面积占比
+                            </div>
+
+                            <div className={styles['chart-container']}>
+                                <ReactECharts
+                                    option={this.getPieChartOption()}
+                                    className={styles['chart-full-size']}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 右侧：实时风险评估 */}
+                    <Col span={7}>
+                        <div className={styles['risk-assessment-container']}>
+                            {/* 顶部装饰性背景层 */}
+                            {/* <div className={styles['risk-background-top']}></div> */}
+
+                            {/* 底部装饰性背景层 */}
+                            {/* <div className={styles['risk-background-bottom']}></div> */}
+
+                            {/* 标题 */}
+                            <div className={styles['risk-title']}>
+                                <span className={styles['risk-title-indicator']}></span>
+                                <span className={styles['risk-title-text']}>实时风险评估</span>
+                            </div>
+
+                            {/* 主要内容区域 */}
+                            <div className={styles['risk-content-area']}>
+                                {/* 左侧盾牌图标 */}
+                                <div className={styles['risk-shield-container']}>
+                                    <img
+                                        src={riskShieldImg}
+                                        alt="风险盾牌"
+                                        style={{ width: 130, height: 130, marginLeft: '-20px', objectFit: 'contain' }}
+                                    />
+                                </div>
+
+                                {/* 右侧内容 */}
+                                <div className={styles['risk-info-container']}>
+                                    {/* 风险等级提示框 */}
+                                    <div className={styles['risk-level-alert']}>
+                                        <span className={styles['risk-level-text']}>
+                                            当前风险等级：
+                                            <span className={styles['risk-level-danger']}>重大风险</span>
+                                        </span>
+                                    </div>
+
+                                    {/* 提示信息 */}
+                                    <div className={styles['risk-tip-container']}>
+                                        <div className={styles['risk-tip-icon']}>
+                                            <img
+                                                src={riskTip}
+                                                alt="提示"
+                                                style={{ width: 20, height: 20, display: 'block' }}
+                                            />
+                                        </div>
+                                        <div className={styles['risk-tip-content']}>
+                                            <div className={styles['risk-tip-text']}>
+                                                提示：安全等级分为 红、橙、黄、蓝四级，当前风险等级为红区，存在重大风险
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+
+                {/* 底部表格区域 */}
+                <div>
+                    <div className={styles['table-toolbar-container']}>
+                        <Row justify="space-between" align="middle">
+                            <Col>
+                                <Space>
+                                    <Input.Search
+                                        placeholder="搜索项目名称、地理信息..."
+                                        className={styles['search-input']}
+                                        onSearch={this.handleSearch}
+                                    />
+                                    <span style={{ marginLeft: 20 }}>筛选条件</span>
+                                    <Select
+                                        placeholder="请选择"
+                                        className={styles['filter-select']}
+                                        options={[
+                                            { value: 'all', label: '全部' },
+                                            { value: 'high', label: '高风险' },
+                                            { value: 'medium', label: '中风险' },
+                                            { value: 'low', label: '低风险' },
+                                        ]}
+                                    />
+                                </Space>
+                            </Col>
+                            <Col>
+                                <Space>
+                                    <Button
+                                        icon={<PlusOutlined />}
+                                        className={styles['button-style']}
+                                        onClick={() => this.handleModalVisible(true)}
+                                    >
+                                        新建项目
+                                    </Button>
+                                    <Button
+                                        icon={<ImportOutlined />}
+                                        className={styles['button-style']}
+                                        onClick={() => this.handleImportModalVisible(true)} // 新增点击事件
+                                    >
+                                        导入数据
+                                    </Button>
+                                    <Button
+                                        icon={<ExportOutlined />}
+                                        className={styles['button-style']}
+                                    >
+                                        导出数据
+                                    </Button>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </div>
+
+                    <StandardTable
+                        rowKey={'id'}
+                        selectedRows={selectedRows}
+                        loading={loading}
+                        data={mockData}
+                        columns={this.columns}
+                        onSelectRow={this.handleSelectRows}
+                        onChange={this.handleStandardTableChange}
+                        scroll={{ x: 1200 }}
+                        showTotal={(total, range) => `共 ${total} 条`}
+                    />
+                </div>
+
+                {modalVisible && <BasicInfoCreateForm {...parentMethods} modalVisible={modalVisible} />}
+
+                {updateFormValues && Object.keys(updateFormValues).length ? (
+                    <BasicInfoUpdateForm
+                        {...updateMethods}
+                        updateModalVisible={updateModalVisible}
+                        values={updateFormValues}
+                    />
+                ) : null}
+
+                {viewFormValues && Object.keys(viewFormValues).length ? (
+                    <BasicInfoViewForm
+                        {...viewMethods}
+                        viewModalVisible={viewModalVisible}
+                        values={viewFormValues}
+                    />
+                ) : null}
+                {importModalVisible && (
+                    <BasicInfoImportForm
+                        modalVisible={importModalVisible}
+                        handleModalVisible={this.handleImportModalVisible}
+                    />
+                )}
+            </Card>
+        )
+    }
+}
+
+export default BasicInfoManagement;

src/pages/business_basicinformation/components/PersonnelBasicInfo.js

@@ -0,0 +1,780 @@
+import React, { PureComponent } from 'react';
+import {
+    DeleteOutlined,
+    EditOutlined,
+    PlusOutlined,
+    SearchOutlined,
+    RedoOutlined,
+    DownOutlined,
+    ExclamationCircleFilled,
+    ExclamationCircleOutlined,
+    UpOutlined,
+    SafetyOutlined,
+    ImportOutlined,
+    ExportOutlined,
+    UserOutlined,
+    TeamOutlined,
+    SettingOutlined,
+    FileTextOutlined,
+    ProjectOutlined,
+    WarningOutlined,
+    AlertOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree, Progress, Input, Select } from 'antd';
+import StandardTable from '@/components/StandardTable';
+import ReactECharts from 'echarts-for-react';
+
+import { MyIcon } from "@/components/Icon"
+import style from "@/global.less";
+import PersonnelCreateForm from '../form/PersonnelCreateForm'; //新增表单
+import StaffSheetUpdateForm from '../form/BasicInfoUpdateForm'; //修改表单
+import StaffSheetViewForm from '../form/BasicInfoViewForm'; //查看表单
+import styles from '../BasicInformation.less';
+import datadictionary from "@/utils/dataDictionary";
+import { formatDate } from "@/utils/formatUtils";
+import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
+import userIcon from '@/assets/basic_information/user.png';
+import contractExpireIcon from '@/assets/basic_information/contract-expire.png';
+import contractOverdueIcon from '@/assets/basic_information/contract-overdue.png';
+import certificateExpireIcon from '@/assets/basic_information/certificate-expire.png';
+// import certificateOverdueIcon from '@/assets/basic_information/certificate-overdue.png';
+import addIcon from '@/assets/basic_information/add.png';
+const { confirm } = Modal;
+
+//预约类型
+const sex_type = datadictionary.sex
+const user_status = datadictionary.user_status
+const sys_user_post = datadictionary.sys_user_post
+
+const mockData = {
+    list: [
+        {
+            id: '01',
+            name: '王一一',
+            idCard: '411***************7659',
+            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+            phone: '15278967754',
+            category: '长期工',
+            contractStatus: '有效',
+            contractExpiry: '2025-08-26',
+        },
+        {
+            id: '02',
+            name: '刘冰',
+            idCard: '411***************7659',
+            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+            phone: '15278967754',
+            category: '外包工',
+            contractStatus: '异常',
+            contractExpiry: '2025-08-26',
+        },
+        {
+            id: '03',
+            name: '赵志远',
+            idCard: '411***************7659',
+            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+            phone: '15278967754',
+            category: '临时工',
+            contractStatus: '有效',
+            contractExpiry: '2025-08-26',
+        },
+        {
+            id: '04',
+            name: '王博国',
+            idCard: '411***************7659',
+            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+            phone: '15278967754',
+            category: '顾问',
+            contractStatus: '剩余30天',
+            contractExpiry: '2025-08-26',
+        },
+        {
+            id: '05',
+            name: '赵敏敏',
+            idCard: '411***************7659',
+            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+            phone: '15278967754',
+            category: '外包工',
+            contractStatus: '剩余30天',
+            contractExpiry: '2025-08-26',
+        },
+    ],
+    pagination: {
+        total: 48,
+        current: 1,
+        pageSize: 5,
+    },
+}
+
+class PersonnelBasicInfo extends PureComponent {
+    state = {
+        modalVisible: false,
+        updateModalVisible: false,
+        viewModalVisible: false,
+        expandForm: false,
+        selectedRows: [],
+        formValues: {},
+        updateFormValues: {},
+        viewFormValues: {},
+        toggleExpand: false,
+    }
+
+    columns = [
+        {
+            title: '编号',
+            dataIndex: 'id',
+            key: 'id',
+            width: 60,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 80,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '身份证号',
+            dataIndex: 'idCard',
+            key: 'idCard',
+            width: 180,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '所属公司',
+            dataIndex: 'company',
+            key: 'company',
+            width: 250,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '联系方式',
+            dataIndex: 'phone',
+            key: 'phone',
+            width: 120,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '人员分类',
+            dataIndex: 'category',
+            key: 'category',
+            width: 100,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '合同状态',
+            dataIndex: 'contractStatus',
+            key: 'contractStatus',
+            width: 100,
+            render: (text) => {
+                let color = '#2E4CD4';
+                let bgColor = '#E6E9FB';
+                if (text === '异常') {
+                    color = '#FF3E48';
+                    bgColor = '#FFE0E2';
+                } else if (text === '剩余30天') {
+                    color = '#FF8800';
+                    bgColor = '#FFF3E9';
+                }
+                return (
+                    <Tag
+                        style={{
+                            color: color,
+                            backgroundColor: bgColor,
+                            border: 'none',
+                            borderRadius: 4,
+                            padding: '2px 8px',
+                            fontSize: '12px'
+                        }}
+                    >
+                        {text}
+                    </Tag>
+                );
+            },
+        },
+        {
+            title: '合同有效期',
+            dataIndex: 'contractExpiry',
+            key: 'contractExpiry',
+            width: 120,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: 100,
+            render: (text, record) => (
+                <a style={{ color: '#2E4CD4', fontSize: '12px' }}>上传附件</a>
+            ),
+        },
+    ]
+
+    getPieChartOption = () => {
+        return {
+            radar: {
+                indicator: [
+                    { name: '{a|培训完成率} {b|85%}', max: 100 },
+                    { name: '{a|持证率} {b|92%}', max: 100 },
+                    { name: '{a|注册工程师占比} {b|15%}', max: 100 }
+                ],
+                center: ['45%', '50%'],
+                radius: 80,
+                splitNumber: 4,
+                shape: 'polygon',
+                axisName: {
+                    rich: {
+                        a: {
+                            color: '#333',
+                            fontSize: 12,
+                            fontWeight: 400,
+                        },
+                        b: {
+                            color: '#2E4CD4',
+                            fontSize: 12,
+                            fontWeight: 400,
+                        }
+                    },
+                    formatter: function (value) {
+                        // value 形如 "持证率 92%"
+                        // 这里直接返回，ECharts rich 会自动处理
+                        return value;
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#BFCBFF']
+                    }
+                },
+                splitArea: {
+                    areaStyle: {
+                        color: ['#fff']
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#E6EAF5'
+                    }
+                }
+            },
+            series: [{
+                type: 'radar',
+                data: [
+                    {
+                        value: [85, 92, 15],
+                        areaStyle: {
+                            color: '#499BFF'
+                        },
+                        lineStyle: {
+                            color: '#1269FF',
+                            width: 2
+                        },
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        itemStyle: {
+                            color: '#2E4CD4',
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        }
+                    }
+                ]
+            }]
+        }
+    }
+
+    getPieDepartmentDistributionChartOption = () => {
+        return {
+            grid: {
+                left: 0,
+                right: 0,
+                top: 70,
+                bottom: 0,
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: ['技术部', '销售部', '市场部', '财务部', '人事部'],
+                axisLine: { lineStyle: { color: '#E6EAF5' } },
+                axisTick: { show: false },
+                axisLabel: { color: '#666', fontSize: 13 }
+            },
+            yAxis: {
+                type: 'value',
+                minInterval: 100,
+                splitLine: { lineStyle: { color: '#E6EAF5' } },
+                axisLabel: { color: '#666', fontSize: 13 }
+            },
+            series: [{
+                type: 'bar',
+                data: [360, 450, 370, 360, 200],
+                barWidth: 25,
+                itemStyle: {
+                    color: typeof window !== 'undefined' && window.echarts
+                        ? new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: '#3691FF' },
+                            { offset: 1, color: '#1E68FF' }
+                        ])
+                        : '#1E68FF'
+                }
+            }]
+        };
+    }
+
+    handleStandardTableChange = (pagination, sorter) => {
+        const { dispatch } = this.props
+        const { formValues } = this.state
+
+        const params = {
+            currentPage: pagination.current,
+            pageSize: pagination.pageSize,
+            ...formValues
+        }
+
+        sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
+    }
+
+    handleFormReset = () => {
+        const { dispatch } = this.props
+        this.setState({
+            formValues: {}
+        })
+    }
+
+    toggleForm = () => {
+        const { expandForm } = this.state
+        this.setState({
+            expandForm: !expandForm
+        })
+    }
+
+    handleSelectRows = rows => {
+        this.setState({
+            selectedRows: rows
+        })
+    }
+
+    handleSearch = values => {
+        const { dispatch } = this.props
+        const { expandForm } = this.state
+
+        this.setState({
+            formValues: values
+        })
+    }
+
+    handleModalVisible = flag => {
+        this.setState({
+            modalVisible: !!flag
+        })
+    }
+
+    handleUpdateModalVisible = (flag, record) => {
+        this.setState({
+            updateModalVisible: !!flag,
+            updateFormValues: record || {}
+        })
+    }
+
+    handleViewModalVisible = (flag, record) => {
+        this.setState({
+            viewModalVisible: !!flag,
+            viewFormValues: record || {}
+        })
+    }
+
+    handleAdd = fields => {
+        const { dispatch } = this.props
+        // 添加逻辑
+    }
+
+    handleDeleteRecord = record => {
+        const { dispatch } = this.props
+        // 删除逻辑
+    }
+
+    handleUpdate = fields => {
+        const { dispatch } = this.props
+        // 更新逻辑
+    }
+
+    handleCollapse = () => {
+        const { toggleExpand } = this.state
+        this.setState({
+            toggleExpand: !toggleExpand
+        })
+    }
+
+    render() {
+        const {
+            loading,
+            dispatch
+        } = this.props
+        const {
+            selectedRows,
+            modalVisible,
+            updateModalVisible,
+            viewModalVisible,
+            updateFormValues,
+            viewFormValues,
+            toggleExpand,
+        } = this.state
+
+        const parentMethods = {
+            handleAdd: this.handleAdd,
+            handleModalVisible: this.handleModalVisible,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const updateMethods = {
+            handleUpdateModalVisible: this.handleUpdateModalVisible,
+            handleUpdate: this.handleUpdate,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const viewMethods = {
+            handleViewModalVisible: this.handleViewModalVisible
+        }
+
+        return (
+            <Card bordered={false} className={styles['card-container']}>
+                {/* 顶部统计卡片区域 */}
+                <Row gutter={16} style={{ marginBottom: 15 }}>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>总人数</div>
+                                <div className={styles['stat-card-value']}>1456</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                <img src={userIcon} alt="总人数" />
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>合同即将过期</div>
+                                <div className={styles['stat-card-value']}>357</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                <img src={contractExpireIcon} alt="合同即将过期" />
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>合同已过期</div>
+                                <div className={styles['stat-card-value']}>1456</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                <img src={contractOverdueIcon} alt="合同已过期" />
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>证件即将过期</div>
+                                <div className={styles['stat-card-value']}>1456</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                <img src={certificateExpireIcon} alt="证件即将过期" />
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>证件已过期</div>
+                                <div className={styles['stat-card-value']}>1456</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                {/* <img src={certificateOverdueIcon} alt="证件已过期" */}
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={4}>
+                        <div className={styles['stat-card']}>
+                            <div style={{ flex: 1 }}>
+                                <div className={styles['stat-card-label']}>本月新增</div>
+                                <div className={styles['stat-card-value']}>1456</div>
+                            </div>
+                            <div className={styles['stat-card-icon']}>
+                                <img src={addIcon} alt="本月新增" />
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+                {/* 主要内容区域 */}
+                <Row gutter={16} style={{ marginBottom: 15 }}>
+                    {/* 左侧：人员资质 */}
+                    <Col span={8}>
+                        <div
+                            className={styles['ryzz-area-bg']}
+                            style={{
+                                // border: '1px solid #DBE2FF',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 240,
+                                position: 'relative'
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                人员资质
+                            </div>
+                            <div style={{
+                                width: '100%',
+                                height: 220,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                position: 'relative'
+                            }}>
+                                <ReactECharts
+                                    option={this.getPieChartOption()}
+                                    style={{ width: '100%', height: '100%' }}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 中间：部门人员分布 */}
+                    <Col span={10}>
+                        <div
+                            className={styles['ryzz-area-bg']}
+                            style={{
+                                // border: '1px solid #e9ecef',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 240,
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 12,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                部门人员分布
+                            </div>
+                            <div style={{
+                                width: '100%',
+                                flex: 1,
+                                minHeight: 0,
+                                display: 'flex',
+                                alignItems: 'flex-end'
+                            }}>
+                                <ReactECharts
+                                    option={this.getPieDepartmentDistributionChartOption()}
+                                    className={styles['chart-full-size']}
+                                    style={{ width: '100%', height: 220 }}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 右侧：到期提醒 */}
+                    <Col span={6}>
+                        <div 
+                        className={styles['dqtx-area-bg']}
+                        style={{
+                            // border: '1px solid #e9ecef',
+                            borderRadius: 4,
+                            padding: 20,
+                            height: 240,
+                            position: 'relative'
+                        }}>
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500,
+                                position: 'relative',
+                                zIndex: 2
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                到期提醒
+                            </div>
+                            <div style={{ marginTop: 0 }}>
+                                <div style={{
+                                    background: '#F1F5FF',
+                                    borderRadius: 6,
+                                    padding: '10px 14px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: 12,
+                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
+                                }}>
+                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
+                                    <span style={{ color: '#222', fontSize: 14 }}>沈一撒合同已到期</span>
+                                </div>
+                                <div style={{
+                                    background: '#F1F5FF',
+                                    borderRadius: 6,
+                                    padding: '10px 14px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: 12,
+                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
+                                }}>
+                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
+                                    <span style={{ color: '#222', fontSize: 14 }}>赵敏敏合同临期 15 天</span>
+                                </div>
+                                <div style={{
+                                    background: '#F1F5FF',
+                                    borderRadius: 6,
+                                    padding: '10px 14px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: 0,
+                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
+                                }}>
+                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
+                                    <span style={{ color: '#222', fontSize: 14 }}>赵敏敏合同临期 15 天</span>
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+
+                {/* 底部表格区域 */}
+                <div>
+                    <div className={styles['table-toolbar-container']}>
+                        <Row justify="space-between" align="middle">
+                            <Col>
+                                <Space>
+                                    <Input.Search
+                                        placeholder="搜索姓名、工号..."
+                                        className={styles['search-input']}
+                                        onSearch={this.handleSearch}
+                                    />
+                                    <span style={{ marginLeft: 20 }}>部门</span>
+                                    <Select
+                                        placeholder="请选择"
+                                        className={styles['filter-select']}
+                                        options={[
+                                            { value: 'all', label: '全部' },
+                                            { value: 'high', label: '高风险' },
+                                            { value: 'medium', label: '中风险' },
+                                            { value: 'low', label: '低风险' },
+                                        ]}
+                                    />
+                                </Space>
+                            </Col>
+                            <Col>
+                                <Space>
+                                    <Button
+                                        icon={<PlusOutlined />}
+                                        style={{ backgroundColor: '#2E4CD4', color: '#fff', borderColor: '#2E4CD4' }}
+                                        onClick={() => this.handleModalVisible(true)}
+                                    >
+                                        新增人员
+                                    </Button>
+                                    <Button
+                                        icon={<ImportOutlined />}
+                                        className={styles['button-style']}
+                                    >
+                                        批量导入
+                                    </Button>
+                                    <Button
+                                        icon={<ExportOutlined />}
+                                        className={styles['button-style']}
+                                    >
+                                        批量导出
+                                    </Button>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </div>
+
+                    <StandardTable
+                        rowKey={'id'}
+                        selectedRows={selectedRows}
+                        loading={loading}
+                        data={mockData}
+                        columns={this.columns}
+                        onSelectRow={this.handleSelectRows}
+                        onChange={this.handleStandardTableChange}
+                        scroll={{ x: 1200 }}
+                        showTotal={(total, range) => `共 ${total} 条`}
+                    />
+                </div>
+
+                {modalVisible && <PersonnelCreateForm {...parentMethods} modalVisible={modalVisible} />}
+
+                {updateFormValues && Object.keys(updateFormValues).length ? (
+                    <StaffSheetUpdateForm
+                        {...updateMethods}
+                        updateModalVisible={updateModalVisible}
+                        values={updateFormValues}
+                    />
+                ) : null}
+
+                {viewFormValues && Object.keys(viewFormValues).length ? (
+                    <StaffSheetViewForm
+                        {...viewMethods}
+                        viewModalVisible={viewModalVisible}
+                        values={viewFormValues}
+                    />
+                ) : null}
+            </Card>
+        )
+    }
+}
+
+export default PersonnelBasicInfo;

src/pages/business_basicinformation/components/QualificationManagement.js

@@ -0,0 +1,743 @@
+import React, { PureComponent } from 'react';
+import {
+    DeleteOutlined,
+    EditOutlined,
+    PlusOutlined,
+    SearchOutlined,
+    RedoOutlined,
+    DownOutlined,
+    ExclamationCircleFilled,
+    UpOutlined,
+    SafetyOutlined,
+    ImportOutlined,
+    ExportOutlined,
+    UserOutlined,
+    TeamOutlined,
+    SettingOutlined,
+    FileTextOutlined,
+    ProjectOutlined,
+    WarningOutlined,
+    AlertOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree, Progress, Input, Select } from 'antd';
+import StandardTable from '@/components/StandardTable';
+import ReactECharts from 'echarts-for-react';
+
+import { MyIcon } from "@/components/Icon"
+import style from "@/global.less";
+import StaffSheetCreateForm from '../form/BasicInfoCreateForm'; //新增表单
+import StaffSheetUpdateForm from '../form/BasicInfoUpdateForm'; //修改表单
+import StaffSheetViewForm from '../form/BasicInfoViewForm'; //查看表单
+import styles from '../BasicInformation.less';
+import datadictionary from "@/utils/dataDictionary";
+import { formatDate } from "@/utils/formatUtils";
+import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
+
+const { confirm } = Modal;
+
+//预约类型
+const sex_type = datadictionary.sex
+const user_status = datadictionary.user_status
+const sys_user_post = datadictionary.sys_user_post
+
+const mockData = {
+    list: [
+        {
+            id: '01',
+            certificateName: '安全生产许可证',
+            certificateNumber: 'AQ103',
+            validDate: '2025-09-09',
+            status: '有效',
+            remainingDays: 15,
+            fileLink: '点击查看 PDF',
+        },
+        {
+            id: '02',
+            certificateName: '特种设备证书',
+            certificateNumber: 'AQ103',
+            validDate: '2025-09-09',
+            status: '有效',
+            remainingDays: 15,
+            fileLink: '点击查看 PDF',
+        },
+        {
+            id: '03',
+            certificateName: '安全许可证书',
+            certificateNumber: 'AQ103',
+            validDate: '2025-09-09',
+            status: '即将到期',
+            remainingDays: 15,
+            fileLink: '点击查看 PDF',
+        },
+        {
+            id: '04',
+            certificateName: '安全生产许可证',
+            certificateNumber: 'AQ103',
+            validDate: '2025-09-09',
+            status: '即将到期',
+            remainingDays: 15,
+            fileLink: '点击查看 PDF',
+        },
+        {
+            id: '05',
+            certificateName: '安全生产许可证',
+            certificateNumber: 'AQ103',
+            validDate: '2025-09-09',
+            status: '异常',
+            remainingDays: 15,
+            fileLink: '点击查看 PDF',
+        },
+    ],
+    pagination: {
+        total: 48,
+        current: 1,
+        pageSize: 5,
+    },
+}
+
+class QualificationManagement extends PureComponent {
+    state = {
+        modalVisible: false,
+        updateModalVisible: false,
+        viewModalVisible: false,
+        expandForm: false,
+        selectedRows: [],
+        formValues: {},
+        updateFormValues: {},
+        viewFormValues: {},
+        toggleExpand: false,
+    }
+
+    columns = [
+        {
+            title: '序号',
+            dataIndex: 'id',
+            key: 'id',
+            width: 60,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '证书名称',
+            dataIndex: 'certificateName',
+            key: 'certificateName',
+            width: 150,
+            fixed: 'left',
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '编号',
+            dataIndex: 'certificateNumber',
+            key: 'certificateNumber',
+            width: 120,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '有效期',
+            dataIndex: 'validDate',
+            key: 'validDate',
+            width: 100,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text}</span>
+            ),
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            width: 100,
+            render: (text) => {
+                let color = '#2E4CD4';
+                let bgColor = '#E6E9FB';
+                if (text === '即将到期') {
+                    color = '#FF8800';
+                    bgColor = '#FFF3E9';
+                } else if (text === '异常') {
+                    color = '#FF3E48';
+                    bgColor = '#FFE0E2';
+                }
+                return (
+                    <Tag
+                        style={{
+                            color: color,
+                            backgroundColor: bgColor,
+                            border: 'none',
+                            borderRadius: 4,
+                            padding: '2px 8px',
+                            fontSize: '12px'
+                        }}
+                    >
+                        {text}
+                    </Tag>
+                );
+            },
+        },
+        {
+            title: '预警信息',
+            dataIndex: 'remainingDays',
+            key: 'remainingDays',
+            width: 100,
+            render: (text) => (
+                <span style={{ fontSize: '12px' }}>{text} 天</span>
+            ),
+        },
+        {
+            title: '关联文件链接',
+            dataIndex: 'fileLink',
+            key: 'fileLink',
+            width: 120,
+            render: (text, record) => (
+                <a style={{ color: '#2E4CD4', fontSize: '12px' }}>{text}</a>
+            ),
+        },
+        // {
+        //     title: '操作',
+        //     fixed: 'right',
+        //     align: 'center',
+        //     width: 200,
+        //     render: (text, record) => {
+        //         return (
+        //             <div>
+        //                 <a className={styles.operateStyle} style={{ marginRight: 15 }}> 详情 </a>
+        //                 <a className={styles.operateStyle} style={{ marginRight: 15 }}> 修改 </a>
+        //                 <a className={styles.operateStyle} style={{ color: '#FF2626' }}> 删除 </a>
+        //             </div>
+        //         )
+        //     }
+        // },
+    ]
+
+    getPieChartOption = () => {
+        return {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c}% ({d}%)'
+            },
+            legend: {
+                orient: 'vertical',
+                right: '0',
+                top: '22%',
+                itemWidth: 16,
+                itemHeight: 4,
+                itemGap: 16,
+                textStyle: {
+                    fontSize: 12,
+                    color: '#666',
+                    fontWeight: 'normal'
+                }
+            },
+            series: [
+                {
+                    name: '证照类型分布',
+                    type: 'pie',
+                    radius: ['30%', '45%'],
+                    center: ['30%', '40%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false
+                    },
+                    emphasis: {
+                        scale: true,
+                        scaleSize: 5
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 45,
+                            name: '安全生产许可证',
+                            itemStyle: {
+                                color: '#4B69F1'
+                            }
+                        },
+                        {
+                            value: 20,
+                            name: '安全评价报告',
+                            itemStyle: {
+                                color: '#44BB5F'
+                            }
+                        },
+                        {
+                            value: 20,
+                            name: '施工资质证书',
+                            itemStyle: {
+                                color: '#A493FB'
+                            }
+                        },
+                        {
+                            value: 15,
+                            name: '其他',
+                            itemStyle: {
+                                color: '#FFD85A'
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+
+    getPieCertificationStatusChartOption = () => {
+        return {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c}% ({d}%)'
+            },
+            legend: {
+                orient: 'vertical',
+                right: '20%',
+                top: '22%',
+                itemWidth: 16,
+                itemHeight: 4,
+                itemGap: 16,
+                textStyle: {
+                    fontSize: 12,
+                    color: '#666'
+                }
+            },
+            series: [
+                {
+                    name: '证照状态分布',
+                    type: 'pie',
+                    radius: '45%',
+                    center: ['30%', '40%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        position: 'inside',
+                        formatter: '{d}%',
+                        fontSize: 12,
+                        // fontWeight: 'bold',
+                        color: '#fff'
+                    },
+                    emphasis: {
+                        scale: true,
+                        scaleSize: 5
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 40,
+                            name: '有效',
+                            itemStyle: {
+                                color: '#1269FF'
+                            }
+                        },
+                        {
+                            value: 25,
+                            name: '临期 30 天',
+                            itemStyle: {
+                                color: '#6E86F4'
+                            }
+                        },
+                        {
+                            value: 25,
+                            name: '临期 15 天',
+                            itemStyle: {
+                                color: '#A3B3F8'
+                            }
+                        },
+                        {
+                            value: 10,
+                            name: '异常',
+                            itemStyle: {
+                                color: '#C6D0FB'
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+
+    handleStandardTableChange = (pagination, sorter) => {
+        const { dispatch } = this.props
+        const { formValues } = this.state
+
+        const params = {
+            currentPage: pagination.current,
+            pageSize: pagination.pageSize,
+            ...formValues
+        }
+
+        sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
+    }
+
+    handleFormReset = () => {
+        const { dispatch } = this.props
+        this.setState({
+            formValues: {}
+        })
+    }
+
+    toggleForm = () => {
+        const { expandForm } = this.state
+        this.setState({
+            expandForm: !expandForm
+        })
+    }
+
+    handleSelectRows = rows => {
+        this.setState({
+            selectedRows: rows
+        })
+    }
+
+    handleSearch = values => {
+        const { dispatch } = this.props
+        const { expandForm } = this.state
+
+        this.setState({
+            formValues: values
+        })
+    }
+
+    handleModalVisible = flag => {
+        this.setState({
+            modalVisible: !!flag
+        })
+    }
+
+    handleUpdateModalVisible = (flag, record) => {
+        this.setState({
+            updateModalVisible: !!flag,
+            updateFormValues: record || {}
+        })
+    }
+
+    handleViewModalVisible = (flag, record) => {
+        this.setState({
+            viewModalVisible: !!flag,
+            viewFormValues: record || {}
+        })
+    }
+
+    handleAdd = fields => {
+        const { dispatch } = this.props
+        // 添加逻辑
+    }
+
+    handleDeleteRecord = record => {
+        const { dispatch } = this.props
+        // 删除逻辑
+    }
+
+    handleUpdate = fields => {
+        const { dispatch } = this.props
+        // 更新逻辑
+    }
+
+    handleCollapse = () => {
+        const { toggleExpand } = this.state
+        this.setState({
+            toggleExpand: !toggleExpand
+        })
+    }
+
+    render() {
+        const {
+            loading,
+            dispatch
+        } = this.props
+        const {
+            selectedRows,
+            modalVisible,
+            updateModalVisible,
+            viewModalVisible,
+            updateFormValues,
+            viewFormValues,
+            toggleExpand,
+        } = this.state
+
+        const parentMethods = {
+            handleAdd: this.handleAdd,
+            handleModalVisible: this.handleModalVisible,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const updateMethods = {
+            handleUpdateModalVisible: this.handleUpdateModalVisible,
+            handleUpdate: this.handleUpdate,
+            dispatch: dispatch,
+            loading,
+        }
+
+        const viewMethods = {
+            handleViewModalVisible: this.handleViewModalVisible
+        }
+
+        return (
+            <Card bordered={false}  className={styles['card-container']}>
+                {/* 主要内容区域 */}
+                <Row gutter={16} style={{ marginBottom: 15 }}>
+                    {/* 左侧：证照类型分布 */}
+                    <Col span={7}>
+                        <div
+                            className={styles['func-area-bg']}
+                            style={{
+                                border: '1px solid #E3E7FB',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 260
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4 ',
+                                    marginRight: 8
+                                }}></span>
+                                证照类型分布
+                            </div>
+                            <div className={styles['chart-container']}>
+                                <ReactECharts
+                                    option={this.getPieChartOption()}
+                                    className={styles['chart-full-size']}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 中间：证照状态分布 */}
+                    <Col span={8}>
+                        <div
+                            className={styles['func-area-bg']}
+                            style={{
+                                border: '1px solid #E3E7FB',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 260
+                            }}
+                        >
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 20,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                证照状态分布
+                            </div>
+
+                            <div className={styles['chart-container']}>
+                                <ReactECharts
+                                    option={this.getPieCertificationStatusChartOption()}
+                                    className={styles['chart-full-size']}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            </div>
+                        </div>
+                    </Col>
+
+                    {/* 右侧：临期预警 */}
+                    <Col span={9}>
+                        <div
+                            className={styles['warn-area-bg']}
+                            style={{
+                                border: '1px solid #FFE8E8',
+                                borderRadius: 4,
+                                padding: 20,
+                                height: 260,
+                                position: 'relative'
+                            }}>
+                            {/* 添加半透明覆盖层以增强内容可读性 */}
+                            <div style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                background: 'rgba(248, 249, 250, 0.3)',
+                                borderRadius: 4,
+                                pointerEvents: 'none'
+                            }}></div>
+
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: 10,
+                                color: '#333',
+                                fontSize: 14,
+                                fontWeight: 500,
+                                position: 'relative',
+                                zIndex: 2
+                            }}>
+                                <span style={{
+                                    display: 'inline-block',
+                                    width: 2,
+                                    height: 16,
+                                    background: '#2E4CD4',
+                                    marginRight: 8
+                                }}></span>
+                                临期预警
+                            </div>
+
+                            {/* 证照预警列表 */}
+                            <div style={{
+                                marginTop: 10,
+                                marginLeft: 10,
+                                width: '60%',
+                                position: 'relative',
+                                zIndex: 2
+                            }}>
+                                {[
+                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '15天后到期', backgroundColor: '#FFF9F4', borderColor: '#FFD7BB', backgroundColorDate: '#FFEDDE', color: '#FF8800' },
+                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '15天后到期', backgroundColor: '#FFF9F4', borderColor: '#FFD7BB', backgroundColorDate: '#FFEDDE', color: '#FF8800' },
+                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '5天后到期', backgroundColor: '#FFF5F6', borderColor: '#FFC0BF', backgroundColorDate: '#FFE0E2', color: '#FF2526' }
+                                ].map((item, index) => (
+                                    <div key={index} style={{
+                                        background: item.backgroundColor,
+                                        border: `1px solid ${item.borderColor}`,
+                                        borderRadius: 4,
+                                        padding: '7px 16px',
+                                        marginBottom: 12,
+                                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                                        position: 'relative',
+                                        zIndex: 2,
+                                        backdropFilter: 'blur(1px)'
+                                    }}>
+                                        <div style={{
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            marginBottom: 6
+                                        }}>
+                                            <span style={{
+                                                fontWeight: 500,
+                                                color: '#333',
+                                                fontSize: 13
+                                            }}>
+                                                {item.name}
+                                            </span>
+                                            <div style={{
+                                                background: item.backgroundColorDate,
+                                                color: item.color,
+                                                padding: '2px 8px',
+                                                borderRadius: 5,
+                                                fontSize: 11,
+                                                fontWeight: 500
+                                            }}>
+                                                {item.status}
+                                            </div>
+                                        </div>
+                                        <div style={{
+                                            color: '#999',
+                                            fontSize: 11,
+                                            lineHeight: 1.2
+                                        }}>
+                                            编号：{item.code}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+
+                {/* 底部表格区域 */}
+                <div>
+                    <div className={styles['table-toolbar-container']}>
+                        <Row justify="space-between" align="middle">
+                            <Col>
+                                <Space>
+                                    <Input.Search
+                                        placeholder="搜索证书名称..."
+                                        className={styles['search-input']}
+                                        onSearch={this.handleSearch}
+                                    />
+                                    <span style={{ marginLeft: 20 }}>证件类型</span>
+                                    <Select
+                                        placeholder="请选择"
+                                        className={styles['filter-select']}
+                                        options={[
+                                            { value: 'all', label: '全部' },
+                                            { value: 'high', label: '高风险' },
+                                            { value: 'medium', label: '中风险' },
+                                            { value: 'low', label: '低风险' },
+                                        ]}
+                                    />
+                                </Space>
+                            </Col>
+                            <Col>
+                                <Space>
+                                    <Button
+                                        icon={<ImportOutlined />}
+                                        className={styles['button-style']}
+                                    >
+                                        批量导入
+                                    </Button>
+                                    <Button
+                                        icon={<ExportOutlined />}
+                                        className={styles['button-style']}
+                                    >
+                                        批量导出
+                                    </Button>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </div>
+
+                    <StandardTable
+                        rowKey={'id'}
+                        selectedRows={selectedRows}
+                        loading={loading}
+                        data={mockData}
+                        columns={this.columns}
+                        onSelectRow={this.handleSelectRows}
+                        onChange={this.handleStandardTableChange}
+                        scroll={{ x: 1200 }}
+                        showTotal={(total, range) => `共 ${total} 条`}
+                    />
+                </div>
+
+                {modalVisible && <StaffSheetCreateForm {...parentMethods} modalVisible={modalVisible} />}
+
+                {updateFormValues && Object.keys(updateFormValues).length ? (
+                    <StaffSheetUpdateForm
+                        {...updateMethods}
+                        updateModalVisible={updateModalVisible}
+                        values={updateFormValues}
+                    />
+                ) : null}
+
+                {viewFormValues && Object.keys(viewFormValues).length ? (
+                    <StaffSheetViewForm
+                        {...viewMethods}
+                        viewModalVisible={viewModalVisible}
+                        values={viewFormValues}
+                    />
+                ) : null}
+            </Card>
+        )
+    }
+}
+
+export default QualificationManagement;

src/pages/business_basicinformation/form/BasicInfoCreateForm.js

@@ -0,0 +1,167 @@
+import { useState, useEffect } from 'react'
+import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
+import SelectDeptTree from '@/components/SelectDeptTree'
+import SelectOrganTree from '@/components/SelectOrganTree'
+import datadictionary from '@/utils/dataDictionary'
+import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
+import { NumberInput } from '@/components/NumberInput'
+import styles from '../BasicInformation.less'
+import style from '@/global.less'
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatUtils'
+
+const { Item: FormItem } = Form
+const { TextArea } = Input
+const dictData = datadictionary
+
+//新增表单
+let getDeptTreeBySelectTree
+let getOrganTreeBySelectTree
+
+const BasicInfoCreateForm = (props => {
+    const [form] = Form.useForm()
+
+    const {
+        modalVisible,
+        handleAdd,
+        handleModalVisible,
+        loading,
+        dispatch,
+        selectDeptTree,
+        selectOrganTree
+    } = props
+
+    // 清空和初始化逻辑可保留
+    useEffect(() => {
+        form.resetFields();
+    }, [modalVisible])
+
+    const okHandle = () => {
+        form.validateFields()
+            .then(fieldsValue => {
+                form.resetFields()
+                handleAdd(fieldsValue)
+            })
+            .catch(() => { })
+    }
+
+    const afterClose = () => {
+        form.resetFields();
+    }
+
+    return (
+        <Modal
+            width={550}
+            bodyStyle={{ minHeight: '200px' }}
+            className={styles.createForm}
+            centered
+            destroyOnClose
+            title='新建项目'
+            open={modalVisible}
+            onOk={okHandle}
+            onCancel={() => handleModalVisible()}
+            afterClose={afterClose}
+            confirmLoading={loading}
+            footer={[
+                <button
+                    key="cancel"
+                    onClick={() => handleModalVisible()}
+                    className={styles['modal-cancel-btn']}
+                >取消</button>,
+                <button
+                    key="submit"
+                    onClick={okHandle}
+                    className={styles['modal-ok-btn']}
+                >确定</button>
+            ]}
+        >
+            <Form
+                form={form}
+                // layout='vertical'
+                requiredMark={false}
+                style={{ marginTop: 30 }}
+            >
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="项目名称"
+                            name="projectName"
+                            rules={[{ required: true, message: '请输入项目名称' }]}
+                        >
+                            <Input placeholder="输入项目名称" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="地理信息"
+                            name="location"
+                            rules={[{ required: true, message: '请输入位置信息' }]}
+                        >
+                            <Input placeholder="请输入位置信息" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="占地面积"
+                            name="area"
+                            rules={[{ required: true, message: '请输入面积信息' }]}
+                        >
+                            <Input
+                                placeholder="面积信息"
+                                addonAfter="m²"
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="职业人数"
+                            name="peopleCount"
+                            rules={[{ required: true, message: '请输入人数' }]}
+                        >
+                            <Input placeholder="输入数量" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="组织机构"
+                            name="org"
+                            rules={[{ required: true, message: '请选择组织机构' }]}
+                        >
+                            <Select
+                                placeholder="请选择"
+                                options={[
+                                    { label: '机构A', value: 'A' },
+                                    { label: '机构B', value: 'B' }
+                                ]}
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="安全等级"
+                            name="safeLevel"
+                            rules={[{ required: true, message: '请选择安全等级' }]}
+                        >
+                            <Select
+                                placeholder="请选择"
+                                options={[
+                                    { label: '一级', value: '1' },
+                                    { label: '二级', value: '2' },
+                                    { label: '三级', value: '3' }
+                                ]}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    )
+})
+
+export default BasicInfoCreateForm

src/pages/business_basicinformation/form/BasicInfoImportForm.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { Modal, Upload, message, Progress } from 'antd';
+import { UploadOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import styles from '../BasicInformation.less';
+import fileIcon from '@/assets/basic_information/file-icon.png';
+const BasicInfoImportForm = (props) => {
+    const { modalVisible, handleModalVisible, loading } = props;
+    const [fileList, setFileList] = useState([
+        // 示例数据，实际可根据上传进度动态设置
+        // { uid: '1', name: '文件名称', size: 3 * 1024 * 1024, status: 'uploading', percent: 60 },
+        // ...
+    ]);
+
+    const maxFiles = 10;
+    const maxSize = 100 * 1024 * 1024; // 100M
+
+    const beforeUpload = (file) => {
+        if (file.size > maxSize) {
+            message.error('单个文件不能超过100M');
+            return Upload.LIST_IGNORE;
+        }
+        if (fileList.length >= maxFiles) {
+            message.error(`最多只能上传${maxFiles}个文件`);
+            return Upload.LIST_IGNORE;
+        }
+        // 模拟上传进度
+        file.status = 'uploading';
+        file.percent = 60;
+        return true;
+    };
+
+    const handleChange = ({ fileList: newFileList }) => {
+        // 模拟每个文件60%进度
+        const updatedList = newFileList.slice(0, maxFiles).map(file => ({
+            ...file,
+            status: 'uploading',
+            percent: 60,
+        }));
+        setFileList(updatedList);
+    };
+
+    const handleRemove = (file) => {
+        setFileList(fileList.filter(item => item.uid !== file.uid));
+    };
+
+    const handleOk = () => {
+        handleModalVisible(false);
+        setFileList([]);
+    };
+
+    const handleCancel = () => {
+        handleModalVisible(false);
+        setFileList([]);
+    };
+
+    // 文件列表渲染
+    const renderFileList = () => (
+        <div className={styles['import-file-list']}>
+            {fileList.map(file => (
+                <div
+                    key={file.uid}
+                    className={styles['import-file-item']}
+                >
+                    <div className={styles['import-file-icon']}>
+                        <img src={fileIcon} alt="file" style={{ width: 28, height: 28 }} />
+                    </div>
+                    <div className={styles['import-file-info']}>
+                        <div className={styles['import-file-name']}>{file.name || '文件名称'}</div>
+                        <div className={styles['import-file-size']}>
+                            {file.size ? `${(file.size / (1024 * 1024)).toFixed(0)} MB` : '3 MB'}
+                        </div>
+                        <Progress
+                            percent={file.percent || 60}
+                            strokeColor="#2E4CD4"
+                            trailColor="#D4D7E5"
+                            size="small"
+                            style={{ marginBottom: 0 }}
+                        />
+                    </div>
+                    <div
+                        className={styles['import-file-remove']}
+                        onClick={() => handleRemove(file)}
+                    >
+                        ×
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <Modal
+            width={450}
+            bodyStyle={{
+                minHeight: '180px',
+            }}
+            className={styles.createForm}
+            centered
+            destroyOnClose
+            title="新建项目"
+            open={modalVisible}
+            onCancel={handleCancel}
+            footer={[
+                <button
+                    key="cancel"
+                    onClick={handleCancel}
+                    className={styles['modal-cancel-btn']}
+                >取消</button>,
+                <button
+                    key="submit"
+                    onClick={handleOk}
+                    className={styles['modal-ok-btn']}
+                >确定</button>
+            ]}
+        >
+            <div style={{ marginTop: 10 }}>
+                {fileList.length > 0 && renderFileList()}
+                <div
+                    style={{
+                        marginTop: 20
+                    }}
+                >
+                    <Upload.Dragger
+                        fileList={fileList}
+                        beforeUpload={beforeUpload}
+                        onChange={handleChange}
+                        multiple
+                        showUploadList={false}
+                        style={{ width: '100%' }}
+                    >
+                        <div style={{ textAlign: 'center', color: '#2E4CD4', fontSize: 32, marginBottom: 8 }}>
+                            <UploadOutlined />
+                        </div>
+                        <div style={{ color: '#333', fontSize: 14, marginBottom: 4 }}>
+                            添加文件 {fileList.length}/{maxFiles}
+                        </div>
+                    </Upload.Dragger>
+                </div>
+                <div style={{ fontSize: 12, display: 'flex', alignItems: 'center', marginBottom: 0, marginTop: 10 }}>
+                    <ExclamationCircleOutlined style={{ marginRight: 6, color: '#FF4D4F' }} />
+                    单个文件不超过 100M
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default BasicInfoImportForm;

src/pages/business_basicinformation/form/BasicInfoUpdateForm.js

@@ -0,0 +1,149 @@
+import { useEffect } from 'react'
+import { Col, Form, Input, Modal, Row, Select } from 'antd'
+import styles from '../BasicInformation.less'
+
+const BasicInfoUpdateForm = (props => {
+    const [form] = Form.useForm()
+
+    const {
+        updateModalVisible,
+        handleUpdate,
+        handleUpdateModalVisible,
+        loading,
+        values = {}
+    } = props
+
+    useEffect(() => {
+        if (updateModalVisible) {
+            form.setFieldsValue(values)
+        }
+    }, [updateModalVisible, values, form])
+
+    const okHandle = () => {
+        form.validateFields()
+            .then(fieldsValue => {
+                form.resetFields()
+                handleUpdate(fieldsValue)
+            })
+            .catch(() => { })
+    }
+
+    const afterClose = () => {
+        form.resetFields();
+    }
+
+    return (
+        <Modal
+            width={550}
+            bodyStyle={{ minHeight: '200px' }}
+            className={styles.createForm}
+            centered
+            destroyOnClose
+            title='修改项目'
+            open={updateModalVisible}
+            onOk={okHandle}
+            onCancel={() => handleUpdateModalVisible()}
+            afterClose={afterClose}
+            confirmLoading={loading}
+            footer={[
+                <button
+                    key="cancel"
+                    onClick={() => handleUpdateModalVisible()}
+                    className={styles['modal-cancel-btn']}
+                >取消</button>,
+                <button
+                    key="submit"
+                    onClick={okHandle}
+                    className={styles['modal-ok-btn']}
+                >确定</button>
+            ]}
+        >
+            <Form
+                form={form}
+                requiredMark={false}
+                style={{ marginTop: 30 }}
+            >
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="项目名称"
+                            name="projectName"
+                            rules={[{ required: true, message: '请输入项目名称' }]}
+                        >
+                            <Input placeholder="输入项目名称" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="地理信息"
+                            name="location"
+                            rules={[{ required: true, message: '请输入位置信息' }]}
+                        >
+                            <Input placeholder="请输入位置信息" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="占地面积"
+                            name="area"
+                            rules={[{ required: true, message: '请输入面积信息' }]}
+                        >
+                            <Input
+                                placeholder="面积信息"
+                                addonAfter="m²"
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="职业人数"
+                            name="peopleCount"
+                            rules={[{ required: true, message: '请输入人数' }]}
+                        >
+                            <Input placeholder="输入数量" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="组织机构"
+                            name="org"
+                            rules={[{ required: true, message: '请选择组织机构' }]}
+                        >
+                            <Select
+                                placeholder="请选择"
+                                options={[
+                                    { label: '机构A', value: 'A' },
+                                    { label: '机构B', value: 'B' }
+                                ]}
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="安全等级"
+                            name="safeLevel"
+                            rules={[{ required: true, message: '请选择安全等级' }]}
+                        >
+                            <Select
+                                placeholder="请选择"
+                                options={[
+                                    { label: '一级', value: '1' },
+                                    { label: '二级', value: '2' },
+                                    { label: '三级', value: '3' }
+                                ]}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    )
+})
+
+export default BasicInfoUpdateForm

src/pages/business_basicinformation/form/BasicInfoViewForm.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Modal, Row, Col } from 'antd';
+import styles from '../BasicInformation.less';
+
+const BasicInfoViewForm = (props) => {
+  const { viewModalVisible, handleViewModalVisible, values = {} } = props;
+
+  return (
+    <Modal
+      width={500}
+      bodyStyle={{ minHeight: '180px'}}
+      className={styles.createForm}
+      centered
+      destroyOnClose
+      title="详情"
+      open={viewModalVisible}
+      footer={null}
+      onCancel={() => handleViewModalVisible(false)}
+    >
+      <Row gutter={0} style={{ marginTop: 30 }}>
+        <Col span={12} style={{ marginBottom: 18 }}>
+          <div className={styles['view-label']}>项目名称</div>
+          <div className={styles['view-value']}>{values.projectName || '-'}</div>
+        </Col>
+        <Col span={12} style={{ marginBottom: 18 }}>
+          <div className={styles['view-label']}>地理信息</div>
+          <div className={styles['view-value']}>{values.location || '-'}</div>
+        </Col>
+        <Col span={12} style={{ marginBottom: 18 }}>
+          <div className={styles['view-label']}>占地面积</div>
+          <div className={styles['view-value']}>
+            {values.area ? `${values.area}` : '-'}
+          </div>
+        </Col>
+        <Col span={12} style={{ marginBottom: 18 }}>
+          <div className={styles['view-label']}>职业人数</div>
+          <div className={styles['view-value']}>{values.staffCount || '-'}</div>
+        </Col>
+        <Col span={12}>
+          <div className={styles['view-label']}>组织机构</div>
+          <div className={styles['view-value']}>{values.organization || '-'}</div>
+        </Col>
+        <Col span={12}>
+          <div className={styles['view-label']}>安全等级</div>
+          <div className={styles['view-value']}>{values.safetyLevel || '-'}</div>
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+export default BasicInfoViewForm;

src/pages/business_basicinformation/form/PersonnelCreateForm.js

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react'
+import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
+import SelectDeptTree from '@/components/SelectDeptTree'
+import SelectOrganTree from '@/components/SelectOrganTree'
+import datadictionary from '@/utils/dataDictionary'
+import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
+import { NumberInput } from '@/components/NumberInput'
+import styles from '../BasicInformation.less'
+import style from '@/global.less'
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatUtils'
+
+const { Item: FormItem } = Form
+const { TextArea } = Input
+const dictData = datadictionary
+
+//新增表单
+let getDeptTreeBySelectTree
+let getOrganTreeBySelectTree
+
+const PersonnelCreateForm = (props => {
+    const [form] = Form.useForm()
+
+    const {
+        modalVisible,
+        handleAdd,
+        handleModalVisible,
+        loading,
+        dispatch,
+        selectDeptTree,
+        selectOrganTree
+    } = props
+
+    // 清空和初始化逻辑可保留
+    useEffect(() => {
+        form.resetFields();
+    }, [modalVisible])
+
+    const okHandle = () => {
+        form.validateFields()
+            .then(fieldsValue => {
+                form.resetFields()
+                handleAdd(fieldsValue)
+            })
+            .catch(() => { })
+    }
+
+    const afterClose = () => {
+        form.resetFields();
+    }
+
+    return (
+        <Modal
+            width={550}
+            bodyStyle={{ minHeight: '200px' }}
+            className={styles.createForm}
+            centered
+            destroyOnClose
+            title='新增人员'
+            open={modalVisible}
+            onOk={okHandle}
+            onCancel={() => handleModalVisible()}
+            afterClose={afterClose}
+            confirmLoading={loading}
+            footer={[
+                <button
+                    key="cancel"
+                    onClick={() => handleModalVisible()}
+                    className={styles['modal-cancel-btn']}
+                >取消</button>,
+                <button
+                    key="submit"
+                    onClick={okHandle}
+                    className={styles['modal-ok-btn']}
+                >确定</button>
+            ]}
+        >
+            <Form
+                form={form}
+                requiredMark={false}
+                style={{ marginTop: 30 }}
+            >
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="姓　　名"
+                            name="name"
+                            rules={[{ required: true, message: '请输入姓名' }]}
+                        >
+                            <Input placeholder="输入姓名" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="身份证号"
+                            name="idNumber"
+                            rules={[{ required: true, message: '请输入身份证号' }]}
+                        >
+                            <Input placeholder="请输入身份证号" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="所属公司"
+                            name="company"
+                            rules={[{ required: true, message: '请输入公司名' }]}
+                        >
+                            <Input placeholder="请输入公司名" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            label="联系方式"
+                            name="phone"
+                            rules={[{ required: true, message: '请输入手机号' }]}
+                        >
+                            <Input placeholder="请输入手机号" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="人员分类"
+                            name="personType"
+                            rules={[{ required: true, message: '请选择人员分类' }]}
+                        >
+                            <Select placeholder="请选择" options={[]} />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="合同状态"
+                            name="contractStatus"
+                            rules={[{ required: true, message: '请选择合同状态' }]}
+                        >
+                            <Select placeholder="请选择" options={[]} />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    )
+})
+
+export default PersonnelCreateForm

src/pages/business_basicinformation/form/StaffSheetRenderAdvancedForm.js

@@ -0,0 +1,113 @@
+import { useEffect } from 'react'
+import { Button, Col, Form, Input, Row } from 'antd'
+import { UpOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons'
+import SelectDeptTree from '@/components/SelectDeptTree'
+import SelectOrganTree from '@/components/SelectOrganTree'
+import style from '@/global.less'
+
+const { Item: FormItem } = Form
+let getDeptTreeBySelectTree
+let getOrganTreeBySelectTree
+
+const StaffSheetRenderAdvancedForm = (props) => {
+    const [form] = Form.useForm()
+    const { dispatch, handleSearch, handleFormReset, toggleForm, selectDeptTree, selectOrganTree, params } = props
+
+    useEffect(() => {
+        form.setFieldsValue({
+            user_name: params?.user_name,
+            user_name_cn: params?.user_name_cn,
+            deptname: params?.deptname,
+            orgname: params?.orgname,
+        })
+    }, [params])
+
+    const onFinish = values => {
+        // if (getDeptTreeBySelectTree) {
+        //     values.dept_code = getDeptTreeBySelectTree.dept_code
+        //     values.deptname = getDeptTreeBySelectTree.title
+        // }
+
+        if (getOrganTreeBySelectTree) {
+            values.org_code = getOrganTreeBySelectTree.org_code
+            values.orgname = getOrganTreeBySelectTree.title
+        }
+
+        handleSearch(values)
+    }
+
+    const myHandleFormReset = () => {
+        form.resetFields()
+        handleFormReset()
+    }
+
+    const selectedDeptTreeValue = (deptRecord) => {
+        getDeptTreeBySelectTree = deptRecord
+    }
+
+    const selectedOrganTreeValue = (orgRecord) => {
+        getOrganTreeBySelectTree = orgRecord
+    }
+
+    const parentDeptTreeMethod = {
+        dispatch: dispatch,
+        selectDeptTree: selectDeptTree,
+        selectedDeptTreeValue: selectedDeptTreeValue
+    }
+
+    const parentOrganTreeMethod = {
+        dispatch: dispatch,
+        selectOrganTree: selectOrganTree,
+        selectedOrganTreeValue: selectedOrganTreeValue
+    }
+
+    return (
+        <Form form={form} onFinish={onFinish} layout='inline'>
+            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
+                <Col md={8} sm={24}>
+                    <FormItem label='用户名' name='user_name'>
+                        <Input placeholder='请输入' />
+                    </FormItem>
+                </Col>
+
+                <Col md={8} sm={24}>
+                    <FormItem label='用户名称' name='user_name_cn'>
+                        <Input placeholder='请输入' />
+                    </FormItem>
+                </Col>
+
+                <Col md={8} sm={24}>
+                    <FormItem label='机构代码' name='orgname'>
+                        <SelectOrganTree {...parentOrganTreeMethod} />
+                    </FormItem>
+                </Col>
+            </Row>
+
+            <Row gutter={{md: 8, lg: 24, xl: 48}} className={style.searchBox}>
+                {/*<Col md={8} sm={24}>*/}
+                {/*    <FormItem label='部门名称' name='deptname'>*/}
+                {/*        <SelectDeptTree placeholder={'请选择部门'} {...parentDeptTreeMethod} />*/}
+                {/*    </FormItem>*/}
+                {/*</Col>*/}
+
+                <Col md={24} sm={24}>
+                    <div className={style.searchBtn}>
+                        <Button type='primary' htmlType='submit'>
+                            查询
+                        </Button>
+
+                        <Button onClick={myHandleFormReset}>
+                            重置
+                        </Button>
+
+                        <a onClick={() => toggleForm(form)}>
+                            收起 <UpOutlined />
+                        </a>
+                    </div>
+                </Col>
+            </Row>
+        </Form>
+    )
+}
+
+export default StaffSheetRenderAdvancedForm

src/pages/business_basicinformation/form/StaffSheetRenderSimpleForm.js

@@ -0,0 +1,81 @@
+import { useEffect } from 'react'
+import {Button, Col, Form, Input, Row, DatePicker, Select} from 'antd'
+import {DownOutlined, RedoOutlined, SearchOutlined} from '@ant-design/icons'
+import style from '@/global.less'
+import dayjs from 'dayjs'
+const { Item: FormItem } = Form
+
+const StaffSheetRenderSimpleForm = (props) => {
+    const [form] = Form.useForm()
+    const { handleSearch, handleFormReset, toggleForm, params } = props
+
+    useEffect(() => {
+        form.setFieldsValue({
+            user_name: params?.user_name,
+            user_name_cn: params?.user_name_cn,
+        })
+    }, [params])
+
+    const onFinish = values => {
+        handleSearch(values)
+    }
+
+    const myHandleFormReset = () => {
+        form.resetFields()
+        handleFormReset()
+    }
+
+    return (
+        <Form form={form} onFinish={onFinish} layout='inline'>
+            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
+                <Col md={4} sm={24}>
+                    <FormItem label='我的查询条件' name='wdcxtj'>
+						<Select
+						  placeholder='请选择'
+						  options={[]}
+						/>
+                    </FormItem>
+                </Col>
+				
+				<Col md={4} sm={24}>
+				    <FormItem label='日期' name='rq' rules={[{ required: true, message: '请选择日期!' }]}>
+				        <DatePicker defaultValue={dayjs('2025-04-10', 'YYYY-MM-DD')} format='YYYY-MM-DD' />
+				    </FormItem>
+				</Col>
+				
+                <Col md={4} sm={24}>
+                    <FormItem label='工作地点' name='gzdd'>
+                        <Input placeholder='请输入' />
+                    </FormItem>
+                </Col>
+			
+				
+				<Col md={4} sm={24}>
+				    <FormItem label='工号' name='gh'>
+				        <Input placeholder='请输入' defaultValue="123456"/>
+				    </FormItem>
+				</Col>
+				
+				<Col md={4} sm={24}>
+				    <FormItem label='名称' name='gh'>
+				        <Input placeholder='请输入'/>
+				    </FormItem>
+				</Col>
+
+                <Col md={4} sm={24}>
+                    <div className={style.searchBtn}>
+                        <Button type='primary' htmlType='submit'>
+                            查询
+                        </Button>
+
+                        <Button onClick={myHandleFormReset}>
+                            重置
+                        </Button>
+                    </div>
+                </Col>
+            </Row>
+        </Form>
+    )
+}
+
+export default StaffSheetRenderSimpleForm

src/pages/business_hiddentrouble/HiddenTrouble.js

@@ -0,0 +1,32 @@
+import MyCard from "@/pages/business_hiddentrouble/component/MyCard";
+import {Col, Row, Tabs} from "antd";
+import HiddenDangerInspection from "@/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
+import styles from './HiddenTrouble.less'
+import HiddenDangerRighted from "@/pages/business_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted";
+import HiddenDangerCount from "@/pages/business_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount";
+
+const items = [
+    {
+        key: '1',
+        label: '隐患检查',
+        children: <HiddenDangerInspection key={1}/>,
+    },
+    {
+        key: '2',
+        label: '隐患整改',
+        children: <HiddenDangerRighted key={2}/>
+    },
+    {
+        key: '3',
+        label: '隐患统计',
+        children: <HiddenDangerCount key={3}/>,
+    },
+];
+const HiddenTrouble = () => {
+    return (
+        <>
+            <Tabs className={styles['custom-tabs']} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10}   />
+        </>
+    )
+}
+export default HiddenTrouble

src/pages/business_hiddentrouble/HiddenTrouble.less

@@ -0,0 +1,43 @@
+/* 移除下滑线 */
+.custom-tabs .ant-tabs-ink-bar {
+  display: none !important;
+}
+
+/* 未选中状态 */
+.custom-tabs {
+  .ant-tabs-tab {
+    background: #f0f0f0 !important;
+    border: none !important;
+    border-radius: 6px !important;
+    margin-right: 8px !important;
+    padding: 8px 16px !important;
+    transition: all 0.3s ease !important;
+  }
+}
+
+/* 选中状态 - 背景变为蓝色 */
+.custom-tabs  {
+  :global(.ant-tabs-tab-active) {
+    background: #2E4CD4 !important;
+  }
+}
+
+/* 选中状态 - 文字变为白色 */
+.custom-tabs :global(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  color: white !important;
+  font-weight: 500 !important;
+}
+
+/* 移除底部边框 */
+.custom-tabs .ant-tabs-nav::before {
+  border-bottom: none !important;
+}
+
+/* 悬停效果 */
+.custom-tabs .ant-tabs-tab:hover {
+  background: #e6e6e6 !important;
+}
+
+.custom-tabs .ant-tabs-tab-active:hover {
+  background: #40a9ff !important;
+}

src/pages/business_hiddentrouble/component/MyCard.js

@@ -0,0 +1,325 @@
+import Icon from "antd/es/icon";
+import {Col, Pagination, Row, Table} from "antd";
+import {Descriptions} from "antd";
+import * as echarts from 'echarts';
+import {useEffect, useRef} from "react";
+
+const HourglassSvg=()=>{
+    return (
+        <svg width="21px" height="33px" fill="currentColor" viewBox="0 0 1024 1024">
+            <title>hourglass icon</title>
+            <path
+                d="M768 832h-512c-17.6 0-32-14.4-32-32s14.4-32 32-32h64v-192c0-52.8 33.6-99.2 84-116.8-50.4-17.6-84-64-84-116.8v-192h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h512c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64v192c0 52.8-33.6 99.2-84 116.8 50.4 17.6 84 64 84 116.8v192h64c17.6 0 32 14.4 32 32s-14.4 32-32 32zM320 192v192c0 70.4 57.6 128 128 128s128-57.6 128-128v-192h-256zM448 768c-70.4 0-128-57.6-128-128v-192h256v192c0 70.4-57.6 128-128 128z"/>
+        </svg>
+    )
+}
+const HourglassIcon=(props)=>{
+    return(
+        <Icon component={HourglassSvg} {...props}></Icon>
+    )
+}
+
+const MyCard = (props) => {
+    return (
+        <div style={{
+            // width: '100%',
+            // height: '134px',
+            borderRadius: '5px',
+            backgroundColor: 'white',
+            padding: '20px 20px',
+            boxSizing: 'border-box',
+            display:'flex',
+            justifyContent:'space-between'
+        }}>
+            <div>
+                <div>{props.title}</div>
+                <div style={{fontWeight: '600', fontSize: '18px', }}>{props.num}</div>
+                {props.flag === 1 && <div style={{color: '#44BB5F', fontSize: '14px'}}>
+                    {props.grow === 1 ? <>⬆</> : <>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+            </div>
+            <div style={{color:props.color,height:'53px',width:'53px',backgroundColor:props.backgroundColor,borderRadius:'10px',display:'flex',justifyContent:'center',alignItems: 'center'}}>
+                <HourglassSvg ></HourglassSvg>
+            </div>
+        </div>
+    )
+}
+
+
+// 环形图
+const items = [
+    {
+        key: '1',
+        children: '设备安全',
+        color:'#868BF9',
+    },
+    {
+        key: '2',
+        children: '电气安全',
+        color:'#F29629',
+    },
+    {
+        key: '3',
+        children: '消防安全',
+        color:'#FFD85A',
+    },
+    {
+        key: '4',
+        children: '工艺安全',
+        color:'#5ED6BE',
+    },
+    {
+        key: '5',
+        children: '储罐专业',
+        color:'#00AAFF',
+    },
+    {
+        key: '6',
+        children: '其他',
+        color:'#5FDCF7',
+    },
+];
+export const PieChart=(props)=>{
+    const chartRef=useRef(null)
+    const data=[
+        { value: 5, name: '设备安全' ,itemStyle:{color:'#868BF9'}},
+        { value: 5, name: '电气安全',itemStyle:{color:'#F29629'} },
+        { value: 10, name: '消防安全' ,itemStyle:{color:'#FFD85A'}},
+        { value: 20, name: '工艺安全',itemStyle:{color:'#5ED6BE'} },
+        { value: 30, name: '储罐专业',itemStyle:{color:'#00AAFF'} },
+        { value: 30, name:'其他',itemStyle:{color:'#5FDCF7'}}
+    ]
+    useEffect(() => {
+        const chart=echarts.init(chartRef.current)
+        const option = {
+            legend: {
+                show:false,
+                orient: 'vertical',
+                x: 'left',
+                data: ['设备安全', '电气安全', '消防安全', '工艺安全', '储罐专业','其他']
+            },
+            grid:{
+                top: 20,
+                bottom: 20,
+                left: 20,
+                right: 20,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        formatter: '{d}%',
+                        position: 'outsider',
+                    },
+                    labelLine: {
+                        show: true
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            position:'center',
+                            fontSize: '15',
+                            fontWeight: 'bold',
+                            formatter: function(params) {
+                                return `${params.name}\n${params.percent}%`;
+                            },
+
+                        }
+                    },
+                    data:data,
+                },
+            ]
+        };
+        chart.setOption(option)
+        // 响应式调整
+        const handleResize = () => {
+            chart.resize();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // 清理函数
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            chart.dispose();
+        };
+    }, []);
+
+    return(
+        <div style={{backgroundColor:'#fff',borderRadius:'5px',padding:'15px',boxSizing:'border-box'}}>
+            <Row>
+                <Col span={9}>
+                    <Descriptions
+                        title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> {props.title}</>}
+                        column={2}
+                    >
+                        {items.map((item)=>{
+                            return(
+                                <Descriptions.Item>
+                                    <div style={{display:'flex',alignItems:'center',fontSize:'12px'}}>
+                                        <span style={{borderBottom:'4px solid',width:'10px',marginRight:'5px',borderBottomColor:item.color }}></span>
+                                        {item.children}
+                                    </div>
+                                </Descriptions.Item>
+                            )
+                        })}
+
+
+                     </Descriptions>
+
+                </Col>
+                <Col span={15}>
+                    <div ref={chartRef}
+                        style={{width:'100%',height:'100%',}}
+                         key={2}
+                    >
+
+                    </div>
+                </Col>
+            </Row>
+        </div>
+    )
+}
+
+// 柱状图
+
+export const BarChart=()=>{
+    const chartRef=useRef(null)
+    const data=[]
+    useEffect(() => {
+        const chart =echarts.init(chartRef.current)
+        const option = {
+            grid:{
+                top:20,
+                bottom:20,
+                right:30,
+                left:30,
+            },
+            xAxis:{
+                type: 'category',
+                data:['每日','每周','每月','每季度','每半年','每年','季节性','专项'],
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                        color:'#D5E2FF'
+                    }
+                },
+                axisLabel:{
+                    show:true,
+                    position:'bottom',
+                    color:'#333'
+                },
+
+            },
+            yAxis:{
+                type:'value',
+
+                axisLine:{
+                    show:true,
+                    min:0,
+                    lineStyle:{
+                        color:'#D5E2FF'
+                    }
+
+                },
+                axisLabel: {
+                    show:true,
+                    color:'#333'
+                },
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                        color:'#D5E2FF',
+                        type:'dashed'
+                    }
+                },
+                nameTextStyle:{
+                    color:'#000',
+                    fontSize:16,
+                    fontWeight:'600',
+                }
+            },
+            series:[
+                {
+                    name: '数据系列1',
+                    type: 'bar', // 柱状图
+                    data: [120, 200, 150, 80, 70,123,70,90], // 数据值
+                    barWidth: '20%', // 柱子宽度
+                    itemStyle: {
+                        color: '#007BFF', // 柱子颜色
+                        borderRadius: [4, 4, 0, 0] ,// 柱子圆角
+                    },
+                    label: {
+                        show: true,
+                        position: 'top', // 数据标签位置
+                        color: '#333'
+                    },
+                    emphasis: { // 高亮样式
+                        itemStyle: {
+                            color: '#7491db'
+                        }
+                    }
+                }
+            ]
+
+        }
+        chart.setOption(option)
+        const handleResize = () => {
+            chart.resize();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // 清理函数
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            chart.dispose();
+        };
+    })
+    return(
+        <div  style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'15px'}}>
+            <div style={{fontSize:'16px',fontWeight:'600'}}><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>检查频次分布</div>
+            <div ref={chartRef} style={{width:'100%',height:'126.84px',}}>
+
+            </div>
+        </div>
+
+    )
+}
+
+export const MyTable=(props)=>{
+    const {dataSource,columns}=props
+    return (
+        <>
+            <Table
+                dataSource={dataSource}
+                columns={columns}
+                pagination={{
+                    total:25,
+                    showSizeChanger:true,
+                    showQuickJumper:true,
+                    showTotal:() => '共 25 条',
+                    pageSizeOptions:[5,10,20,50,100],
+                    defaultPageSize:5,
+                    style:{
+                        marginTop:50
+                    }
+                }}
+                style={{width:'100%'}}
+            />
+
+        </>
+    )
+}
+
+
+export default MyCard;

src/pages/business_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount.js

@@ -0,0 +1,100 @@
+import {Col, List, Row} from "antd";
+import MyCard from "@/pages/business_hiddentrouble/component/MyCard";
+
+const headerList=[
+    {
+        title:'总隐患数',
+        num:'1489',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#E5EEFE',
+        color:'#1269FF',
+    },
+    {
+        title:'已整改隐患',
+        num:'986',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#D9F8E8',
+        color:'#1DCE74',
+    },
+    {
+        title:'整改率',
+        num:'86%',
+        data:'8',
+        flag:2,
+        grow:0,
+        backgroundColor:'#FFF3E9',
+        color:'orange',
+    },
+    {
+        title:'按期整改率',
+        num:'89%',
+        data:'2',
+        flag:3,
+        grow:0,
+        backgroundColor:'#FFE6E8',
+        color:'#FF3E48',
+    }
+]
+const data=[
+    {name:'Q3设备故障类隐患',tip:'占比最高',num:'45%'},
+    {name:'Q2安全防护隐患',tip:'显著下降',num:'32%'},
+    {name:'Q4电器隐患',tip:'持续改善',num:'28%'},
+    {name:'全年平均整改周期',tip:'同比缩短',num:'7天'},
+]
+const TrendAnalysis=()=>{
+    return(
+        <div style={{backgroundColor:'#fff',padding:'15px'}}>
+            <Row gutter={10}>
+                <Col span={18}>1</Col>
+                <Col span={6}>
+                    {data.map((item,index)=>{
+                        return(
+                            <div style={{display:'flex',justifyContent:'space-between'}}>
+                                <div>
+                                    <div style={{fontSize:'16px',fontWeight:'500',color:'#333'}}>{item.name}</div>
+                                    <div style={{fontSize:'12px',color:'#666666'}}>{item.tip}</div>
+                                </div>
+                                <div style={{display:'flex',alignItems:'center'}}>
+                                    {item.num}
+                                </div>
+                            </div>
+                        )
+                    })}
+                </Col>
+            </Row>
+        </div>
+    )
+}
+
+const HiddenDangerCount=()=>{
+    return (
+        <>
+            <header style={{overflow: 'hidden', marginBottom: '10px'}}>
+                <Row gutter={10}>
+                    {headerList.map((item, index) => {
+                        return <Col span={6}><MyCard {...item}></MyCard></Col>
+                    })}
+                </Row>
+            </header>
+            <section style={{overflow: 'hidden', marginBottom: '10px'}}>
+                <Row gutter={10}>
+                    <Col span={16}>
+                        <TrendAnalysis></TrendAnalysis>
+                    </Col>
+                    <Col span={8}>1</Col>
+                </Row>
+            </section>
+            <footer style={{overflow: 'hidden'}}>
+                <Row gutter={10}>
+                    <Col span={15}>2</Col>
+                    <Col span={9}>2</Col>
+                </Row>
+            </footer>
+        </>
+    )
+}
+export default HiddenDangerCount

src/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection.js

@@ -0,0 +1,198 @@
+import {Card, Col, Row, Input, Space, Select, Upload, Button, message, Tag} from "antd";
+import './hiddenDangerInspection.less'
+import MyCard, {BarChart, MyTable, PieChart} from "@/pages/business_hiddentrouble/component/MyCard";
+import {ExportOutlined, UploadOutlined} from "@ant-design/icons";
+import {render} from "react-dom";
+const { Search } = Input;
+
+const dataList=[
+    {
+        title:'隐患总数',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#E5EEFE',
+        color:'#1269FF',
+    },
+    {
+        title:'已整改隐患',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#D9F8E8',
+        color:'#1DCE74',
+    },
+    {
+        title:'整改中隐患',
+        num:'169',
+        data:'8',
+        flag:2,
+        grow:0,
+        backgroundColor:'#FFF3E9',
+        color:'orange',
+    },
+    {
+        title:'超期未整改',
+        num:'169',
+        data:'2',
+        flag:3,
+        grow:0,
+        backgroundColor:'#FFE6E8',
+        color:'#FF3E48',
+    }
+]
+export const Select1=()=>{
+    return(
+        <Select defaultValue="所有领域" style={{ width: 120 }}>
+            <Select.Option value="sample" >所有领域</Select.Option>
+        </Select>
+    )
+}
+export const Select2=()=>{
+    return(
+        <Select defaultValue="所有频次" style={{ width: 120 }}>
+            <Select.Option value="sample">所有频次</Select.Option>
+        </Select>
+    )
+}
+const props = {
+    name: 'file',
+    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+    headers: {
+        authorization: 'authorization-text',
+    },
+    onChange(info) {
+        if (info.file.status !== 'uploading') {
+            console.log(info.file, info.fileList);
+        }
+        if (info.file.status === 'done') {
+            message.success(`${info.file.name} file uploaded successfully`);
+        } else if (info.file.status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+        }
+    },
+};
+export const Import=()=>{
+  return(
+        <Upload {...props}>
+            <Button icon={<UploadOutlined />} style={{color:'#2E4CD4'}}>导入</Button>
+        </Upload>
+      )
+
+
+}
+export const Export=()=>{
+    return(
+        <Button icon={<ExportOutlined/>} style={{color:'#2E4CD4'}}>导出</Button>
+    )
+}
+export const levelList= {
+    '一般隐患':['#DAF3FF','#00AAFA'],
+    '中等隐患':['#FFF3E9','#FF8800'],
+    '极高隐患':['#FFE0E2','#FF3E48'],
+}
+
+const columns=[
+    {align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
+    {align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
+    {align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{
+
+        return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
+    }},
+    {align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
+    {align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
+    {align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
+    {align:'center',title:'治理类型',dataIndex:'type',key:'type'},
+    {align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
+    {align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
+    {align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
+    {align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
+    {align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
+        return <Button type={"link"}>详情</Button>
+    }},
+]
+
+const dataSource=[
+    {key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+
+]
+
+
+const HiddenDangerInspection=()=>{
+    return(
+        < >
+            <header style={{overflow: 'hidden',marginBottom:'10px'}}>
+                <Row gutter={10}>
+                    {dataList.map((item) => {
+                        return <Col span={6}><MyCard {...item}> </MyCard></Col>
+                    })}
+                </Row>
+            </header>
+            <section style={{overflow: 'hidden',marginBottom:'10px'}}>
+                <Row gutter={10}>
+                    <Col span={8}>
+                        <PieChart title={'检查领域分布'}></PieChart>
+                    </Col>
+                    <Col span={16}>
+                        <BarChart></BarChart>
+                    </Col>
+                </Row>
+            </section>
+            <footer>
+                <div style={{width:'100%',backgroundColor:'#fff',padding:'15px'}}>
+                    <Space direction='vertical' size={"middle"} style={{width:'100%'}}>
+                        <Row >
+                            <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
+                            <span style={{fontSize:'16px',fontWeight:'600'}}>检查频次分布</span>
+                        </Row>
+                        <Row style={{display:'flex',justifyContent:'space-between'}}>
+                                <div>
+                                    <Search placeholder="搜素检查项" style={{ width: 300 }} />
+                                </div>
+                                <div>
+                                    <Space>
+                                        <Select1></Select1>
+                                        <Select2></Select2>
+                                        <Import></Import>
+                                        <Export></Export>
+                                    </Space>
+                                </div>
+                        </Row>
+                        <Row>
+                            <MyTable dataSource={dataSource} columns={columns}></MyTable>
+                        </Row>
+                    </Space>
+                </div>
+            </footer>
+
+
+        </>
+    )
+}
+export default HiddenDangerInspection

src/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection.less

@@ -0,0 +1,3 @@
+
+
+

src/pages/business_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted.js

@@ -0,0 +1,318 @@
+import {Button, Card, Col, Input, Row, Space, Steps, Tag} from "antd";
+import MyCard, {MyTable, PieChart} from "@/pages/business_hiddentrouble/component/MyCard";
+import {useEffect, useRef} from "react";
+import img1 from '../../../../assets/img/stepOne.png'
+import img2 from '../../../../assets/img/stepTwo.png'
+import img3 from '../../../../assets/img/stepThree.png'
+import img4 from '../../../../assets/img/stepFour.png'
+
+import echarts from "echarts/lib/echarts";
+import {
+    Export, Import,
+    levelList,
+    Select1, Select2
+} from "@/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
+import './hiddenDangerRighted.less'
+const { Search } = Input;
+const dataList=[
+    {
+        title:'待整改隐患',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#E5EEFE',
+        color:'#1269FF',
+    },
+    {
+        title:'整改中隐患',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#D9F8E8',
+        color:'#1DCE74',
+    },
+    {
+        title:'已完成整改',
+        num:'169',
+        data:'8',
+        flag:2,
+        grow:0,
+        backgroundColor:'#FFF3E9',
+        color:'orange',
+    },
+    {
+        title:'整改完成率',
+        num:'89%',
+        data:'2',
+        flag:3,
+        grow:0,
+        backgroundColor:'#FFE6E8',
+        color:'#FF3E48',
+    }
+]
+
+
+const columns=[
+    {align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
+    {align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
+    {align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{
+
+            return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
+        }},
+    {align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
+    {align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
+    {align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
+    {align:'center',title:'治理类型',dataIndex:'type',key:'type'},
+    {align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
+    {align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
+    {align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
+    {align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
+    {align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
+            return <div style={{display:"flex"}}>
+                <Button type={"link"}>详情</Button>
+                <Button type={"link"}>验收</Button>
+            </div>
+        }},
+]
+
+const dataSource=[
+    {key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
+
+]
+
+
+
+const Qiu=(props)=>{
+    return(
+        <div className={'qiu'}>
+            {props.num}
+        </div>
+    )
+}
+const items=[
+    {'0': img1},
+    {'1': img2},
+    {'2': img3},
+    {'3': img4},
+
+]
+
+const TrendChart=()=>{
+    const TrendChart=useRef(null)
+    useEffect(() => {
+        const chart=echarts.init(TrendChart.current);
+        const option={
+            grid:{
+                bottom:25,
+                top:20,
+            },
+            legend:{
+                show:true,
+                left:'50%',
+                top:0,
+                icon: 'path://M0,0 L20,0',
+                itemStyle:{
+                    color:'#00A0E9',
+                }
+            },
+            xAxis:{
+                type:'category',
+                data:['3月','4月','5月','6月','7月','8月'],
+                axisLabel:{
+                    color:'#000',
+                },
+                axisLine:{
+                    lineStyle:{
+                        color:'#00A0E9',
+                        type:'dashed',
+                    }
+                },
+                boundaryGap: false, // 关键
+                axisTick: {
+                    show: true,
+                    alignWithLabel: true, // 关键
+                    inside: true, // 刻度朝外
+                    length: 100, // 足够长的长度（根据图表高度调整）
+                    lineStyle: {
+                        color: '#cccccc',
+                        width: 1,
+                        type: 'dashed',
+                    }
+                },
+            },
+            yAxis:{
+                type:'value',
+                axisLabel:{
+                    color:'#000',
+                    type:'dashed',
+                },
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                        color:'#00A0E9',
+                        type:'dashed',
+                    }
+                },
+                splitLine:{
+                    lineStyle:{
+                        color:'#00A0E9',
+                        type:'dashed'
+                    }
+                }
+            },
+            series:[
+                {
+                    name:'整改完成率',
+                    data:[120,200,150,80,70,110],
+                    type:'line',
+                    smooth:true,
+                    lineStyle:{
+                        color:'#00A0E9'
+                    },
+                    areaStyle:{
+                        color:{
+                            type:'linear',
+                            x:0,
+                            y:0,
+                            x2:0,
+                            y2:1,
+                            colorStops:[
+                                {offset:0,color:'#00A0E9'},
+                                {offset:1,color:'#99D4F5 '}
+                            ]
+                        }
+                    },
+                    symbol:'none'
+                }
+            ]
+        }
+        chart.setOption(option)
+        // 响应式调整
+        const handleResize = () => {
+            chart.resize();
+        };
+        handleResize()
+        window.addEventListener('resize', handleResize);
+
+        // 清理函数
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            chart.dispose();
+        };
+    }, []);
+    return(
+        <div style={{padding:'10px',backgroundColor:'#fff',height:'100%',width:'100%'}}>
+            <div style={{fontSize:'16px',fontWeight:'600'}}>
+                <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改进度趋势
+            </div>
+            <div ref={TrendChart} style={{width:'100%',height:'136.86px'}} key={1}>
+            </div>
+        </div>
+    )
+}
+const Workflow=()=>{
+    return(
+        <div style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'10px'}}>
+            <div style={{fontSize: '16px', fontWeight: '600'}}>
+                <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改流程
+            </div>
+            <div style={{display:'flex',justifyContent:'space-around'}}>
+                {items.map((item,index)=>{
+                    return (
+                        <div key={index}>
+                            <div className={'box'}>
+                                <Qiu num={index+1}></Qiu>
+                            </div>
+                            <div style={{
+                                width: '136px',
+                                height: '111px',
+                                backgroundImage: `url(${item[index]})`
+                            }}>
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+const HiddenDangerRighted = () => {
+    return (
+        <>
+            <header style={{overflow: 'hidden', marginBottom: '10px'}}>
+                <Row gutter={10}>
+                    {dataList.map((item, index) => {
+                        return <Col span={6}><MyCard {...item}></MyCard></Col>
+                    })}
+                </Row>
+            </header>
+            <section style={{overflow: 'hidden',marginBottom:'10px'}}>
+                    <Row gutter={10}>
+                        <Col span={8}>
+                            <PieChart title={'隐患整改类型'}></PieChart>
+                        </Col>
+                        <Col span={7}>
+                            <TrendChart></TrendChart>
+                        </Col>
+                        <Col span={9}>
+                            <Workflow></Workflow>
+                        </Col>
+                    </Row>
+            </section>
+            <footer>
+                <div style={{width: '100%', backgroundColor: '#fff', padding: '15px'}}>
+                    <Space direction='vertical' size={"middle"} style={{width: '100%'}}>
+                        <Row>
+                            <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
+                            <span style={{fontSize: '16px', fontWeight: '600'}}>隐患整改列表</span>
+                        </Row>
+                        <Row style={{display: 'flex', justifyContent: 'space-between'}}>
+                            <div>
+                                <Search placeholder="搜素检查项" style={{width: 300}}/>
+                            </div>
+                            <div>
+                                <Space>
+                                    <Select1></Select1>
+                                    <Select2></Select2>
+                                    <Import></Import>
+                                    <Export></Export>
+                                </Space>
+                            </div>
+                        </Row>
+                        <Row>
+                            <MyTable dataSource={dataSource} columns={columns}></MyTable>
+                        </Row>
+                    </Space>
+                </div>
+            </footer>
+        </>
+    )
+}
+export default HiddenDangerRighted;

src/pages/business_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted.less

@@ -0,0 +1,13 @@
+.qiu{
+  width: 27px;
+  height: 27px;
+  border-radius: 50%;
+  background-color:blue;
+  color: #fff;
+  text-align: center;
+  line-height: 27px;
+}
+.box{
+  display: flex;
+  justify-content: center;
+}

src/pages/nav_system_content/SystemContentList.js

@@ -116,6 +116,18 @@ const SystemContentList = (props) => {
                 />,
                 "key": "/topnavbar00/business/envmonitoring",
                 "label": "环保监测管理"
+            },
+            {
+                "path": "/topnavbar00/business/basicinformation",
+                icon: <img src={fireHydrant1} alt="安全管理基础信息" style={{ width: '16px', height: '16px' }} />,
+                "key": "/topnavbar00/business/basicinformation",
+                "label": "安全管理基础信息"
+            },
+            {
+                "path": "/topnavbar00/business/hiddentrouble",
+                icon: <img src={risk} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
+                "key": "/topnavbar00/business/hiddentrouble",
+                "label": "隐患排查"
             }
         ]
         setMenuItems(fixedMenuItems)

src/pages/topnavbar/TopNavBar.js

@@ -20,7 +20,11 @@ const menuItem = [
   {
     label: '环保检测管理',
     key: '/topnavbar00/business/envmonitoring',
-  }
+  },
+  {
+    label: '隐患排查',
+    key: '/topnavbar00/business/hiddentrouble',
+  },
 ]
 
 const TopNavBar = (props) => {