dq-IoTP/src/pages/business_basic/components/LicenseManagement.js

import React, { useEffect, useRef, useState } from 'react';
import { Card, Table, Tag, Space, Typography, Progress, Row, Col, Button, Input, Select } from 'antd';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './LicenseManagement.less';
import icon_echart from '@/assets/business_basic/icon_echart.svg';

const { Title } = Typography;
const { Search } = Input;
const { Option } = Select;

const LicenseManagement = () => {
    const chartRef = useRef(null);
    const [searchValue, setSearchValue] = useState('');
    const [selectedType, setSelectedType] = useState('all');

    // 图表数据
    const chartData = [
        { name: '安全生产许可证', value: 35, itemStyle: { color: '#3C7DFF' } },
        { name: '安全评估报告', value: 25, itemStyle: { color: '#FF8800' } },
        { name: '安全三同时材料', value: 20, itemStyle: { color: '#FF3E48' } },
        { name: '施工资质证书', value: 15, itemStyle: { color: '#FFC403' } },
        { name: '应急预案', value: 10, itemStyle: { color: '#22C55E' } },
        { name: '其他', value: 5, itemStyle: { color: '#31BCFF' } }
    ];

    // 初始化图表
    useEffect(() => {
        if (chartRef.current) {
            const chart = echarts.init(chartRef.current);

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    left: 'center',
                    itemWidth: 14,
                    itemHeight: 4,
                    itemGap: 10,
                    textStyle: {
                        fontSize: 12,
                        color: '#333',
                        width: 100
                    },
                    formatter: function (name) {
                        return name;
                    },
                    data: (() => {
                        // 找到最长的名称长度
                        const maxLength = Math.max(...chartData.map(item => item.name.length));
                        // 将所有名称填充到相同长度
                        return chartData.map(item => {
                            const paddingLength = maxLength - item.name.length;
                            return item.name + '　'.repeat(paddingLength);
                        });
                    })()
                },
                series: [
                    {
                        name: '证件类型分布',
                        type: 'pie',
                        radius: ['20%', '65%'],
                        center: ['50%', '38%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            // color:"red",/
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: (() => {
                            // 找到最长的名称长度
                            const maxLength = Math.max(...chartData.map(item => item.name.length));
                            // 将所有名称填充到相同长度
                            return chartData.map(item => ({
                                ...item,
                                name: item.name + '　'.repeat(maxLength - item.name.length)
                            }));
                        })()
                    }
                ]
            };

            chart.setOption(option);

            // 响应式处理
            const handleResize = () => {
                chart.resize();
            };
            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                chart.dispose();
            };
        }
    }, []);

    // 表格数据
    const tableData = [
        {
            key: '1',
            no: '01',
            name: '安全生产许可证',
            type: '资质证书',
            id: 'HQ-XF-01-001',
            authority: '应急管理部',
            validUntil: '2025-09-10',
            status: '已过期',
            statusType: 'error'
        },
        {
            key: '2',
            no: '02',
            name: '安全预评估报告',
            type: '安全三同时',
            id: 'HQ-XF-02-015',
            authority: '第三方评估机构',
            validUntil: '2025-09-10',
            status: '有效',
            statusType: 'warning'
        },
        {
            key: '3',
            no: '03',
            name: '施工资质证书',
            type: '资质证书',
            id: 'HQ-XF-03-007',
            authority: '3设计院',
            validUntil: '2025-09-10',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '4',
            no: '04',
            name: '安全标准化证书',
            type: '资质证书',
            id: 'HQ-XF-03-007',
            authority: '第三方评估机构',
            validUntil: '2025-09-10',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '5',
            no: '05',
            name: '消防验收合格证',
            type: '消防证书',
            id: 'HQ-XF-05-012',
            authority: '消防局',
            validUntil: '2026-03-15',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '6',
            no: '06',
            name: '职业健康安全管理体系认证',
            type: '管理体系认证',
            id: 'HQ-XF-06-008',
            authority: '认证机构',
            validUntil: '2026-06-20',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '7',
            no: '07',
            name: '环境管理体系认证',
            type: '管理体系认证',
            id: 'HQ-XF-07-009',
            authority: '认证机构',
            validUntil: '2026-08-25',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '8',
            no: '08',
            name: '特种设备使用登记证',
            type: '特种设备证书',
            id: 'HQ-XF-08-011',
            authority: '质量技术监督局',
            validUntil: '2026-12-10',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '9',
            no: '09',
            name: '危险化学品经营许可证',
            type: '经营许可证',
            id: 'HQ-XF-09-013',
            authority: '应急管理局',
            validUntil: '2027-01-30',
            status: '有效',
            statusType: 'success'
        },
        {
            key: '10',
            no: '10',
            name: '辐射安全许可证',
            type: '辐射安全证书',
            id: 'HQ-XF-10-014',
            authority: '生态环境部',
            validUntil: '2027-04-18',
            status: '有效',
            statusType: 'success'
        }
    ];

    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'no',
            key: 'no',
            width: 80,
        },
        {
            title: '证照名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 120,
        },
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 150,
        },
        {
            title: '发证机关',
            dataIndex: 'authority',
            key: 'authority',
            width: 150,
        },
        {
            title: '有效期至',
            dataIndex: 'validUntil',
            key: 'validUntil',
            width: 120,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 120,
            render: (text, record) => {
                const getStatusStyle = (status) => {
                    if (status === '有效') {
                        return {
                            color: '#44BB5F',
                            backgroundColor: '#D8F7DE',
                            padding: '4px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            display: 'inline-block'
                        };
                    } else if (status === '即将到期') {
                        return {
                            color: '#FF8800',
                            backgroundColor: '#FFF3E9',
                            padding: '4px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            display: 'inline-block'
                        };
                    } else if (status === '已过期') {
                        return {
                            color: '#FF3E48',
                            backgroundColor: '#FFE0E2',
                            padding: '4px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            display: 'inline-block'
                        };
                    }
                    return {};
                };

                return (
                    <span style={getStatusStyle(text)}>
                        {text}
                    </span>
                );
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            width: 120,
            render: (text, record) => {
                const handleEdit = (record) => {
                    console.log('编辑记录:', record);
                };

                const handleDelete = (record) => {
                    console.log('删除记录:', record);
                };

                return (
                    <div style={{
                        display: 'flex',
                        gap: '8px',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Button
                            onClick={() => handleEdit(record)}
                            style={{
                                color: '#2E4CD4',
                                backgroundColor: 'transparent',
                                // borderColor: '#E6E9FB',
                                fontSize: '12px',
                                height: '28px',
                                padding: '0 12px'
                            }}
                        >
                            更新
                        </Button>
                        <Button
                            onClick={() => handleDelete(record)}
                            style={{
                                color: '#2E4CD4',
                                backgroundColor: 'transparent',
                                // borderColor: '#E6E9FB',
                                fontSize: '12px',
                                height: '28px',
                                padding: '0 12px'
                            }}
                        >
                            查看
                        </Button>
                    </div>
                );
            }
        },
    ];


    return (
        <div className={styles.licenseManagementContainer}>
            <div className={styles.topSectionContainer}>

                <div className={styles.firstBlock}>
                    <div className={styles.chartHeader}>
                        <div className={styles.colorBlock}></div>
                        <span className={styles.chartTitle}>证件类型分布</span>
                    </div>
                    <div className={styles.chartContainer}>
                        <div ref={chartRef} className={styles.chart}></div>
                    </div>
                </div>

                <div className={styles.secondBlock}>
                    <div className={styles.chartHeader}>
                        <div className={styles.colorBlock}></div>
                        <span className={styles.chartTitle}>证件状态概览</span>
                    </div>
                    <div className={styles.chartContainer}>
                        {/* 上半部分：进度条和百分比 */}
                        <div className={styles.progressSection}>
                            <div className={styles.progressItem}>
                                <div className={styles.progressLabel}>有效证照</div>
                                <div className={styles.progressWrapper}>
                                    <Progress
                                        percent={50}
                                        strokeColor="#3C7DFF"
                                        trailColor="#F0F0F0"
                                        showInfo={false}
                                        className={styles.customProgress}
                                    />
                                    <span className={styles.progressPercent}>50%</span>
                                </div>
                            </div>

                            <div className={styles.progressItem}>
                                <div className={styles.progressLabel}>即将到期</div>
                                <div className={styles.progressWrapper}>
                                    <Progress
                                        percent={15}
                                        strokeColor="#FFC403"
                                        trailColor="#F0F0F0"
                                        showInfo={false}
                                        className={styles.customProgress}
                                    />
                                    <span className={styles.progressPercent}>15%</span>
                                </div>
                            </div>

                            <div className={styles.progressItem}>
                                <div className={styles.progressLabel}>已过期</div>
                                <div className={styles.progressWrapper}>
                                    <Progress
                                        percent={20}
                                        strokeColor="#FF3E48"
                                        trailColor="#F0F0F0"
                                        showInfo={false}
                                        className={styles.customProgress}
                                    />
                                    <span className={styles.progressPercent}>20%</span>
                                </div>
                            </div>

                            <div className={styles.progressItem}>
                                <div className={styles.progressLabel}>待审核材料</div>
                                <div className={styles.progressWrapper}>
                                    <Progress
                                        percent={15}
                                        strokeColor="#FF8800"
                                        trailColor="#F0F0F0"
                                        showInfo={false}
                                        className={styles.customProgress}
                                    />
                                    <span className={styles.progressPercent}>15%</span>
                                </div>
                            </div>
                        </div>

                        {/* 下半部分：数字统计 */}
                        <div className={styles.statsSection}>
                            <Row gutter={[16, 16]}>
                                <Col span={6}>
                                    <div className={styles.statItem}>
                                        <div className={styles.statNumber} style={{ color: '#3C7DFF' }}>42</div>
                                        <div className={styles.statLabel}>总证照数</div>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className={styles.statItem}>
                                        <div className={styles.statNumber} style={{ color: '#FFC403' }}>8</div>
                                        <div className={styles.statLabel}>即将过期</div>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className={styles.statItem}>
                                        <div className={styles.statNumber} style={{ color: '#FF3E48' }}>6</div>
                                        <div className={styles.statLabel}>已过期</div>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className={styles.statItem}>
                                        <div className={styles.statNumber} style={{ color: '#FF8800' }}>6</div>
                                        <div className={styles.statLabel}>待审核材料</div>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>


                <div className={styles.thirdBlock}>
                    <div className={styles.chartHeader}>
                        <div className={styles.colorBlock}></div>
                        <span className={styles.chartTitle}>临期预警</span>
                    </div>
                    <div className={styles.chartContainer}>
                        {/* 透明块容器 */}
                        <div className={styles.transparentBlock}>
                            {/* 四个垂直分布的卡片 */}
                            <div className={styles.licenseCard}>
                                <div className={styles.cardContent}>
                                    <div className={styles.licenseName}>安全生产许可证</div>
                                    <div className={styles.licenseNumber}>编号: AQXK-2023-0582</div>
                                </div>
                                <div className={styles.expiryTag}>
                                    <span className={styles.expiryText}>15天后到期</span>
                                </div>
                            </div>

                            <div className={styles.licenseCard}>
                                <div className={styles.cardContent}>
                                    <div className={styles.licenseName}>安全评估报告</div>
                                    <div className={styles.licenseNumber}>编号: AQPG-2023-0125</div>
                                </div>
                                <div className={styles.expiryTag}>
                                    <span className={styles.expiryText}>30天后到期</span>
                                </div>
                            </div>

                            <div className={styles.licenseCard}>
                                <div className={styles.cardContent}>
                                    <div className={styles.licenseName}>施工资质证书</div>
                                    <div className={styles.licenseNumber}>编号: SGZZ-2023-0089</div>
                                </div>
                                <div className={styles.expiryTag} style={{ backgroundColor: '#FFE0E2' }}>
                                    <span className={styles.expiryText} style={{ color: '#FF2526' }}>7天后到期</span>
                                </div>
                            </div>

                            <div className={styles.licenseCard}>
                                <div className={styles.cardContent}>
                                    <div className={styles.licenseName}>应急预案</div>
                                    <div className={styles.licenseNumber}>编号: YJYA-2023-0045</div>
                                </div>
                                <div className={styles.expiryTag} style={{ backgroundColor: '#FFE0E2' }}>
                                    <span className={styles.expiryText} style={{ color: '#FF2526' }}>4天后到期</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            {/* 证照列表区域 */}
            <div className={styles.listCard}>
                <div className={styles.chartHeader}>
                    <div className={styles.headerLeft}>
                        <div className={styles.colorBlock}></div>
                        <span className={styles.chartTitle}>证照列表</span>
                    </div>
                    <div className={styles.headerRight}>
                        <Search
                            placeholder="搜索证照名称或编号..."
                            value={searchValue}
                            onChange={(e) => setSearchValue(e.target.value)}
                            onSearch={(value) => console.log('搜索:', value)}
                            className={styles.searchInput}
                        />
                        <Select
                            value={selectedType}
                            onChange={setSelectedType}
                            className={styles.typeSelector}
                        >
                            <Option value="all">全部类型</Option>
                            <Option value="safety">安全生产许可证</Option>
                            <Option value="assessment">安全评估报告</Option>
                            <Option value="construction">施工资质证书</Option>
                            <Option value="emergency">应急预案</Option>
                            <Option value="other">其他</Option>
                        </Select>
                        <Button
                            type="primary"
                            className={styles.addButton}
                            onClick={() => console.log('新增证照')}
                        >
                            新增证照
                        </Button>
                    </div>
                </div>
                <StandardTable
                    columns={columns}
                    data={{
                        list: tableData,  // ======== 表格数据列表 ========
                        pagination: {  // ======== 分页配置 ========
                            currentPage: 1,  // ======== 当前页码 ========
                            pageSize: 5,  // ======== 每页显示5条数据 ========
                            total: tableData.length,  // ======== 总数据条数 ========
                        }  // ======== 分页配置结束 ========
                    }}  // ======== 数据对象结束 ========
                    selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
                    onSelectRow={() => { }}  // ======== 行选择事件处理函数 ========
                    onChange={() => { }}  // ======== 表格变化事件处理函数 ========
                    pagination={{
                        currentPage: 1,
                        pageSize: 5,
                        total: tableData.length,
                        showSizeChanger: false,
                        showQuickJumper: true,
                        showTotal: (total, range) =>
                            `共 ${total} 条`,
                        locale: {
                            jump_to: '前往',
                            page: '页',
                            items_per_page: '条/页',
                        }
                    }}
                />
            </div>
        </div>
    );
};

export default LicenseManagement;