水厂页面
parent
190bef2c35
commit
3b50286b9f
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
Binary file not shown.
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.
Binary file not shown.
|
|
@ -92,9 +92,22 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 301) {
|
} else if (view === 301) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '天气' },
|
{ key: '天气' },
|
||||||
{ key: '供水态势',style: { height: '16rem', flexGrow: 1 } },
|
{ key: '供水数据概览',style: { height: '15.5rem'} },
|
||||||
{ key: '日供水量',style: { height: '16rem', flexGrow: 1 } },
|
{ key: '水厂生产情况',style: { height: '15rem', flexGrow: 1 } },
|
||||||
{ key: '供水覆盖率',style: { height: '16rem', 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) {
|
} else if (view === 501) {
|
||||||
left = [
|
left = [
|
||||||
|
|
@ -206,9 +219,19 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 301) {
|
} else if (view === 301) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '警报' },
|
{ key: '警报' },
|
||||||
{ key: '对比分析', style: { height: '19rem', flexGrow: 1 } },
|
{ key: '对比分析', style: { height: '19rem' } },
|
||||||
{ key: '供水监控', style: { flexGrow: 1 } },
|
{ key: '报警统计',style: { height: '37rem',flexGrow: 1 } },
|
||||||
rightFullHeight = true
|
];
|
||||||
|
} 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) {
|
} else if (view === 501) {
|
||||||
right = [
|
right = [
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ function HDStDlg({ record, onClose }) {
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</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>
|
</DialogContent>
|
||||||
<div className="boxfoot"></div>
|
<div className="boxfoot"></div>
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,19 @@ import Rgsl from './panels/Rgsl'
|
||||||
import Dbfx from './panels/Dbfx'
|
import Dbfx from './panels/Dbfx'
|
||||||
import Gsjk from './panels/Gsjk'
|
import Gsjk from './panels/Gsjk'
|
||||||
import YaRes from './panels/YaRes'
|
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 }) {
|
export default function PanelIndex({ name, style, ...params }) {
|
||||||
if (name === '天气') {
|
if (name === '天气') {
|
||||||
return (
|
return (
|
||||||
|
|
@ -186,8 +199,33 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Dbfx style={style} />
|
return <Dbfx style={style} />
|
||||||
} else if (name === '供水监控') {
|
} else if (name === '供水监控') {
|
||||||
return <Gsjk style={style} />
|
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 (
|
return (
|
||||||
<PanelBox style={style} title={name} color="red">
|
<PanelBox style={style} title={name} color="red">
|
||||||
<p>not impl</p>
|
<p>not impl</p>
|
||||||
|
|
|
||||||
|
|
@ -24,10 +24,8 @@ const VIEWS = [
|
||||||
] },
|
] },
|
||||||
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
|
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
|
||||||
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
||||||
|
{ id: 302, title: '水质安全', img: '/assets/menu/水情监测.png' },
|
||||||
// 供水态势
|
{ id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
|
||||||
// 水质安全
|
|
||||||
// 水厂运行
|
|
||||||
// 管网健康诊断
|
// 管网健康诊断
|
||||||
// 应急指挥调度
|
// 应急指挥调度
|
||||||
// 决策支持与报表
|
// 决策支持与报表
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -1653,288 +1653,83 @@ const data3 = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
const data4 = [
|
const data4 = [
|
||||||
{
|
{
|
||||||
"id": 125973,
|
"id": 125973,
|
||||||
"reviewStatus": "2",
|
"reviewStatus": "2",
|
||||||
"createTime": "2025-05-03 21:25:23",
|
"createTime": "2025-05-03 21:25:23",
|
||||||
"updateId": "187",
|
"updateId": "187",
|
||||||
"updateName": "麻城市",
|
"updateName": "麻城市",
|
||||||
"updateTime": "2025-05-15 16:09:53",
|
"updateTime": "2025-05-15 16:09:53",
|
||||||
"del": "0",
|
"del": "0",
|
||||||
"planId": "421181000000000",
|
"planId": "421181000000000",
|
||||||
"planName": "麻城市山洪灾害防御预案",
|
"planName": "麻城市山洪灾害防御预案",
|
||||||
"levels": "2",
|
"levels": "2",
|
||||||
"year": "2025",
|
"year": "2025",
|
||||||
"adnm": "麻城市",
|
"adnm": "麻城市",
|
||||||
"adcd": "421181000000000",
|
"adcd": "421181000000000",
|
||||||
"attachUpdateTime": "2025-05-15 16:09:53",
|
"attachUpdateTime": "2025-05-15 16:09:53",
|
||||||
"status": 0,
|
"status": 0,
|
||||||
"uploadAttachStatus": "1",
|
"uploadAttachStatus": "1",
|
||||||
"padNm": "421181000000000",
|
"padNm": "421181000000000",
|
||||||
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 125974,
|
"id": 125974,
|
||||||
"reviewStatus": "2",
|
"reviewStatus": "2",
|
||||||
"createTime": "2025-05-03 21:25:23",
|
"createTime": "2025-05-03 21:25:23",
|
||||||
"updateId": "187",
|
"updateId": "187",
|
||||||
"updateName": "麻城市",
|
"updateName": "麻城市",
|
||||||
"updateTime": "2025-05-15 10:01:56",
|
"updateTime": "2025-05-15 10:01:56",
|
||||||
"del": "0",
|
"del": "0",
|
||||||
"planId": "421181001000000",
|
"planId": "421181001000000",
|
||||||
"planName": "龙池桥街道山洪灾害防御预案",
|
"planName": "龙池桥街道山洪灾害防御预案",
|
||||||
"levels": "1",
|
"levels": "1",
|
||||||
"year": "2025",
|
"year": "2025",
|
||||||
"adnm": "龙池桥街道",
|
"adnm": "龙池桥街道",
|
||||||
"adcd": "421181001000000",
|
"adcd": "421181001000000",
|
||||||
"attachUpdateTime": "2025-05-15 10:01:55",
|
"attachUpdateTime": "2025-05-15 10:01:55",
|
||||||
"status": 0,
|
"status": 0,
|
||||||
"uploadAttachStatus": "1",
|
"uploadAttachStatus": "1",
|
||||||
"padNm": "421181001000000",
|
"padNm": "421181001000000",
|
||||||
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
|
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 125975,
|
"id": 125975,
|
||||||
"reviewStatus": "2",
|
"reviewStatus": "2",
|
||||||
"createTime": "2025-05-03 21:25:23",
|
"createTime": "2025-05-03 21:25:23",
|
||||||
"updateId": "187",
|
"updateId": "187",
|
||||||
"updateName": "麻城市",
|
"updateName": "麻城市",
|
||||||
"updateTime": "2025-05-15 15:35:33",
|
"updateTime": "2025-05-15 15:35:33",
|
||||||
"del": "0",
|
"del": "0",
|
||||||
"planId": "421181001001000",
|
"planId": "421181001001000",
|
||||||
"planName": "园林社区居民委员会山洪灾害防御预案",
|
"planName": "园林社区居民委员会山洪灾害防御预案",
|
||||||
"levels": "0",
|
"levels": "0",
|
||||||
"year": "2025",
|
"year": "2025",
|
||||||
"adnm": "园林社区居民委员会",
|
"adnm": "园林社区居民委员会",
|
||||||
"adcd": "421181001001000",
|
"adcd": "421181001001000",
|
||||||
"attachUpdateTime": "2025-05-15 15:35:33",
|
"attachUpdateTime": "2025-05-15 15:35:33",
|
||||||
"status": 0,
|
"status": 0,
|
||||||
"uploadAttachStatus": "1",
|
"uploadAttachStatus": "1",
|
||||||
"padNm": "421181001001000",
|
"padNm": "421181001001000",
|
||||||
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
|
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 125976,
|
"id": 125976,
|
||||||
"reviewStatus": "2",
|
"reviewStatus": "2",
|
||||||
"createTime": "2025-05-03 21:25:23",
|
"createTime": "2025-05-03 21:25:23",
|
||||||
"updateTime": "2025-05-14 09:53:14",
|
"updateTime": "2025-05-14 09:53:14",
|
||||||
"del": "0",
|
"del": "0",
|
||||||
"planId": "421181001001000",
|
"planId": "421181001001000",
|
||||||
"planName": "园林社区居民委员会一页纸预案",
|
"planName": "园林社区居民委员会一页纸预案",
|
||||||
"levels": "6",
|
"levels": "6",
|
||||||
"year": "2025",
|
"year": "2025",
|
||||||
"adnm": "园林社区居民委员会",
|
"adnm": "园林社区居民委员会",
|
||||||
"adcd": "421181001001000",
|
"adcd": "421181001001000",
|
||||||
"status": 0,
|
"status": 0,
|
||||||
"uploadAttachStatus": "0",
|
"uploadAttachStatus": "0",
|
||||||
"padNm": "421181001001000",
|
"padNm": "421181001001000",
|
||||||
"url": "dplan/2025/421181001001000/园林社区居民委员会一页纸预案.pdf"
|
"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"
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
function DrpReal({ style }) {
|
function DrpReal({ style }) {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
Loading…
Reference in New Issue