mirror of
https://github.com/getrebuild/rebuild.git
synced 2025-02-25 23:05:06 +08:00
dash
This commit is contained in:
FangfangZhao
parent
8e220e1fdf
commit
b746bcbf8e
9 changed files with 219 additions and 33 deletions
|
|
@ -18,25 +18,34 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|||
|
||||
package com.rebuild.web.dashboard;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.servlet.ModelAndView;
|
||||
|
||||
import com.alibaba.fastjson.JSON;
|
||||
import com.alibaba.fastjson.JSONArray;
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.rebuild.server.Application;
|
||||
import com.rebuild.server.metadata.EntityHelper;
|
||||
import com.rebuild.server.metadata.MetadataHelper;
|
||||
import com.rebuild.server.metadata.MetadataSorter;
|
||||
import com.rebuild.server.metadata.entityhub.DisplayType;
|
||||
import com.rebuild.server.metadata.entityhub.EasyMeta;
|
||||
import com.rebuild.utils.JSONUtils;
|
||||
import com.rebuild.web.BadParameterException;
|
||||
import com.rebuild.web.BaseControll;
|
||||
|
||||
import cn.devezhao.commons.web.ServletUtils;
|
||||
import cn.devezhao.persist4j.Entity;
|
||||
import cn.devezhao.persist4j.Field;
|
||||
import cn.devezhao.persist4j.Record;
|
||||
import cn.devezhao.persist4j.engine.ID;
|
||||
|
||||
/**
|
||||
|
|
@ -67,6 +76,7 @@ public class ChartDesignControll extends BaseControll {
|
|||
|
||||
entityMeta = MetadataHelper.getEntity((String) config[0]);
|
||||
} else if (entity != null) {
|
||||
mv.getModel().put("chartConfig", "{}");
|
||||
entityMeta = MetadataHelper.getEntity(entity);
|
||||
} else {
|
||||
throw new BadParameterException();
|
||||
|
|
@ -91,5 +101,35 @@ public class ChartDesignControll extends BaseControll {
|
|||
return mv;
|
||||
}
|
||||
|
||||
|
||||
@RequestMapping("/chart-save")
|
||||
public void chartSave(HttpServletRequest request, HttpServletResponse response) throws IOException {
|
||||
ID user = getRequestUser(request);
|
||||
JSON formJson = ServletUtils.getRequestJson(request);
|
||||
|
||||
Record record = EntityHelper.parse((JSONObject) formJson, user);
|
||||
ID dashid = null;
|
||||
if (record.getPrimary() == null) {
|
||||
dashid = getIdParameterNotNull(request, "dashid");
|
||||
}
|
||||
record = Application.getCommonService().createOrUpdate(record);
|
||||
|
||||
// 添加到仪表盘
|
||||
if (dashid != null) {
|
||||
Object[] dash = Application.createQuery(
|
||||
"select config from DashboardConfig where dashboardId = ?")
|
||||
.setParameter(1, dashid)
|
||||
.unique();
|
||||
JSONArray config = JSON.parseArray((String) dash[0]);
|
||||
|
||||
JSONObject item = JSONUtils.toJSONObject("chart", record.getPrimary().toLiteral());
|
||||
config.add(item);
|
||||
|
||||
Record record2 = EntityHelper.forUpdate(dashid, getRequestUser(request));
|
||||
record2.setString("config", config.toJSONString());
|
||||
Application.getCommonService().createOrUpdate(record2);
|
||||
}
|
||||
|
||||
JSONObject ret = JSONUtils.toJSONObject("id", record.getPrimary().toLiteral());
|
||||
writeSuccess(response, ret);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,24 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|||
|
||||
package com.rebuild.web.dashboard;
|
||||
|
||||
import java.io.IOException;
|
||||
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.servlet.ModelAndView;
|
||||
|
||||
import com.alibaba.fastjson.JSON;
|
||||
import com.rebuild.server.Application;
|
||||
import com.rebuild.server.metadata.EntityHelper;
|
||||
import com.rebuild.web.BaseControll;
|
||||
|
||||
import cn.devezhao.commons.web.ServletUtils;
|
||||
import cn.devezhao.persist4j.Record;
|
||||
import cn.devezhao.persist4j.engine.ID;
|
||||
|
||||
/**
|
||||
*
|
||||
* @author zhaofang123@gmail.com
|
||||
|
|
@ -39,4 +49,37 @@ public class DashboardControll extends BaseControll {
|
|||
public ModelAndView pageHome(HttpServletRequest request) {
|
||||
return createModelAndView("/dashboard/home.jsp");
|
||||
}
|
||||
|
||||
@RequestMapping("/dash-gets")
|
||||
public void dashGets(HttpServletRequest request, HttpServletResponse response) throws IOException {
|
||||
ID user = getRequestUser(request);
|
||||
Object[][] array = Application.createQuery(
|
||||
"select dashboardId,title,config from DashboardConfig where createdBy = ?")
|
||||
.setParameter(1, user)
|
||||
.array();
|
||||
|
||||
// 没有就初始化一个
|
||||
if (array.length == 0) {
|
||||
Record record = EntityHelper.forNew(EntityHelper.DashboardConfig, user);
|
||||
String dname = "默认仪表盘";
|
||||
record.setString("title", dname);
|
||||
record.setString("config", "[]");
|
||||
record = Application.getCommonService().create(record);
|
||||
array = new Object[][] { new Object[] { record.getPrimary(), dname, null } };
|
||||
}
|
||||
|
||||
writeSuccess(response, array);
|
||||
}
|
||||
|
||||
@RequestMapping("/dash-save")
|
||||
public void dashSave(HttpServletRequest request, HttpServletResponse response) throws IOException {
|
||||
ID dashid = getIdParameterNotNull(request, "id");
|
||||
ID user = getRequestUser(request);
|
||||
JSON config = ServletUtils.getRequestJson(request);
|
||||
|
||||
Record record = EntityHelper.forUpdate(dashid, user);
|
||||
record.setString("config", config.toJSONString());
|
||||
Application.getCommonService().update(record);
|
||||
writeSuccess(response);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
.chart-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-box .chart-body {
|
||||
height: 100%;
|
||||
margin-top: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chart-box .chart-head {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.chart-box .chart-head .chart-title {
|
||||
cursor: move;
|
||||
background-color: red;
|
||||
margin-right: 80px;
|
||||
font-weight: bold;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.chart-box .chart-head .chart-oper {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ $(document).ready(() => {
|
|||
_data.metadata = { entity: 'ChartConfig', id: window.__chartId }
|
||||
|
||||
console.log(JSON.stringify(_data))
|
||||
$.post(rb.baseUrl + '/app/entity/record-save', JSON.stringify(_data), function(res){
|
||||
$.post(rb.baseUrl + '/dashboard/chart-save?dashid=' + $urlp('dashid'), JSON.stringify(_data), function(res){
|
||||
if (res.error_code == 0){
|
||||
window.__chartId = res.data.id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,26 @@
|
|||
class BaseChart extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
}
|
||||
render() {
|
||||
return (<div className="chart-box">
|
||||
<div className="chart-head">
|
||||
<div className="chart-title text-truncate">{this.state.title}</div>
|
||||
<div className="chart-oper">
|
||||
<a><i className="zmdi zmdi-refresh"/></a>
|
||||
<a href={'chart-design?id=' + this.props.id}><i className="zmdi zmdi-edit"/></a>
|
||||
<a><i className="zmdi zmdi-delete"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'chart-body rb-loading ' + (!!!this.state.chartbox && ' rb-loading-active')}>{this.state.chartbox || <RbSpinner />}</div>
|
||||
</div>)
|
||||
}
|
||||
componentDidMount() {
|
||||
// TODO 获取数据
|
||||
// this.renderChart()
|
||||
}
|
||||
renderChart() {
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -9,4 +29,6 @@ class ChartIndex extends BaseChart {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
renderChart() {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,63 @@
|
|||
let gridster = null
|
||||
// $Id$
|
||||
let dashid = null
|
||||
$(document).ready(function(){
|
||||
$('.J_add-chart').click(function(){
|
||||
rb.modal(rb.baseUrl + '/p/dashboard/chart-new', '添加图表')
|
||||
//gridster.add_widget.apply(gridster, ['<li>0</li>', 4, 2])
|
||||
})
|
||||
$(window).trigger('resize')
|
||||
|
||||
$.get(rb.baseUrl + '/dashboard/dash-gets', ((res) => {
|
||||
let d = res.data[0]
|
||||
$('.J_add-chart').click(() => {
|
||||
renderRbcomp(<DlgAddChart dashid={d[0]} />)
|
||||
})
|
||||
dashid = d[0]
|
||||
render_dashboard($.parseJSON(d[2]))
|
||||
}))
|
||||
})
|
||||
$(window).resize(() => {
|
||||
$('.chart-grid').height($(window).height() - 131)
|
||||
})
|
||||
|
||||
class DlgAddChart extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
render() {
|
||||
return (<RbModal title="添加图表">
|
||||
<form>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3 col-form-label text-sm-right">图表数据来源</label>
|
||||
<div className="col-sm-7">
|
||||
<select className="form-control form-control-sm" ref="sentity" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row footer">
|
||||
<div className="col-sm-7 offset-sm-3">
|
||||
<button className="btn btn-primary" type="button" onClick={()=>this.next()}>下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</RbModal>)
|
||||
}
|
||||
componentDidMount() {
|
||||
let that = this
|
||||
let sentity = $(this.refs['sentity'])
|
||||
$.get(rb.baseUrl + '/commons/metadata/entities', function(res){
|
||||
$(res.data).each(function(){
|
||||
$('<option value="' + this.name + '">' + this.label + '</option>').appendTo(sentity)
|
||||
})
|
||||
that.select2 = sentity.select2({
|
||||
language: 'zh-CN',
|
||||
placeholder: '选择数据源',
|
||||
width: '100%'
|
||||
})
|
||||
})
|
||||
}
|
||||
next() {
|
||||
location.href = rb.baseUrl + '/dashboard/chart-design?source=' + this.select2.val() + '&dashid=' + this.props.dashid
|
||||
}
|
||||
}
|
||||
|
||||
let gridster = null
|
||||
let render_dashboard = function(cfg){
|
||||
gridster = $('.gridster ul').gridster({
|
||||
widget_base_dimensions: ['auto', 100],
|
||||
autogenerate_stylesheet: true,
|
||||
|
|
@ -14,14 +66,45 @@ $(document).ready(function(){
|
|||
widget_margins: [5, 5],
|
||||
resize: {
|
||||
enabled: true,
|
||||
min_size: [2, 2]
|
||||
min_size: [2, 2],
|
||||
stop: function(e, ui, $widget){
|
||||
save_dashboard()
|
||||
}
|
||||
},
|
||||
draggable: {
|
||||
handle: '.chart-title'
|
||||
handle: '.chart-title',
|
||||
stop: function(e, ui, $widget){
|
||||
save_dashboard()
|
||||
}
|
||||
},
|
||||
serialize_params: function($w, wgd) {
|
||||
return {
|
||||
col: wgd.col,
|
||||
row: wgd.row,
|
||||
size_x: wgd.size_x,
|
||||
size_y: wgd.size_y,
|
||||
chart: $w.data('chart')
|
||||
}
|
||||
}
|
||||
}).data('gridster')
|
||||
})
|
||||
|
||||
gridster.remove_all_widgets()
|
||||
//cfg = Gridster.sort_by_row_and_col_asc(cfg)
|
||||
$(cfg).each((idx, item)=>{
|
||||
let el = '<li data-chart="' + item.chart + '"><div id="chart-' + item.chart + '"></div><div class="handle-resize"></div></li>'
|
||||
gridster.add_widget(el, item.size_x||2, item.size_y||2, item.col||null, item.row||null)
|
||||
})
|
||||
|
||||
$('.gridster li').each(function(){
|
||||
let chartid = $(this).data('chart')
|
||||
renderRbcomp(<BaseChart id={chartid} />, 'chart-' + chartid)
|
||||
})
|
||||
}
|
||||
|
||||
$(window).resize(() => {
|
||||
$('.chart-grid').height($(window).height() - 131)
|
||||
})
|
||||
let save_dashboard = function(){
|
||||
let s = gridster.serialize()
|
||||
console.log(s)
|
||||
$.post(rb.baseUrl + '/dashboard/dash-save?id=' + dashid, JSON.stringify(s), ((res) => {
|
||||
console.log(res)
|
||||
}))
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ class RbModal extends React.Component {
|
|||
}
|
||||
componentDidMount() {
|
||||
if (this.props.children) this.setState({ inLoad: false })
|
||||
this.show()
|
||||
this.show(this.props.onShow)
|
||||
}
|
||||
resize() {
|
||||
if (!!!this.state.url) return // 非 iframe 无需 resize
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ $(document).ready(function(){
|
|||
$('.btn-primary').click(function(){
|
||||
let source = $val('#sourceEntity'),
|
||||
title = $val('#chartTitle')
|
||||
parent.location.href = rb.baseUrl + '/dashboard/chart-design?source=' + source + '&title=' + title
|
||||
parent.location.href = rb.baseUrl + '/dashboard/chart-design?source=' + source + '&title=' + title + '&das'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
.chart-grid{overflow:scroll;overflow-x:hidden;padding:0 20px;padding-bottom:20px;padding-right:14px}
|
||||
.gridster ul,.gridster ul>li{margin:0;padding:0}
|
||||
.gridster ul>li{background-color:#fff;padding:20px 25px;}
|
||||
.gridster ul>li>div{height:100%}
|
||||
.gridster ul>li:hover{box-shadow:0 2px 4px 0 rgba(0, 0, 0, .1), 0 16px 24px 0 rgba(81, 129, 228, .1)}
|
||||
.gridster ul>li:hover .chart-oper{display:block;}
|
||||
</style>
|
||||
|
|
@ -38,29 +39,14 @@
|
|||
</div>
|
||||
<div class="chart-grid">
|
||||
<div class="gridster">
|
||||
<ul class="list-unstyled">
|
||||
<li data-col="1" data-row="1" data-sizex="2" data-sizey="2">
|
||||
<div class="chart-box">
|
||||
<div class="chart-head">
|
||||
<div class="chart-title text-truncate">未命名图表</div>
|
||||
<div class="chart-oper">
|
||||
<a><i class="zmdi zmdi-refresh"></i> </a>
|
||||
<a><i class="zmdi zmdi-edit"></i> </a>
|
||||
<a><i class="zmdi zmdi-delete"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">1</div>
|
||||
<div class="handle-resize"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%@ include file="/_include/Foot.jsp"%>
|
||||
<script src="${baseUrl}/assets/lib/gridster/jquery.gridster.min.js"></script>
|
||||
<script src="${baseUrl}/assets/lib/gridster/jquery.gridster.js"></script>
|
||||
<script src="${baseUrl}/assets/js/charts/charts.jsx" type="text/babel"></script>
|
||||
<script src="${baseUrl}/assets/js/charts/dashboard.jsx" type="text/babel"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue