/**
 * 指标实时监测
 */
import React from 'react';
import VMTable from '../../../vm-table';
import alarm from '../../imgs/alarm.png';
import normal from '../../imgs/normal.png';

export default function RealtimeMonitor() {
    const columns = [
        {
            title: '监测项目',
            dataIndex: 'type',
            key: 'type',
            width: 100,
            ellipsis: true,
        },
        {
            title: '检测值',
            dataIndex: 'time',
            key: 'time',
            width: 120,
            ellipsis: true,
        },
        {
            title: '欧标',
            dataIndex: 'alarmContent',
            key: 'alarmContent',
        },
        {
            title: '国标',
            dataIndex: 'alarmt',
            key: 'alarmt',
        },
    ];
    const tableProps = {
        height: 160,
        paganitation: false,
        dataSource: [
            { type: '粉尘', time: '13.67mg/Nm³' },
            { type: '粉尘', time: '13.67mg/Nm³' },
            { type: '粉尘', time: '13.67mg/Nm³' },
            { type: '粉尘', time: '13.67mg/Nm³' },
            { type: '粉尘', time: '13.67mg/Nm³' },
            { type: '粉尘', time: '13.67mg/Nm³' },
        ],
    };
    return (
        <div className="df-monitor">
            <div className="df-monitor-head">
                <div className="df-monitor-head-item">
                    <img src={normal} />
                    <div className="df-monitor-head-item-right">
                        <div className="df-monitor-head-item-right-name">一号炉</div>
                        <div className="df-monitor-head-item-right-valueNormal">
                            <span>980</span>℃
                        </div>
                    </div>
                </div>
                <div className="df-monitor-head-item">
                    <img src={alarm} />
                    <div className="df-monitor-head-item-right">
                        <div className="df-monitor-head-item-right-name">一号炉</div>
                        <div className="df-monitor-head-item-right-valueAlarm">
                            <span>980</span>℃
                        </div>
                    </div>
                </div>
                <div className="df-monitor-head-item">
                    <img src={normal} />
                    <div className="df-monitor-head-item-right">
                        <div className="df-monitor-head-item-right-name">一号炉</div>
                        <div className="df-monitor-head-item-right-valueNormal">
                            <span>980</span>℃
                        </div>
                    </div>
                </div>
                <div className="df-monitor-head-item">
                    <img src={normal} />
                    <div className="df-monitor-head-item-right">
                        <div className="df-monitor-head-item-right-name">一号炉</div>
                        <div className="df-monitor-head-item-right-valueNormal">
                            <span>980</span>℃
                        </div>
                    </div>
                </div>
            </div>
            <div className="df-monitor-table">
                <VMTable columns={columns} isIndex={false} rowKey="index" {...tableProps} />
            </div>
        </div>
    );
}
