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

更新日期: 2021-10-18 阅读次数: 206 字数: 488 分类: ReactJS

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>

爱评论不评论