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 { parseGeoJSON } from "../../../../utils/tools";

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": "1",
        "name": "浮桥河水库-汛前检查",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "114.88169",
        "lttd": "31.171967",
        '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.120278",
        "lttd": "31.183611",
        'username': '周真',
        taskType: '特别巡查',
        tm: '2025-06-02 00:10:00',
        status: '未完成'
    },
    {
        "guid": "42118120003",
        "code": "",
        "name": "浮桥河水库-汛前检查",
        "resRegCode": "42000020030-A4",
        "adName": "白果镇",
        "engScal": "大（2）型",
        "place": "湖北省-黄冈市-麻城市-白果镇",
        "lgtd": "115.057222",
        "lttd": "31.110833",
        '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 setSkLayer1 = ()=>{
    const map = window.__mapref;
    const layer = map.getLayer('临时线')
    if(layer){
      map.removeLayer('临时线');
      map.removeSource('临时线');
    }
    map.addLayer({
        'id': '临时线',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'data': `${window.location.origin+process.env.PUBLIC_URL}/data3/line2.geojson`
        },
        'layout': {
          'line-join': 'round'
        },
        'paint': {
          'line-color': 'red',
          'line-width': 6
          // [
          //   'case',
          //   ['==', ['get', 'LEVEL'], 1], 2.2,
          //   ['==', ['get', 'LEVEL'], 2], 2.2,
          //   ['==', ['get', 'LEVEL'], 3], 2.2,
          //   ['==', ['get', 'LEVEL'], 4], 1.6,
          //   ['==', ['get', 'LEVEL'], 5], 1.3,
          //   10
          // ]
        },
        'visibility': 'visible',
    });
    }
    
    const setLayer = (data = [], type) => {
        const map = window.__mapref;
        const layer = map.getLayer('关联站点')
        if (layer) {
          map.removeLayer('关联站点');
          map.removeSource('关联站点');
        }
        if (data.length === 0) { return }
        map.addLayer({
            'id': '关联站点',//+new Date().getTime(),
            'type': 'symbol',
            'source': {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': [],
              },
            },
            'layout': {
              'icon-allow-overlap': true,
              'text-allow-overlap': true,
              'icon-image': '巡查',
              'icon-size': [
                'interpolate', ['linear'], ['zoom'],
                10, 0.4,
                14, 0.8,
              ],
    
              'text-allow-overlap': true,
              'text-size': [
                'interpolate', ['linear'], ['zoom'],
                10, 10,
                14, 14,
              ],
              'text-font': ['Roboto Black'],
              'text-field': [
                'step',
                ['zoom'],
                '',
                12, ['get', 'stnm']
              ],
              'text-anchor': 'top',
              'text-offset': [0, 1],
            },
            'paint': {
              'text-color': '#fff'
            },
            'visibility': 'visible',
          });
    
        map.getSource('关联站点').setData(parseGeoJSON(data))
      }
    const jumpTo = (record) => {
        const { lgtd, lttd } = record;
        const lgtdNum = Number(lgtd);
        const lttdNum = Number(lttd)
        if (record.code == 1) {
            setSkLayer1()
            setLayer([{...record,lgtd:lgtdNum,lttd:lttdNum,stnm:"06-02浮桥河水库日常巡查"}])
            if (lgtdNum && lttdNum) {
                dispatch.runtime.setCameraTarget({
                    center: [lgtdNum, lttdNum],
                    zoom: 17,
                    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: 10 }}>
                <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;