
import styles from './inspectionRecords.less'
import titleBg from '@/assets/img/recordTitleBg.png'
import {useEffect, useRef, useState} from "react";
import {Button, Col, DatePicker, Drawer, Form, Input, Menu, Row, Select, Table, Tag, Tree,} from "antd";
import {MenuBg, TablePagination} from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan";
import {DownOutlined, PlusOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons";
import {Title} from "@/pages/inspectiontasks/InspectionTasks";
import * as echarts from 'echarts';
import btnImg1 from '@/assets/img/planBtn1.png'
import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png'
import record1 from '@/assets/img/record1.png'
import record2 from '@/assets/img/record2.png'
import record3 from '@/assets/img/record3.png'

import tableImg1 from '@/assets/img/tableImg1.png'
import tableImg2 from '@/assets/img/tableImg2.png'
import tableImg3 from '@/assets/img/tableImg3.png'
import tableImg4 from '@/assets/img/tableImg4.png'
import tableImg5 from '@/assets/img/tableImg5.png'
import tableImg6 from '@/assets/img/tableImg6.png'

const {RangePicker}=DatePicker

const Drawers=(props)=>{
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName',
            // width: 200,
        },
        {
            title: '关注指标',
            dataIndex: 'metric',
            key: 'metric',
            // width: 150,
        },
        {
            title: '指标值',
            dataIndex: 'value',
            key: 'value',
            // width: 120,
            render: (value) => <strong>{value}</strong>,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 70,
            render: (status) => (
                <Tag color={status === '正常' ? 'green' : 'red'}>
                    {status}
                </Tag>
            ),
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width:140,
            ellipsis: true,
        },
    ];
    // 数据源
    const dataSource = [
        {
            key: '1',
            deviceName: '1# 储油罐',
            metric: '液位高度',
            value: '10.5m',
            status: '正常',
            remark: '无泄漏',
        },
        {
            key: '2',
            deviceName: '输油主泵',
            metric: '出口压力',
            value: '0.6MPa',
            status: '正常',
            remark: '振动值<3mm/s',
        },
        {
            key: '3',
            deviceName: '中控室 DCS 系统',
            metric: '信号冗余度',
            value: '99%',
            status: '正常',
            remark: '双路供电稳定',
        },
    ];
    console.log(props.row)
    return(
        <Drawer
            title="查看详情"
            closable={{'aria-label': 'Close Button'}}
            open={props.open}
            onClose={props.onClose}
            width={522}
            className={styles['customDrawer']}
        >
            <Title title={'基本信息'}></Title>
            <Row className={styles['drawerRow']} wrap={true}>
                <Col span={12}>
                    <span>岗位类型：</span>{props.row.postType}
                </Col>
                <Col span={12}>
                    <span>签到人员：</span>{props.row.signPerson}
                </Col>
                <Col span={12}>
                    <span>值别：</span>{props.row.dutyLevel}
                </Col>
                <Col span={12}>
                    <span>签到时间：</span>{props.row.signDate}
                </Col>
                <Col span={12}>
                    <span>班次：</span>{props.row.shift}
                </Col>
                <Col span={12}>
                    <span>接班人员：</span>{props.row.handoverPerson}
                </Col>
                <Col span={12}>
                    <span>签到状态：</span>{props.row.signStatus}
                </Col>
                <Col span={12}>
                    <span>接班时间：</span>{props.row.handoverTime}
                </Col>
            </Row>
            <Title title={'当值记事'}></Title>
            <Row style={{marginTop:'20px',}}>
                <ul className={styles['drawersUl']}>
                    <li>1#储油罐液位10.5m稳定，输油主泵压力0.6MPa无波动，中控室DCS系统信号冗余度99%</li>
                </ul>

            </Row>
            <Row style={{marginTop:'20px'}}>
                <Title title={'关注设备及指标'}></Title>
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    pagination={false}
                    className={styles['drawersTable']}
                >

                </Table>
            </Row>
        </Drawer>
    )
}
const InspectionStatusComponent=({shifts,valueLong,statues,dataSource})=>{
    const columns = [
        {
            title: '巡检名称',
            dataIndex: 'inspectionName',
            key: 'inspectionName',
            align:'center',
            width:'20%',
        },
        {
            title: '巡检状态',
            dataIndex: 'inspectionStatus',
            key: 'inspectionStatus',
            align:'center',
            width:'20%',
        },
        {
            title: '巡检人',
            dataIndex: 'inspector',
            key: 'inspector',
            align:'center',
            width:'20%',
        },
        {
            title: '已巡区域',
            dataIndex: 'inspectedArea',
            key: 'inspectedArea',
            align:'center',
            width:'20%',
            render:(value)=>{
                return <>
                    <span style={{color:'#2C9E9D'}}>{value}</span>
                </>
            }
        },
        {
            title: '漏检区域',
            dataIndex: 'missedArea',
            key: 'missedArea',
            align:'center',
            width:'20%',
            render:(value)=>{
                return <>
                    <span style={{color:'#2C9E9D'}}>{value}</span>
                </>
            }
        },
    ];
    return(
        <>
            <Row  style={{width:'100%',color:'#006665'}}>
                <Col span={2}>班次:&nbsp;{shifts}</Col>
                <Col span={2}>值长:&nbsp;{valueLong}</Col>
                <Col span={2}>签到状态:&nbsp;{statues}</Col>
            </Row>
            <Row style={{width:'100%',marginTop:'20px'}}>
                <Table
                    pagination={false}
                    dataSource={dataSource}
                    columns={columns}
                    style={{width:'100%'}}
                    locale={{
                        emptyText:(
                            <div style={{display:'flex',justifyContent:'center',alignItems:'center',height:'40px'}}>
                                    暂无数据
                            </div>
                        )
                    }}
                >
                </Table>
            </Row>
        </>
    )
}
const Drawers1=({open,onClose,row})=>{
    console.log(row)
    return(
        <Drawer
            title={'查看详情'}
            open={open}
            onClose={onClose}
            width={522}
            className={styles['customDrawer']}
        >
            <Title title={'基本信息'}></Title>
            <Row wrap={true} style={{marginTop:'20px'}} gutter={[0,20]}>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>设备名称:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.equipmentName}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>异常属性:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.propertyName}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>阈值上限:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.max}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>实际检测值:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.inspectionValue}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>超限差值:</div></Col>
                        <Col><div className={styles['drawersValue']}>+500°C</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>巡检负责人:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.inspector}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>巡检时间:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.inspectionTime}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>异常处理状态:</div></Col>
                        <Col><div className={styles['drawersValue']}>{row.inspectionStatus}</div></Col>
                    </Row>
                </Col>
                <Col span={24}>
                    <Row>
                        <Col><div className={styles['drawersLabel']}>处理建议(可选)：:</div></Col>
                        <Col><div className={styles['drawersValue']}>立即停机检查，联系维保班组</div></Col>
                    </Row>
                </Col>
            </Row>
        </Drawer>
    )
}
const Drawers2=({open,row,onClose})=>{
    console.log(row)
    return(
        <Drawer
            title={'编辑'}
            width={300}
            open={open}
            onClose={onClose}
            className={styles['drawer2']}
        >
            <Title title={'基本信息'}></Title>
            <Row gutter={[0,20]} style={{marginTop:'20px'}}>
                <Col span={24}><label htmlFor="">期初分类:</label><span>{row.initialCategory}</span></Col>
                <Col span={24}><label htmlFor="">重点设备:</label><span>{row.keyEquipment}</span></Col>
                <Col span={24}><label htmlFor="">设备编号:</label><span>{row.equipmentNo}</span></Col>
                <Col span={24}><label htmlFor="">设备名称:</label><span>{row.equipmentName}</span></Col>
                <Col span={24}><label htmlFor="">设备状态:</label><span>{row.equipmentStatus}</span></Col>
                <Col span={24}><label htmlFor="">物资分类:</label><span>{row.materialCategory}</span></Col>
                <Col span={24}><label htmlFor="">价格分类:</label><span>{row.priceCategory}</span></Col>
                <Col span={24}><label htmlFor="">特种设备分类:</label><span>{row.specialEquipmentCategory}</span></Col>
                <Col span={24}><label htmlFor="">数量:</label><span>{row.quantity}</span></Col>
                <Col span={24}><label htmlFor="">计量单位:</label><span>{row.unit}</span></Col>
                <Col span={24}><label htmlFor="">规格:</label><span>{row.specification}</span></Col>
                <Col span={24}><label htmlFor="">安装位置:</label><span>{row.installationLocation}</span></Col>
                <Col span={24}><label htmlFor="">排序:</label><span>{row.sort}</span></Col>
                <Col span={24}><label htmlFor="">备注:</label><span>暂无</span></Col>
            </Row>
            <div style={{position:'absolute',bottom:'20px',right:'20px'}}>
                <Button className={styles['Drawer2Btn1']}>取消</Button>
                <Button className={styles['Drawer2Btn2']}>保存</Button>
            </div>
        </Drawer>
    )
}
//巡检记录首页
const InspectionRecordHomepage=()=>{
    const [data1,setData1]=useState([])
    const [data2,setData2]=useState([])
    const [data3,setData3]=useState([])
    const chartRef=useRef(null)
    const chartRef1=useRef(null)
    const chartRef2=useRef(null)
    const chartRef3=useRef(null)
    let chart=null
    let chart1=null
    let chart2=null
    let chart3=null
    useEffect(()=>{
        if (!chartRef.current) {
            return
        }
        chart=echarts.init(chartRef.current)
        const option={
            // 坐标轴
            xAxis: {
                type: 'category',
                data: ['第1周', '第2周', '第3周', '第4周', '第5周']
            },
            yAxis: {
                type: 'value',
                max: 100, // y轴最大值匹配示例图
                interval: 25, // y轴刻度间隔
                name:'设备缺陷数'
            },
            // 折线系列
            series: [
                {
                    data: [25, 50, 30, 25, 30], // 第一条折线数据
                    type: 'line',
                    symbol: 'circle', // 标记点样式（圆点）
                    symbolSize: 8, // 标记点大小
                    itemStyle: { color: '#00A1FF' } // 标记点颜色
                },
                {
                    data: [10, 35, 50, 10, 35], // 第二条折线数据
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#00CC99' } // 标记点颜色
                }
            ],
            // 网格（调整图表位置，可选）
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            // 区域填充（可选，如示例图的阴影）
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{ offset: 0, color: 'rgba(0, 204, 153, 0.2)' }, { offset: 1, color: 'rgba(0, 204, 153, 0)' }]
                }
            }
        };

        // 渲染图表
        chart.setOption(option);

        // 销毁图表（组件卸载时）
        return () => {
            chart.dispose();
        };
    },[])
    useEffect(()=>{
        if (!chartRef1.current) {
            return
        }
        chart1=echarts.init(chartRef1.current)
        const option={
            legend:{
                show:true,
                data:['发电机','输油管道','维修中','待验收','停用'],
                position:'right',
                orient: 'vertical',
                right:'18%',
                top:'20%',
                itemHeight:4,
                itemWidth:15,
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'], // 环形的内外半径，实现环形效果
                    center: ['40%', '60%'], // 环形图的中心位置
                    data: [
                        { name: '发电机', value: 15, itemStyle: { color: '#B7E5D599' } },
                        { name: '输油管道', value: 30, itemStyle: { color: '#FADD7F99' } },
                        { name: '维修中', value: 20, itemStyle: { color: '#C4B7E599' } },
                        { name: '待验收', value: 25, itemStyle: { color: '#7FC1FA99' } },
                        { name: '停用', value: 10, itemStyle: { color: '#FA7FA499' } },
                    ],
                    label: {
                        show: false, // 可根据需求显示标签
                    },
                },
            ],
        }
        chart1.setOption(option)
        return ()=>{
            chart1.dispose()
        }
    },[])
    useEffect(()=>{
        if (!chartRef2.current) {
            return
        }
        chart2=echarts.init(chartRef2.current)
        const option={
            xAxis:{
                type:'category',
                data:['第1周','第2周','第3周','第4周','第5周']
            },
            yAxis:{
                type:'value',
                max: 100, // y轴最大值匹配示例图
                interval: 25, // y轴刻度间隔
                // name:'设备缺陷数',
            },
            grid:{
                left:'10%',
                right:'10%',
                bottom:0,
                top:'20%',
                containLabel: true
            },
            series:[
                {
                    type:'bar',
                    data: [56, 32, 85, 15, 27],
                    barWidth: '30%',
                    itemStyle: {
                        color: 'teal' // 柱子颜色，可根据需求调整
                    },
                    label:{
                        position:'top',
                        show:true,
                    }
                }
            ]
        }
        chart2.setOption(option)
        return ()=>{
            chart2.dispose()
        }
    },[])
    useEffect(()=>{
        if (!chartRef3.current) {
            return
        }
        chart3=echarts.init(chartRef3.current)
        const option={
            legend:{
                data:['已闭环','处理中','待处理'],
                orient:'vertical',
                position:'right',
                top:'40%',
                right:'18%',
                itemHeight:4,
                itemWidth:15,
                show:true,
            },
            series:[
                {
                    type:'pie',
                    radius: ['50%', '70%'], // 环形的内外半径，实现环形效果
                    center: ['40%', '60%'], // 环形图的中心位置
                    data:[
                        {name:'已闭环',value:'13',itemStyle:{color:'#44BB5F99'}},
                        {name:'处理中',value:'15',itemStyle:{color:'#FADD7F99'}},
                        {name:'待处理',value:'40',itemStyle:{color:'#A990EA99'}},
                    ],
                    label:{
                        show:false
                    }
                }
            ]
        }
        chart3.setOption(option)
        return ()=>{
            chart3.dispose()
        }
    },[])
    useEffect(()=>{
        const list1=[
            {'职位': "集控副值", '名称': "冯毅芜", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控主值", '名称': "赵威皓", '状态': "已离岗", '时间': "00:00-07:59"},
            {'职位': "集控副值", '名称': "赵子峰", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控主值", '名称': "周珊珊", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控副值", '名称': "何仙超", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控副值", '名称': "赵小瑞", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控副值", '名称': "王英", '状态': "正常排班", '时间': "00:00-07:59"},
            {'职位': "集控副值", '名称': "周海迪", '状态': "正常排班", '时间': "00:00-07:59"}
        ]
        const list2=[
            {'职位': "集控副值", '名称': "赵竹林", '状态': "正常排班", '时间': "08:00-15:59"},
            {'职位': "集控主值", '名称': "李斌", '状态': "正常排班", '时间': "08:00-15:59"},
            {'职位': "集控副值", '名称': "郑雅", '状态': "待到岗", '时间': "08:00-15:59"},
            {'职位': "集控主值", '名称': "冯艺莲", '状态': "待到岗", '时间': "08:00-15:59"},
            {'职位': "集控副值", '名称': "郑盈", '状态': "正常排班", '时间': "08:00-15:59"},
            {'职位': "集控主值", '名称': "孙东辉", '状态': "正常排班", '时间': "08:00-15:59"},
            {'职位': "集控副值", '名称': "李金颖", '状态': "待到岗", '时间': "08:00-15:59"},
            {'职位': "集控主值", '名称': "吴恒", '状态': "待到岗", '时间': "08:00-15:59"}
        ]
        const list3=[
            {'职位': "集控副值", '名称': "王敦强", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控主值", '名称': "赵紫豪", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控副值", '名称': "何能", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "值长", '名称': "王溪蕾", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控副值", '名称': "赵涛", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控副值", '名称': "周伟林", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控主值", '名称': "李靖霜", '状态': "正常排班", '时间': "16:00-23:59"},
            {'职位': "集控副值", '名称': "何忠琴", '状态': "正常排班", '时间': "16:00-23:59"}
        ]
        setData1(list1)
        setData2(list2)
        setData3(list3)

    },[])



    const defectData = [
        {
            rank: 'NO.1',
            defectType: '类型A',
            deviceName: '设备A',
            occurrenceCount: 12,
            recentTime: '2025-08-04'
        },
        {
            rank: 'NO.2',
            defectType: '类型A',
            deviceName: '设备A',
            occurrenceCount: 12,
            recentTime: '2025-08-04'
        },
        {
            rank: 'NO.3',
            defectType: '类型A',
            deviceName: '设备A',
            occurrenceCount: 12,
            recentTime: '2025-08-04'
        },
        {
            rank: 'NO.4',
            defectType: '类型A',
            deviceName: '设备A',
            occurrenceCount: 12,
            recentTime: '2025-08-04'
        },
        {
            rank: 'NO.5',
            defectType: '类型A',
            deviceName: '设备A',
            occurrenceCount: 12,
            recentTime: '2025-08-04'
        }
    ];
    const columns = [
        {
            title: '排名',
            dataIndex: 'rank',
            key: 'rank',
            width: '10%',
        },
        {
            title: '缺陷类型',
            dataIndex: 'defectType',
            key: 'defectType',
            width: '20%',
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName',
            width: '20%',
        },
        {
            title: '发生次数',
            dataIndex: 'occurrenceCount',
            key: 'occurrenceCount',
            width: '20%',
        },
        {
            title: '最近发生时间',
            dataIndex: 'recentTime',
            key: 'recentTime',
            width: '30%',
        }
    ];


    const colorMap={
        '严重':'#FF2526',
        '一般':'#FF8800',
        '轻微':'#FFBC00',
    }
    const columnsRight = [
        { title: '序号', dataIndex: '序号', key: '序号' },
        { title: '发现时间', dataIndex: '发现时间', key: '发现时间' },
        { title: '缺陷类型', dataIndex: '缺陷类型', key: '缺陷类型' },
        { title: '设备名称', dataIndex: '设备名称', key: '设备名称' },
        { title: '缺陷发现人', dataIndex: '缺陷发现人', key: '缺陷发现人' },
        { title: '缺陷等级', dataIndex: '缺陷等级', key: '缺陷等级' ,render:(value)=>{
                return <span style={{color:colorMap[value]}}>{value}</span>
            }},
        { title: '状态', dataIndex: '状态', key: '状态' }
    ]
    const dataSource=[
        { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '李福娃', '缺陷等级': '严重', '状态': '处理中' },
        { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '何余', '缺陷等级': '一般', '状态': '已闭环' },
        { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '孙玉轩', '缺陷等级': '轻微', '状态': '待处理' },
        { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '钱一唯', '缺陷等级': '严重', '状态': '处理中' },
        { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '吴那', '缺陷等级': '严重', '状态': '处理中' },
    ]
    return<div style={{backgroundColor:'#fff',padding:'20px',borderRadius:'10px'}}>
        <Row gutter={20} >
            <Col  span={8}  >
                <div style={{border:'1px solid #76C2B5',padding:'20px',backgroundColor:'#F3F9F8',height:'100%'}}>
                    <Row style={{justifyContent:'space-between'}}>
                        <Col>
                            <Title title={'当日值班情况'}></Title>
                        </Col>
                        <Col >
                                <label htmlFor="">区域：</label>
                                <Select defaultValue={'中控室'}></Select>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <span style={{marginRight:'20px'}} className={styles['state1']}>正常排班</span>
                        <span style={{marginRight:'20px'}} className={styles['state2']}>待到岗</span>
                        <span style={{marginRight:'20px'}} className={styles['state3']}>已离岗</span>
                    </Row>
                    <Row style={{marginTop:'10px',textAlign:'center'}} gutter={30}>
                        <Col span={8} >
                            <div style={{marginBottom:'10px'}}>00:00-07:59</div>
                            {data1?.map(item=>{
                                if(item['状态']==='正常排班'){
                                    return (
                                        <Row style={{color:'#4E5856',marginBottom:'20px'}} >
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else if(item['状态']==='待到岗'){
                                    return (
                                        <Row style={{color:'#2C9E9D',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else{
                                    return (
                                        <Row style={{color:'#999999',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }

                            })}
                        </Col>
                        <Col span={8}>
                        <div style={{marginBottom:'10px'}}>08:00-15:59</div>
                            {data2?.map(item=>{
                                if(item['状态']==='正常排班'){
                                    return (
                                        <Row style={{color:'#4E5856',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else if(item['状态']==='待到岗'){
                                    return (
                                        <Row style={{color:'#2C9E9D',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else{
                                    return (
                                        <Row style={{color:'#999999',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }

                            })}
                        </Col>
                        <Col span={8}>
                            <div style={{marginBottom:'10px'}}>16:00-23:59</div>
                            {data3?.map(item=>{
                                if(item['状态']==='正常排班'){
                                    return (
                                        <Row style={{color:'#4E5856',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else if(item['状态']==='待到岗'){
                                    return (
                                        <Row style={{color:'#2C9E9D',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }else{
                                    return (
                                        <Row style={{color:'#999999',marginBottom:'20px'}}>
                                            <Col span={14} style={{textAlign:'right'}}>{item['职位']}：</Col>
                                            <Col span={10} style={{textAlign:'left'}}>{item['名称']}</Col>
                                        </Row>
                                    )
                                }

                            })}
                        </Col>
                    </Row>
                </div>
            </Col>
            <Col  span={7} >
                <div style={{border:'1px solid #76C2B5',padding:'20px',backgroundColor:'#F3F9F8', height:'100%'}}>
                    <Title title={'近期缺陷  TOP5'}></Title>
                    <Table
                        dataSource={defectData}
                        columns={columns}
                        rowKey="rank"
                        pagination={false} // 不显示分页
                        className={styles['inspection-table']}
                        size="middle" // 中等尺寸表格
                    />
                </div>
            </Col>
            <Col span={9} >
                <div style={{border: '1px solid #76C2B5', padding: '20px', backgroundColor: '#F3F9F8', height:'100%'}}>
                    <Title title={'当日巡检情况和缺陷发生情况'}></Title>
                    <Row gutter={40} style={{textAlign:'center',marginTop:'20px'}}>
                        <Col>
                            <div>白班</div>
                            <div className={styles['paiBanState']}>未开始</div>
                        </Col>
                        <Col>
                            <div>白班</div>
                            <div className={styles['paiBanState1']}>进行中</div>
                        </Col>
                        <Col>
                            <div>白班</div>
                            <div className={styles['paiBanState']}>未开始</div>
                        </Col>
                    </Row>
                    <Table
                        columns={columnsRight}
                        dataSource={dataSource}
                        className={styles['inspection-table1']}
                        pagination={false}
                    >

                    </Table>
                </div>
            </Col>
        </Row>
        <Row gutter={20} style={{marginTop:'20px'}}>
            <Col span={12}>
                <div style={{border: '1px solid #76C2B5', padding: '20px', backgroundColor: '#F3F9F8', height:'100%'}}>
                    <Row>
                        <Col span={13}>
                            <Title title={'按设备类型统计当月缺陷情况'}></Title>
                            <div ref={chartRef} style={{width:'100%',height:'164px'}}></div>
                        </Col>
                        <Col span={11}>
                            <div style={{textAlign:'center'}}>
                                <label htmlFor="" style={{marginRight:'20px'}}>日期:</label>
                                <Select
                                    defaultValue={['近30天']}
                                >
                                </Select>
                            </div>
                            <div ref={chartRef1} style={{width:'100%',height:'140px'}}></div>
                        </Col>
                    </Row>
                </div>
            </Col>
            <Col span={12}>
                <div style={{border: '1px solid #76C2B5', padding: '20px', backgroundColor: '#F3F9F8', height: '100%'}}>
                    <Row>
                        <Col span={13}>
                            <Title title={'按处理状态统计当月发现缺陷情况'}></Title>
                            <div ref={chartRef2} style={{width:'100%',height:'164px'}}></div>
                        </Col>
                        <Col span={11}>
                            <div style={{textAlign:'center'}}>
                                <label htmlFor="" style={{marginRight:'20px'}}>日期：</label>
                                <Select defaultValue={'近七天'}></Select>
                            </div>
                            <div ref={chartRef3} style={{width:'100%',height:'140px'}}></div>
                        </Col>
                    </Row>
                </div>
            </Col>
        </Row>
    </div>
}
//接班班组签到
const TheSuccessorTeamSignsIn=()=>{
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName'
        },
        {
            title: '关注指标',
            dataIndex: 'focusIndex',
            key: 'focusIndex'
        },
        {
            title: '指标值',
            dataIndex: 'indexValue',
            key: 'indexValue'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status'
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark'
        }
    ];
    const datasource = [
        {
            deviceName: '1# 发电机',
            focusIndex: '轴承温度',
            indexValue: '65℃',
            status: '正常',
            remark: '无异常'
        },
        {
            deviceName: '输油管道段 A',
            focusIndex: '压力',
            indexValue: '0.45MPa',
            status: '正常',
            remark: '压力稳定'
        },
        {
            deviceName: '中控室监控系统',
            focusIndex: '信号强度',
            indexValue: '95%',
            status: '正常',
            remark: '无丢包'
        }
    ];
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
               <div style={{width:'100%'}}>
                    <Title title={'接班班组签到'}></Title>
                <Row style={{marginTop:'20px',width:'100%'}}>
                    <Col span={6}>
                        <label htmlFor="" style={{marginRight:'20px'}}>岗位类型:</label>
                        <Select
                            defaultValue={'全部'}
                            style={{width:'200px'}}
                        ></Select>
                    </Col>
                    <Col span={18}>
                        <label htmlFor=""  style={{marginRight:'20px'}}>日期:</label>
                        <DatePicker style={{width:'200px'}}></DatePicker>
                        <Button icon={<SearchOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>查询</Button>
                        <Button icon={<UndoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                    </Col>
                </Row>
               </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <div style={{width:'100%'}}>
                    <Row style={{justifyContent:'space-between'}}>
                        <Title title={'接班签到信息区'}></Title>
                        <Button  className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>提交签到</Button>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <div style={{width:'100%'}}>
                            <Row justify={'space-between'}>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>当前时间：</label>
                                    <Input style={{width:'200px'}}></Input>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到人员：</label>
                                    <Select defaultValue={"李建刚"} style={{width:'200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到日期：</label>
                                    <DatePicker style={{width:'200px'}}></DatePicker>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到时间：</label>
                                    <DatePicker style={{width:'200px'}}></DatePicker>
                                </Col>
                            </Row>
                            <Row style={{marginTop:'20px'}} justify={"space-between"}>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到班次：</label>
                                    <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到值别：</label>
                                    <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到日志：</label>
                                    <Input placeholder={"全部"} style={{width: '639px'}}></Input>
                                </Col>
                            </Row>
                        </div>

                    </Row>
                </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <div style={{width:'100%'}}>
                    <Row>
                        <Title title={'前班次交班信息'}></Title>
                    </Row>
                    <Row style={{marginTop:'20px',justifyContent:'space-between'}}>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到日期：</label>
                            <Input style={{width: '200px'}}></Input>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>班次：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>值别：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到时间：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'20px',justifyContent:'space-between'}}>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到人：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到状态：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>接班时间：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>交班人：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <label htmlFor="" style={{marginRight:'20px'}}>接班日志:</label>
                        <Input placeholder={'全部'} style={{width:'639px'}}></Input>
                    </Row>
                </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <Col >
                    <label htmlFor="">关注设备及指标：</label>
                </Col>
                <Col>
                    <Table columns={columns}
                           dataSource={datasource}
                           pagination={false}
                    ></Table>
                </Col>
            </Row>
        </div>
    )
}
//当班值长交班日志
const TheShiftManagerOnDutyIsTheShiftLog=()=>{
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName'
        },
        {
            title: '关注指标',
            dataIndex: 'focusIndex',
            key: 'focusIndex'
        },
        {
            title: '指标值',
            dataIndex: 'indexValue',
            key: 'indexValue'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status'
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark'
        }
    ];
    const datasource = [
        {
            deviceName: '1# 发电机',
            focusIndex: '轴承温度',
            indexValue: '65℃',
            status: '正常',
            remark: '无异常'
        },
        {
            deviceName: '输油管道段 A',
            focusIndex: '压力',
            indexValue: '0.45MPa',
            status: '正常',
            remark: '压力稳定'
        },
        {
            deviceName: '中控室监控系统',
            focusIndex: '信号强度',
            indexValue: '95%',
            status: '正常',
            remark: '无丢包'
        }
    ];
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <div style={{width:'100%'}}>
                    <Title title={'接班班组签到'}></Title>
                    <Row style={{marginTop:'20px',width:'100%'}}>
                        <Col span={6}>
                            <label htmlFor="" style={{marginRight:'20px'}}>岗位类型:</label>
                            <Select
                                defaultValue={'全部'}
                                style={{width:'200px'}}
                            ></Select>
                        </Col>
                        <Col span={18}>
                            <label htmlFor=""  style={{marginRight:'20px'}}>日期:</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                            <Button icon={<SearchOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>查询</Button>
                            <Button icon={<UndoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                        </Col>
                    </Row>
                </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <div style={{width:'100%'}}>
                    <Row style={{justifyContent:'space-between'}}>
                        <Title title={'值长交班日志 - 接班签到'}></Title>
                        <Button  className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>提交签到</Button>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <div style={{width:'100%'}}>
                            <Row justify={'space-between'}>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>当前时间：</label>
                                    <Input style={{width:'200px'}}></Input>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到人员：</label>
                                    <Select defaultValue={"李建刚"} style={{width:'200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到日期：</label>
                                    <DatePicker style={{width:'200px'}}></DatePicker>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight:'20px'}}>签到时间：</label>
                                    <DatePicker style={{width:'200px'}}></DatePicker>
                                </Col>
                            </Row>
                            <Row style={{marginTop:'20px'}} justify={"space-between"}>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到班次：</label>
                                    <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到值别：</label>
                                    <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                                </Col>
                                <Col >
                                    <label htmlFor="" style={{marginRight: '20px'}}>签到日志：</label>
                                    <Input placeholder={"全部"} style={{width: '639px'}}></Input>
                                </Col>
                            </Row>
                        </div>

                    </Row>
                </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <div style={{width:'100%'}}>
                    <Row>
                        <Title title={'前班次值长交班信息'}></Title>
                    </Row>
                    <Row style={{marginTop:'20px',justifyContent:'space-between'}}>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到日期：</label>
                            <Input style={{width: '200px'}}></Input>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>班次：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>值别：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到时间：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'20px',justifyContent:'space-between'}}>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到人：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>签到状态：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>交班时间：</label>
                            <DatePicker style={{width:'200px'}}></DatePicker>
                        </Col>
                        <Col>
                            <label htmlFor="" style={{marginRight: '20px'}}>交班人：</label>
                            <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <label htmlFor="" style={{marginRight:'20px'}}>交班日志:</label>
                        <Input placeholder={'全部'} style={{width:'639px'}}></Input>
                    </Row>
                </div>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}}>
                <Col >
                    <label htmlFor="">关注设备及指标：</label>
                </Col>
                <Col>
                    <Table columns={columns}
                           dataSource={datasource}
                           pagination={false}
                    ></Table>
                </Col>
            </Row>
        </div>
    )
}
//历史日值记录查询
const HistoricalDailyValueRecordQuery=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
    const [open,setOpen]=useState(false)
    const [row,setRow]=useState([])
    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };
    const columns = [

        {
            title: '序号',
            dataIndex: 'serial',
            key: 'serial'
        },
        {
            title: '岗位类型',
            dataIndex: 'postType',
            key: 'postType'
        },
        {
            title: '值别',
            dataIndex: 'dutyLevel',
            key: 'dutyLevel'
        },
        {
            title: '班次',
            dataIndex: 'shift',
            key: 'shift'
        },
        {
            title: '签到日期',
            dataIndex: 'signDate',
            key: 'signDate'
        },
        {
            title: '签到时间',
            dataIndex: 'signTime',
            key: 'signTime'
        },
        {
            title: '签到人员',
            dataIndex: 'signPerson',
            key: 'signPerson'
        },
        {
            title: '签到日志',
            dataIndex: 'signLog',
            key: 'signLog'
        },
        {
            title: '签到状态',
            dataIndex: 'signStatus',
            key: 'signStatus'
        },
        {
            title: '接班人员',
            dataIndex: 'handoverPerson',
            key: 'handoverPerson'
        },
        {
            title: '接班时间',
            dataIndex: 'handoverTime',
            key: 'handoverTime'
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (_,record) => <a onClick={()=>handleView(record)} style={{color:'#2C9E9D'}}>查看详情</a>
        }
    ];
    const dataSource = [
        {
            key: '1',
            serial: '1',
            postType: '中控室',
            dutyLevel: '五',
            shift: '中班',
            signDate: '2025-09-08',
            signTime: '2025-10-12 05:16',
            signPerson: '周子喧',
            signLog: '签到',
            signStatus: '正常签到',
            handoverPerson: '---',
            handoverTime: '---'
        },
        {
            key: '2',
            serial: '2',
            postType: '中控室',
            dutyLevel: '五',
            shift: '白班',
            signDate: '2025-09-02',
            signTime: '2025-10-03 05:08',
            signPerson: '钱品妍',
            signLog: '管理补签-补签',
            signStatus: '补签',
            handoverPerson: '冯毅延',
            handoverTime: '2025-10-07 11:55'
        },
        {
            key: '3',
            serial: '3',
            postType: '中控室',
            dutyLevel: '二',
            shift: '中班',
            signDate: '2025-08-25',
            signTime: '2025-09-29 04:02',
            signPerson: '赵义',
            signLog: '签到',
            signStatus: '正常签到',
            handoverPerson: '---',
            handoverTime: '---'
        },
        {
            key: '4',
            serial: '4',
            postType: '中控室',
            dutyLevel: '二',
            shift: '白班',
            signDate: '2025-08-12',
            signTime: '2025-09-26 10:55',
            signPerson: '李丽茵',
            signLog: '管理补签',
            signStatus: '补签',
            handoverPerson: '李斌',
            handoverTime: '2025-09-25 22:38'
        },
        {
            key: '5',
            serial: '5',
            postType: '中控室',
            dutyLevel: '二',
            shift: '中班',
            signDate: '2025-08-06',
            signTime: '2025-09-23 06:37',
            signPerson: '李景',
            signLog: '签到',
            signStatus: '正常签到',
            handoverPerson: '---',
            handoverTime: '---'
        },
        {
            key: '6',
            serial: '6',
            postType: '中控室',
            dutyLevel: '三',
            shift: '夜班',
            signDate: '2025-07-25',
            signTime: '2025-08-28 07:31',
            signPerson: '王佛瑶',
            signLog: '签到',
            signStatus: '正常签到',
            handoverPerson: '---',
            handoverTime: '---'
        }
    ];

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

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };

    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row style={{borderBottom:'1px solid #eee',}}>
                <Row style={{width:'100%'}} justify={'space-between'}>
                    <Title title={'查询条件'}></Title>
                    <Col>
                        <Button className={styles['addBtn']} icon={<SearchOutlined/>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'20px'}}>查询</Button>
                        <Button className={styles['resetBtn']} icon={<UndoOutlined/>} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                    </Col>
                </Row>
                <Row style={{width:'100%',padding:'20px 0'}} justify={'space-between'}>
                    <Col>
                        <label htmlFor="" style={{marginRight:'20px'}}>岗位类型:</label>
                        <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                    </Col>
                    <Col>
                        <label htmlFor="" style={{marginRight:'20px'}}>值别:</label>
                        <Select defaultValue={"全部"} style={{width: '200px'}}></Select>
                    </Col>
                    <Col>
                        <label htmlFor="" style={{marginRight:'20px'}}>签到日期:</label>
                        <DatePicker  style={{width: '200px'}}></DatePicker>
                    </Col>
                    <Col>
                        <label htmlFor="" style={{marginRight:'20px'}}>签到人员:</label>
                        <Input  style={{width: '200px'}}></Input>
                    </Col>
                    <Col>
                        <label htmlFor="" style={{marginRight:'20px'}}>接班人员:</label>
                        <Input  style={{width: '200px'}}></Input>
                    </Col>
                </Row>
            </Row>
            <Row style={{borderBottom:'1px solid #eee',padding:'20px 0'}}>
                <div style={{width:'100%'}}>
                    <Title title={'历史日值记录列表'}></Title>
                    <Row style={{marginTop:'20px'}}>
                        <Button className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>批量导出</Button>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <Table
                            dataSource={dataSource}
                            columns={columns}
                            pagination={false}
                            rowSelection={{
                                type: 'checkbox',
                                ...rowSelection,
                            }}
                            rowKey="key"
                            style={{width:'100%'}}
                        ></Table>
                        <Drawers open={open} onClose={() => setOpen(false)} row={row}></Drawers>
                    </Row>
                    <Row>
                        <TablePagination
                            currentPage={currentPage}
                            pageSize={pageSize}
                            total={total}
                            onPageChange={handlePageChange}
                            onPageSizeChange={handlePageSizeChange}
                        ></TablePagination>
                    </Row>
                </div>
            </Row>
        </div>
    )
}
//当前巡检状态查询
const CurrentInspectionStatusQuery=()=>{
    const dataSource1=[]
    const dataSource2 = [
        {
            key: '1',
            inspectionName: '白班巡检',
            inspectionStatus: '已完成',
            inspector: '李宇宙',
            inspectedArea: '已巡区域 (1)',
            missedArea: '漏检区域 (0)',
        },
    ];
    const dataSource3 = [
        {
            key: '1',
            inspectionName: '白班巡检',
            inspectionStatus: '已完成',
            inspector: '赵健民',
            inspectedArea: '已巡区域 (1)',
            missedArea: '漏检区域 (0)',
        },
    ];
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row style={{borderBottom:'1px solid #EEEEEE',paddingBottom:'20px'}}>
               <Row style={{width:'100%'}} justify={"space-between"}>
                   <Title title={'当前巡检状态查询'}></Title>
                   <Col>
                       <Button className={styles['addBtn']} icon={<SearchOutlined></SearchOutlined>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
                       <Button className={styles['resetBtn']} icon={<UndoOutlined></UndoOutlined>} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                   </Col>
               </Row>
                <Row style={{width:'100%',marginTop:'20px'}}>
                    <Col span={6}>
                        <label htmlFor="" style={{marginRight:'15px'}}> 岗位类型:</label>
                        <Select defaultValue={'全部'} style={{width:'200px'}}></Select>
                    </Col>
                    <Col span={6}>
                        <label htmlFor="" style={{marginRight:'15px'}}> 巡检日期:</label>
                        <DatePicker></DatePicker>
                    </Col>
                </Row>
            </Row>
            <Row style={{padding:'20px 0'}}>
                <InspectionStatusComponent
                    shifts='白班'
                    valueLong='马德利'
                    statues='补签'
                    dataSource={dataSource1}
                ></InspectionStatusComponent>
            </Row>
            <Row style={{padding:'20px 0'}}>
                <InspectionStatusComponent
                    shifts='中班'
                    valueLong='刘丽'
                    statues='补签'
                    dataSource={dataSource2}
                ></InspectionStatusComponent>
            </Row>
            <Row style={{padding:'20px 0'}}>
                <InspectionStatusComponent
                    shifts='夜班'
                    valueLong='温浙源'
                    statues='正常签到'
                    dataSource={dataSource3}
                ></InspectionStatusComponent>
            </Row>
        </div>
    )
}
//当日巡检状态查询
const InspectionStatusQueryOnTheSameDay=()=>{
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
    const [open,setOpen]=useState(false)
    const [row,setRow]=useState({})
    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width:100,
        },
        {
            title: '巡检 ID',
            dataIndex: 'inspectionId',
            key: 'inspectionId',
            align: 'center',
        },
        {
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName',
            align: 'center',
        },
        {
            title: '巡检负责人',
            dataIndex: 'inspector',
            key: 'inspector',
            align: 'center',
        },
        {
            title: '巡检时间',
            dataIndex: 'inspectionTime',
            key: 'inspectionTime',
            align: 'center',
        },
        {
            title: '巡检状态',
            dataIndex: 'inspectionStatus',
            key: 'inspectionStatus',
            align: 'center',
        },
        {
            title: '属性名称',
            dataIndex: 'propertyName',
            key: 'propertyName',
            align: 'center',
        },
        {
            title: '阈值范围',
            dataIndex: 'thresholdRange',
            key: 'thresholdRange',
            align: 'center',
        },
        {
            title: '巡检值',
            dataIndex: 'inspectionValue',
            key: 'inspectionValue',
            align: 'center',
        },
        {
            title: '超限情况',
            dataIndex: 'overLimit',
            key: 'overLimit',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (_,record) => <a style={{ color: '#2C9E9D' }} onClick={()=>{
                setRow(record)
                setOpen(true)
            }}>查看详情</a>,
            align: 'center',
        },
    ];
    const onClose=function(){
        setOpen(false)
    }
    const dataSource = [
        {
            key: '1',
            index: 1,
            inspectionId: 'XJ-20230519-001',
            equipmentName: '#1 发电机',
            inspector: '李恩霖',
            inspectionTime: '2023-05-19 11:15',
            inspectionStatus: '异常',
            propertyName: '核心温度',
            thresholdRange: '≤3000℃',
            inspectionValue: '3500℃',
            overLimit: '超过上限',
            max:'3500℃',
        },
        {
            key: '2',
            index: 2,
            inspectionId: 'XJ-20230519-002',
            equipmentName: '#1 发电机',
            inspector: '李瑞霜',
            inspectionTime: '2023-05-19 11:30',
            inspectionStatus: '异常',
            propertyName: '核心温度',
            thresholdRange: '≤3000℃',
            inspectionValue: '2600℃',
            overLimit: '超过上限',
            max:'3000℃',
        },
        {
            key: '3',
            index: 3,
            inspectionId: 'XJ-20230519-003',
            equipmentName: '#1 发电机',
            inspector: '赵礼义',
            inspectionTime: '2023-05-19 10:15',
            inspectionStatus: '异常',
            propertyName: '核心温度',
            thresholdRange: '≤3000℃',
            inspectionValue: '4500℃',
            overLimit: '超过上限',
            max:'3000℃',
        },
        {
            key: '4',
            index: 4,
            inspectionId: 'XJ-20230519-004',
            equipmentName: '输油管道段 A',
            inspector: '郑文英',
            inspectionTime: '2023-05-19 09:30',
            inspectionStatus: '已完成',
            propertyName: '压力',
            thresholdRange: '0.4-0.6MPa',
            inspectionValue: '0.5MPa',
            overLimit: '---',
            max:'0.6MPa',
        },
        {
            key: '5',
            index: 5,
            inspectionId: 'XJ-20230519-005',
            equipmentName: '中控室 DCS 系统',
            inspector: '王尊瑶',
            inspectionTime: '2023-05-19 10:00',
            inspectionStatus: '运行中',
            propertyName: '信号冗余度',
            thresholdRange: '≥95%',
            inspectionValue: '98%',
            overLimit: '---',
            max:'95%',
        },
        {
            key: '6',
            index: 6,
            inspectionId: 'XJ-20230519-006',
            equipmentName: '消防水泵房',
            inspector: '钱韵澄',
            inspectionTime: '2023-05-19 11:00',
            inspectionStatus: '已完成',
            propertyName: '液位',
            thresholdRange: '2-5m',
            inspectionValue: '3.2m',
            overLimit: '---',
            max:'5m',
        },
    ];

    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row style={{borderBottom:'1px solid #EEEEEE',paddingBottom:'20px'}}>
                <Row style={{width:'100%'}} justify={"space-between"}>
                    <Title title={'当日巡检状态查询'}></Title>
                    <Col>
                        <Button className={styles['addBtn']} icon={<SearchOutlined></SearchOutlined>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
                        <Button className={styles['resetBtn']} icon={<UndoOutlined></UndoOutlined>} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                    </Col>
                </Row>
                <Row style={{width:'100%',marginTop:'20px'}}>
                    <Col span={6}>
                        <label htmlFor="" style={{marginRight:'15px'}}> 岗位类型:</label>
                        <Select defaultValue={'全部'} style={{width:'200px'}}></Select>
                    </Col>
                    <Col span={6}>
                        <label htmlFor="" style={{marginRight:'15px'}}> 班次:</label>
                        <Select defaultValue={'全部'} style={{width:'200px'}}></Select>
                    </Col>
                </Row>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <Col>
                    <div>
                        <img width={'296px'} height={'120x'} src={record1} alt=""/>
                    </div>
                </Col>
                <Col>
                    <div>
                        <img width={'296px'} height={'120x'} src={record2} alt=""/>
                    </div>
                </Col>
                <Col>
                    <div>
                        <img width={'296px'} height={'120x'} src={record3} alt=""/>
                    </div>
                </Col>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <Title title={'当日巡检状态列表'}></Title>
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    pagination={false}
                    style={{width:'100%',marginTop:'20px'}}
                    rowSelection={{
                        type: 'checkbox',
                        ...rowSelection,
                    }}
                    rowKey="key"
                >
                </Table>
                <Drawers1 row={row} onClose={onClose} open={open}></Drawers1>
            </Row>
        </div>
    )
}
//设备台账查询与维护
const EquipmentLedgerQueryAndMaintenance=()=>{
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const [open,setOpen]=useState(false)
    const [row,setRow]=useState({})
    // 表格列配置
    const columns = [
        {
            title: '期初分类',
            dataIndex: 'initialCategory',
            key: 'initialCategory',
        },
        {
            title: '重点设备',
            dataIndex: 'keyEquipment',
            key: 'keyEquipment',
        },
        {
            title: '设备编号',
            dataIndex: 'equipmentNo',
            key: 'equipmentNo',
        },
        {
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName',
        },
        {
            title: '设备状态',
            dataIndex: 'equipmentStatus',
            key: 'equipmentStatus',
        },
        {
            title: '物质分类',
            dataIndex: 'materialCategory',
            key: 'materialCategory',
        },
        {
            title: '价格分类',
            dataIndex: 'priceCategory',
            key: 'priceCategory',
        },
        {
            title: '特种设备分类',
            dataIndex: 'specialEquipmentCategory',
            key: 'specialEquipmentCategory',
        },
        {
            title: '数量',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        {
            title: '计量单位',
            dataIndex: 'unit',
            key: 'unit',
        },
        {
            title: '规格',
            dataIndex: 'specification',
            key: 'specification',
        },
        {
            title: '安装位置',
            dataIndex: 'installationLocation',
            key: 'installationLocation',
        },
        {
            title: '排序',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '操作',
            key: 'operation',
            render: (_,record) => (
                <div style={{display:'flex', justifyContent:'space-between'}}>
                    <a style={{color:'#2C9E9D'}}>查看详情</a>
                    <a onClick={()=>{
                        setRow(record)
                        setOpen(true)
                    }} style={{color:'#2C9E9D'}}>编辑</a>
                    <a style={{ color: 'red' }}>删除</a>
                </div>
            ),
            align:'center',
        },
    ];
    // 表格数据
    const dataSource = [
        {
            key: '1',
            initialCategory: '电气系统',
            keyEquipment: '是',
            equipmentNo: 'eq-f611',
            equipmentName: '#1发电机',
            equipmentStatus: '已使用',
            materialCategory: '设备',
            priceCategory: '机组',
            specialEquipmentCategory: '高压电机',
            quantity: 1,
            unit: '台',
            specification: 'QFZN',
            installationLocation: '定子间',
            sort: 5,
        },
        {
            key: '2',
            initialCategory: '化学系统',
            keyEquipment: '否',
            equipmentNo: 'eq-p722',
            equipmentName: '#2加药泵',
            equipmentStatus: '备用',
            materialCategory: '设备',
            priceCategory: '泵类',
            specialEquipmentCategory: '离心泵',
            quantity: 1,
            unit: '台',
            specification: '50m³/h',
            installationLocation: '加药间',
            sort: 3,
        },
        {
            key: '3',
            initialCategory: '水处理',
            keyEquipment: '是',
            equipmentNo: 'eq-v833',
            equipmentName: '反渗透装置',
            equipmentStatus: '已使用',
            materialCategory: '设备',
            priceCategory: '容器',
            specialEquipmentCategory: '压力容器',
            quantity: 1,
            unit: '套',
            specification: '100t/h',
            installationLocation: '水处理间',
            sort: 1,
        },
    ];
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        }
    };

    const treeDate=[
        {
            title:'电器专业',
            key:'电气专业',
            children:[
                {
                    title:'开关设备',
                    key:'开关设备',
                    children:[
                        {title:'断路器',key:'断路器'},
                        {title:'隔断开关',key:'隔断开关'},
                    ]
                },
                {
                    title:'变压器',
                    key:'变压器',
                }
            ]
        },
        {
            title:'化学专业',
            key:'化学专业',
            children:[
                {title:'泵类设备',key:'泵类设备'},
                {title:'容器类',key:'容器类'}
            ]
        }
    ]

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

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    const onClose=()=>{
        setOpen(false)
    }

    return (
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row gutter={20} >
                <Col span={4}>
                    <div style={{backgroundColor:'#EAF6F2',padding:'20px',height:'100%'}}>
                        <Title title={'分类'}></Title>
                        <Input  placeholder={'搜索分类'} style={{marginTop:'20px',width:'172px'}}></Input>
                        <Tree
                            className={styles['recordTree']}
                            treeData={treeDate}
                            checkable={true}
                            showLine={true}
                            defaultExpandAll
                        ></Tree>
                    </div>
                </Col>
                <Col span={20}>
                    <div>
                        <Row justify={'space-between'} >
                            <Col>
                                <Title title={'精准查询'}></Title>
                            </Col>
                            <Col>
                                <Button icon={<SearchOutlined></SearchOutlined>} className={styles['addBtn']} style={{backgroundImage: `url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
                                <Button icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']} style={{backgroundImage: `url(${btnImg3})`}}>重置</Button>
                            </Col>
                        </Row>
                        <Row wrap={true} style={{marginTop:'20px',marginBottom:'20px',borderBottom:'1px solid #eee',paddingBottom:'20px'}} gutter={[0,20]} className={styles['selectForm']}>
                            <Col span={6}>
                                <label htmlFor="">系统分类:</label>
                                <Select defaultValue={'全部'} style={{width:'132px',marginLeft:'15px'}}></Select>
                            </Col>
                            <Col span={6}>
                                <label htmlFor="">重点设备:</label>
                                <Select defaultValue={'全部'} style={{width: '132px', marginLeft: '15px'}}></Select>
                            </Col>
                            <Col span={6}>
                                <label htmlFor="">设备编号:</label>
                                <Input placeholder={'请输入编号'} style={{width: '200px', marginLeft: '15px'}}></Input>
                            </Col>
                            <Col span={6}>
                                <label htmlFor="">设备名称:</label>
                                <Input placeholder={'请输入名称'} style={{width: '200px', marginLeft: '15px'}}></Input>
                            </Col>
                            <Col span={6}>
                                <label htmlFor="">设备状态:</label>
                                <Select defaultValue={'全部'} style={{width: '132px', marginLeft: '15px'}}></Select>
                            </Col>
                            <Col span={6}>
                                <label htmlFor="">物资分类:</label>
                                <Select defaultValue={'全部'} style={{width: '132px', marginLeft: '15px'}}></Select>
                            </Col>
                        </Row>
                        <Title title={'设备台账列表'}></Title>
                        <Row justify={'space-between'} style={{marginTop:'20px'}}>
                            <Col>
                                <Button className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>批量导入</Button>
                                <Button className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg3})`,color:'#006665',marginRight:'30px'}} >批量导出</Button>
                                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
                            </Col>
                            <Col>
                                <Button className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg3})`,color:'#006665',marginRight:'30px'}} >下载模板</Button>
                                <Button icon={<PlusOutlined />} className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>新增</Button>
                            </Col>
                        </Row>
                        <Row style={{marginTop:'20px'}}>
                            <Table
                                columns={columns}
                                dataSource={dataSource}
                                pagination={false}
                                rowSelection={rowSelection}
                                className={styles['recordTable']}
                            ></Table>
                            <Drawers2 open={open} onClose={onClose} row={row}></Drawers2>
                        </Row>
                        <Row>
                            <TablePagination
                                currentPage={currentPage}
                                pageSize={pageSize}
                                total={total}
                                onPageChange={handlePageChange}
                                onPageSizeChange={handlePageSizeChange}
                            ></TablePagination>
                        </Row>
                    </div>
                </Col>
            </Row>
        </div>
    )
}
//台账维护记录
const TheLedgerMaintainsRecords=()=>{
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const dataSource = [
        {
            key: '1',
            maintenanceRecordId: 'WH-20230519-001',
            equipmentName: '#1发电机',
            equipmentCategory: '电气系统',
            updatedBy: '李婧妍',
            maintenanceTime: '2023-05-19 10:30:22',
            maintenanceMethod: '修改',
            operation: '查看详情'
        },
        {
            key: '2',
            maintenanceRecordId: 'WH-20230518-002',
            equipmentName: '手动蝶阀',
            equipmentCategory: '化学系统',
            updatedBy: '李密',
            maintenanceTime: '2023-05-18 09:15:45',
            maintenanceMethod: '新增',
            operation: '查看详情'
        },
        {
            key: '3',
            maintenanceRecordId: 'WH-20230517-003',
            equipmentName: '气动蝶阀',
            equipmentCategory: '化学系统',
            updatedBy: '赵礼义',
            maintenanceTime: '2023-05-17 14:20:10',
            maintenanceMethod: '删除',
            operation: '查看详情'
        },
        {
            key: '4',
            maintenanceRecordId: 'WH-20230516-004',
            equipmentName: '手动球阀',
            equipmentCategory: '化学系统',
            updatedBy: '孙思达',
            maintenanceTime: '2023-05-16 11:05:30',
            maintenanceMethod: '修改导入',
            operation: '查看详情'
        },
        {
            key: '5',
            maintenanceRecordId: 'WH-20230515-005',
            equipmentName: '止回阀',
            equipmentCategory: '化学系统',
            updatedBy: '郑岩',
            maintenanceTime: '2023-05-15 16:40:05',
            maintenanceMethod: '模板更新',
            operation: '查看详情'
        }
    ];
    const columns = [
        {
            title: '维护记录 ID',
            dataIndex: 'maintenanceRecordId',
            key: 'maintenanceRecordId',
        },
        {
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName',
        },
        {
            title: '设备分类',
            dataIndex: 'equipmentCategory',
            key: 'equipmentCategory',
        },
        {
            title: '更新人',
            dataIndex: 'updatedBy',
            key: 'updatedBy',
        },
        {
            title: '维护时间',
            dataIndex: 'maintenanceTime',
            key: 'maintenanceTime',
        },
        {
            title: '维护方式',
            dataIndex: 'maintenanceMethod',
            key: 'maintenanceMethod',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (text) => <a style={{color:'#2C9E9D'}}>{text}</a>, // 可添加点击事件实现详情查看
        },
    ];
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        }
    };
    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row justify={'space-between'} >
                <Col>
                    <Title title={'精准查询'}></Title>
                </Col>
                <Col>
                    <Button style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}} icon={<SearchOutlined></SearchOutlined>} className={styles['addBtn']}>查询</Button>
                    <Button style={{backgroundImage:`url(${btnImg3})`}} icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']}>重置</Button>
                </Col>
            </Row>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}} >
                <Form
                    layout={'inline'}
                    style={{display:'flex', justifyContent:'space-between',width:'100%'}}
                >
                    <Form.Item label={'维护时间范围：'}>
                        <RangePicker></RangePicker>
                    </Form.Item>
                    <Form.Item label={'设备分类：'}>
                        <Select defaultValue={'全部'}></Select>
                    </Form.Item>
                    <Form.Item label={'设备名称：'}>
                        <Input placeholder={'请输入位置'}></Input>
                    </Form.Item>
                    <Form.Item label={'更新人：'}>
                        <Input placeholder={'请输入位置'}></Input>
                    </Form.Item>
                    <Form.Item label={'维护方式：'}>
                        <Select defaultValue={'全部'}></Select>
                    </Form.Item>
                </Form>
            </Row>
             <Row style={{marginTop:'20px'}}>
                 <Table
                     rowSelection={rowSelection}
                    dataSource={dataSource}
                    columns={columns}
                    style={{width:'100%',minHeight:'450px'}}
                    pagination={false}
                 ></Table>
             </Row>
            <Row>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}
                ></TablePagination>
            </Row>
        </div>
    )
}
//当值缺陷查询
const ValueDefectQuery=()=>{
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        }
    };
    const columns = [
        {
            title: '班次',
            dataIndex: 'shift',
            key: 'shift',
        },
        {
            title: '设备',
            dataIndex: 'equip',
            key: 'equip',
        },
        {
            title: '缺陷号',
            dataIndex: 'defectNo',
            key: 'defectNo',
        },
        {
            title: '发现人',
            dataIndex: 'finder',
            key: 'finder',
        },
        {
            title: '缺陷',
            dataIndex: 'defect',
            key: 'defect',
        },
        {
            title: '发现时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '分类',
            dataIndex: 'category',
            key: 'category',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '等级',
            dataIndex: 'level',
            key: 'level',
        },
        {
            title: '图片',
            dataIndex: 'img',
            key: 'img',
            render:(value)=>{
                return (
                    <>
                        <img src={value} alt="图片加载失败" style={{width:'35px',height:'35px'}}/>
                    </>
                )
            }
        },
        {
            title: '处理结果',
            dataIndex: 'result',
            key: 'result',
        },
        {
            title: '操作',
            dataIndex: 'op',
            key: 'op',
            align:'center',
            render:()=>{
                return(
                    <>
                        <Button type={'link'} style={{color:'#006665'}}>查看详情</Button>
                        <Button type={'link'} style={{color:'#2E4CD4'}}>打印</Button>
                        <Button type={'link'} style={{color:'#2C9E9D'}}>修改</Button>
                        <Button type={'link'} style={{color:'#FF826D'}}>删除</Button>
                    </>

                )
            }
        },
    ];
    const dataSource = [
        {
            key: '1',
            shift: '白班',
            equip: '#1 发电机',
            defectNo: 'ZXS202305191143',
            finder: '李婧妍',
            defect: '发电机异响',
            time: '2023-05-19 10:30:22',
            category: '异响',
            status: '未确认',
            level: '第一等级',
            img: tableImg1,
            result: '待检修',
            op: '查看详情 打印 修改 删除'
        },
        {
            key: '2',
            shift: '白班',
            equip: '地电机定子',
            defectNo: 'ZXS202305080162',
            finder: '李密',
            defect: '轴承过热',
            time: '2023-05-18 09:15:45',
            category: '温度异常',
            status: '已处理',
            level: '第一等级',
            img: tableImg2,
            result: '更换轴承',
            op: '查看详情 打印 修改 删除'
        },
        {
            key: '3',
            shift: '中班',
            equip: '废水泵',
            defectNo: 'ZXS202304201444',
            finder: '赵礼义',
            defect: '轴承过热',
            time: '2023-05-17 14:20:10',
            category: '温度异常',
            status: '未确认',
            level: '第一等级',
            img: tableImg3,
            result: '待巡检',
            op: '查看详情 打印 修改 删除'
        },
        {
            key: '4',
            shift: '中班',
            equip: '转子',
            defectNo: 'ZXS202304201444',
            finder: '孙思达',
            defect: '振动超限',
            time: '2023-05-16 11:05:30',
            category: '振动',
            status: '未确认',
            level: '第一等级',
            img: tableImg4,
            result: '待检测',
            op: '查看详情 打印 修改 删除'
        },
        {
            key: '5',
            shift: '白班',
            equip: '#1 发电机',
            defectNo: 'ZXS202304201016',
            finder: '郑岩',
            defect: '设备过热',
            time: '2023-05-15 16:40:05',
            category: '温度异常',
            status: '未处理',
            level: '第一等级',
            img: tableImg5,
            result: '待安排检修',
            op: '查看详情 打印 修改 删除'
        },
        {
            key: '6',
            shift: '白班',
            equip: '#1 发电机',
            defectNo: 'ZXS202304201000',
            finder: '李炜骅',
            defect: '漏水',
            time: '2023-05-14 08:50:15',
            category: '漏水',
            status: '未处理',
            level: '第一等级',
            img: tableImg6,
            result: '待堵漏',
            op: '查看详情 打印 修改 删除'
        }
    ];
    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return(
        <div style={{backgroundColor: '#fff', padding: '20px'}}>
            <Row style={{padding:'20px 0',borderBottom:'1px solid #eeeeee'}}>
                <Row justify={"space-between"} style={{width:'100%'}}>
                    <Col><Title title={'精准查询'}></Title></Col>
                    <Col>
                        <Button className={styles['addBtn']} icon={<SearchOutlined></SearchOutlined>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
                        <Button className={styles['resetBtn']} icon={<UndoOutlined></UndoOutlined>} style={{backgroundImage:`url(${btnImg3}`}}>重置</Button>
                    </Col>
                </Row>
                <Row style={{marginTop:'20px',width:'100%'}}>
                    <Form
                        layout={'inline'}
                        style={{display:'flex',justifyContent:'space-between',width:'100%'}}
                    >
                        <Form.Item label={'岗位类型'}>
                            <Select style={{width:'132px'}} defaultValue={'全部'}></Select>
                        </Form.Item>
                        <Form.Item label={'值别'}>
                            <Select style={{width:'132px'}} defaultValue={'全部'}></Select>
                        </Form.Item>
                        <Form.Item label={'班次'}>
                            <Select style={{width:'132px'}} defaultValue={'全部'}></Select>
                        </Form.Item>
                        <Form.Item label={'缺陷时间范围'}>
                            <RangePicker></RangePicker>
                        </Form.Item>
                        <Form.Item label={'缺陷状态'}>
                            <Select style={{width:'132px'}} defaultValue={'全部'}></Select>
                        </Form.Item>
                    </Form>
                </Row>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <Title title={'缺陷列表区'}></Title>
                <Table
                    style={{width:'100%',marginTop:'20px',minHeight:'450px'}}
                    pagination={false}
                    rowSelection={rowSelection}
                    dataSource={dataSource}
                    columns={columns}
                ></Table>
            </Row>
            <Row>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}
                ></TablePagination>
            </Row>
        </div>
    )
}
const items = [
    {
        label: <MenuBg text={'巡检记录'} icon={<DownOutlined style={{fontSize: 16}}/>}></MenuBg>,
        key:'巡检记录',
        children:[
            {label:'巡检记录首页',key:'巡检记录首页'},
            {label:'接班班组签到',key:'接班班组签到'},
            {label:'当班值长交班日志',key:'当班值长交班日志'},
            {label:'历史日值记录查询',key:'历史日值记录查询'},
        ]
    },
    {
        label: <MenuBg text={'巡检状态管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
        key:'巡检状态管理',
        children:[
            {label:'当前巡检状态查询',key:'当前巡检状态查询'},
            {label:'当日巡检状态查询',key:'当日巡检状态查询'},
        ]
    },
    {
        label: <MenuBg text={'设备台账数据'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
        key:'设备台账数据',
        children:[
            {label:'设备台账查询与维护',key:'设备台账查询与维护'},
            {label:'台账维护记录',key:'台账维护记录'},
        ]
    },
    {
        label: <MenuBg text={'缺陷管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
        key:'缺陷管理',
        children:[
            {label:'当值缺陷查询',key:'当值缺陷查询'},
        ]
    },
]
const tabList={
    '巡检记录首页': <InspectionRecordHomepage></InspectionRecordHomepage>,
    '接班班组签到': <TheSuccessorTeamSignsIn></TheSuccessorTeamSignsIn>,
    '当班值长交班日志': <TheShiftManagerOnDutyIsTheShiftLog></TheShiftManagerOnDutyIsTheShiftLog>,
    '历史日值记录查询': <HistoricalDailyValueRecordQuery></HistoricalDailyValueRecordQuery>,
    '当前巡检状态查询': <CurrentInspectionStatusQuery></CurrentInspectionStatusQuery>,
    '当日巡检状态查询': <InspectionStatusQueryOnTheSameDay></InspectionStatusQueryOnTheSameDay>,
    '设备台账查询与维护': <EquipmentLedgerQueryAndMaintenance></EquipmentLedgerQueryAndMaintenance>,
    '台账维护记录': <TheLedgerMaintainsRecords></TheLedgerMaintainsRecords>,
    '当值缺陷查询': <ValueDefectQuery></ValueDefectQuery>,
}
const InspectionRecords=()=>{
    const [current,setCurrent]=useState('巡检记录首页')
    const onClick=(e)=>{
        setCurrent(e.key)
    }
    return(
        <>
            <div className={styles['header']}>
                <div className={styles['logo']} style={{backgroundImage:`url(${titleBg})`}}>
                    <span style={{marginLeft:'-40px'}}>当前：&nbsp;&nbsp;{current}</span>
                </div>
                <Menu
                    onClick={onClick}
                    items={items}
                    selectedKeys={current}
                    mode={'horizontal'}
                    style={{flex: '1'}}
                    className={styles['menu']}
                >

                </Menu>
            </div>
            {tabList[current]}
        </>
    )
}
export default InspectionRecords
