avue-data

·  阅读 270
avue-data

目录

  1. 组件分类
  2. 数据
  3. 事件

组件分类

组件分为图表(echarts图),表单(基础表单组件)两大类。 image.png

图表(echarts图):

图表(echarts图)包含:线柱图和饼图。

image.png

表单(基础表单组件):

表单(基础表单组件)包含:通用文本,表格,选项卡。

image.png

数据

数据类型分为静态数据和SQL数据两类。

静态数据

静态数据支持编辑静态数据。去掉了数据转换器。

image.png

SQL数据

image.png

  • SQL数据支持编辑SQL语句,手动选择数据源,书写sql。支持数据转换。

image.png

  • SQL语句里的{{}}为动态参数,如下代码块中的{{is_deleted}}和{{create_time}},{{part_no}}。通过事件传来的参数集合,作比对替换。
  • 刷新时间为数据源请求的时间,1000为间隔1秒重复请求。 sql语句:
select
 dept_name,
 line_name, 
 plan_quantity 
from kpi_line_day 
where is_deleted = {{is_deleted}}
and dept_id = 1519478424393547777
and line_id in (1519478424393547770,1519478424393547771,1519478424393547777)
and create_time >= '2022-05-10 00:00:00'
and part_no = '{{part_no}}'
and create_time <= '{{create_time}}'
复制代码

事件

使用eventbus 一个组件可以有多个事件。 若组件自身带的事件参数不够用,可以新增字段。若需要动态传参,则在静态数据或数据转换器中加新字段。 image.png

image.png

image.png 使用vuex存储当前画布内所有待激活的事件池。

image.png

完!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改