feat(): 水厂修改
parent
2d63f3ca60
commit
f01fce0aec
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 MiB After Width: | Height: | Size: 4.0 MiB |
|
|
@ -148,7 +148,7 @@ const map = {
|
|||
setView(id) {
|
||||
let layerVisible = {};
|
||||
const map = window.__mapref
|
||||
if (id === 0 || id === 1 || id ==501 || id == 504 || id == 507 || id == 506|| id == 505 || id == 503) {
|
||||
if (id === 0 || id === 1 || id == 503) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
RealHDLayer: true,
|
||||
|
|
@ -265,7 +265,7 @@ const map = {
|
|||
AdcdLayer: true,
|
||||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
BxjcLayer:true,
|
||||
BxjcLayer: true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
|
|
@ -346,6 +346,58 @@ const map = {
|
|||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
} else if (id == 501) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
RealHDLayer: true,
|
||||
RealSkLayer: true,
|
||||
ShuiZhaLayer: true,
|
||||
BzLayer: true,
|
||||
SbLayer: true,
|
||||
QdLayer: true,
|
||||
ShuizhiLayer: true,
|
||||
TrsqLayer: true,
|
||||
AdcdLayer: true,
|
||||
RivlLayer: true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
}else if (id == 504) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
TrsqLayer: true,
|
||||
AdcdLayer: true,
|
||||
RivlLayer: true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
}else if (id == 505) {
|
||||
layerVisible = {
|
||||
BzLayer: true,
|
||||
SbLayer: true,
|
||||
QdLayer: true,
|
||||
ShuizhiLayer: true,
|
||||
AdcdLayer: true,
|
||||
RivlLayer: true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
}else if (id == 506 || id == 507) {
|
||||
layerVisible = {
|
||||
AdcdLayer: true,
|
||||
RivlLayer: true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
if (key == 'bsnssinfo') {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = true;
|
||||
} else {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined })
|
||||
|
|
@ -353,17 +405,17 @@ const map = {
|
|||
dispatch.runtime.setFeaturePop(null);
|
||||
|
||||
|
||||
if(id===201||id===205){
|
||||
dispatch.map.setLayerSetting({dom: false});
|
||||
if (id === 201 || id === 205) {
|
||||
dispatch.map.setLayerSetting({ dom: false });
|
||||
map.setLayoutProperty('热力图', 'visibility', 'visible');
|
||||
}else{
|
||||
} else {
|
||||
// dispatch.map.setLayerSetting({dom: true});
|
||||
map.setLayoutProperty('热力图', 'visibility', 'none');
|
||||
}
|
||||
|
||||
if (id != 504) {
|
||||
dispatch.runtime.setYyfa({})
|
||||
}
|
||||
dispatch.runtime.setYyfa({})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,24 +131,44 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
leftFullHeight = true;
|
||||
}else if (view === 501) {
|
||||
left = [
|
||||
{ key: '雨量监测',style: { height: '33%', flexGrow: 1 } },
|
||||
{ key: '水情监测', style: { height: '33%', flexGrow: 1 } },
|
||||
{ key: '工情监控', style: { height: '34%', flexGrow: 1 } },
|
||||
{ key: '天气'},
|
||||
{ key: '雨量监测',style: { height: '32%', flexGrow: 1 } },
|
||||
{ key: '水情监测', style: { height: '32%', flexGrow: 1 } },
|
||||
{ key: '工情监控', style: { height: '32%', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
}else if (view === 503) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '警情', style: { height: '60%', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
|
||||
} else if (view === 504) {
|
||||
left = [
|
||||
{ key: '降雨预报', style: { height: '40%', flexGrow: 1 } },
|
||||
{ key: '预警信息管理', style: { height: '40%', flexGrow: 1 } },
|
||||
{ key: '天气'},
|
||||
{ key: '降雨预报', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '预警信息管理', style: { height: '50%', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
}else if (view === 505) {
|
||||
left = [
|
||||
{ key: '灌区统计', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '天气'},
|
||||
{ key: '灌区统计', style: { height: '25%', flexGrow: 1 } },
|
||||
{ key: '月用水趋势', style: { height: '35%', flexGrow: 1 } },
|
||||
{ key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
|
||||
]
|
||||
leftFullHeight = true;
|
||||
}else if (view === 506) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '水政统计', style: { height: '40%', flexGrow: 1 } },
|
||||
]
|
||||
|
||||
}else if (view === 507) {
|
||||
left = [
|
||||
{ key: '天气'},
|
||||
]
|
||||
}
|
||||
|
||||
if (rightEx) {
|
||||
|
|
@ -295,16 +315,15 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
rightFullHeight = true;
|
||||
}else if (view === 503) {
|
||||
right = [
|
||||
{ key: '水资源调度', style: { height: '100%', flexGrow: 1 } },
|
||||
// { key: '月用水趋势', style: { height: '35%', flexGrow: 1 } },
|
||||
{ key: '水资源调度', style: { height: '40%', flexGrow: 1 } },
|
||||
{ key: '供需水', style: { height: '55%', flexGrow: 1 } },
|
||||
// { key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
|
||||
]
|
||||
rightFullHeight = true;
|
||||
}else if (view === 506) {
|
||||
right = [
|
||||
{ key: '水政统计', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '本月水政巡查问题统计', style: { height: '35%', flexGrow: 1 } },
|
||||
{ key: '区域统计', style: { height: '35%', flexGrow: 1 } },
|
||||
{ key: '本月水政巡查问题统计', style: { height: '35%', flexGrow: 1 } },
|
||||
]
|
||||
rightFullHeight = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,223 @@
|
|||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { makeStyles, Typography } from '@material-ui/core';
|
||||
import moment from 'moment';
|
||||
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
|
||||
import { normalizeSearchTmRange } from '../../../../utils/tools';
|
||||
import { rzSearch } from '../../../../models/_/search';
|
||||
|
||||
|
||||
const useStyles = makeStyles({
|
||||
grid: {
|
||||
color: '#fff',
|
||||
padding: '1rem',
|
||||
},
|
||||
|
||||
realdrpgrid: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
margin: '0.5rem 0'
|
||||
}
|
||||
})
|
||||
|
||||
function HDChart({ record }) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const tm = [moment().add(-24, 'hour'), moment()];
|
||||
const resultTm = normalizeSearchTmRange(tm, 'h');
|
||||
|
||||
useEffect(() => {
|
||||
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
|
||||
setData(data || []);
|
||||
});
|
||||
}, [])
|
||||
|
||||
const option = useMemo(() => {
|
||||
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
|
||||
|
||||
let sorted = data.map(o => o.z);
|
||||
|
||||
const markLine = [];
|
||||
const { sfz, wrz, grz } = record;
|
||||
|
||||
if (sfz) {
|
||||
sorted.push(sfz);
|
||||
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
|
||||
}
|
||||
if (wrz) {
|
||||
sorted.push(wrz);
|
||||
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
|
||||
}
|
||||
if (grz) {
|
||||
sorted.push(grz);
|
||||
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
|
||||
}
|
||||
|
||||
|
||||
sorted = sorted.sort();
|
||||
let minVal = sorted[0] || 0;
|
||||
let maxVal = sorted[sorted.length - 1] || 0;
|
||||
let dz = 0.5;
|
||||
maxVal = Math.ceil(maxVal / dz) * dz;
|
||||
minVal = Math.floor(minVal / dz) * dz;
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: markLine.length > 0 ? 64 : 24,
|
||||
y: 24,
|
||||
x2: 38,
|
||||
y2: 42,
|
||||
borderWidth: 0
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'time',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bbb',
|
||||
fontSize: 9,
|
||||
textShadowBlur: 4,
|
||||
textShadowColor: '#6ab',
|
||||
// formatter: val => val.substr('2020-10-14 '.length, 2)
|
||||
},
|
||||
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: minVal,
|
||||
max: maxVal
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: serialData,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(3, 194, 236, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(3, 194, 236, 0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#03C2EC'
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
||||
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
position: 'start',
|
||||
formatter: (p) => p?.name + ' ' + p?.value,
|
||||
},
|
||||
data: markLine
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
const rtm = record.rzTm || record.tm;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '15rem', width: '30rem' }}
|
||||
/>
|
||||
{/* <div className={classes.grid}>
|
||||
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
|
||||
<div className={classes.realdrpgrid}>
|
||||
<div className="item">
|
||||
<Typography variant="caption">水位</Typography>
|
||||
<Typography variant="h5">{renderHDRz(record)}</Typography>
|
||||
</div>
|
||||
<div className="item">
|
||||
<Typography variant="caption">设防水位</Typography>
|
||||
<Typography variant="h5">{record.sfz || '--'}</Typography>
|
||||
</div>
|
||||
<div className="item">
|
||||
<Typography variant="caption">警戒水位</Typography>
|
||||
<Typography variant="h5">{record.wrz || '--'}</Typography>
|
||||
</div>
|
||||
<div className="item">
|
||||
<Typography variant="caption">保证水位</Typography>
|
||||
<Typography variant="h5">{record.grz || '--'}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDChart);
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react'
|
||||
import { makeStyles } from '@material-ui/core';
|
||||
import HDChart from './HDChart';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
grid: {
|
||||
color: '#fff',
|
||||
padding: '1rem',
|
||||
},
|
||||
|
||||
realdrpgrid: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
margin: '0.5rem 0'
|
||||
}
|
||||
})
|
||||
|
||||
function RealHDTip({ record, dispatch }) {
|
||||
|
||||
const viewInfo = () => {
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'RealHDLayer', properties: record })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="boxhead"></div>
|
||||
<div className="featuretip-title">
|
||||
<div className="name">{record.stnm}</div>
|
||||
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
|
||||
</div>
|
||||
<HDChart record={record} />
|
||||
|
||||
<div className="boxfoot"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(RealHDTip);
|
||||
|
|
@ -27,6 +27,7 @@ import SqPop from './SqPop';
|
|||
import LlqdPop from './LlqdPop';
|
||||
import LlsbPop from './LlsbPop';
|
||||
import ScjcPop from './ScJcPop';
|
||||
import RealQDPop from './RealQDPop'
|
||||
export const InfoPopNames = {
|
||||
RealSkPop: 'RealSkPop',
|
||||
RealHDPop: 'RealHDPop',
|
||||
|
|
@ -40,7 +41,10 @@ export const InfoPops = ({ type, properties, dispatch }) => {
|
|||
return <RealDrpPop record={properties} dispatch={dispatch} />
|
||||
} else if (type === InfoPopNames.RealHDPop) {
|
||||
return <RealHDPop record={properties} dispatch={dispatch} />
|
||||
} else if (type === InfoPopNames.RealSkPop) {
|
||||
}else if (type === 'qdpop') {
|
||||
return <RealQDPop record={properties} dispatch={dispatch} />
|
||||
}
|
||||
else if (type === InfoPopNames.RealSkPop) {
|
||||
return <RealSkPop record={properties} dispatch={dispatch} />
|
||||
} else if (type === InfoPopNames.PicStPop) {
|
||||
return <PicStPop record={properties} dispatch={dispatch} />
|
||||
|
|
|
|||
|
|
@ -5614,7 +5614,7 @@ export default class BzLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: 'bz',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -76,6 +76,39 @@ const page1 = [
|
|||
"lgtd": 111.826413,
|
||||
"irrCode_dictText": "水库枢纽",
|
||||
"bsnm": "漳河流域"
|
||||
},
|
||||
{
|
||||
"addvcd": "420800000000000",
|
||||
"moditime": "2022-10-01 21:00:00",
|
||||
"comments": "水资源多孔闸门控制系统",
|
||||
"src": "zhzj",
|
||||
"esstym": "",
|
||||
"mvalue": {
|
||||
"formatTm": null,
|
||||
"formatHq": "0.000",
|
||||
"vol": 0,
|
||||
"formatAccq": null,
|
||||
"stcd": "4211221029",
|
||||
"rz": 1.123,
|
||||
"tm": "2025-05-26 16:00",
|
||||
"hq": 0,
|
||||
"fr": null,
|
||||
"chan": "1",
|
||||
"accq": 120057496
|
||||
},
|
||||
"lttd": 31.145846,
|
||||
"sttp": "QQ",
|
||||
"irrCode": "D00001300",
|
||||
"sort": 6001,
|
||||
"hasImg": false,
|
||||
"stlc": "荆门市",
|
||||
"dtmel": 0,
|
||||
"stcd": "4211221029",
|
||||
"stnm": "邓家河干渠",
|
||||
"addvcd_dictText": "荆门市",
|
||||
"lgtd": 114.753859,
|
||||
"irrCode_dictText": "水库枢纽",
|
||||
"bsnm": "漳河流域"
|
||||
},
|
||||
{
|
||||
"addvcd": "420800000000000",
|
||||
|
|
@ -1346,7 +1379,7 @@ export default class QdLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: '渠道流量站',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -774,7 +774,7 @@ export default class SbLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: '流量水表站',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -4920,7 +4920,7 @@ export default class ShuiZhaLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: 'sz',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -544,7 +544,7 @@ export default class ShuizhiLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: '水质站',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ export default class TrsqLayer extends BaseLayer {
|
|||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
type: '墒情站',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
|
|
|
|||
|
|
@ -82,6 +82,8 @@ import Afjk from './panels/Afjk'
|
|||
import Dhfx from './panels/Dhfx'
|
||||
import Yhfx from './panels/Yhfx'
|
||||
import Bjtj from './panels/Bjtj'
|
||||
import Szzddgxs from './panels/Szzddgxs'
|
||||
import Szzddjq from './panels/Szzddjq'
|
||||
|
||||
export default function PanelIndex({ name, style, ...params }) {
|
||||
if (name === '天气') {
|
||||
|
|
@ -196,6 +198,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Gqdb style={style} />
|
||||
} else if (name == '水资源调度') {
|
||||
return <Szzdd style={style} />
|
||||
} else if (name == '供需水') {
|
||||
return <Szzddgxs style={style} />
|
||||
}else if (name == '预演方案') {
|
||||
return <Yyfa style={style} />
|
||||
}else if (name == '预演结果') {
|
||||
|
|
@ -250,6 +254,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Yhfx style={style} />
|
||||
} else if (name === '报警统计') {
|
||||
return <Bjtj style={style} />
|
||||
} else if (name === '警情') {
|
||||
return <Szzddjq style={style} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function Demo1() {
|
|||
yyRes.yy &&
|
||||
<>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:100,left:'28%' }} />
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:150,left:'32%',width:700 }} />
|
||||
</>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,67 +60,6 @@
|
|||
"insPow": null,
|
||||
"collDate": "2022-09-15"
|
||||
},
|
||||
{
|
||||
"mvalue": null,
|
||||
"wainWasoType": null,
|
||||
"updserRsn": "换启闭机",
|
||||
"gtctrTp": null,
|
||||
"updDate": "2023-08-31",
|
||||
"chanCode": "420802001350",
|
||||
"engStat": null,
|
||||
"desTotInsCap": null,
|
||||
"gateSize": "3*2.8",
|
||||
"wagaCode": "HP0074208020000185",
|
||||
"adCode": "420802102000000",
|
||||
"adCode_dictText": "漳河镇",
|
||||
"lgtd": 112.078158 +2.9619,
|
||||
"updserInvst": null,
|
||||
"engGrad": null,
|
||||
"runStat": "1",
|
||||
"irrCode_dictText": "总干渠",
|
||||
"flow": null,
|
||||
"bnch": "0+920",
|
||||
"startLat": null,
|
||||
"engScal": null,
|
||||
"chanCode_dictText": "总干渠",
|
||||
"lockDisc": null,
|
||||
"wagaUse": null,
|
||||
"engManCode_dictText": "烟墩管理段",
|
||||
"irrCode": "D00000290",
|
||||
"sort": 1002,
|
||||
"stcd": "0000000004",
|
||||
"dsfl": 50,
|
||||
"admDep": null,
|
||||
"startDate": null,
|
||||
"note": null,
|
||||
"inEle": 108,
|
||||
"pwrTp": "2",
|
||||
"updserDate": "2014-01-01",
|
||||
"engManCode": "ENG100035",
|
||||
"chidCount": 1,
|
||||
"whthInWat_dictText": "是",
|
||||
"lttd": 30.953845 -0.2002,
|
||||
"whthInWat": "1",
|
||||
"hasImg": true,
|
||||
"stfl": 32,
|
||||
"endLat": null,
|
||||
"wagaType": "1",
|
||||
"endLong": null,
|
||||
"gtctrTlmtCd": null,
|
||||
"outEle": 108,
|
||||
"pwrTp_dictText": "电动",
|
||||
"wagaName": "二干渠进水闸",
|
||||
"wagaType_dictText": "分水闸",
|
||||
"hdgrTp": "2",
|
||||
"compDate": "1966-01-01",
|
||||
"startLong": null,
|
||||
"gaorNum": 1,
|
||||
"runStat_dictText": "在用良好",
|
||||
"gateTp": "平板",
|
||||
"hdgrTp_dictText": "螺杆式",
|
||||
"insPow": null,
|
||||
"collDate": "2022-09-15"
|
||||
},
|
||||
{
|
||||
"mvalue": null,
|
||||
"wainWasoType": null,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import config from '../../../../config';
|
|||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
function rzRender(rz, base) {
|
||||
|
|
@ -37,6 +38,7 @@ function HDReal({ style }) {
|
|||
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
||||
// let { data } = useRequest(HDRealPromise.get, t);
|
||||
const [setting, showSetting] = useState(false);
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
|
||||
// const showData = useMemo(() => {
|
||||
// if (!data) {
|
||||
|
|
@ -137,43 +139,82 @@ function HDReal({ style }) {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<div style={{display:'flex',columnGap:10}}>
|
||||
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<div style={{marginBottom:10}}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label"></InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label=""
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="ft">福田镇</MenuItem>
|
||||
<MenuItem value="lc">龙池桥镇</MenuItem>
|
||||
<MenuItem value="mz">木子店镇</MenuItem>
|
||||
<MenuItem value="sb">宋埠镇</MenuItem>
|
||||
<MenuItem value="htg">黄土岗镇</MenuItem>
|
||||
<MenuItem value="tmg">铁门岗镇</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow >
|
||||
<DpTableCell style={{ width: '50%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '50%' }} align="center">电耗(kWh)</DpTableCell>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">水厂</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">电耗(kWh)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>上月对比(kWh)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
{data.map((row,i) => (
|
||||
<DpTableRow key={row.id}>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.date}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">水厂{i+1}</DpTableCell>
|
||||
<DpTableCell align="center">{row.power}</DpTableCell>
|
||||
<DpTableCell align="center">0</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
</DpTableRow>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useState,useEffect } from 'react';
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
|
|
@ -19,6 +19,8 @@ import { InfoPopNames } from '../../InfoPops';
|
|||
import config from '../../../../config';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
|
||||
import './index.less'
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
|
|
@ -55,12 +57,12 @@ function HDReal({ style }) {
|
|||
// return ret;
|
||||
// }, [data, tableRzFilter]);
|
||||
|
||||
const showData = Array(1).fill(0).map((o,i) => ({
|
||||
const showData = Array(1).fill(0).map((o, i) => ({
|
||||
date: '2025-05-26',
|
||||
event: '侵占河道',
|
||||
type: '侵占河道',
|
||||
status: '待处理',
|
||||
place:'浮桥河灌区'
|
||||
place: '浮桥河灌区'
|
||||
}))
|
||||
|
||||
const flyTo = (record) => {
|
||||
|
|
@ -78,11 +80,11 @@ function HDReal({ style }) {
|
|||
|
||||
const data = [
|
||||
{ key: '0', date: '合计', supply: '15402.15', lastMonth: '14725.78' },
|
||||
{ key: '1', date: '2025-05-01', supply: '643.91', lastMonth: '446.78' },
|
||||
{ key: '2', date: '2025-05-02', supply: '654.94', lastMonth: '527.03' },
|
||||
{ key: '3', date: '2025-05-03', supply: '674.31', lastMonth: '528.33' },
|
||||
{ key: '4', date: '2025-05-04', supply: '619.43', lastMonth: '448.18' },
|
||||
{ key: '5', date: '2025-05-05', supply: '537.5', lastMonth: '483.9' }
|
||||
{ key: '1', date: '2025-05-01', supply: '643.91', lastMonth: '446.78', waterp: '水厂1' },
|
||||
{ key: '2', date: '2025-05-02', supply: '654.94', lastMonth: '527.03', waterp: '水厂2' },
|
||||
{ key: '3', date: '2025-05-03', supply: '674.31', lastMonth: '528.33', waterp: '水厂3' },
|
||||
{ key: '4', date: '2025-05-04', supply: '619.43', lastMonth: '448.18', waterp: '水厂4' },
|
||||
{ key: '5', date: '2025-05-05', supply: '537.5', lastMonth: '483.9', waterp: '水厂5' }
|
||||
];
|
||||
const toggleStType = (type) => {
|
||||
const visible = !tableRzFilter[type];
|
||||
|
|
@ -92,29 +94,30 @@ function HDReal({ style }) {
|
|||
const toggleAutoRefresh = () => {
|
||||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||
}
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
|
||||
const searchTm = (e) => {
|
||||
setParams({
|
||||
...params,
|
||||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||
tm:e,
|
||||
})
|
||||
};
|
||||
useEffect(() => {
|
||||
let options = "";
|
||||
options = {
|
||||
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||
tm: [
|
||||
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
],
|
||||
}
|
||||
|
||||
setParams(options)
|
||||
|
||||
}, [])
|
||||
const searchTm = (e) => {
|
||||
setParams({
|
||||
...params,
|
||||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||
tm: e,
|
||||
})
|
||||
};
|
||||
useEffect(() => {
|
||||
let options = "";
|
||||
options = {
|
||||
etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||
tm: [
|
||||
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
],
|
||||
}
|
||||
|
||||
setParams(options)
|
||||
|
||||
}, [])
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
|
|
@ -133,33 +136,69 @@ function HDReal({ style }) {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||
<div style={{display:'flex',columnGap:10}}>
|
||||
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<div style={{marginBottom:10}}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label"></InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label=""
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="ft">福田镇</MenuItem>
|
||||
<MenuItem value="lc">龙池桥镇</MenuItem>
|
||||
<MenuItem value="mz">木子店镇</MenuItem>
|
||||
<MenuItem value="sb">宋埠镇</MenuItem>
|
||||
<MenuItem value="htg">黄土岗镇</MenuItem>
|
||||
<MenuItem value="tmg">铁门岗镇</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<TableContainer style={{ height: '80%', marginTop: '10px' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow >
|
||||
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '30%' }} align="center">供水量(m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">水厂</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">供水量(m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>上月对比(m³)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -170,6 +209,7 @@ function HDReal({ style }) {
|
|||
className="table-ellipsis cursor-pointer"
|
||||
>{row.date}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.waterp}</DpTableCell>
|
||||
<DpTableCell align="center">{row.supply}</DpTableCell>
|
||||
<DpTableCell align="center">{row.lastMonth}</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function HDReal({ style }) {
|
|||
const showData = [
|
||||
{
|
||||
stnm: '监测点1',
|
||||
press: '0.52',
|
||||
press: '0.91',
|
||||
flow: 200,
|
||||
hg: 90,
|
||||
"lttd": 30.8456 +0.2002,
|
||||
|
|
@ -76,7 +76,7 @@ function HDReal({ style }) {
|
|||
stnm: '监测点3',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg: 90,
|
||||
hg: 20,
|
||||
"lttd": 30.8866 +0.2002,
|
||||
"lgtd": 112.2006 +2.9619,
|
||||
|
||||
|
|
@ -146,10 +146,10 @@ function HDReal({ style }) {
|
|||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.press}</div>
|
||||
style={{color:row.press > 0.8 ? 'orange':''}}>{row.press}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.flow}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hg}</DpTableCell>
|
||||
<DpTableCell align="center"><div style={{color:row.hg <80? 'orange':''}}>{row.hg}</div></DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
</DpTableRow>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ import { InfoPopNames } from '../../InfoPops';
|
|||
import config from '../../../../config';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
|
||||
import './index.less'
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
|
|
@ -31,6 +33,8 @@ function rzRender(rz, base) {
|
|||
}
|
||||
|
||||
function HDReal({ style }) {
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
||||
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
||||
|
|
@ -77,16 +81,12 @@ function HDReal({ style }) {
|
|||
|
||||
|
||||
const data = [
|
||||
{ key: '0', date: '合计', intake: '20959.07', lastMonth: '22558.47' },
|
||||
{ key: '1', date: '2025-05-01', intake: '754.77', lastMonth: '704.77' },
|
||||
{ key: '2', date: '2025-05-02', intake: '940.93', lastMonth: '713.9' },
|
||||
{ key: '3', date: '2025-05-03', intake: '891.67', lastMonth: '526.83' },
|
||||
{ key: '4', date: '2025-05-04', intake: '888.15', lastMonth: '577.1' },
|
||||
{ key: '5', date: '2025-05-05', intake: '813.27', lastMonth: '780.13' },
|
||||
{ key: '6', date: '2025-05-06', intake: '875.79', lastMonth: '850.83' },
|
||||
{ key: '7', date: '2025-05-07', intake: '743.86', lastMonth: '862.48' },
|
||||
{ key: '8', date: '2025-05-08', intake: '728.14', lastMonth: '853.63' },
|
||||
{ key: '9', date: '2025-05-09', intake: '738.43', lastMonth: '890.43' }
|
||||
{ key: '0', date: '合计', intake: '20959.07', lastMonth: '22558.47',waterp: '' },
|
||||
{ key: '1', date: '2025-05-01', intake: '754.77', lastMonth: '704.77',waterp: '水厂1' },
|
||||
{ key: '2', date: '2025-05-02', intake: '940.93', lastMonth: '713.9',waterp: '水厂2' },
|
||||
{ key: '3', date: '2025-05-03', intake: '891.67', lastMonth: '526.83',waterp: '水厂3' },
|
||||
{ key: '4', date: '2025-05-04', intake: '888.15', lastMonth: '577.1',waterp: '水厂4' },
|
||||
{ key: '5', date: '2025-05-05', intake: '813.27', lastMonth: '780.13',waterp: '水厂5' },
|
||||
];
|
||||
const toggleStType = (type) => {
|
||||
const visible = !tableRzFilter[type];
|
||||
|
|
@ -137,33 +137,69 @@ function HDReal({ style }) {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<div style={{display:'flex',columnGap:10}}>
|
||||
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
|
||||
<RangePicker
|
||||
// width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
onChange={searchTm}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={params.tm}
|
||||
getPopupContainer={trigger => trigger.parentElement}
|
||||
/>
|
||||
</div>
|
||||
<div style={{marginBottom:10}}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label"></InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label=""
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="ft">福田镇</MenuItem>
|
||||
<MenuItem value="lc">龙池桥镇</MenuItem>
|
||||
<MenuItem value="mz">木子店镇</MenuItem>
|
||||
<MenuItem value="sb">宋埠镇</MenuItem>
|
||||
<MenuItem value="htg">黄土岗镇</MenuItem>
|
||||
<MenuItem value="tmg">铁门岗镇</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow >
|
||||
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '30%' }} align="center">取水量(m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">日期</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">水厂</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">取水量(m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>上月对比(m³)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -174,6 +210,7 @@ function HDReal({ style }) {
|
|||
className="table-ellipsis cursor-pointer"
|
||||
>{row.date}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.waterp}</DpTableCell>
|
||||
<DpTableCell align="center">{row.intake}</DpTableCell>
|
||||
<DpTableCell align="center">{row.lastMonth}</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export default function OverallContent({ data }) {
|
|||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
|
||||
</div>
|
||||
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>公里</span></div>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>千米</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
|
||||
</div>
|
||||
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
|
|
|
|||
|
|
@ -48,12 +48,71 @@ function HDReal({ style }) {
|
|||
});
|
||||
return ret;
|
||||
}, [data, tableRzFilter]);
|
||||
console.log("showData",showData);
|
||||
console.log("showData", showData);
|
||||
|
||||
const flyTo = (record) => {
|
||||
const skData = [
|
||||
{
|
||||
"stcd": "61613010",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "明山水库",
|
||||
"adcd": "421181103000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.066667,
|
||||
"lttd": 31.016667,
|
||||
"elev": 0,
|
||||
"damel": 98.7,
|
||||
"dsflz": 96.07,
|
||||
"fsltdz": 93,
|
||||
"ddz": 78.02,
|
||||
"zcxsw": 93,
|
||||
"drpTm": "2025-05-28T03:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 1,
|
||||
"rz": 83.23,
|
||||
"w": 42.8,
|
||||
"a_fsltdz": -9.769999999999996,
|
||||
"rzTm": "2025-05-28T03:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1
|
||||
}
|
||||
]
|
||||
const qdData = [
|
||||
{
|
||||
"stcd": "61613010",
|
||||
"stnm": "邓家河干渠",
|
||||
"adcd": "421181103000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.753859,
|
||||
"lttd": 31.145846,
|
||||
"elev": 0,
|
||||
"hasRz": true,
|
||||
"type": "sk",
|
||||
"tm": "2025-05-28T02:00:00.000Z",
|
||||
"today": 0.52,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"state": 1,
|
||||
"warning": 0
|
||||
},
|
||||
]
|
||||
|
||||
const flyTo = (record,types) => {
|
||||
const { lgtd, lttd } = record;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setFeaturePop({ type: types =='hd'?InfoPopNames.RealHDPop:types =='sk'?InfoPopNames.RealSkPop:'qdpop', properties: record, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
zoom: config.poiPositionZoom.hd,
|
||||
|
|
@ -80,6 +139,7 @@ function HDReal({ style }) {
|
|||
tabs={
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: type == 'hd' })} onClick={() => toggleStType('hd')}>河道</span>
|
||||
<span className={clsx({ active: type == 'sk'})} onClick={() => toggleStType('sk')}>水库</span>
|
||||
<span className={clsx({ active: type == 'qd'})} onClick={() => toggleStType('qd')}>渠道</span>
|
||||
</span>
|
||||
}
|
||||
|
|
@ -107,25 +167,40 @@ function HDReal({ style }) {
|
|||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
|
||||
<DpTableCell align="right">{renderHDRz(row,'hd')}</DpTableCell>
|
||||
{rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)}
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer> :<TableContainer style={{ height: '100%' }}>
|
||||
</TableContainer> :
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ maxWidth: '30%' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell align="right">水位</DpTableCell>
|
||||
<DpTableCell align="right">保证水位</DpTableCell>
|
||||
<DpTableCell align="right">警戒水位</DpTableCell>
|
||||
<DpTableCell style={{ maxWidth: '30%' }} align="center">名称</DpTableCell>
|
||||
<DpTableCell align="center">水位</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
||||
{type == 'sk'?skData.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row" align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row,'sk')}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.rz}</DpTableCell>
|
||||
</DpTableRow>
|
||||
)) :
|
||||
qdData.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row" align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row,'qd')}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.elev}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
|
|
|||
|
|
@ -126,10 +126,10 @@ export default function OverallContent({ data }) {
|
|||
<div className="value" style={{ color: '#5ecd45' }}>5</div>
|
||||
</div>
|
||||
<div style={{ padding: 15, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>涉水事件累计</div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计事件数量</div>
|
||||
<div
|
||||
className="value"
|
||||
style={{ cursor: 'pointer', color: '#ba292a' }}
|
||||
style={{ cursor: 'pointer', color: '#5ecd45' }}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
|
|
@ -141,7 +141,7 @@ export default function OverallContent({ data }) {
|
|||
</div>
|
||||
<div style={{ padding: 20, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>处理中事件</div>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>24</div>
|
||||
<div className="value" style={{ color: '#ba292a' }}>24</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,43 @@ import { OverallPromise } from '../../../../models/_/real';
|
|||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import OverallContent from './OverallContent';
|
||||
|
||||
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';
|
||||
export default function Overall({ style }) {
|
||||
|
||||
const { data } = useRequest(OverallPromise.get);
|
||||
|
||||
const showData = [
|
||||
{
|
||||
unit: '麻城市水利和湖泊局',
|
||||
inspectionCount: 50,
|
||||
eventCount: 2,
|
||||
processingCount: 1
|
||||
},
|
||||
{
|
||||
unit: '麻城市水利事业发展中心',
|
||||
inspectionCount: 0,
|
||||
eventCount: 0,
|
||||
processingCount: 0
|
||||
},
|
||||
{
|
||||
unit: '麻城市河道堤防管理事务中心',
|
||||
inspectionCount: 0,
|
||||
eventCount: 0,
|
||||
processingCount: 0
|
||||
},
|
||||
{
|
||||
unit: '麻城市明山水库管理处',
|
||||
inspectionCount: 0,
|
||||
eventCount: 0,
|
||||
processingCount: 0
|
||||
}
|
||||
|
||||
]
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
|
|
@ -15,6 +47,34 @@ export default function Overall({ style }) {
|
|||
color="green"
|
||||
>
|
||||
<OverallContent data={data} />
|
||||
<TableContainer style={{ height: '30%',marginTop:'10px' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow >
|
||||
<DpTableCell style={{ width: '25%' }} align="center">管理单位</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">累计巡查次数</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>事件数</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>处理中事件数</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{showData.map((row) => (
|
||||
<DpTableRow key={row.id}>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.unit}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.inspectionCount}</DpTableCell>
|
||||
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.eventCount}</div></DpTableCell>
|
||||
<DpTableCell align="center">{row.processingCount}</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ function HDReal({ style }) {
|
|||
// }
|
||||
extra={
|
||||
<>
|
||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||
</>
|
||||
}
|
||||
|
|
@ -166,7 +166,7 @@ function HDReal({ style }) {
|
|||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.event}</DpTableCell>
|
||||
<DpTableCell align="center">{row.type}</DpTableCell>
|
||||
<DpTableCell align="center">{row.place}</DpTableCell>
|
||||
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.place}</div></DpTableCell>
|
||||
<DpTableCell align="center">{row.status}</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ function HDReal({ style }) {
|
|||
// }
|
||||
extra={
|
||||
<>
|
||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||
</>
|
||||
}
|
||||
|
|
@ -166,7 +166,7 @@ function HDReal({ style }) {
|
|||
className="table-ellipsis cursor-pointer"
|
||||
>{row.date}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.event}</DpTableCell>
|
||||
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.event}</div></DpTableCell>
|
||||
<DpTableCell align="center">{row.type}</DpTableCell>
|
||||
<DpTableCell align="center">{row.place}</DpTableCell>
|
||||
<DpTableCell align="center">{row.status}</DpTableCell>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import React,{useState} from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import MiniSinglePie from './MiniSinglePie'
|
||||
import clsx from 'clsx';
|
||||
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core/index';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import { styled } from '@material-ui/styles';
|
||||
|
||||
|
||||
export default function GQ({ style }) {
|
||||
const v1 = 20;
|
||||
|
|
@ -13,25 +15,48 @@ export default function GQ({ style }) {
|
|||
const v4 = 800;
|
||||
const r2 = (v3 * 100 / v4).toFixed(1);
|
||||
const [selected, setSelected] = useState(1)
|
||||
const [dimension, setDimension] =useState('waterUsage');
|
||||
const CustomSwitch = styled(Switch)({
|
||||
'& .MuiSwitch-switchBase': {
|
||||
color: '#fff',
|
||||
'&.Mui-checked': {
|
||||
color: '#1890ff',
|
||||
'& + .MuiSwitch-track': {
|
||||
backgroundColor: '#1890ff',
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
});
|
||||
|
||||
const StyledFormControlLabel = styled(FormControlLabel)({
|
||||
'& .MuiFormControlLabel-label': {
|
||||
color: '#fff'
|
||||
}
|
||||
});
|
||||
const [dimension, setDimension] = useState('fqh');
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水资源调度"
|
||||
color="orange"
|
||||
tabs={
|
||||
<span className="button-group">
|
||||
<span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
|
||||
<span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
|
||||
<span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
|
||||
</span>
|
||||
}
|
||||
title="蓄水"
|
||||
color="green"
|
||||
// tabs={
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
|
||||
// <span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
|
||||
// <span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
|
||||
// </span>
|
||||
// }
|
||||
extra={
|
||||
<i className="ionicons gear"></i>
|
||||
}
|
||||
>
|
||||
<div style={{ width: '100%', height: '100%' }}>
|
||||
<div style={{
|
||||
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
|
||||
{/* <div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: '10px',
|
||||
|
|
@ -63,9 +88,52 @@ export default function GQ({ style }) {
|
|||
<MenuItem value="waterUsage">浮桥河灌区</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/${selected == 1 ? 'useW':selected == 2 ?'xs':'warning'}.png`} alt="" style={{width:421,height:'100%'}}/>
|
||||
</div>
|
||||
</div> */}
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xs.png`} alt="" style={{ width: 421, height: '100%' }} />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', color: '#fff', top: 70, left: -280, display: 'flex', alignItems: 'center' }}>
|
||||
|
||||
<StyledFormControlLabel
|
||||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
/>
|
||||
{checked && <div style={{ marginTop: "-15px" }}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label"></InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label=""
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="fqh">浮桥河灌区</MenuItem>
|
||||
<MenuItem value="shk">三河口水库灌区</MenuItem>
|
||||
<MenuItem value="qjs">群建水库灌区</MenuItem>
|
||||
<MenuItem value="dsb">大石板灌区</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>}
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
export default ({ value, name, fontSize, color, color2 }) => {
|
||||
|
||||
const option = useMemo(() => {
|
||||
|
||||
const ret = {
|
||||
series: [{
|
||||
name: name,
|
||||
type: 'pie',
|
||||
radius: ['70%', '85%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
fontSize: fontSize || 16,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
formatter: '{b}\n\n{c}%'
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value,
|
||||
name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color || '#7ca8da',
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color2 || '#495c76',
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
return ret;
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import React,{useState} from 'react'
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import MiniSinglePie from './MiniSinglePie'
|
||||
import clsx from 'clsx';
|
||||
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core/index';
|
||||
|
||||
export default function GQ({ style }) {
|
||||
const v1 = 20;
|
||||
const v2 = 32;
|
||||
const r = (v1 * 100 / v2).toFixed(1);
|
||||
|
||||
const v3 = 650;
|
||||
const v4 = 800;
|
||||
const r2 = (v3 * 100 / v4).toFixed(1);
|
||||
const [selected, setSelected] = useState(1)
|
||||
const [dimension, setDimension] =useState('waterUsage');
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="供需水"
|
||||
color="green"
|
||||
// tabs={
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
|
||||
// <span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
|
||||
// <span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
|
||||
// </span>
|
||||
// }
|
||||
extra={
|
||||
<i className="ionicons gear"></i>
|
||||
}
|
||||
>
|
||||
<div style={{ width: '100%', height: '100%' }}>
|
||||
{/* <div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: '10px',
|
||||
paddingRight: '20px'
|
||||
}}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label">灌区</InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label="灌区"
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="waterUsage">浮桥河灌区</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div> */}
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/gxs.png`} alt="" style={{width:421,height:'100%'}}/>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
export default ({ value, name, fontSize, color, color2 }) => {
|
||||
|
||||
const option = useMemo(() => {
|
||||
|
||||
const ret = {
|
||||
series: [{
|
||||
name: name,
|
||||
type: 'pie',
|
||||
radius: ['70%', '85%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
fontSize: fontSize || 16,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
formatter: '{b}\n\n{c}%'
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value,
|
||||
name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color || '#7ca8da',
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color2 || '#495c76',
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
return ret;
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import React,{useState} from 'react'
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import MiniSinglePie from './MiniSinglePie'
|
||||
import clsx from 'clsx';
|
||||
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core/index';
|
||||
|
||||
export default function GQ({ style }) {
|
||||
const v1 = 20;
|
||||
const v2 = 32;
|
||||
const r = (v1 * 100 / v2).toFixed(1);
|
||||
|
||||
const v3 = 650;
|
||||
const v4 = 800;
|
||||
const r2 = (v3 * 100 / v4).toFixed(1);
|
||||
const [selected, setSelected] = useState(1)
|
||||
const [dimension, setDimension] =useState('waterUsage');
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="警情"
|
||||
color="green"
|
||||
// tabs={
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
|
||||
// <span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
|
||||
// <span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
|
||||
// </span>
|
||||
// }
|
||||
extra={
|
||||
<i className="ionicons gear"></i>
|
||||
}
|
||||
>
|
||||
<div style={{ width: '100%', height: '100%' }}>
|
||||
{/* <div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: '10px',
|
||||
paddingRight: '20px'
|
||||
}}>
|
||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
||||
<InputLabel id="analysis-select-label">灌区</InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label="灌区"
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setDimension(value);
|
||||
}}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
'.MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#fff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value="waterUsage">浮桥河灌区</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div> */}
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/lyhq.png`} alt="" style={{width:421,height:'50%'}}/>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/dswgj.png`} alt="" style={{width:421,height:'50%'}}/>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
@ -158,8 +158,8 @@ function HDReal({ style }) {
|
|||
>{row.rz}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.maxF}</DpTableCell>
|
||||
<DpTableCell align="center">{row.cxTime}</DpTableCell>
|
||||
<DpTableCell align="center">{row.ffTime}</DpTableCell>
|
||||
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.cxTime}</div></DpTableCell>
|
||||
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.ffTime}</div></DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
@ -168,19 +168,19 @@ function HDReal({ style }) {
|
|||
</TableContainer>
|
||||
<div className='foot-content' style={{display:'flex',justifyContent:'space-around',color:"#fff",marginTop:30,marginBottom:20}}>
|
||||
<div className='fxdj' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:24}}>风险等级</div>
|
||||
<div style={{color:'#41cbf1',fontSize:20,marginTop:10}}>一般</div>
|
||||
<div style={{color:'#41cbf1',fontSize:20}}>风险等级</div>
|
||||
<div style={{color:'#41cbf1',fontSize:16,marginTop:10}}>一般</div>
|
||||
</div>
|
||||
<div className='ymyx' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:24}}>淹没影响</div>
|
||||
<div style={{color:'#41cbf1',fontSize:20}}>淹没影响</div>
|
||||
<div style={{display:'flex',justifyContent:'space-around',columnGap:10}}>
|
||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:20}}>2个</div>
|
||||
<div style={{fontSize:16}}>淹没乡镇数</div>
|
||||
<div style={{color:'#41cbf1',fontSize:16}}>2个</div>
|
||||
<div style={{fontSize:14}}>淹没乡镇数</div>
|
||||
</div>
|
||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:20}}>0.5k㎡</div>
|
||||
<div style={{fontSize:16}}>淹没总面积</div>
|
||||
<div style={{color:'#41cbf1',fontSize:16}}>500k㎡</div>
|
||||
<div style={{fontSize:14}}>淹没总面积</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -189,8 +189,10 @@ function HDReal({ style }) {
|
|||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '50%' }} align="center">乡镇名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '50%' }} align="center">影响面积/㎡</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">乡镇名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响户数</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响人口</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响面积/K㎡</DpTableCell>
|
||||
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -202,14 +204,14 @@ function HDReal({ style }) {
|
|||
className="table-ellipsis cursor-pointer"
|
||||
>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">221</DpTableCell>
|
||||
<DpTableCell align="center">640</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.area}</div>
|
||||
</DpTableCell>
|
||||
{/* <DpTableCell align="center">{row.maxF}</DpTableCell>
|
||||
<DpTableCell align="center">{row.cxTime}</DpTableCell>
|
||||
<DpTableCell align="center">{row.ffTime}</DpTableCell> */}
|
||||
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const [yyValue, setYyValue] = React.useState(false);
|
|||
title="预演方案"
|
||||
color="green"
|
||||
tabs={
|
||||
<span style={{marginLeft:'70%', cursor:'pointer',color:'#0066e4',padding:'4px 6px', border:'1px solid #175898'}} onClick={fayy}>方案预演</span>
|
||||
<span style={{marginLeft:'70%', cursor:'pointer',color:'#0066e4',padding:'4px 6px', border:'1px solid #175898'}} onClick={fayy}>加载方案</span>
|
||||
}
|
||||
>
|
||||
<div >
|
||||
|
|
@ -71,7 +71,7 @@ const [yyValue, setYyValue] = React.useState(false);
|
|||
<StyledFormControlLabel value="2025003" control={<Radio />} label="2025003预案" style={{color:"#fff"}}/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{res.yy && <div style={{ color: "#fff", position: 'absolute', top: 100, left: '-450px' }}>
|
||||
{res.yy && <div style={{ color: "#fff", position: 'absolute', top: 90, left: '-380px' }}>
|
||||
<div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
|
||||
<div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
|
||||
<div style={{display:'flex',columnGap:10}}>
|
||||
|
|
@ -80,9 +80,9 @@ const [yyValue, setYyValue] = React.useState(false);
|
|||
</div>
|
||||
<span>淹没人口:3.211(万人)</span>
|
||||
</div>
|
||||
<div>
|
||||
{/* <div>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>}
|
||||
</div>
|
||||
</PanelBox>
|
||||
|
|
|
|||
Loading…
Reference in New Issue