dq-fms/src/pages/business_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount.js

import {Col, List, Row} from "antd";
import MyCard from "@/pages/business_hiddentrouble/component/MyCard";

const headerList=[
    {
        title:'总隐患数',
        num:'1489',
        data:'12',
        flag:1,
        grow:1,
        backgroundColor:'#E5EEFE',
        color:'#1269FF',
    },
    {
        title:'已整改隐患',
        num:'986',
        data:'12',
        flag:1,
        grow:1,
        backgroundColor:'#D9F8E8',
        color:'#1DCE74',
    },
    {
        title:'整改率',
        num:'86%',
        data:'8',
        flag:2,
        grow:0,
        backgroundColor:'#FFF3E9',
        color:'orange',
    },
    {
        title:'按期整改率',
        num:'89%',
        data:'2',
        flag:3,
        grow:0,
        backgroundColor:'#FFE6E8',
        color:'#FF3E48',
    }
]
const data=[
    {name:'Q3设备故障类隐患',tip:'占比最高',num:'45%'},
    {name:'Q2安全防护隐患',tip:'显著下降',num:'32%'},
    {name:'Q4电器隐患',tip:'持续改善',num:'28%'},
    {name:'全年平均整改周期',tip:'同比缩短',num:'7天'},
]
const TrendAnalysis=()=>{
    return(
        <div style={{backgroundColor:'#fff',padding:'15px'}}>
            <Row gutter={10}>
                <Col span={18}>1</Col>
                <Col span={6}>
                    {data.map((item,index)=>{
                        return(
                            <div style={{display:'flex',justifyContent:'space-between'}}>
                                <div>
                                    <div style={{fontSize:'16px',fontWeight:'500',color:'#333'}}>{item.name}</div>
                                    <div style={{fontSize:'12px',color:'#666666'}}>{item.tip}</div>
                                </div>
                                <div style={{display:'flex',alignItems:'center'}}>
                                    {item.num}
                                </div>
                            </div>
                        )
                    })}
                </Col>
            </Row>
        </div>
    )
}

const HiddenDangerCount=()=>{
    return (
        <>
            <header style={{overflow: 'hidden', marginBottom: '10px'}}>
                <Row gutter={10}>
                    {headerList.map((item, index) => {
                        return <Col span={6}><MyCard {...item}></MyCard></Col>
                    })}
                </Row>
            </header>
            <section style={{overflow: 'hidden', marginBottom: '10px'}}>
                <Row gutter={10}>
                    <Col span={16}>
                        <TrendAnalysis></TrendAnalysis>
                    </Col>
                    <Col span={8}>1</Col>
                </Row>
            </section>
            <footer style={{overflow: 'hidden'}}>
                <Row gutter={10}>
                    <Col span={15}>2</Col>
                    <Col span={9}>2</Col>
                </Row>
            </footer>
        </>
    )
}
export default HiddenDangerCount