chart图常用配置项放出

kanban-console/src/main/resources/map-rule.xsl

@@ -156,6 +156,15 @@
                         <subtitle>
                             <xsl:value-of select="@subtitle"/>
                         </subtitle>
+                        <legendconfig>
+                            <xsl:value-of select="@legendconfig"/>
+                        </legendconfig>
+                        <pieconfig>
+                            <xsl:value-of select="@pieconfig"/>
+                        </pieconfig>
+                        <color>
+                            <xsl:value-of select="@color"/>
+                        </color>
                         <xsl:for-each select="series">
                             <series>
                                 <name>
@@ -202,6 +211,15 @@
                 <ytype>
                     <xsl:value-of select="@ytype"/>
                 </ytype>
+                <legendconfig>
+                    <xsl:value-of select="@legendconfig"/>
+                </legendconfig>
+                <areaconfig>
+                    <xsl:value-of select="@areaconfig"/>
+                </areaconfig>
+                <color>
+                	<xsl:value-of select="@color"/>
+                </color>
                 <!-- TODO -->
                 <yfields/>
                 <xsl:for-each select="series">

kanban-console/src/main/webapp/resources/app/controller/board.js

@@ -6,7 +6,8 @@ Ext.define('erp.controller.board', {
     'boardmodel.elementdetailgrid','boardmodel.detailpropertiesgrid','component.commonpanel','component.formcomponent',
 	'component.gridcomponent','component.barcomponent','component.linecomponent','component.piecomponent',
 	'core.trigger.TextTrigger', 'core.trigger.StyleTrigger', 'core.trigger.GridRenderTrigger', 'core.trigger.FormRenderTrigger',
-	'boardmodel.modelbackupgrid'
+	'boardmodel.modelbackupgrid', 'core.trigger.LegendTrigger', 'core.trigger.PieTrigger', 'core.trigger.ColorPoolTrigger', 'core.trigger.ColorPicker',
+	'core.trigger.BarTrigger', 'core.trigger.LineTrigger'
     ],
     stores:['component'],
     init:function(){
@@ -361,6 +362,10 @@ Ext.define('erp.controller.board', {
 				ytype: ch.getAttribute('ytype'),
 				field: ch.getAttribute('field'),
 				value: ch.getAttribute('value'),
+				legendconfig: ch.getAttribute('legendconfig'),
+				pieconfig: ch.getAttribute('pieconfig'),
+				areaconfig: ch.getAttribute('areaconfig'),
+				color: ch.getAttribute('color'),
 				x:x,
 				y:y,
 				width:width,

kanban-console/src/main/webapp/resources/app/view/component/barcomponent.js

@@ -137,6 +137,18 @@ Ext.define('erp.view.component.barcomponent',{
 					xtype: 'texttrigger',
 					fieldLabel: '数据源',
 					name: 'sql'
+				},{
+					xtype: 'legendtrigger',
+					fieldLabel: '图例设置',
+					name: 'legendconfig'
+				},{
+					xtype: 'bartrigger',
+					fieldLabel: '图域设置',
+					name: 'areaconfig'
+				},{
+					xtype: 'colorpooltrigger',
+					fieldLabel: '色池',
+					name: 'color'
 				},this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
 				itemDefault:{
 				},

kanban-console/src/main/webapp/resources/app/view/component/linecomponent.js

@@ -138,6 +138,18 @@ Ext.define('erp.view.component.linecomponent',{
 					xtype: 'texttrigger',
 					fieldLabel: '数据源',
 					name: 'sql'
+				},{
+					xtype: 'legendtrigger',
+					fieldLabel: '图例设置',
+					name: 'legendconfig'
+				},{
+					xtype: 'linetrigger',
+					fieldLabel: '图域设置',
+					name: 'areaconfig'
+				},{
+					xtype: 'colorpooltrigger',
+					fieldLabel: '色池',
+					name: 'color'
 				},this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
 				itemDefault:{
 				},

kanban-console/src/main/webapp/resources/app/view/component/piecomponent.js

@@ -45,6 +45,18 @@ Ext.define('erp.view.component.piecomponent',{
 					xtype: 'texttrigger',
 					fieldLabel: '数据源',
 					name: 'sql'
+				},{
+					xtype: 'legendtrigger',
+					fieldLabel: '图例设置',
+					name: 'legendconfig'
+				}, {
+					xtype: 'pietrigger',
+					fieldLabel: '图域设置',
+					name: 'pieconfig'
+				},{
+					xtype: 'colorpooltrigger',
+					fieldLabel: '色池',
+					name: 'color'
 				},this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
 				itemDefault:{
 				},

kanban-console/src/main/webapp/resources/app/view/core/trigger/BarTrigger.js

@@ -0,0 +1,220 @@
+/**
+ * chart-bar设置
+ */
+Ext.define('erp.view.core.trigger.BarTrigger', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.bartrigger',
+    triggerCls: 'bar-trigger-icon',
+    onTriggerClick: function() {
+        var trigger = this;
+        try {
+            Ext.JSON.decode(trigger.getValue() || '{}');
+        }catch(e) {
+            showErrorMsg('失败', '格式有误！');
+            return;
+        }
+        var legendEditor = Ext.create('Ext.window.Window', {
+            field: trigger,
+            title: trigger.fieldLabel,
+            width: 700,
+            height: 400,
+            modal:true,
+            layout:'border',
+            items: [{
+                xtype:'form',
+                region: 'center',
+                bodyPadding: 10,
+                autoScroll: true,
+                layout: 'column',
+                defaults: {
+                	padding: '0 10 10 10',
+                	width: 300
+                },
+                items: [{
+                    xtype: 'numberfield',
+                    fieldLabel: '上边距(%)',
+                    name: 'top',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '左边距(%)',
+                    name: 'left',
+                    minValue: 0,
+                    emptyText: '10'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '右边距(%)',
+                    name: 'right',
+                    minValue: 0,
+                    emptyText: '10'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '下边距(%)',
+                    name: 'bottom',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'textfield',
+                	fieldLabel: '<font title="柱条的宽度，支持设置成数字或者相对于类目宽度的百分比。">柱条宽度</font>',
+                	name: 'barWidth',
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'textfield',
+                	fieldLabel: '<font title="柱条的最大宽度，设置以使当类目数过小时的柱宽不至于显得很宽，支持设置成数字或者相对于类目宽度的百分比。">柱条最大宽度</font>',
+                	name: 'barMaxWidth',
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="柱条最小高度，可用于防止某数据项的值过小而影响交互。">柱条最小高度(px)</font>',
+                	name: 'barMinHeight',
+                	minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="柱间距离，为柱子宽度的百分比宽度。">柱间距(%)</font>',
+                	name: 'barGap',
+                	minValue: 0,
+                    emptyText: '30'
+                }, {
+                	xtype: 'checkbox',
+                	fieldLabel: '隐藏标注',
+                	name: 'hideLabel',
+                	inputValue: true
+                }, {
+                	xtype: 'combobox',
+                	fieldLabel: '标注位置',
+                	name: 'labelPosition',
+                	listConfig: {
+                        maxHeight: 180
+                    },
+                    store: Ext.create('Ext.data.Store', {
+                        fields: ['value', 'name'],
+                        data : [
+                            { name: '外上方', value: 'top'},
+                            { name: '外左方', value: 'left'},
+                            { name: '外右方', value: 'right'},
+                            { name: '外下方', value: 'bottom'},
+                            { name: '内居中', value: 'inside'},
+                            { name: '内靠左', value: 'insideLeft'},
+                            { name: '内靠右', value: 'insideRight'},
+                            { name: '内置顶', value: 'insideTop'},
+                            { name: '内置底', value: 'insideBottom'},
+                            { name: '内上左', value: 'insideTopLeft'},
+                            { name: '内下左', value: 'insideBottomLeft'},
+                            { name: '内上右', value: 'insideTopRight'},
+                            { name: '内下右', value: 'insideBottomRight'}
+                        ]
+                    }),
+                    queryMode: 'local',
+                    displayField: 'name',
+                    valueField: 'value',
+                    emptyText: '外上方'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="距离图形元素的距离，配合\'标注位置\'使用">标注距离(px)</font>',
+                	name: 'labelDistance',
+                	minValue: 0,
+                	emptyText: '5'
+                }, {
+                	xtype: 'texttrigger',
+                	fieldLabel: '<font title="模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。示例：formatter: \'{a}\\n{b}: {c}\'">标注render</font>',
+                	name: 'labelFormatter',
+                	emptyText: '{c}'
+                }],
+                setConfig: function(configObj) {
+                    var form = this;
+                    var o = {
+                        data: Object.assign({}, configObj),
+                        getData: function() {return this.data}
+                    };
+                    form.loadRecord(o);
+                },
+                getConfig: function() {
+                    var form = this;
+                    var config = form.getForm().getValues();
+                    configObj = {};
+                    for(var key in config) {
+                        if(config[key]) {
+                        	configObj[key] = config[key];
+                        }
+                    }
+                    return configObj;
+                }
+            }],
+            buttonAlign: 'center',
+            buttons:[{
+                text:'确定',
+                formBind:true,
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
+                    if(componet) {
+                        var grid = componet;
+                        var fieldname = win.field.column.dataIndex;
+                        var selections = grid.getSelectionModel().getSelection();
+                        var store = grid.getStore();
+                        var selected = selections[0];
+                        selected.set(fieldname, Ext.JSON.encode( win.getConfig() ) );
+                        var rowIndex = store.indexOf(selected);
+                        var colIndex = 0;
+                        var columns = grid.columnManager.columns;
+                        for(var i = 0; i < columns.length; i ++) {
+                            var column = columns[i];
+                            if(column.dataIndex == fieldname) {
+                                colIndex = i;
+                                break;
+                            }
+                        }
+
+                        var getPropConfigByRecord = function(records) {
+                            var propConfig = new Array();
+                            var obj;
+                            Ext.Array.each(records,function(record){
+                                obj = new Object();
+                                obj.display = record.get('display');
+                                obj.property = record.get('property');
+                                obj.propvalue = record.get('propvalue');
+                                propConfig.push(obj);
+                            });
+                            return propConfig;
+                        }
+
+                        var detailGrid = Ext.getCmp('elementdetailgrid');
+                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
+                        detailSelect.set('propconfig',getPropConfigByRecord(grid.store.data.items));
+
+                        grid.getPlugin().startEditByPosition({row: rowIndex, column: colIndex});
+                    }else {
+                        win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
+                    }
+                    win.close();
+                }
+            },{
+                text:'取消',
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    win.close();
+                }
+            }],
+            listeners: {
+                afterrender: function() {
+                    var me = this;
+                    me.setConfig(me.field.getValue());
+                }
+            },
+            setConfig: function(configStr) {
+                var me = this;
+                var form = me.down('form');
+                var configObj = Ext.JSON.decode(configStr || '{}');
+                form.setConfig(configObj);
+            },
+            getConfig: function() {
+                var me = this;
+                var form = me.down('form');
+                return form.getConfig();
+            }
+        });
+        legendEditor.show();
+    }
+}); 

kanban-console/src/main/webapp/resources/app/view/core/trigger/ColorPicker.js

@@ -0,0 +1,47 @@
+Ext.define('erp.view.core.trigger.ColorPicker', {
+	extend: 'Ext.form.field.Picker',
+    alias: 'widget.colorpicker',
+    triggerCls: 'color-trigger-icon',
+    onTriggerClick: function () {
+	    var me = this;
+	    if (!me.picker) {
+	        me.picker = Ext.create('Ext.picker.Color', {
+	            pickerField: this,
+	            ownerCt: this,
+	            renderTo: me.el,
+	            floating: true,
+	            focusOnShow: true,
+	            style: {
+	                backgroundColor: "#fff"
+	            },
+	            listeners: {
+	                scope: this,
+	                select: function (field, value, opts) {
+	                    me.setValue('#' + value);
+	                    me.picker.hide();
+	                    me.pickerShow = false;
+	                }
+	            }
+	        });
+	        me.picker.alignTo(me.inputEl, 'tl-bl?');
+	    }
+	    if(me.pickerShow) {
+	        me.picker.hide();
+	        me.pickerShow = false;
+	    }else {
+	        me.picker.show();
+	        me.pickerShow = true;
+	    }
+	},
+	listeners: {
+        change: function(field, newValue, oldValue, eOpts) {
+        	var RgbValue = color2Rgb(newValue);
+        	var fontColor = isDeepColor(RgbValue) ? '#d0d0d0' : '#000000';
+        	
+            this.inputEl.applyStyles({
+                backgroundColor: isColorValue(newValue) ? newValue : 'white',
+                color: isColorValue(fontColor) ? fontColor : 'black'
+            });
+        }
+    }
+});

kanban-console/src/main/webapp/resources/app/view/core/trigger/ColorPoolTrigger.js

@@ -0,0 +1,213 @@
+/**
+ * chart取色池设置
+ */
+Ext.define('erp.view.core.trigger.ColorPoolTrigger', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.colorpooltrigger',
+    triggerCls: 'colorpool-trigger-icon',
+    onTriggerClick: function () {
+        var trigger = this;
+        try {
+            var arr = Ext.JSON.decode(trigger.getValue() || '[]');
+            if(!(arr instanceof Array)) {
+            	showErrorMsg('失败', '格式有误！');
+            	return;
+            }
+            var success = true;
+            Ext.Array.each(arr, function(a) {
+            	if(!isColorValue(a)) {
+            		success = false;
+            	}
+            });
+            if(!success) {
+            	showErrorMsg('失败', '格式有误！');
+            	return;
+            }
+        }catch(e) {
+            showErrorMsg('失败', '格式有误！');
+            return;
+        }
+        var legendEditor = Ext.create('Ext.window.Window', {
+            field: trigger,
+            title: trigger.fieldLabel,
+            width: 320,
+            height: 320,
+            modal: true,
+            cls: 'x-colorpool-window',
+            layout: 'border',
+            items: [{
+                xtype: 'grid',
+                region: 'center',
+                store: Ext.create('Ext.data.JsonStore', {
+                    fields: ['value'],
+                    data: []
+                }),
+                autoScroll: true,
+                forceFit: true,
+                columnLines: true,
+                hideHeaders: true,
+                columns: [{
+                        xtype: 'rownumberer'
+                    },
+                    {
+                        text: '值',
+                        dataIndex: 'value',
+                        editor: 'colorpicker',
+                        renderer: function(value,a) {
+                        	if(!value) {
+                        		return '';
+                        	}
+                        	var RgbValue = color2Rgb(value);
+                        	var fontColor = isDeepColor(RgbValue) ? 'white' : 'black';
+                        	
+                        	a.style += ' background-color:'+value+';color:'+fontColor+';';
+                        	return value;
+                        }
+                    }
+                ],
+                plugins: [
+                    Ext.create('Ext.grid.plugin.CellEditing', {
+                        clicksToEdit: 2
+                    })
+                ],
+				listeners: {
+					afterrender: function() {
+						var win = document.getElementsByClassName('x-colorpool-window')[0];
+						var body = win.getElementsByClassName('x-window-body')[0];
+						var panel = body.getElementsByClassName('x-panel')[0];
+						
+						// 使colorpicker可以超出容器显示
+						body.style.overflow = 'visible';
+						panel.style.overflow = 'visible';
+					},
+					validateedit: function(editor, e) {
+						if(e.value != '' && !isColorValue(e.value)) {
+							showErrorMsg('警告', '这不是一个有效的颜色值！');
+							e.cancel = true;
+						}
+					}
+				},
+                rbar: [{
+                    xtype: 'button',
+                    text: '添加',
+                    handler: function (btn) {
+                    	var grid = btn.ownerCt.ownerCt;
+                    	grid.getStore().add({value: ''});
+                    	grid.getPlugin().startEditByPosition({ row: grid.getStore().getCount() - 1, column: 1 });
+                    }
+                }, {
+                    xtype: 'button',
+                    text: '删除',
+                    handler: function (btn) {
+                        var grid = btn.ownerCt.ownerCt;
+	                    var record = grid.getSelectionModel().getSelection()[0];
+	                    grid.getStore().remove(record);
+                    }
+                },'->', {
+                	xtype: 'button',
+                	text: '说明',
+                    iconCls: 'x-info-icon',
+                    tooltip: '图形优先从该色池中取色，未定义的项再从默认色池中取，支持多种色值格式'
+                }],
+                load: function () {
+                    var grid = this;
+                    var params = me.paramRecord.get('optionalValues') || [];
+                    var record = params.map(function (p) {
+                        return {
+                            value: p
+                        }
+                    });
+                    grid.getStore().loadData(record);
+                },
+                getConfig: function () {
+                    var grid = this;
+                    var config = [];
+                    Ext.Array.each(grid.getStore().data.items, function(item) {
+                    	if(item.data.value) {
+                    		config.push(item.data.value);
+                    	}
+                    });
+                    return config;
+                }
+            }],
+            buttonAlign: 'center',
+            buttons: [{
+                text: '确定',
+                formBind: true,
+                handler: function (btn) {
+                    var win = btn.ownerCt.ownerCt;
+                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
+                    if (componet) {
+                        var grid = componet;
+                        var fieldname = win.field.column.dataIndex;
+                        var selections = grid.getSelectionModel().getSelection();
+                        var store = grid.getStore();
+                        var selected = selections[0];
+                        selected.set(fieldname, Ext.JSON.encode(win.getConfig()));
+                        var rowIndex = store.indexOf(selected);
+                        var colIndex = 0;
+                        var columns = grid.columnManager.columns;
+                        for (var i = 0; i < columns.length; i++) {
+                            var column = columns[i];
+                            if (column.dataIndex == fieldname) {
+                                colIndex = i;
+                                break;
+                            }
+                        }
+
+                        var getPropConfigByRecord = function (records) {
+                            var propConfig = new Array();
+                            var obj;
+                            Ext.Array.each(records, function (record) {
+                                obj = new Object();
+                                obj.display = record.get('display');
+                                obj.property = record.get('property');
+                                obj.propvalue = record.get('propvalue');
+                                propConfig.push(obj);
+                            });
+                            return propConfig;
+                        }
+
+                        var detailGrid = Ext.getCmp('elementdetailgrid');
+                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
+                        detailSelect.set('propconfig', getPropConfigByRecord(grid.store.data.items));
+
+                        grid.getPlugin().startEditByPosition({
+                            row: rowIndex,
+                            column: colIndex
+                        });
+                    } else {
+                        win.field.setValue(Ext.JSON.encode(win.getConfig()));
+                    }
+                    win.close();
+                }
+            }, {
+                text: '取消',
+                handler: function (btn) {
+                    var win = btn.ownerCt.ownerCt;
+                    win.close();
+                }
+            }],
+            listeners: {
+                afterrender: function () {
+                    var me = this;
+                    me.setConfig(me.field.getValue());
+                }
+            },
+            setConfig: function (configStr) {
+                var me = this;
+                var grid = me.down('grid');
+                var configObj = Ext.JSON.decode(configStr || '[]');
+                Ext.Array.each(configObj, function(obj) {
+                	grid.getStore().add({value: obj});
+                });
+            },
+            getConfig: function () {
+                var me = this;
+                var grid = me.down('grid');
+                return grid.getConfig();
+            }
+        });
+        legendEditor.show();
+    }
+});

kanban-console/src/main/webapp/resources/app/view/core/trigger/LegendTrigger.js

@@ -0,0 +1,194 @@
+/**
+ * chart图例设置
+ */
+Ext.define('erp.view.core.trigger.LegendTrigger', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.legendtrigger',
+    triggerCls: 'legend-trigger-icon',
+    onTriggerClick: function() {
+        var trigger = this;
+        try {
+            Ext.JSON.decode(trigger.getValue() || '{}');
+        }catch(e) {
+            showErrorMsg('失败', '格式有误！');
+            return;
+        }
+        var legendEditor = Ext.create('Ext.window.Window', {
+            field: trigger,
+            title: trigger.fieldLabel,
+            width:700,
+            height:320,
+            modal:true,
+            layout:'border',
+            items: [{
+                xtype:'form',
+                region: 'center',
+                bodyPadding: 10,
+                autoScroll: true,
+                layout: 'column',
+                defaults: {
+                	padding: '0 10 10 10',
+                	width: 300
+                },
+                items: [{
+                	xtype: 'checkbox',
+                	fieldLabel: '隐藏图例',
+                    name: 'hide',
+                    inputValue: true
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '左边距(%)',
+					name: 'left',
+					minValue: 0,
+					maxValue: 100,
+					emptyText: 'auto'
+				}, {
+                    xtype: 'numberfield',
+                    fieldLabel: '上边距(%)',
+                    name: 'top',
+                    minValue: 0,
+					maxValue: 100,
+                    emptyText: 'auto'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '<font title="所有图例所占的宽度">宽度(px)</font>',
+                    name: 'width',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="所有图例所占的高度">高度(px)</font>',
+                    name: 'height',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                    xtype: 'combobox',
+                    fieldLabel: '<font title="图例的排布方向">布局朝向</font>',
+                    name: 'orient',
+                    editable: false,
+                    store: Ext.create('Ext.data.Store', {
+                        fields: ['value', 'name'],
+                        data : [
+                            { name: '水平', value: 'horizontal'},
+                            { name: '垂直', value: 'vertical'}
+                        ]
+                    }),
+                    queryMode: 'local',
+                    displayField: 'name',
+                    valueField: 'value',
+                    emptyText: '水平'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '图例项间距(px)',
+                	name: 'itemGap',
+                	minValue: 0,
+                	emptyText: '10'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '图例项宽度(px)',
+                	name: 'itemWidth',
+                	minValue: 0,
+                	emptyText: '25'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '图例项高度(px)',
+                	name: 'itemHeight',
+                	minValue: 0,
+                	emptyText: '14'
+                }],
+                setConfig: function(configObj) {
+                    var form = this;
+                    var o = {
+                        data: Object.assign({}, configObj),
+                        getData: function() {return this.data}
+                    };
+                    form.loadRecord(o);
+                },
+                getConfig: function() {
+                    var form = this;
+                    var config = form.getForm().getValues();
+                    configObj = {};
+                    for(var key in config) {
+                        if(config[key]) {
+                        	configObj[key] = config[key];
+                        }
+                    }
+                    return configObj;
+                }
+            }],
+            buttonAlign: 'center',
+            buttons:[{
+                text:'确定',
+                formBind:true,
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
+                    if(componet) {
+                        var grid = componet;
+                        var fieldname = win.field.column.dataIndex;
+                        var selections = grid.getSelectionModel().getSelection();
+                        var store = grid.getStore();
+                        var selected = selections[0];
+                        selected.set(fieldname, Ext.JSON.encode( win.getConfig() ) );
+                        var rowIndex = store.indexOf(selected);
+                        var colIndex = 0;
+                        var columns = grid.columnManager.columns;
+                        for(var i = 0; i < columns.length; i ++) {
+                            var column = columns[i];
+                            if(column.dataIndex == fieldname) {
+                                colIndex = i;
+                                break;
+                            }
+                        }
+
+                        var getPropConfigByRecord = function(records) {
+                            var propConfig = new Array();
+                            var obj;
+                            Ext.Array.each(records,function(record){
+                                obj = new Object();
+                                obj.display = record.get('display');
+                                obj.property = record.get('property');
+                                obj.propvalue = record.get('propvalue');
+                                propConfig.push(obj);
+                            });
+                            return propConfig;
+                        }
+
+                        var detailGrid = Ext.getCmp('elementdetailgrid');
+                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
+                        detailSelect.set('propconfig',getPropConfigByRecord(grid.store.data.items));
+
+                        grid.getPlugin().startEditByPosition({row: rowIndex, column: colIndex});
+                    }else {
+                        win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
+                    }
+                    win.close();
+                }
+            },{
+                text:'取消',
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    win.close();
+                }
+            }],
+            listeners: {
+                afterrender: function() {
+                    var me = this;
+                    me.setConfig(me.field.getValue());
+                }
+            },
+            setConfig: function(configStr) {
+                var me = this;
+                var form = me.down('form');
+                var configObj = Ext.JSON.decode(configStr || '{}');
+                form.setConfig(configObj);
+            },
+            getConfig: function() {
+                var me = this;
+                var form = me.down('form');
+                return form.getConfig();
+            }
+        });
+        legendEditor.show();
+    }
+}); 

kanban-console/src/main/webapp/resources/app/view/core/trigger/LineTrigger.js

@@ -0,0 +1,263 @@
+/**
+ * chart-line设置
+ */
+Ext.define('erp.view.core.trigger.LineTrigger', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.linetrigger',
+    triggerCls: 'line-trigger-icon',
+    onTriggerClick: function() {
+        var trigger = this;
+        try {
+            Ext.JSON.decode(trigger.getValue() || '{}');
+        }catch(e) {
+            showErrorMsg('失败', '格式有误！');
+            return;
+        }
+        var legendEditor = Ext.create('Ext.window.Window', {
+            field: trigger,
+            title: trigger.fieldLabel,
+            width: 700,
+            height: 400,
+            modal:true,
+            layout:'border',
+            items: [{
+                xtype:'form',
+                region: 'center',
+                bodyPadding: 10,
+                autoScroll: true,
+                layout: 'column',
+                defaults: {
+                	padding: '0 10 10 10',
+                	width: 300
+                },
+                items: [{
+                    xtype: 'numberfield',
+                    fieldLabel: '上边距(%)',
+                    name: 'top',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '左边距(%)',
+                    name: 'left',
+                    minValue: 0,
+                    emptyText: '10'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '右边距(%)',
+                    name: 'right',
+                    minValue: 0,
+                    emptyText: '10'
+                }, {
+                    xtype: 'numberfield',
+                    fieldLabel: '下边距(%)',
+                    name: 'bottom',
+                    minValue: 0,
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'numberfield',
+                    fieldLabel: '线宽(px)',
+                    name: 'lineWidth',
+                    minValue: 0,
+                    emptyText: '2'
+                }, {
+                	xtype: 'combobox',
+                	fieldLabel: '线型',
+                	name: 'lineType',
+                	listConfig: {
+                        maxHeight: 100
+                    },
+                    store: Ext.create('Ext.data.Store', {
+                        fields: ['value', 'name'],
+                        data : [
+                            { name: '实线', value: 'solid' },
+                        	{ name: '虚线', value: 'dashed' },
+                            { name: '点线', value: 'dotted' }
+                        ]
+                    }),
+                    queryMode: 'local',
+                    displayField: 'name',
+                    valueField: 'value',
+                    emptyText: '实线'
+                }, {
+                	xtype: 'checkbox',
+                	fieldLabel: '<font title="线条将平滑转折">平滑线条</font>',
+                	name: 'smooth',
+                	inputValue: true
+                }, {
+                	xtype: 'checkbox',
+                	fieldLabel: '隐藏标注图形',
+                	name: 'hideSymbol',
+                	inputValue: true
+                }, {
+                	xtype: 'combobox',
+                	fieldLabel: '标注图形样式',
+                	name: 'symbol',
+                	listConfig: {
+                        maxHeight: 120
+                    },
+                    store: Ext.create('Ext.data.Store', {
+                        fields: ['value', 'name'],
+                        data : [
+                            { name: '圆形', value: 'circle' },
+                        	{ name: '空心圆', value: 'emptyCircle' },
+                            { name: '矩形', value: 'rect' },
+                            { name: '圆角矩形', value: 'roundRect' },
+                            { name: '三角形', value: 'triangle' },
+                            { name: '菱形', value: 'diamond' },
+                            { name: '指针', value: 'pin' },
+                            { name: '箭头', value: 'arrow' }
+                        ]
+                    }),
+                    queryMode: 'local',
+                    displayField: 'name',
+                    valueField: 'value',
+                    emptyText: '圆形'
+                }, {
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="标注图形的大小">标注图形大小</font>',
+                	name: 'symbolSize',
+                	minValue: 0,
+                    emptyText: '4'
+                }, {
+                	xtype: 'checkbox',
+                	fieldLabel: '隐藏标注文字',
+                	name: 'hideLabel',
+                	inputValue: true
+                }, {
+                	xtype: 'combobox',
+                	fieldLabel: '标注文字位置',
+                	name: 'labelPosition',
+                	listConfig: {
+                        maxHeight: 180
+                    },
+                    store: Ext.create('Ext.data.Store', {
+                        fields: ['value', 'name'],
+                        data : [
+                            { name: '外上方', value: 'top'},
+                            { name: '外左方', value: 'left'},
+                            { name: '外右方', value: 'right'},
+                            { name: '外下方', value: 'bottom'},
+                            { name: '内居中', value: 'inside'},
+                            { name: '内靠左', value: 'insideLeft'},
+                            { name: '内靠右', value: 'insideRight'},
+                            { name: '内置顶', value: 'insideTop'},
+                            { name: '内置底', value: 'insideBottom'},
+                            { name: '内上左', value: 'insideTopLeft'},
+                            { name: '内下左', value: 'insideBottomLeft'},
+                            { name: '内上右', value: 'insideTopRight'},
+                            { name: '内下右', value: 'insideBottomRight'}
+                        ]
+                    }),
+                    queryMode: 'local',
+                    displayField: 'name',
+                    valueField: 'value',
+                    emptyText: '外上方'
+                },{
+                	xtype: 'numberfield',
+                	fieldLabel: '<font title="距离图形元素的距离，配合\'标注位置\'使用">标注距离(px)</font>',
+                	name: 'labelDistance',
+                	minValue: 0,
+                	emptyText: '5'
+                }, {
+                	xtype: 'texttrigger',
+                	fieldLabel: '<font title="模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。示例：formatter: \'{a}\\n{b}: {c}\'">标注render</font>',
+                	name: 'labelFormatter',
+                	emptyText: '{c}'
+                }],
+                setConfig: function(configObj) {
+                    var form = this;
+                    var o = {
+                        data: Object.assign({}, configObj),
+                        getData: function() {return this.data}
+                    };
+                    form.loadRecord(o);
+                },
+                getConfig: function() {
+                    var form = this;
+                    var config = form.getForm().getValues();
+                    configObj = {};
+                    for(var key in config) {
+                        if(config[key]) {
+                        	configObj[key] = config[key];
+                        }
+                    }
+                    return configObj;
+                }
+            }],
+            buttonAlign: 'center',
+            buttons:[{
+                text:'确定',
+                formBind:true,
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
+                    if(componet) {
+                        var grid = componet;
+                        var fieldname = win.field.column.dataIndex;
+                        var selections = grid.getSelectionModel().getSelection();
+                        var store = grid.getStore();
+                        var selected = selections[0];
+                        selected.set(fieldname, Ext.JSON.encode( win.getConfig() ) );
+                        var rowIndex = store.indexOf(selected);
+                        var colIndex = 0;
+                        var columns = grid.columnManager.columns;
+                        for(var i = 0; i < columns.length; i ++) {
+                            var column = columns[i];
+                            if(column.dataIndex == fieldname) {
+                                colIndex = i;
+                                break;
+                            }
+                        }
+
+                        var getPropConfigByRecord = function(records) {
+                            var propConfig = new Array();
+                            var obj;
+                            Ext.Array.each(records,function(record){
+                                obj = new Object();
+                                obj.display = record.get('display');
+                                obj.property = record.get('property');
+                                obj.propvalue = record.get('propvalue');
+                                propConfig.push(obj);
+                            });
+                            return propConfig;
+                        }
+
+                        var detailGrid = Ext.getCmp('elementdetailgrid');
+                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
+                        detailSelect.set('propconfig',getPropConfigByRecord(grid.store.data.items));
+
+                        grid.getPlugin().startEditByPosition({row: rowIndex, column: colIndex});
+                    }else {
+                        win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
+                    }
+                    win.close();
+                }
+            },{
+                text:'取消',
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    win.close();
+                }
+            }],
+            listeners: {
+                afterrender: function() {
+                    var me = this;
+                    me.setConfig(me.field.getValue());
+                }
+            },
+            setConfig: function(configStr) {
+                var me = this;
+                var form = me.down('form');
+                var configObj = Ext.JSON.decode(configStr || '{}');
+                form.setConfig(configObj);
+            },
+            getConfig: function() {
+                var me = this;
+                var form = me.down('form');
+                return form.getConfig();
+            }
+        });
+        legendEditor.show();
+    }
+}); 

kanban-console/src/main/webapp/resources/app/view/core/trigger/PieTrigger.js

@@ -0,0 +1,155 @@
+/**
+ * chart-pie设置
+ */
+Ext.define('erp.view.core.trigger.PieTrigger', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.pietrigger',
+    triggerCls: 'pie-trigger-icon',
+    onTriggerClick: function() {
+        var trigger = this;
+        try {
+            Ext.JSON.decode(trigger.getValue() || '{}');
+        }catch(e) {
+            showErrorMsg('失败', '格式有误！');
+            return;
+        }
+        var legendEditor = Ext.create('Ext.window.Window', {
+            field: trigger,
+            title: trigger.fieldLabel,
+            width:360,
+            height:320,
+            modal:true,
+            layout:'border',
+            items: [{
+                xtype:'form',
+                region: 'center',
+                bodyPadding: 10,
+                autoScroll: true,
+                layout: 'column',
+                defaults: {
+                	padding: '0 10 10 10',
+                	width: 300
+                },
+                items: [{
+                	xtype: 'textfield',
+                	fieldLabel: '<font title="饼图的中心（圆心）x坐标,可以设置为数字或相对容器的百分比">圆心位置-x</font>',
+                    name: 'centerx',
+                    emptyText: 'auto'
+                }, {
+                	xtype: 'textfield',
+                	fieldLabel: '<font title="饼图的中心（圆心）y坐标,可以设置为数字或相对容器的百分比">圆心位置-y</font>',
+                    name: 'centery',
+                    emptyText: 'auto'
+                    
+                }, {
+                	xtype: 'textfield',
+                	fieldLabel: '<font title="通过设置该项可以把饼图展示为圆环图，可以设置为数字或相对于容器高宽中较小的一项的一半的百分比。">内半径</font>',
+					name: 'radius1',
+					emptyText: '0'
+				}, {
+                    xtype: 'textfield',
+                    fieldLabel: '<font title="饼图整体半径，可以设置为数字或相对于容器高宽中较小的一项的一半的百分比。">外半径</font>',
+                    name: 'radius2',
+                    emptyText: 'auto'
+                }, {
+                    xtype: 'checkbox',
+                    fieldLabel: '隐藏标注',
+                    name: 'hideLabel',
+                    inputValue: true
+                }],
+                setConfig: function(configObj) {
+                    var form = this;
+                    var o = {
+                        data: Object.assign({}, configObj),
+                        getData: function() {return this.data}
+                    };
+                    form.loadRecord(o);
+                },
+                getConfig: function() {
+                    var form = this;
+                    var config = form.getForm().getValues();
+                    configObj = {};
+                    for(var key in config) {
+                        if(config[key]) {
+                        	configObj[key] = config[key];
+                        }
+                    }
+                    return configObj;
+                }
+            }],
+            buttonAlign: 'center',
+            buttons:[{
+                text:'确定',
+                formBind:true,
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
+                    if(componet) {
+                        var grid = componet;
+                        var fieldname = win.field.column.dataIndex;
+                        var selections = grid.getSelectionModel().getSelection();
+                        var store = grid.getStore();
+                        var selected = selections[0];
+                        selected.set(fieldname, Ext.JSON.encode( win.getConfig() ) );
+                        var rowIndex = store.indexOf(selected);
+                        var colIndex = 0;
+                        var columns = grid.columnManager.columns;
+                        for(var i = 0; i < columns.length; i ++) {
+                            var column = columns[i];
+                            if(column.dataIndex == fieldname) {
+                                colIndex = i;
+                                break;
+                            }
+                        }
+
+                        var getPropConfigByRecord = function(records) {
+                            var propConfig = new Array();
+                            var obj;
+                            Ext.Array.each(records,function(record){
+                                obj = new Object();
+                                obj.display = record.get('display');
+                                obj.property = record.get('property');
+                                obj.propvalue = record.get('propvalue');
+                                propConfig.push(obj);
+                            });
+                            return propConfig;
+                        }
+
+                        var detailGrid = Ext.getCmp('elementdetailgrid');
+                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
+                        detailSelect.set('propconfig',getPropConfigByRecord(grid.store.data.items));
+
+                        grid.getPlugin().startEditByPosition({row: rowIndex, column: colIndex});
+                    }else {
+                        win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
+                    }
+                    win.close();
+                }
+            },{
+                text:'取消',
+                handler:function(btn){
+                    var win = btn.ownerCt.ownerCt;
+                    win.close();
+                }
+            }],
+            listeners: {
+                afterrender: function() {
+                    var me = this;
+                    me.setConfig(me.field.getValue());
+                }
+            },
+            setConfig: function(configStr) {
+                var me = this;
+                var form = me.down('form');
+                var configObj = Ext.JSON.decode(configStr || '{}');
+                form.setConfig(configObj);
+            },
+            getConfig: function() {
+                var me = this;
+                var form = me.down('form');
+                return form.getConfig();
+            }
+        });
+        legendEditor.show();
+    }
+}); 

kanban-console/src/main/webapp/resources/app/view/core/trigger/StyleTrigger.js

@@ -23,54 +23,10 @@ Ext.define('erp.view.core.trigger.StyleTrigger', {
                 bodyPadding: 10,
                 autoScroll: true,
                 items: [{
-                    xtype: 'triggerfield',
-                    name: 'color',
-                    _CLICK: new Date(),
+                    xtype: 'colorpicker',
                     fieldLabel: '字体颜色',
-                    triggerCls: '',
-                    overCls: '',
-                    hideTrigger: false,
-                    editable: true,
-                    allowBlank: true,
-                    emptyText: '#FFFFFF',
-                    onTriggerClick: function () {
-                        var me = this;
-                        if (!me.picker) {
-                            me.picker = Ext.create('Ext.picker.Color', {
-                                pickerField: this,
-                                ownerCt: this,
-                                renderTo: Ext.getBody(),
-                                floating: true,
-                                focusOnShow: true,
-                                style: {
-                                    backgroundColor: "#fff"
-                                },
-                                listeners: {
-                                    scope: this,
-                                    select: function (field, value, opts) {
-                                        me.setValue('#' + value);
-                                        me.picker.hide();
-                                        me.pickerShow = false;
-                                    }
-                                }
-                            });
-                            me.picker.alignTo(me.inputEl, 'tl-bl?');
-                        }
-                        if(me.pickerShow) {
-                            me.picker.hide();
-                            me.pickerShow = false;
-                        }else {
-                            me.picker.show();
-                            me.pickerShow = true;
-                        }
-                    },
-                    listeners: {
-                        change: function(field, newValue, oldValue, eOpts) {
-                            this.inputEl.applyStyles({
-                                backgroundColor: newValue
-                            });
-                        }
-                    }
+                    name: 'color',
+                    
                 }, {
                     xtype: 'numberfield',
                     fieldLabel: '字体大小',
@@ -131,9 +87,8 @@ Ext.define('erp.view.core.trigger.StyleTrigger', {
                     emptyText: '左对齐'
                 }, {
                     xtype: 'textfield',
-                    fieldLabel: '自定义',
-                    name: 'otherStyle',
-                    emptyText: '多个样式以分号;间隔'
+                    fieldLabel: '<font title="多个样式以分号;间隔">自定义</font>',
+                    name: 'otherStyle'
                 }],
                 setStyle: function(styleObj) {
                     var styleForm = this;

kanban-console/src/main/webapp/resources/css/boardmodel.css

@@ -30,4 +30,37 @@
 }
 .delete {
 	background-image: url(../images/icons/delete16x16.png) !important;
+}
+.legend-trigger-icon {
+	background-repeat: no-repeat !important;
+    background-position-y: 2px !important;
+    background-position-x: 0 !important;
+	background-image: url(../images/icons/legend.png) !important;
+}
+.colorpool-trigger-icon {
+	background-repeat: no-repeat !important;
+    background-position-y: 2px !important;
+    background-position-x: 0 !important;
+	background-image: url(../images/icons/colorpool.png) !important;
+}
+.x-info-icon {
+	background-image: url(../images/icons/info.png) !important;
+}
+.pie-trigger-icon {
+	background-repeat: no-repeat !important;
+    background-position-y: 2px !important;
+    background-position-x: 0 !important;
+	background-image: url(../images/icons/pie-chart.png) !important;
+}
+.bar-trigger-icon {
+	background-repeat: no-repeat !important;
+    background-position-y: 2px !important;
+    background-position-x: 0 !important;
+	background-image: url(../images/icons/bar-chart.png) !important;
+}
+.line-trigger-icon {
+	background-repeat: no-repeat !important;
+    background-position-y: 2px !important;
+    background-position-x: 0 !important;
+	background-image: url(../images/icons/line-chart.png) !important;
 }

kanban-console/src/main/webapp/resources/js/util/utils.js

@@ -132,4 +132,89 @@ function showErrorMsg(title, message, win) {
 	}else{
 		Ext.Msg.alert(title, message);
 	}
+}
+/**
+ * rgb色值转为十六进制格式
+ **/
+function color2Hex(color){
+    var that = color;
+    //十六进制颜色值的正则表达式
+    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+    // 如果是rgb颜色表示
+    if (/^(rgb|RGB)/.test(that)) {
+        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+        var strHex = "#";
+        for (var i=0; i<aColor.length; i++) {
+            var hex = Number(aColor[i]).toString(16);
+            if (hex === "0") {
+                hex += hex;    
+            }
+            strHex += hex;
+        }
+        if (strHex.length !== 7) {
+            strHex = that;    
+        }
+        return strHex;
+    } else if (reg.test(that)) {
+        var aNum = that.replace(/#/,"").split("");
+        if (aNum.length === 6) {
+            return that;    
+        } else if(aNum.length === 3) {
+            var numHex = "#";
+            for (var i=0; i<aNum.length; i+=1) {
+                numHex += (aNum[i] + aNum[i]);
+            }
+            return numHex;
+        }
+    }
+    return that;
+}
+/**
+ * 十六进制色值转为RGB格式
+ **/
+function color2Rgb(color){
+    var sColor = color.toLowerCase();
+    //十六进制颜色值的正则表达式
+    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+    // 如果是16进制颜色
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            var sColorNew = "#";
+            for (var i=1; i<4; i+=1) {
+                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
+            }
+            sColor = sColorNew;
+        }
+        //处理六位的颜色值
+        var sColorChange = [];
+        for (var i=1; i<7; i+=2) {
+            sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
+        }
+        return "RGB(" + sColorChange.join(",") + ")";
+    }
+    return sColor;
+}
+/**
+ * 判断颜色是不是深色
+ * colorRgb rgb格式色值
+ */
+function isDeepColor(colorRgb) {
+	var RgbValue = colorRgb.replace("RGB(", "").replace(")", "");
+	var RgbValueArry = RgbValue.split(",");
+    var grayLevel = RgbValueArry[0] * 0.299 + RgbValueArry[1] * 0.587 + RgbValueArry[2] * 0.114;
+	if (grayLevel >= 192) {
+		return false;
+	} else {
+		return true;
+	}
+}
+
+function isColorValue(value) {
+	var v = color2Hex(value);
+	var reg = new RegExp(/^#[a-fA-F0-9]{6}$/);
+	if (reg.test(v)) {
+        return true;
+    }else{
+       return false;
+    }
 }