开源组件

开源组件

目录

组件列表


二维码生成工具qrcode-generator

简介
A tool for generating qrcode. Support to render canvas, display image, download image file and execute callback, upload image file and execute callback, add customized picture to the center of the qrcode and etc.

Based on https://www.npmjs.com/package/qrcode

API

完整支持https://www.npmjs.com/package/qrcode 的API

基于上述,添加以下API

  • render(id, text, option)

渲染生成二维码及对应Blob对象

@param id Canvas画布id

@param text 二维码展示内容

@param option 二维码渲染配置对象(参见https://www.npmjs.com/package/qrcode)

@return new Promise 支持回调函数

  • upload(id, url)

上传二维码图片

@param id Canvas画布id

@param url 二维码上传地址(非跨域)

@return new Promise 支持回调函数

  • exportImage(id, filename)

导出二维码图片

@param id Canvas画布id

@param filename 二维码文件名

@return new Promise 支持回调函数

  • getBlobInstance(id)

获取二维码Blob对象实例

@param id Canvas画布id

@return blobInstance or {}

  • getCanvasInstance(id)

获取二维码Canvas对象实例

@param id Canvas画布id

@return canvasInstance or {}

  • destroy(id)

销毁二维码实例并清空画布

@param id Canvas画布id

@returns* 导入csv文件作为数据源

  • 按日期、时间粒度查询
  • 通过百度地图API展现数据分布规律

完整组件源码
详见github,Github gcidea/qrcode-generator


智慧交通大数据可视化展现Demo

简介
该demo基于csv等格式的数据处理结果文件,对数据进行可视化展现,可以:

  • 导入csv文件作为数据源
  • 按日期、时间粒度查询
  • 通过百度地图API展现数据分布规律

完整组件源码
详见github,Github gcidea/data-visualization

对应简介文章
智慧交通大数据可视化展现Demo


可视化HTML5页面拖拽构建工具demo

简介
demo,在web端通过拖拽编排的方式快速定制活动H5页面,初步阶段完成。

完整组件源码
详见github,Github gcidea/html5-draggable

对应简介文章
可视化HTML5页面拖拽构建工具demo


使用AngularJs封装表格内容渲染(含分页)组件

简介
该组件是管理系统中很常用的功能,管理系统的典型使用是批量数据的处理,表格展示是最直接的方式。该插件实现:

  • 批量数据的列表展示
  • 每行数据提供操作项(修改,删除等)接口
  • 翻页查询接口
  • 每页显示条数修改
  • 点击表头排序
  • 列表宽度自定义
  • 跳转至某页

完整组件源码
详见github,Github gcidea/angular-table

对应简介文章
使用AngularJs封装表格内容渲染(含分页)组件


使用AngularJs封装Tabs选项卡组件

简介
该组件是管理系统中很常用的功能,平台使用者可能会同时使用不同模块的功能,这时候需要打开多个模块,Tabs组件是一种类似浏览器多标签页的效果。可以:

  • 可以在多个模块的页面间进行切换
  • 在某个页面上右键关闭
  • 附带收起侧边栏功能

完整组件源码
详见github,Github gcidea/angular-tabs

对应简介文章
使用AngularJs封装表格内容渲染(含分页)组件