PumpStation/web/client/src/sections/bigScreen/components/electrical.js

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, waterLevelSix, currentSix, cabinet }) => {

   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;
            }
         }
      }
      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])






   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
            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 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>
               <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>
            </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' }}>{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 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>
            {changeable && <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, 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);