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

import React, {useState} from "react";
import {Badge, Col, ConfigProvider, message, Modal, Row, Table, Timeline,} from "antd"

export default function getGisSbleData(props: { height: string }) {
    // 添加图片预览相关状态
    const [previewImage, setPreviewImage] = useState<string | null>(null);
    const [previewVisible, setPreviewVisible] = useState(false);
    // 设备列表状态
    const [TodoWorkOrder, setTodoWorkOrder] = useState(false)
    const [TodoWorkOrderDevice, setTodoWorkOrderDevice] = useState(null)
    // 添加工单表格数据和列定义
    const todoWorkOrders = [
        {
            id: '1',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309001',
            EventLevel: 'high',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖一',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }, {
            id: '2',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309002',
            EventLevel: 'low',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖二',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }, {
            id: '3',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309003',
            EventLevel: 'low',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖三',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }, {
            id: '4',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309004',
            EventLevel: 'low',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖四',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }, {
            id: '5',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309005',
            EventLevel: 'medium',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖五',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }, {
            id: '6',  // 添加唯一 id 作为 rowKey
            equipmentId: 'WO202309006',
            EventLevel: 'medium',
            EventClassification: '污水井盖',
            Region: '区域一',
            ReportPerson: '张三',
            CurrentLink: '维护中',
            EventDescription: '井盖出现裂痕，需要维修',
            PictureBeforeDisposal: 'sunhuaiManhole.png',
            deviceName: '井盖六',
            createTime: '2023-09-15 08:30:00',
            status: 'pending',
            type: '故障维修',
        }
    ];

    const workOrderColumns = [
        {
            title: '工单编号',
            dataIndex: 'equipmentId',
            key: 'equipmentId',
            width: '20%',
            ellipsis: true,  // 添加省略号属性
            render: (text) => <span style={{color: 'white', fontWeight: 'bold'}}>{text}</span>
        },
        {
            title: '工单类型',
            dataIndex: 'type',
            key: 'type',
            width: '18%',
            ellipsis: true,  // 添加省略号属性
            render: (text) => <span style={{color: 'white'}}>{text}</span>
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName',
            width: '18%',
            ellipsis: true,  // 添加省略号属性
            render: (text) => <span style={{color: 'white'}}>{text}</span>
        },
        {
            title: '优先级',
            dataIndex: 'EventLevel',
            key: 'EventLevel',
            width: '14%',
            render: (priority) => {
                const colorMap = {
                    high: '#f5222d',
                    medium: '#faad14',
                    low: '#52c41a'
                };
                const textMap = {
                    high: '高',
                    medium: '中',
                    low: '低'
                };
                return (
                    <Badge color={colorMap[priority]} text={
                        <span style={{color: colorMap[priority]}}>{textMap[priority]}</span>
                    }/>
                );
            }
        },
    ];
    // 添加工单行点击处理函数 - 修改为打开设备详情弹窗
    const handleWorkOrderRowClick = (record) => {
        // 根据工单中的设备名称查找对应的设备信息
        const device = todoWorkOrders.find(device => device.deviceName === record.deviceName);
        if (device) {
            // 设置选中设备并打开弹窗
            setTodoWorkOrderDevice(device);
            setTodoWorkOrder(true);
        } else {
            message.warning(`未找到设备: ${record.deviceName}`);
        }
    };
    return (
        <ConfigProvider
            theme={{
                components: {
                    Table: {
                        headerBorderRadius: 0,
                    },
                },
            }}
        >
            <div style={{height: props.height}}>
                <Table
                    className="custom-table"
                    columns={workOrderColumns}
                    dataSource={todoWorkOrders}
                    rowKey="id"
                    pagination={false}
                    size="small"
                    style={{backgroundColor: 'transparent', padding: '10px'}}
                    // rowClassName={() => 'bg-[#3a3899]'}
                    // 添加固定表头配置
                    scroll={{x: 200, y: 180}}
                    // 添加行点击事件
                    onRow={(record) => ({
                        onClick: () => handleWorkOrderRowClick(record),
                        style: {
                            cursor: 'pointer', // 鼠标悬停显示手型
                        }
                    })}
                />
                {/*待办工单详情*/}
                <Modal
                    title="待办工单详情"
                    open={TodoWorkOrder}
                    onCancel={() => setTodoWorkOrder(false)}
                    // footer={null}
                    width={1000}
                    className="custom-modal"
                    style={{
                        textAlign: 'center'
                    }}
                >
                    {TodoWorkOrderDevice && (
                        <div className="space-y-4" style={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}>
                            <div style={{
                                width: '50%',
                            }}>
                                <div className="space-y-4" style={{textAlign: 'left'}}>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备名称:</strong> {TodoWorkOrderDevice.deviceName}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>设备类型:</strong> {TodoWorkOrderDevice.EventClassification}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>事件类型:</strong> {TodoWorkOrderDevice.type}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>事件描述:</strong> {TodoWorkOrderDevice.EventDescription}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>所属区域:</strong> {TodoWorkOrderDevice.Region}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>当前环节:</strong> {TodoWorkOrderDevice.CurrentLink}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>优先级:</strong>
                                                <Badge
                                                    style={{
                                                        marginLeft: '10px'
                                                    }}
                                                    status={
                                                        TodoWorkOrderDevice.EventLevel === "high" ? "error" :
                                                            TodoWorkOrderDevice.EventLevel === "medium" ? "warning" : "success"
                                                    }
                                                    text={
                                                        <span style={{
                                                            color:
                                                                TodoWorkOrderDevice.EventLevel === "high" ? "#f5222d" :
                                                                    TodoWorkOrderDevice.EventLevel === "medium" ? "#faad14" : "#52c41a"
                                                        }}>
                                                        {
                                                            TodoWorkOrderDevice.EventLevel === "high" ? "高优先级" :
                                                                TodoWorkOrderDevice.EventLevel === "medium" ? "中优先级" : "低优先级"
                                                        }
                                                    </span>
                                                    }
                                                />
                                            </div>
                                        </Col>
                                    </Row>

                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>上报人:</strong> {TodoWorkOrderDevice.ReportPerson}
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <div>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>上报时间:</strong> {TodoWorkOrderDevice.createTime}
                                            </div>
                                        </Col>
                                    </Row>
                                    {/**/}
                                    <Row>
                                        <Col>
                                            <div style={{display: 'flex'}}>
                                                <strong style={{
                                                    color: '#B0E0E6'
                                                }}>现场图片:</strong>
                                                <img
                                                    src={TodoWorkOrderDevice.PictureBeforeDisposal}
                                                    alt="现场图片"
                                                    style={{width: '40%', marginLeft: '10px', cursor: 'pointer'}}
                                                    onClick={() => {
                                                        setPreviewImage(TodoWorkOrderDevice.PictureBeforeDisposal);
                                                        setPreviewVisible(true);
                                                    }}
                                                />
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>

                            <div style={{width: '50%'}}>
                                <div style={{
                                    backgroundSize: '100% 100%',
                                    textAlign: 'left',
                                    color: 'white',
                                    fontSize: '18px',
                                    fontWeight: 'bold',
                                    marginBottom: '10px' // 添加底部间距
                                }}>
                                    工单处理流程
                                </div>
                                <div style={{
                                    textAlign: 'left',
                                    height: '500px', // 设置固定高度
                                    overflowY: 'auto', // 垂直方向超出时显示滚动条
                                    padding: '10px' // 添加内边距，优化视觉效果
                                }}>
                                    <Timeline
                                        items={[
                                            {
                                                color: 'green',
                                                children: (
                                                    <div style={{color: 'white'}}>
                                                        <p style={{
                                                            fontSize: '16px',
                                                            fontWeight: 'bold',
                                                            color: '#B0E0E6'
                                                        }}>【指挥协调上报】</p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>经办人员:</strong> 张三 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理意见:</strong> 无 <p></p>
                                                    </div>
                                                ),
                                            },
                                            {
                                                color: 'green',
                                                children: (
                                                    <div style={{color: 'white'}}>
                                                        <p style={{
                                                            fontSize: '16px',
                                                            fontWeight: 'bold',
                                                            color: '#B0E0E6'
                                                        }}>【指挥协调待受理】</p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理时间:</strong> 2025-03-17 09:15:19 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>经办人员:</strong> 受理员 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理意见:</strong> 无 <p></p>
                                                    </div>
                                                ),
                                            },
                                            {
                                                children: (
                                                    <div style={{color: 'white'}}>
                                                        <p style={{
                                                            fontSize: '16px',
                                                            fontWeight: 'bold',
                                                            color: '#B0E0E6'
                                                        }}>【指挥协调案件立案】</p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>经办人员:</strong> 值班长 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理意见:</strong> 无 <p></p>
                                                    </div>
                                                ),
                                            },
                                            {
                                                color: 'gray',
                                                children: (
                                                    <div style={{color: 'white'}}>
                                                        <p style={{
                                                            fontSize: '16px',
                                                            fontWeight: 'bold',
                                                            color: '#B0E0E6'
                                                        }}>【指挥协调待派遣】</p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>经办人员:</strong> 派遣员 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理意见:</strong> 派遣给:'二二路灯管理所,时限:4小时 <p></p>
                                                    </div>
                                                ),
                                            },
                                            {
                                                color: 'gray',
                                                children: (
                                                    <div style={{color: 'white'}}>
                                                        <p style={{
                                                            fontSize: '16px',
                                                            fontWeight: 'bold',
                                                            color: '#B0E0E6'
                                                        }}>【指挥协调处理】</p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>经办人员:</strong> 张三 <p></p>
                                                        <strong style={{
                                                            color: '#B0E0E6'
                                                        }}>办理意见:</strong> 无 <p></p>
                                                    </div>
                                                ),
                                            }, {
                                                color: '#00CCFF',
                                                children: <strong style={{
                                                    color: '#00CCFF',
                                                    fontWeight: 'bold',
                                                    fontSize: '16px',
                                                }}>工单结束</strong>,
                                            },
                                        ]}
                                    />
                                </div>
                            </div>
                        </div>
                    )}
                </Modal>
                {/* 添加图片预览弹窗 */}
                <Modal
                    visible={previewVisible}
                    footer={null}
                    onCancel={() => setPreviewVisible(false)}
                    maskClosable={true}
                    width="800px"
                    height="500px"
                    bodyStyle={{padding: 0}}
                    closable={true}
                    zIndex={10000}
                >
                    {previewImage && (
                        <img
                            src={previewImage}
                            alt="预览图片"
                            style={{
                                width: '700px',
                                // maxWidth: '90vw',
                                // maxHeight: '90vh',
                                display: 'block',
                                margin: '0 auto'
                            }}
                        />
                    )}
                </Modal>

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