import React, { useEffect, 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 { DrpRealPromise, HDRealPromise } from "../../../../models/_/real";
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';

const DRP_COLORS = [
  '#ffffff',
  'rgb(122, 232, 122)',
  'rgb(227, 255, 83)',
  'rgb(255, 140, 83)',
  'rgb(255, 0, 0)',
  'rgb(232, 122, 219)',
  'rgb(136, 11, 29)',
]

const data1 = [
  {
    "stcd": "61612150",
    "stnm": "鹰山畈(黄土岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.073611,
    "lttd": 31.386667,
    "elev": null,
    "hasRz": true,
    "type": "sh",
    "today": 0,
    "h1": 1,
    "h3": 1.2,
    "h6": 1.5,
    "h12": 1.6,
    "h24": 1.8,
    "h48": 12.9,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61612910",
    "stnm": "桃林河(阎河)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.087777777,
    "lttd": 31.164444444,
    "elev": null,
    "hasRz": true,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.4,
    "h6": 10.5,
    "h12": 11.200000000000001,
    "h24": 12.6,
    "h48": 32.8,
    "tm": "2025-06-03T02:10:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61613700",
    "stnm": "四角门(宋铁二桥)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.8291,
    "lttd": 31.0754,
    "elev": null,
    "hasRz": true,
    "type": "sh",
    "today": 0,
    "h1": 1,
    "h3": 1.2,
    "h6": 1.5,
    "h12": 1.6,
    "h24": 1.8,
    "h48": 23.4,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61614460",
    "stnm": "项生(宋埠)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.798056,
    "lttd": 31.058611,
    "elev": null,
    "hasRz": true,
    "type": "sh",
    "today": 0,
    "h1": 6,
    "h3": 7.199999999999999,
    "h6": 9,
    "h12": 9.600000000000001,
    "h24": 10.8,
    "h48": 11.899999999999999,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61615110",
    "stnm": "杨梅河(木子店)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.339667,
    "lttd": 31.1595,
    "elev": null,
    "hasRz": true,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.4,
    "h6": 10.5,
    "h12": 11.200000000000001,
    "h24": 12.6,
    "h48": 31.299999999999997,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640390",
    "stnm": "两路口(福田河)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.158167,
    "lttd": 31.56833,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.4,
    "h6": 10.5,
    "h12": 11.200000000000001,
    "h24": 12.6,
    "h48": 24.799999999999997,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640700",
    "stnm": "新屋河(黄土岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.045277777,
    "lttd": 31.404444444,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.9,
    "h6": 11,
    "h12": 11.700000000000001,
    "h24": 13.6,
    "h48": 21.299999999999997,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640850",
    "stnm": "喻家垸(黄土岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.033889,
    "lttd": 31.42,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 9,
    "h3": 10.799999999999999,
    "h6": 13.5,
    "h12": 14.4,
    "h24": 16.2,
    "h48": 33.099999999999994,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640900",
    "stnm": "得胜寨(乘马岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.936944444,
    "lttd": 31.410833333,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 4,
    "h3": 4.8,
    "h6": 6,
    "h12": 6.4,
    "h24": 7.2,
    "h48": 23.1,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640960",
    "stnm": "桐枧冲(黄土岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.124444444,
    "lttd": 31.395,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 4,
    "h3": 4.8,
    "h6": 6,
    "h12": 6.4,
    "h24": 7.2,
    "h48": 24.1,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640970",
    "stnm": "闵家畈(黄土岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.1033,
    "lttd": 31.2843,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 3,
    "h3": 3.5999999999999996,
    "h6": 4.5,
    "h12": 4.800000000000001,
    "h24": 5.4,
    "h48": 19.7,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61640980",
    "stnm": "飞龙山(乘马岗)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.9492,
    "lttd": 31.304,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 2,
    "h3": 2.4,
    "h6": 3,
    "h12": 3.2,
    "h24": 3.6,
    "h48": 19.8,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61641500",
    "stnm": "黄金桥(开发区)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.9749,
    "lttd": 31.165,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 9,
    "h3": 10.799999999999999,
    "h6": 13.5,
    "h12": 14.4,
    "h24": 16.2,
    "h48": 34.099999999999994,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61641610",
    "stnm": "张广河(三河口)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.314167,
    "lttd": 31.349667,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.4,
    "h6": 10.5,
    "h12": 11.200000000000001,
    "h24": 12.6,
    "h48": 24.799999999999997,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
{
    "stcd": "61641700",
    "stnm": "前畈(三河口)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.2267,
    "lttd": 31.3925,
    "elev": null,
    "hasRz": false,
    "type": "sh",
    "today": 0,
    "h1": 7,
    "h3": 8.4,
    "h6": 10.5,
    "h12": 11.200000000000001,
    "h24": 12.6,
    "h48": 22.799999999999997,
    "tm": "2025-06-03T02:00:00.000Z",
    "state": 1,
    "warning": 0
},
]
const data2 = [
  {
      "stcd": "61612150",
      "stnm": "鹰山畈(黄土岗)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.073611,
      "lttd": 31.386667,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 77.12,
      "trend": 0,
      "state": 1,
      "warning": 0,
      "maxRz": 77.25,
      "maxDate": "2025-06-02T16:00:00.000Z",
      "warndes": null
  },
  {
      "stcd": "61612910",
      "stnm": "桃林河(阎河)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.087777777,
      "lttd": 31.164444444,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:35:00.000Z",
      "rz": 55.67,
      "trend": 0,
      "state": 1,
      "warning": 0,
      "maxRz": 55.67,
      "maxDate": "2025-06-03T02:00:00.000Z",
      "warndes": null
  },
  {
      "stcd": "61613700",
      "stnm": "四角门(宋铁二桥)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.8291,
      "lttd": 31.0754,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 27.57,
      "trend": 0,
      "state": 1,
      "warning": 0,
      "maxRz": 27.57,
      "maxDate": "2025-06-03T01:00:00.000Z",
      "warndes": null
  },
  {
      "stcd": "61614460",
      "stnm": "项生(宋埠)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.798056,
      "lttd": 31.058611,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 21.91,
      "trend": 1,
      "state": 1,
      "warning": 0,
      "maxRz": 21.91,
      "maxDate": "2025-06-03T02:00:00.000Z",
      "warndes": null
  },
  {
      "stcd": "61615110",
      "stnm": "杨梅河(木子店)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.339667,
      "lttd": 31.1595,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 112.71,
      "trend": 0,
      "state": 1,
      "warning": 0,
      "maxRz": 112.71,
      "maxDate": "2025-06-02T22:00:00.000Z",
      "warndes": null
  },
  {
      "stcd": "61612200",
      "stnm": "麻城",
      "adcd": null,
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.042444,
      "lttd": 31.187389,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 52.72,
      "state": 1
  },
  {
      "stcd": "61612210",
      "stnm": "麻城临时断面",
      "adcd": null,
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.042444,
      "lttd": 31.187389,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 51.415,
      "state": 1
  },
  {
      "stcd": "61612500",
      "stnm": "王福店",
      "adcd": null,
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.986666,
      "lttd": 31.352944,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 73.37,
      "state": 1
  },
  {
      "stcd": "61612900",
      "stnm": "阎家河",
      "adcd": null,
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.128722,
      "lttd": 31.207,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 61.75,
      "state": 1
  },
  {
      "stcd": "61615300",
      "stnm": "木子店",
      "adcd": null,
      "wscd": null,
      "importancy": 1,
      "lgtd": 115.3625,
      "lttd": 31.190278,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 133.97,
      "state": 1
  },
  {
      "stcd": "61644000",
      "stnm": "浮桥河",
      "adcd": null,
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.883583,
      "lttd": 31.180444,
      "elev": null,
      "hasRz": true,
      "type": "sw",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 43.6,
      "state": 1
  }
]
const data3 = [
  {
    type: '工业',
    time: '2025-05-26 10:00',
    stcd: 42000002,
    stnm: '汉通闸流量站',
    water:30,
    flow: 0.222,
      "lttd": 30.973775 + 0.2002,
      "lgtd": 112.17597 +2.9619,
    
  },
  {  water:12,
    type: '工业',
    stcd: 42000001,
    time: '2025-05-26 10:00',
    stnm: '福耀玻璃',
    flow: 0.355,
       "lttd": 30.93926+0.2002,
      "lgtd": 112.191703+ 2.9619,
  }, {
      water:21,
    type: '工业',
    time: '2025-05-26 10:00',
    stnm: '格林美',
    flow: 0.09,
       "lttd": 30.953887 + 0.2002,
    "lgtd": 112.190551 + 2.9619,
     stcd: 42000005
  }
]
const data4 = [
  {
      "stcd": "05566004",
      "type": "pic",
      "hasRz": false,
      "stnm": "三河口镇小河沟图像站",
      "adcd": "421181109014000",
      "lgtd": 115.310397,
      "lttd": 31.39211
  },
  {
      "stcd": "05511105",
      "type": "pic",
      "hasRz": false,
      "stnm": "木子店镇郑家榜图像站",
      "adcd": "421181107011000",
      "lgtd": 115.421127,
      "lttd": 31.246292
  },
  {
      "stcd": "05566003",
      "type": "pic",
      "hasRz": false,
      "stnm": "龙池办虎形地图像站",
      "adcd": "421181001013000",
      "lgtd": 115.008805,
      "lttd": 31.23537
  },
  {
      "stcd": "05566005",
      "type": "pic",
      "hasRz": false,
      "stnm": "中驿镇林寨图像站",
      "adcd": "421181100006000",
      "lgtd": 114.909063,
      "lttd": 31.146058
  },
  {
      "stcd": "05511104",
      "type": "pic",
      "hasRz": false,
      "stnm": "木子店镇严家坳图像站",
      "adcd": "421181107012000",
      "lgtd": 115.406112,
      "lttd": 31.254278
  },
  {
      "stcd": "05566001",
      "type": "pic",
      "hasRz": false,
      "stnm": "张家畈镇余家河图像站",
      "adcd": "421181106017000",
      "lgtd": 115.278691,
      "lttd": 31.057429
  },
  {
      "stcd": "05566002",
      "type": "pic",
      "hasRz": false,
      "stnm": "阎家河镇柳林河图像站",
      "adcd": "421181105006000",
      "lgtd": 115.083333,
      "lttd": 31.15
  },
  {
      "stcd": "05511101",
      "type": "pic",
      "hasRz": false,
      "stnm": "龟山镇九里冲图像站",
      "adcd": "421181201013000",
      "lgtd": 115.1952,
      "lttd": 31.0379
  },
  {
      "stcd": "05511102",
      "type": "pic",
      "hasRz": false,
      "stnm": "龟山镇铺头坳图像站",
      "adcd": "421181201009000",
      "lgtd": 115.170265,
      "lttd": 31.090787
  },
  {
      "stcd": "05511103",
      "type": "pic",
      "hasRz": false,
      "stnm": "龟山镇栗林口图像站",
      "adcd": "421181201007000",
      "lgtd": 115.178527,
      "lttd": 31.123027
  }
]
const data5 = [
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181105000",
      "town_nm": "阎家河镇",
      "res_cd": "42118140028",
      "res_nm": "红心水库",
      "res_lon": 115.18962,
      "res_lat": 31.23425,
      "video_guid": "00032e3e6d984f0eb32c807e5769ec3a",
      "video_name": "红心水库坝脚球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181001000",
      "town_nm": "龙池办事处",
      "res_cd": "42118150152",
      "res_nm": "戴家冲水库",
      "res_lon": 115.0241,
      "res_lat": 31.23237,
      "video_guid": "0037a5cb2caf44e49c012e3fdfa01238",
      "video_name": "戴家冲水库_坝顶_枪机_龙池",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181101000",
      "town_nm": "宋埠镇",
      "res_cd": "42118140008",
      "res_nm": "管山水库",
      "res_lon": 114.78397,
      "res_lat": 31.19451,
      "video_guid": "0243e9726e244b728618741f248e0577",
      "video_name": "管山水库坝脚球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181100000",
      "town_nm": "中馆驿镇",
      "res_cd": "42118140005",
      "res_nm": "响鼓墩水库",
      "res_lon": 114.91971,
      "res_lat": 31.17985,
      "video_guid": "024eaf5578464d9192559ad2288ba764",
      "video_name": "响鼓墩水库",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "res_cd": "42118150147",
      "res_nm": "张家河水库",
      "res_lon": 115.17869,
      "res_lat": 31.48587,
      "video_guid": "02d77364354a4f8982ad3d949e0d32ab",
      "video_name": "张家河水库_坝脚_球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181114000",
      "town_nm": "顺河镇",
      "res_cd": "42118150048",
      "res_nm": "孙家榜水库",
      "res_lon": 114.91758,
      "res_lat": 31.26933,
      "video_guid": "03059577c270432bb7338e7f714b9a01",
      "video_name": "孙家塝水库",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181110000",
      "town_nm": "三河口镇",
      "res_cd": "42118150145",
      "res_nm": "袁家冲水库",
      "res_lon": 115.28076,
      "res_lat": 31.28639,
      "video_guid": "031ac395df964414a17f9dc996e13d57",
      "video_name": "袁家冲水库视频站",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181003000",
      "town_nm": "南湖办事处",
      "res_cd": "42118140003",
      "res_nm": "毛家冲水库",
      "res_lon": 114.98531,
      "res_lat": 31.20469,
      "video_guid": "036b290ac8e547a79f5835754e02772c",
      "video_name": "毛家冲水库溢洪道",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181102000",
      "town_nm": "歧亭镇",
      "res_cd": "42118150224",
      "res_nm": "兴隆寺水库",
      "res_lon": 114.69534,
      "res_lat": 31.01031,
      "video_guid": "0385335df9c64c1f8972cf3ed17b4854",
      "video_name": "兴隆寺水库_坝脚_球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181100000",
      "town_nm": "中馆驿镇",
      "res_cd": "42118150094",
      "res_nm": "西冲水库",
      "res_lon": 114.94118,
      "res_lat": 31.06765,
      "video_guid": "046336873b8a4eefbc321bd2e6e4359c",
      "video_name": "西冲水库",
      "online": "1",
      "sys_resource": 2
  },
]

function DrpReal({ style }) {
  const [tab,setTab] = useState('1')
  const [drpData,setDrpData] = useState([])
  const [hdData,setHdData] = useState([])
  

  const dispatch = useDispatch();
  const skObj = useSelector(s => s.runtime.skObj);


  useEffect(()=>{
    getDrp(skObj)
    getHd(skObj)

    return ()=>{
      const map = window.__mapref;
      const layer = map.getLayer('关联站点')
      if(layer){
          map.removeLayer('关联站点');
          map.removeSource('关联站点');
      }
  }
  },[skObj])

  useEffect(()=>{
    const map = window.__mapref;
    if(map){
      if(tab==='1'&&drpData){
        setLayer(drpData,'drp')
      }
      if(tab==='2'&&hdData){
        setLayer(hdData,'hd')
      }
    }else{
      const dsq = setInterval(() => {
        const map = window.__mapref;
        if(map && drpData.length>0){
            clearInterval(dsq)
            setLayer(drpData,'drp')
        }
      }, 500);
    }

  },[drpData,hdData,skObj,tab])



  const getDrp = async(skObj)=>{
    const { lgtd, lttd } = skObj
    const step = 0.05
    let data = await DrpRealPromise.get();
    if (Array.isArray(data)) {
      data = data.filter(o => {
        if(o.type !== 'sk'){
          if(
            lgtd-step<o.lgtd && o.lgtd<lgtd+step &&
            lttd-step<o.lttd && o.lttd<lttd+step
          ){return true}
          else{
            return false
          }

        }else{
          return false
        }
      });
    }
    setDrpData(data)
  }

  const getHd = async(skObj)=>{
    const { lgtd, lttd } = skObj
    const step = 0.1
    let data = await HDRealPromise.get();
    if (Array.isArray(data)) {
      data = data.filter(o => {
        if(o.type !== 'sk'){
          if(
            lgtd-step<o.lgtd && o.lgtd<lgtd+step &&
            lttd-step<o.lttd && o.lttd<lttd+step
          ){return true}
          else{
            return false
          }

        }else{
          return false
        }
      });
    }
    setHdData(data)
  }

  const setLayer = (data=[],type)=>{
    const map = window.__mapref;
    const layer = map.getLayer('关联站点')
    if(layer){
      map.removeLayer('关联站点');
      map.removeSource('关联站点');
    }
    if(data.length===0){return}
    if(type==='drp'){
      map.addLayer({
        'id': '关联站点',//+new Date().getTime(),
        'type': 'circle',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [],
            },
        },
        'paint': {
          'circle-color': [
            'case',
            ['==', ['get', 'state'], 1], [
              'interpolate-hcl',
              ['linear'],
              ['get', 'h1'],
              0, DRP_COLORS[0],
              10, DRP_COLORS[1],
              25, DRP_COLORS[2],
              50, DRP_COLORS[3],
              100, DRP_COLORS[4],
              250, DRP_COLORS[5],
              500, DRP_COLORS[6],
            ],
            '#aaa'
          ],
          'circle-opacity': [
            'case',
            ['==', ['get', 'state'], 1], 1,
            0.6
          ],
          'circle-stroke-width': [
            'step',
            ['zoom'],
            0,
            12, 2,
            14, 3
          ],
          'circle-stroke-color': [
            'match',
            ['get', 'type'],
            'sh', '#91eda1',
            'sw', '#f8ec82',
            'qx', '#e091ed',
            '#fff'
          ],
          'circle-radius': [
            'interpolate',
            ['linear'],
            ['zoom'],
            10, 6,
            14, 10,
          ]
        },
        'visibility': 'visible',
      });
    }
    if(type==='hd'){
      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.5,
            14, 1,
          ],
          'text-size': [
            'interpolate', ['linear'], ['zoom'],
            10, 10,
            14, 16,
          ],
        },
        'paint': {
          'text-color': [
            'case',
            ['!=', ['get', 'state'], 1], '#888',
            ['==', ['get', 'warning'], 3], '#f00',
            ['==', ['get', 'warning'], 2], 'yellow',
            ['==', ['get', 'warning'], 1], 'yellow',
            '#0f0'
          ],
          'text-halo-color': '#062040',
          'text-halo-width': 1
        },
        'visibility': 'visible',
      });
    }
    map.getSource('关联站点').setData(parseGeoJSON(data))
  }
  

  return (
    <PanelBox
      style={style}
      title="关联站点"
      color="green" 
      tabs={
        <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 className={clsx({ active: tab==='3' })} onClick={() => {
            setTab('3')
          }}>流量站</span>
          <span className={clsx({ active: tab==='4' })} onClick={() => {
            setTab('4')
          }}>图像站</span>
          <span className={clsx({ active: tab==='5' })} onClick={() => {
            setTab('5')
          }}>视频站</span>
        </span>
      }
    >

      <TableContainer style={{ height: '100%' }}>
        {
          tab==='1'?
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                {/* <DpTableCell style={{ minWidth:'50px' }} align="center">序号</DpTableCell> */}
                <DpTableCell style={{ minWidth: '5rem' }} align="left">站点名称</DpTableCell>
                <DpTableCell style={{ minWidth: '5rem' }} align="center">1h时段雨量(mm)</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">时间</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {drpData.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  {/* <DpTableCell align="center">{index+1}</DpTableCell> */}
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" onClick={() => {
                      const { lgtd, lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.stnm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{(row.h1).toFixed(2)}</DpTableCell>
                  <DpTableCell align="center">{row.tm.slice(0,10)}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>:null
        }
        {
          tab==='2'?
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '4rem' }} align="center">名称</DpTableCell>
                <DpTableCell style={{ minWidth: '4rem' }} align="center">水位</DpTableCell>
                <DpTableCell style={{ minWidth: '4rem' }} align="center">保证水位	</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {hdData.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" onClick={() => {
                      const { lgtd, lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.stnm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.rz}</DpTableCell>
                  <DpTableCell align="center">{row.rz+5.5}</DpTableCell>
                  <DpTableCell align="center">{row.rz+4}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>:null
        }
        {
          tab==='3'?
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                {/* <DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell> */}
                <DpTableCell style={{ minWidth: '6rem' }} align="center">站点名称</DpTableCell>
                <DpTableCell style={{ minWidth: '3rem' }} align="center">类型</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">时间</DpTableCell>
                <DpTableCell style={{ minWidth: '4rem' }} align="center">流量(m³/s)</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data3.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  {/* <DpTableCell align="center">{index+1}</DpTableCell> */}
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" onClick={() => {
                      const { res_lon:lgtd, res_lat:lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.stnm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.type}</DpTableCell>
                  <DpTableCell align="center">{row.time}</DpTableCell>
                  <DpTableCell align="center">{row.flow}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>:null
        }
        {
          tab==='4'?
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">名称</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">状态</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data4.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  <DpTableCell align="center">{index+1}</DpTableCell>
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" style={{marginLeft:'20px'}} onClick={() => {
                      const { res_lon:lgtd, res_lat:lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.stnm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{<span style={{color:'#3af6cd',display:'flex',alignItems:'center',marginLeft:'30px'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>:null
        }
        {
          tab==='5'?
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">行政区</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">状态</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data5.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  <DpTableCell align="center">{index+1}</DpTableCell>
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" style={{marginLeft:'20px'}} onClick={() => {
                      const { res_lon:lgtd, res_lat:lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.res_nm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.town_nm}</DpTableCell>
                  <DpTableCell align="center">{row.online==='1'?
                    <span style={{color:'#3af6cd',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>
                    :<span style={{color:'#eeeeee',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#eeeeee'}}></div>离线</span>
                  }</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>:null
        }
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;