import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';

function DrpReal({ style }) {

  return (
    <PanelBox
      style={style}
      title="进水监测"
      color="green"
      extra={
        <>
          <img  src={process.env.PUBLIC_URL+'/assets/镇下拉.jpg'} style={{width:'100px', height:'30px',marginRight:'10px'}}/>
          <img  src={process.env.PUBLIC_URL+'/assets/水厂切换.jpg'} style={{width:'165px', height:'20px',marginRight:'5px'}}/>
        </>
      }
    >
      <div style={{color:"#ffffff",padding:'1rem'}}>
        <div style={{display:'flex',marginBottom:'20px'}}>
          <div style={{width:'9rem',textAlign:'center'}}></div>
          <div style={{width:'6rem',textAlign:'center'}}>瞬时流量</div>
          <div style={{width:'9rem',textAlign:'center'}}>今日进水量</div>
        </div>
        <div style={{display:'flex',marginBottom:'20px'}}>
          <div style={{width:'8.5rem',textAlign:'left'}}>进水凉桥村:</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>6.37</span>m³/h</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"22px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>89.23</span>m³</div>
        </div>
        <div style={{display:'flex',marginBottom:'10px'}}>
          <div style={{width:'8.5rem',textAlign:'left'}}>原水浊度:</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>231.28</span>NTU</div>
        </div>
      </div>
    </PanelBox>
  )
}

export default DrpReal;