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

import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect, message } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
import moment from 'moment'
import CardTitle from './public/cardTitle'
import SimpleBar from 'simplebar-react';
import Left_1 from './basis/left_1';
import Right_1 from './basis/right_1';
import Right_2 from './basis/right_2';
import { POWER_STATIONS } from './shuizhan_detail';
import './basis.less'

const Basis = ({ actions, dispatch, setshowData, siteList, siteData, waterLevelSix, waterPumpStateAll }) => {

   const { bigScreen } = actions
   const [strucId, setStrucId] = useState() //站点ID

   const [information, setInformation] = useState({})
   const [pumpInformation, setPumpInformation] = useState({})
   const [pumpNumber, setPumpNumber] = useState(0)

   useEffect(() => {
      dispatch(bigScreen.pumpInformation({})).then(res => {
         if (res.success) {
            setPumpInformation(res.payload.data || [])
         }
      })

   }, [])
   useEffect(() => {
      if (pumpInformation && strucId) {
         setInformation(Object.values(pumpInformation)?.find(v => v.structId == strucId) || {})
      }
   }, [pumpInformation, strucId])

   useEffect(() => {
      if (waterPumpStateAll?.length) {
         let num = 0
         waterPumpStateAll?.forEach(v => {
            num += v.data.length || 0
         })
         setPumpNumber(num)
      }
   }, [waterPumpStateAll])

   useEffect(async () => {
      if (siteData) {
         //水泵状态
         dispatch(bigScreen.getWaterPumpStateAll({ key: 'waterPumpStateAll', methodType: 'get', }))
      }

   }, [siteData])

   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;
               break;
            }
            if (i === siteList.length - 1) {
               alert('泵站系统暂未接入此泵站');
            }
         }
      }
      setStrucId(nextStructId);
   }, [siteList])

   useEffect(() => {
      if (strucId) {
         //泵站水位数据
         dispatch(bigScreen.getWaterLevelSix({ key: 'waterLevelSix', methodType: 'hget', field: 'struc' + strucId }))
      }
   }, [strucId])

   return <div className='super-screen-body'>
      <div className='super-screen-card left'>
         <Left_1 />
         <div className='card-item' style={{ height: '55%', minWidth: 350 }}>
            <CardTitle title='水泵状态' />
            <div className='card-content'>
               <div style={{
                  width: '100%', height: 40,
                  backgroundImage: 'url(/assets/images/monitor/end.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                  display: 'flex', alignItems: 'flex-end', lineHeight: "40px"
               }}>
                  <div style={{ width: 80, fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic', textAlign: "center" }}>站点</div>
                  <div style={{ fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic', width: "calc(100% - 80px)", textAlign: "center" }}>编号</div>
               </div>
               <SimpleBar
                  style={{
                     // 容器高度
                     maxHeight: 'calc(100% - 50px)',
                  }}
                  // 允许的滚动方向
                  forceVisible="y"
               >
                  {waterPumpStateAll?.map(v => <div style={{
                     display: 'flex', alignItems: 'center', marginTop: 6, width: '100%', height: 36,
                     backgroundImage: 'url(/assets/images/monitor/san-b.png)', backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
                  }}>
                     <div title={v.name} style={{ width: 76, margin: '0 12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', fontFamily: "SourceHanSansCN-Normal", fontStyle: 'italic' }}>{v.name}</div>
                     <div >
                        {v.data?.map((s, i) => <img style={{ width: 20, height: 20, marginLeft: 3 }} src={`/assets/images/number/${[2, 4, 6].includes(s.data[0]?.sMotor_State) ? 'problem' : 'good'}${i + 1}.png`} />)

                        }
                     </div>
                  </div>)}
               </SimpleBar>

            </div>

         </div>

      </div >
      <div className='super-screen-card right'>
         <Right_1 pumpInformation={pumpInformation} setPumpInformation={setPumpInformation} data={information} siteList={siteList} strucId={strucId} setStrucId={setStrucId} setInformation={setInformation} POWER_STATIONS={POWER_STATIONS} />
         <Right_2 depthWater={waterLevelSix} />
      </div>
      <div style={{ width: '40%', height: 30, display: 'flex', justifyContent: 'space-around', position: 'absolute', left: 'calc(30%)', bottom: 30, zIndex: 7 }}>
         <div style={{
            width: 170, height: 30, position: 'relative', textIndent: 50, lineHeight: '30px', color: 'white',
            backgroundImage: 'url(/assets/images/monitor/lower-left.png)',
            backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
         }}>
            <img style={{ width: 40, height: 40, position: 'absolute', left: 12, top: -18, }} src='/assets/images/monitor/pumpPo.png' />
            泵站数量：{siteList?.length || 0}
         </div>
         <div style={{
            width: 170, height: 30, position: 'relative', textIndent: 50, lineHeight: '30px', color: 'white',
            backgroundImage: 'url(/assets/images/monitor/lower-right.png)',
            backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
         }}>
            <img style={{ width: 40, height: 40, position: 'absolute', left: 12, top: -18, }} src='/assets/images/monitor/pumpPP.png' />
            提升泵数量：{pumpNumber || 0}
         </div>
      </div>
   </div >
}

function mapStateToProps (state) {
   const { auth, global, waterLevelSix, waterPumpStateAll } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
      actions: global.actions,
      waterLevelSix: waterLevelSix?.data || [],
      waterPumpStateAll: waterPumpStateAll?.data || [],

   };
}

export default connect(mapStateToProps)(Basis);