You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
450 lines
20 KiB
450 lines
20 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select } from 'antd';
|
|
import moment from 'moment'
|
|
import ReactECharts from 'echarts-for-react';
|
|
import General from '../components/realTime/general';
|
|
import LineBoxStatus from '../components/electrity/lineBoxStatus';
|
|
import SoftStart from '../components/realTime/softStart';
|
|
import Below from '../components/realTime/below';
|
|
import RunTime from '../components/realTime/runTime';
|
|
import AccumulateTime from '../components/realTime/accumulateTime';
|
|
|
|
const RealTime = ({ dispatch, actions, user, siteList, }) => {
|
|
|
|
const { bigScreen } = actions
|
|
const [pageLeft, setPageLeft] = useState(0) //左边翻页
|
|
const [pageRight, setPageRight] = useState(0) //左边翻页
|
|
const [pumpList, setPumpList] = useState([]) //水泵列表
|
|
const [cabinetList, setCabinetList] = useState([]) //水泵列表
|
|
const [strucId, setStrucId] = useState() //站点ID
|
|
const [pumpId, setPumpId] = useState() //水泵id
|
|
const [cabinetId, setCabinetId] = useState() //进线柜id
|
|
const [usePumpId, setUsePumpId] = useState() //水泵id
|
|
const [voltagePumpId, setVoltagePumpId] = useState([]) //水泵电压id
|
|
const [pumpOne, setPumpOne] = useState({ data: [] }) //单个水泵数据
|
|
const [voltagepump, setVoltagePump] = useState([]) //单个水泵数据
|
|
|
|
const [cabinetOne, setCabinetOne] = useState({ data: [] }) //单个进线柜数据
|
|
const [cabinetData, setCabinetData] = useState([]) //进线柜数据
|
|
const [centreData, setCentreData] = useState({}) //中间数据
|
|
const [depthWater, setDepthWater] = useState([]) //液位趋势
|
|
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
|
|
const [useTrend, setUseTrend] = useState([]) //用电趋势
|
|
const [stations, setStations] = useState({}) //测点id
|
|
const [softStartData, setSoftStartData] = useState([]) //软启动总用电数据
|
|
const [electro, setElectro] = useState({ week: 0, year: 0, day: 0 }) //用电概况
|
|
const [level, setLevel] = useState(0) //实时液位
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
setStrucId(siteList[0]?.value)
|
|
}, [siteList])
|
|
|
|
useEffect(async () => {
|
|
if (strucId) {
|
|
let station = {}
|
|
let week = 0 //本周
|
|
let year = 0 //年
|
|
let day = 0 //今日
|
|
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
|
|
if (r.success) {
|
|
//水泵信息
|
|
let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
|
|
if (waterId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: waterId } }
|
|
})).then(async p => {
|
|
if (p.success) {
|
|
let dataId = p.payload.data[0]?.groups[0]?.stations?.map(k => k.id) || []
|
|
station.pump = dataId
|
|
// let voltageId =[]
|
|
|
|
// setPumpList(p.payload.data[0]?.groups[0]?.stations)
|
|
// setPumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
|
|
// setVoltagePumpId(voltageId)
|
|
// setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
|
|
if (dataId.length) {
|
|
// 当前时间
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
startTime: moment().startOf('day').format('YYYY/MM/DD HH:mm:ss'),
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
setSoftStartData(d.payload.data?.stations)
|
|
}
|
|
})
|
|
|
|
//今天
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('day').format('x'),
|
|
end: moment().endOf('day').format('x'),
|
|
aggtype: "h",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
day += (f?.values?.eMotor_EQ || 0)
|
|
week += (f?.values?.eMotor_EQ || 0)
|
|
year += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
//本周
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().weekday(1).startOf('day').format('x'),
|
|
end: moment().weekday(7).endOf('day').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
week += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
//今年
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('year').format('x'),
|
|
end: moment().endOf('year').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
year += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// 进线柜
|
|
let wireCabinetId = r.payload.data?.find(v => v.name == '泵站进线柜')?.id
|
|
if (wireCabinetId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: wireCabinetId } }
|
|
})).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)
|
|
})
|
|
})
|
|
})
|
|
station.cabine = dataId
|
|
// setCabinetList(dataId)
|
|
// setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
|
|
if (dataId.length) {
|
|
// // 当前时间
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
|
|
}
|
|
})
|
|
|
|
// // 今天
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('day').format('x'),
|
|
end: moment().endOf('day').format('x'),
|
|
aggtype: "h",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
day += (f?.values?.eQF_EQ || 0)
|
|
week += (f?.values?.eQF_EQ || 0)
|
|
year += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// // 本周
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().weekday(1).startOf('day').format('x'),
|
|
end: moment().weekday(7).endOf('day').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
week += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// // 今年
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('year').format('x'),
|
|
end: moment().endOf('year').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
year += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
//泵站信息
|
|
let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
|
|
if (informationId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: informationId } }
|
|
})).then(async p => {
|
|
if (p.success) {
|
|
|
|
// 液位趋势
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
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
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
setLevel(d.payload.data?.stations[0]?.data[0]?.sLiquid_level || 0)
|
|
}
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
})
|
|
setStations(station)
|
|
setElectro({ day: day, week: week, year: year })
|
|
}
|
|
|
|
|
|
}, [strucId])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// useEffect(async () => {
|
|
// if (pumpId) {
|
|
// await dispatch(bigScreen.axyData({
|
|
// type: 'get', url: `stations/theme/data`, params: {
|
|
// query: {
|
|
// stations: pumpId,
|
|
// startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
// limit: 1
|
|
// }
|
|
// }
|
|
// })).then(d => {
|
|
// if (d.success) {
|
|
// setPumpOne(d.payload.data?.stations[0] || { data: [] })
|
|
// }
|
|
// })
|
|
|
|
// }
|
|
// }, [pumpId])
|
|
|
|
// useEffect(async () => {
|
|
// if (cabinetId) {
|
|
// await dispatch(bigScreen.axyData({
|
|
// type: 'get', url: `stations/theme/data`, params: {
|
|
// query: {
|
|
// stations: cabinetId,
|
|
// startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
// limit: 1
|
|
// }
|
|
// }
|
|
// })).then(d => {
|
|
// if (d.success) {
|
|
// setCabinetOne(d.payload.data?.stations[0] || { data: [] })
|
|
// }
|
|
// })
|
|
|
|
// }
|
|
// }, [cabinetId])
|
|
|
|
// useEffect(async () => {
|
|
// if (voltagePumpId?.length > 0) {
|
|
// await dispatch(bigScreen.axyData({
|
|
// type: 'get', url: `stations/theme/data`, params: {
|
|
// query: {
|
|
// stations: voltagePumpId?.join(),
|
|
// 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) {
|
|
// setVoltagePump(d.payload.data?.stations || [])
|
|
// }
|
|
// })
|
|
|
|
// }
|
|
// }, [voltagePumpId])
|
|
|
|
|
|
|
|
return <div style={{ width: '100%', height: 'calc(100% - 200px', color: '#FFF', position: 'absolute', top: 160, left: 0 }}>
|
|
<div style={{ width: '100%', height: "100%", position: 'relative', }}>
|
|
<General setInterval={setInterval} stations={stations} />
|
|
<SoftStart softStartData={softStartData} />
|
|
<RunTime softStartData={softStartData} />
|
|
<AccumulateTime softStartData={softStartData} />
|
|
<Below stations={stations} level={level} />
|
|
<div style={{
|
|
width: 166, position: "absolute", left: '29%', top: '4%',
|
|
}}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
|
|
}}> 本周用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.week?.toFixed(2)}</span>
|
|
</div>
|
|
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-week.png`} />
|
|
</div>
|
|
<div style={{
|
|
width: 166, position: "absolute", left: '59%', top: "13%",
|
|
}}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
|
|
}}>今年用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.year?.toFixed(2)}</span>
|
|
</div>
|
|
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-year.png`} />
|
|
</div>
|
|
<div style={{
|
|
width: 166, position: "absolute", left: '31%', top: '28%',
|
|
}}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
|
|
}}> 今日用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.day?.toFixed(2)}</span>
|
|
</div>
|
|
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-day.png`} />
|
|
</div>
|
|
<img style={{ width: '20%', height: '40%', position: "absolute", left: "40%", top: '3%' }} src={`/assets/images/realTime/center.png`} />
|
|
<div className='site' style={{
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
width: '40%', top: "calc(60% - 70px)", position: 'absolute', left: "30%"
|
|
}}>
|
|
<img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
|
|
<div style={{
|
|
width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic"
|
|
}}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div>
|
|
<Select
|
|
showSearch
|
|
placeholder="请选择站点"
|
|
value={strucId}
|
|
style={{ width: 155 }}
|
|
optionFilterProp="children"
|
|
onSelect={v => {
|
|
setStrucId(v)
|
|
}}
|
|
options={siteList}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div >
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
clientHeight: global.clientHeight,
|
|
actions: global.actions,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(RealTime);
|