云服务器内容精选

  • 操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时,开发者可以自定义组件包,并上传到AstroZero中。自定义组件包上传到AstroZero中后,可在高级页面中使用。自定义组件的开发流程如下: 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板,在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库,并在高级页面中使用。
  • 编辑自定义组件 登录DataArts Insight管理控制台。 单击管理控制台左上角的,选择区域。 单击开发者平台,进入开发者平台管理界面。 单击操作列的“编辑”,进入编辑组件界面。编辑相关参数,确认无误,单击“确定”。 编辑后的自定义组件需要重新发布。 表1 自定义组件参数说明 参数 描述 状态 有三种状态:开发中、待发布、已发布,不同的状态使用不同的颜色标记。 开发中(灰色):注册了组件但未上传开发包。 待发布(蓝色):上传了开发包组件信息,但是组件还未发布。 已发布(绿色):表示自定义组件已发布,用户可以在大屏/仪表板组件列表中查看并使用该组件。 说明: 不发布自定义组件,大屏/仪表板组件列表不显示创建的自定义组件。 已发布的自定义组件,编辑信息确认后,即使手动改回去,发布按钮也会由置灰变为高亮。 如果开发包删除,组件不能发布。 编辑组件需要重新发布。 开发包 开发包的状态:待上传、已上传。 待上传:注册了组件但未上传开发包。 已上传:开发包已上传。 是否显示 显示:组件默认状态,当组件发布后,可以在组件列表里看到该组件。 隐藏:在组件列表中隐藏,隐藏后的组件在大屏/仪表板自定义列表中不可见。 说明: 隐藏已发布后的组件,已经使用该组件的大屏/仪表板不受影响,隐藏后的组件在大屏/仪表板自定义列表中不可见。
  • 组件使用静态数据 AstroCanvas通过调用组件定义的getMockData,来获取默认静态数据。 getMockData() { const seviceWaterLevel = this.$t('setting.seviceWaterLevel'); const seviceLoad = this.$t('setting.seviceLoad'); return [ { x: '00:00', y: 11.69, s: seviceWaterLevel, }, { x: '02:30', y: 17.46, s: seviceWaterLevel, }, { x: '05:00', y: 28.57, s: seviceWaterLevel, }, { x: '07:30', y: 12.7, s: seviceWaterLevel, }, { x: '10:00', y: 18.99, s: seviceWaterLevel, }, { x: '12:30', y: 3.7, s: seviceWaterLevel, }, { x: '15:00', y: 18.52, s: seviceWaterLevel, }, { x: '17:30', y: 23.81, s: seviceWaterLevel, }, { x: '20:00', y: 10.58, s: seviceWaterLevel, }, { x: '22:30', y: 15.82, s: seviceWaterLevel, }, { x: '24:00', y: 3.76, s: seviceWaterLevel, }, { x: '00:00', y: 5.69, s: seviceLoad, }, { x: '02:30', y: 12.46, s: seviceLoad, }, { x: '05:00', y: 18.57, s: seviceLoad, }, { x: '07:30', y: 25.7, s: seviceLoad, }, { x: '10:00', y: 13.99, s: seviceLoad, }, { x: '12:30', y: 9.7, s: seviceLoad, }, { x: '15:00', y: 20.52, s: seviceLoad, }, { x: '17:30', y: 28.81, s: seviceLoad, }, { x: '20:00', y: 15.58, s: seviceLoad, }, { x: '22:30', y: 19.82, s: seviceLoad, }, { x: '24:00', y: 9.76, s: seviceLoad, }, ]; }, 配置数据数据时,下图中的“静态数据”选项即为静态数据,支持直接在线编辑静态数据。 图3 静态数据
  • 多数据集 部分组件可能存在使用多个数据源的情况,例如地图组件可能存在多个图层,相应配置可以如下: propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],
  • 组件交互面板配置 event:组件的交互相关配置。 示例如下: "event": { "eventConfig": [ { "type": "select" } ] } Event为key:value形式的对象,其中key值为交互事件名称定义,value值为交互事件的相关配置,具体如下: 表9 event value参数说明 参数 是否必选 参数类型 描述 eventConfig 是 Arrary 交互配置,值为数组。 表10 eventConfig参数说明 参数 是否必选 参数类型 说明 type 是 select、drive、link select:允许组件在交互面板里通过交互编辑的方式定义交互事件,该事件和drive、link类型不支持同时配置。 isMultivalue:值为true时,操作符只能为“in”,适用于多选下拉。值为false时,操作符包括“=”、“≠”“﹥”等,适用于单选下拉。如图4所示,此时isMultivalue值为true。 说明: select、isMultivalue只支持大屏,不支持仪表板。 drive:允许组件在交互面板里配置联动,和select类型不支持同时配置。 link:允许组件在交互面板里配置跳转。 图3 type为select的交互入口 图4 type为select的示例 图5 type为link和drive示例
  • 组件数据面板配置 dataSlot:组件的数据面板槽位相关配置。 示例如下: 1 2 3 4 5 6 7 8 9 "data": { "version": "2.0" "dynamicData": { "slots": [...], "filter": true, "sort": true }, } 表5 dataSlot参数说明 参数 是否必选 参数类型 描述 version 是 “2.0” 值固定为“2.0”。 slots 是 Slot[] 数据面板中的数据配置区域,参考slots参数说明。 filter 是 Boolean 数据面板中是否展示过滤槽位。 sort 是 Boolean 数据面板中是否展示排序槽位。 图2 组件数据面板 dataSlot配置示例 示例中dataSlot参数如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 "dataSlot": { "version": "2.0", "dynamicData": { "slots": [ { "areaId": "area_value", "label": "度量槽位", "rule": { "maxColNum": 1, "mimColNum": 0, "needAggregator": true } } ], "filter": true, "sort": true } }, 其中slots为槽位的定义如下: 表6 slots参数说明 参数 是否必选 参数类型 描述 areaId 是 String 数据槽位类型,可选值参考AreaId说明。 label 是 String 数据槽位展示名称。 rule 否 Object 配置数据槽位规则和限制,参考rule说明。 AreaId说明 AreaId标识数据面板槽位类型,AreaId值如下: 表7 AreaId值说明 值 描述 area_column 列槽位,支持维度和度量。 area_type 维度槽位,只能拖拽维度字段。 area_value 度量槽位,只能支持度量字段。 area_color 颜色图例槽位,只支持维度,用于对数据进行分类。 rule说明 rule为数据面板槽位规则信息,rule参数说明如下: 表8 rule值说明 值 是否必选 类型 描述 minColNum 否 Number 数据面板槽位最少需要的字段个数。 maxColNum 否 Number 数据面板槽位最多支持的字段个数。 dataType 否 String[] 支持的字段类型,可选值为“STRING”、“DATE”、“NUMBER”,不配置该字段则默认为匹配AreaId对应的类型。AreaId说明。 typeErrorTip 否 String 向数据面板槽位拖拽字段类型和槽位不匹配时的提示内容。
  • 组件样式配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 "style": [ { "label": "全局样式", "labelId": "global_style", "isExpand": true, "children": [ { "label": "字体大小", "name": "fontSize", "type": "number", "min": 12, "max": 32, "value": 12 }, { "label": "字体粗细", "name": "fontWeight", "type": "select", "options": [ { "key": "Normal", "value": "normal" }, { "key": "Bold", "value": "bold" } ], "value": "normal" }, { "label": "颜色", "name": "color", "type": "color", "value": "#ffffff" } ] } ], Style参数为数组形式,其中每个数据元素将形成一个样式配置项,每个数据元素还能包含相关的子配置项,最多支持两层,具体参数说明如下: 表2 Style参数说明 参数 是否必选 参数类型 描述 label 是 String 配置项标签名称。 isExpand 否 Boolean 是否展开子配置项。 true:展开。 false:不展开。 name 是 String 配置项key值,用户在命名时要注意唯一性(只限于当前组件)。 配置项的其他属性参数 否 - 不同UI类型具有不同的属性参数,请参见UI类型介绍。 children 否 Array of children object 配置项所拥有的子配置项,如下图所示全局样式下包含字体和颜色等配置。 表3 children参数说明 参数 是否必选 参数类型 描述 label 是 String 子配置项标签名称。 type 是 String 样式配置输入框类型,DataArts Insight开放的UI类型请参见UI类型介绍。 name 是 String 子配置项key值,用户在命名时要注意唯一性(只限于当前组件)。 value 是 String | Number 子配置项样式取值。 子配置项的其他属性参数 是 - 不同UI类型具有不同的属性参数,请参见UI类型介绍。 示例如下所示: 图1 style示例 表4 样式面板示例说明 区域编号 描述 1 对应字段isExpand。 2 对应字段label。 3 对应字段type,此处type分别为number、select、color类型。
  • 操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时,开发者可以自定义组件包,并上传到AstroZero中。自定义组件包上传到AstroZero中后,可在高级页面中使用。自定义组件的开发流程如下: 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板,在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库,并在高级页面中使用。
  • 场景描述 本节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。如图1所示,页面中主要包含标签栏和详情展示两部分,通过切换标签栏来控制详情展示中的内容。 图1 页面示例 在页面开发中,通过两个自定义组件(标签页组件、详情展示组件)实现上述场景,其中标签页组件包含产品类别(手机、笔记本、平板等),详情展示组件用于展示不同产品类别的图片信息。两个组件通过事件和动作机制实现交互,在标签页组件中注册标签切换事件,此事件绑定详情展示组件中切换产品图片的动作。 本节使用的示例组件开发过程中使用了前端开发框架Vue及组件库Element。
  • 组件使用数据集 数据集实例获取。 组件代码中可使用如下API,来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('SelectDataConnector') || '' 调用数据集,获取数据。 thisObj.callFlowConn( this.ConnectorInsTabel, connParam, getFlowCallTabel); 例如,调用了dmax_line这个数据集,返回值如下图所示: 图1 返回值 这个数据因为键值名称并不是label、value,所以并不能渲染。此时需要一层映射,例如将city映射到label上,将code映射到value上。但是每次这个映射都不固定,需要交给用户自行配置,所以提出了映射的概念,即mapping。 图2 映射 由用户自己决定将什么字段拖拽映射到什么字段。例如,将city字段映射到了“选项标签展示值”字段,即label中,将code字段映射到了“选项值”字段,即value中。 [{ "city": "斗罗大陆", "pid": "null", "code": 0, "hasChildren": "true", "bool": 1 }, { "city": "武魂殿", "pid": 0, "code": 11111, "hasChildren": "true", "bool": 1 }] 映射后结果: [{ "label": "斗罗大陆", "pid": "null", "value": 0, "hasChildren": "true", "bool": 1 }, { "label": "武魂殿", "pid": 0, "value": 11111, "hasChildren": "true", "bool": 1 }] 组件在获取数据时,获取到的是经过映射转换的数据,可以直接使用label、value等固定字段。
  • 组件使用静态数据 AstroCanvas通过调用组件定义的getMockData,来获取默认静态数据。 getMockData: function () { return { "dataValue": [ { "label": "周六", "value": "Sunday" }, { "label": "周日", "value": "Monday" }, { "label": "周一", "value": "Tuesday" } ] }; } 配置数据数据时,下图中的“静态数据”选项即为静态数据,支持直接在线编辑静态数据。 图3 静态数据
  • 多数据集 部分组件可能存在使用多个数据源的情况,例如地图组件可能存在多个图层,相应配置可以如下: propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],
  • 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时,默认组件需要对接数据集。配置示例如下: propertiesConfig: [{ type: 'dataSetting', name: 'selectDataConnector', mapping: { label: { keyTitle: { zh_CN: '选项标签展示值', en_US: 'Option label' }, limitNumber: '1', type: 'any', }, value: { keyTitle: { zh_CN: '选项值', en_US: 'Option value' }, limitNumber: '1', type: 'any', required: true, }, }, }, }] 表1 数据集字段说明 字段 类型 是否必填 示例 说明 type String 是 type: "dataSetting" dataSetting为数据集类型。 mapping Object 否 mapping 数据集数据拖拽的配置项。 name String 是 selectDataConnector 数据集实例的唯一标识。 表2 mapping字段说明 字段 类型 是否必填 示例 说明 type String 是 type: "value" 根据type校验拖入字段,为枚举值。 value: 数字 dateString: 日期 catacary: 任意字符 numberOrString: number或者String类型 keyTitle Object 是 keyTitle: { zh_CN: "X轴数据", en_US: "X axis Data" } 标题,需要国际化。 limitNumber String 否 type: '1' 拖拽字段个数限制。 1:只能拖拽一个字段。 1+:可以拖拽多个字段。 required Boolean 否 required: true 是否必须配置。
  • 场景描述 本节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。如图1所示,页面中主要包含标签栏和详情展示两部分,通过切换标签栏来控制详情展示中的内容。 图1 页面示例 在页面开发中,通过两个自定义组件(标签页组件、详情展示组件)实现上述场景,其中标签页组件包含产品类别(手机、笔记本、平板等),详情展示组件用于展示不同产品类别的图片信息。两个组件通过事件和动作机制实现交互,在标签页组件中注册标签切换事件,此事件绑定详情展示组件中切换产品图片的动作。 本节使用的示例组件开发过程中使用了前端开发框架Vue及组件库Element。