This action will force synchronization from 奔跑的面条/react-big-screen , which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
通知:最新的低代码大屏系统GoView已开源,详见:https://gitee.com/MTrun/go-view
一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。
项目需要全屏展示(按 F11)。
项目环境:react^16.2、webpack-4.0、npm-6.13、node-v12.16。
请拉取 master 分支的代码,其余是开发分支。
项目各依赖包版本较低,如有影响请自行升级。
需要其它地图数据的,请查看我的其它项目(有一个地图合集)
友情链接:
项目界面图:
Project
├── mock 模拟数据
├── src
│ │ ├── assets 静态资源
│ │ ├── components 各个模块组件
│ │ ├── models Dva模型管理
│ │ ├── routes 路由主界面定义
│ │ ├── services 异步获取函数
│ │ ├── style 全局样式
│ │ └── utils 工具函数
│ │
│ ├── index.js 主函数文件
│ └── router.jsx 路由定义文件
│
└── .roadhogrc.mock.js 导出模拟数据
需要提前安装好 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 文件使用 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;
}
找到 node_modules 中的 dva 包,修改 lib/index.js。
22 行:
var _createHashHistory = _interopRequireDefault(
require('history').createHashHistory
);
项目运行编译中,端口若出现冲突提示并同意 新端口打开
,可能会有卡死情况发生,需要修改启动端口。在 package.json
中修改命令内容,例如将端口修改为9000:
"start": "set PORT=9000 && roadhog server",
如果需要使用 Hook 而非 Class 编写代码,请先卸载当前react,然后安装支持 Hook 的 React(>=16.8),当前项目是 Dva 脚手架生成的,暂不支持 Hook。
后面可能会请朋友将项目修改为 Hook版本,切一个分支出来,也许会鸽🕊(不要打我)。
QQ群二维码:
这个项目是个人的作品,难免会有问题和 BUG,如果有问题请进行评论,我也会尽力去更新,自己也在前端学习的路上,欢迎交流,非常感谢!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。