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.
261 lines
12 KiB
261 lines
12 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select, Tooltip } from 'antd';
|
|
import moment from 'moment'
|
|
import ReactECharts from 'echarts-for-react';
|
|
import Scale from './scale/scale';
|
|
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, waterLevelSix, currentSix, cabinet }) => {
|
|
const isMobile = window.innerWidth <= 1080 ? true : false;
|
|
const { bigScreen } = actions
|
|
const [pumpList, setPumpList] = useState([]) //水泵列表
|
|
const [cabinetList, setCabinetList] = useState([]) //水泵列表
|
|
const [strucId, setStrucId] = useState() //站点ID
|
|
const [pumpId, setPumpId] = useState() //水泵id
|
|
const [cabinetId, setCabinetId] = useState() //进线柜id
|
|
const [voltagePumpId, setVoltagePumpId] = useState([]) //水泵电压id
|
|
const [pumpOne, setPumpOne] = useState({ data: [] }) //单个水泵数据
|
|
const [voltagepump, setVoltagePump] = useState([]) //单个水泵数据
|
|
const [cabinetOne, setCabinetOne] = useState({ data: [] }) //单个进线柜数据
|
|
const [changeable, setChangeable] = useState(true) // 泵站是否可切换
|
|
|
|
useEffect(() => {
|
|
const autoStructId = sessionStorage.getItem('structId');
|
|
let nextStructId = siteList[0]?.value;
|
|
if (autoStructId) {
|
|
for (let i = 0; i < siteList.length; i++) {
|
|
if (autoStructId == siteList[i].value) {
|
|
nextStructId = siteList[i].value;
|
|
setChangeable(false);
|
|
break;
|
|
}
|
|
if (i === siteList.length - 1) {
|
|
alert('泵站系统暂未接入此泵站');
|
|
if (isMobile) wx.miniProgram.navigateBack();
|
|
}
|
|
}
|
|
}
|
|
setStrucId(nextStructId);
|
|
}, [siteList])
|
|
|
|
useEffect(() => {
|
|
if (cabinet?.length) {
|
|
setCabinetId(cabinet[0].id)
|
|
setCabinetOne(cabinet[0] || {})
|
|
setCabinetList(cabinet?.map(v => ({ value: v.id, label: v.name })) || [])
|
|
}
|
|
}, [cabinet])
|
|
|
|
|
|
useEffect(() => {
|
|
if (currentSix?.length) {
|
|
setPumpId(currentSix[0].id)
|
|
// setPumpOne(currentSix[0] || {})
|
|
setVoltagePumpId(currentSix?.slice(0, 3)?.map(v => v.id))
|
|
setPumpList(currentSix || [])
|
|
setVoltagePump(currentSix?.slice(0, 3) || [])
|
|
}
|
|
}, [currentSix])
|
|
|
|
useEffect(() => {
|
|
if (strucId) {
|
|
dispatch(bigScreen.getWaterLevelSix({ key: 'waterLevelSix', methodType: 'hget', field: 'struc' + strucId }))
|
|
dispatch(bigScreen.getCurrentSix({ key: 'currentSix', methodType: 'hget', field: 'struc' + strucId }))
|
|
dispatch(bigScreen.getCabinet({ key: 'cabinet', methodType: 'hget', field: 'struc' + strucId }))
|
|
}
|
|
}, [strucId])
|
|
|
|
const renderMobilePage = () => {
|
|
return <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ width: "90%", height: 320, display: 'flex', justifyContent: 'space-between' }}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 40, width: 320, height: 320, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
|
|
环境湿度：</div>
|
|
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sHumidity || "--"} %</span>
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 40, width: 320, height: 320, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
|
|
环境温度：
|
|
</div>
|
|
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sTEMP || "--"} ℃</span>
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
fontSize: 40, width: 320, height: 320, textAlign: 'center',
|
|
}}>
|
|
<div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
|
|
信号：</div>
|
|
<img width={40} height={40} src='/assets/images/electrical/signal_4.png' />
|
|
</div>
|
|
</div>
|
|
<RealTimeStatus
|
|
setPumpOne={setPumpOne}
|
|
pumpId={pumpId}
|
|
pumpList={pumpList}
|
|
setPumpId={setPumpId}
|
|
pumpOne={pumpOne}
|
|
strucId={strucId}
|
|
siteList={siteList}
|
|
currentSix={currentSix}
|
|
isMobile={isMobile}
|
|
/>
|
|
</div>
|
|
}
|
|
|
|
return <div style={{ width: '100%', height: 'calc(100% - 200px', color: '#FFF', position: 'absolute', top: 160, left: 0 }}>
|
|
{isMobile ? renderMobilePage() : <div style={{ width: '100%', height: "100%", position: 'relative', }}>
|
|
<RealTimeStatus
|
|
setPumpOne={setPumpOne}
|
|
pumpId={pumpId}
|
|
pumpList={pumpList}
|
|
setPumpId={setPumpId}
|
|
pumpOne={pumpOne}
|
|
strucId={strucId}
|
|
siteList={siteList}
|
|
currentSix={currentSix}
|
|
/>
|
|
<LineBoxStatus
|
|
cabinetId={cabinetId}
|
|
cabinetList={cabinetList}
|
|
setCabinetId={setCabinetId}
|
|
cabinetOne={cabinetOne}
|
|
setCabinetOne={setCabinetOne}
|
|
cabinet={cabinet}
|
|
/>
|
|
<VoltageTrend
|
|
pumpList={pumpList}
|
|
voltagePumpId={voltagePumpId}
|
|
setVoltagePumpId={setVoltagePumpId}
|
|
data={voltagepump}
|
|
currentSix={currentSix}
|
|
setVoltagePump={setVoltagePump}
|
|
/>
|
|
<LevelTrend
|
|
depthWater={waterLevelSix}
|
|
/>
|
|
<div className='pump-title' style={{
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
width: '40%', top: 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"
|
|
}}>
|
|
{changeable ? <Select
|
|
popupClassName="pump-title-select-popup"
|
|
bordered={false}
|
|
style={{ minWidth: 150, fontSize: 20 }}
|
|
showSearch
|
|
filterOption={(input, option) =>
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
|
|
}
|
|
placeholder="请选择站点"
|
|
value={strucId}
|
|
optionFilterProp="children"
|
|
onSelect={v => {
|
|
setStrucId(v)
|
|
}}
|
|
options={siteList}
|
|
/> : siteList?.filter(v => v.value == strucId)[0]?.label}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: "30%", height: 160, position: "absolute", left: '35%', top: "18%",
|
|
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>
|
|
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sHumidity || "--"} %</span>
|
|
</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>
|
|
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sTEMP || "--"} ℃</span>
|
|
</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>
|
|
{/* <span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.CSQ4G || "--"}</span> */}
|
|
<img src='/assets/images/electrical/signal_4.png' />
|
|
</div>
|
|
</div>
|
|
|
|
<img style={{ width: "46%", height: "84%", position: "absolute", left: "27%", top: "25%" }} src={`/assets/images/electrical/centre2.png`} />
|
|
{
|
|
pumpList?.map((pump, index) => {
|
|
const src = `/assets/images/electrical/${[1, 3, 5].includes(pump?.data[0]?.sMotor_State)
|
|
? 'pump_close' : [2, 4, 6].includes(pump?.data[0]?.sMotor_State)
|
|
? 'pump_open' : pump?.data[0]?.sMotor_State == 7
|
|
? 'pump_fault' : 'pump_fault'}.png`
|
|
const left = index <= 5 ? 57.6 + index * 0.25 : 51.5 + index * 0.08;
|
|
const top = index <= 5 ? 54.3 + index * 2.7 : 38 + index * 2.7;
|
|
return <Tooltip title={pump.name} color="#042553">
|
|
<img src={src} style={{
|
|
width: 82,
|
|
height: 41,
|
|
position: "absolute",
|
|
left: `${left}%`,
|
|
top: `${top}%`,
|
|
transform: `scaleX(${index <= 5 ? 1 : -1})`,
|
|
cursor: 'pointer',
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
})
|
|
}
|
|
{/* <div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "33%", top: "58%" }}>集水池水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{waterLevelSix[waterLevelSix?.length - 1]?.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' }}>{waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0}</span>米</div> */}
|
|
<div style={{ position: "absolute", left: "29%", top: "48%" }}>
|
|
<Scale title="池前(上游)液位" value={waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0} />
|
|
</div>
|
|
<div style={{ position: "absolute", left: "50%", top: "48%" }}>
|
|
<Scale title="集水池液位" value={waterLevelSix[waterLevelSix?.length - 1]?.sLiquid_level?.toFixed(2) || 0} />
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, waterLevelSix, currentSix, cabinet } = state;
|
|
return {
|
|
user: auth.user,
|
|
clientHeight: global.clientHeight,
|
|
actions: global.actions,
|
|
waterLevelSix: waterLevelSix?.data || [],
|
|
currentSix: currentSix?.data || [],
|
|
cabinet: cabinet?.data || [],
|
|
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Electrical);
|