ruoyi-react-front/components/GISModule/Sbledata.tsx

import React, {useMemo, useState} from "react";
import {Badge, Button, Col, ConfigProvider, Modal, Row, Select, Table,} from "antd"

export default function getGisSbleData(props: { height: string }) {
    // 添加设备类型筛选状态
    const [typeFilter, setTypeFilter] = useState('all');
    // 添加导航按钮状态管理
    const [activeNavButton, setActiveNavButton] = useState("realtime");
    // 设备列表状态
    const [GISdeviceModalVisible, setGISDeviceModalVisible] = useState(false)
    const [GISselectedDevice, setGISSelectedDevice] = useState(null)
    // 添加图片预览相关状态
    const [previewImage, setPreviewImage] = useState<string | null>(null);
    const [previewVisible, setPreviewVisible] = useState(false);
//gis设备列表
    const EquipmentListData = {
        columns: [
            {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        设备名称
                    </div>
                ),
                dataIndex: "name",
                width: 100,
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                        onClick={() => {
                            // 设置选中设备并打开弹窗
                            setGISSelectedDevice(record);
                            setGISDeviceModalVisible(true);
                        }}
                        onMouseOver={(e) => {
                            e.currentTarget.style.backgroundColor = '#3b2e50';  // 鼠标悬停效果
                        }}
                        onMouseOut={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';  // 恢复原背景色
                        }}
                    >
                        {text}
                    </div>
                ),
            },
            {
                title: () => (
                    <div style={{
                        // padding: '8px',
                        textAlign: 'center',
                        // color: 'white' // 统一文字颜色
                    }}>
                        <div>设备类型</div>
                        {/* 添加下拉筛选器 */}
                        <Select
                            defaultValue="all"
                            style={{width: 100}}
                            onChange={(value) => setTypeFilter(value)}
                            size="small"
                        >
                            <Select.Option value="all">全部</Select.Option>
                            <Select.Option value="电用井盖">电用井盖</Select.Option>
                            <Select.Option value="供水井盖">供水井盖</Select.Option>
                            <Select.Option value="通信井盖">通信井盖</Select.Option>
                            <Select.Option value="燃气井盖">燃气井盖</Select.Option>
                            <Select.Option value="污水井盖">污水井盖</Select.Option>
                            <Select.Option value="雨水井盖">雨水井盖</Select.Option>
                            <Select.Option value="路灯井盖">路灯井盖</Select.Option>
                            <Select.Option value="网络井盖">网络井盖</Select.Option>
                            <Select.Option value="电缆井盖">电缆井盖</Select.Option>
                            <Select.Option value="园林井盖">园林井盖</Select.Option>
                            <Select.Option value="化粪池井盖">化粪池井盖</Select.Option>

                        </Select>
                    </div>
                ),
                dataIndex: "type",
                width: 150,
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // padding: '8px 0',
                            textAlign: 'center',
                            cursor: 'pointer',
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'
                        }}
                        onClick={() => {
                            // 设置选中设备并打开弹窗
                            setGISSelectedDevice(record);
                            setGISDeviceModalVisible(true);
                        }}
                        onMouseOver={(e) => {
                            e.currentTarget.style.backgroundColor = '#3b2e50';
                        }}
                        onMouseOut={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        {text}
                    </div>
                ),
            },
            {
                title: () => (  // 将标题改为函数组件，自定义表头样式
                    <div style={{
                        // padding: '8px',
                        textAlign: 'center',
                        // color: 'white' // 统一文字颜色
                    }}>
                        设备电量
                    </div>
                ),
                dataIndex: "electricity",
                width: 100,
                render: (text) => {
                    // 根据电量值设置背景色和文字色
                    const bgColor = text < '30' ? '#fff1f0' :  // 低电量：浅红背景
                        text < '50' ? '#fffbe6' :  // 中电量：浅黄背景
                            '#f6ffed';  // 高电量：浅绿背景

                    const textColor = text < '30' ? '#f5222d' :  // 低电量：红色文字
                        text < '50' ? '#faad14' :  // 中电量：橙色文字
                            '#52c41a';  // 高电量：绿色文字

                    return (
                        <div style={{
                            backgroundColor: bgColor,  // 单元格背景色
                            color: textColor,          // 文字颜色（确保与背景对比度）
                            fontWeight: 'bold',
                            textAlign: 'center',       // 文字居中
                            borderRadius: '4px'        // 圆角边框（可选）
                        }}>
                            {text}%
                        </div>
                    );
                },
            }
        ],
        data: [{
            id: '1',
            name: '井盖一',
            type: '电用井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '2',
            name: '井盖二',
            type: '供水井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '0',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '3',
            name: '井盖三',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '4',
            name: '井盖四',
            type: '污水井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '5',
            name: '井盖五',
            type: '污水井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '6',
            name: '井盖六',
            type: '污水井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '7',
            name: '井盖七',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, , {
            id: '8',
            name: '井盖八',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '9',
            name: '井盖九',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '10',
            name: '井盖十',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '11',
            name: '井盖十一',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }, {
            id: '12',
            name: '井盖十二',
            type: '通信井盖',
            electricity: '80',
            facilityCode: '5001110103009062',
            region: '东三路米香街道',
            regionGrade: '暂无',
            locationDescription: '东三路A地铁口向西方向300米',
            competentDepartment: '东三路社区服务中心',
            ownershipUnit: 'A市住房和城乡建设委员会',
            maintenanceUnit: 'A市住房和城乡建设委员会',
            nameOfPersonInCharge: '张三',
            PhoneOfPersonInCharge: '15399665548',
            status: '1',
            manholeType: '1',
            manholeCover: '暂无',
            manholeShape: '圆形',
            constructionTime: '2025-09-15 20:57:42',
            longitude: '110.22252454',
            latitude: '27.1148554',
            manholeImage: 'manholeimg.png',
            QRCode: '/QRCode.jpg',
        }],
    }

// 使用 useMemo 动态计算筛选数据，依赖 typeFilter 和 EquipmentListData.data
    const filteredData = useMemo(() => {
        return typeFilter === 'all'
            ? EquipmentListData.data
            : EquipmentListData.data.filter(item => item.type === typeFilter);
    }, [typeFilter, EquipmentListData.data]);  // 当筛选条件或原始数据变化时重新计算


    const popUpdata = {
        columns: [
            {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        设备ID
                    </div>
                ),
                dataIndex: "codeID",
                width: 150,
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                    >
                        {text}
                    </div>
                ),
            },
            {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        检测时间
                    </div>
                ),
                dataIndex: "date",
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                    >
                        {text}
                    </div>
                ),
            },
            {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        温度（℃）
                    </div>
                ),
                dataIndex: "temperature",
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                    >
                        {text}
                    </div>
                ),
            },
            {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        角度（°）
                    </div>
                ),
                dataIndex: "angle",
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                    >
                        {text}
                    </div>
                ),
            }, {
                title: () => (
                    <div style={{
                        textAlign: 'center',
                        // color: 'white',
                        // padding: '8px' // 保持内边距一致
                    }}>
                        电压（V）
                    </div>
                ),
                dataIndex: "voltage",
                ellipsis: true,
                render: (text, record) => (  // 添加record参数获取行数据
                    <div
                        style={{
                            // backgroundColor: '#e8e8e8',
                            textAlign: 'center',
                            cursor: 'pointer',  // 显示手型光标
                            color: 'white', // 单元格字体颜色
                            fontWeight: 'bold'
                            // transition: 'background-color 0.2s'  // 过渡效果
                        }}
                    >
                        {text}
                    </div>
                ),
            }
        ],
        data: [{
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        }, {
            id: '1',  // 添加唯一 id 作为 rowKey
            date: '2016-05-02',
            codeID: '5001110103009062',
            temperature: '29',
            angle: '4',
            voltage: '3.6'
        },]
    }

    return (
        <ConfigProvider
            theme={{
                components: {
                    Table: {
                        headerBorderRadius: 0,
                    },
                },
            }}
        >
            <div style={{height: props.height}}>
                <Table
                    className="custom-table"
                    style={{
                        width: '100%',
                        height: '100%',
                        // 可选：设置表格背景透明，避免覆盖容器背景
                        backgroundColor: 'transparent'
                    }}
                    rowClassName={(record, index) => {
                        // return 'bg-[#3a3899]';
                    }}
                    columns={EquipmentListData.columns}
                    dataSource={filteredData}
                    pagination={false}
                    rowKey="id"
                    size="small"
                    scroll={{x: 200, y: 420}}
                />
                {/* GIS设备详情弹窗 */}
                <Modal
                    title="GIS设备详情"
                    open={GISdeviceModalVisible}
                    onCancel={() => setGISDeviceModalVisible(false)}
                    // footer={null}
                    width={1200}
                    className="custom-modal"
                    style={{
                        textAlign: 'center'
                    }}
                >
                    {GISselectedDevice && (
                        <div className="space-y-4" style={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}>
                            <div style={{
                                width: '50%',
                            }}>
                                <div className="space-y-4" style={{textAlign: 'left'}}>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备名称:</strong> {GISselectedDevice.name}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备类型:</strong> {GISselectedDevice.type}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备电量:</strong> {GISselectedDevice.electricity}%
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备编号:</strong>{GISselectedDevice.facilityCode}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>所属区域:</strong> {GISselectedDevice.region}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>道路等级:</strong> {GISselectedDevice.regionGrade}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>位置描述:</strong> {GISselectedDevice.locationDescription}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>主管部门:</strong> {GISselectedDevice.competentDepartment}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>权属单位:</strong> {GISselectedDevice.ownershipUnit}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>养护单位:</strong> {GISselectedDevice.maintenanceUnit}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>负责人姓名:</strong> {GISselectedDevice.nameOfPersonInCharge}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>负责人电话:</strong> {GISselectedDevice.PhoneOfPersonInCharge}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设施状态:</strong>
                                                <Badge
                                                    style={{
                                                        marginLeft: '10px'
                                                    }}
                                                    status={GISselectedDevice.status === "1" ? "success" : "error"}
                                                    text={
                                                        <span style={{
                                                            color: GISselectedDevice.status === "1" ? "#52c41a" : "#f5222d"
                                                        }}>
                                                        {GISselectedDevice.status === "1" ? "正常" : "异常"}
                                                    </span>
                                                    }
                                                />
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>是否智能井盖:</strong>
                                                <Badge
                                                    style={{
                                                        color: 'white'
                                                    }}
                                                    status={GISselectedDevice.manholeType === "0" ? "1" : "2"}
                                                    text={GISselectedDevice.manholeType === "1" ? "是" : "否"}
                                                />
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>井盖材质:</strong> {GISselectedDevice.manholeCover}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>井身形状:</strong> {GISselectedDevice.manholeShape}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>建设时问:</strong> {GISselectedDevice.constructionTime}
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>经纬度:</strong> {GISselectedDevice.longitude}°N, {GISselectedDevice.latitude}°E
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>井盖图片:</strong>
                                                <img
                                                    src={GISselectedDevice.manholeImage}
                                                    alt="井盖图片"
                                                    style={{width: '60%', marginTop: '10px', cursor: 'pointer'}}
                                                    onClick={() => {
                                                        setPreviewImage(GISselectedDevice.manholeImage);
                                                        setPreviewVisible(true);
                                                    }}
                                                />
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>二维码:</strong>
                                                {/* 二维码图片也添加点击放大功能 */}
                                                <img
                                                    src={GISselectedDevice.QRCode}
                                                    alt="二维码"
                                                    style={{width: '60%', marginTop: '10px', cursor: 'pointer'}}
                                                    onClick={() => {
                                                        setPreviewImage(GISselectedDevice.QRCode);
                                                        setPreviewVisible(true);
                                                    }}
                                                />
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            {/*GIS井盖详情第二模块*/}
                            {/*GIS井盖详情第二模块 - 修改为按钮式导航*/}
                            <div style={{width: '50%'}}>
                                {/* 按钮式导航 */}
                                <div style={{marginBottom: '16px', textAlign: 'left'}}>
                                    <Button.Group>
                                        <Button
                                            type={activeNavButton === "realtime" ? "primary" : "default"}
                                            onClick={() => setActiveNavButton("realtime")}
                                            style={{minWidth: '120px'}}
                                        >
                                            实时监测
                                        </Button>
                                        <Button
                                            type={activeNavButton === "history" ? "primary" : "default"}
                                            onClick={() => setActiveNavButton("history")}
                                            style={{minWidth: '120px'}}
                                        >
                                            历史事件
                                        </Button>
                                        <Button
                                            type={activeNavButton === "inspection" ? "primary" : "default"}
                                            onClick={() => setActiveNavButton("inspection")}
                                            style={{minWidth: '120px'}}
                                        >
                                            日常巡查
                                        </Button>

                                    </Button.Group>

                                    <div style={{
                                        marginTop: '10px',
                                        color: '#EEE',
                                        fontSize: '14px'
                                    }}>近15日数据
                                    </div>
                                </div>

                                {/* 内容区域 */}
                                <div style={{
                                    padding: '20px',
                                    border: '1px solid #e8e8e8',
                                    borderRadius: '4px',
                                    height: '500px'
                                }}>
                                    {activeNavButton === "realtime" && (
                                        <div>
                                            <Table
                                                className="RTM-Gis-table"
                                                style={{
                                                    width: '100%',
                                                    height: '100%',
                                                    // 可选：设置表格背景透明，避免覆盖容器背景
                                                    backgroundColor: 'transparent'
                                                }}
                                                columns={popUpdata.columns}
                                                dataSource={popUpdata.data}
                                                // pagination={false}
                                                rowKey="id"
                                                size="small"
                                            />
                                        </div>
                                    )}
                                    {activeNavButton === "history" && (
                                        <div>历史事件记录展示区域</div>
                                    )}
                                    {activeNavButton === "inspection" && (
                                        <div>日常巡查信息展示区域</div>
                                    )}
                                </div>
                            </div>
                        </div>
                    )}
                </Modal>
                {/* 添加图片预览弹窗 */}
                <Modal
                    visible={previewVisible}
                    footer={null}
                    onCancel={() => setPreviewVisible(false)}
                    maskClosable={true}
                    width="800px"
                    height="500px"
                    bodyStyle={{padding: 0}}
                    closable={true}
                    zIndex={10000}
                >
                    {previewImage && (
                        <img
                            src={previewImage}
                            alt="预览图片"
                            style={{
                                width: '700px',
                                // maxWidth: '90vw',
                                // maxHeight: '90vh',
                                display: 'block',
                                margin: '0 auto'
                            }}
                        />
                    )}
                </Modal>

                {/* 添加全局样式覆盖表头背景色 */}
                <style jsx global>{`
                .custom-table .ant-table-thead > tr > th,
                .custom-table .ant-table-thead > tr > td {
                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
                    color: white !important; /* 表头文字颜色 */
                    border: none !important; /* 移除边框 */
                }
                .ant-table-wrapper .ant-table-tbody >tr >th, .ant-table-wrapper .ant-table-tbody >tr >td {
                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
                    color: white !important; /* 表头文字颜色 */
                    border: none !important; /* 移除边框 */
                }
                 /* 修改Modal背景色和添加渐变边框 */
                .custom-modal .ant-modal-content {
                    background-color: rgba(58, 56, 153, 1) !important; /* 主背景色 */
                    color: white; /* 文字颜色 */
                    /* 添加由外向内的径向渐变边框 */
                    border: 2px solid transparent;
                    border-radius: 8px;
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    background-image: 
                        linear-gradient( rgba(58, 56, 153, 1),  rgba(58, 56, 153, 1)), /* 背景色 */
                        radial-gradient(circle at center, #ff6b6b, #4ecdc4); /* 由外向内的径向渐变边框 */
                }
                /* 可选：修改Modal标题栏样式 */
                .custom-modal .ant-modal-header {
                    background-color:  rgba(58, 56, 153, 1) !important;
                    border-bottom: none; /* 移除底部边框 */
                }
                
                .custom-modal .ant-modal-title{
                    color:white !important;
                    border-bottom:1px solid white;
                }
            `}</style>
            </div>
        </ConfigProvider>
    )
}