pie图大小调整/table刷新数据错乱问题调整

kanban-client/app/component/Table.dev.jsx

@@ -98,7 +98,8 @@ class TableModel extends React.Component {
 		thead.getElementsByTagName('th')[0].style.height = `${trHeight}px` ;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
-		let trs = node.getElementsByClassName('fade-enter');
+		// let trs = node.getElementsByClassName('fade-enter').length == 0 ? (node.getElementsByClassName('rc-table-row')) : node.getElementsByClassName('fade-enter');
+		let trs = node.getElementsByClassName('rc-table-row');
 		for (let i = 0; i < trs.length; i++) {
 			trs[i].style.fontSize = trFontSize;
 			trs[i].style.height = `${trHeight}px` ;
@@ -129,7 +130,7 @@ class TableModel extends React.Component {
 				oldTrs[i].style.top = `${newTrTop}px`;
 				// 获得旧tds
 				let oldTds = oldTrs[i].getElementsByTagName('td');
-				for (let j = 0; j < oldTds.length; j++) {
+				for (let j = 0; j < newTds.length; j++) {
 					// 设置旧td=新td宽度
 					oldTds[j].style.maxWidth = `${newTds[j].offsetWidth}px`;
 					oldTds[j].style.minWidth = `${newTds[j].offsetWidth}px`;
@@ -217,6 +218,7 @@ class TableModel extends React.Component {
 			return;
 		}
 		this.newProps = nextProps;
+		this.columns = this.setColumnsRender(this.newProps.columns);
 		this.clearInterval();
 		this.initSort();
 		this.sortData(this.newProps.data);
@@ -225,7 +227,7 @@ class TableModel extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
-			return true;
+		return true;
 	}
 	getBodyWrapper(body) {
 		return (
@@ -240,9 +242,7 @@ class TableModel extends React.Component {
 
 	getTitle() {
 		const { title } = this.newProps;
-		// return function (state) {
-			return title;
-		// }
+		return title;
 	}
 
 	render() {

kanban-client/app/component/Table.jsx

@@ -98,7 +98,7 @@ class TableModel extends React.Component {
 		thead.getElementsByTagName('th')[0].style.height = `${trHeight}px` ;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
-		let trs = node.getElementsByClassName('fade-enter');
+		let trs = node.getElementsByClassName('rc-table-row');
 		for (let i = 0; i < trs.length; i++) {
 			trs[i].style.fontSize = trFontSize;
 			trs[i].style.height = `${trHeight}px` ;
@@ -129,7 +129,7 @@ class TableModel extends React.Component {
 				oldTrs[i].style.top = `${newTrTop}px`;
 				// 获得旧tds
 				let oldTds = oldTrs[i].getElementsByTagName('td');
-				for (let j = 0; j < oldTds.length; j++) {
+				for (let j = 0; j < newTds.length; j++) {
 					// 设置旧td=新td宽度
 					oldTds[j].style.maxWidth = `${newTds[j].offsetWidth}px`;
 					oldTds[j].style.minWidth = `${newTds[j].offsetWidth}px`;
@@ -214,6 +214,7 @@ class TableModel extends React.Component {
 			return;
 		}
 		this.newProps = nextProps;
+		this.columns = this.setColumnsRender(this.newProps.columns);
 		this.clearInterval();
 		this.initSort();
 		this.sortData(this.newProps.data);
@@ -237,9 +238,7 @@ class TableModel extends React.Component {
 
 	getTitle() {
 		const { title } = this.newProps;
-		// return function (state) {
-			return title;
-		// }
+		return title;
 	}
 
 	render() {

kanban-client/app/component/converter.dev.js

@@ -114,7 +114,7 @@ function tableConfig(model) {
 function barConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
     return {
         type: 'charts',
@@ -168,7 +168,7 @@ function barConfig(model) {
 function lineConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
     return {
         type: 'charts',
@@ -210,7 +210,7 @@ function lineConfig(model) {
                     type: ytype == 'numeric' ? 'value' : ytype
                 }],
                 series: getLineSeries(fontSize, series),
-                dataZoom: [
+                dataZoom: series.length > 0 ? [
                     {
                         type: 'slider',
                         show: false,
@@ -218,7 +218,7 @@ function lineConfig(model) {
                         start: 0,
                         endValue: Math.round(getScreenSize().width * layout.w / 100 / 60) >= series[0].data.length ? series[0].data.length - 1 : Math.round(getScreenSize().width * layout.w / 100 / 60),
                     }
-                ],
+                ] : null,
             }
         },
         layout: getLayout(layout)
@@ -228,7 +228,7 @@ function lineConfig(model) {
 function pieConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, series } = config;
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     series = series.map((v, i) => {
         v.value = v.data;
         return v;
@@ -334,9 +334,12 @@ function getLineSeries(fontSize, series) {
 }
 
 function getPieSeries(fontSize, layout, series) {
-    let data = series instanceof Array ? series : [series];
+    let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
     const model = {
         type: 'pie',
+        markPoint: {
+            symbol: 'circle'
+        },
         label: {
             normal: {
                 formatter: '{b}:  {c} \n {d}%'
@@ -346,17 +349,39 @@ function getPieSeries(fontSize, layout, series) {
     let s = Object.assign({}, model);
     s.name = '';
     s.data = data.map((d, i) => { d.name = d.name || 'Unkonw'; return d; });
+    if(series.length == 0) {
+        s.itemStyle = {
+            normal: {
+                color: '#b0a494',
+            }
+        };
+        s.label = {
+            normal: {
+                show: false
+            }
+        }
+        s.labelLine = {
+            normal: {
+                show: false
+            }
+        }
+        s.silent = true;
+    }
     return [s];
 }
 
 function getPieLegend(fontSize, layout, series) {
     let legend = {
         padding: 0,
+        type: 'scroll',
         itemGap: layout.w / 10,
         data: series.map((v, i) => {
             return v.name || 'Unkonw';
         })
     }
+    if(series.length == 0) {
+        legend.data = ['无数据']
+    }
     return legend;
 }
 

kanban-client/app/component/converter.js

@@ -114,7 +114,7 @@ function barConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     return {
         type: 'charts',
         config: {
@@ -185,7 +185,7 @@ function lineConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     return {
         type: 'charts',
         config: {
@@ -243,7 +243,7 @@ function lineConfig(model) {
                     }
                 }],
                 series: getLineSeries(fontSize, series),
-                dataZoom: [
+                dataZoom: series.length > 0 ? [
                     {
                         type: 'slider',
                         show: false,
@@ -251,7 +251,7 @@ function lineConfig(model) {
                         start: 0,
                         endValue: Math.round(getScreenSize().width * layout.w / 100 / 60) >= series[0].data.length ? series[0].data.length - 1 : Math.round(getScreenSize().width * layout.w / 100 / 60),
                     }
-                ],
+                ] : null,
             }
         },
         layout: getLayout(layout)
@@ -261,7 +261,7 @@ function lineConfig(model) {
 function pieConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, series } = config;
-    series = (series instanceof Array) ? series : [series];
+    series = series ? ((series instanceof Array) ? series : [series]) : [];
     series = series.map((v, i) => {
         v.value = v.data;
         return v;
@@ -375,7 +375,7 @@ function getLineSeries(fontSize, series) {
 }
 
 function getPieSeries(fontSize, layout, series) {
-    let data = series instanceof Array ? series : [series];
+    let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
     const model = {
         type: 'pie',
         label: {
@@ -390,6 +390,24 @@ function getPieSeries(fontSize, layout, series) {
     let s = Object.assign({}, model);
     s.name = '';
     s.data = data.map((d, i) => { d.name = d.name || 'Unkonw'; return d; });
+    if(series.length == 0) {
+        s.itemStyle = {
+            normal: {
+                color: '#b0a494',
+            }
+        };
+        s.label = {
+            normal: {
+                show: false
+            }
+        }
+        s.labelLine = {
+            normal: {
+                show: false
+            }
+        }
+        s.silent = true;
+    }
     return [s];
 }
 
@@ -404,6 +422,9 @@ function getPieLegend(fontSize, layout, series) {
             return v.name || 'Unkonw';
         })
     }
+    if(series.length == 0) {
+        legend.data = ['无数据']
+    }
     return legend;
 }
 

kanban-client/app/component/factory.dev.js

@@ -5,7 +5,7 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.dev.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/formT.json';
+import tempdata from '../data/refreshBug.json';
 
 class Factory extends React.Component {
 
@@ -128,7 +128,7 @@ class Factory extends React.Component {
                 this.setState({
                     model: converter(tempdata.data[this.index]),
                 });
-            }.bind(this), 10000)
+            }.bind(this), 7000)
         }else {
             this.getModelConfig(code[0]);
         }

kanban-client/app/data/testline.json

@@ -5,7 +5,7 @@
                 "items": [
                     {
                         "layout": {
-                            "w": 100,
+                            "w": 40,
                             "h": 100,
                             "y": 0,
                             "x": 0

kanban-client/app/data/testpie.json

@@ -6,14 +6,37 @@
                     {
                         "layout": {
                             "w": 50,
-                            "h": 100,
+                            "h": 50,
                             "y": 0,
                             "x": 0
                         },
                         "config": {
+                            "seriess": [{
+                                "name": "刘萌冰",
+                                "data": 0.0588
+                            },
+                            {
+                                "name": "杨若楠",
+                                "data": 0.0588
+                            }],
                             "series": [
                                 {
-                                    "name": "刘萌冰",
+                                    "name": "刘萌冰6",
+                                    "data": 0.0588
+                                },{
+                                    "name": "刘萌冰5",
+                                    "data": 0.0588
+                                },{
+                                    "name": "刘萌冰4",
+                                    "data": 0.0588
+                                },{
+                                    "name": "刘萌冰3",
+                                    "data": 0.0588
+                                },{
+                                    "name": "刘萌冰2",
+                                    "data": 0.0588
+                                },{
+                                    "name": "刘萌冰1",
                                     "data": 0.0588
                                 },
                                 {

kanban-client/app/src/Charts/ResetCharts.js

@@ -41,11 +41,11 @@ function resetLineOption(option, node, sc) {
 }
 
 function resetPieOption(option, node) {
-    option.legend.show = node.offsetHeight > 500;
-    option.legend.top = (node.offsetHeight > 500 ? '20%' : '15%');
-    option.legend.right = (node.offsetHeight > 500 ? 'auto' : '5%');
-    option.legend.orient = (node.offsetHeight > 500 ? 'horizontal' : 'vertical');
-    option.series[0].radius = `${node.offsetHeight/20 > 50 ? 50 : node.offsetHeight/20}%`;
-    option.series[0].center = node.offsetHeight > 500 ? ['50%', '65%'] : ['50%', '55%'] ;
+    option.legend.show = node.offsetHeight > 300;
+    option.legend.top = (node.offsetHeight > 300 ? '20%' : '15%');
+    option.legend.right = (node.offsetHeight > 300 ? 'auto' : '5%');
+    option.legend.orient = (node.offsetHeight > 300 ? 'horizontal' : 'vertical');
+    option.series[0].radius = `${node.offsetHeight/5 > 60 ? 60 : node.offsetHeight/5}%`;
+    option.series[0].center = node.offsetHeight > 300 ? ['50%', '65%'] : ['50%', '55%'] ;
     return option;
 }