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

import React from "react";
import {Badge, ConfigProvider, Table,} from "antd"

function dtxxdata(props: { height: string }) {
    return (
       <ConfigProvider
        theme={{
            components: {
                Table: {
                    headerBorderRadius: 0,
                },
            },
        }}
       >
           <div style={{height: props.height}}>
               <Table className="fixed-header"
                      headerBg='red'
                      bordered={false}
                      columns={[
                          {
                              title: '时间',
                              dataIndex: 'time',
                              key: 'time',
                              width: '30%',
                              render: (text) => <span style={{color: 'white'}}>{text}</span>
                          },
                          {
                              title: '事件',
                              dataIndex: 'event',
                              key: 'event',
                              width: '50%',
                              ellipsis: true,
                              render: (text) => <span style={{color: 'white'}}>{text}</span>
                          },
                          {
                              title: '状态',
                              dataIndex: 'status',
                              key: 'status',
                              width: '20%',
                              render: (status) => (
                                  <Badge status={status === 'success' ? 'success' : 'processing'}
                                         text={<span style={{color: status === 'success' ? '#52c41a' : '#faad14'}}>
                                                                   {status === 'success' ? '已完成' : '处理中'}
                                                               </span>}/>
                              )
                          }
                      ]}
                      dataSource={[
                          {key: '1', time: '2025-09-23 09:23', event: '污水井盖#W023发生倾斜告警', status: 'processing'},
                          {key: '2', time: '2025-08-45 09:23', event: '电力井盖#D112维修完成', status: 'success'},
                          {key: '3', time: '2025-07-18 09:23', event: '通信井盖#T056电压异常', status: 'processing'},
                          {key: '4', time: '2025-08-23 09:23', event: '雨水井盖#Y091更换完成', status: 'success'},
                          {key: '5', time: '2025-08-23 09:23', event: '燃气井盖#R034压力告警', status: 'success'},
                          {key: '6', time: '2025-08-23 09:23', event: '新增通信井盖#T057安装完成', status: 'success'},
                          {key: '7', time: '2025-08-23 09:23', event: '电力井盖#D108电池更换', status: 'success'}
                      ]}
                      pagination={false}
                      size="small"
                      style={{backgroundColor: 'transparent'}}
                   // 添加固定表头配置
                      scroll={{x: 200, y: 138}}></Table>
               <style jsx global>{`
                .fixed-header .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; /* 移除边框 */
                }
                 /* 新增：移除表头伪元素样式 */
                .fixed-header .ant-table-thead > tr > th::before,
                .fixed-header .ant-table-thead > tr > th::after {
                    content: none !important; /* 清除伪元素内容 */
                    background: none !important; /* 清除背景 */
                }

                .fixed-header .ant-table-cell-scrollbar {
                    background-color: #3a3899 !important; /* 目标背景色 */
                    color: white !important; /* 表头文字颜色 */
                    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
                }
            `}</style>
           </div>
       </ConfigProvider>
    )
}

export default dtxxdata;