洪运源码

react-big-screen大数据模板v1.1

react-big-screen是一个基于React、Dva、ECharts、DataV的框架大数据可视化(大屏展示)模板。支持数据动态刷新渲染、屏幕适配、数据mock、局部样式、图表自由替换/复用等功能,保持更新维护。


详情介绍

启动项目

需要提前安装好 nodejs 与 npm,下载项目后在项目主目录下运行 npm install 拉取依赖包,使用命令 npm run start 启动项目,启动项目后需要手动全屏(按 F11)进行查看。

数据请求模拟

项目采用 Dva 自带模拟数据方式,数据放置在 mock 文件夹中,需在 .roadhogrc.mock.js 中进行导出,然后在主文件 index.js 中进行注册。

接口 Api 请求函数写在 services/index.js 中,并由 models/* 文件里 effects 对象的异步函数发起请求,由于在 subscriptions 里对路由进行了监听触发异步函数,所以当打开界面会自动触发对应函数,具体写法请参照 Dva 文档。

请求函数使用 Dva 自带的 utils/request.js 统一使用 Get 请求,默认不支持 POST,需自行修改。

界面获取 mock 数据与 react-redux 写法类似,在 components/* 中使用 connect 高阶函数进行接收并传入各个 Chart 组件当中。

图表组件

图表组件主要使用了 ECharts 和 DataV 可视化框架来进行开发。图表文件在 components/*/charts 中,配置文件在 charts/options.js 里,动态数据由各个 page/index.js 进行接受和导入。ECharts 渲染函数统一封装在了 utils/chart.js 中。

样式编写

样式编写使用了 styled-components 插件,通过样式组件化实现类似 Vue 中的 scoped 功能,界面中的样式不会互相影响,最简单的例子如下:

样式文件 style:


import styled from 'styled-components';

// 生成 div 标签
export const Index = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

使用方式:

import { Index } from './style';

//......

 render() {
   return (
    //  编译之后内容被 div 标签包裹
     <Index> 内容 </Index>
   )
 }


styled-components 还拥有传参、继承、定义属性等功能,如有需要请前往官网深度学习。

全局样式通过 styled-components —> createGlobalStyle 引入到了 router.jsx 中并注册到全局,具体参考下方 icon 引入方式。

icon 文件

icon 文件使用 iconfont 图标,同样使用 styled-components 进行注册,需要多一个处理步骤。

下载 unicode 文件到项目中如 assets/icon,删除多余 demo* 和 iconfont.js。

将 iconfont.css 文件修改后缀为 iconfont.js。

打开 iconfont.css 文件修改为以下格式:

import { createGlobalStyle } from 'styled-components';

// 使用 styled-components 全局注册函数包裹内容并导出
export const Iconstyle = createGlobalStyle`
  @font-face {font-family: "iconfont";
  ......
`
- 与全局样式一样在 `router.jsx` 中进行注册。

屏幕适配

本项目借助了 utils/flexible.js 插件,通过改变 rem 的值来进行适配,原设计为 1920px。 ,适配区间为:1366px ~ 2560px,本项目有根据实际情况进行源文件的更改,小屏幕(如:宽为 1366px)需要自己舍弃部分动态组件进行适配,如'动态文字变换组件'会影响布局,需要手动换成一般节点,

// flexible文件位置: `common/flexible.js`,修改部分如下
function refreshRem() {
  var width = docEl.getBoundingClientRect().width;
  // 最小1366px,最大适配2560px
  if (width / dpr < 1366) {
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
    width = 2560 * dpr;
  }
  // 原项目是1920px我设置成24等份,这样1rem就是80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}


解决 Dva 版本 history 报错的问题

找到 node_modules 中的 dva 包,修改 lib/index.js。
22 行:

var _createHashHistory = _interopRequireDefault(
  require('history').createHashHistory
);


修改启动端口

项目运行编译中,端口若出现冲突提示并同意 新端口打开,可能会有卡死情况发生,需要修改启动端口。在 package.json 中修改命令内容,例如将端口修改为9000:


 "start": "set PORT=9000 && roadhog server",


使用 Hook

如果需要使用 Hook 而非 Class 编写代码,请先卸载当前react,然后安装支持 Hook 的 React(>=16.8),当前项目是 Dva 脚手架生成的,暂不支持 Hook。



项目界面图

react-big-screen大数据模板


react-big-screen大数据模板下载地址

react-big-screen大数据模板v1.1 源码链接:https://www.hycodes.cn/kfkj/3080.html

下载说明:本站部分资源供学习交流使用,如商业用途,请购正版。

上一篇:

下一篇:

返回顶部