//领导驾驶舱
'use strict';

import Left from './left';
import Right from './right';
import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, message, Button, Input } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import '../style.less'
const Leader = (props) => {
    const {actions,dispatch, globalTab, } = props
    const {bigScreen}=actions
    const [centerData,setCenterData]=useState({})
    const centerFontStyle={
        fontSize:'1.2rem',
        fontStyle:'italic', 
        color:'#E5F1FF',
        fontFamily: '思源黑体',

    }
    const centerNumFontStyle={
    fontSize:'2rem',
    // color:'#6eece9',
    fontStyle:'italic',
    paddingLeft:'0.5rem'
}
    useEffect(()=>{
        const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
        dispatch(bigScreen.getCenterData({projectId:structArr.toString()})).then(res=>{
            if(res.success){
                setCenterData(res.payload.data)
            }
        })
    },[])
    return <>
        <div style={{ display: 'flex', justifyContent: 'space-between',position:'relative' }}>
            <Left></Left>
            <Right></Right>
        </div>
        <div style={{position:'absolute',top:'-10rem',left:'27rem',}}>
                <img src='/assets/bigScreen/center.webp' style={{display:'inline-block' ,width: '64.47rem', height: '62.3125rem'}}></img>
        </div>
        <div style={{position:'absolute',top:'14.6rem',left:'37rem',}}><span style={{...centerFontStyle}}>设备总数</span><span style={{...centerNumFontStyle,color:'#6eece9',}}>{centerData.deviceCount}</span></div>
        <div style={{position:'absolute',top:'10.5rem',left:'45rem',}}><span style={{...centerFontStyle}}>发现问题</span><span style={{...centerNumFontStyle,color:'rgb(204 193 84)',}}>{centerData.questions}</span></div>
        <div style={{position:'absolute',top:'12.5rem',left:'56.5rem',}}><div style={{...centerNumFontStyle,height:'2.5rem',color:'#6eece9',textAlign:'center'}}>{centerData.records}</div> <span style={{...centerFontStyle}}>累计巡检数</span></div>
        <div style={{position:'absolute',top:'10.5rem',left:'67.5rem',}}><span style={{...centerFontStyle}}>出具报告数</span><span style={{...centerNumFontStyle,color:'#6eece9',}}>{centerData.reportCount}</span></div>
        <div style={{position:'absolute',top:'14.6rem',left:'75rem',}}><span style={{...centerFontStyle}}>处理故障数</span><span style={{...centerNumFontStyle,color:'rgb(47 229 9)',}}>{centerData.handleCount}</span></div>

    </>





}


function mapStateToProps(state) {
    const { auth, global, device } = state;
    return {
        clientHeight: global.clientHeight,
        actions: global.actions,
    };
}

export default connect(mapStateToProps)(Leader)