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

function DrpReal({ style }) {

  return (
    <PanelBox
      style={style}
      title="供水数据概览"
      color="green"
    >
      {/* <img  src='/assets/供水数据概览.jpg' style={{width:'419.81px', height:'200px',marginLeft:'1px'}}/> */}
      <div style={{color:"#ffffff",padding:'1rem'}}>
        <div style={{display:'flex',marginBottom:'10px'}}>
          <div style={{width:'6rem',textAlign:'center'}}>供水量</div>
          <div style={{width:'12rem',textAlign:'center'}}>取水量</div>
          <div style={{width:'9rem',textAlign:'center'}}>原水达标率</div>
          <div style={{width:'9rem',textAlign:'center'}}>出厂水达标率</div>
        </div>
        <div style={{display:'flex',marginBottom:'0px'}}>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"0"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>27463</span>m³</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"10px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>38745</span>m³</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"50px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>76</span>%</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"30px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>89</span>%</div>
        </div>
      </div>
      <div style={{color:"#ffffff",padding:'1rem'}}>
        <div style={{display:'flex',marginBottom:'10px'}}>
          <div style={{width:'6rem',textAlign:'center'}}>耗电量</div>
          <div style={{width:'12rem',textAlign:'center'}}>漏损率</div>
          <div style={{width:'9rem',textAlign:'center'}}>设备运行率</div>
          <div style={{width:'9rem',textAlign:'center'}}>紧急事件</div>
        </div>
        <div style={{display:'flex',marginBottom:'20px'}}>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"0"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>8562</span>kwh</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"25px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>2.9</span>%</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"40px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>98.2</span>%</div>
          <div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"40px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>2</span>个</div>
        </div>
      </div>
    </PanelBox>
  )
} 

export default DrpReal;