import React from 'react';
import styles from './SituationNum.less';

const up1 = require('@/assets/arrow-up.png'); // 红升
const down2 = require('@/assets/arrow-down.png'); // 绿降
const car = require('@/assets/CommandPlatform/dd.png');

class SituationNum extends React.PureComponent {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div className={styles.situationNum}>
        <div className={styles.tit}>
          <img src={car} />
          <div>指挥调度</div>
        </div>
        <div className={styles.situationNumTop}>
          <div className={styles.top1}>今日警情数</div>
          <div className={styles.top2}>
            <div className={styles.num}>
              4
            </div>
            <div className={styles.num}>
              0
            </div>
            <div className={styles.num}>
              3
            </div>
            <div className={styles.num}>
              3
            </div>
          </div>
          <div className={styles.top3}>起</div>
          <div className={styles.top4}>
            <div className={styles.interval}>同比</div>
            <div>环比</div>
          </div>
          <div className={styles.top5}>
            <div>
              <div className={styles.interval}>10</div>
              <div>0</div>
            </div>
            <div>
              <div className={styles.interval}><img src={up1} alt="" /></div>
              <div><img src={up1} alt="" /></div>
            </div>
          </div>
        </div>
        <div className={styles.situationNumBottom}>
          <div>
            <div className={styles.num}>
              <div className={styles.imgs + ' ' + styles.imgs1}></div>
              <div className={styles.font}>
                <div>246</div>
                <div>拥堵</div>
              </div>

            </div>
            <div className={styles.compare}>
              <div>
                <div className={styles.compareFont}>同比</div>
                <div className={styles.compareNum}>
                  <div>10</div>
                  <div><img src={up1} alt="" /></div>
                </div>
              </div>
              <div>
                <div className={styles.compareFont}>环比</div>
                <div className={styles.compareNum}>
                  <div>0</div>
                  <div><img src={up1} alt="" /></div>
                </div>
              </div>
            </div>

          </div>

          <div>
            <div className={styles.num}>
              <div className={styles.imgs + ' ' + styles.imgs2}></div>
              <div className={styles.font}>
                <div>246</div>
                <div>事故</div>
              </div>
            </div>
            <div className={styles.compare}>
              <div>
                <div className={styles.compareFont}>同比</div>
                <div className={styles.compareNum}>
                  <div>10</div>
                  <div><img src={up1} alt="" /></div>
                </div>
              </div>
              <div>
                <div className={styles.compareFont}>环比</div>
                <div className={styles.compareNum}>
                  <div>0</div>
                  <div><img src={up1} alt="" /></div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

export default SituationNum;