diff --git a/public/data/shyjFind.json b/public/data/shyjFind.json index af201bb..fb385b4 100644 --- a/public/data/shyjFind.json +++ b/public/data/shyjFind.json @@ -8,7 +8,9 @@ "warnstm": "2025-05-22 21:00:00", "tempcolumn": 0, "warnid": 1128, - "isauto": "0", + "isauto": "0", + "lgtd": 115.01083, + "lttd": 31.041152, "warnnm": "白果镇山洪准备转移", "adnm": "白果镇", "adcd": "421181103000000", @@ -28,6 +30,8 @@ "warnnm": "夫子河镇北门村山洪准备转移", "adnm": "夫子河镇北门村", "adcd": "421181104001000", + "lgtd": 115.01986, + "lttd": 30.968793, "warntypeid": 10, "temprownumber": 2 }, @@ -44,6 +48,8 @@ "warnnm": "夫子河镇山洪准备转移", "adnm": "夫子河镇", "adcd": "421181104000000", + "lgtd": 115.026944, + "lttd": 30.959121, "warntypeid": 10, "temprownumber": 3 }, @@ -60,6 +66,8 @@ "warnnm": "福田河镇山洪准备转移", "adnm": "福田河镇", "adcd": "421181111000000", + "lgtd": 115.075433, + "lttd": 31.384331, "warntypeid": 10, "temprownumber": 4 }, @@ -76,6 +84,8 @@ "warnnm": "木子店镇山洪准备转移", "adnm": "木子店镇", "adcd": "421181107000000", + "lgtd": 115.172808, + "lttd": 30.963342, "warntypeid": 10, "temprownumber": 5 }, @@ -92,6 +102,8 @@ "warnnm": "白果镇山洪准备转移", "adnm": "白果镇", "adcd": "421181103000000", + "lgtd": 115.01083, + "lttd": 31.041152, "warntypeid": 10, "temprownumber": 6 }, @@ -140,6 +152,8 @@ "warnnm": "张家畈镇山洪准备转移", "adnm": "张家畈镇", "adcd": "421181106000000", + "lgtd": 115.183208, + "lttd": 31.074978, "warntypeid": 10, "temprownumber": 9 }, @@ -156,6 +170,8 @@ "warnnm": "夫子河镇北门村山洪准备转移", "adnm": "夫子河镇北门村", "adcd": "421181104001000", + "lgtd": 115.01986, + "lttd": 30.968793, "warntypeid": 10, "temprownumber": 10 } diff --git a/src/models/map/index.js b/src/models/map/index.js index 8659aa5..dccf170 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -177,7 +177,7 @@ const map = { Object.keys(DCPJ_TYPES).forEach(key => { layerVisible['Dcpj_' + key + 'Layer'] = false; }); - } else if (id === 9) { + } else if (id === 8) { layerVisible = { RealDrpLayer: false, RealHDLayer: false, @@ -187,8 +187,9 @@ const map = { YuwaiLayer: false, AdcdLayer: true, WataLayer: false, - RealSkLayerQ2: false, - RealHDLayerQ2: false, + RealSkLayerQ2: true, + RealHDLayerQ2: true, + ShyjLayer:true, } Object.keys(DCPJ_TYPES).forEach(key => { layerVisible['Dcpj_' + key + 'Layer'] = false; @@ -535,13 +536,13 @@ const map = { dispatch.runtime.setFeaturePop(null); - if (id === 8) { - dispatch.rcview.showRealContour('h24') - } else { - dispatch.runtime.setLayerSetting({ contour: null, dem: undefined }); - dispatch.runtime.setLayerSetting({ planeArea: null }); - dispatch.map.setLayerVisible({ ContourLayer: false }); - } + // if (id === 8) { + // dispatch.rcview.showRealContour('h24') + // } else { + // dispatch.runtime.setLayerSetting({ contour: null, dem: undefined }); + // dispatch.runtime.setLayerSetting({ planeArea: null }); + // dispatch.map.setLayerVisible({ ContourLayer: false }); + // } if (id === 201) { dispatch.map.setLayerSetting({ dom: false }); map.setLayoutProperty('热力图', 'visibility', 'visible'); @@ -572,6 +573,7 @@ const map = { if ( id === 3 + || id === 8 || id === 203 || id === 205 || id === 206 diff --git a/src/models/map/layout.js b/src/models/map/layout.js index 046f21c..0f82ce2 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -237,14 +237,15 @@ export default function calcLayout(view, rightStack, hidePanels) { }else if (view === 8) { right = [ { key: '警报' }, - { key: '防洪形势天气预报', style: { height: '18.5rem'} }, - { key: '防洪形势水情', style: { height: '18.5rem'} }, + { key: '防洪形势雨情2', style: { flexGrow: 1 } }, + { key: '重点关注水情', style: { flexGrow: 1 } }, + // { key: '防洪形势天气预报', style: { height: '18.5rem'} }, + // { key: '防洪形势水情', style: { height: '18.5rem'} }, // { key: '河道水位', style: { height: '10rem', flexGrow: 1 } }, - { key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } }, + // { key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } }, // { key: '工情', style: { height: '10rem', flexGrow: 1 } }, // { key: '今日值班' }, ]; - rightFullHeight = true; }else if (view === 9) { right = [ { key: '警报' }, diff --git a/src/views/Home/MapCtrl/mapstyle/layermgr.js b/src/views/Home/MapCtrl/mapstyle/layermgr.js index 92b5a1f..af31870 100644 --- a/src/views/Home/MapCtrl/mapstyle/layermgr.js +++ b/src/views/Home/MapCtrl/mapstyle/layermgr.js @@ -3,6 +3,7 @@ import RealHDLayer from "./realhdlayer"; import RealHDLayerQ2 from "./realhdlayerQ2"; import RealSkLayer from "./realsklayer"; import RealSkLayerQ2 from "./realsklayerQ2"; +import ShyjLayer from "./shyjLayer" import sources from "./sources"; import base from "./base"; @@ -72,6 +73,7 @@ class LayerMgr { this.layers.push(new ShuikuLayer()); this.layers.push(new RainDrpLayer()); this.layers.push(new XunchaLayer()); + this.layers.push(new ShyjLayer()); // @@ -223,6 +225,7 @@ class LayerMgr { this.layerMap.ShuikuLayer.getStyle(), this.layerMap.RainDrpLayer.getStyle(), this.layerMap.XunchaLayer.getStyle(), + this.layerMap.ShyjLayer.getStyle(), // diff --git a/src/views/Home/MapCtrl/mapstyle/shyjLayer.js b/src/views/Home/MapCtrl/mapstyle/shyjLayer.js new file mode 100644 index 0000000..d3771a7 --- /dev/null +++ b/src/views/Home/MapCtrl/mapstyle/shyjLayer.js @@ -0,0 +1,92 @@ +import clone from "clone"; +import { PicStPromise, TestPicStPromise } from "../../../../models/_/real"; +import { parseGeoJSON } from "../../../../utils/tools"; +import { InfoPopNames } from "../../InfoPops"; +import BaseLayer from "./baselayer"; + +const SourceName = '山洪预警'; + +const ShapeStyle = { + id: SourceName, + type: 'symbol', + source: SourceName, + layout: { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': 'Marker', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.8, + 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], + + 'visibility': 'none', + }, + paint: { + 'text-color': '#fff' + } +}; + + +export default class ShyjLayer extends BaseLayer { + + static LayerName = 'ShyjLayer'; + + static SourceName = SourceName; + + getStyle() { + + const ret = clone(ShapeStyle); + this._setStyleVisibility(ret); + return ret; + + } + + getName() { + return ShyjLayer.LayerName; + } + + getSubLayers() { + return [ShapeStyle.id]; + } + + async doRefreshLayer(mapCtrl) { + const ms = mapCtrl.getSource(SourceName); + let data = await fetch(`${process.env.PUBLIC_URL}/data/shyjFind.json`) + .then((response) => response.json()) + .catch(() => null); + const list = data.filter(o=>o.lgtd&&o.lttd) + ms.setData(parseGeoJSON(list)); + return true; + } + + getFeatureTip(record) { + return record.stnm; + } + + featureClicked(properties, dispatch) { + dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: properties }) + // dispatch.runtime.setFeaturePop({ + // type: InfoPopNames.PicStPop, + // properties, + // coordinates: [properties.lgtd, properties.lttd], + // offsetPop: true, + // }); + } +} diff --git a/src/views/Home/MapCtrl/mapstyle/sources.js b/src/views/Home/MapCtrl/mapstyle/sources.js index 4f12afb..13e6159 100644 --- a/src/views/Home/MapCtrl/mapstyle/sources.js +++ b/src/views/Home/MapCtrl/mapstyle/sources.js @@ -29,7 +29,7 @@ import ShuiyuandiQLayer from "./shuiyuandiQLayer"; import ShuikuLayer from "./shuikuLayer"; import RainDrpLayer from "./rainDrpLayer" import XunchaLayer from "./xunchalayer" - +import shyjLayer from "./shyjLayer" const hash = window.location.origin; @@ -190,8 +190,11 @@ const sources = { }, {}) ), - //新图层 + [shyjLayer.SourceName]: { + type: 'geojson', + data: { type: 'FeatureCollection', features: [] }, + }, [BxjcLayer.SourceName]: { type: 'geojson', data: { type: 'FeatureCollection', features: [] }, diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index dbd1a4e..06c7708 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -116,6 +116,8 @@ import Cxsk from './panels/Cxsk' import Zdtj from './panels/Zdtj' import Jcgjz from './panels/Jcgjz' import JbqkLeft from './panels/JbqkLeft' +import FhxsYq2 from './panels/FhxsYq2' +import Zdgzsq from './panels/Zdgzsq' import Skyb from './panels/Skyb' @@ -411,6 +413,10 @@ export default function PanelIndex({ name, style, ...params }) { return } else if (name === '防汛基本情况右侧') { return + } else if (name === '防洪形势雨情2') { + return + } else if (name === '重点关注水情') { + return } return ( diff --git a/src/views/Home/panels/FhxsYq2/chart.js b/src/views/Home/panels/FhxsYq2/chart.js new file mode 100644 index 0000000..315954e --- /dev/null +++ b/src/views/Home/panels/FhxsYq2/chart.js @@ -0,0 +1,141 @@ +import React, { useMemo } from 'react'; +import echarts from 'echarts/lib/echarts'; +import ReactEcharts from 'echarts-for-react'; + + +const pallete = [ + ['#177ab3', '#51c3e7'], + ['#9976dc', '#c792ee'], + ['#94a1eb', '#a7caf8'], + ['#7ae5c3', '#c9f4ea'], + ['#c7dca5', '#f5fcd5'], + ['#7988d9', '#9dc6f1'], + ['#d9ed8f', '#d3f89b'], +]; + +const palleteLen = pallete.length; + + +const AreaDrpChart = ({ data }) => { + const { max, sdata } = useMemo(() => { + let max = 0; + data.forEach(o => { + max = Math.max(max, o.av) + }); + max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max); + + return { + max, + sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })), + } + }, [data]); + + var option = { + tooltip: { + trigger: 'item', + formatter: function (params) { + var res = `${params.name.substr('2020-10-14 '.length, 2)}时降雨：${params.data}mm`; + return res; + } + }, + grid: { + x: 18, + y: 24, + x2: 28, + y2: 36, + bottom: 80, + borderWidth: 0 + }, + calculable: true, + xAxis: [ + { + type: 'category', + data: sdata.map(o => o.name), + splitLine: { + show: false + }, + axisLabel: { + color: '#bbb', + fontSize: 10, + textShadowBlur: 4, + textShadowColor: '#6ab', + }, + axisLine: { + lineStyle: { + color: '#07a6ff', + width: 0.5, + } + }, + axisTick: { + show: false, + } + } + ], + yAxis: [ + { + type: 'value', + position: 'right', + splitLine: { + show: true, + lineStyle: { + color: '#07a6ff', + width: 0.25, + type: 'dashed' + } + }, + axisLabel: { + color: '#bbb', + fontSize: 10, + textShadowBlur: 4, + textShadowColor: '#6ab', + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: 0, + max, + } + ], + series: [ + { + name: '降雨', + type: 'bar', + barWidth: '60%', + data: sdata.map(o => o.av), + itemStyle: { + normal: { + color: (params) => { + return new echarts.graphic.LinearGradient( + 0, 0, 0, 1, + [ + { offset: 0, color: pallete[params.dataIndex % palleteLen][0] }, + { offset: 1, color: pallete[params.dataIndex % palleteLen][1] } + ] + ) + }, + }, + }, + label: { + show: true, + position: 'top', + color: '#bbb', + fontSize: 12, + textShadowBlur: 4, + textShadowColor: '#6ab', + }, + } + ] + }; + + return ( + + ) +} + +export default React.memo(AreaDrpChart); diff --git a/src/views/Home/panels/FhxsYq2/index.js b/src/views/Home/panels/FhxsYq2/index.js new file mode 100644 index 0000000..a71fd5b --- /dev/null +++ b/src/views/Home/panels/FhxsYq2/index.js @@ -0,0 +1,215 @@ +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 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 ( + + + } + extra={ + <> + + setTab('1')}>政区 + setTab('1')}>流域 + + + } + > +
+ + 1h + 3h + 6h + 12h + 24h + 48h + +
+ + + ) +} + +export default DrpReal; diff --git a/src/views/Home/panels/Warn/ShYj.js b/src/views/Home/panels/Warn/ShYj.js index 686f33a..6998657 100644 --- a/src/views/Home/panels/Warn/ShYj.js +++ b/src/views/Home/panels/Warn/ShYj.js @@ -24,7 +24,7 @@ function Item({ data, viewInfo }) { @@ -90,7 +90,16 @@ function ShYj({ data }) { }); } } else { - dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record }) + const { lgtd, lttd } = record; + if (lgtd && lttd) { + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd], + zoom: 15, + pitch: 50, + bearing: 0 + }); + } + // dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record }) } }, [dispatch]); @@ -99,9 +108,9 @@ function ShYj({ data }) { return (
- { + {/* { hisdata?.length > 0 && 当前无预警，显示最新10条已关闭预警 - } + } */} { showdata.map(o => ( diff --git a/src/views/Home/panels/Zdgzsq/index.js b/src/views/Home/panels/Zdgzsq/index.js new file mode 100644 index 0000000..58f76e3 --- /dev/null +++ b/src/views/Home/panels/Zdgzsq/index.js @@ -0,0 +1,78 @@ +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'; +import TablePage from './table.js' + +function DrpReal({ style }) { + const dispatch = useDispatch(); + const [ tab, setTab ] = useState('1') + const data = [ + { name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' }, + { name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' }, + { name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' }, + { name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' }, + { name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' }, + ] + + 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 ( + + + } + extra={ + <> + + setTab('1')}>河道 + setTab('1')}>水库 + + + } + > +
+ + 政区 + 流域 + +
+ + + + ) +} + +export default DrpReal; diff --git a/src/views/Home/panels/Zdgzsq/table.js b/src/views/Home/panels/Zdgzsq/table.js new file mode 100644 index 0000000..80109bc --- /dev/null +++ b/src/views/Home/panels/Zdgzsq/table.js @@ -0,0 +1,56 @@ +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 appconsts from '../../../../models/appconsts'; +import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils'; + + +const data = [ + { name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' }, + { name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' }, + { name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' }, + { name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' }, + { name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' }, +] + +function Page({ style }) { + + return ( + + + + + 河流名称 + 断面名称 + 洪峰水位 + 洪峰流量 + 峰现时间 + + + + {data.map((row) => ( + + +
{}}>{row.name}
+ + {row.dm} + {row.hfsw} + {row.hfll} + {row.tm} + + ))} + +
+ + ) +} + +export default React.memo(Page);