import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {SafetyRateData} from './data';
import { OverFlowText } from 'amos-framework';
class SafetyRate extends Component {
  render() {
    return (
      <div className='safety-rate-view common-margin daily-title'>
        <div className='daily-title-content'>安全指数 TOP10</div>
        <div className='top-ten-content'>
        {
          SafetyRateData.map((item,index)=>
            <div className='top-ten-item' key={index}>
              <OverFlowText>
                <p style={{ width: '80px' }}>{item.name}</p>
              </OverFlowText>
              <div className='top-ten-item-middle'>
                <div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
              </div>
              <div className ='top-ten-item-bottom'>
                <span>{item.value}</span>
                </div>
            </div>
          )
        }
        </div>
      </div>
    );
  }
}

SafetyRate.propTypes = {};

export default SafetyRate;
