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

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
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 { useDispatch, useSelector } from 'react-redux';
import { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
import AreaDrpChart from './chart';
import config from '../../../../config';

function DrpReal({ style }) {
  const dispatch = useDispatch();
  const [ tab, setTab ] = useState('1')
  const data = [
    {
        "ADCD": "421181001000000",
        "NAME": "龙池办事处",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181002000000",
        "NAME": "鼓楼办事处",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181003000000",
        "NAME": "南湖办事处",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181100000000",
        "NAME": "中馆驿镇",
        "drp": 4,
        "cnt": 1,
        "av": 4
    },
    {
        "ADCD": "421181101000000",
        "NAME": "宋埠镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181102000000",
        "NAME": "歧亭镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181103000000",
        "NAME": "白果镇",
        "drp": 15,
        "cnt": 1,
        "av": 15
    },
    {
        "ADCD": "421181104000000",
        "NAME": "夫子河镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181105000000",
        "NAME": "阎家河镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181106000000",
        "NAME": "龟山镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181107000000",
        "NAME": "盐田河镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181108000000",
        "NAME": "张家畈镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181109000000",
        "NAME": "木子店镇",
        "drp": 93.5,
        "cnt": 2,
        "av": 46.8
    },
    {
        "ADCD": "421181110000000",
        "NAME": "三河口镇",
        "drp": 18,
        "cnt": 1,
        "av": 18
    },
    {
        "ADCD": "421181111000000",
        "NAME": "黄土岗镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181112000000",
        "NAME": "福田河镇",
        "drp": 50,
        "cnt": 1,
        "av": 50
    },
    {
        "ADCD": "421181113000000",
        "NAME": "乘马岗镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181114000000",
        "NAME": "顺河镇",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181200000000",
        "NAME": "铁门岗乡",
        "drp": 0,
        "cnt": 0,
        "av": 0
    },
    {
        "ADCD": "421181471000000",
        "NAME": "经济开发区",
        "drp": 0,
        "cnt": 0,
        "av": 0
    }
] 
  const data2 = [
  {
      "ADCD": "421181001000000",
      "NAME": "举水",
      "drp": 40,
      "cnt": 0,
      "av": 40
  },
  {
      "ADCD": "421181002000000",
      "NAME": "巴水",
      "drp": 35,
      "cnt": 0,
      "av": 35
  },
  {
      "ADCD": "421181003000000",
      "NAME": "芭茅河",
      "drp": 40,
      "cnt": 0,
      "av": 40
  },
  {
      "ADCD": "421181100000000",
      "NAME": "浮桥河",
      "drp": 47,
      "cnt": 1,
      "av": 47
  },
  {
      "ADCD": "421181101000000",
      "NAME": "麻溪河",
      "drp": 20,
      "cnt": 0,
      "av": 20
  },
  {
      "ADCD": "421181102000000",
      "NAME": "肖家河",
      "drp": 15,
      "cnt": 0,
      "av": 15
  },
  {
      "ADCD": "421181103000000",
      "NAME": "余家河",
      "drp": 45,
      "cnt": 1,
      "av": 45
  },
  {
      "ADCD": "421181104000000",
      "NAME": "白果河",
      "drp": 20,
      "cnt": 0,
      "av": 20
  }
]

  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.drp],
        zoom: config.poiPositionZoom.drp,
        pitch: config.poiPitch,
        bearing: 0
      });
    }
  }


  return (
    <PanelBox
      style={style}
      title="雨情"
      color="green"
      tabs={
        <>
        </>
      }
      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='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
        <span className="card-group">
            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>1h</span>
            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>3h</span>
            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>6h</span>
            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>12h</span>
            <span className={clsx({ active: true})} style={{marginRight:'0.3rem'}}>24h</span>
            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>48h</span>
        </span>
      </div>
      <AreaDrpChart data={tab==='1'?data:data2} />
    </PanelBox>
  )
}

export default DrpReal;