水厂页面

lsf-dev
秦子超 2025-05-27 16:33:56 +08:00
parent 190bef2c35
commit 3b50286b9f
34 changed files with 1220 additions and 293 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

View File

@ -92,9 +92,22 @@ export default function calcLayout(view, rightStack, hidePanels) {
} else if (view === 301) {
left = [
{ key: '天气' },
{ key: '供水态势',style: { height: '16rem', flexGrow: 1 } },
{ key: '日供水量',style: { height: '16rem', flexGrow: 1 } },
{ key: '供水覆盖率',style: { height: '16rem', flexGrow: 1 } },
{ key: '供水数据概览',style: { height: '15.5rem'} },
{ key: '水厂生产情况',style: { height: '15rem', flexGrow: 1 } },
{ key: '供水监管',style: { height: '16rem'} },
];
} else if (view === 302) {
left = [
{ key: '天气' },
{ key: '水厂水质监测',style: { height: '16rem'} },
{ key: '报警分析',style: { height: '16rem'} },
];
} else if (view === 303) {
left = [
{ key: '天气' },
{ key: '水厂监控',style: { height: '16rem'} },
{ key: '设备数量统计',style: { height: '18rem'} },
{ key: '设备故障统计',style: { height: '18rem'} },
];
} else if (view === 501) {
left = [
@ -206,9 +219,19 @@ export default function calcLayout(view, rightStack, hidePanels) {
} else if (view === 301) {
right = [
{ key: '警报' },
{ key: '对比分析', style: { height: '19rem', flexGrow: 1 } },
{ key: '供水监控', style: { flexGrow: 1 } },
rightFullHeight = true
{ key: '对比分析', style: { height: '19rem' } },
{ key: '报警统计',style: { height: '37rem',flexGrow: 1 } },
];
} else if (view === 302) {
right = [
{ key: '警报' },
];
} else if (view === 303) {
right = [
{ key: '警报' },
{ key: '安防监控', style: { height: '14rem', flexGrow: 1 } },
{ key: '电耗分析', style: { height: '19rem', flexGrow: 1 } },
{ key: '药耗分析', style: { height: '21rem', flexGrow: 1 } },
];
} else if (view === 501) {
right = [

View File

@ -31,7 +31,7 @@ function HDStDlg({ record, onClose }) {
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<iframe src={`${process.env.PUBLIC_URL}/assets/111.pdf`} width="100%" height="100%"></iframe>
<iframe src={`${process.env.PUBLIC_URL}/assets/${record.planName}.pdf`} width="100%" height="100%"></iframe>
</DialogContent>
<div className="boxfoot"></div>

View File

@ -61,6 +61,19 @@ import Rgsl from './panels/Rgsl'
import Dbfx from './panels/Dbfx'
import Gsjk from './panels/Gsjk'
import YaRes from './panels/YaRes'
import Gssjgl from './panels/Gssjgl'
import Scscqk from './panels/Scscqk'//echarts
import Gsjg from './panels/Gsjg'
import Scszjc from './panels/Scszjc'
import Bjfx from './panels/Bjfx'
import Scjk from './panels/Scjk'
import Sbsltj from './panels/Sbsltj'
import Sbgztj from './panels/Sbgztj'
import Afjk from './panels/Afjk'
import Dhfx from './panels/Dhfx'
import Yhfx from './panels/Yhfx'
import Bjtj from './panels/Bjtj'
export default function PanelIndex({ name, style, ...params }) {
if (name === '天气') {
return (
@ -186,8 +199,33 @@ export default function PanelIndex({ name, style, ...params }) {
return <Dbfx style={style} />
} else if (name === '供水监控') {
return <Gsjk style={style} />
} else if (name === '供水数据概览') {
return <Gssjgl style={style} />
} else if (name === '水厂生产情况') {
return <Scscqk style={style} />
} else if (name === '供水监管') {
return <Gsjg style={style} />
} else if (name === '水厂水质监测') {
return <Scszjc style={style} />
} else if (name === '报警分析') {
return <Bjfx style={style} />
} else if (name === '水厂监控') {
return <Scjk style={style} />
} else if (name === '设备数量统计') {
return <Sbsltj style={style} />
} else if (name === '设备故障统计') {
return <Sbgztj style={style} />
} else if (name === '安防监控') {
return <Afjk style={style} />
} else if (name === '电耗分析') {
return <Dhfx style={style} />
} else if (name === '药耗分析') {
return <Yhfx style={style} />
} else if (name === '报警统计') {
return <Bjtj style={style} />
}
return (
<PanelBox style={style} title={name} color="red">
<p>not impl</p>

View File

@ -24,10 +24,8 @@ const VIEWS = [
] },
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
// 供水态势
// 水质安全
// 水厂运行
{ id: 302, title: '水质安全', img: '/assets/menu/水情监测.png' },
{ id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
// 管网健康诊断
// 应急指挥调度
// 决策支持与报表

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="安防监控"
color="green"
>
<img src='/assets/安防监控.jpg' style={{width:'27.5rem', height:'11rem',marginLeft:'-8px'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,171 @@
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 = () => {
const x = ['清泉水厂','南湖水厂','东郊水厂','西山水厂']
const y1 = [612, 601, 630, 640]
const y2 = [624, 645, 665, 656]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 0,
bottom: 27,
},
legend: {
data: ['设计产能', '实际产水'],
top: '8',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
// rotate: 20, // 角度值Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '产水量m³',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 200,
max: 800,
}
],
series: [
{
name: '设计产能',
type: 'bar',
barWidth: 10,
data: y1,
itemStyle: {
normal: {
color: '#56b38b'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '实际产水',
type: 'bar',
barWidth: 10,
data: y2,
itemStyle: {
normal: {
color: '#3860d0'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

View File

@ -0,0 +1,19 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="报警分析"
color="green"
>
<img src='/assets/报警分析.jpg' style={{width:'26rem', height:'12rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,191 @@
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 = () => {
const x = ['宋埠镇','歧亭镇','白果镇','夫子河镇','阎家河镇']
const y1 = [212, 0, 0, 0,0]
const y2 = [212, 0, 0, 0,0]
const y3 = [0, 0, 0, 0,0]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 0,
bottom: 27,
},
legend: {
data: ['报警总数', '已解除','未解除'],
top: '8',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
// rotate: 20, // 角度值Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '产水量m³',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 0,
max: 500,
}
],
series: [
{
name: '报警总数',
type: 'bar',
barWidth: 10,
data: y1,
itemStyle: {
normal: {
color: '#3860d0'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '已解除',
type: 'bar',
barWidth: 10,
data: y2,
itemStyle: {
normal: {
color: '#56b38b'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},{
name: '未解除',
type: 'bar',
barWidth: 10,
data: y3,
itemStyle: {
normal: {
color: '#f5c75f'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '10rem', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

View File

@ -0,0 +1,349 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
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';
const data = [
{
"id": 16514,
"defineId": 99,
"tenantId": 14,
"tenantName": null,
"alarmName": "出水浊度报警",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Unremove",
"alarmTriggerTime": "2025-03-02T12:01:49Z",
"alarmReleaseTime": null,
"releaseUserid": null,
"duration": "2月24天",
"subscribeAlarm": 0,
"siteId": 8,
"siteName": "朝阳寺镇新水厂",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": null,
"handleStatus": 1,
"faultId": null,
"equipment": "",
"equipmentName": null,
"alarmValue": "1.98",
"unit": "NTU",
"mpointName": "新水厂-出厂水浊度",
"mpointId": "71",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27258,
"defineId": 111,
"tenantId": 14,
"tenantName": null,
"alarmName": "凉桥水厂-破水平进水停用报警",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T21:37:35Z",
"alarmReleaseTime": "2025-05-18T21:46:07Z",
"releaseUserid": "system",
"duration": "8分32秒",
"subscribeAlarm": 0,
"siteId": 10,
"siteName": "凉桥水厂",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": "",
"equipmentName": null,
"alarmValue": "0.00",
"unit": "m³/h",
"mpointName": "进水破水坪1#瞬时流量",
"mpointId": "304",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27257,
"defineId": 115,
"tenantId": 14,
"tenantName": null,
"alarmName": "老厂水质2小时无数据",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T19:25:00Z",
"alarmReleaseTime": "2025-05-19T05:26:00Z",
"releaseUserid": "system",
"duration": "10小时1分",
"subscribeAlarm": 0,
"siteId": 128,
"siteName": "水质指标监测",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": "",
"equipmentName": null,
"alarmValue": "",
"unit": "",
"mpointName": "老水厂-出厂水酸碱度",
"mpointId": "56",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27256,
"defineId": 116,
"tenantId": 14,
"tenantName": null,
"alarmName": "斑竹坪水质1小时无数据",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T17:37:00Z",
"alarmReleaseTime": "2025-05-19T05:26:00Z",
"releaseUserid": "system",
"duration": "11小时49分",
"subscribeAlarm": 0,
"siteId": 126,
"siteName": "水质指标监测",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": "",
"equipmentName": null,
"alarmValue": "",
"unit": "",
"mpointName": "斑竹坪-出厂水温度",
"mpointId": "28",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27254,
"defineId": 92,
"tenantId": 14,
"tenantName": null,
"alarmName": "班竹坪水厂-出水余氯超报警",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T17:24:00Z",
"alarmReleaseTime": "2025-05-18T17:27:00Z",
"releaseUserid": "system",
"duration": "3分0秒",
"subscribeAlarm": 0,
"siteId": 7,
"siteName": "斑竹坪水厂",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": ",",
"equipmentName": null,
"alarmValue": "",
"unit": "",
"mpointName": "斑竹坪-出厂水余氯,斑竹坪-出厂水余氯",
"mpointId": "26,26",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27255,
"defineId": 108,
"tenantId": 14,
"tenantName": null,
"alarmName": "出水余氯超报警",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T17:24:00Z",
"alarmReleaseTime": "2025-05-18T17:25:00Z",
"releaseUserid": "system",
"duration": "1分0秒",
"subscribeAlarm": 0,
"siteId": 9,
"siteName": "朝阳寺镇老水厂",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": ",",
"equipmentName": null,
"alarmValue": "",
"unit": "",
"mpointName": "老水厂-出厂水余氯,老水厂-出厂水余氯",
"mpointId": "57,57",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
},
{
"id": 27253,
"defineId": 115,
"tenantId": 14,
"tenantName": null,
"alarmName": "老厂水质2小时无数据",
"disarmMethod": "AutoOrManual",
"alarmLevel": "1",
"alarmStatus": "Remove",
"alarmTriggerTime": "2025-05-18T07:24:00Z",
"alarmReleaseTime": "2025-05-18T17:24:00Z",
"releaseUserid": "system",
"duration": "10小时0分",
"subscribeAlarm": 0,
"siteId": 128,
"siteName": "水质指标监测",
"siteRootName": "朝阳寺镇",
"remarks": null,
"threshold": null,
"releaseUserName": "system",
"handleStatus": 1,
"faultId": null,
"equipment": "",
"equipmentName": null,
"alarmValue": "",
"unit": "",
"mpointName": "老水厂-出厂水酸碱度",
"mpointId": "56",
"processingPlan": "",
"contactPersonId": null,
"expression": null,
"codeMap": null,
"alarmView": null,
"schemeHistoryId": null,
"err": null,
"videoId": null,
"video": null,
"orderId": null,
"orderType": null,
"alarmType": "water",
"alarmRecordOrderVo": null
}
]
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="报警统计"
color="green"
>
<AreaDrpChart data={[]} />
<TableContainer style={{ height: '22rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '5rem' }} align="left">区域位置</DpTableCell>
<DpTableCell align="center">报警名称</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">报警等级</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">报警时间</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow >
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer">宋埠镇</div>
</DpTableCell>
<DpTableCell align="center">
<div className="table-ellipsis cursor-pointer">{row.alarmName}</div></DpTableCell>
<DpTableCell align="center"><span color='#f5423f'>一级</span></DpTableCell>
<DpTableCell align="center">{row.alarmTriggerTime.slice(0,10)}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="电耗分析"
color="green"
>
<img src='/assets/电耗分析.jpg' style={{width:'26rem', height:'16rem',marginLeft:'8px'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="供水监管"
color="green"
>
<img src='/assets/供水监管.jpg' style={{width:'419.81px', height:'195px',marginLeft:'1px',marginTop:'10px'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="供水数据概览"
color="green"
>
<img src='/assets/供水数据概览.jpg' style={{width:'419.81px', height:'200px',marginLeft:'1px'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="设备故障统计"
color="green"
>
<img src='/assets/设备故障统计.jpg' style={{width:'26rem', height:'14rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="设备数量统计"
color="green"
>
<img src='/assets/设备数量统计.jpg' style={{width:'26rem', height:'14rem',marginLeft:'0.3rem',marginTop:'0.5rem'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="水厂监控"
color="green"
>
<img src='/assets/水厂监控.jpg' style={{width:'26rem', height:'12rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,171 @@
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 = () => {
const x = ['清泉水厂','南湖水厂','东郊水厂','西山水厂']
const y1 = [612, 601, 630, 640]
const y2 = [624, 645, 665, 656]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 0,
bottom: 27,
},
legend: {
data: ['设计产能', '实际产水'],
top: '8',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
// rotate: 20, // 角度值Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '产水量m³',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 200,
max: 800,
}
],
series: [
{
name: '设计产能',
type: 'bar',
barWidth: 10,
data: y1,
itemStyle: {
normal: {
color: '#56b38b'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '实际产水',
type: 'bar',
barWidth: 10,
data: y2,
itemStyle: {
normal: {
color: '#3860d0'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

View File

@ -0,0 +1,19 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="水厂生产情况"
color="green"
>
<AreaDrpChart data={[]} />
</PanelBox>
)
}
export default DrpReal;

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="水质监测"
color="green"
>
<img src='/assets/水厂水质监测.jpg' style={{width:'26rem', height:'12rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
</PanelBox>
)
}
export default DrpReal;

View File

@ -1653,288 +1653,83 @@ const data3 = [
}
]
const data4 = [
{
"id": 125973,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 16:09:53",
"del": "0",
"planId": "421181000000000",
"planName": "麻城市山洪灾害防御预案",
"levels": "2",
"year": "2025",
"adnm": "麻城市",
"adcd": "421181000000000",
"attachUpdateTime": "2025-05-15 16:09:53",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181000000000",
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
},
{
"id": 125974,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 10:01:56",
"del": "0",
"planId": "421181001000000",
"planName": "龙池桥街道山洪灾害防御预案",
"levels": "1",
"year": "2025",
"adnm": "龙池桥街道",
"adcd": "421181001000000",
"attachUpdateTime": "2025-05-15 10:01:55",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001000000",
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
},
{
"id": 125975,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:35:33",
"del": "0",
"planId": "421181001001000",
"planName": "园林社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "园林社区居民委员会",
"adcd": "421181001001000",
"attachUpdateTime": "2025-05-15 15:35:33",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001001000",
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125976,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001001000",
"planName": "园林社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "园林社区居民委员会",
"adcd": "421181001001000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001001000",
"url": "dplan/2025/421181001001000/园林社区居民委员会一页纸预案.pdf"
},
{
"id": 125977,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:35:45",
"del": "0",
"planId": "421181001002000",
"planName": "城西社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "城西社区居民委员会",
"adcd": "421181001002000",
"attachUpdateTime": "2025-05-15 15:35:45",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001002000",
"url": "dplan/2025/421181001002000/城西社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125978,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001002000",
"planName": "城西社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "城西社区居民委员会",
"adcd": "421181001002000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001002000",
"url": "dplan/2025/421181001002000/城西社区居民委员会一页纸预案.pdf"
},
{
"id": 125979,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:35:59",
"del": "0",
"planId": "421181001007000",
"planName": "黄狮岗社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "黄狮岗社区居民委员会",
"adcd": "421181001007000",
"attachUpdateTime": "2025-05-15 15:35:59",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001007000",
"url": "dplan/2025/421181001007000/黄狮岗社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125980,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001007000",
"planName": "黄狮岗社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "黄狮岗社区居民委员会",
"adcd": "421181001007000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001007000",
"url": "dplan/2025/421181001007000/黄狮岗社区居民委员会一页纸预案.pdf"
},
{
"id": 125981,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:36:08",
"del": "0",
"planId": "421181001008000",
"planName": "宋家河社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "宋家河社区居民委员会",
"adcd": "421181001008000",
"attachUpdateTime": "2025-05-15 15:36:08",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001008000",
"url": "dplan/2025/421181001008000/宋家河社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125982,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001008000",
"planName": "宋家河社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "宋家河社区居民委员会",
"adcd": "421181001008000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001008000",
"url": "dplan/2025/421181001008000/宋家河社区居民委员会一页纸预案.pdf"
},
{
"id": 125983,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:36:17",
"del": "0",
"planId": "421181001010000",
"planName": "松鹤社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "松鹤社区居民委员会",
"adcd": "421181001010000",
"attachUpdateTime": "2025-05-15 15:36:17",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001010000",
"url": "dplan/2025/421181001010000/松鹤社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125984,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001010000",
"planName": "松鹤社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "松鹤社区居民委员会",
"adcd": "421181001010000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001010000",
"url": "dplan/2025/421181001010000/松鹤社区居民委员会一页纸预案.pdf"
},
{
"id": 125985,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:36:35",
"del": "0",
"planId": "421181001011000",
"planName": "龙池桥社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "龙池桥社区居民委员会",
"adcd": "421181001011000",
"attachUpdateTime": "2025-05-15 15:36:34",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001011000",
"url": "dplan/2025/421181001011000/龙池桥社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125986,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001011000",
"planName": "龙池桥社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "龙池桥社区居民委员会",
"adcd": "421181001011000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001011000",
"url": "dplan/2025/421181001011000/龙池桥社区居民委员会一页纸预案.pdf"
},
{
"id": 125987,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:24",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:36:47",
"del": "0",
"planId": "421181001204000",
"planName": "七里桥村村民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "七里桥村村民委员会",
"adcd": "421181001204000",
"attachUpdateTime": "2025-05-15 15:36:47",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001204000",
"url": "dplan/2025/421181001204000/七里桥村村民委员会山洪灾害防御预案.pdf"
}
{
"id": 125973,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 16:09:53",
"del": "0",
"planId": "421181000000000",
"planName": "麻城市山洪灾害防御预案",
"levels": "2",
"year": "2025",
"adnm": "麻城市",
"adcd": "421181000000000",
"attachUpdateTime": "2025-05-15 16:09:53",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181000000000",
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
},
{
"id": 125974,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 10:01:56",
"del": "0",
"planId": "421181001000000",
"planName": "龙池桥街道山洪灾害防御预案",
"levels": "1",
"year": "2025",
"adnm": "龙池桥街道",
"adcd": "421181001000000",
"attachUpdateTime": "2025-05-15 10:01:55",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001000000",
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
},
{
"id": 125975,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 15:35:33",
"del": "0",
"planId": "421181001001000",
"planName": "园林社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "园林社区居民委员会",
"adcd": "421181001001000",
"attachUpdateTime": "2025-05-15 15:35:33",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001001000",
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125976,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateTime": "2025-05-14 09:53:14",
"del": "0",
"planId": "421181001001000",
"planName": "园林社区居民委员会一页纸预案",
"levels": "6",
"year": "2025",
"adnm": "园林社区居民委员会",
"adcd": "421181001001000",
"status": 0,
"uploadAttachStatus": "0",
"padNm": "421181001001000",
"url": "dplan/2025/421181001001000/园林社区居民委员会一页纸预案.pdf"
},
]
function DrpReal({ style }) {

View File

@ -0,0 +1,17 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="药耗分析"
color="green"
>
<img src='/assets/药耗分析.jpg' style={{width:'26rem', height:'17.5rem',marginLeft:'8px'}}/>
</PanelBox>
)
}
export default DrpReal;