You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
作者:Rise Hao,云智慧前端开发工程师。开源项目数据可视化平台 FlyFish Maintainer。主攻可视化大屏方向,专注工程研发的降本增质、增效,在可视化方面具有丰富的开发经验 。
相关文档地址
FlyFish官方开发文档
YAPI数据模拟文档
开始前(准备)
FlyFish平台在线地址
创建项目(整体项目名称)
开始上手(初级)
选择要开发的应用(可视化大屏)
选择适合的基础组件
选择当前项目下的组件(如果有的话...)
开始开发(中级)
有类似的项目组件(但是仍需要进行定制化的)
添加定制化项目组件(如果基础组件不具备满足你当前的需求)
项目组件开发,选择刚刚创建好的项目组件、点击开发组件
代码结构
build/webpack.config.dev.js
组件开发阶段保存对组件进行 webpack 编译打包扩展配置文件,具体请参考更改组件编译配置
#build/webpack.config.production.js
组件导出阶段对组件进行 webpack 编译打包扩展配置文件,具体请参考更改组件编译配置
#package.json
组件信息和依赖,具体请参考添加组件依赖
#options.json
组件开发底部的组件预览大屏的预设,具体请参考增加组件开发大屏预设
#src/main.js
组件注册入口,组件开发会自动产生此文件,如务必要不需要更改。具体请参考注册组件
#src/Component.js
组件代码文件,仅支持原生 Javascript 进行开发,请参考开发组件。如使用 react 开发,请参考React 开发组件
#src/setting.js
组件设置区域注册入口,组件开发会自动产生此文件,如组件有需要开发自定义配置和数据绑定,请打开此文件内注释掉的注册内容
#src/setting/options
组件设置区域组件,需使用 react 开发,具体请参考增加组件配置
#src/setting/data
组件设置数据区域组件,需使用 react 开发,具体请参考增加组件数据配置
是否需要配置模块
1 是右边的数据请求,2 是右边的模块配置
数据请求方式(直接在代码中写)
组件内获取数据
安装依赖(如果组件开发中需要引用某些插件)
FlyFish支持通过Echarts等外部平台开发组件,如有需要可通过引用相关插件的方式去实现。
更新上线
开始进阶(高级)
设置大屏(官方文档)
事件(官方文档)
组件之间传递事件
组件之间接收事件
收到了组件传递过来的事件则会自动执行你的自定义
配置组件之间的事件(不配置不会生效哟)
函数(官方文档)
自定义函数,常见的用法是提供给大屏的事件使用。
全局数据集(官方文档)
全局数据集可以给多个组件使用
开始进阶(骨灰级)
默认选项跟随数据进行实时渲染?
配置面板如何根据数据实现联动变化?
配置面板应该怎么写?
有些时候更改了某个配置项而他有没有生效?
比如:参数本身是一个数组又或者是一个对象,这个数组本身就存在,而你此次操作只是给数组里面删除了一个对象,最终没有生效。原因是FlyFish默认执行的setOptions是合并数据而不是更新数据
确保在所有组件加载完成后自动执行一个trigger方法?
我这个组件怎么去更改别的组件的默认选项?(谨慎操作)
建议不带 get 的 static?
输入框和FlyFish的事件冲突?
事件可以在组件里面直接写好了!
静态文件从根目录取绝对路径的该如何设置?
组件内需要自己写请求?
比如跳转大屏如何根据url实现数据变更?
整张大屏内如何使用字体?【后期可能会更改】
开发完成
点击预览,查看效果是否满足,并简单自测是否有BUG
导出已完成的可视化大屏
部署上线
componentApiDomain = 请求后端数据的ip地址
如果nginx代理没有从根目录配置则需要更改
iplpadImgDir的路径 = ./ (/data/app需要根据nginx代理的具体路径来配置)
components的路径= /data/app/components (/data/app需要根据nginx代理的具体路径来配置)
标准流程 tengine部署
nginx部署
上传screen.zip file.dir: /var/www/html 将解压后screen.zip文件放入该目录(先清空html文件夹)
解压screen.zip文件
修改/var/www/html/env.production.js文件 \修改配置文档: env.production.js
修改配置后,重启nginx
项目运行地址: 服务器地址+’/index.html’
下载源码
前缀:http://10.0.16.230:7001/applications/export-source/演示样例,真实链接会根据FlyFish本地的地址变化
大屏的ID
最终下载地址(演示样例,非真实地址):http://10.0.16.230:7001/applications/export-source/62134fbaddc0c8314cd3be30
安装依赖: yarn 或 npm install
启动项目:yarn dev 或 npm run dev
再次编译:yarn build 或 npm run build
Beta Was this translation helpful? Give feedback.
All reactions