import CircleCharts from './CircleCharts';
import styles from './index.less';
import LineCharts from './LineCharts';
const SecurityCqi = () => {
  return (
    <div className={styles.container}>
      <div className={styles.cqi}>
        <div className={styles.tag}>安全态势</div>
        <div className={styles.warp}>
          <div className={styles.textWarp}>整体安全指数</div>
          <div className={styles.cqiWarp}>
            <div className={styles.count}>95.6</div>
            <div className={styles.status}>城市运行良好</div>
          </div>
        </div>
      </div>

      <div className={styles.lineChartsWarp}>
        <LineCharts
          data={[]}
          style={{
            width: 410,
            height: 160,
          }}
        />
      </div>

      <div className={styles.progress}>
        <CircleCharts style={{ width: 150, height: 150 }} data={70} />
      </div>
      <div className={styles.warningWarp}>
        <div className={styles.warnItem}>
          <div className={styles.count}>4187</div>
          <div className={styles.label}>监测预警</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count}>4187</div>
          <div className={styles.label}>处置中</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count} style={{color:'rgb(35, 194, 255)'}}>87</div>
          <div className={styles.label}>已处置</div>
        </div>
      </div>
    </div>
  );
};
export default SecurityCqi;
