Antd Pro 后台添加物联网 IoT 设备监控数据大屏幕

Antd Pro 写的物联网 IoT 设备管理后台，需要加上一个所有设备的监控大屏。

入口

• [X] Antd Pro 顶部菜单栏，“监控大屏”，闪烁图标达到醒目的效果
• [X] 左侧菜单，进入

功能模块

基础模板：

http://datav-react.jiaminghi.com/demo/construction-data/index.html

• [X] 修改顶部标题
• [X] 废弃。点击全屏
• [ ] 实时时间
• [ ] 全国地图。飞线图
• [ ] 各种设备数字

全屏组件

https://antd-plus.alitajs.com/components/operation/fullscreen

虽然没用上，但也许以后能用上。

安装 DataV-React

tyarn add @jiaminghi/data-view-react

安装完成后， package.json 新增了一行：

• "@jiaminghi/data-view-react": "^1.2.5",

新建一个 Antd Pro 后台菜单及页面

路由代码：

{
    layout: false,		// false 即进入单独页面，不使用 antd pro 的基础布局
    name: '数据大屏',
    path: '/big_screen',
    component: './BigScreen',
    icon: 'DesktopOutlined',
},

页面代码：

import React, { useState, useRef, useEffect } from 'react';
import { FullScreenContainer } from '@jiaminghi/data-view-react'

const BigScreen: React.FC = () => {
  return (
    <FullScreenContainer>
    </FullScreenContainer>
  );
}

export default BigScreen;

DataV-React 的使用，可以参考这个 Demo 中的代码：

https://github.com/DataV-Team/datav-react.jiaminghi.com/tree/master/demo/construction-data/src/components/datav

DataV-React 设置标题

其实非常简单，把 Demo 中的代码复制过来改改就行了，并没有什么坑。

其他功能模块也一样。

从后台拉取数据

Demo 中的数据都是 random 出来的随机数，所以唯一需要解决的就是数据拉取问题。

以数字行为例，只需要将随机数替换为后台拉取的统计数据。

useEffect(() => {
  createData()
  const timer = setInterval(createData, 30000)
  return () => clearInterval(timer)
}, [])

function createData() {
  let config = getData();
  (async () => {
    let data = await getBigScreenData();
    config[0].number.number = [data.data.TotalDeviceCount, ];
    setData(config)
  })();
}

Antd Pro V5 顶部菜单修改

src/components/RightContent/index.tsx

在这里添加大屏的入口。

import { CompassTwoTone } from '@ant-design/icons';

// some code ...

<span
  className={styles.action}
  onClick={() => {
    window.open('/big_screen');
  }}
>
  <Tag icon={<CompassTwoTone spin twoToneColor="#eb2f96" />} color="processing">
    数据大屏
  </Tag>
</span>

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式