收藏！0基础开源数据可视化平台FlyFish大屏开发指南

作者：Rise Hao，云智慧前端开发工程师。开源项目数据可视化平台 FlyFish Maintainer。主攻可视化大屏方向，专注工程研发的降本增质、增效，在可视化方面具有丰富的开发经验 。

FlyFish 是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台， 为数据可视化开发场景提供了高效的一站式解决方案。FlyFish提供丰富的组件和应用模板库， 可通过拖拉拽的形式完成数据可视化开发，零开发背景的用户也可完成数据可视化开发工作。 同时，FlyFish也提供了灵活的拓展能力，支持组件开发、自定义函数与全局事件等配置， 面向复杂需求场景能够保证高效开发与交付。

相关文档地址

开始前（准备）

  1. FlyFish平台在线地址
  2. 创建项目（整体项目名称）查看是否有当前正要做的项目添加当前项目（如果没有当前项目，有则忽略）添加应用（可视化大屏）浏览是否有满足UI设计的基础组件（UI：可视化大屏组件样式）

开始上手（初级）

  1. 选择要开发的应用（可视化大屏）

  1. 选择适合的基础组件拖入可视化大屏内需要摆放的位置，去选择合适的配置满足UI的需求，如果仅通过配置项无法满足当前组件与UI的要求，可自定义CSS，添加css名字（会添加到当前组件的最外层，并在全局样式内进行自定义）请求数据的方式
  1. 选择当前项目下的组件（如果有的话...）

开始开发（中级）

  1. 有类似的项目组件（但是仍需要进行定制化的）复制此组件，并起一个新的名字编辑此组件信息，添加到当前项目
  1. 添加定制化项目组件（如果基础组件不具备满足你当前的需求）

  1. 项目组件开发，选择刚刚创建好的项目组件、点击开发组件

  1. 代码结构

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. 是否需要配置模块

1 是右边的数据请求，2 是右边的模块配置

  1. 数据请求方式（直接在代码中写）仅开发中生效--的模拟数据大屏依然生效--的模拟数据（应用 = 可视化大屏）默认选项，没有数据，但该参数又是必须参数（传递给组件的默认数据）
  1. 组件内获取数据获取API请求数据,直接props中获取data获取默认选项
  1. 安装依赖（如果组件开发中需要引用某些插件）

FlyFish支持通过Echarts等外部平台开发组件，如有需要可通过引用相关插件的方式去实现。

  1. 更新上线

开始进阶（高级）

  1. 设置大屏
  2. 事件

组件之间传递事件 第一个箭头传递给某个组件事件以及参数 第二个箭头可以直接触发某个组件的数据请求组件之间接收事件

  1. 函数

自定义函数，常见的用法是提供给大屏的事件使用。

  1. 全局数据集（官方文档）全局数据集可以给多个组件使用

开始进阶（骨灰级）

  1. 默认选项跟随数据进行实时渲染？

重写load方法，因为他可以更新默认的选项 defaultOptions。

    /**     * 加载数据     * @param {Object=} options 临时加载选项     * @param {function(Array.)=} onSuccess 加载完成回调     * @param {function(string)} onError 加载失败回调     * @returns {Component}     */    load(options = {}, onSuccess = null, onError = null) {      if (this.hasDataSource()) {        if (isFunction(options)) {          /* eslint-disable no-param-reassign */          onError = onSuccess;          onSuccess = options;          options = {};          /* eslint-enable no-param-reassign */        }        // 加载数据事件        this.trigger('load');        this.dataSource.load(          options,          (data) => {            call(onSuccess, this, data);            let opt = this.getOptions()            const { lineBackgroundDefault, lineBackground } = opt;            const newLineBackground = data.dataList.map((_,i) => lineBackground[i] || lineBackgroundDefault);            // 数据加载完成事件            console.log(newLineBackground, '<--data')            this.trigger('loaded', data);            this.setOptions({lineBackground: JSON.parse(JSON.stringify(newLineBackground))})            this.draw(data);          },          onError        );      }      return this;    }

  1. 配置面板如何根据数据实现联动变化？
在options.js文件写上下面的句子就可以拿到更新之后的数据了。
/* * @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: () => ,      },    }  }}
  1. 有些时候更改了某个配置项而他有没有生效？ 
比如：参数本身是一个数组又或者是一个对象，这个数组本身就存在，而你此次操作只是给数组里面删除了一个对象，最终没有生效。原因是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());    }
  1. 确保在所有组件加载完成后自动执行一个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])
  1. 我这个组件怎么去更改别的组件的默认选项？(谨慎操作)
const compontentList = this.props.component.screen.getComponents()compontentList.forEach((item)=>{//这里可以做判断对那个组件进行操作    item.setConfig({      visible: true    })}
  1. 建议不带 get 的 static？
// 默认配置static defaultConfig = {};getDefaultConfig() {    return defaultsDeep({}, this.constructor.defaultConfig, {        width: 100,        height: 100,        index: 0,        left: 0,        top: 0,        name: '',        visible: true,        class: ''    });}
  1. 输入框和FlyFish的事件冲突？
// 禁止冒泡掉const bubblingFunc= (event)=>{    event.stopPropagation();}
  1. 事件可以在组件里面直接写好了！
// 注册事件registerComponentEvents("id", "DEFAULT_VERSION", {    onChange: "变更",    onValueChange: "值变更",});// 注册actionregisterComponentAction("id", "DEFAULT_VERSION", "changeValue", ReactCompont);call(component, "changeValue", ...args);// ReactCompont;export default (props) => (    );
  1. 静态文件从根目录取绝对路径的该如何设置？
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"
  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('失败了')      });  }
  1. 比如跳转大屏如何根据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; }
  1. 整张大屏内如何使用字体？【后期可能会更改】 示例组件
/**     * 钩子方法 组件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(`              `);    }
开发完成
  1. 点击预览，查看效果是否满足，并简单自测是否有BUG
  1. 导出已完成的可视化大屏
部署上线
  1. componentApiDomain = 请求后端数据的ip地址
  1. 如果nginx代理没有从根目录配置则需要更改
  • iplpadImgDir的路径 = ./ (/data/app需要根据nginx代理的具体路径来配置）
  • components的路径= /data/app/components (/data/app需要根据nginx代理的具体路径来配置）
  1. 标准流程 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 前端访问地址
  1. 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                                     //重新载入配置文件 
  1. 上传screen.zip file.dir: /var/www/html 将解压后screen.zip文件放入该目录(先清空html文件夹) 备注：如果没有相同的路径，则随便找个路径放文件就行
  2. 解压screen.zip文件
  3. 修改/var/www/html/env.production.js文件 修改配置文档： env.production.js
  4. 修改配置后,重启nginx
  5. 项目运行地址： 服务器地址+’/index.html’
前端本次用FlyFish开发页面，直接打出包，git上无仓库
下载源码
  1. 前缀：http://10.0.16.230:7001/applications/export-source/
演示样例，真实链接会根据FlyFish本地的地址变化
  1. 大屏的ID
  1. 最终下载地址（演示样例，非真实地址）：http://10.0.16.230:7001/applications/export-source/62134fbaddc0c8314cd3be30 
注：前缀 + 大屏ID = 下载地址（请谨慎频繁调用） 
Echarts配置及导出：https://www.npmjs.com/package/@cloudwise-fe/chart-panel（如有下载失败，请更换版本号）
  1. 安装依赖: yarn 或 npm install
  2. 启动项目：yarn dev 或 npm run dev
  3. 再次编译：yarn build 或 npm run build






展开阅读全文



页面更新：2024-05-23



标签：数据   数组   路径   组件   选项   加载   事件   地址   文件   基础   收藏   指南   项目   平台





1
2
3
4
5







	

		

		
		

		

			

			
最适合大学生的Java毕业设计项目-基于Java+Spring+mybatis

			

			

			前言介绍：以往的 酒店管理系统 相关信息管理，都是工作人员手工统计。这种方式不但时效性低，而且需要查找和变更的时候很不方便。随着科学的进步，技术的成熟，计算机信息化也日新月异的发展， 如今 计算机已经进入了人类社会发
			

		

	

	

		

		
		

		

			

			
日本又一相机巨头走向终结，奥林巴斯的百年浮沉

			

			

			2018年5月7日，继无锡尼康、深圳三星关闭工厂后，日本百年光学巨头奥林巴斯，也关闭了位于中国的最后一家工厂。当深圳最高负责人小松享通过广播将这令人感到遗憾的消息公之于众时，很多前几天才刚刚接到涨薪通知的员工们都一
			

		

	

	

		

		
		

		

			

			
长城汽车高层变动：王凤英申请辞去总经理职务，穆峰接任

			

			

			每经记者：段思瑶 每经编辑：孙磊一直以来，王凤英被视为长城汽车的“二把手”。如今，她申请辞去长城汽车总经理的职务。7月24日晚间，长城汽车（SH601633，股价33.84元，市值3115亿元）发布公告称，公司董事会收到王凤英的书面辞职报告，
			

		

	

	

		

		
		

		

			

			
通胀之下，拉美可能重蹈“失去的十年”覆辙

			

			

			【导读】世界许多国家的通胀水平飙升源于美国的某些政策决定，其中紧邻美国的拉美国家受影响尤其严重。上世纪80年代前后，美联储超预期加息叠加美国经济衰退，导致拉美陷入“失去的十年”。与当时的情形相比，拉美国家已大幅
			

		

	

	

		

		
		

		

			

			
昌江积极落实国有房屋减免租金政策 助力商户渡难关

			

			

			小微企业和个体工商户是经济增长的“推进器”和社会稳定的“调节器”，在转变经济发展方式、优化产业结构升级、促进就业等方面发挥重要作用。受疫情等因素影响，部分小微企业和个体工商户面临越来越多的生存困境。为贯彻
			

		

	

	

		

		
		

		

			

			
超40%养老目标基金规模不足1亿 24.1%的产品累计净值小于1

			

			

			21世纪资管研究院研究员 杨希2022年4月21日,国务院办公厅发布《关于推动个人养老金发展的意见》（以下简称《意见》），确定了我国个人养老金制度的参加范围、制度模式等，标志着探讨多年的养老金第三支柱建设有了实质性进展，
			

		

	

	

		

		
		

		

			

			
关注 - 一汽“旗智· iM”论坛举行 红旗今年销量增速要达到行业1.5倍

			

			

			文：懂车帝原创 李德喆[懂车帝原创 行业] 7月24日-25日，2022中国一汽第二届先进制造技术“旗智· iM”高端论坛在吉林长春举行。本届论坛重点围绕绿色制造、智慧制造两大技术，重点展示了中国一汽的数十项创新成果。2022中
			

		

	

	

		

		
		

		

			

			
河南工业年中“成绩单”：电子信息表现优异，汽车行业“拖后腿”

			

			

			顶端新闻·河南商报讯(记者 郝瑞铃)7月27日上午，河南省工业2022年年中“成绩单”出炉。记者从河南省人民政府新闻办公室了解到，2022上半年，河南省多数行业实现平稳增长，40个行业大类中31个实现正增长，增长面近八成。高技术
			

		

	

	

		

		
		

		

			

			
7.27山东地炼汽柴油油价最新消息，今年油价再下调

			

			

			  今年油价再下调！今年油价再下调！今年油价再下调！（重要的事情说三遍）从昨天24点开始，今年油价再下调，这是我国在2022年第四次下调油价。根据这一时期国际成品油价格的变化，按照现行成品油价格形成机制。国内汽柴油每吨分别降
			

		

	

	

		

		
		

		

			

			
80多家中企被威胁“摘牌”！赴美上市的中企，越来越不安全了

			

			

			　　文 | 华商韬略 霍怡　　7月26日，阿里发布的公告中称：董事会已授权管理层向港交所申请新增香港为主要上市地，完成审核程序后，阿里巴巴将在港交所和纽交所两地双重主要上市。　　发布公告后，截至午间收盘，阿里巴巴港股大
			

		

	

	

		

		
		

		

			

			
华为正式发布HarmonyOS 3

			

			

			7月27日晚间，在华为HarmonyOS 3及华为全场景新品发布会上，华为正式发布HarmonyOS 3操作系统。华为终端BG首席运营官何刚表示，HarmonyOS 3超级终端支持包括打印机、智能眼镜、车机在内的12种智能设备组合协同，除手机外，智慧
			

		

	

	

		

		
		

		

			

			
大基建时代来了！谁为民生之福在奋斗？

			

			

			“要想富，先修路！”，正如这句流传极广的话所说，像道路交通这样的基建项目早已是国家创新发展的重器，不仅有利于经济增长，也是重大的民生福音。乘着国家基建大国的东风，各地基建投资也已经按下“加速键”。这其中商机源源不断
			

		

	

	

		

		
		

		

			

			
国产EDA工具领军企业，华大九天：不可或缺，国产替代势不可挡

			

			

			（报告出品方/分析师：国金证券 赵晋 孟灿 樊志远）一、EDA 软件行业：不可或缺的设计工具，国产替代势不可挡 1、EDA 软件：集成电路设计与生产不可或缺的支撑 EDA（Electronic Design Automation，电子设计自动化）是利用计算机辅助设
			

		

	

	

		

		
		

		

			

			
电子病历行业龙头，嘉和美康：多业务增速亮眼，规模效应逐步体现

			

			

			（报告出品方/分析师：中国银河证券 吴砚靖 邹文倩）一、电子病历快速普及+存量升级，带动全院信息化建设 （一）政策持续推动，电子病历升级空间仍然较大 近年来，电子病历在政策驱动下快速普及，占医疗信息化市场的比例逐年提升。2018
			

		

	

	

		

		
		

		

			

			
美国到底有没有进入衰退？

			

			

			这个话题，在月初的一篇文章《海外离“衰退”有多远》里讨论过。彼时的数据，美国6月ISM制造业PMI大幅减速。制造业PMI环比下跌3.1pct，跌至53%；新订单PMI下跌5.9pct、跌破荣枯线；就业（-2.3pct）、供应商交付（-8.4pct）、订单库存（-5
			

		

	


上滑加载更多 ↓






	

	
推荐阅读：


	

		

			

			
最适合大学生的Java毕业设计项目-基于Java+Spring+myb

			

		

	


	

		

			

			
那些神仙句子，建议收藏（关键词，伞）

			

		

	


	

		

			

			
活久见！这台iPhone13Pro Max整机报告几乎全是异常数据

			

		

	


	

		

			

			
17种常用中成药功效大全，建议收藏备用，从此疾病上门也不

			

		

	


	

		

			

			
专访标普全球评级首席经济学家：前瞻指引时代“谢幕”？就

			

		

	


	

		

			

			
骁龙8+这种半升级平台往后稍稍，2亿像素CMOS登场

			

		

	


	

		

			

			
iPhone13 Pro最新售价确定，全平台均跌至新低，果粉终于等

			

		

	


	

		

			

			
全新骁龙7系新平台，台积电4nm工艺

			

		

	


	

		

			

			
努比亚z40spro三大平台首销战报！续航略胜苹果13pro max

			

		

	


	

		

			

			
apple watch7再现掉漆门事件

			

		

	


	

	
	

	
友情链接：

	

		
	

	


	

	
更多：

	

		
本站资料均由网友自行发布提供，仅用于学习交流。如有版权问题，请与我联系，QQ：4156828  

		
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com  闽ICP备11008920号-3
闽公网安备35020302034844号

	

	

	




Top