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.
279 lines
12 KiB
279 lines
12 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 RealTimeStatus from '../components/electrity/realTimeStatus';
|
|
import LineBoxStatus from '../components/electrity/lineBoxStatus';
|
|
import VoltageTrend from '../components/electrity/voltageTrend';
|
|
import LevelTrend from '../components/electrity/levelTrend';
|
|
|
|
const Electrical = ({ dispatch, actions, siteList}) => {
|
|
|
|
const { bigScreen } = actions
|
|
const [pageLeft, setPageLeft] = useState(0) //左边翻页
|
|
const [pageRight, setPageRight] = useState(0) //左边翻页
|
|
// const [siteList, setSiteList] = useState([]) //站点列表
|
|
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([]) //用电趋势
|
|
|
|
|
|
useEffect(() => {
|
|
setStrucId(siteList[0]?.value)
|
|
}, [siteList])
|
|
|
|
useEffect(async () => {
|
|
if (strucId) {
|
|
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 = []
|
|
let voltageId = []
|
|
p.payload.data?.map(v => {
|
|
v.groups?.map(s => {
|
|
s.stations?.map(f => {
|
|
dataId.push(f.id)
|
|
if (voltageId?.length < 3) {
|
|
voltageId.push(f.id)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
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) {
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
}
|
|
})
|
|
}
|
|
// 进线柜
|
|
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({ value: f.id, label: f.name })
|
|
})
|
|
})
|
|
})
|
|
setCabinetList(dataId)
|
|
setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
// //泵站信息
|
|
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().add(-12, '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)
|
|
}
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
}, [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(-12, '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', }}>
|
|
<RealTimeStatus pumpId={pumpId} pumpList={pumpList} setPumpId={setPumpId} pumpOne={pumpOne} strucId={strucId} siteList={siteList} />
|
|
<LineBoxStatus cabinetId={cabinetId} cabinetList={cabinetList} setCabinetId={setCabinetId} cabinetOne={cabinetOne} />
|
|
<VoltageTrend pumpList={pumpList} voltagePumpId={voltagePumpId} setVoltagePumpId={setVoltagePumpId} data={voltagepump} />
|
|
<LevelTrend depthWater={depthWater} />
|
|
<div style={{
|
|
width: "30%", height: 160, position: "absolute", left: '35%', top: "8%",
|
|
display: 'flex', justifyContent: 'space-between',
|
|
}}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 20, width: 160, height: 160, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
|
|
环境湿度：</div>{depthWater[0]?.sHumidity || "--"} %
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 20, width: 160, height: 160, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
|
|
环境湿度：</div>{depthWater[0]?.sTEMP || "--"} ℃
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 20, width: 160, height: 160, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
|
|
信号：</div>{depthWater[0]?.CSQ4G || "--"}
|
|
</div>
|
|
</div>
|
|
<img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />
|
|
<div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "33%", top: "58%" }}>集水池水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{depthWater[0]?.sLiquid_level?.toFixed(2) || 0}</span>米</div>
|
|
<div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "36%", top: "70%" }}>池前上游水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{depthWater[0]?.sGrille_level?.toFixed(2) || 0}</span>米</div>
|
|
<div className='site' style={{
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
width: '40%', bottom: 10, position: 'absolute', left: "28%"
|
|
}}>
|
|
<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)(Electrical);
|