Devicestatus.jsx

import React, { useState, useMemo } from 'react';
import styles from "./index.less";
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import { DatePicker, Button } from "antd";
import dayjs from 'dayjs';
import AutoTable from '@/components/AutoTable/mtable';
import ReactEcharts from 'echarts-for-react';
import TreeRender from '@/components/TreeRender';
const { RangePicker } = DatePicker;
const statusColors = {
    报警: '#fa4659',
    工作: '#7ac143',
    待机: '#00bce4',
    关机: '#6a737b'
},
    format = 'YYYY-MM-DD HH:mm:ss';
const Devicestatus = ({ drawer }) => {
    const [dateTimeRange, cdate] = useState([dayjs().subtract(24, 'hours').format(format), dayjs().format(format)]),
        [deviceId, cdv] = useState('');
    const device = useRequest(async () => {
        let res = await doFetch({ url: "/lease/umLeaseLedger/querySelectbox", params: {} });
        cdv(res?.data?.dataList?.[0]?.value ?? '');
        return res?.data?.dataList?.map((it) => {
            return {
                title: it.label,
                key: it.value,
                children: []
            }
        }) ?? [];
    }),
        chartdata = useRequest(async () => {
            if (deviceId) {
                let res = await doFetch({ url: "/lease/umLeaseLedger/queryEquipmentStatus", params: { dateTimeRange, id: deviceId } });
                return res?.data ?? {};
            } else {
                return {}
            }

        }, {
            refreshDeps: [dateTimeRange, deviceId]
        });

    const onselecteTree = (selectedKeys, e, alldata) => {
        cdv(e.node.key);
    };

    const options = useMemo(() => {
        let data = chartdata?.data?.data?.datalist ?? [];
        const xAxisData = [];
        const seriesData = [];
        data.forEach((item) => {
            xAxisData.push(item.start);
            xAxisData.push(item.end);
            const statusColor = statusColors[item.status];
            seriesData.push([item.start, item.status, statusColor]);
            seriesData.push([item.end, item.status, statusColor]);
        });

        const option = {
            tooltip: {
                formatter: (params) => {
                }
            },
            xAxis: {
                type: 'category',
                name: '小时',
                boundaryGap: false,
                data: chartdata?.data?.data?.timeList ?? []
            },
            yAxis: {
                type: 'category',
                data: ['报警', '工作', '待机', '关机']
            },
            series: [
                {
                    type: 'line',
                    step: 'start',
                    lineStyle: {
                        width: 2,
                        type: 'dotted'
                    },
                    data: seriesData.map((item) => ({
                        value: [item[0], item[1]],
                        itemStyle: {
                            color: item[2],
                            borderType: 'solid'
                        },
                        symbol:
                            item[2] == '#fa4659'
                                ? 'triangle'
                                : item[2] == '#00fff5'
                                    ? 'rect'
                                    : '',
                        symbolSize: 12
                    }))
                }
            ]
        };
        return option;
    }, [chartdata?.data]);
    return <div style={{ display: "flex", justifyContent: "space-between", position: "relative" }}>
        <div style={{ width: 300, padding: '0 16px', flexShrink: 0 }}>
            <TreeRender dataSource={device?.data} onselected={onselecteTree} noaction={true} isSelectFirst={true} maxWidth={240} />
        </div>
        <div style={{ padding: 16, flex: 1, borderLeft: '1px solid #f0f0f0' }}>
            <div style={{ marginBottom: 30 }}>
                <RangePicker
                    showTime={{
                        format: 'HH:mm:ss',
                    }}
                    format={format}
                    onChange={(val, dateString) => {

                    }}
                    value={dateTimeRange?.length > 0 ? [dayjs(dateTimeRange?.[0]), dayjs(dateTimeRange?.[1])] : []}
                />
                <Button onClick={() => {
                    chartdata.run()
                }} type="primary" style={{ marginLeft: 15 }}>查询</Button>
            </div>
            <div style={{ display: 'flex' }}>
                <div className='statuspage' style={{ flex: 1, marginRight: 30 }}>
                    <AutoTable
                        columns={[
                            {
                                title: '采集时间',
                                dataIndex: 'start',
                                key: 'start',
                                search: false
                            },
                            {
                                title: '采集状态',
                                dataIndex: 'status',
                                key: 'status',
                                search: false
                            },
                        ]}
                        dataSource={chartdata?.data?.data?.datalist?.map((it, i) => {
                            return {
                                ...it,
                                id: i
                            }
                        }) ?? []}
                        resizeable={false}
                        pageextra="none"
                        options={false}
                    />
                </div>
                <div style={{ flex: 2 }}>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 15 }}>
                        {
                            Object?.keys(statusColors)?.map(it => {
                                return <div key={it} style={{ width: '31%', display: 'flex', gap: 16, justifyContent: 'center' }} >
                                    <div style={{ color: statusColors[it] }}>{it}时长</div>
                                    <div>{chartdata?.data?.data?.rateList?.filter(item => item.name == it)?.[0]?.time ?? 0}小时</div>
                                    <div>{chartdata?.data?.data?.rateList?.filter(item => item.name == it)?.[0]?.rate ?? 0}%</div>
                                </div>
                            })
                        }
                        <div style={{ width: '31%', display: 'flex', gap: 16, justifyContent: 'center' }} >
                            <div>总时长</div>
                            <div>{chartdata?.data?.data?.timeRange}小时</div>
                        </div>
                    </div>
                    <ReactEcharts
                        style={{ height: 600, width: '100%' }}
                        option={options}
                    />
                </div>
            </div>
        </div>
    </div>
}
export default Devicestatus;