积木快速开发平台

技术团队文档示例


看板(Dashboard)

<h2>看板视图</h2> <p>积木看板如图: <img src="http://h.bblocks.cn/ui/images/template/dashboard.png" alt="看板" title="列表" /></p> <p>组成部分:</p> <ul> <li>查询表单(暂时不支持)</li> <li>功能按钮</li> <li>echarts图表(柱图、折线、饼图、雷达、仪表盘)以及sql绑定</li> </ul> <p>操作步骤如下:</p> <ol> <li>选择一个菜单目录节点,点击“<strong>新增功能</strong>”</li> <li><strong>视图模板</strong>选择“<strong>Dashboard[看板]</strong>”</li> <li> <p>输入“名称”、“编码”、选择元对象点击保存即可(注意红圈中是必填项,编码格式建议为:v_xxx)(元对象也别添加了,暂时无用) <img src="http://res.bblocks.cn/doc/bashboard/bashboard1.jpg" alt="新建看板视图" /></p> </li> <li> <p>设计报表</p> <blockquote> <p>1、点击左上角“设计报表”(开发用户),进入编辑界面(目前二次编辑功能有bug暂未开放,所以进入编辑界面点击顶部“清空”进行重置) 2、首先拖拽“布局设置”进入容器 <img src="http://res.bblocks.cn/doc/bashboard/design1.jpg" alt="看板设计1" /> 3、其次拖拽“ECHARTS视图”进入布局器中(当然可以拖拽其他的组件如有需要) <img src="http://res.bblocks.cn/doc/bashboard/design2.jpg" alt="看板设计2" /> <br> <img src="http://res.bblocks.cn/doc/bashboard/design3.jpg" alt="看板设计3" /> 4、最后点击顶部“保存”即完成看板设计</p> </blockquote> </li> <li> <p>调整Echarts控件以及数据</p> <blockquote> <p>1、echarts控件,点击“编辑” 2、Echarts参数部分,可以根据echarts api文档做相应调整也包括写死数据 3、修改的参数会立即在右上角显示(有防抖效果所以连续的修改可能未能执行,点击“Echarts参数”部分右上角箭头主动执行) 4、积木看板支持sql直接绑定视图数据,sql为:select a,b from table where 1=1;ds=eova 最后为指定数据源,写完sql点击上部“箭头”执行输出json,如果格式符合要求图表也会同步渲染。</p> </blockquote> </li> <li> <p>各个图表数据格式模板</p> <blockquote> <p>1、饼图</p> </blockquote> <p>SELECT l.<code>city</code> X,COUNT(<em>) Y1 FROM eova_log l GROUP BY l.<code>city</code> ORDER BY COUNT(</em>) DESC LIMIT 6;ds=eova</p> </li> </ol> <blockquote> <p>2、折线 或者 柱图</p> </blockquote> <pre><code>SELECT DATE_FORMAT(v.x,'%Y-%m-%d') X,v.y y1,IFNULL(v2.y,0) y2 FROM ( SELECT DATE(l.`create_time`) X,COUNT(*) Y FROM eova_log l WHERE 1=1 GROUP BY DATE(l.`create_time`) ) v LEFT JOIN ( SELECT DATE(l.`create_time`) X,COUNT(*) Y FROM eova_log l WHERE 1=1 AND l.city='江苏-南京' GROUP BY DATE(l.`create_time`) )v2 ON v.x=v2.x ORDER BY v.x ASC;ds=eova</code></pre> <blockquote> <p>3、仪表盘</p> </blockquote> <pre><code>SELECT v.inner_num/v.all_numm*100.0 y1 FROM ( SELECT SUM(CASE WHEN ip='127.0.0.1' THEN 1 ELSE 0 END) inner_num,COUNT(*) all_numm FROM eova_log l ) v ;ds=eova;</code></pre> <blockquote> <p>4、雷达</p> </blockquote> <pre><code>暂无~~</code></pre> <p><img src="http://h.bblocks.cn/ui/images/template/dashboard.png" alt="视图样例" /></p> <p>这样我们就完成看板视图开发:<strong>综合业务=》看板</strong></p> <blockquote> <p>1、最终的配置数据都写入菜单表(eova_menu)“board_ui”字段. 2、echarts相关参数写入表:b_charts 3、如有需要可以进行再次调整</p> </blockquote> <p><strong>已知存在的问题:</strong></p> <ul> <li>暂时不支持二次设计看板</li> </ul>

页面列表

ITEM_HTML