作者:Rise Hao,云智慧前端开发工程师。开源项目数据可视化平台 FlyFish Maintainer。主攻可视化大屏方向,专注工程研发的降本增质、增效,在可视化方面具有丰富的开发经验 。
FlyFish 是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台, 为数据可视化开发场景提供了高效的一站式解决方案。FlyFish提供丰富的组件和应用模板库, 可通过拖拉拽的形式完成数据可视化开发,零开发背景的用户也可完成数据可视化开发工作。 同时,FlyFish也提供了灵活的拓展能力,支持组件开发、自定义函数与全局事件等配置, 面向复杂需求场景能够保证高效开发与交付。
相关文档地址
开始前(准备)
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 是右边的模块配置
数据请求方式(直接在代码中写)
- 仅开发中生效--的模拟数据
- 大屏依然生效--的模拟数据(应用 = 可视化大屏)
- 默认选项,没有数据,但该参数又是必须参数(传递给组件的默认数据)
组件内获取数据
- 获取API请求数据,直接props中获取data
安装依赖(如果组件开发中需要引用某些插件)
FlyFish支持通过Echarts等外部平台开发组件,如有需要可通过引用相关插件的方式去实现。
更新上线
开始进阶(高级)
配置组件之间的事件(不配置不会生效哟)
开始进阶(骨灰级)
默认选项跟随数据进行实时渲染?
重写load方法,因为他可以更新默认的选项 defaultOptions。
/** * 加载数据 * @param {Object=} options 临时加载选项 * @param {function(Array.
配置面板如何根据数据实现联动变化?
在options.js文件写上下面的句子就可以拿到更新之后的数据了。todo(data)
/* * @Author: Rise.Hao * @Date: 2022-05-11 22:53:50 * @LastEditors: Rise.Hao * @LastEditTime: 2022-06-01 21:33:08 * @Description: file content */ 'use strict'; import React from 'react'; import Base from './panel/index.js' import { cloneDeep } from "data-vi/helpers"; import { recursionOptions } from '@cloudwise-fe/chart-panel' import { ComponentOptionsSetting } from 'datavi-editor/templates'; export default class OptionsSetting extends ComponentOptionsSetting { constructor(props) { super(props) } // 可自定义样式: 若您在设置面板中书写样式会抽离出setting.css. // 显式的将以下属性设置为true可告知FlyFish来加载您的样式文件 enableLoadCssFile = true; componentDidMount() { const { component } = this.props; component.bind('draw', () => { this.forceUpdate() }) } componentWillUnmount() { const { component } = this.props; this.computedSettingStyleAppend(true); component.unbind('draw'); } getTabs() { const options = recursionOptions(this.props.options, true) const {component, updateOptions} = this.props; return { config: { label: '配置', content: () =>
, }, } } } - 配置面板应该怎么写?
/* * @Author: Rise.Hao * @Date: 2022-05-29 13:33:05 * @LastEditors: Rise.Hao * @LastEditTime: 2022-06-01 22:00:47 * @Description: file content */ import React from 'react' import { Input, Select, ConfigProvider, InputNumber } from 'antd'; import { ChartProvider, FormItem, FormItemGroup, CollapsePanel, Collapse, ColorPickerInput } from '@cloudwise-fe/chart-panel' export default function Index(props) { const { options, initialValues, onChange } = props; const { lineBackground = [] } = options || {}; const lineFunc = (e, index, key) => { const newLineBackground = lineBackground.map((item, i) => { return i === index ? { ...item, [key]: e } : item }) onChange({ lineBackground: newLineBackground }) } console.log(lineBackground,'<--lineBackground') return
{ lineBackground.map((item, index) => { return lineFunc(e, index, 'background')} value={item.background} gradientMode="gradient" />
有些时候更改了某个配置项而他有没有生效?
比如:参数本身是一个数组又或者是一个对象,这个数组本身就存在,而你此次操作只是给数组里面删除了一个对象,最终没有生效。原因是FlyFish默认执行的setOptions是合并数据而不是更新数据
- 把数组进行字符串处理,让他变成一个值,这样就不是合并了。
- 重写setOptions方法,数组里面有的参数都执行更新操作,没有的执行合并操作。
import { defaultsDeep } from "data-vi/helpers";
/**
* 设置选项
*
* @param {Object} options 选项
* @param {boolean} merge 是否合并原来的选项
* @returns {Component}
*/
setOptions(options = {}, merge = true) {
const { replaceAll, ...mergeOptions } = options;
const replaceKeys = ['lineBackground'];
// 魔改一下部分结果处理
if (replaceAll) {
this.options = mergeOptions;
} else if (merge) {
let cloneOption = defaultsDeep({}, mergeOptions, this.options);
if (replaceKeys.find((v) => typeof mergeOptions[v] !== 'undefined')) {
cloneOption = {
...cloneOption,
...mergeOptions,
};
}
this.options = cloneOption;
} else {
this.options = defaultsDeep({}, mergeOptions, this.getDefaultOptions());
}
确保在所有组件加载完成后自动执行一个trigger方法?
useEffect(() => {
if (!nowdata) return;//nowdata是请求后端返回来的数据
if (parent && parent.screen) {
const allComponent = parent.screen.getComponents();
const lastComponent = allComponent[allComponent.length - 1];
if (lastComponent.mounted) {
parent.trigger('add', { id: currentItem, value: nowdata })
} else {
lastComponent.bind("mounted", () => {
parent.trigger('add', { id: currentItem, value: nowdata })
lastComponent.unbind("mounted");
})
}
}
}, [nowdata])
我这个组件怎么去更改别的组件的默认选项?(谨慎操作)
const compontentList = this.props.component.screen.getComponents()
compontentList.forEach((item)=>{
//这里可以做判断对那个组件进行操作
item.setConfig({
visible: true
})
}
建议不带 get 的 static?
// 默认配置 static defaultConfig = {};
getDefaultConfig() {
return defaultsDeep({}, this.constructor.defaultConfig, {
width: 100,
height: 100,
index: 0,
left: 0,
top: 0,
name: '',
visible: true,
class: ''
});
}
输入框和FlyFish的事件冲突?
// 禁止冒泡掉
const bubblingFunc= (event)=>{
event.stopPropagation();
}
事件可以在组件里面直接写好了!
// 注册事件
registerComponentEvents("id", "DEFAULT_VERSION", {
onChange: "变更",
onValueChange: "值变更",
});
// 注册action
registerComponentAction("id", "DEFAULT_VERSION", "changeValue", ReactCompont);
call(component, "changeValue", ...args);
// ReactCompont;
export default (props) => (
);
静态文件从根目录取绝对路径的该如何设置?
import { DEFAULT_VERSION } from "data-vi/components";
import config from "data-vi/config";
const componentStaticDir = props.parent.getVersion() == null || props.parent.getVersion() === DEFAULT_VERSION ? "components" : "release";
const link = `${config.componentsDir}/${props.parent.getType()}/${props.parent.getVersion() || DEFAULT_VERSION}/${componentStaticDir}/public`;
//webpack.config.production.js文件
const CopyPlugin = require("copy-webpack-plugin");
plugins: [
new CopyPlugin( [
{ from: path.resolve(__dirname, '../') + '/src/ModelRotates/public', to: path.resolve(__dirname, '../') + '/components/public/', },
]),
]
//安装依赖
"copy-webpack-plugin": "5.1.1"
组件内需要自己写请求?
import { getHttpData } from 'data-vi/api';
import { componentApiDomain } from 'data-vi/config';
const getMapdata = (name) => {
getHttpData(componentApiDomain + `/atlas/info?location=${encodeURIComponent(name)}`, 'GET', {})
.done((request) => {
console.log('请求成功', request)
setNowdata(request.data)
})
.fail((request, xhr, msg) => {
console.log('失败了')
});
}
比如跳转大屏如何根据url实现数据变更?
function preDisposeParams(params) {
let sumParams = window.location.search ? window.location.search.split('?')[1] : '';
let eachParams = sumParams.split('&')[1] || '';
let systemCode = eachParams.split('=')[1] || '';
let jsonParams ={
"systemCode":systemCode
}
console.log(sumParams,"-",eachParams,"-",systemCode)
return jsonParams; }
整张大屏内如何使用字体?【后期可能会更改】
- 示例组件
/**
* 钩子方法 组件mount挂载时调用
*/
_mount() {
const container = this.getContainer();
console.log(this.getType(),this.getVersion(),'123')
const componentStaticDir =
this.getVersion() == null || this.getVersion() === DEFAULT_VERSION ? "components" : "release";
const link = `${config.componentsDir}/${this.getType()}/${
this.getVersion() || DEFAULT_VERSION
}/${componentStaticDir}/assets`;
container.html(`
`);
}
开发完成
点击预览,查看效果是否满足,并简单自测是否有BUG
导出已完成的可视化大屏
部署上线
componentApiDomain = 请求后端数据的ip地址
如果nginx代理没有从根目录配置则需要更改
标准流程 tengine部署
- 修改前端部署包配置文件
- 新建前端部署文件夹 web(/data/web/ tengine部署中都以该文件夹为例)
- 将前端包文件screen.zip拷贝到该目录下
- 解压命令:unzip screen.zip
- 修改/data/app/sxdl_web/config/env.production.js
- 修改/data/tengine/conf/vhost/路径 (tengine部署目录为/data/tengine)
- 修改/data/app/sxdl_web/index.html (浏览器刷新文本)
- 修改/data/app/sxdl_web/config/env.conf.json (浏览器页签文本)
- 重启tengine服务 /data/app/tengine/sbin/nginx -s reload
- 前端访问地址
nginx部署
- 修改前端部署目录xxxx/config/env.production.js配置文件
- 配置文件: env.production.js:{ componentApiDomain:后端接口地址 }
- 部署环境nginx 注意:大屏前端配置的端口不可以和其他服务的前端的端口冲突
- 首先备份/nginx/conf下的nginx.conf
编辑nginx.conf
重启ngnix /sbinx下 ./ngnix -t //检查配置文件nginx.conf的正确性 ./ngnix -s reload //重新载入配置文件
上传screen.zip file.dir: /var/www/html 将解压后screen.zip文件放入该目录(先清空html文件夹)
备注:如果没有相同的路径,则随便找个路径放文件就行
- 解压screen.zip文件
- 修改/var/www/html/env.production.js文件 \修改配置文档: env.production.js
- 修改配置后,重启nginx
项目运行地址: 服务器地址+’/index.html’
(注:前端本次用FlyFish开发页面,直接打出包,git上无仓库)
下载源码
前缀:http://10.0.16.230:7001/appli...
演示样例,真实链接会根据FlyFish本地的地址变化
- 大屏的ID
最终下载地址(演示样例,非真实地址):http://10.0.16.230:7001/appli...
注:前缀 + 大屏ID = 下载地址(请谨慎频繁调用)
Echarts配置及导出(如有下载失败,请更换版本号):https://www.npmjs.com/package...
- 安装依赖: yarn 或 npm install
- 启动项目:yarn dev 或 npm run dev
- 再次编译:yarn build 或 npm run build