import React, { useEffect, useState, useMemo } from 'react';
import dynamic from 'next/dynamic';

const Liquid = dynamic(() => import('@ant-design/plots').then(({ Liquid }) => Liquid),
    { ssr: false }
);
const RingProgress = dynamic(() => import('@ant-design/plots').then(({ RingProgress }) => RingProgress),
    { ssr: false }
);

const Progress = dynamic(() => import('@ant-design/plots').then(({ Progress }) => Progress),
    { ssr: false }
);
const Line = dynamic(() => import('@ant-design/plots').then(({ Line }) => Line),
    { ssr: false }
);

import { List, Carousel, Cascader, Skeleton, Spin } from 'antd';
import _ from 'lodash';
import {
    getTimeRate,
    getAbnlException,
    getSevenQualifiedRate,
    getOpByRouterLine,
    getOrganization,
} from '../../../reportUtils/getHomePageData';
import homecss from '../../../styles/homecss.module.css';
function HomePage() {
    let [loading, setLoading] = useState(false);
    // 工厂选择
    let [workShops, setWorkShops] = useState([]);
    // 级联选择框的数据存储
    let [workShopValue, setWorkShopValue] = useState([]);
    // 级联选择工作中心
    let [caWorkCenterCode, setCaWorkCenterCode] = useState('');
    // 级联选择产线
    let [caRouterLineCode, setCaRouterLineCode] = useState('');
    // 水波图，柱形图，环形图
    let [timeRate, setTimeRate] = useState({});
    // 异常消息
    let [abnlException, setAbnlException] = useState({
        equip: [],
        quality: [],
        prodexec: [],
    });
    let [exceptions, setExceptions] = useState([]);
    let [currentExceptions, setCurrentExceptions] = useState([]);
    //存储工序消息
    let [opData, setOpdata] = useState([]);
    // 质量合格率
    let [qualifiedRate, setQualifiedRate] = useState([]);
    // 页面初始化加载
    useEffect(() => {
        getOrganization().then(data => {
            if (data.length > 0) {
                let defaultOrg = {};
                for (let i = 0; i < data.length; i++) {
                    if (
                        data[i]['children'] &&
                        data[i]['children'].length === 0
                    ) {
                        data[i]['isLeaf'] = false;
                    }
                    if (data[i]['defaultWorkCenter']) {
                        defaultOrg = data[i];
                    }
                }
                let defaultOrgValue = [];
                if (defaultOrg['defaultWorkCenter']) {
                    defaultOrgValue.push(defaultOrg['value']);

                    let child = defaultOrg['children'];
                    let flag = true;
                    for (let i = 0; i < child.length; i++) {
                        if (child[i]['defaultRoute'] && flag) {
                            flag = false;
                            defaultOrgValue.push(child[i]['value']);
                        }
                    }
                }
                setWorkShops(data);
                setWorkShopValue(defaultOrgValue);
            }
        });
    }, []);

    useEffect(() => {
        let workCenterCode = '';
        let routerLineCode = '';
        if (workShopValue.length > 0) {
            workCenterCode = workShopValue[0];
            setOpdata([]);
            getTimeRate(workCenterCode).then(data => {
                if (data) {
                    for (let key in data) {
                        if (data[key] == 1 || data[key] == 0) {
                            data[key] = parseInt(data[key]);
                        } else {
                            data[key] = parseFloat(data[key].toFixed(3));
                        }
                    }
                    setTimeRate(data);
                }
            });
            getAbnlException(workCenterCode).then(data => {
                if (data) {
                    let exceptions = {
                        equip: [],
                        quality: [],
                        prodexec: [],
                    };
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].typeException === 'equip') {
                            exceptions['equip'].push(data[i]);
                        } else if (data[i].typeException === 'quality') {
                            exceptions['quality'].push(data[i]);
                        } else {
                            exceptions['prodexec'].push(data[i]);
                        }
                    }
                    setExceptions(data);
                    setCurrentExceptions(data);
                    setAbnlException(exceptions);
                }
            });
            getSevenQualifiedRate(workCenterCode).then(data => {
                if (data) {
                    let rates = [];
                    for (let key in data) {
                        rates.push({
                            month: key,
                            value: data[key],
                        });
                    }
                    setQualifiedRate(rates);
                }
            });

            if (workShopValue.length === 2) {
                setLoading(true);
                routerLineCode = workShopValue[1];
                getOpByRouterLine(routerLineCode).then(data => {
                    setLoading(false);
                    if (data && data.length > 0) {
                        setOpdata(data);
                    } else {
                        setOpdata([]);
                    }
                });
            }
        } else {
            setQualifiedRate([]);
            setOpdata([]);
            setCurrentExceptions([]);
            setExceptions([]);
            setTimeRate({});
            setAbnlException({
                equip: [],
                quality: [],
                prodexec: [],
            });
        }
    }, [workShopValue]);
    const clickException = type => {
        let exceptionData = [];
        if (type === 'all') {
            exceptionData = exceptions;
        } else if (type === 'equip') {
            exceptionData = abnlException['equip'];
        } else if (type === 'quality') {
            exceptionData = abnlException['quality'];
        } else {
            exceptionData = abnlException['prodexec'];
        }
        setCurrentExceptions(exceptionData);
    };
    const factoryChange = (value, selectedOptions) => {
        let currentValue = [];
        if (value) {
            currentValue = value;
        }
        console.log(currentValue);
        setWorkShopValue(currentValue);
    };
    // 用来进行异步加载
    /* const loadData = selectedOptions => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        const { value = '' } = targetOption;
        targetOption.loading = true;
        getRouterLineByFactory(value).then(data => {
            targetOption.loading = false;
            let children = [];
            if (data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    children.push({
                        value: data[i].code,
                        label: data[i].name,
                    });
                }
            }
            targetOption.children = children;
            setWorkShops([...workShops]);
        });
    }; */
    return (
        <div className={homecss['home_page']}>
            <div className={homecss['header']}>
                <div className={homecss['header_title']}>
                    <span className={homecss['title']}>
                        <Cascader
                            className={homecss['header_workshop']}
                            bordered={false}
                            value={workShopValue}
                            suffixIcon={<Triangle />}
                            options={workShops}
                            onChange={factoryChange}
                            changeOnSelect
                            placeholder={'请选择产线'}
                        />
                    </span>
                    <ul className={homecss['equip_state_mark']}>
                        <li>
                            <span style={{ backgroundColor: '#28A3FF' }}></span>
                            生产
                        </li>
                        <li>
                            <span style={{ backgroundColor: '#FAAB0C' }}></span>
                            待产
                        </li>
                        <li>
                            <span style={{ backgroundColor: '#F5222D' }}></span>
                            停产
                        </li>
                    </ul>
                </div>
                <div className={homecss['equip_state_card']}>
                    <Spin tip="Loading..." spinning={loading}>
                        <Skeleton loading={loading} active>
                            <ProcessCard
                                data={opData}
                                rowKey={'code'}
                                workCenterCode={workShopValue}
                                Content={OperationCard}
                            />
                        </Skeleton>
                    </Spin>
                </div>
            </div>
            <div className={homecss['content']}>
                <div className={homecss['content_row']}>
                    <div>
                        <span className={homecss['title']}>时间稼动率</span>
                        <div className={homecss['liquid_parent']}>
                            <div>
                                <WaterWave
                                    color="#5487f3"
                                    stroke="#5487f3"
                                    percent={
                                        timeRate['BY_TIME']
                                            ? timeRate['BY_TIME']
                                            : 0
                                    }
                                />
                                <span className="echart_title">本月</span>
                            </div>

                            <div>
                                <WaterWave
                                    color="#f8ae3c"
                                    stroke="#f8ae3c"
                                    percent={
                                        timeRate['BZ_TIME']
                                            ? timeRate['BZ_TIME']
                                            : 0
                                    }
                                />
                                <span className="echart_title">本周</span>
                            </div>
                            <div>
                                <WaterWave
                                    color="#3ad18c"
                                    stroke="#3ad18c"
                                    percent={
                                        timeRate['JR_TIME']
                                            ? timeRate['JR_TIME']
                                            : 0
                                    }
                                />
                                <span className="echart_title">今日</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span className={homecss['title']}>性能稼动率</span>
                        <div className={homecss['progress_parent']}>
                            <div className={homecss['progress_child']}>
                                <span
                                    className={homecss['progress_child_title']}
                                >
                                    本月
                                </span>
                                <div className={homecss['progress_child_bar']}>
                                    <ProgressBar
                                        config={{
                                            autoFit: true,
                                            percent: timeRate['BY_PERFORMANCE']
                                                ? timeRate['BY_PERFORMANCE']
                                                : 0,
                                            barWidthRatio: 0.3,
                                            color: ['#28A3FF', '#E4E4E4'],
                                        }}
                                    />
                                </div>
                                <span className={homecss['progress_child_val']}>
                                    {timeRate['BY_PERFORMANCE']
                                        ? parseFloat(
                                              (
                                                  timeRate['BY_PERFORMANCE'] *
                                                  100
                                              ).toFixed(2)
                                          ) + '%'
                                        : '0%'}
                                </span>
                            </div>

                            <div className={homecss['progress_child']}>
                                <span
                                    className={homecss['progress_child_title']}
                                >
                                    本周
                                </span>
                                <div className={homecss['progress_child_bar']}>
                                    <ProgressBar
                                        config={{
                                            percent: timeRate['BZ_PERFORMANCE']
                                                ? timeRate['BZ_PERFORMANCE']
                                                : 0,
                                            barWidthRatio: 0.3,
                                            color: ['#FFC760', '#E4E4E4'],
                                        }}
                                    />
                                </div>
                                <span className={homecss['progress_child_val']}>
                                    {timeRate['BZ_PERFORMANCE']
                                        ? parseFloat(
                                              (
                                                  timeRate['BZ_PERFORMANCE'] *
                                                  100
                                              ).toFixed(2)
                                          ) + '%'
                                        : '0%'}
                                </span>
                            </div>
                            <div className={homecss['progress_child']}>
                                <span
                                    className={homecss['progress_child_title']}
                                >
                                    今日
                                </span>
                                <div className={homecss['progress_child_bar']}>
                                    <ProgressBar
                                        config={{
                                            percent: timeRate['JR_PERFORMANCE']
                                                ? timeRate['JR_PERFORMANCE']
                                                : 0,
                                            barWidthRatio: 0.3,
                                            color: ['#17C082', '#E4E4E4'],
                                        }}
                                    />
                                </div>
                                <span className={homecss['progress_child_val']}>
                                    {timeRate['BZ_PERFORMANCE']
                                        ? parseFloat(
                                              (
                                                  timeRate['JR_PERFORMANCE'] *
                                                  100
                                              ).toFixed(2)
                                          ) + '%'
                                        : '0%'}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className={homecss['content_last_col']}>
                        <span className={homecss['title']}>合格率</span>
                        <div className={homecss['ringgraph_parent']}>
                            <div className={homecss['ringgraph_child']}>
                                <CircleProgress
                                    percent={
                                        timeRate['JR_GOODPRODUCT']
                                            ? timeRate['JR_GOODPRODUCT']
                                            : 0
                                    }
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={homecss['footer']}>
                <div className={homecss['footer_row']}>
                    <div>
                        <span
                            className={homecss['title']}
                            style={{ cursor: 'pointer' }}
                            onClick={() => clickException('all')}
                        >
                            今日预警通知
                        </span>
                        <div className={homecss['footer_content']}>
                            <ul className={homecss['footer_statistics']}>
                                <li onClick={() => clickException('equip')}>
                                    <span
                                        className={
                                            homecss['footer_statistics_title']
                                        }
                                    >
                                        设备预警
                                    </span>
                                    <span
                                        className={
                                            homecss['footer_statistics_val']
                                        }
                                        style={{ color: '#f5222d' }}
                                    >
                                        {abnlException['equip'].length}
                                    </span>
                                </li>
                                <li onClick={() => clickException('quality')}>
                                    <span
                                        className={
                                            homecss['footer_statistics_title']
                                        }
                                    >
                                        质量预警
                                    </span>
                                    <span
                                        className={
                                            homecss['footer_statistics_val']
                                        }
                                        style={{ color: '#28A3FF' }}
                                    >
                                        {abnlException['quality'].length}
                                    </span>
                                </li>
                                <li
                                    className={
                                        homecss['footer_statistics_last']
                                    }
                                    onClick={() => clickException('prodexec')}
                                >
                                    <span
                                        className={
                                            homecss['footer_statistics_title']
                                        }
                                    >
                                        生产预警
                                    </span>
                                    <span
                                        className={
                                            homecss['footer_statistics_val']
                                        }
                                        style={{ color: '#17C082' }}
                                    >
                                        {abnlException['prodexec'].length}
                                    </span>
                                </li>
                            </ul>
                            <div className={homecss['footer_tips']}>
                                <List
                                    itemLayout="horizontal"
                                    split={false}
                                    dataSource={currentExceptions}
                                    renderItem={item => (
                                        <List.Item
                                            extra={
                                                <div
                                                    className={
                                                        homecss[
                                                            'footer_tips_time'
                                                        ]
                                                    }
                                                >
                                                    {item.time}
                                                </div>
                                            }
                                        >
                                            <List.Item.Meta
                                                avatar={
                                                    <div
                                                        className={
                                                            homecss[
                                                                'footer_tips_title'
                                                            ]
                                                        }
                                                        style={{
                                                            color:
                                                                item.typeException ===
                                                                'equip'
                                                                    ? '#F5222D'
                                                                    : item.typeException ===
                                                                      'quality'
                                                                    ? '#28A3FF'
                                                                    : '#17C082',
                                                        }}
                                                    >
                                                        {item.typeException ===
                                                        'equip'
                                                            ? '【设备】'
                                                            : item.typeException ===
                                                              'quality'
                                                            ? '【质量】'
                                                            : '【生产】'}
                                                    </div>
                                                }
                                                description={
                                                    <div
                                                        className={
                                                            homecss[
                                                                'footer_tips_content'
                                                            ]
                                                        }
                                                    >
                                                        {item.phenomenonName}
                                                    </div>
                                                }
                                            />
                                        </List.Item>
                                    )}
                                />
                            </div>
                        </div>
                    </div>
                    <div>
                        <span className={homecss['title']}>合格率走势图</span>
                        <div className={homecss['footer_qualified_rate']}>
                            <LineChart data={qualifiedRate} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
const WaterWave = React.memo(props => {
    const { color, stroke, percent } = props;
    let config = {
        autoFit: true,
        liquidStyle: { fill: color },
        percent: percent,
        outline: {
            border: 3,
            distance: 1,
            style: {
                stroke: stroke,
            },
        },
        wave: {
            length: 80,
            count: 3,
        },
        statistic: {
            title: {
                style: {
                    fontFamily: 'PingFangSC-Medium',
                    fontSize: '28px',
                    color: 'rgba(0,0,0,0.85)',
                    textAlign: 'center',
                    lineHeight: '26px',
                    fontWeight: '500',
                },
                formatter: data => {
                    return `${parseFloat((data.percent * 100).toFixed(1))}%`;
                },
                offsetX: 3,
                offsetY: -20,
            },
            content: false,
        },
    };
    return <Liquid {...config} />;
});
const CircleProgress = React.memo(props => {
    const { percent } = props;
    let config = {
        autoFit: true,
        percent: percent,
        color: ['#28a3ff', '#f1f1f1'],
        statistic: {
            title: {
                style: {
                    fontFamily: 'PingFangSC-Medium',
                    fontSize: '14px',
                    color: 'rgba(0,0,0,0.85)',
                    textAlign: 'center',
                    lineHeight: '20px',
                    fontWeight: '400',
                },
                content: '合格率',
                offsetX: 1,
                offsetY: 35,
            },
            content: {
                style: {
                    fontFamily: 'PingFangSC-Medium',
                    fontSize: '24px',
                    color: 'rgba(0,0,0,0.85)',
                    textAlign: 'center',
                    lineHeight: '18px',
                    fontWeight: '500',
                },
                formatter: data => {
                    return `${data.percent * 100}%`;
                },
                offsetX: 3,
                offsetY: -18,
            },
        },
    };
    return <RingProgress {...config} />;
});
const ProgressBar = React.memo(props => {
    const { percent, barWidthRatio, color } = props.config;
    let config = {
        autoFit: true,
        percent: percent,
        barWidthRatio: barWidthRatio,
        color: color,
    };
    return <Progress {...config} />;
});
const LineChart = React.memo(props => {
    let { data = [] } = props;
    const config = {
        autoFit: true,
        smooth: true,
        color: '#2D99FF',
        lineStyle: {
            fill: '#cae5ff',
        },
        yAxis: {
            line: {
                style: {
                    stroke: '#bfbfbf',
                    lineWidth: 1,
                    opacity: 0.75,
                },
            },
            label: {
                formatter: axisValue => {
                    if (axisValue > 0) {
                        return axisValue * 100 + '%';
                    }
                    return axisValue;
                },
            },
        },
        data,
        xField: 'month',
        yField: 'value',
        point: {
            size: 4,
            shape: 'circle',
            style: {
                fill: '#2D99FF',
                stroke: '#2D99FF',
                lineWidth: 1,
            },
        },
        tooltip: {
            formatter: datum => {
                return { name: '合格率', value: datum.value * 100 + '%' };
            },
        },
    };
    return <Line {...config} />;
});
const Triangle = React.memo(() => {
    return (
        <div className="triangle">
            <style jsx>{`
                .triangle {
                    margin-top: 3px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid #000000;
                    border-right: 5px solid transparent;
                    border-left: 5px solid transparent;
                }
            `}</style>
        </div>
    );
});
const ProcessCard = React.memo(props => {
    const spacing = [24, 24];

    const { Content, data, rowKey, workCenterCode } = props;
    const [ruleLength] = useState(5);

    const memoData = useMemo(() => {
        let res = [];
        data.forEach((item, index) => {
            let row = Math.ceil((index + 1) / ruleLength);
            let rowIndex = index % ruleLength;
            if (!res[row]) res[row] = [];
            res[row][rowIndex] = item;
        });
        return res;
    }, [data, ruleLength]);

    return (
        <div className="list-flex">
            {memoData.map((row, rowIndex) => {
                let reverse = rowIndex % 2 > 0;
                return (
                    <div
                        className={`list-flex-row ${reverse ? '' : 'reverse'}`}
                        key={rowIndex}
                    >
                        {row.map(item => {
                            return (
                                <div
                                    className="list-flex-item"
                                    key={item[rowKey]}
                                >
                                    <Content
                                        workCenterCode={workCenterCode}
                                        equipList={item.iotEquipmentVos || []}
                                        title={`${item['code']}-${item['name']}`}
                                    />
                                </div>
                            );
                        })}
                    </div>
                );
            })}

            <style jsx>{`
                .list-flex {
                    overflow: hidden;
                }
                .list-flex-row {
                    display: flex;
                    margin: 0 -${spacing[0] / 2}px;
                }
                .list-flex-row.reverse {
                    flex-direction: row-reverse;
                }
                .list-flex-item {
                    width: ${100 / ruleLength}%;
                    padding: 0 ${spacing[0] / 2}px;
                    margin-bottom: ${spacing[1]}px;
                    position: relative;
                }
                .list-flex-row:last-child .list-flex-item {
                    margin-bottom: 0;
                }
                .list-flex-item::after {
                    content: '';
                    display: block;
                    position: absolute;
                }
                // 右箭头
                .list-flex-row:not(.reverse) .list-flex-item::after {
                    width: 16px;
                    height: 14px;
                    right: 0;
                    left: unset;
                    bottom: unset;
                    top: 50%;
                    transform: translate(50%, -50%);
                    background: url('/img/jt.png') center center no-repeat;
                }
                // 左箭头
                .list-flex-row.reverse .list-flex-item::after {
                    width: 16px;
                    height: 14px;
                    left: 0;
                    right: unset;
                    top: 50%;
                    bottom: unset;
                    transform: translate(-50%, -50%) rotate(180deg);
                    transform-origin: 50% 50%;
                    background: url('/img/jt.png') center center no-repeat;
                }
                // 下箭头
                .list-flex-row .list-flex-item:last-child::after {
                    width: 16px;
                    height: 14px;
                    left: unset;
                    right: 50%;
                    top: unset;
                    bottom: -${(spacing[1] - 14) / 2}px;
                    top: unset;
                    transform: translate(-50%, 100%) rotate(90deg);
                    transform-origin: 50% 50%;
                    background: url('/img/jt.png') center center no-repeat;
                }
                // 无箭头
                .list-flex-row:last-child .list-flex-item:last-child::after {
                    display: none;
                }
            `}</style>
        </div>
    );
});
const OperationCard = React.memo(props => {
    let { equipList = [], title = '', workCenterCode = '' } = props;
    return (
        <div className="operation_card">
            <div className="operation_card_title">
                <span>{title}</span>
            </div>
            <div className="operation_card_content">
                <Carousel autoplay dots={false} autoplaySpeed={10000}>
                    {equipList.map(item => {
                        return (
                            <div key={`${item.equipCode}-${item.equipName}`}>
                                <EquipCard
                                    config={{
                                        status: parseInt(item.runningstatus),
                                        equipCode: item.equipCode,
                                        equipName: item.equipName,
                                        workCenterCode: workCenterCode,
                                    }}
                                />
                            </div>
                        );
                    })}
                </Carousel>
            </div>
            <style jsx>{`
                .operation_card {
                    width: 100%;
                    height: 116px;
                    background: #ffffff;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                    box-sizing: border-box;
                }
                .operation_card_title {
                    width: 100%;
                    height: 35px;
                }
                .operation_card_title > span {
                    display: inline-block;
                    padding: 6px 0 0 16px;
                    fontfamily: PingFangSC-Semibold;
                    fontsize: 14px;
                    color: #000000;
                    fontweight: 600;
                }
                .operation_card_content {
                    width: 100%;
                    height: 81px;
                    box-sizing: border-box;
                    overflow: hidden;
                }
            `}</style>
        </div>
    );
});
const EquipCard = React.memo(props => {
    let { status, equipCode, equipName, workCenterCode } = props.config;
    let title = '';
    let background = '';
    let img = '';
    if (status === 1) {
        title = '待产中';
        background = 'linear-gradient(270deg, #FFDB93 0%, #FAAB0C 100%)';
        img = '/img/dc.png';
    } else if (status === 2) {
        title = '生产中';
        background = 'linear-gradient(270deg, #7AC7FF 0%, #28A3FF 100%)';
        img = '/img/sz.png';
    } else if (status === 3) {
        title = '停产中';
        background = 'linear-gradient(270deg, #FF735F 0%, #F5222D 100%)';
        img = '/img/tc.png';
    }
    return (
        <div
            style={{
                display: 'flex',
                width: '100%',
                height: '81px',
                backgroundImage: background,
                boxSizing: 'border-box',
                cursor: 'pointer',
                borderRadius: '0px 0px 4px 4px',
            }}
            onClick={() => {
                setTimeout(() => {
                    window.parent.postMessage(
                        {
                            path: `/mdgeneric/neusoft_web/runtime/f4c2f3083ec84daca1b6bea7985194cb?workCenterCode=${workCenterCode[0]}`,
                        },
                        '*'
                    );
                }, 0);

                localStorage.setItem('workCenterCode', workCenterCode[0]);
                console.log(workCenterCode[0], '+++++');
            }}
        >
            <div
                style={{
                    position: 'relative',
                    height: '81px',
                    marginLeft: '4%',
                    marginRight: '6%',
                    textAlign: 'center',
                    lineHeight: '75px',
                }}
            >
                <span
                    style={{
                        position: 'absolute',
                        fontFamily: 'PingFangSC-Semibold',
                        fontSize: '12px',
                        color: '#FFFFFF',
                        fontWeight: '600',
                        left: '25%',
                    }}
                >
                    {title}
                </span>
                <img
                    src={img}
                    style={{
                        display: 'inline-block',
                        verticalAlign: 'middle',
                        lineHeight: 'initial',
                    }}
                />
            </div>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    minWidth: '25%',
                    height: '81px',
                    textAlign: 'center',
                }}
            >
                <span
                    style={{
                        display: 'inline-block',
                        padding: '16px 0 6px 0',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        minWidth: '25%',
                        fontFamily: 'PingFangSC-Medium',
                        fontSize: '14px',
                        color: '#FFFFFF',
                        fontWeight: '500',
                    }}
                >
                    {equipName}
                </span>
                <span
                    style={{
                        display: 'inline-block',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        minWidth: '25%',
                        fontFamily: 'PingFangSC-Medium',
                        fontSize: '14px',
                        color: '#FFFFFF',
                        fontWeight: '500',
                    }}
                >
                    {equipCode}
                </span>
            </div>
        </div>
    );
});
export default HomePage;