mcfxkh-Web/src/views/Home/panels/Xczl/index.js

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import { useDispatch, useSelector } from 'react-redux';
import PanelBox from '../../components/PanelBox';

import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import XcCard from './xcCard'
import config from '../../../../config';

const data = [

    {
        "guid": "42118120003",
        "code": "",
        "name": "浮桥河水库-汛前检查",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.068090",
        "lttd": "31.026170",
        'username': '熊杰',
        taskType: '日常巡查',
        tm: '2025-06-02 00:08:00',
        status: '进行中'
    },
    {
        "guid": "42118120003",
        "code": "",
        "name": "浮桥河水库-特别巡查",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.068090",
        "lttd": "31.026170",
        'username': '白斌',
        taskType: '汛前巡查',
        tm: '2025-06-02 00:09:00',
        status: '已完成'
    },
    {
        "guid": "42118120003",
        "code": "",
        "name": "明山水库-日常管理",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.068090",
        "lttd": "31.026170",
        'username': '余静',
        taskType: '特别巡查',
        tm: '2025-06-02 00:10:00',
        status: '未完成'
    },
    {
        "guid": "42118120003",
        "code": "",
        "name": "永红水库-日常管理",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.068090",
        "lttd": "31.026170",
        'username': '周真',
        taskType: '特别巡查',
        tm: '2025-06-02 00:10:00',
        status: '未完成'
    },
    {
        "guid": "42118120003",
        "code": "",
        "name": "永丰水库-汛前检查",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.068090",
        "lttd": "31.026170",
        'username': '陈发',
        taskType: '特别巡查',
        tm: '2025-06-02 00:10:00',
        status: '未完成'
    },
]

function DrpReal({ style }) {
    const [tab, setTab] = useState('1')
    const dispatch = useDispatch();
    const flyTo = () => {
        dispatch?.runtime.setInfoDlg({ layerId: 'XunchachaoshiLayer', properties: {} })
    }
    const jumpTo = (record) => {
        const { lgtd, lttd } = record;
        if (lgtd && lttd) {
            dispatch.runtime.setCameraTarget({
                center: [lgtd, lttd + config.poiPositionOffsetY.hd],
                zoom: config.poiPositionZoom.hd,
                pitch: config.poiPitch,
            });
        }
    }
    return (
        <PanelBox
            style={style}
            title="巡查任务总览"
            color="green"
            extra={
                <span className="button-group">
                    <span className={clsx({ active: tab === '1' })} onClick={() => setTab('1')}>本月</span>
                    <span className={clsx({ active: tab === '2' })} onClick={() => setTab('2')}>本年</span>
                </span>
            }
        >
            <div className='skyb-box'>
                <div className='rain-yb'>
                    <div className='title-yb'>巡查任务</div>
                </div>
            </div>
            <div style={{ padding: 10 }}>
                <XcCard />
            </div>
            <TableContainer>
                <Table size="small" stickyHeader>
                    <TableHead>
                        <TableRow>
                            <DpTableCell style={{ width: '20%' }} align="center">任务标题</DpTableCell>
                            <DpTableCell style={{ width: '20%' }} align="center">任务类型</DpTableCell>
                            <DpTableCell style={{ width: '20%' }} align="center">巡查人</DpTableCell>
                            <DpTableCell style={{ width: '20%' }} align="center">巡查时间</DpTableCell>
                            <DpTableCell style={{ width: '20%' }} align="center">状态</DpTableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map((row, index) => (
                            <DpTableRow key={row.stcd}
                                // onClick={() => jumpTo(row)}
                            >
                                <DpTableCell align="center">
                                    <div
                                        className="table-ellipsis cursor-pointer"
                                    >{row.name}</div>
                                </DpTableCell>
                                <DpTableCell align="center">{row.taskType}</DpTableCell>
                                <DpTableCell align="center">{row.username}</DpTableCell>
                                <DpTableCell align="center">
                                    <div
                                        className="table-ellipsis cursor-pointer"
                                    > {row.tm}</div>
                                </DpTableCell>
                                <DpTableCell align="center">{row.status}</DpTableCell>
                            </DpTableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <div className='skyb-box' style={{ marginTop: 50 }}>
                <div className='rain-yb'>
                    <div className='title-yb'>数据统计</div>
                </div>
            </div>
            <div>
                <img src={`${process.env.PUBLIC_URL}/assets/sjtj1.jpg`} alt="" style={{ width: 420 }} />
                <div style={{ position: 'relative' }}>
                    <img src={`${process.env.PUBLIC_URL}/assets/sjti2.png`} alt="" style={{ width: 205, height: 72 }} />
                    <img src={`${process.env.PUBLIC_URL}/assets/gantanh.png`} alt=""
                        style={{ width: 20, position: 'absolute', top: 12, left: 145, cursor: 'pointer' }}
                        onClick={flyTo}
                    />
                </div>
            </div>
        </PanelBox>
    )
}

export default DrpReal;