分屏展示最大限制改为20/展示效果优化

kanban-console/src/main/webapp/resources/app/view/desktop/AreaView.js

@@ -1,169 +1,194 @@
-Ext.define('erp.view.desktop.AreaView', {
-	extend: 'Ext.panel.Panel',
-	alias: 'widget.areaview',
-	id: 'areaView',
-	layout: 'column',
-	arearows: 1,
-	areacols: 1,
-	selectedCls: 'x-areaview-selected',
-	areaConfig: [],
-	initComponent: function() {
-		var me = this;
-		
-		Ext.apply(me, {
-			items: []
-		});
-		me.callParent(arguments);
-	},
-	listeners: {
-		layoutHeight: function(areaview) {
-			var panels = areaview.items.items;
-			Ext.Array.each(panels, function(panel) {
-				panel.fireEvent('layoutHeight', panel);
-			});
-		}
-	},
-	createArea: function(values) {
-		var me = this, panels = [], num = 1,
-			viewtype = values.viewtype,
-			areacount = values.areacount,
-			rows = values.arearows, 
-			cols = values.areacols;
-		
-		if(viewtype == 'more') {
-			rows = 1;
-			cols = areacount;
-		}
-		
-		var viewHeight = Ext.getCmp('areaView').getHeight(),
-			panelHeight = viewHeight / rows;
-		for(var i = 0; i < rows; i++) {
-			for(var j = 0; j < cols; j++) {
-				panels.push({
-					xtype: 'panel',
-					height: panelHeight,
-					columnWidth: 1/cols,
-					bodyCls: 'x-area-view',
-					areaConfig: me.oldAreaConfig[num-1] || {
-						viewIndex: num-1,
-						viewParameters: Ext.getCmp('paramForm').getDefaultValues(),
-						viewKanbans: []
-					},
-					index: num-1,
-					html: num++,
-					listeners: {
-						afterlayout: function(panel) {
-							if(me.layoutHeighted) {
-								return;
-							}
-							var viewHeight = Ext.getCmp('areaView').getHeight(),
-								panelHeight = viewHeight / rows;
-							me.layoutHeighted = true;
-							panel.setHeight(panelHeight);
-							setTimeout(function() {
-								me.layoutHeighted = false;
-							}, 50);
-						},
-						layoutHeight: function(panel) {
-							var viewHeight = Ext.getCmp('areaView').getHeight(),
-								panelHeight = viewHeight / rows;
-							panel.setHeight(panelHeight);
-						},
-						click: {
-							element: 'el',
-							fn: function(e,dom,el){
-								var panelEl = this, panel = Ext.getCmp(panelEl.id);
-								// 选中样式
-								me.clearSelected();
-								me.setSelected(panel.index);
-							}
-						},
-						mouseenter: {
-							element: 'el',
-							fn: function(e,dom,el){
-								var panelEl = this, panel = Ext.getCmp(panelEl.id);
-								/*debugger;*/
-							}
-						}
-					}
-				});
-			}
-		}
-		
-		me.clearSelected();
-		me.removeAll();
-		me.add(panels);
-		me.doLayout();
-		
-		me.setAreaConfig();
-		me.setSelected(me.currentSelectedIndex);
-	},
-	setAreaConfig: function() {
-		var me = this;
-		me.areaConfig = me.items.items.map(function(p, i) {
-			return p.areaConfig;
-		});
-	},
-	getAreaConfig: function() {
-		var me = this;
-		return me.areaConfig;
-	},
-	clearSelected: function() {
-		var me = this, areaPanels = me.items.items;
-		Ext.Array.each(areaPanels, function(areaPanel) {
-			areaPanel.removeCls(me.selectedCls);
-		});
-		var paramForm = Ext.getCmp('paramForm');
-		var template = Ext.getCmp('template');
-		template.addParamCombo(paramForm, []);
-	},
-	setSelected: function(index) {
-		var me = this;
-		if(index == undefined || index < 0) {
-			index = 0;
-		}
-		if((index+1 > me.items.items.length)) {
-			index = 0;
-		}
-		var panel = me.items.items[index];
-		panel.addCls(me.selectedCls);
-		me.currentSelectedIndex = index;
-		var areaConfig = me.areaConfig[index];
-		// 获得配置的参数数据以及勾选的看板
-		var paramForm = Ext.getCmp('paramForm');
-		var template = Ext.getCmp('template');
-		template.addParamCombo(paramForm, template.parameterItems, index+1);
-		// 赋值
-		if(areaConfig) {
-			if(areaConfig.viewParameters) {
-				var p = {
-					data: areaConfig.viewParameters,
-					getData: function() {
-						return this.data;
-					}
-				}
-				paramForm.loadRecord(p);
-			}
-			if(areaConfig.viewKanbans) {
-				// 勾选看板
-				var grid = Ext.getCmp('modelGrid');
-				grid.selectModels(areaConfig.viewKanbans);
-			}
-		}else {
-			Ext.getCmp('refreshFrequency').setValue(0);
-			Ext.getCmp('refreshFrequency').setValue(5);
-		}
-	},
-	setViewParameters: function(viewParameters) {
-		var me = this, index = me.currentSelectedIndex; me.areaConfig[index] = me.areaConfig[index] || {
-			viewIndex: index
-		};
-		me.areaConfig[index].viewParameters = viewParameters || me.areaConfig[index].viewParameters;
-	},
-	setViewModel: function(codes) {
-		codes = codes || [];
-		var me = this, index = me.currentSelectedIndex, panel = me.items.items[index];
-		panel.areaConfig.viewKanbans = codes;
-		me.areaConfig[index].viewKanbans = codes;
-	}
+Ext.define('erp.view.desktop.AreaView', {
+	extend: 'Ext.panel.Panel',
+	alias: 'widget.areaview',
+	id: 'areaView',
+	layout: 'column',
+	arearows: 1,
+	areacols: 1,
+	selectedCls: 'x-areaview-selected',
+	areaConfig: [],
+	initComponent: function() {
+		var me = this;
+		
+		Ext.apply(me, {
+			items: []
+		});
+		me.callParent(arguments);
+	},
+	listeners: {
+		layoutHeight: function(areaview) {
+			var panels = areaview.items.items;
+			Ext.Array.each(panels, function(panel) {
+				panel.fireEvent('layoutHeight', panel);
+			});
+		}
+	},
+	createArea: function(values) {
+		var me = this, panels = [], num = 1,
+			viewtype = values.viewtype,
+			areacount = values.areacount,
+			rows = values.arearows, 
+			cols = values.areacols,
+			maxNum = areacount;
+		
+		if(viewtype == 'more') {
+			if(areacount <= 4) {
+				rows = 1;
+				cols = areacount
+			}else {
+				rows = Math.ceil(areacount / 4);
+				cols = 4;
+			}
+		}
+		
+		var viewHeight = Ext.getCmp('areaView').getHeight(),
+			panelHeight = viewHeight / rows;
+		for(var i = 0; i < rows; i++) {
+			for(var j = 0; j < cols; j++) {
+				var oldConfig = me.oldAreaConfig[num-1];
+				panels.push({
+					xtype: 'panel',
+					height: panelHeight,
+					columnWidth: 1/cols,
+					bodyCls: 'x-area-view',
+					areaConfig: oldConfig ? {
+						ignore: viewtype == 'more' && num > maxNum,
+						viewIndex: num-1,
+						viewParameters: oldConfig.viewParameters,
+						viewKanbans: oldConfig.viewKanbans
+					} : {
+						ignore: num > maxNum,
+						viewIndex: num-1,
+						viewParameters: Ext.getCmp('paramForm').getDefaultValues(),
+						viewKanbans: []
+					},
+					index: num - 1,
+					html: num,
+					hidden: viewtype == 'more' && num > maxNum,
+					listeners: {
+						afterlayout: function(panel) {
+							if(me.layoutHeighted) {
+								return;
+							}
+							var viewHeight = Ext.getCmp('areaView').getHeight(),
+								panelHeight = viewHeight / rows;
+							me.layoutHeighted = true;
+							panel.setHeight(panelHeight);
+							setTimeout(function() {
+								me.layoutHeighted = false;
+							}, 50);
+						},
+						layoutHeight: function(panel) {
+							var viewHeight = Ext.getCmp('areaView').getHeight(),
+								panelHeight = viewHeight / rows;
+							panel.setHeight(panelHeight);
+						},
+						click: {
+							element: 'el',
+							fn: function(e,dom,el){
+								var panelEl = this, panel = Ext.getCmp(panelEl.id);
+								// 选中样式
+								me.clearSelected();
+								me.setSelected(panel.index);
+							}
+						},
+						mouseenter: {
+							element: 'el',
+							fn: function(e,dom,el){
+								var panelEl = this, panel = Ext.getCmp(panelEl.id);
+								/*debugger;*/
+							}
+						}
+					}
+				});
+				num++;
+			}
+		}
+		
+		me.clearSelected();
+		me.removeAll();
+		me.add(panels);
+		me.doLayout();
+		
+		me.setAreaConfig();
+		me.setSelected(me.currentSelectedIndex);
+	},
+	setAreaConfig: function() {
+		var me = this;
+		me.areaConfig = me.items.items.map(function(p, i) {
+			return p.areaConfig;
+		});
+	},
+	getAreaConfig: function() {
+		var me = this,
+		configs = [];
+		
+		Ext.Array.each(me.areaConfig, function(c) {
+			var nc = Object.assign({}, c);
+			if(!nc.ignore) {
+				configs.push(nc);
+			}
+		});
+		
+		console.log(configs);
+		return configs;
+	},
+	clearSelected: function() {
+		var me = this, areaPanels = me.items.items;
+		Ext.Array.each(areaPanels, function(areaPanel) {
+			areaPanel.removeCls(me.selectedCls);
+		});
+		var paramForm = Ext.getCmp('paramForm');
+		var template = Ext.getCmp('template');
+		template.addParamCombo(paramForm, []);
+	},
+	setSelected: function(index) {
+		var me = this;
+		if(index == undefined || index < 0) {
+			index = 0;
+		}
+		if((index+1 > me.items.items.length)) {
+			index = 0;
+		}
+		var panel = me.items.items[index];
+		panel.addCls(me.selectedCls);
+		me.currentSelectedIndex = index;
+		var areaConfig = me.areaConfig[index];
+		// 获得配置的参数数据以及勾选的看板
+		var paramForm = Ext.getCmp('paramForm');
+		var template = Ext.getCmp('template');
+		template.addParamCombo(paramForm, template.parameterItems, index+1);
+		// 赋值
+		if(areaConfig) {
+			if(areaConfig.viewParameters) {
+				var p = {
+					data: areaConfig.viewParameters,
+					getData: function() {
+						return this.data;
+					}
+				}
+				paramForm.loadRecord(p);
+			}
+			if(areaConfig.viewKanbans) {
+				// 勾选看板
+				var grid = Ext.getCmp('modelGrid');
+				grid.selectModels(areaConfig.viewKanbans);
+			}
+		}else {
+			Ext.getCmp('refreshFrequency').setValue(0);
+			Ext.getCmp('refreshFrequency').setValue(5);
+		}
+	},
+	setViewParameters: function(viewParameters) {
+		var me = this, index = me.currentSelectedIndex; me.areaConfig[index] = me.areaConfig[index] || {
+			viewIndex: index
+		};
+		me.areaConfig[index].viewParameters = viewParameters || me.areaConfig[index].viewParameters;
+	},
+	setViewModel: function(codes) {
+		codes = codes || [];
+		var me = this, index = me.currentSelectedIndex, panel = me.items.items[index];
+		panel.areaConfig.viewKanbans = codes;
+		me.areaConfig[index].viewKanbans = codes;
+	}
 });

kanban-console/src/main/webapp/resources/app/view/desktop/BoardParamWindow.js

@@ -85,7 +85,7 @@ Ext.define('erp.view.desktop.BoardParamWindow',{
 	        		name: 'areacount',
 	        		value: 1,
 	        		minValue: 1,
-	        		maxValue: 4,
+	        		maxValue: 20,
 	        		hidden: true,
 	        		listeners: {
 	        			change: function(countfiedl) {