[toc]
数睿开放平台的 UI 插件为用户提供应用设计、分析仪、大屏、填报设计等核心模块自定义前端组件的能力。用户运用此能力,可以定制 UI 样式和页面逻辑。
框架集成了以下的功能:
- 本地编辑开发,支持可视化预览。
- 集成打包命令 npm run plugin ,支持一键打包。
- 支持css / less / scss 语言。
- 内置AntD(AntD是一款企业级的UI设计语言和React UI类库)。
- 接口封装,使用proxy 方式代理接口,调用支持开发请求代理。
-
scli方式
- 本地运行cmd命令,打开运行窗口。
- 执行以下命令全局安装sdata-cli服务。
npm i sdata-cli -g
- 安装完成后,运行scli i,选择对应模块及框架
- npm i或者yarn install安装相关依赖项,运行npm run serve(Vue版本)/npm run start(React版本)即可开始进行开发
-
github方式
- 本地下载github仓库https://github.com/Orochi-sx/web-secondary--development
- 切换对应的分支及插件类型,如vue版本的应用插件为vue-version-app
- npm i或者yarn install安装相关依赖项,运行npm run serve(Vue版本)/npm run start(React版本)即可开始进行开发
文件名 | 说明 |
---|---|
config | config文件下内容Webpack 的编译配置,不建议修改。 |
pluginTemp | 用于存放模板文件, config.json 文件用于配置插件参数,其他文件不建议修改。 |
public | public目录下是一些静态文件,不建议修改。 |
scripts | scripts目录下是开发服务器启动和打包脚本,一般不需要改动。 |
src | src 目录下是插件的源码,用户在此目录下开发定制代码。 |
src/api | src/api下的文件是接口层,可以添加自己需要的Http 接口。 |
src/App.js | src/App.js 是插件组件的主文件,用于开发插件的 react 组件。 |
src/index.js | src/index.js 是加载入口,除了构造开发的 mock 数据外一般不需要修改。 |
proxy.js | webpack proxy 配置,在开发时如果需要调用 http 请求,可以在这里配置代理,可以参考示例或者 webpack 官方文档 。 |
参数 | 参数说明 |
---|---|
id | 插件标识,用户在下载插件模板时,系统自动生成,用户无需自定义。 |
type | 开发插件类型,主要包括如下类型: ● analyzer:分析仪; ● app:应用模块; ● bigscreen:数据大屏; ● reporting:填报设计 |
main | 插件打包后生成的上级JS文件名,插件打包时会自动更新此参数,用户无需手动配置。 |
version | 标识插件的版本,目前默认取值为“2”。 |
props | 传递插件自定义相关属性。不同模块的自定义属性不同,请参见数据交互章节讲解。 |
应用,分析仪及大屏页面只有一个主页面文件,通常为App.vue/App.js
填报二开通常有六个文件需要编写,分别为designConfiguration,set,add,child,table,preview
-
designConfiguration
填报配置页面的配置项区域
-
set
填报的配置页面组件展示区域
-
add
填报增删改页面展示
-
child
填报插入字表组件页面展示
-
table
填报在列表页中的展示
-
preview
填报详情页页面展示
定义用户输入
config.json,customconf配置项
接收用户输入
-
react version
this.props.customConfig
-
vue version
this.customConfig
定义用户输入
config.json,vars配置项
接收用户输入
-
react version
this.props.options?.externalVariables
-
vue version
this.options?.externalVariables
定义用户输入
交互-选择变量
接收用户输入
-
vue version
this.customConfig?.variable.default_value
-
react version
this.props.variable?.default_value
定义用户输入
designConfiguration组件
接收用户输入
-
vue version
this.customConfig?.configuration
-
react version
this.props?.customConfig?.configuration
props.datasource
代码中使用props.datasource获取(分析仪独有)
字符串形式
使用JSON.stringify()转化数据
查询资产
调用queryAssetById接口,使用数据图书馆资产
用户配置
通过customConfig.configuration获得(填报独有)
原生js的逻辑控制
//原生的点击事件,鼠标点击的时候,浏览器会触发点击事件(浏览器内部提供),开发者只用书写注册代码即可在用户点击时进行交互
document.addEventListener("click",function(e){
console.log(e.clientX)
})
//EventBus使用register注册事件
EventBus.register(eventName,function(e){
console.log(e)
});
//EventBus使用triggerEvent触发事件,并可对外暴露相关参数
EventBus.triggerEvent(eventName,params)
逻辑控制指的将组件事件与动作开放,通过配置事件触发驱动动作的执行,将配置信息集中存储到事件中心,组件事件触发通知事件中心,事件中心按照配置分发执行组件动作,最终实现完全独立的组件之间建立逻辑通信。例如:下拉框组件的内容改变事件关联Input组件动作的显示隐藏,当下拉框内容改变的时候,通过事件中心,触发Input组件显示隐藏动作。
此处的逻辑控制的对象包括应用、大屏、分析仪、填报。
逻辑控制的流程的关键组件中心和事件中心。注册中心指的是将所有开放的组件事件与动作集中缓存,输出相关API逻辑控制供配置页面获取相关组件配置信息。事件中心指的是通过逻辑控制配置页面保存下来的配置信息,通过统一的查询接口,暂存到事件中心,所有组件的事件触发全部通知到事件中心,由事件中心统一分发,两者相互配合,实现插件的逻辑控制。
//组件挂载完成时,注册对应的事件与动作
const events = [
{
key: "selectedValueChange", name: "过滤条件变化", payload: [
{
key: "selectedValue", name: "过滤条件", dataType: "string"
}
],
}, {
key: "searchValueChange", name: "搜索条件变化", payload: [
{
key: "searchValue", name: "搜索条件", dataType: "string"
}
],
}
];
const actions = [
{
key: "setValue",
name: "设值",
isSupportChild: true, // 是否支持子表(填报组件)
params: [
{
key: "value",
name: "值",
dataType: "string"
},
],
},
{
key: "getValue",
name: "取值",
isSupportChild: true, // 是否支持子表(填报组件)
hasReturn: true,
returns: [
{
key: "value",
name: "值",
dataType: "string"
},
],
}
]
//组件注册
this.props?.customConfig?.componentId && window.componentCenter?.register(this.props?.customConfig?.componentId, "comp", this, {
events, actions
});
//动作声明
do_EventCenter_setValue({ value }) {
this.data = value;
},
//组件销毁
destroyed() {
window?.componentCenter?.removeInstance(this.customConfig.componentId);
}
对应于EventBus的triggerEvent
window.eventCenter?.triggerEvent(this.props?.customConfig?.componentId,"searchValueChange", {searchValue: val})
对应于EventBus的register
smardaten平台 组件的交互页签-逻辑绑定-新增逻辑
对应于EventBus的function
smardaten平台 组件的交互页签-逻辑绑定-新增逻辑-组件动作
接口 | 接口参数说明 | 描述 |
---|---|---|
在组件中心注册组件。 ;需要将组件注册到组件中心,以供逻辑控制配置的时候可以获取到页面中渲染的组件。 |
注册接口: window.componentCenter.register(id, type, ref, eventActionConfig) |
● id:二开插件标识,string类型。 ;● type:固定配置为“comp”。 ;● ref:二开插件组件实例,obj类型。 ;● eventActionConfig:事件/动作的声明文件。 ; |
在组件中心删除组件的注册配置。 ;组件移除时,需要将组件中心收录的组件信息删除。 |
注销接口:window.componentCenter.removeInstance(id) | id:二开插件标识,string类型。 ; |
组件事件触发的时候需要通知事件中心,组件中心获取组件是否注册当前事件的逻辑控制,查询并执行。 | 调用执行接口:window.eventCenter.triggerEvent( id, event, payload) | ● id:二开插件标识。 ;● event:触发的事件名,应与事件的定义相同;● payload: 事件触发返回数据 例:{value: 123 },obj类型。 |
class EventBus {
constructor() {
this.listeners = {};
}
register(eventName, callback) {
this.listeners[eventName] = this.listeners[eventName] || [];
this.listeners[eventName].push({
callback
});
}
triggerEvent(eventName, context) {
let callbacks = this.listeners[eventName] || [];
callbacks.forEach((callbackObj)=>{
let callback = callbackObj.callback
callback.call(null, context);
})
}
clear(){
this.listeners = {};
}
}
export default new EventBus();
- react版本
- 修改proxy.js的target字段为代理地址
- 修改src/api/request.js中document.cookie的token和refreshToken字段为代理地址请求头的相应字段
- npm run start
- vue版本
- 修改vue.config.js的target字段为代理地址,
- 修改src/api/request.js中document.cookie的token和refreshToken字段为代理地址请求头的相应字段
- npm run serve
参数 | 参数说明 |
---|---|
插件名称 | 插件名称。 |
插件类型 | 在下拉列表中选择相应的组件类型。 |
存储目录 | 选择插件的存放目录。 |
是否启动 | 插件是否启动生效。只有设置为“启用”是,插件才可被使用。 |
前端插件包 | 在本地选择需要上传的前端插件包。 |
图标 | 单击“选择图标”,根据需要选择面性或线性类型的图标,并且可以通过配置主题颜色,配置图标的颜色。也可以选择自定义,上传自定义图标,支持的自定义图标格式有jpg、jpeg、png、bmp和svg,且图片的大小不能超过128K。 |
-
新增插件已经上传Smartdata平台
-
登录 Smartdata 平台,单击“应用设计”,进入应用设计模块。
- 单击“新增应用”。
- 选择插件。 二次开发插件显示的名字由开放平台插件名称决定,图标依次取开放平台插件图标和config.json中的img字段。 注意:r3版本自定义插件显示的名字由插件源码里 pluginTemp/config.json 里的 name 字段决定。 应用的二开插件分为3种: 自定义组件、顶栏和菜单插件。
应用二开组件
在顶部插入菜单下,系统组件下拉列表 的最下方找到通过应用插件创建的二次开发组件。
config.json中的props内的type字段为"customize"时,展现为自定义组件。
顶栏二开插件
点击顶栏配置,右侧顶部选择二次开发。
config.json中的props内的type字段为"head"时,展现为顶栏插件。
菜单二开插件
点击菜单配置,右侧顶部选择二次开发。
config.json中的props内的type字段为"navigation"时,展现为菜单插件。
- 单击选择插件,将插件组件加入页面。选中组件,页面右侧会弹出“组件配置”窗口。
- 在窗口中输入外部自定义配置参数。
插件源码里“../pluginTemp/config.json”里的customconf字段决定了用户的配置项。
-
新增插件已经上传Smartdata平台
-
选择新创建的二次开发组件,选择插件,进行数据和显示字段的配置。
-
新增插件已经上传Smartdata平台
-
进入首页,在菜单栏中选择分析仪模块。
- 选择一个目录,随后点进新增或者编辑数据分析仪。
-
填写创建的分析仪名称,开始分析设计。
-
在左侧菜单栏选择想要分析的数据资产,单击新增工作区。
- 拖拽左侧所需要的字段到中间画布区,生成如图所示表格
- 点击其他,选择新创建的二次开发插件
- 点击右侧配置栏,如果插件所需要变量则在这里输入
![](https://img.kancloud.cn/4e/77/4e774c6931707660548ba9b08a1b4858_768x1082.png =591x)
-
新增插件已经上传Smartdata平台
-
在填报设计页选择“插入> 自定义组件”,单击"插入",分别将自定义组件添加到主表与子表中,单击“保存”。
- 打开填报列表页,单击“”新增”。
主表和子表都有自定义组件。
- 单击“保存”。
- 上传二开插件包到验证环境上,写入对应的配置字段即可。基本的功能验证与本地调试基本一致
- events的验证,需要点到二开组件的交互界面,点击相应事件名,添加相应的打印输出逻辑,即可判断事件是否已经接入smardaten平台
- actions验证,可搭建最简单的场景,如一个按钮,点击事件触发对应的动作,看能否正常生效即可。
- 在组件的模板中,预置了一些事件动作相关的函数及定义,请在正式开发中将$\color{red}{用不到的事件与动作清除掉}$,并正确书写
Event_Center_getName
函数的返回值,以防止对配置人员造成困扰。 - 因为二开插件外层布局由配置人员通过平台布局组件实现,四种类型的前端二开组件,除非特殊要求,理论上都应该将最外层的宽高设置为100%。
- 二开组件代码中,如果需要获取dom元素并进行操作,react版本或vue版本都应通过ref去获取dom元素而非通过选择器,以防止组件复用时造成冲突
- 分析仪二开通常对图表类进行二次开发,所以应加上窗口监听事件,并在其中写入图表重绘方法
eg.
let chart= echarts.init(this.refs.chart) window.addEventListener("resize",function(){ chart.resize() })