import React from 'react';
import { Card, Result } from 'antd';
import styles from './OnlineMonitoring.less';

import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';



const OnlineMonitoring = () => {
    return (
        <div className={styles.Econtainer}>
            <div className={styles.EcontainerTop}>
                <div className={styles.EcontainerTopLeft}>
                    <div className={styles.EcontainerTopLeftTop}>
                        <div className={styles.alarmO}>
                            <div className={styles.alarmOLeft}>
                                <img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
                            </div>
                            <div className={styles.alarmORight}>
                                <div className={styles.alarmORightText1}>总报警</div>
                                <div className={styles.alarmORightText2}>1456</div>
                                <div className={styles.alarmORightText3}>
                                    <div>
                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
                                    </div>
                                    <div>
                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className={styles.alarmTw}>
                            <div className={styles.alarmTwLeft}>
                                <img style={{ width: 58, height: 47 }} src={alarm1} alt='alarm1' />
                            </div>
                            <div className={styles.alarmTwRight}>
                                <div className={styles.alarmTwRightText1}>一级报警</div>
                                <div className={styles.alarmTwRightText2}>357</div>
                                <div className={styles.alarmTwRightText3}>
                                    <div>
                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
                                    </div>
                                    <div>
                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className={styles.alarmTh}>
                            <div className={styles.alarmThLeft}>
                                <img style={{ width: 58, height: 47 }} src={alarm2} alt='alarm2' />
                            </div>
                            <div className={styles.alarmThRight}>
                                <div className={styles.alarmThRightText1}>二级报警</div>
                                <div className={styles.alarmThRightText2}>401</div>
                                <div className={styles.alarmThRightText3}>
                                    <div>
                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
                                    </div>
                                    <div>
                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className={styles.alarmF}>
                            <div className={styles.alarmFLeft}>
                                <img style={{ width: 58, height: 47 }} src={alarm3} alt='alarm3' />
                            </div>
                            <div className={styles.alarmFRight}>
                                <div className={styles.alarmFRightText1}>三级报警</div>
                                <div className={styles.alarmFRightText2}>556</div>
                                <div className={styles.alarmFRightText3}>
                                    <div>
                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
                                    </div>
                                    <div>
                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.EcontainerLeftBottom}></div>
                </div>
                <div className={styles.EcontainerRight}></div>
            </div>
            <div className={styles.EcontainerBottom}></div>
        </div>
    );
};

export default OnlineMonitoring;