import CustomCard from '../../components/CustomCard';
import styles from './index.less';
import IndustryWiget from './IndustryWiget';
import WarnWiget from './WarnWiget';
const IndustryWarn = () => {
  const ql = [
    {
      icon: require('@/assets/images/SecurityServiceOverview/qiaoliang.png'),
      name: '桥梁',
      count: 15,
    },
    {
      icon: require('@/assets/images/SecurityServiceOverview/qiaoliang.png'),
      name: '道路',
      count: 15,
    },
    {
      icon: require('@/assets/images/SecurityServiceOverview/qiaoliang.png'),
      name: '人为损坏',
      count: 15,
    },
    {
      icon: require('@/assets/images/SecurityServiceOverview/qiaoliang.png'),
      name: '维护作业',
      count: 15,
    },
  ];
  return (
    <div className={styles.container}>
      <CustomCard
        title="道路桥梁"
        width={353}
        height={356}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={<div className={styles.riskCount}>风险源数&nbsp;3333</div>}
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {ql?.map((item) => {
              return <IndustryWiget data={item} />;
            })}
          </div>
          <div>
            <WarnWiget />
          </div>
        </div>
      </CustomCard>
    </div>
  );
};
export default IndustryWarn;
