|
|
@ -11,10 +11,18 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
const [pageLeft, setPageLeft] = useState(0) //左边翻页
|
|
|
|
const [pageRight, setPageRight] = useState(0) //左边翻页
|
|
|
|
const [siteList, setSiteList] = useState([]) //站点列表
|
|
|
|
const [pumpList, setPumpList] = useState([]) //水泵列表
|
|
|
|
const [strucId, setStrucId] = useState() //站点ID
|
|
|
|
const [pumpId, setPumpId] = useState() //水泵id
|
|
|
|
const [usePumpId, setUsePumpId] = useState() //水泵id
|
|
|
|
const [pumpData, setPumpData] = useState([]) //水泵数据
|
|
|
|
const [cabinetData, setCabinetData] = useState([]) //进线柜数据
|
|
|
|
const [centreData, setCentreData] = useState({}) //中间数据
|
|
|
|
const [depthWater, setDepthWater] = useState([]) //液位趋势
|
|
|
|
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
|
|
|
|
const [useTrend, setUseTrend] = useState([]) //用电趋势
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => { |
|
|
@ -49,6 +57,9 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
setPumpList(p.payload.data[0]?.groups[0]?.stations) |
|
|
|
setPumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id) |
|
|
|
setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id) |
|
|
|
if (dataId.length) { |
|
|
|
let sameDay //当天最新一条数据
|
|
|
|
let beforeDay //前一天最新一条数据
|
|
|
@ -225,7 +236,7 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
let find2 = month?.find(c => c.id == u.id) |
|
|
|
let find3 = year?.find(c => c.id == u.id) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cabinetSun.push({ |
|
|
|
today: u?.data[0]?.eQF_EQ && find1?.data[0]?.eQF_EQ ? (u?.data[0]?.eQF_EQ - find1?.data[0]?.eQF_EQ) : '--', |
|
|
|
sameMonth: u?.data[0]?.eQF_EQ && find2?.data[0]?.eQF_EQ ? (u?.data[0]?.eQF_EQ - find2?.data[0]?.eQF_EQ) : '--', |
|
|
@ -250,18 +261,11 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
params: { query: { factorId: informationId } } |
|
|
|
})).then(async p => { |
|
|
|
if (p.success) { |
|
|
|
let dataId = [] |
|
|
|
p.payload.data?.map(v => { |
|
|
|
v.groups?.map(s => { |
|
|
|
s.stations?.map(f => { |
|
|
|
dataId.push(f.id) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
await dispatch(bigScreen.axyData({ |
|
|
|
type: 'get', url: `stations/theme/data`, params: { |
|
|
|
query: { |
|
|
|
stations: dataId.join(), |
|
|
|
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id, |
|
|
|
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
limit: 1 |
|
|
@ -274,6 +278,22 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
sun.sGrille_level = d.payload.data?.stations[0]?.data[0]?.sGrille_level |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 液位趋势
|
|
|
|
await dispatch(bigScreen.axyData({ |
|
|
|
type: 'get', url: `stations/theme/data`, params: { |
|
|
|
query: { |
|
|
|
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id, |
|
|
|
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
limit: 1440 |
|
|
|
} |
|
|
|
} |
|
|
|
})).then(d => { |
|
|
|
if (d.success) { |
|
|
|
setDepthWater(d.payload.data?.stations[0]?.data) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
@ -311,6 +331,61 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
setCentreData(sun) |
|
|
|
}, [strucId]) |
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
if (pumpId) { |
|
|
|
//电流趋势
|
|
|
|
await dispatch(bigScreen.axyData({ |
|
|
|
type: 'get', url: `stations/theme/data`, params: { |
|
|
|
query: { |
|
|
|
stations: pumpId, |
|
|
|
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
limit: 1440 |
|
|
|
} |
|
|
|
} |
|
|
|
})).then(d => { |
|
|
|
if (d.success) { |
|
|
|
let trend = [] |
|
|
|
d.payload.data?.stations[0]?.data?.map((s, i) => { |
|
|
|
trend.push({ time: s.time, eMotor_A_A: s.eMotor_A_A }) |
|
|
|
}) |
|
|
|
setElectricityTrend(trend) |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, [pumpId]) |
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
if (usePumpId) { |
|
|
|
//电流趋势
|
|
|
|
await dispatch(bigScreen.axyData({ |
|
|
|
type: 'get', url: `stations/theme/data`, params: { |
|
|
|
query: { |
|
|
|
stations: usePumpId, |
|
|
|
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
limit: 1440 |
|
|
|
} |
|
|
|
} |
|
|
|
})).then(d => { |
|
|
|
if (d.success) { |
|
|
|
let trend = [] |
|
|
|
let front = {} |
|
|
|
d.payload.data?.stations[0]?.data?.map((s, i) => { |
|
|
|
front = s |
|
|
|
if (i > 0) { |
|
|
|
trend.push({ time: front.time, value: front?.eMotor_EQ - s.eMotor_EQ }) |
|
|
|
} |
|
|
|
}) |
|
|
|
setUseTrend(trend) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, [usePumpId]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -339,8 +414,8 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF' }}>{v.name}</div> |
|
|
|
<div style={{ |
|
|
|
width: 50, height: 26, background: '#a7110033', border: '1px solid #A71100', cursor: "pointer", |
|
|
|
borderRadius: 4, color: ' #E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10 |
|
|
|
width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#A71100'}`, cursor: "pointer", |
|
|
|
borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10 |
|
|
|
}}>{[1, 3, 5].includes(v.data[0]?.sMotor_RunMode) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '运行' : v.data[0]?.sMotor_RunMode == 7 ? '故障' : '无状态'}</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}> |
|
|
@ -561,8 +636,8 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF' }}>{v.name}</div> |
|
|
|
<div style={{ |
|
|
|
width: 50, height: 26, background: '#a7110033', border: '1px solid #A71100', cursor: "pointer", |
|
|
|
borderRadius: 4, color: ' #E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10 |
|
|
|
width: 50, height: 26, background: v.sQF_CLOSING ? "#00434180" : '#a7110033', border: `1px solid ${v.sQF_CLOSING ? "#00FFF8" : '#A71100'}`, cursor: "pointer", |
|
|
|
borderRadius: 4, color: v.sQF_CLOSING ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10 |
|
|
|
}}>{v.sQF_CLOSING ? '合闸' : '分闸'}</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}> |
|
|
@ -607,50 +682,236 @@ const Capacity = ({ actions, dispatch, user, }) => { |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
width: '31%', height: '100%', |
|
|
|
}}> |
|
|
|
<div className='site' style={{ display: 'flex' }}> |
|
|
|
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>液位趋势</div> |
|
|
|
<Select |
|
|
|
showSearch |
|
|
|
placeholder="请选择站点" |
|
|
|
value={strucId} |
|
|
|
style={{ width: 155,height:20 }} |
|
|
|
optionFilterProp="children" |
|
|
|
onChange={() => { |
|
|
|
|
|
|
|
</div> |
|
|
|
<ReactECharts |
|
|
|
option={{ |
|
|
|
title: { |
|
|
|
// text: v.name,
|
|
|
|
}, |
|
|
|
grid: { |
|
|
|
// width: 300,
|
|
|
|
// height: 200
|
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
// startValue: depthWater?.map(v=>v.time)
|
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
}, |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['集水池液位', '池前(上游)液位'], |
|
|
|
right: '10%', |
|
|
|
textStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
// name: "时间",
|
|
|
|
boundaryGap: false, |
|
|
|
data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm')) |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
name: "单位:M", |
|
|
|
areaStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'line', |
|
|
|
name: '集水池液位', |
|
|
|
smooth: true, |
|
|
|
areaStyle: { |
|
|
|
color: '#0e9cff26', |
|
|
|
}, |
|
|
|
data: depthWater?.map(v => v.sLiquid_level) |
|
|
|
}, { |
|
|
|
type: 'line', |
|
|
|
name: '池前(上游)液位', |
|
|
|
smooth: true, |
|
|
|
areaStyle: { |
|
|
|
color: '#0e9cff26', |
|
|
|
}, |
|
|
|
data: depthWater?.map(v => v.sGrille_level) |
|
|
|
}, |
|
|
|
] |
|
|
|
}} |
|
|
|
onSearch={() => { |
|
|
|
notMerge={true} |
|
|
|
lazyUpdate={true} |
|
|
|
style={{ width: "100%", height: "90%" }} |
|
|
|
theme={'ReactEChart'} |
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|
|
|
backgroundSize: '100% 36px', |
|
|
|
backgroundPosition: '0 0', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
width: '31%', height: '100%', |
|
|
|
}}> |
|
|
|
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>电流趋势</div> |
|
|
|
<Select |
|
|
|
className='bigscreen-select' |
|
|
|
bordered={false} |
|
|
|
value={pumpId} |
|
|
|
optionFilterProp="children" |
|
|
|
onSelect={v => { |
|
|
|
setPumpId(v) |
|
|
|
}} |
|
|
|
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<ReactECharts |
|
|
|
option={{ |
|
|
|
title: { |
|
|
|
// text: v.name,
|
|
|
|
}, |
|
|
|
grid: { |
|
|
|
// width: 300,
|
|
|
|
// height: 200
|
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
// startValue: depthWater?.map(v=>v.time)
|
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
}, |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
// data: ['集水池液位',],
|
|
|
|
right: '10%', |
|
|
|
textStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
// name: "时间",
|
|
|
|
boundaryGap: false, |
|
|
|
data: electricityTrend?.map(v => moment(v.time).format('MM-DD HH:mm')) |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
name: "单位:M", |
|
|
|
areaStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'line', |
|
|
|
// name: '集水池液位',
|
|
|
|
smooth: true, |
|
|
|
areaStyle: { |
|
|
|
color: '#0e9cff26', |
|
|
|
}, |
|
|
|
data: electricityTrend?.map(v => v.eMotor_A_A) |
|
|
|
} |
|
|
|
] |
|
|
|
}} |
|
|
|
filterOption={(input, option) => |
|
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) |
|
|
|
} |
|
|
|
options={siteList} |
|
|
|
notMerge={true} |
|
|
|
lazyUpdate={true} |
|
|
|
style={{ width: "100%", height: "90%" }} |
|
|
|
theme={'ReactEChart'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|
|
|
backgroundSize: '100% 36px', |
|
|
|
backgroundPosition: '0 0', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
width: '31%', height: '100%', |
|
|
|
}}> |
|
|
|
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>用电趋势</div> |
|
|
|
<Select |
|
|
|
className='bigscreen-select' |
|
|
|
bordered={false} |
|
|
|
value={usePumpId} |
|
|
|
optionFilterProp="children" |
|
|
|
onSelect={v => { |
|
|
|
setUsePumpId(v) |
|
|
|
}} |
|
|
|
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<ReactECharts |
|
|
|
option={{ |
|
|
|
title: { |
|
|
|
// text: v.name,
|
|
|
|
}, |
|
|
|
grid: { |
|
|
|
// width: 300,
|
|
|
|
// height: 200
|
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
// startValue: depthWater?.map(v=>v.time)
|
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
}, |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
// data: ['集水池液位',],
|
|
|
|
right: '10%', |
|
|
|
textStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
// name: "时间",
|
|
|
|
boundaryGap: false, |
|
|
|
data: useTrend?.map(v => moment(v.time).format('MM-DD HH:mm')) |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
name: "单位:M", |
|
|
|
areaStyle: { |
|
|
|
color: '#FFF', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'line', |
|
|
|
// name: '集水池液位',
|
|
|
|
smooth: true, |
|
|
|
areaStyle: { |
|
|
|
color: '#0e9cff26', |
|
|
|
}, |
|
|
|
data: useTrend?.map(v => v.value) |
|
|
|
} |
|
|
|
] |
|
|
|
}} |
|
|
|
notMerge={true} |
|
|
|
lazyUpdate={true} |
|
|
|
style={{ width: "100%", height: "90%" }} |
|
|
|
theme={'ReactEChart'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|
|
|
backgroundSize: '100% 36px', |
|
|
|
backgroundPosition: '0 0', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
width: '31%', height: '100%', |
|
|
|
}}> |
|
|
|
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>电流趋势</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|
|
|
backgroundSize: '100% 36px', |
|
|
|
backgroundPosition: '0 0', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
width: '31%', height: '100%', |
|
|
|
}}> |
|
|
|
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>用电趋势</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div > |
|
|
|
} |
|
|
|
|
|
|
|