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

671 lines
19 KiB
JavaScript
Raw Normal View History

2025-06-06 16:30:16 +08:00
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';
const data1 = [
{
"res_cd": "42118140035",
"res_lon": 115.14137,
"res_lat": 31.55095,
"cd": "01",
"cd_nm": "GN1",
"res_reg_cd": "42118140006-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181112000",
"town_nm": "福田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "大堰口水库",
"de_value": -4.2885,
"dn_value": -13.5384,
"du_value": 132.4892,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.0981,
"max_dn": -2.3255,
"max_du": 132.4892,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140035",
"res_lon": 115.14137,
"res_lat": 31.55095,
"cd": "03",
"cd_nm": "GN3",
"res_reg_cd": "42118140006-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181112000",
"town_nm": "福田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "大堰口水库",
"de_value": -10.73,
"dn_value": -9.8975,
"du_value": 121.3495,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.0981,
"max_dn": -2.3255,
"max_du": 132.4892,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140035",
"res_lon": 115.14137,
"res_lat": 31.55095,
"cd": "02",
"cd_nm": "GN2",
"res_reg_cd": "42118140006-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181112000",
"town_nm": "福田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "大堰口水库",
"de_value": 1.0981,
"dn_value": -7.0736,
"du_value": 75.4661,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.0981,
"max_dn": -2.3255,
"max_du": 132.4892,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140035",
"res_lon": 115.14137,
"res_lat": 31.55095,
"cd": "04",
"cd_nm": "GN4",
"res_reg_cd": "42118140006-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181112000",
"town_nm": "福田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "大堰口水库",
"de_value": -6.469,
"dn_value": -2.3255,
"du_value": 47.1633,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.0981,
"max_dn": -2.3255,
"max_du": 132.4892,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140011",
"res_lon": 115.11878,
"res_lat": 30.88904,
"cd": "01",
"cd_nm": "GN1",
"res_reg_cd": "42118140019-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181104000",
"town_nm": "夫子河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "黄麻坳水库",
"de_value": -5.5809,
"dn_value": 4.6055,
"du_value": -13.083,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -5.1079,
"max_dn": 4.6055,
"max_du": -11.1644,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140011",
"res_lon": 115.11878,
"res_lat": 30.88904,
"cd": "02",
"cd_nm": "GN2",
"res_reg_cd": "42118140019-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181104000",
"town_nm": "夫子河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "黄麻坳水库",
"de_value": -5.1079,
"dn_value": 3.9064,
"du_value": -12.2936,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -5.1079,
"max_dn": 4.6055,
"max_du": -11.1644,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140017",
"res_lon": 115.14545,
"res_lat": 30.95398,
"cd": "03",
"cd_nm": "GN3",
"res_reg_cd": "42118140031-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181107000",
"town_nm": "盐田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "群建水库",
"de_value": 1.166,
"dn_value": 2.1274,
"du_value": 11.5948,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 2.6901,
"max_dn": 3.7945,
"max_du": 11.5948,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140011",
"res_lon": 115.11878,
"res_lat": 30.88904,
"cd": "03",
"cd_nm": "GN3",
"res_reg_cd": "42118140019-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181104000",
"town_nm": "夫子河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "黄麻坳水库",
"de_value": -5.1345,
"dn_value": 3.7423,
"du_value": -11.5382,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -5.1079,
"max_dn": 4.6055,
"max_du": -11.1644,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140022",
"res_lon": 115.39612,
"res_lat": 31.1526,
"cd": "02",
"cd_nm": "GN2",
"res_reg_cd": "42118140014-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181109000",
"town_nm": "木子店镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "何门咀水库",
"de_value": -0.7313,
"dn_value": 2.702,
"du_value": -11.493,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -0.4931,
"max_dn": 4.3759,
"max_du": -10.0925,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140011",
"res_lon": 115.11878,
"res_lat": 30.88904,
"cd": "04",
"cd_nm": "GN4",
"res_reg_cd": "42118140019-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181104000",
"town_nm": "夫子河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "黄麻坳水库",
"de_value": -5.7038,
"dn_value": 3.3505,
"du_value": -11.1644,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -5.1079,
"max_dn": 4.6055,
"max_du": -11.1644,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140017",
"res_lon": 115.14545,
"res_lat": 30.95398,
"cd": "04",
"cd_nm": "GN4",
"res_reg_cd": "42118140031-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181107000",
"town_nm": "盐田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "群建水库",
"de_value": 1.3441,
"dn_value": 3.3718,
"du_value": 10.8126,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 2.6901,
"max_dn": 3.7945,
"max_du": 11.5948,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140022",
"res_lon": 115.39612,
"res_lat": 31.1526,
"cd": "01",
"cd_nm": "GN1",
"res_reg_cd": "42118140014-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181109000",
"town_nm": "木子店镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "何门咀水库",
"de_value": -0.4931,
"dn_value": 4.3759,
"du_value": -10.0925,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -0.4931,
"max_dn": 4.3759,
"max_du": -10.0925,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140017",
"res_lon": 115.14545,
"res_lat": 30.95398,
"cd": "01",
"cd_nm": "GN1",
"res_reg_cd": "42118140031-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181107000",
"town_nm": "盐田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "群建水库",
"de_value": 2.6901,
"dn_value": 3.7368,
"du_value": 8.7918,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 2.6901,
"max_dn": 3.7945,
"max_du": 11.5948,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140017",
"res_lon": 115.14545,
"res_lat": 30.95398,
"cd": "02",
"cd_nm": "GN2",
"res_reg_cd": "42118140031-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181107000",
"town_nm": "盐田河镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "群建水库",
"de_value": 1.5528,
"dn_value": 3.7945,
"du_value": 7.5172,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 2.6901,
"max_dn": 3.7945,
"max_du": 11.5948,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140009",
"res_lon": 114.73138,
"res_lat": 31.01948,
"cd": "04",
"cd_nm": "GN4",
"res_reg_cd": "42118140028-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181102000",
"town_nm": "歧亭镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "鲇鱼坝水库",
"de_value": -2.3116,
"dn_value": -7.9976,
"du_value": -6.8754,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -1.4148,
"max_dn": -7.6521,
"max_du": -3.4337,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140032",
"res_lon": 115.13073,
"res_lat": 31.35489,
"cd": "02",
"cd_nm": "GN2",
"res_reg_cd": "42118140020-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181111000",
"town_nm": "黄土岗镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "待除险加固",
"label": "2023高标准",
"res_nm": "鸡翅关水库",
"de_value": -4.2641,
"dn_value": -1.5343,
"du_value": -6.8233,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.346,
"max_dn": -1.5343,
"max_du": -3.1838,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140032",
"res_lon": 115.13073,
"res_lat": 31.35489,
"cd": "03",
"cd_nm": "GN3",
"res_reg_cd": "42118140020-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181111000",
"town_nm": "黄土岗镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "待除险加固",
"label": "2023高标准",
"res_nm": "鸡翅关水库",
"de_value": -1.1126,
"dn_value": -1.7529,
"du_value": -5.7066,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": 1.346,
"max_dn": -1.5343,
"max_du": -3.1838,
"dt": "2025-05-20",
"is_has_data": "y"
},
{
"res_cd": "42118140009",
"res_lon": 114.73138,
"res_lat": 31.01948,
"cd": "01",
"cd_nm": "GN1",
"res_reg_cd": "42118140028-A4",
"ch": "0+000",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181102000",
"town_nm": "歧亭镇",
"bas_guid": "鄂东五河片区",
"eng_scal": "小1型",
"danger_stat": "非病险水库",
"label": "2023高标准",
"res_nm": "鲇鱼坝水库",
"de_value": -1.4148,
"dn_value": -10.2713,
"du_value": -5.146,
"de_trend": null,
"dn_trend": null,
"du_trend": null,
"max_de": -1.4148,
"max_dn": -7.6521,
"max_du": -3.4337,
"dt": "2025-05-20",
"is_has_data": "y"
}
]
function DrpReal({ style }) {
const [tab,setTab] = useState('1')
const dispatch = useDispatch();
return (
<PanelBox
style={style}
title="变形监测"
color="green"
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
<DpTableCell style={{ minWidth: '3rem' }} align="center">测点</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">垂直位移(mm)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">上下游(mm)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">左右岸(mm)</DpTableCell>
<DpTableCell style={{ minWidth: '10rem' }} align="center">监测时间</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data1.map((row,index) => (
<DpTableRow key={row.stcd}>
<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.res_nm}</div>
</DpTableCell>
<DpTableCell align="center">{row.cd_nm}</DpTableCell>
<DpTableCell align="center">{row.du_value}</DpTableCell>
<DpTableCell align="center">{row.de_value}</DpTableCell>
<DpTableCell align="center">{row.dn_value}</DpTableCell>
<DpTableCell align="center">{row.dt}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}
export default DrpReal;