本地版酷屏

连接池管理

文件数据源

接口数据源

主题域和主题集

新建主题表

主题集的属性

酷屏管理

快速上手门户

酷屏资源管理器

酷屏中播放视频

直角按钮和tab页签头的联动

子窗口嵌套酷屏

酷屏分辨率自适应屏幕

通过按钮控制可视化报表显示隐藏

走马灯文本纵向滚动

根据模板创建的门户拖入组件

酷屏云试用版到期前数据备份与迁移

指标卡组件添加设置行间距属性

酷屏市场购买的模板/组件的使用方法

酷屏市场购买模板/组件及使用方法2

酷屏内的组件定时刷新

自定义组件

顶(1) 评论(0) 编辑

1. 克隆内置组件并修改

内置组件无法直接编辑，当内置组件开放的属性，或者需要更改内置组件的某些设置，就需要对组件进行克隆然后进行编辑修改，克隆方法如下：

Step1：在大屏编辑页面左侧，组件资源树下的内置组件中找到自己需要的组件，鼠标点击选中


Step2：右键——>克隆


此时内置组件克隆到自定义组件中。在定义组件中克隆也是如上操作。


Step3：克隆完成之后，右键点击克隆的组件——>编辑，即可对组件进行编辑。

2. 制作一个自定义统计图

右键点击自定义组件，或者分组文件——>新建HTML组件，进入到新建组件编辑界面。


组件编辑界面主要分为三个部分，源代码、JS文件、CSS文件

源代码：组件的HTML dom结构
js文件：组件主要的功能实现脚本
CSS文件：组价的样式表文件

上方工具栏说明

取数：取数定义里定义的数据，即为组件在运行时需要的参数，一般是可以通过拾取表元而获得的数据，在定义时，可以设定一个默认值。

点击取数定义后，在弹出的对话框中，点击 "+"  号，就可以实现变量的创建，变量设定完毕后，点击 "确认" 保存。

所有的取数，在js代码中，都会以字符串的形式存放在 "vardata" 参数中，例如上图中，想使用 item 参数，就要写成 vardata.item 。


组件属性：



“属性”是指，在编辑界面的右侧，可以根据编辑人员的需求，来改变参数，如右图的“上下文组件”中，四个属性都是通过左图中 “+” 自定义的属性，前面7个属性是组件默认的属性，从第八条开始才是你自己新建的组件属性。

对于一个属性而言，左图红圈中的五项很重要。

1）“属性名称”可以理解为，你在写js代码时，在  “setProperty” 方法中传入的 “key” 值。

2）“属性标题”是指在右侧属性面板上这个属性的名称，例如右图红框里面的，都是标题属性。

3）“类型”分为很多种，右图红框属性的类型，就是输入框，编辑者自己敲自己需要的内容，类型一共有11种，如下图。


4）“编辑” ，指是否能在右侧属性面板，对该属性进行写操作，不勾选，该属性就是不可写状态

5）“显示”，如果勾选了，该属性就会显示在属性面板上，不勾选，则该属性不显示在属性面板


事件：“事件”的只是提供一个接口，实现这个接口的，是你组件的使用者。


插入图片：插入图片，简单来讲就是，把你所需要的图片素材，从本地上传到vfs服务器上的过程，点击上传图片，选择所需要上传的图片就行了，单击所需要的图片，点击“确定”就可以将图片插入了。

这里值得一说的是，“图片管理”的默认界面，显示的都是“用户图标”，如下图，而“系统图标”点击后，所显示的图片就是系统自带的，一般用户并不能往系统图标里上传图片。



预览：“预览”按钮点击后，会显示你的组件目前的效果


总结：开发自定义组件流程

1）新建酷屏组件

2）设计取数定义

3）考虑需要的属性，并留好接口

4）通过你掌握的html、js、css知识，依次写好对应的三个文件

5）插入图片素材

6）点击预览，看你的组件效果

7） 检查你的组件、debug，若符合要求就点击“保存”。

至此，一个酷屏组件就编写完毕了

3. 引用第三方组件

这个地方已一个百度的gis地图为例：
Step1：需要访问百度地图API接口网站，申请成为百度地图开发者，获取一个秘钥ak,然后在组件中以下图的方式将ak引入。


Step2：初始化gis地图并添加标点和绑定事件


Step3：标点以及地图参数


具体代码如下：
复制代码
  1. var myChart = null;
  2. var myData = null;
  3. var myProperty = null;
  4. var myEvents = null;
  5. /*
  6.  * 初始化方法
  7.  *
  8.  * @params cwidget 组件对象
  9.  * @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
  10.  * @params storagedata 组件自己需要存储的值，字符串格式
  11.  * @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
  12.  * @params resources 资源及权限校验，json格式：{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
  13.  */
  14. function init(cwidget, vardata, events, storagedata, resources) {
  15.     var basedom = cwidget.basedom, doc = cwidget.wnd.document;
  16.     myEvents = events;
  17.     initMyData(vardata);
  18.     getValue(cwidget);
  19.     if (!window["GISMap"]) {
  20.         EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/gismap.js");
  21.     }
  22.     var src = "http://api.map.baidu.com/getscript?v=2.0&ak=XS9zbYnYu6dylRK6hGutsZh6";
  23.     if (EUI.findScript(doc, src) == -1) {
  24.         EUI.addScript(doc, src, function () {
  25.             initMap(cwidget);
  26.         });
  27.     } else {
  28.         initMap(cwidget);
  29.     }
  30. }
  31. function addEvent() {
  32.     myChart.addEvent4AllMarker("click", myEvents["markerClick"]);
  33.     myChart.addEvent4map("click", myEvents["mapClick"]);
  34. }
  35. /**
  36.  * 初始化搜索框
  37.  */
  38. function initSearchDom(basedom) {
  39.     var searchDiv = document.createElement("div");
  40.     searchDiv.className = "gis_search";
  41.     searchDiv.style.zIndex = 100;
  42.     basedom.appendChild(searchDiv);
  44.     var inputDom = document.createElement("input");
  45.     inputDom.type = "search";
  46.     searchDiv.appendChild(inputDom);
  48.     var rightDiv = document.createElement("div");
  49.     rightDiv.className = "gis_rightIcon";
  50.     searchDiv.appendChild(rightDiv);
  51. }
  52. function initMap(cwidget) {
  53.     var basedom = cwidget.basedom;
  54.     myChart = new GISMap(basedom);
  55.     var opt = getMyOption();
  56.     myChart.setOption(opt);
  57.     myChart.setZoom(myProperty["zoomN"]);
  58.     initSearchDom(basedom);
  59.     initMyEvent(basedom);
  60.     if (cwidget.isresultview) {
  61.         //只在结果界面的时候执行，例如只想在结果界面绑定click事件
  62.         addEvent();
  63.     }
  64. }
  65. function initMyEvent(basedom) {
  66.     var inputDom$ = $(basedom).find(".gis_search input"),
  67.         iconDom$ = $(basedom).find(".gis_search .gis_rightIcon");
  68.     myChart.addAutoComplete(inputDom$[0]);
  69.     iconDom$.click(function () {
  70.         var value = inputDom$[0].value;
  71.         myChart.searchPlace(value);
  72.     });
  73. }
  74. /**
  75.  * 初始化数据
  76.  */
  77. function initMyData(vardata) {
  78.     if (!vardata) return;
  79.     myData = {};
  80.     Object.keys(vardata).forEach(function (ele) {
  81.         try {
  82.             myData[ele] = JSON.parse(vardata[ele]);
  83.         } catch (error) {
  84.             myData[ele] = vardata[ele];
  85.         }
  87.     });
  88. }
  89. /**
  90.  * 返回参数
  91.  */
  92. function getMyOption() {
  93.     var opt = {};
  94.     opt.city = myData["city"];
  95.     var color = myProperty["color"];
  96.     opt.overlays = [{ name: myData["city"], color: color[0] }];
  97.     var names = myData["name"], points = myData["point"];
  98.     var iconUrl = myProperty["iconUrl"], size = myProperty["size"],
  99.         hightIconUrl = myProperty["hightIconUrl"], hightSize = myProperty["hightSize"];
  100.     opt.pointObjs = points.map(function (ele, index) {
  101.         return {
  102.             name: names[index],
  103.             point: ele,
  104.             icon: getIcon(iconUrl, size),
  105.             hightIcon: getIcon(hightIconUrl, hightSize)
  106.         };
  107.     });
  108.     return opt;
  109. }
  110. function getIcon(iconUrl, size) {
  111.     if (!iconUrl || !size) return;
  112.     return {
  113.         url: iconUrl,
  114.         size: { width: size[0], height: size[1] }
  115.     }
  116. }
  117. /**
  118.  * 定义了自定义属性时，必须实现该方法，方法名为setProperty
  119.  * 当在属性面板上修改属性后，会调用该方法
  120.  * @param key  属性名
  121.  * @param value  属性值
  122.  * @param cwidget  组件对象
  123.  * @returns
  124.  */
  125. function setProperty(key, value, cwidget) {
  126.     if (key === 'zoomN') {
  127.         value = JSON.parse(value);
  128.         myChart.setZoom(value);
  129.     } else if (key === 'yyy') {
  131.     }
  132. }
  134. /**
  135.  * 刷新操作，数据改变时，调用该方法，重新渲染数据
  136.  * @param cwidget 组件对象
  137.  * @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
  138.  * @param storagedata  组件自己需要存储的值，字符串格式
  139.  * @returns
  140.  */
  141. function refreshDatas(cwidget, vardata, storagedata) {
  142.     var basedom = cwidget.basedom;
  144. }
  146. /**
  147.  * 组件大小改变时执行
  148.  * @param cwidget 组件对象
  149.  * @returns
  150.  */
  151. function resize(cwidget) {
  153. }
  155. /**
  156.  * 获取组件的参数值
  157.  * @param cwidget 组件对象
  158.  * @returns
  159.  */
  160. function getValue(cwidget) {
  161.     myProperty = {
  162.         "color": JSON.parse(cwidget.getProperty("color")),
  163.         "iconUrl": cwidget.getProperty("iconUrl"),
  164.         "hightIconUrl": cwidget.getProperty("hightIconUrl"),
  165.         "size": JSON.parse(cwidget.getProperty("size")),
  166.         "hightSize": JSON.parse(cwidget.getProperty("hightSize")),
  167.         "zoomN": JSON.parse(cwidget.getProperty("zoomN"))
  168.     };
  169. }
  171. /**
  172.  * 获取组件的参数名称
  173.  * @param cwidget 组件对象
  174.  * @returns
  175.  */
  176. function getParamName(cwidget) {
  178. }
  179. /*
  180.  * 销毁操作,销毁自己相关的东西
  181.  */
  182. function dispose(cwidget) {
  183.     if (myChart)
  184.         myChart.dispose();
  185.     myChart = null;
  186.     myData = null;
  187.     myProperty = null;
  188.     myEvents = null;
  189. }

4. 导出/导入组件

导出组件：选中需要导出的组件——>右键——>导出即可


如果想导出整个分组下的组件，可以直接在分组上右键，然后选择导出，即可把分组下的所有组件一起导出


导入：选择需要导入的分组，或者在选中自定义组件，然后右键，选择导入，选择要导入组件的zip文件，然后点确定即可


附件列表

1

文档内容仅供参考
如果您需要解决具体问题，还可以登录亿信社区
在提问求助板块提问，30分钟内帮您解决问题

如果您认为本词条还有待完善，请编辑

上一篇组件事件

下一篇酷屏语音

请先登录

明星产品
一站式数据分析平台-亿信ABI 智能数据治理平台-睿治 主数据管理平台-EsMDM
关于案例
政府 银行 租赁 保险 制造 企业 教育 科研 应急与能源 医疗卫生
行业资讯
数字化转型 DCMM 数据资产 数据分析 数据治理
服务方式

400咨询：400-0011-866
手机咨询：137-0121-6790

技术支持QQ：400-0011-866
(工作日9:00-18:00)

产品建议邮箱
yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

版权所有© 2006-2024 北京亿信华辰软件有限责任公司京ICP备07017321号京公网安备11010802016281号 免责声明