实现的三个界面（首页，空间，关于）

任务：复现空间项目的部分界面（一期）

进度：已完成

三个界面，计划时间2周，实际耗时（除请假）：6天正式员工一般耗时：1-2天任重而道远，，，

项目地址：https://github.com/XJQ124/Space365Test

1、关于如何从后台获取数据

我之前所有的练习都是提前准备好的死数据，没怎么通过后台拿过之前也有了解过，但是接触不深

这里以下面这种情况为例。这是空间统计的请求函数以及数据结构

请求函数：this.transportLayer.getRoomSummary

返回结构说明：
{
  "roomNum": 30, //空间总数
  "usedRoomNum": 0, // 空闲数
  "unusedRoomNum": 30, // 使用率
  "usedRate": "0%" // 使用数
}

1.1 首先导入该发请求的文件

import AppContext from '../AppContext'

1.2 在主函数中声明一个方法，引入该方法

function Home() {
    const transportLayer = AppContext.instance.transportLayer;

后续数据的获取都是通过这个方法

1.3 如何获取数据且展示出来

首先通过异步函数获取到数据声明一个变量

    const fetchData = async () => {
        try {
            const responseRoom = await transportLayer.getRoomSummary();

然后设置useState，使其可以在标签中渲染出来。

const [roomSummary, setRoomSummary] = useState({});

当你实际上使用的时候，只需要在标签中通过roomSummary调用就行

<div className='card-number'>{roomSummary.roomNum || '加载中...'}</div>

这部分算是我对异步函数的一个理解吧，总的来说不难

2、过程中遇到的难点

2.1 关于设备报警数/故障数/报修数 (近一个月)的横坐标的取值问题

因为接口返回的数据是Unix的时间格式，且返回的数据是一大堆，这里需要自己去定义开始和结束时间（begin，end）

我们来看看这边定义的一个格式(前人已经写好)

    // 按时间范围(近一个月)统计报警/故障/报修总数
    async getAcrTotalGroup(begin, end) {
        let response = await this.client.get(`/v2/statistics/acr/total?group=time&begin=${begin}&end=${end}`);
        return response.data;
    }

我这边需要根据业务需求计算开始和结束时间


    // 近一个月的开始时间和结束时间的时间戳
    // const begin = moment().subtract(1, 'M').startOf('D').unix() // 2024-2-18 00:00:00
    // const end =  moment().subtract(1,'d').endOf('D').unix(); // 2024-3-17 23:59:59
    const begin = moment().subtract(1, 'month').unix();
    const end = moment().unix();

上面注释掉的方法其实是一个比较好的方法，但是我为了和样本显示效果一样，选择了获取一个月前的当前时间和现在时间

然后把这两个参数传给getAcrTotalGroup（）

        const responseAcrTotalGroup = await transportLayer.getAcrTotalGroup(begin, end);

当然我还设置存储这个数据的State const [deviceAcrTotalGroup, setDeviceAcrTotalGroup] = useState([])

如何就是使用这个数据

const DeviceDangerNum = () => {
        //名字的数据映射
        const nameMap = {
            'alarm': '报警',
            'repair': '报修',
            'crash': '故障'
        };
        const deviceDangerNumData = deviceAcrTotalGroup.map(item => ({
            count: item.count,
            date: moment.unix(item.date).format('DD日'),
            name: nameMap[item.name],
        }));
        const config = {
            isGroup: true,
            data: deviceDangerNumData,
            xField: 'date',
            yField: 'count',
            seriesField: 'name',
            legend: { position: 'bottom' },
        };
        return <Column {...config} />;
    }

这是就是该柱状图的配置文件

实际的显示效果如图

2.1 表格当中数据的渲染

下面的这个表格，如何获取数据，因为表格的数据比较麻烦，这里的话我用一列来举例

还是先定义一个状态存数据const [deviceAlarms, setDeviceAlarms] = useState([]) 一样的请求函数由于只拿一页的20条数据，所以参数部分进行一个限制 const responseAlarms = await transportLayer.getAlarms({ page: 1, size: 20 }); setDeviceAlarms(responseAlarms.docs); 后面的数据调用都只用deviceAlarms 然后开始就用antd的组件

定义一个列

    const AlarmColumns = [
        {
            title: '序号',
            dataIndex: '1',
            key: '1',
            align: 'center',
            render: (text, record, index) => (
                <span style={{ fontWeight: 'bold' }}>{index + 1}</span>
            )
        },

然后这是我的Table组件

<Table
                    columns={AlarmColumns}
                    bordered
                    dataSource={deviceAlarms}
                    pagination={false}
                    size='small'>
                </Table>

3、改善的部分

原始的持续时间部分，其实排序是没有做好的我进行了优化首先计算出这个设备发生故障到被处理的这个持续时间

const durationTime = (record) => {
    const createdAt = moment.unix(record.createdAt);
    const closedAt = record.closedAt ? moment.unix(record.closedAt) : moment();
    const duration = moment.duration(closedAt.diff(createdAt));
    const days = duration.days();
    const hours = duration.hours();
    const minutes = duration.minutes();
    const seconds = duration.seconds();
    let durationString = '';
    if (days > 0) {
        durationString += `${days}天 `;
    }
    if (hours > 0) {
        durationString += `${hours}小时 `;
    }
    if (minutes > 0) {
        durationString += `${minutes}分钟 `;
    }
    if (seconds > 0 || durationString === '') {
        durationString += `${seconds}秒`;
    }
    if (durationString === '') {
        durationString = '0秒';
    }
    return durationString;
}

然后用表格组件的sorter熟悉进行排序

    sorter: (a, b) => {
                const durationA = moment.duration(moment.unix(a.createdAt).diff(a.closedAt ? moment.unix(a.closedAt) : moment()));
                //获取a的总秒数
                const secondsA = durationA.asSeconds();
                const durationB = moment.duration(moment.unix(b.createdAt).diff(b.closedAt ? moment.unix(b.closedAt) : moment()));
                //获取b的总秒数
                const secondsB = durationB.asSeconds();
                return secondsA - secondsB;
            },

现在的话已经可以进行正常的时间排序了

这是关于首页部分的总结，后续还有一篇空间界面的总结

XJQ124 / Some-notes