import { Button, Col, Drawer, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tag, Tree } from "antd";
import { useEffect, useRef, useState } from "react";
import styles from './InspectionTaskPlan.less'
import { Title } from "@/pages/inspectiontasks/InspectionTasks";
import EnvironmentalMonitoring from "../EnvironmentalMonitoring/EnvironmentalMonitoring";
import btnImg1 from '@/assets/img/planBtn1.png'
import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png'
import menuInactiveBg1 from '@/assets/img/d368476fbf3b6a5e808b0274d96e1809d945da24.png' // 温度异常检测未激活背景图
import menuInactiveBg2 from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png' // 温湿度检测未激活背景图
import menuInactiveBg3 from '@/assets/img/90501c706560228b7b68e4c8f4c9924c490578ad.png' // 跑冒滴漏检测未激活背景图
import menuInactiveBg4 from '@/assets/img/a4a0367e2a7e14611cc75be2e1a2d51127a4d390.png' // 仪器仪表采集未激活背景图
import menuInactiveBg5 from '@/assets/img/f729103541513c2e864c1f8a710db1d80125f3e7.png' // 环境监测未激活背景图
import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.png'
import newBgImage from '@/assets/img/a858e701a4fde498b9c3cc56ab2b62693055dee1.png'

import paibanBg from '@/assets/img/paiban.png'
import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
import taskPlanBg from '@/assets/img/image 674 1.svg'
import { DeleteOutlined, DownOutlined, EditOutlined, ExportOutlined, EyeOutlined, PlusOutlined, RedoOutlined, ReloadOutlined as IconRefresh, SearchOutlined as IconSearch } from "@ant-design/icons";
import TemperatureHumidityGauges from '../ReusableGauges/ReusableGauges';
// 新增导入
import DataAnalysisInspectionManagement from './DataAnalysisInspectionManagement';
const { Search } = Input

// TaskCard 组件 - 用于显示巡检任务卡片
const TaskCard = ({ task }) => {
    return (
        <div style={{
            position: 'relative',
            width: '18%'
        }}>
            {/* 时间节点 */}
            <div style={{
                position: 'absolute',
                width: '20px',
                height: '20px',
                backgroundColor: '#2C9E9D',
                borderRadius: '50%',
                left: '50%',
                top: '50%',
                marginLeft: '-10px',
                marginTop: '-10px',
                zIndex: 1
            }}></div>

            {/* 日期标签 */}
            <div style={{
                position: 'absolute',
                top: '60%',
                left: '50%',
                transform: 'translateX(-50%)',
                backgroundColor: '#2C9E9D',
                color: 'white',
                padding: '5px 10px',
                borderRadius: '15px',
                fontSize: '12px',
                fontWeight: 'bold'
            }}>
                {task.date}
            </div>

            {/* 任务卡片 */}
            <div style={{
                position: 'absolute',
                top: 0,
                left: '50%',
                transform: 'translateX(-50%)',
                width: '90%',
                backgroundColor: '#f8f9fa',
                padding: '15px',
                borderRadius: '10px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                border: '1px solid #e9ecef'
            }}>
                <h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
                <p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
                    <strong>{task.title}</strong>
                </p>
                <p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
                    开始时间：{task.startTime}
                </p>
                <p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
                    完成进度：{task.progress}%
                </p>
                <div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
                    <span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
                    <span style={{ fontSize: '11px', color: '#666' }}>
                        异常数：{task.abnormalCount}
                    </span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
                    <Button size="small" type="primary" style={{
                        backgroundColor: '#2C9E9D',
                        borderColor: '#2C9E9D',
                        fontSize: '11px',
                        padding: '0 8px',
                        height: '24px'
                    }}>
                        查看详情
                    </Button>
                    <Button size="small" danger style={{
                        fontSize: '11px',
                        padding: '0 8px',
                        height: '24px'
                    }}>
                        终止任务
                    </Button>
                </div>
            </div>
        </div>
    );
};
export const MenuBg = (props) => {
    return (
        <div className={styles["parallelogram-container"]}>
            <span className={styles["text-content"]}>{props.text}</span>
            <span className={styles["text-content"]} style={{ margin: '0' }}>{props.icon}</span>

        </div>
    )
}
//抽屉
const Drawers = (props) => {

    return (
        <Drawer
            title='详情'
            closable={{ 'aria-label': 'Close Button' }}
            onClose={props.onClose}
            open={props.open}
            width={500}
            className={styles['customDrawer']}
        >
            <div style={{ padding: '20px' }}>
                <Title title={'基本信息'} ></Title>
                <Row style={{ margin: '20px 0' }}>
                    <Col span={12}>
                        <Row style={{ marginBottom: '20px' }}>
                            <Col span={8} className={styles['font1']}>所属班次</Col>
                            <Col span={16}>{props.row?.shifts}</Col>
                        </Row>
                        <Row>
                            <Col span={8} className={styles['font1']}>路线名称</Col>
                            <Col span={16}>{props.row?.name}</Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row style={{ marginBottom: '20px' }}>
                            <Col span={8} className={styles['font1']}>所属专业</Col>
                            <Col span={16}>{props.row?.affiliation}</Col>
                        </Row>
                        <Row>
                            <Col span={8} className={styles['font1']}>创建时间</Col>
                            <Col span={16}>{props.row?.time}</Col>
                        </Row>

                    </Col>
                </Row>
                <Title title={'巡检设备范围'}></Title>
                <div className={styles['box']}>
                    <Tag className={styles['tag']} color="magenta">发电机</Tag>
                    <Tag className={styles['tag']} color="red">中水处区</Tag>
                    <Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
                    <Tag className={styles['tag']} color="orange">1#炉右上炉膛温度</Tag>
                    <Tag className={styles['tag']} color="gold">1#冷干机</Tag>
                </div>
                <Title title={'巡视项详情'}></Title>
                <Row style={{ margin: '20px 0 10px 0' }}>
                    <Tag className={styles['tag']} color="magenta">发电机</Tag>
                </Row>
                <Row style={{ margin: '0 0 20px 0' }}>
                    <ul className={styles['ul']}>
                        <li>外观检查：有无破损、油污 </li>
                        <li>温度检测：轴承温度≤70℃，定子温度≤105℃</li>
                    </ul>
                </Row>
                <Row style={{ margin: '20px 0 10px 0' }}>
                    <Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
                </Row>
                <Row style={{ margin: '0 0 20px 0' }}>
                    <ul className={styles['ul']}>
                        <li>运行指示灯：是否正常亮起 </li>
                        <li>散热风扇：是否正常转动</li>
                        <li>输出电压：380V±5%</li>
                    </ul>
                </Row>

            </div>
        </Drawer>

    )
}

const TimeTable = () => {
    //状态管理
    const [dataSource, setDataSource] = useState([]) //表格数据
    const [loading, setLoading] = useState(false) //加载状态
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const [selectedRowKeys, setSelectedRowKeys] = useState([])//选中行的id
    const [open, setOpen] = useState(false)
    const [row, setRow] = useState(null)
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align: 'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '线路ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
        },
        {
            title: '线路名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: '所属班次',
            dataIndex: 'shifts',
            key: 'shifts',
            align: 'center',
        },
        {
            title: '所属专业',
            dataIndex: 'affiliation',
            key: 'affiliation',
            align: 'center',
        },
        {
            title: '涉及区域',
            dataIndex: 'position',
            key: 'position',
            align: 'center',
        },
        {
            title: '设备数量',
            dataIndex: 'deviceNum',
            key: 'deviceNum',
            align: 'center',
        },
        {
            title: '巡视项数量',
            dataIndex: 'lookNum',
            key: 'lookNum',
            align: 'center',

        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (status) => (
                <Switch checked={status} />
            )
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                </Space>
            ),
        },
    ]
    const fetchTableData = () => {
        try {
            setLoading(true)
            const mockData = [
                {
                    key: '1',
                    id: 'GH001',
                    name: '白班电气巡检线 1',
                    shifts: '白班',
                    affiliation: '电气专业',
                    position: '发电机、中水处区',
                    deviceNum: '22',
                    lookNum: 3,
                    status: 'true',
                    time: '2025-03-31'
                },
                {
                    key: '2',
                    id: 'GH001',
                    name: '白班电气巡检线 1',
                    shifts: '白班',
                    affiliation: '电气专业',
                    position: '发电机、中水处区',
                    deviceNum: '22',
                    lookNum: 3,
                    status: 'true',
                    time: '2025-05-31'
                },


            ]
            setDataSource(mockData)
            setTotal(85)

        } catch (error) {
            console.error(error)
        } finally {
            setLoading(false)
        }
    }
    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);
    // 处理查看详情
    const handleView = (record) => {
        console.log('查看详情:', record);
        setRow(record)
        setOpen(true)
    };

    return (
        <>
            <Table
                columns={columns}
                dataSource={dataSource}
                loading={loading}
                pagination={false} // 关闭表格自带分页，使用外部分页组件
                rowKey="key"
                style={{ width: '100%', }}
            />
            <Drawers
                open={open}
                onClose={() => setOpen(false)}
                row={row}
            >

            </Drawers>
        </>

    )
}
const StandardTable = () => {
    // 状态管理
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [loading, setLoading] = useState(false); // 加载状态
    const [total, setTotal] = useState(0); // 总条数
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页条数
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID

    // 表格列配置
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align: 'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '方案名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (status) => (
                <Switch checked={status} />
            )
        },
        {
            title: '最后更新时间',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ];

    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };

    // 获取表格数据
    const fetchTableData = async () => {
        try {
            setLoading(true);
            // 这里是预留的接口调用位置
            // 实际项目中替换为真实接口请求
            // const response = await api.getEmployeeList({
            //   page: currentPage,
            //   pageSize: pageSize
            // });

            // 模拟数据 - 实际项目中删除
            const mockData = [
                {
                    key: '1',
                    name: '输油设备巡检标准',
                    version: 'V2.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '2',
                    name: '消防系统巡检标准',
                    version: 'V1.1',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '3',
                    name: '电气设备巡检标准',
                    version: 'V1.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '4',
                    name: '输油设备巡检标准',
                    version: 'V2.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '5',
                    name: '消防系统巡检标准',
                    version: 'V1.1',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '6',
                    name: '电气设备巡检标准',
                    version: 'V1.0',
                    status: true,
                    time: '2025-09-13'
                },


            ];

            // 模拟接口返回 - 实际项目中使用接口数据
            setDataSource(mockData);
            setTotal(85); // 总条数，实际项目中从接口获取
        } catch (error) {
            console.error('获取员工数据失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);

    // 处理查看详情
    const handleView = (record) => {
        // 预留查看详情逻辑
        console.log('查看详情:', record);
    };

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };

    // 渲染表格
    return (
        <Table
            rowSelection={{
                type: 'checkbox',
                ...rowSelection,
            }}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{ width: '100%', }}

        />
    );
}
const DeviceAttribute = () => {
    // 状态管理
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [loading, setLoading] = useState(false); // 加载状态
    const [total, setTotal] = useState(0); // 总条数
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页条数
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID

    // 表格列配置
    const columns = [
        {
            title: '属性名称',
            dataIndex: 'attribute',
            key: 'attribute',
            align: 'center',
        },
        {
            title: '属性内容',
            dataIndex: 'content',
            key: 'content',
            align: 'center',
        },
        {
            title: '属性分类',
            dataIndex: 'class',
            key: 'class',
            align: 'center',
        },
        {
            title: '阈值内容',
            dataIndex: 'threshold',
            key: 'threshold',
            align: 'center',
            render: (value) => {
                return (
                    <div style={{ textAlign: 'left', width: '100px', margin: 'auto' }}>
                        <div>上限：{value['上限']}</div>
                        <div>下限：{value['下限']}</div>
                        <div>单位：{value['单位']}</div>
                    </div>
                )
            }
        },
        {
            title: '测点名称',
            dataIndex: 'point',
            key: 'point',
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ]
    // 获取表格数据
    const fetchTableData = async () => {
        try {
            setLoading(true);
            // 这里是预留的接口调用位置
            // 实际项目中替换为真实接口请求
            // const response = await api.getEmployeeList({
            //   page: currentPage,
            //   pageSize: pageSize
            // });

            // 模拟数据 - 实际项目中删除
            const mockData = [
                {
                    key: '1',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
                    point: '测点2',
                }, {
                    key: '2',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
                    point: '测点2',
                }, {
                    key: '3',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: { '上限': '', '下限': '', '单位': '' },
                    point: '测点2',
                },

            ];

            // 模拟接口返回 - 实际项目中使用接口数据
            setDataSource(mockData);
            setTotal(85); // 总条数，实际项目中从接口获取
        } catch (error) {
            console.error('获取员工数据失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };

    // 渲染表格
    return (
        <Table
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{ width: '100%', }}

        />
    );
}
// 分页组件
export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
    return (
        <div style={{ textAlign: 'right', marginTop: 16, width: '100%' }}>
            <Pagination
                current={currentPage}
                pageSize={pageSize}
                total={total}
                onChange={onPageChange}
                onShowSizeChange={onPageSizeChange}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `共 ${total} 条`}
                pageSizeOptions={['10', '20', '50', '100']}
            />
        </div>
    );
};


// TimeMange component removed
// PatrolRouteQuery component removed

const SmartInspectionRange = () => {
    // 巡检范围树形数据，根据参考图更新
    const treeData = [
        {
            title: '核心环控路径',
            key: 'core-path',
            children: [
                { title: '指挥调度中心', key: 'command-center' },
                { title: '罐区集群', key: 'tank-cluster' },
                { title: '泵房集群', key: 'pump-cluster' },
                { title: '管线网络', key: 'pipeline-network' },
            ],
        },
        {
            title: '罐区',
            key: 'tank-area',
            children: [
                {
                    title: '高危罐区',
                    key: 'high-risk-tank',
                    children: [
                        { title: '顶源罐区', key: 'top-tank-area' },
                        { title: '拱顶罐区', key: 'dome-top-tank' },
                    ],
                },
                {
                    title: '常规罐区',
                    key: 'normal-tank',
                    children: [
                        { title: '浮顶罐区', key: 'floating-top-tank' },
                        { title: '拱顶罐区', key: 'normal-dome-tank' },
                    ],
                },
            ],
        },
        {
            title: '泵房',
            key: 'pump-house',
            children: [
                {
                    title: '运行中泵房',
                    key: 'running-pump',
                    children: [
                        { title: '1#泵房', key: 'pump-1' },
                        { title: '2#泵房', key: 'pump-2' },
                    ]
                },
                { title: '备用泵房', key: 'spare-pump' },
                {
                    title: '3#泵房',
                    key: 'pump-3',
                    children: [
                        { title: '4#泵房', key: 'pump-4' },
                    ]
                },
            ],
        },
        { title: '智能网格', key: 'smart-grid' },
    ];

    return (
        <div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
            <Row gutter={[16, 16]}>
                {/* 左侧树形结构 */}
                <Col span={6}>
                    <div style={{
                        backgroundColor: '#E7F2ED',
                        borderRadius: '10px',
                        padding: '15px',
                        height: '100%',
                        border: '1px solid rgba(0, 102, 101, 0.2)'
                    }}>
                        <div style={{
                            fontSize: '16px',
                            fontWeight: 'bold',
                            color: '#006665',
                            marginBottom: '15px',
                            paddingBottom: '10px',
                            borderBottom: '2px solid #006665'
                        }}>| 巡检范围</div>
                        <Tree
                            className={styles['tree']}
                            defaultExpandAll
                            treeData={treeData}
                            checkable
                            style={{ fontSize: '14px', color: '#006665' }}
                        />
                    </div>
                </Col>
                {/* 右侧背景图和内容 */}
                <Col span={18}>
                    <div style={{
                        position: 'relative',
                        height: '631px',
                        borderRadius: '10px',
                        overflow: 'hidden',
                        border: '1px solid rgba(0, 102, 101, 0.2)'
                    }}>
                        {/* 背景图 */}
                        <img
                            src={inspectionBg}
                            alt="智能巡检范围监控"
                            style={{
                                width: '100%',
                                height: '100%',
                                objectFit: 'cover'
                            }}
                        />

                        {/* 区域基础信息框 */}
                        <div style={{
                            position: 'absolute',
                            top: '20%',
                            left: '30%',
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            padding: '15px',
                            borderRadius: '8px',
                            border: '1px solid #006665',
                            width: '200px'
                        }}>
                            <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>区域基础信息</div>
                            <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
                                <div>区域名称：高危罐区 - 3#-9#罐组</div>
                                <div>区域编号：第2节点 (指挥中心→高危罐区)</div>
                                <div>巡检状态：正在巡检</div>
                                <div>完成进度：设备4/30台</div>
                            </div>
                        </div>

                        {/* 巡检覆盖清单框 */}
                        <div style={{
                            position: 'absolute',
                            top: '10%',
                            right: '10%',
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            padding: '15px',
                            borderRadius: '8px',
                            border: '1px solid #006665',
                            width: '220px'
                        }}>
                            <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>巡检覆盖清单</div>
                            <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
                                <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>覆盖主体</div>
                                <div>重点设备：储罐×8、3#-9#罐组、罐前付转装置</div>
                                <div>检测方式：红外检测、视觉识别</div>
                                <div>环境监控：声噪、消防水池监测</div>
                                <div>管控单位：3#罐区特种管控部门</div>
                            </div>
                        </div>

                        {/* 机器人图标 */}
                        <div style={{
                            position: 'absolute',
                            bottom: '20%',
                            right: '25%',
                            textAlign: 'center'
                        }}>
                            <div style={{ fontSize: '48px', color: '#006665', marginBottom: '5px' }}>🤖</div>
                            <div style={{ backgroundColor: 'rgba(0, 102, 101, 0.8)', color: 'white', padding: '5px 10px', borderRadius: '15px', fontSize: '12px' }}>机器人实时位置</div>
                        </div>

                        {/* 绿色圆点标记 */}
                        <div style={{
                            position: 'absolute',
                            bottom: '35%',
                            left: '45%',
                            textAlign: 'center'
                        }}>
                            <div style={{
                                width: '20px',
                                height: '20px',
                                borderRadius: '50%',
                                backgroundColor: 'green',
                                border: '2px solid white',
                                boxShadow: '0 0 10px green',
                                margin: '0 auto 5px'
                            }}></div>
                            <div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>高危罐区</div>
                        </div>

                        <div style={{
                            position: 'absolute',
                            bottom: '30%',
                            right: '15%',
                            textAlign: 'center'
                        }}>
                            <div style={{
                                width: '20px',
                                height: '20px',
                                borderRadius: '50%',
                                backgroundColor: 'green',
                                border: '2px solid white',
                                boxShadow: '0 0 10px green',
                                margin: '0 auto 5px'
                            }}></div>
                            <div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>常规罐区</div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    )
};

// 智能巡检内容监控中心组件
const SmartInspectionContent = () => {
    const [activeTab, setActiveTab] = useState('温度异常检测');
    const [currentPage, setCurrentPage] = useState(6);

    const handleTabClick = (tab) => {
        setActiveTab(tab);
    };

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const renderContent = () => {
        switch (activeTab) {
            case '温度异常检测':
                return (
                    <div style={{ padding: 20 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                            <h2 style={{ margin: 0, color: 'black' }}>| 实时监测区</h2>
                            {/* <div style={{ display: 'flex', gap: 10 }}>
                                <button style={{
                                    backgroundColor: '#52c41a',
                                    color: 'white',
                                    border: 'none',
                                    padding: '8px 16px',
                                    borderRadius: 4,
                                    cursor: 'pointer',
                                    fontWeight: 'bold'
                                }}>
                                    实时刷新
                                </button>
                                <button style={{
                                    backgroundColor: '#1890ff',
                                    color: 'white',
                                    border: 'none',
                                    padding: '8px 16px',
                                    borderRadius: 4,
                                    cursor: 'pointer'
                                }}>
                                    导出检测报告
                                </button>
                                <button style={{
                                    backgroundColor: '#722ed1',
                                    color: 'white',
                                    border: 'none',
                                    padding: '8px 16px',
                                    borderRadius: 4,
                                    cursor: 'pointer'
                                }}>
                                    报警设置
                                </button>
                            </div> */}
                        </div>

                        <div style={{ display: 'flex', gap: 20 }}>
                            <div style={{
                                border: '1px solid #f0f0f0',
                                borderRadius: 8,
                                padding: 16,
                                width: '35%',
                                backgroundColor: '#fafafa'
                            }}>
                                <div style={{ position: 'relative' }}>
                                    <img
                                        src={thermalImage}
                                        alt="红外热成像图"
                                        style={{ width: '100%', height: 'auto', borderRadius: 4 }}
                                    />
                                    <div style={{
                                        position: 'absolute',
                                        top: 10,
                                        right: 10,
                                        backgroundColor: 'rgba(0,0,0,0.7)',
                                        color: 'white',
                                        padding: '4px 8px',
                                        borderRadius: 4,
                                        fontSize: 12
                                    }}>
                                        当前最高温: 89°C
                                    </div>
                                </div>
                                <div style={{ marginTop: 12 }}>
                                    <p style={{ margin: '8px 0', fontSize: 14 }}>实时温度: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>89°C</span></p>
                                    <p style={{ margin: '8px 0', fontSize: 14 }}>高温异常: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>80°C</span></p>
                                    <p style={{ margin: '8px 0', fontSize: 14, color: '#666' }}>当前监测区域: 罐区管道连接处检测</p>
                                </div>
                            </div>

                            <div style={{ width: '65%', padding: 16 }}>
                                <div style={{
                                    border: '1px solid #f0f0f0',
                                    borderRadius: 8,
                                    padding: 16,
                                    marginBottom: 20,
                                    backgroundColor: '#fafafa'
                                }}>
                                    <h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>检测原理说明</h3>
                                    <p style={{
                                        margin: 0,
                                        lineHeight: 1.6,
                                        color: '#333',
                                        backgroundColor: 'white',
                                        padding: 12,
                                        borderRadius: 4,
                                        border: '1px solid #e8e8e8'
                                    }}>
                                        "搭载红外热成像测温仪，覆盖电缆、胶管、设备高温点；温度达到阈值时自动上报故障，同步录制热成像/可见光视频，为故障分析提供数据支撑。"
                                    </p>
                                </div>

                                <div style={{
                                    border: '1px solid #f0f0f0',
                                    borderRadius: 8,
                                    padding: 16,
                                    backgroundColor: '#fafafa'
                                }}>
                                    <h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>异常历史记录</h3>
                                    <div style={{ overflowX: 'auto' }}>
                                        <table style={{ width: '100%', borderCollapse: 'collapse', backgroundColor: 'white' }}>
                                            <thead>
                                                <tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>序号</th>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>故障时间</th>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>检测区域</th>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>异常温度</th>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>处理状态</th>
                                                    <th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2025-10-16 14:20</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1# 泵房电机</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>92°C</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>已处理</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>
                                                        <button style={{
                                                            color: '#1890ff',
                                                            border: 'none',
                                                            backgroundColor: 'transparent',
                                                            cursor: 'pointer',
                                                            textDecoration: 'underline'
                                                        }}>
                                                            查看详情
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2025-10-16 14:20</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1# 泵房电机</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>92°C</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>已处理</td>
                                                    <td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>
                                                        <button style={{
                                                            color: '#1890ff',
                                                            border: 'none',
                                                            backgroundColor: 'transparent',
                                                            cursor: 'pointer',
                                                            textDecoration: 'underline'
                                                        }}>
                                                            查看详情
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
                                        <span style={{ fontSize: 14, color: '#666' }}>共 85 条</span>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                            <span style={{ fontSize: 14 }}>10 / page</span>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                ‹
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                1
                                            </button>
                                            <span>...</span>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                4
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                5
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #1890ff',
                                                backgroundColor: '#1890ff',
                                                color: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                6
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                7
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                8
                                            </button>
                                            <span>...</span>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                50
                                            </button>
                                            <button style={{
                                                padding: '4px 8px',
                                                border: '1px solid #d9d9d9',
                                                backgroundColor: 'white',
                                                cursor: 'pointer'
                                            }}>
                                                ›
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            case '温湿度检测':
                // 创建一个React兼容的ECharts组件
                const EChartsGauge = ({ id, option, height, width }) => {
                    const chartRef = useRef(null);
                    const chartInstanceRef = useRef(null);

                    useEffect(() => {
                        // 确保在浏览器环境中运行
                        if (typeof window !== 'undefined' && chartRef.current) {
                            const echarts = require('echarts');

                            // 初始化图表
                            if (!chartInstanceRef.current) {
                                chartInstanceRef.current = echarts.init(chartRef.current);
                            }

                            // 设置配置
                            chartInstanceRef.current.setOption(option);

                            // 响应窗口大小变化
                            const handleResize = () => {
                                if (chartInstanceRef.current) {
                                    chartInstanceRef.current.resize();
                                }
                            };

                            window.addEventListener('resize', handleResize);

                            // 清理函数
                            return () => {
                                window.removeEventListener('resize', handleResize);
                                if (chartInstanceRef.current) {
                                    chartInstanceRef.current.dispose();
                                    chartInstanceRef.current = null;
                                }
                            };
                        }
                    }, [option]);

                    return (
                        <div
                            ref={chartRef}
                            id={id}
                            style={{ width, height }}
                        />
                    );
                };

                // 温度仪表盘配置
                const temperatureOption = {
                    series: [
                        {
                            type: 'gauge',
                            startAngle: 180,
                            endAngle: 0,
                            min: 0,
                            max: 120,
                            splitNumber: 6,
                            itemStyle: {
                                color: 'rgba(4, 95, 94, 0.5)',
                                shadowColor: 'rgba(4, 95, 94, 0.7)',
                                shadowBlur: 10,
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            },
                            progress: {
                                show: true,
                                roundCap: true,
                                width: 18,
                                itemStyle: {
                                    color: 'rgba(4, 95, 94, 0.5)'
                                }
                            },
                            pointer: {
                                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                                length: '75%',
                                width: 16,
                                offsetCenter: [0, '5%'],
                                itemStyle: {
                                    color: 'rgba(4, 95, 94, 1)'
                                }
                            },
                            axisLine: {
                                roundCap: true,
                                lineStyle: {
                                    width: 18,
                                    color: [
                                        [1, 'rgba(4, 95, 94, 0.5)']
                                    ]
                                }
                            },
                            axisTick: {
                                splitNumber: 2,
                                lineStyle: {
                                    width: 2,
                                    color: '#999'
                                }
                            },
                            splitLine: {
                                length: 12,
                                lineStyle: {
                                    width: 3,
                                    color: 'rgba(4, 95, 94, 0.8)'
                                }
                            },
                            axisLabel: {
                                distance: 30,
                                color: 'rgba(4, 95, 94, 0.8)',
                                fontSize: 20
                            },
                            title: {
                                show: true,
                                offsetCenter: [0, '10%'],
                                fontSize: 18,
                                color: 'rgba(4, 95, 94, 0.8)'
                            },
                            detail: {
                                // backgroundColor: 'rgba(4, 95, 94, 0.2)',
                                // borderColor: 'rgba(4, 95, 94, 0.5)',
                                // borderWidth: 2,
                                width: '60%',
                                lineHeight: 40,
                                height: 40,
                                borderRadius: 8,
                                offsetCenter: [0, '35%'],
                                valueAnimation: true,
                                formatter: function (value) {
                                    return '{value|温度：' + value.toFixed(0) + '℃}';
                                    // return '{value|温度：' + value.toFixed(0) + '℃}{unit|°C}';
                                },
                                rich: {
                                    value: {
                                        fontSize: 20,
                                        fontWeight: '400',
                                        color: 'rgba(4, 95, 94, 1)'
                                    },
                                    unit: {
                                        fontSize: 20,
                                        color: 'rgba(4, 95, 94, 0.8)',
                                        padding: [0, 0, -20, 10]
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 28,
                                    name: ''
                                }
                            ]
                        }
                    ]
                };

                // 湿度仪表盘配置
                const humidityOption = {
                    series: [
                        {
                            type: 'gauge',
                            startAngle: 180,
                            endAngle: 0,
                            min: 0,
                            max: 120,
                            splitNumber: 6,
                            itemStyle: {
                                color: 'rgba(4, 95, 94, 0.5)',
                                shadowColor: 'rgba(4, 95, 94, 0.7)',
                                shadowBlur: 10,
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            },
                            progress: {
                                show: true,
                                roundCap: true,
                                width: 18,
                                itemStyle: {
                                    color: 'rgba(4, 95, 94, 0.5)'
                                }
                            },
                            pointer: {
                                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                                length: '75%',
                                width: 16,
                                offsetCenter: [0, '5%'],
                                itemStyle: {
                                    color: 'rgba(4, 95, 94, 1)'
                                }
                            },
                            axisLine: {
                                roundCap: true,
                                lineStyle: {
                                    width: 18,
                                    color: [
                                        [1, 'rgba(4, 95, 94, 0.5)']
                                    ]
                                }
                            },
                            axisTick: {
                                splitNumber: 2,
                                lineStyle: {
                                    width: 2,
                                    color: '#999'
                                }
                            },
                            splitLine: {
                                length: 12,
                                lineStyle: {
                                    width: 3,
                                    color: 'rgba(4, 95, 94, 0.8)'
                                }
                            },
                            axisLabel: {
                                distance: 30,
                                color: 'rgba(4, 95, 94, 0.8)',
                                fontSize: 20
                            },
                            title: {
                                show: true,
                                offsetCenter: [0, '10%'],
                                fontSize: 18,
                                color: 'rgba(4, 95, 94, 0.8)'
                            },
                            detail: {
                                // backgroundColor: 'rgba(4, 95, 94, 0.2)',
                                // borderColor: 'rgba(4, 95, 94, 0.5)',
                                // borderWidth: 2,
                                width: '60%',
                                lineHeight: 40,
                                height: 40,
                                borderRadius: 8,
                                offsetCenter: [0, '35%'],
                                valueAnimation: true,
                                formatter: function (value) {
                                    // return '{value|' + value.toFixed(0) + '}{unit|%}';
                                    return '{value|湿度：' + value.toFixed(0) + '%}';
                                },
                                rich: {
                                    value: {
                                        fontSize: 20,
                                        fontWeight: '400',
                                        color: 'rgba(4, 95, 94, 1)'
                                    },
                                    unit: {
                                        fontSize: 20,
                                        color: 'rgba(4, 95, 94, 0.8)',
                                        padding: [0, 0, -20, 10]
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 55,
                                    name: ''
                                }
                            ]
                        }
                    ]
                };

                return (
                    <div style={{ padding: 20 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                            <h2 style={{ margin: 0, color: 'black' }}>| 温湿度检测</h2>
                        </div>

                        <div style={{ display: 'flex', gap: 20 }}>
                            <div style={{
                                // border: '1px solid #f0f0f0',
                                // borderRadius: 8,
                                // padding: 16,
                                width: '35%',
                                // backgroundColor: '#fafafa'
                                gap: 20
                            }}>
                                <div className={styles.dashboardContainer} style={{ width: '100%', height: 700 }}>
                                    <h3 style={{ margin: '16px', fontSize: 16 }}>实时仪表盘</h3>
                                    {/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
                                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                        <TemperatureHumidityGauges temperature={28} humidity={55} width={450} height={350} />
                                    </div>
                                </div>

                                <div className={styles.thresholdConfigContainer} style={{ marginTop: 20, padding: 16 }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>阈值配置区</h3>
                                        <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 0px', width: 120 }}>保存配置</Button>
                                    </div>
                                    <div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
                                        <div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>低温预警阈值:</label>
                                            <input
                                                type="text"
                                                value="5°C"
                                                style={{
                                                    padding: '4px 8px',
                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                    borderRadius: 4,
                                                    width: '100%'
                                                }}
                                            />
                                        </div>
                                        <div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>高温预警阈值:</label>
                                            <input
                                                type="text"
                                                value="30°C"
                                                style={{
                                                    padding: '4px 8px',
                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                    borderRadius: 4,
                                                    width: '100%'
                                                }}
                                            />
                                        </div>
                                        <div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>湿度预警阈值:</label>
                                            <input
                                                type="text"
                                                value="90%RH"
                                                style={{
                                                    padding: '4px 8px',
                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                    borderRadius: 4,
                                                    width: '100%'
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.chartContainer} style={{ width: '65%' }}>
                                <div style={{
                                    border: '1px solid #f0f0f0',
                                    borderRadius: 8,
                                    padding: 16,
                                    backgroundColor: '#fafafa',
                                    height: '100%'
                                }}>
                                    <h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>历史趋势图</h3>
                                    <div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
                                        <div style={{ display: 'flex', gap: 20, marginBottom: 16 }}>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                                <span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#1890ff' }}></span>
                                                <span style={{ fontSize: 14, color: '#333' }}>温度(°C)</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                                <span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#52c41a' }}></span>
                                                <span style={{ fontSize: 14, color: '#333' }}>湿度(%RH)</span>
                                            </div>
                                        </div>
                                        <div style={{ height: 400, position: 'relative' }}>
                                            {/* 模拟趋势图 */}
                                            <svg width="100%" height="100%" viewBox="0 0 800 400">
                                                {/* 网格线 */}
                                                {[0, 25, 50, 75, 100].map((val, index) => (
                                                    <g key={index}>
                                                        <line
                                                            x1="50"
                                                            y1={400 - val * 4}
                                                            x2="750"
                                                            y2={400 - val * 4}
                                                            stroke="#f0f0f0"
                                                            strokeWidth="1"
                                                        />
                                                        <text x="30" y={400 - val * 4 + 5} fontSize="12" fill="#666" textAnchor="end">
                                                            {val}
                                                        </text>
                                                    </g>
                                                ))}
                                                {/* 时间标签 */}
                                                {['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'].map((time, index) => (
                                                    <text
                                                        key={index}
                                                        x={50 + index * 90}
                                                        y={390}
                                                        fontSize="12"
                                                        fill="#666"
                                                        textAnchor="middle"
                                                    >
                                                        {time}
                                                    </text>
                                                ))}
                                                {/* 温度曲线 */}
                                                <path
                                                    d="M50,200 L140,160 L230,180 L320,120 L410,160 L500,140 L590,120 L680,140 L750,100"
                                                    stroke="#1890ff"
                                                    strokeWidth="2"
                                                    fill="none"
                                                />
                                                {/* 温度数据点 */}
                                                {[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
                                                    <circle
                                                        key={`temp-${index}`}
                                                        cx={x}
                                                        cy={[200, 160, 180, 120, 160, 140, 120, 140, 100][index]}
                                                        r="4"
                                                        fill="#1890ff"
                                                    />
                                                ))}
                                                {/* 湿度曲线 */}
                                                <path
                                                    d="M50,100 L140,140 L230,120 L320,160 L410,150 L500,180 L590,170 L680,140 L750,130"
                                                    stroke="#52c41a"
                                                    strokeWidth="2"
                                                    fill="none"
                                                />
                                                {/* 湿度数据点 */}
                                                {[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
                                                    <circle
                                                        key={`humi-${index}`}
                                                        cx={x}
                                                        cy={[100, 140, 120, 160, 150, 180, 170, 140, 130][index]}
                                                        r="4"
                                                        fill="#52c41a"
                                                    />
                                                ))}
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div >
                );
            case '跑冒滴漏检测':
                return (
                    <div style={{ padding: '20px', display: 'flex', gap: 20, height: '100%' }}>
                        <div style={{ marginBottom: '20px', width: '60%', height: '100%' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div>
                                    实时检测画面
                                </div>
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'end',
                                    gap: '10px',
                                    marginBottom: '15px'
                                }}>
                                    <button style={{
                                        padding: '8px 16px',
                                        backgroundColor: '#2c9e9d',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '4px',
                                        cursor: 'pointer'
                                    }}>红外热成像检测</button>
                                    <button style={{
                                        padding: '8px 16px',
                                        backgroundColor: '#f0f0f0',
                                        color: '#333',
                                        border: '1px solid #d9d9d9',
                                        borderRadius: '4px',
                                        cursor: 'pointer'
                                    }}>DCAM双摄像头分析</button>
                                </div>
                            </div>
                            <div style={{
                                width: '100%',
                                height: 'auto',
                                borderRadius: '8px',
                                overflow: 'hidden',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                backgroundColor: '#f5f5f5'
                            }}>
                                <img
                                    src={newBgImage}
                                    alt="热成像检测画面"
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                        // objectFit: 'cover'
                                    }}
                                />
                            </div>
                        </div>

                        <div style={{ width: '40%', height: '100%', display: 'flex', flexDirection: 'column' }}>
                            <h3>异常记录表格</h3>
                            <div style={{ overflowX: 'auto' }}>
                                <table style={{
                                    width: '100%',
                                    borderCollapse: 'collapse',
                                    marginTop: '10px'
                                }}>
                                    <thead>
                                        <tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>序号</th>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>故障时间</th>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>检测区域</th>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>检测技术</th>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>处理状态</th>
                                            <th style={{
                                                padding: '10px',
                                                textAlign: 'left',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>1</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>2025-10-16 14:20</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>1#泵房电机</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>红外热成像</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>
                                                <span style={{
                                                    color: '#52c41a',
                                                    backgroundColor: '#f6ffed',
                                                    padding: '2px 8px',
                                                    borderRadius: '4px',
                                                    fontSize: '12px'
                                                }}>已处理</span>
                                            </td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>
                                                <button style={{
                                                    padding: '4px 8px',
                                                    backgroundColor: '#1890ff',
                                                    color: 'white',
                                                    border: 'none',
                                                    borderRadius: '4px',
                                                    cursor: 'pointer',
                                                    fontSize: '12px'
                                                }}>查看详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>2</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>2025-10-16 14:20</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>2#泵房电机</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>红外热成像</td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>
                                                <span style={{
                                                    color: '#52c41a',
                                                    backgroundColor: '#f6ffed',
                                                    padding: '2px 8px',
                                                    borderRadius: '4px',
                                                    fontSize: '12px'
                                                }}>已处理</span>
                                            </td>
                                            <td style={{
                                                padding: '10px',
                                                borderBottom: '1px solid #e8e8e8'
                                            }}>
                                                <button style={{
                                                    padding: '4px 8px',
                                                    backgroundColor: '#1890ff',
                                                    color: 'white',
                                                    border: 'none',
                                                    borderRadius: '4px',
                                                    cursor: 'pointer',
                                                    fontSize: '12px'
                                                }}>查看详情</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div style={{
                                display: 'flex',
                                justifyContent: 'flex-end',
                                alignItems: 'center',
                                marginTop: 'auto',
                                gap: '10px'
                            }}>
                                <span>共 05 条 10 / page</span>
                                <div>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #d9d9d9',
                                        backgroundColor: '#fff',
                                        cursor: 'pointer'
                                    }}>上一页</button>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #1890ff',
                                        backgroundColor: '#1890ff',
                                        color: 'white',
                                        cursor: 'pointer'
                                    }}>1</button>
                                    <span>...</span>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #d9d9d9',
                                        backgroundColor: '#fff',
                                        cursor: 'pointer'
                                    }}>4</button>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #d9d9d9',
                                        backgroundColor: '#fff',
                                        cursor: 'pointer'
                                    }}>5</button>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #d9d9d9',
                                        backgroundColor: '#fff',
                                        cursor: 'pointer'
                                    }}>6</button>
                                    <button style={{
                                        padding: '4px 8px',
                                        margin: '0 2px',
                                        border: '1px solid #d9d9d9',
                                        backgroundColor: '#fff',
                                        cursor: 'pointer'
                                    }}>下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            case '仪器仪表采集':
                return (
                    <div style={{ padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }}>
                        {/* 顶部批量编辑按钮 */}
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
                            <div style={{ size: '20px' }}>| 仪器仪表采集</div>
                            <button style={{
                                padding: '8px 16px',
                                backgroundColor: '#2c9e9d',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}>批量设备阈值</button>
                        </div>

                        {/* 状态统计卡片 */}
                        <div style={{ marginBottom: '20px' }}>
                            <h4 style={{ marginBottom: '10px' }}>状态统计卡片</h4>
                            <div style={{ display: 'flex', gap: '15px' }}>
                                {/* 正常仪表卡片 */}
                                <div style={{
                                    flex: 1,
                                    backgroundColor: '#e6f7ff',
                                    borderRadius: '8px',
                                    padding: '15px',
                                    borderLeft: '4px solid #1890ff',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between'
                                }}>
                                    <div>
                                        <div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>正常仪表</div>
                                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>28</div>
                                    </div>
                                    <div style={{ width: '40px', height: '40px', backgroundColor: '#bae7ff', borderRadius: '50%' }}></div>
                                </div>

                                {/* 超限仪表卡片 */}
                                <div style={{
                                    flex: 1,
                                    backgroundColor: '#fff2e8',
                                    borderRadius: '8px',
                                    padding: '15px',
                                    borderLeft: '4px solid #ff7875',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between'
                                }}>
                                    <div>
                                        <div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>超限仪表</div>
                                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ff7875' }}>2</div>
                                    </div>
                                    <div style={{ width: '40px', height: '40px', backgroundColor: '#ffccc7', borderRadius: '50%' }}></div>
                                </div>

                                {/* 待确认卡片 */}
                                <div style={{
                                    flex: 1,
                                    backgroundColor: '#f6ffed',
                                    borderRadius: '8px',
                                    padding: '15px',
                                    borderLeft: '4px solid #52c41a',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between'
                                }}>
                                    <div>
                                        <div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>待确认</div>
                                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>0</div>
                                    </div>
                                    <div style={{ width: '40px', height: '40px', backgroundColor: '#b7eb8f', borderRadius: '50%' }}></div>
                                </div>
                            </div>
                        </div>

                        {/* 采集数据列表 */}
                        <div style={{ marginBottom: '20px' }}>
                            <h4 style={{ marginBottom: '10px' }}>统计数据列表</h4>
                            <div style={{ overflow: 'auto' }}>
                                <table style={{
                                    width: '100%',
                                    borderCollapse: 'collapse',
                                    backgroundColor: '#fff',
                                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
                                }}>
                                    <thead>
                                        <tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>序号</th>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>仪表名称</th>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>采集值</th>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>设备位置</th>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>状态</th>
                                            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>报警阈值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1# 罐液位计</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>8.2m</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>高危罐区 3# 罐</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>
                                                <span style={{ color: '#52c41a' }}>正常</span>
                                            </td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8', color: '#1890ff' }}>0-10m</td>
                                        </tr>
                                        <tr>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>2</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>2# 泵出口压力表</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>0.5MPa</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1# 泵房</td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>
                                                <span style={{ color: '#52c41a' }}>正常</span>
                                            </td>
                                            <td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8', color: '#1890ff' }}>0.4-0.8MPa</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {/* 分页控件 */}
                        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 'auto' }}>
                            <div style={{ marginRight: '20px' }}>共95条 10/95页</div>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#fff',
                                    cursor: 'pointer'
                                }}>上一页</button>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#1890ff',
                                    color: '#fff',
                                    cursor: 'pointer'
                                }}>1</button>
                                <span>...</span>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#fff',
                                    cursor: 'pointer'
                                }}>4</button>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#fff',
                                    cursor: 'pointer'
                                }}>5</button>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#fff',
                                    cursor: 'pointer'
                                }}>6</button>
                                <button style={{
                                    padding: '5px 10px',
                                    border: '1px solid #d9d9d9',
                                    backgroundColor: '#fff',
                                    cursor: 'pointer'
                                }}>下一页</button>
                            </div>
                        </div>
                    </div>
                );
            case '环境监测':
                return (
                    <div style={{ padding: 0 }}>
                        <EnvironmentalMonitoring />
                    </div>
                );
            default:
                return null;
        }
    };

    return (
        <div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10, marginBottom: 20 }}>
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                backgroundColor: '#fff',
                padding: '16px 24px',
                color: 'black',
                fontWeight: '400',
                fontSize: 18
            }}>
                <div>
                    | 智能巡检内容监控中心
                </div>
                <div>
                    <Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>实时刷新</Button>
                    <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>导出巡检报告</Button>
                    <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>报警设置</Button>
                </div>
            </div>

            <div style={{ display: 'flex' }}>
                <div style={{
                    width: 240,
                    backgroundColor: '#fff',
                    minHeight: 'calc(100vh - 60px)',
                    padding: 16
                }}>
                    <nav>
                        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                            {['温度异常检测', '温湿度检测', '跑冒滴漏检测', '仪器仪表采集', '环境监测'].map((tab) => (
                                <li key={tab} style={{ marginBottom: 22 }}>
                                    <button
                                        onClick={() => handleTabClick(tab)}
                                        className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
                                        style={{
                                            backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
                                                tab === '温度异常检测' ? `url(${menuInactiveBg1})` :
                                                    tab === '温湿度检测' ? `url(${menuInactiveBg2})` :
                                                        tab === '跑冒滴漏检测' ? `url(${menuInactiveBg3})` :
                                                            tab === '仪器仪表采集' ? `url(${menuInactiveBg4})` :
                                                                tab === '环境监测' ? `url(${menuInactiveBg5})` : `url(${menuInactiveBg2})`
                                        }}
                                    >
                                        {tab}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </nav>
                </div>

                <div style={{ flex: 1 }}>
                    {renderContent()}
                </div>
            </div>
        </div>
    );
};

// 任务规划与执行流程组件
const TaskPlanningFlow = () => {
    return (
        <div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
            {/* 顶部标题 */}
            <div style={{ display: 'flex', flexDirection: 'row', textAlign: 'center', lineHeight: '31.43px', gap: '10px' }}>
                <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#006665', marginBottom: '20px' }}>
                    接班班组签到
                </div>
                <div style={{ marginRight: '10px', fontSize: '14px', color: 'rgba(153, 153, 153, 1)' }}>当前多机协作任务完成时间较单机缩短 62%</div>
            </div>
            {/* 顶部控制区域 */}
            <Row gutter={[16, 16]} style={{ marginBottom: '20px' }}>
                {/* 左侧任务状态选择框 */}
                <Col span={6}>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span style={{ marginRight: '10px', fontSize: '14px', color: '#333' }}>任务状态：</span>
                        <Select
                            defaultValue="全部"
                            style={{ width: 220 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '运行中', label: '运行中' },
                                { value: '待充电', label: '待充电' },
                                { value: '已完成', label: '已完成' },
                            ]}
                        />
                    </div>
                </Col>

                {/* 右侧按钮组 */}
                <Col span={18} style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Space size="16px" style={{ gap: '20px' }}>
                        <Button
                            style={{
                                width: '120px',
                                height: '40px',
                                fontSize: '14px',
                                fontWeight: '400',
                                color: 'white',
                                backgroundImage: `url(${btnImg1})`,
                                backgroundSize: '100% 100%',
                                border: 'none',
                                borderRadius: '5px'
                            }}
                        >
                            新建任务
                        </Button>

                        <Button
                            style={{
                                width: '120px',
                                height: '40px',
                                fontSize: '14px',
                                fontWeight: '400',
                                color: 'black',
                                backgroundImage: `url(${btnImg2})`,
                                backgroundSize: '100% 100%',
                                border: 'none',
                                borderRadius: '5px'
                            }}
                        >
                            暂停所有任务
                        </Button>

                        <Button
                            style={{
                                width: '120px',
                                height: '40px',
                                fontSize: '14px',
                                fontWeight: '400',
                                color: 'white',
                                backgroundImage: `url(${btnImg3})`,
                                backgroundSize: '100% 100%',
                                border: 'none',
                                borderRadius: '5px'
                            }}
                        >
                            刷新状态
                        </Button>
                    </Space>
                </Col>
            </Row>

            {/* 主要内容区域 - 左右布局 */}
            <Row gutter={[16, 16]} style={{}}>
                {/* 左侧实时监控信息区域 */}
                <Col span={6}>
                    <div style={{
                        height: '100%',
                        background: '#e8f1ec',
                        padding: '15px',
                        borderRadius: '8px',
                        // border: '1px solid #006665',
                        overflow: 'auto'
                    }}>
                        {/* 自主导航规则 */}
                        <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#006665', marginBottom: '10px', borderBottom: '1px solid #006665', paddingBottom: '5px' }}>自主导航规则</div>

                        <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>罐区高级规则：</div>
                        <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px', marginBottom: '15px' }}>
                            <div>• 陌生区域：基于罐区坐标生成"宇"字形环绕路径</div>
                            <div>• 高度 ≤ 10m 的罐体：距离罐体0.5m环绕</div>
                            <div>• 高度 {'>'} 10m 的罐体：距离罐体2m环绕</div>
                        </div>

                        <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>障碍物规则：</div>
                        <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px', marginBottom: '15px' }}>
                            <div>• 距离障碍物 {'>'} 1.5m：继续沿当前路径行驶</div>
                            <div>• 距离障碍物 ≤ 1.5m：触发停止并执行路径重规划</div>
                        </div>

                        <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>示例配置：</div>
                        <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
                            <div>• 罐区A：优先级高，检查点15个</div>
                            <div>• 罐区B：优先级中，检查点10个</div>
                            <div>• 罐区C：优先级低，检查点8个</div>
                        </div>
                    </div>
                </Col>

                {/* 右侧背景图和监控信息区域 */}
                <Col span={18}>
                    <div style={{
                        position: 'relative',
                        width: '100%',
                        height: '100%',
                        borderRadius: '10px',
                        overflow: 'hidden',
                        border: '1px solid rgba(0, 102, 101, 0.2)'
                    }}>
                        {/* 背景图 */}
                        <img
                            src={taskPlanBg}
                            alt="任务规划与执行流程"
                            style={{
                                width: '100%',
                                height: '100%',
                                objectFit: 'cover'
                            }}
                        />

                        {/* 多级实时监控信息 - 右上角 */}
                        <div style={{
                            position: 'absolute',
                            top: '20px',
                            right: '20px',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            padding: '15px',
                            borderRadius: '8px',
                            border: '1px solid #006665',
                            width: '300px',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                        }}>
                            <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#006665', marginBottom: '10px', borderBottom: '1px solid #006665', paddingBottom: '5px' }}>多级实时监控</div>

                            {/* 一级监控信息 */}
                            <div style={{ marginBottom: '15px' }}>
                                <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>1. 高危罐区监控</div>
                                <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
                                    <div>• 罐区A - 红外检测正常，压力稳定</div>
                                    <div>• 罐区B - 温度监测中，运行状态良好</div>
                                    <div>• 泄漏检测系统 - 无异常信号</div>
                                </div>
                            </div>

                            {/* 二级监控信息 */}
                            <div style={{ marginBottom: '15px' }}>
                                <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>2. 机器人状态监控</div>
                                <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
                                    <div>• ROB-001 - 高危罐区A，电量85%，运行中</div>
                                    <div>• ROB-002 - 高危罐区B，电量72%，运行中</div>
                                    <div>• ROB-003 - 泵房区域，电量15%，待充电</div>
                                </div>
                            </div>

                            {/* 三级监控信息 */}
                            <div>
                                <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>3. 环境参数监控</div>
                                <div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
                                    <div>• 温度 - 26°C，湿度 - 58%</div>
                                    <div>• 风速 - 2.3m/s，风向 - 东北</div>
                                    <div>• 气体浓度 - 正常范围</div>
                                </div>
                            </div>
                        </div>

                        {/* 浮动标签 */}
                        <div style={{
                            position: 'absolute',
                            top: '30%',
                            left: '20%',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            padding: '8px 12px',
                            borderRadius: '15px',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                            fontSize: '12px',
                            color: '#006665'
                        }}>
                            📦 更多功能
                        </div>

                        <div style={{
                            position: 'absolute',
                            bottom: '40%',
                            left: '40%',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            padding: '8px 12px',
                            borderRadius: '15px',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                            fontSize: '12px',
                            color: '#006665'
                        }}>
                            📋 调拨出库
                        </div>

                        <div style={{
                            position: 'absolute',
                            bottom: '25%',
                            right: '35%',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            padding: '8px 12px',
                            borderRadius: '15px',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                            fontSize: '12px',
                            color: '#006665'
                        }}>
                            📥 生产入库
                        </div>

                        <div style={{
                            position: 'absolute',
                            bottom: '15%',
                            right: '15%',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            padding: '8px 12px',
                            borderRadius: '15px',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                            fontSize: '12px',
                            color: '#006665'
                        }}>
                            📦 其他入库
                        </div>

                        {/* 机器人位置标记 */}
                        <div style={{
                            position: 'absolute',
                            bottom: '35%',
                            left: '45%',
                            textAlign: 'center'
                        }}>
                            <div style={{
                                width: '15px',
                                height: '15px',
                                borderRadius: '50%',
                                backgroundColor: '#52c41a',
                                border: '2px solid white',
                                boxShadow: '0 0 10px #52c41a',
                                margin: '0 auto 5px'
                            }}></div>
                            <div style={{ backgroundColor: 'rgba(82, 196, 26, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>ROB-001</div>
                        </div>

                        <div style={{
                            position: 'absolute',
                            bottom: '30%',
                            right: '15%',
                            textAlign: 'center'
                        }}>
                            <div style={{
                                width: '15px',
                                height: '15px',
                                borderRadius: '50%',
                                backgroundColor: '#52c41a',
                                border: '2px solid white',
                                boxShadow: '0 0 10px #52c41a',
                                margin: '0 auto 5px'
                            }}></div>
                            <div style={{ backgroundColor: 'rgba(82, 196, 26, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>ROB-002</div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    );
};
const StandardManagement = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取

    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return (
        <div style={{ backgroundColor: '#fff', padding: '20px', borderBottomLeftRadius: '10px', }}>
            <Title title={'巡检标准管理'}></Title>
            <Row style={{ marginTop: '20px' }}>
                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }}>新建方案</Button>
                <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
            </Row>
            <Row style={{ marginTop: '20px', minHeight: '450px' }}>
                <StandardTable></StandardTable>
            </Row>
            <Row style={{ marginTop: '20px' }}>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}
                ></TablePagination>
            </Row>
        </div>
    )
}
const DeviceAttributeSettings = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const treeData = [
        {
            title: '发电机区域',
            key: '发电机区域',
            children: [
                { title: '#1 发电机', key: '#1发电机', },
                { title: '#2 发电机', key: '#2发电机', },
                { title: '#3 发电机', key: '#3发电机', },
                { title: '#4 发电机', key: '#4发电机', },
                { title: '#5 发电机', key: '#5发电机', },
            ]
        },
        {
            title: '中水处理区',
            key: '中水处理区',
            children: [
                { title: '中水过滤装置A', key: '中水过滤装置A', },
                { title: '中水过滤装置B', key: '中水过滤装置B', },
            ]
        },
        {
            title: '除盐水区',
            key: '除盐水区',
            children: [
                { title: '除盐水泵1', key: '除盐水泵1', },
                { title: '除盐水泵2', key: '除盐水泵2', },
                { title: '除盐水泵3', key: '除盐水泵3', },
            ]
        }]
    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return (
        <div style={{ backgroundColor: '#fff', padding: '20px' }}>
            <Row>
                <Col span={4} style={{ backgroundColor: 'rgb(231, 242, 237)', padding: '20px' }}>
                    <Title title={'巡检区域&设备'}></Title>
                    <Search style={{ margin: '20px 0' }}
                        placeholder={'搜索节点'}
                    ></Search>
                    <Tree
                        treeData={treeData}
                        className={styles['tree']}
                        checkable
                        showLine
                        defaultExpandParent={true}
                        defaultExpandedKeys={['发电机区域', '中水处理区', '除盐水区',]}
                    >

                    </Tree>
                </Col>
                <Col span={20} style={{ padding: '10px' }}>
                    <Row style={{ marginBottom: '20px' }}>
                        <Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>重新选择</Button>
                    </Row>
                    <Title title={'#1 发电机'}></Title>
                    <Row style={{ marginTop: '20px', minHeight: '450px' }}>
                        <DeviceAttribute></DeviceAttribute>
                    </Row>
                    <Row style={{ marginTop: '20px' }}>
                        <TablePagination
                            currentPage={currentPage}
                            pageSize={pageSize}
                            total={total}
                            onPageChange={handlePageChange}
                            onPageSizeChange={handlePageSizeChange}
                        ></TablePagination>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}
const items = [
    {
        label: <MenuBg text={'智能巡检范围监控'}></MenuBg>,
        key: '智能巡检范围监控',
    },
    {
        label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
        key: '任务规划与执行流程',
    },
    {
        label: <MenuBg text={'巡检内容'}></MenuBg>,
        key: '巡检内容',
    },
    {
        label: <MenuBg text={'巡检管理'}></MenuBg>,
        key: '巡检管理',
    },
    {
        label: <MenuBg text={'数据分析巡检管理'}></MenuBg>,
        key: '数据分析巡检管理',
    },
]
const InspectionManagement = () => {
    const [activeTab, setActiveTab] = useState('实时监控');

    return (
        <div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '600px', marginBottom: 10, borderRadius: '15px' }}>
            {/* 顶部按钮 */}
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                backgroundColor: '#fff',
                padding: '16px 24px',
                color: 'black',
                fontWeight: '400',
                fontSize: 18
            }}>
                <div>
                    | 智能巡检内容监控中心
                </div>
                <div>
                    <Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>一键生成报告</Button>
                    <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>任务调度</Button>
                    <Button className={styles['delBtn']} icon={<IconRefresh />} style={{ backgroundImage: `url(${btnImg2})`, width: 120 }}>刷新数据</Button>
                </div>
            </div>
            {/* 左侧导航 */}
            <div style={{ display: 'flex', height: 'calc(100vh - 200px)' }}>
                <div style={{
                    width: 240,
                    backgroundColor: '#fff',
                    // minHeight: 'calc(100vh - 60px)',
                    padding: 16
                }}>
                    <nav>
                        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                            {['实时监控', '巡检任务', '报告管理'].map((tab) => (
                                <li key={tab} style={{ marginBottom: 22 }}>
                                    <button
                                        onClick={() => setActiveTab(tab)}
                                        className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
                                        style={{
                                            backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
                                                tab === '实时监控' ? `url(${menuInactiveBg1})` :
                                                    tab === '巡检任务' ? `url(${menuInactiveBg2})` :
                                                        `url(${menuInactiveBg3})`
                                        }}
                                    >
                                        {tab}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </nav>
                </div>

                {/* 右侧内容区域 */}
                <div style={{ flex: 1 }}>
                    {activeTab === '实时监控' && (
                        <div>
                            {/* 搜索栏 */}
                            <div style={{ display: 'flex', marginBottom: '20px', alignItems: 'center' }}>
                                <Input placeholder="请输入名称" style={{ width: '200px', marginRight: '15px' }} />
                                <Select placeholder="区域" style={{ width: '120px', marginRight: '15px' }}>
                                    <Select.Option value="全部">全部</Select.Option>
                                </Select>
                                <Select placeholder="任务" style={{ width: '120px', marginRight: '15px' }}>
                                    <Select.Option value="全部">全部</Select.Option>
                                </Select>
                                <Select placeholder="设备" style={{ width: '120px', marginRight: '15px' }}>
                                    <Select.Option value="全部">全部</Select.Option>
                                </Select>
                                <Button className={styles['addBtn']} icon={<IconSearch />} style={{ backgroundImage: `url(${btnImg1})`, width: 120 }}>查询</Button>
                                <Button className={styles['resetBtn']} icon={<IconRefresh />} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>重置</Button>
                            </div>

                            {/* 内容区域 - 调整高度布局，顶部贴近，底部只留10px空间 */}
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1fr', gap: '10px', marginTop: 0, marginBottom: '10px', height: '100%', minHeight: '0' }}>
                                {/* 传感器仪表盘 */}
                                <div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
                                    <h3 style={{ marginBottom: '10px', marginTop: 0 }}>传感器仪表盘</h3>
                                    <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '10px', alignItems: 'center' }}>
                                        <TemperatureHumidityGauges temperature={28} humidity={55} width={240} height={180} />
                                    </div>
                                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
                                        <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>甲烷: 0.01%</div>
                                        <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>一氧化碳: 0.0ppm</div>
                                        <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>分贝值: 69.2db</div>
                                    </div>
                                </div>

                                {/* 双面监控区 */}
                                <div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
                                    <h3 style={{ marginBottom: '10px', marginTop: 0 }}>双面监控区</h3>
                                    <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: '10px' }}>
                                        <div style={{ backgroundColor: '#000', borderRadius: '4px', height: '150px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                                            <img
                                                src={thermalImage}
                                                alt="红外热成像图"
                                                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 4 }}
                                            />
                                        </div>
                                        <div style={{ backgroundColor: '#000', borderRadius: '4px', height: '150px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                                            <img
                                                src={thermalImage}
                                                alt="视频监控画面"
                                                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 4 }}
                                            />
                                        </div>
                                    </div>
                                </div>

                                {/* 机器人信息和检测设备状态 */}
                                <div style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '10px' }}>
                                    <div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, marginBottom: 0, flex: 1, display: 'flex', flexDirection: 'column' }}>
                                        <h3 style={{ marginBottom: '10px', marginTop: 0 }}>机器人实时信息</h3>
                                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>机器人名称: AAA</div>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>当前位置: 中控室</div>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>速度: 0.07m/s</div>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>当前模式: 巡回检测</div>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>电量: 85%</div>
                                            <div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>累计里程: 96km</div>
                                        </div>
                                    </div>

                                    <div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, flex: 2, display: 'flex', flexDirection: 'column' }}>
                                        <h3 style={{ marginBottom: '10px', marginTop: 0 }}>检测设备状态</h3>
                                        <Table
                                            dataSource={[
                                                { key: '1', 序号: 1, 接管设备: '接管设备A', 设备名称: '设备C', 状态: '正常', 检测时间: '2025-10-12 16:40', 检测精度: '已处理' },
                                                { key: '2', 序号: 2, 接管设备: '接管设备B', 设备名称: '设备C', 状态: '正常', 检测时间: '2025-10-10 09:10', 检测精度: '误报' },
                                            ]}
                                            columns={[
                                                { title: '序号', dataIndex: '序号', key: '序号', width: '40px' },
                                                { title: '接管设备', dataIndex: '接管设备', key: '接管设备', width: '80px' },
                                                { title: '设备名称', dataIndex: '设备名称', key: '设备名称', width: '60px' },
                                                { title: '状态', dataIndex: '状态', key: '状态', width: '60px' },
                                                { title: '检测时间', dataIndex: '检测时间', key: '检测时间', width: '120px' },
                                                { title: '检测精度', dataIndex: '检测精度', key: '检测精度', width: '60px' },
                                            ]}
                                            pagination={{
                                                total: 85,
                                                pageSize: 10,
                                                current: 8,
                                                showSizeChanger: true,
                                                pageSizeOptions: ['10', '20', '50', '100'],
                                            }}
                                            size="small"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === '巡检任务' && (
                        <div style={{ padding: '20px' }}>
                            {/* 巡检任务标题栏 */}
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                                <h3 style={{ margin: 0, color: '#333' }}>巡检任务管理</h3>
                                <div>
                                    <Button type="primary" icon={<PlusOutlined />} style={{ marginRight: '10px' }}>新建任务</Button>
                                    <Button icon={<ExportOutlined />}>导出任务</Button>
                                </div>
                            </div>

                            {/* 横向时间轴布局 */}
                            <div style={{ position: 'relative', height: '200px', margin: '40px 0' }}>
                                {/* 时间轴线 - 横向 */}
                                <div style={{
                                    position: 'absolute',
                                    height: '6px',
                                    backgroundColor: '#2C9E9D',
                                    left: 0,
                                    right: 0,
                                    top: '50%',
                                    marginTop: '-3px',
                                    borderRadius: '3px'
                                }}></div>

                                {/* 任务卡片组 - 上面3个 */}
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    position: 'relative',
                                    height: '50%',
                                    marginBottom: '20px'
                                }}>
                                    {[
                                        {
                                            date: '2025/09/12',
                                            title: '罐区A-2小时巡检任务',
                                            startTime: '2025-10-17 09:00',
                                            progress: 75,
                                            abnormalCount: 3
                                        },
                                        {
                                            date: '2025/09/28',
                                            title: '泵房设备安全检查',
                                            startTime: '2025-10-18 14:30',
                                            progress: 100,
                                            abnormalCount: 0
                                        },
                                        {
                                            date: '2025/10/15',
                                            title: '管线压力监测任务',
                                            startTime: '2025-10-19 08:00',
                                            progress: 45,
                                            abnormalCount: 2
                                        }
                                    ].map((task, index) => (
                                        <TaskCard key={index} task={task} />
                                    ))}
                                </div>

                                {/* 任务卡片组 - 下面2个 */}
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'center',
                                    position: 'relative',
                                    height: '50%',
                                    gap: '20px'
                                }}>
                                    {[
                                        {
                                            date: '2025/10/19',
                                            title: '环境参数采集任务',
                                            startTime: '2025-10-20 10:00',
                                            progress: 0,
                                            abnormalCount: 0
                                        },
                                        {
                                            date: '2025/10/20',
                                            title: '安全阀定期检查',
                                            startTime: '2025-10-21 15:00',
                                            progress: 0,
                                            abnormalCount: 0
                                        }
                                    ].map((task, index) => (
                                        <div key={index} style={{
                                            position: 'relative',
                                            width: '18%'
                                        }}>
                                            {/* 时间节点 */}
                                            <div style={{
                                                position: 'absolute',
                                                width: '20px',
                                                height: '20px',
                                                backgroundColor: '#2C9E9D',
                                                borderRadius: '50%',
                                                left: '50%',
                                                top: '50%',
                                                marginLeft: '-10px',
                                                marginTop: '-10px',
                                                zIndex: 1
                                            }}></div>

                                            {/* 日期标签 */}
                                            <div style={{
                                                position: 'absolute',
                                                top: '60%',
                                                left: '50%',
                                                transform: 'translateX(-50%)',
                                                backgroundColor: '#2C9E9D',
                                                color: 'white',
                                                padding: '5px 10px',
                                                borderRadius: '15px',
                                                fontSize: '12px',
                                                fontWeight: 'bold'
                                            }}>
                                                {task.date}
                                            </div>

                                            {/* 任务卡片 */}
                                            <div style={{
                                                position: 'absolute',
                                                top: 0,
                                                left: '50%',
                                                transform: 'translateX(-50%)',
                                                width: '90%',
                                                backgroundColor: '#f8f9fa',
                                                padding: '15px',
                                                borderRadius: '10px',
                                                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                                                border: '1px solid #e9ecef'
                                            }}>
                                                <h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
                                                <p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
                                                    <strong>{task.title}</strong>
                                                </p>
                                                <p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
                                                    开始时间：{task.startTime}
                                                </p>
                                                <p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
                                                    完成进度：{task.progress}%
                                                </p>
                                                <div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
                                                    <span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
                                                    <span style={{ fontSize: '11px', color: '#666' }}>
                                                        异常数：{task.abnormalCount}
                                                    </span>
                                                </div>
                                                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
                                                    <Button size="small" type="primary" style={{
                                                        backgroundColor: '#2C9E9D',
                                                        borderColor: '#2C9E9D',
                                                        fontSize: '11px',
                                                        padding: '0 8px',
                                                        height: '24px'
                                                    }}>
                                                        查看详情
                                                    </Button>
                                                    <Button size="small" danger style={{
                                                        fontSize: '11px',
                                                        padding: '0 8px',
                                                        height: '24px'
                                                    }}>
                                                        终止任务
                                                    </Button>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === '报告管理' && (
                        <div style={{ padding: '20px' }}>
                            <h1 style={{ marginBottom: '20px', textAlign: 'left' }}>| 历史报告</h1>
                            <Button type="primary" style={{ marginBottom: '20px' }}>一键生成分析报告</Button>
                            <Table
                                columns={[
                                    { title: '序号', dataIndex: 'id', key: 'id', align: 'center' },
                                    { title: '报告名称', dataIndex: 'name', key: 'name', align: 'center' },
                                    { title: '生成时间', dataIndex: 'time', key: 'time', align: 'center' },
                                    { title: '区域', dataIndex: 'area', key: 'area', align: 'center' },
                                    { title: '异常数', dataIndex: 'abnormal', key: 'abnormal', align: 'center' },
                                    {
                                        title: '操作',
                                        key: 'action',
                                        align: 'center',
                                        render: (_, record) => (
                                            <Space size="middle">
                                                <a style={{ color: 'green' }}>查看详情</a>
                                                <a style={{ color: 'red' }}>下载PDF</a>
                                            </Space>
                                        ),
                                    },
                                ]}
                                dataSource={[
                                    { id: 1, name: 'XL001', time: '2025-10-18 00:28', area: '红色区域', abnormal: '电气专业' },
                                    { id: 2, name: 'XL002', time: '2025-10-14 03:26', area: '橙色区域', abnormal: '水处理' },
                                ]}
                                pagination={{
                                    total: 85,
                                    showSizeChanger: true,
                                    showTotal: (total) => `共${total}条`,
                                    pageSizeOptions: ['10', '20', '50'],
                                    defaultPageSize: 10,
                                }}
                                bordered
                            />
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

const list = {
    '巡检管理': <InspectionManagement />,
    '巡检标准管理': <StandardManagement />,
    '设备属性设置': <DeviceAttributeSettings />,
    '智能巡检范围监控': <SmartInspectionRange />,
    '巡检内容': <SmartInspectionContent />,
    '任务规划与执行流程': <TaskPlanningFlow />,
    '数据分析巡检管理': <DataAnalysisInspectionManagement />, // 添加新组件
}
const InspectionTaskPlan = () => {
    const [current, setCurrent] = useState('智能巡检范围监控')
    const onclick = (e) => {
        console.log(e.key)
        setCurrent(e.key)
    }
    return (
        <>
            <div className={styles['header']}>
                <div className={styles['logo']}>
                    <span style={{ marginLeft: '-20px' }}> 当前:&nbsp;&nbsp;{current}</span>

                </div>
                <Menu
                    onClick={onclick}
                    items={items}
                    selectedKeys={[current]}
                    mode={'horizontal'}
                    style={{ flex: '1' }}
                    className={styles['menu']}
                >
                </Menu>
            </div>
            {list[current]}

        </>
    )
}
export default InspectionTaskPlan