dq-fms/src/pages/business_basic/module/ResponsibilityImplementation.js

import React from 'react'; 
import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import { PhoneOutlined, IdcardOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './ResponsibilityImplementation.less';

import upload from '@/assets/business_basic/upload.png';
import download from '@/assets/business_basic/download.png';
import fire_fighting1 from '@/assets/business_basic/fire_fighting1.png';
import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
import frameIcon from '@/assets/business_basic/Frame.png';
import background1 from '@/assets/business_basic/background1.png';

const ResponsibilityImplementation = () => {  

    // 搜索处理函数
    const onSearch = (value) => {
        console.log('搜索内容:', value);
        // 这里可以添加实际的搜索逻辑
    };

    const columns = [
        {
            title:"编号",
            dataIndex:"id",
            key:"id",
            width:60,
        },
        {
            title:"责任区域",
            dataIndex:"zrqy",
            key:"zrqy",
            width:120,
        },
        {
            title:"设备型号",
            dataIndex:"sbxh",
            key:"sbxh",
            width:120,
        },
        {
            title:"危险源类型",
            dataIndex:"wxlylx",
            key:"wxlylx",
            width:120,
        },
        {
            title:"责任人",
            dataIndex:"zrr",
            key:"zrr",
            width:120,
        },
        {
            title:"联系方式",
            dataIndex:"lxfs",
            key:"lxfs",
            width:120,
        },
        {
            title:"巡检频率",
            dataIndex:"xjpl",
            key:"xjpl",
            width:120,
        },
        {
            title:"最近巡检",
            dataIndex:"zjxj",
            key:"zjxj",
            width:120,
        },
        {
            title:"状态",
            dataIndex:"zt",
            key:"zt",
            width:120,
        },
        {
            title:"操作",
            dataIndex:"cz",
            key:"cz",
            width:120,
            render: (text, record) => {  // ======== 渲染操作列 ========
                const handleView = (record) => {  // ======== 定义查看函数 ========
                    console.log('查看记录:', record);  // ======== 打印记录信息到控制台 ========
                    // 这里可以添加查看详情的逻辑  // ======== 注释：可以添加查看详情的逻辑 ========
                };  // ======== 函数结束 ========
                
                return (  // ======== 返回按钮组件 ========
                    <Button type="link" onClick={() => handleView(record)}>查看</Button>  // ======== 查看按钮，点击时调用handleView函数 ========
                );  // ======== return语句结束 ========
            }  // ======== render函数结束 ========
        }
    ];

    // 生成20条假数据
    const generateMockData = () => {  // ======== 定义生成假数据的函数 ========
        const data = [];  // ======== 创建空数组存储数据 ========
        const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区'];  // ======== 责任区域选项 ========
        const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀'];  // ======== 设备型号选项 ========
        const statuses = ['正常', '维护中', '故障', '停用', '检修'];  // ======== 状态选项 ========
        const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二'];  // ======== 责任人姓名选项 ========
        
        for (let i = 1; i <= 20; i++) {  // ======== 循环生成20条数据 ========
            data.push({  // ======== 添加一条数据到数组 ========
                key: i.toString(),  // ======== 唯一标识 ========
                id: `WX${String(i).padStart(3, '0')}`,  // ======== 编号：WX001, WX002... ========
                zrqy: areas[Math.floor(Math.random() * areas.length)],  // ======== 随机选择责任区域 ========
                sbxh: devices[Math.floor(Math.random() * devices.length)],  // ======== 随机选择设备型号 ========
                zrr: names[Math.floor(Math.random() * names.length)],  // ======== 随机选择责任人 ========
                zt: statuses[Math.floor(Math.random() * statuses.length)],  // ======== 随机选择状态 ========
            });  // ======== 数据对象结束 ========
        }  // ======== 循环结束 ========
        return data;  // ======== 返回生成的数据数组 ========
    };  // ======== 函数结束 ========

    const tableData = generateMockData();  // ======== 调用函数生成假数据 ========

    return ( 
        <div  className={styles.containerR}> 
           {/* 警告提示框 */}
            <div className={styles.warningBox}>
                <img src={frameIcon} alt="警告" className={styles.warningIcon} />
                <span className={styles.warningText}>
                    有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
                </span>
            </div>

            <div className={styles.containerOne}> 

                <div className={styles.containerOneLeft}>
                    {/* 第一行：标题和按钮 */}
                    <div className={styles.leftTopSection}>
                        <div className={styles.titleLeft}>
                            <div className={styles.titleIcon}></div>
                            <div>组织架构图预览</div>
                        </div>
                        <div className={styles.buttonGroup}>
                            <Button className={styles.actionBtn}>
                             <img src={upload} alt="上传图表" className={styles.btnIcon} />
                                上传图表
                            </Button>
                            <Button className={styles.actionBtn}>
                                <img src={download} alt="下载" className={styles.btnIcon} />
                                下载
                            </Button>
                        </div>
                    </div>
                    
                    {/* 第二行：图片占位 */}
                    <div className={styles.leftBottomSection}>
                        <div className={styles.imagePlaceholder}>
                            <img src={fire_fighting1} alt="消防1" className={styles.imageIcon1} />
                            <div className={styles.imageRow}>
                                <img src={fire_fighting2} alt="消防2" className={styles.imageIcon2} />
                                <img src={fire_fighting3} alt="消防3" className={styles.imageIcon3} />
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div className={styles.containerOneRight}>
                    {/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
                    <div className={styles.rightTopSection}>
                        <div className={styles.rightTopLeft}>
                            <div className={styles.titleLeft}>
                                <div className={styles.titleIcon}></div>
                                <div>成员信息管理</div>
                            </div>
                        </div>
                        <div className={styles.rightTopRight}>
                            <div className={styles.searchGroup}>
                            <Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 160}} />
                                <Select
                                    defaultValue="全部组织"
                                    className={styles.organizationSelect}
                                    options={[
                                        { value: '全部组织', label: '全部组织' },
                                        { value: '技术部', label: '技术部' },
                                        { value: '生产部', label: '生产部' },
                                        { value: '安全部', label: '安全部' },
                                    ]}
                                />
                            </div>
                        </div>
                    </div>
                    
                    {/* 第二行：三个小块 */}
                    <div className={styles.rightBottomSection}>
                        <div className={styles.threeBlocksContainer}>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>
                                    <div className={styles.backgroundContainer}>
                                        {/* 第一个块：姓名和单位 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.nameText}>张明</div>
                                            <div className={styles.unitText}>东义区消防队</div>
                                        </div>
                                        
                                        {/* 第二个块：电话 */}
                                        <div className={styles.infoBlock}>
                                            <PhoneOutlined className={styles.infoIcon} />
                                            <span className={styles.infoText}>132****3847</span>
                                        </div>
                                        
                                        {/* 第三个块：身份证 */}
                                        <div className={styles.infoBlock}>
                                            <IdcardOutlined className={styles.infoIcon} />
                                            <span className={styles.infoText}>1304************10</span>
                                        </div>
                                        
                                        {/* 第四个块：职位标签 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.tagContainer}>
                                                <div className={styles.tagBlue1}>队长</div>
                                                <div className={styles.tagBlue2}>消防工程师</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第五个块：证书状态 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.tagContainer}>
                                                <div className={styles.tagBlue3}>消防工程师</div>
                                                <div className={styles.tagYellow}>证书3天后到期</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第六个块：操作按钮 */}
                                        <div className={styles.actionBlock}>
                                            <div className={styles.buttonContainer}>
                                                <Button className={styles.editBtn}>编辑</Button>
                                                <Button className={styles.deleteBtn}>删除</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>待开发</div>
                            </div>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>待开发</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  

            <div className={styles.containerTwo}>
                {/* 第一个大块：标题 */}
                <div className={styles.containerTwoTitle}>
                    <div className={styles.titleLeft}>
                        <div className={styles.titleIcon}></div>
                        <div>重大危险源安全包信息库</div>
                    </div>
                </div>
                
                {/* 第二个大块：搜索和按钮 */}
                <div className={styles.containerTwoActions}>
                    <div className={styles.searchSection}>
                        <Input placeholder="搜索危险源编号" />
                    </div>
                    <div className={styles.buttonSection}>
                        <Button>新增责任人</Button>
                        <Button>导出清单</Button>
                    </div>
                </div>
                
                {/* 第三个大块：表格 */}
                <div className={styles.containerTwoTable}>
                    <StandardTable
                        columns={columns}  // ======== 表格列配置 ========
                        data={{  // ======== 数据对象，包含list和pagination ========
                            list: tableData,  // ======== 表格数据列表 ========
                            pagination: {  // ======== 分页配置 ========
                                currentPage: 1,  // ======== 当前页码 ========
                                pageSize: 5,  // ======== 每页显示10条数据 ========
                                total: tableData.length,  // ======== 总数据条数 ========
                            }  // ======== 分页配置结束 ========
                        }}  // ======== 数据对象结束 ========
                        selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
                        onSelectRow={() => {}}  // ======== 行选择事件处理函数 ========
                        onChange={() => {}}  // ======== 表格变化事件处理函数 ========
                    /> 
                </div>
            </div>
        </div> 
    );  
}; 
export default ResponsibilityImplementation;