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

function DrpReal({ style }) {

  return (
    <PanelBox
      style={style}
      title="出水监测"
      color="green"
      extra={
        <>
          <img  src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
          <img  src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
        </>
      }
    >
      <div style={{color:"#ffffff",padding:'1rem'}}>
        <div style={{display:'flex',marginBottom:'15px'}}>
          <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:'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'}}>7.01</span>m³/h</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"22px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>92.74</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'}}>0.18</span>NTU</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'}}>0.25</span>mg/L</div>
        </div>
        <div style={{display:'flex',marginBottom:'10px'}}>
          <div style={{width:'8.5rem',textAlign:'left'}}>出厂水PH:</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>9.64</span></div>
        </div>
      </div>
    </PanelBox>
  )
}

export default DrpReal;