【看板展示】【fontSize自定义调整】

kanban-client/app/component/Table.jsx

@@ -53,8 +53,10 @@ class TableModel extends React.Component {
 
 	// 调整行
 	adaptiveRowSize() {
-		var node = this._reactInternalInstance.getHostNode();
-		let bodyHeight = this.cHeight - node.getElementsByClassName('rc-table-title')[0].offsetHeight - node.getElementsByClassName('rc-table-thead')[0].offsetHeight - 4;
+		let node = this._reactInternalInstance.getHostNode();
+		let title = node.getElementsByClassName('rc-table-title')[0] || {offsetHeight: 0};
+		let thead = node.getElementsByClassName('rc-table-thead')[0];
+		let bodyHeight = this.cHeight - title.offsetHeight - thead.offsetHeight - 4;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
 		let trs = node.getElementsByClassName('fade-enter');
@@ -66,19 +68,16 @@ class TableModel extends React.Component {
 
 	// 切换动画
 	switchAnimate() {
-		var node = this._reactInternalInstance.getHostNode()
-		let headers = node.getElementsByTagName('th');
+		let node = this._reactInternalInstance.getHostNode()
+		let title = node.getElementsByClassName('rc-table-title')[0] || {offsetHeight: 0};
 		let rows = node.getElementsByClassName('rc-table-row');
 		let alignWidth = 0; // 该值等于((@horizontal-padding)*2+(border宽度*2))
 		if (rows.length > 0) {
 			let cells = rows[0].cells || [];
 			let oldTrs = node.getElementsByClassName('fade-leave') || [];
-			for (let i = 0; i < (cells.length - 1); i++) {
-				//headers[i].width = headers[i].width || cells[i].offsetWidth - alignWidth;
-			}
 			let firstRow = rows[0];
 			let rowHeight = firstRow.offsetHeight;
-			let firstRowTop = firstRow.offsetTop + node.getElementsByClassName('rc-table-title')[0].offsetHeight;
+			let firstRowTop = firstRow.offsetTop + title.offsetHeight;
 			let newTds = firstRow.getElementsByTagName('td');
 			// 动画效果定位实现部分
 			for (let i = 0; i < oldTrs.length; i++) {
@@ -109,7 +108,7 @@ class TableModel extends React.Component {
 	splitData() {
 		this.cHeight = this._reactInternalInstance._hostParent._hostNode.offsetHeight;
 		this.cWidth = this._reactInternalInstance._hostParent._hostNode.offsetWidth;
-		this.rowCount = Math.round(this.cHeight/40);
+		this.rowCount = Math.round(this.cHeight/this.newProps.rowHeight);
 		this.rowHeight = this.cHeight/this.rowCount;
 		let a = this.newProps.data;
 		let result = [];
@@ -195,8 +194,9 @@ class TableModel extends React.Component {
 	}
 
 	render() {
+		const { fontSize } = this.newProps;
 		return (
-			<div style={{height: '100%', overflow: 'hidden'}}>
+			<div style={{height: '100%', overflow: 'hidden', fontSize: fontSize}}>
 				<Table
 					prefixCls={this.newProps.prefixCls || 'rc-table'}
 					className={this.newProps.className}

kanban-client/app/component/converter.js

@@ -50,11 +50,11 @@ function titleConfig(model) {
 
 function formConfig(model) {
     let { type, header, config, layout } = model;
-    let { fieldstyle, valuestyle, columns, data} = config;
+    let { fontSize, fieldstyle, valuestyle, columns, data} = config;
     let c = {
         type: 'form',
         config: {
-            fontSize: getFontSize(layout),
+            fontSize: fontSize || getFontSize(layout),
             header: Renders[header] || header,
             fieldStyle: parseStr(fieldstyle),
             valueStyle: parseStr(valuestyle),
@@ -68,12 +68,13 @@ function formConfig(model) {
 
 function tableConfig(model) {
     let { type, config, layout } = model;
-    let { title, cls, render, columns, data} = config;
+    let { fontSize, title, cls, render, columns, data, rowHeight} = config;
     
     return {
         type: 'table',
         config: {
-            fontSize: getFontSize(layout),
+            fontSize: fontSize || getFontSize(layout),
+            rowHeight: rowHeight,
             title: Renders[title] || title,
             render: Renders[render],
             columns: columns.map((v, i) => {
@@ -91,15 +92,13 @@ function tableConfig(model) {
 
 function barConfig(model) {
     let { type, config, layout } = model;
-    let { title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series} = config;
-    let f = xfields.replace(['['],'');
-    f = f.replace([']'],'');
-    let xf = f.split(',');
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series} = config;
+    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['],'').replace([']'],'').split(','));
     return {
         type: 'charts',
         config: {
             option: {
-                title: getChartsTitle(layout, title, subtitle),
+                title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {
@@ -151,7 +150,7 @@ function barConfig(model) {
                         }
                     }
                 }],
-                series: getBarSeries(layout, series)
+                series: getBarSeries(fontSize, layout, series)
             }
         },
         layout: getLayout(layout)
@@ -160,15 +159,13 @@ function barConfig(model) {
 
 function lineConfig(model) {
     let { type, config, layout } = model;
-    let { title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series} = config;
-    let f = xfields.replace(['['],'');
-    f = f.replace([']'],'');
-    let xf = f.split(',');
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series} = config;
+    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['],'').replace([']'],'').split(','));
     return {
         type: 'charts',
         config: {
             option: {
-                title: getChartsTitle(layout, title, subtitle),
+                title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'axis'
                 },
@@ -182,7 +179,7 @@ function lineConfig(model) {
                     orient: 'horizontal',
                     itemGap: layout.w,
                     textStyle: {
-                        fontSize: getFontSize(layout) * 0.7
+                        fontSize: fontSize || getFontSize(layout) * 0.7
                     },
                     data: series.map((v, i) => {
                         return v.name
@@ -193,14 +190,15 @@ function lineConfig(model) {
                     data : xf,
                     name: xtitle,
                     nameRotate: 270,
+                    nameGap: 0,
                     nameTextStyle: {
-                        fontSize: getFontSize(layout) * .7
+                        fontSize: fontSize || getFontSize(layout) * .7
                     },
                     axisLabel: {
                         rotate:  getScreenSize().screenWidth * layout.w / xf.length / 100 < 60 ? 45 : 0,
                         interval: 0,
                         textStyle: {
-                            fontSize: getFontSize(layout) * .7
+                            fontSize: fontSize || getFontSize(layout) * .7
                         }
                     }
                 }],
@@ -208,15 +206,15 @@ function lineConfig(model) {
                     name: ytitle,
                     type: ytype == 'numeric' ? 'value' : ytype,
                     nameTextStyle: {
-                        fontSize: getFontSize(layout) * .7
+                        fontSize: fontSize || getFontSize(layout) * .7
                     },
                     axisLabel: {
                         textStyle: {
-                            fontSize: getFontSize(layout) * .7
+                            fontSize: fontSize || getFontSize(layout) * .7
                         }
                     }
                 }],
-                series: getLineSeries(series)
+                series: getLineSeries(fontSize, series)
             }
         },
         layout: getLayout(layout)
@@ -225,7 +223,7 @@ function lineConfig(model) {
 
 function pieConfig(model) {
     let { type, config, layout } = model;
-    let { title, subtitle, series} = config;
+    let { fontSize, title, subtitle, series} = config;
     series = series.map((v, i) => {
         v.value = v.data;
         return v;
@@ -234,20 +232,20 @@ function pieConfig(model) {
         type: 'charts',
         config: {
             option: {
-                title: getChartsTitle(layout, title, subtitle),
+                title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'item',
                     formatter: '{a} <br/>{b} : {c} ({d}%)'
                 },
-                legend: getPieLegend(layout, series),
-                series: getPieSeries(layout, series)
+                legend: getPieLegend(fontSize, layout, series),
+                series: getPieSeries(fontSize, layout, series)
             }
         },
         layout: getLayout(layout)
     }
 }
 
-function getChartsTitle(layout, title, subtitle) {
+function getChartsTitle(fontSize, layout, title, subtitle) {
     var title = {
         show: true,
         text: title,
@@ -255,11 +253,11 @@ function getChartsTitle(layout, title, subtitle) {
         textAlign: 'center',
         textStyle: {
             verticalAlign: 'top',
-            fontSize: getFontSize(layout) * 1
+            fontSize: fontSize || getFontSize(layout) * 1
         },
         subtextStyle: {
             verticalAlign: 'top',
-            fontSize: getFontSize(layout) * 0.75
+            fontSize: fontSize || getFontSize(layout) * 0.75
         },
         left: '50%',
         right: '50%',
@@ -269,8 +267,8 @@ function getChartsTitle(layout, title, subtitle) {
     return title;
 }
 
-function getBarSeries(l, s) {
-    let series = [];
+function getBarSeries(fontSize, layout, series) {
+    let s = [];
     const model = {
         type: 'bar',
         label: {
@@ -279,23 +277,23 @@ function getBarSeries(l, s) {
                 position: 'top',
                 formatter: '{c}',
                 textStyle: {
-                    fontSize: getFontSize(l) * .7
+                    fontSize: fontSize || getFontSize(layout) * .7
                 }
             }
         },
         barGap: 0
     }
-    series = s.map((v, i) => {
+    s = series.map((v, i) => {
         let m = Object.assign({},model);
         m.name = v.name;
         m.data = v.data;
         return m;
     });
-    return series;
+    return s;
 }
 
-function getLineSeries(s) {
-    let series = [];
+function getLineSeries(fontSize, series) {
+    let s = [];
     const model = {
         type: 'line',
         label: {
@@ -306,61 +304,61 @@ function getLineSeries(s) {
             }
         }
     }
-    series = s.map((v, i) => {
+    s = series.map((v, i) => {
         let m = Object.assign({},model);
         m.name = v.name;
         m.data = v.data;
         return m;
     });
-    return series;
+    return s;
 }
 
-function getPieSeries(l, s) {
+function getPieSeries(fontSize, layout, series) {
 
     const model = {
         type: 'pie',
-        radius: `${l.w * .7}%`,
-        center: [`${l.w >= 35 ? (l.w >= 60 ? 50 : (l.w / 100 * 50 / 35 + 35)) : 50}%`,`${l.w >= 35 ? 50 : 60}%`],
+        radius: `${layout.w * .7}%`,
+        center: [`${layout.w >= 35 ? (layout.w >= 60 ? 50 : (layout.w / 100 * 50 / 35 + 35)) : 50}%`,`${layout.w >= 35 ? 50 : 60}%`],
         label: {
             normal: {
                 textStyle: {
-                    fontSize: getFontSize(l) * 0.7
+                    fontSize: fontSize || getFontSize(layout) * 0.7
                 },
                 formatter: '{b}:  {c} \n {d}%'
             }
         }
     }
-    let series = Object.assign({},model);
-    series.name = '';
-    series.data = s
-    return [series];
+    let s = Object.assign({},model);
+    s.name = '';
+    s.data = series
+    return [s];
 }
 
-function getPieLegend(l, s) {
+function getPieLegend(fontSize, layout, series) {
 
     let legend = {
-        show: !(l.w < 35 && s.length > 7),
-        right: (s.length <= 7 && l.w < 35) ? 'auto' : `${l.w/30}%`,
-        orient: (s.length <= 7 && l.w < 35) ? 'horizontal' : 'vertical',
+        show: !(layout.w < 35 && series.length > 7),
+        right: (series.length <= 7 && layout.w < 35) ? 'auto' : `${layout.w/30}%`,
+        orient: (series.length <= 7 && layout.w < 35) ? 'horizontal' : 'vertical',
         padding: 0,
-        itemGap: l.w / 10,
+        itemGap: layout.w / 10,
         top: '20%',
         textStyle: {
-            fontSize: getFontSize(l) * 0.7
+            fontSize: fontSize || getFontSize(layout) * 0.7
         },
-        data: s.map((v, i) => {
+        data: series.map((v, i) => {
             return v.name
         })
     }
     return legend;
 }
 
-function getLayout(l) {
-    let layout = {};
-    for(let k in l) {
-        layout[k] = l[k]/10
+function getLayout(layout) {
+    let l = {};
+    for(let k in layout) {
+        l[k] = layout[k]/10
     }
-    return layout;
+    return l;
 }
 
 function parseStr(str) {

kanban-client/app/component/factory.js

@@ -7,7 +7,7 @@ import {converter} from '../component/converter.js';
 import RenderUtils from '../utils/RenderUtils.js';
 import URL from '../constants/url.json';
 
-import tempdata from '../data/testbar.json';
+import tempdata from '../data/cc.json';
 
 class Factory extends React.Component {
 
@@ -70,7 +70,7 @@ class Factory extends React.Component {
             if(refresh.current.enable) {
                 this.refreshThis = setInterval(function () {
                     this.getModelConfig(this.props.code[0] + '?templateCode=' + codes[this.index]);
-                }.bind(this), Number(refresh.current.interval) || 10000)
+                }.bind(this), refresh.current.interval * 1000 || 10000)
             }
         }
         // 切换
@@ -82,7 +82,7 @@ class Factory extends React.Component {
                     }else {
                         this.index ++;
                     }
-                }.bind(this), Number(refresh.next.interval) || 30000)
+                }.bind(this), refresh.next.interval * 1000  || 30000)
             }
         }
     }

kanban-client/app/data/cc.json

@@ -1,14 +1,6 @@
 {
-    "title": {
-        "config": {
-            "render": "titleRender2",
-            "height": 55,
-            "state": {
-                "line": "S02",
-                "ban": "班别"
-            }
-        }
-    },
+    
+    "data":[{
     "content": {
         "items": [
             {
@@ -24,10 +16,10 @@
             
                 },
                 "layout": {
-                    "x": "0%",
-                    "y": "0%",
-                    "w": "50%",
-                    "h": "50%"
+                    "x": 0,
+                    "y": 0,
+                    "w": 50,
+                    "h": 50
                 }
             },
             {
@@ -65,15 +57,16 @@
                     ]
                 },
                 "layout": {
-                    "x": "50%",
-                    "y": "50%",
-                    "w": "50%",
-                    "h": "50%"
+                    "x": 50,
+                    "y": 50,
+                    "w": 50,
+                    "h": 50
                 }
             },
             {
                 "type": "line",
                 "config": {
+                    "fontSize": 10,
                     "title": "linetitle",
                     "subtitle": "linesub",
                     "xtitle": "X-name",
@@ -106,18 +99,20 @@
                     ]
                 },
                 "layout": {
-                    "x": "0%",
-                    "y": "50%",
-                    "w": "50%",
-                    "h": "50%"
+                    "x": 0,
+                    "y": 50,
+                    "w": 50,
+                    "h": 50
                 }
             },
             {
                 "type": "table",
                 "config": {
+                    "rowHeight": 100,
                     "columns": [
                         {
                             "title": "时段",
+                            "width": 150,
                             "dataIndex": "time"
                         },
                         {
@@ -156,7 +151,7 @@
                             "check": "100",
                             "pack": "0",
                             "success": "70%",
-                            "desc": "78"
+                            "desc": "11"
                         },
                         {
                             "key": "2",
@@ -166,7 +161,7 @@
                             "check": "200",
                             "pack": "0",
                             "success": "100%",
-                            "desc": "98"
+                            "desc": "10"
                         },
                         {
                             "key": "3",
@@ -176,7 +171,7 @@
                             "check": "400",
                             "pack": "0",
                             "success": "120%",
-                            "desc": "45"
+                            "desc": "9"
                         },
                         {
                             "key": "4",
@@ -186,18 +181,99 @@
                             "check": "",
                             "pack": "",
                             "success": "",
-                            "desc": "344"
+                            "desc": "8"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "7"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "6"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "5"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "4"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "3"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "2"
+                        },
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "1"
                         }
                     ],
                     "render": "tableRender"
                 },
                 "layout": {
-                    "x": "50%",
-                    "y": "0%",
-                    "w": "50%",
-                    "h": "50%"
+                    "x": 50,
+                    "y": 0,
+                    "w": 50,
+                    "h": 50
                 }
             }
         ]
     }
+}
+],
+"instance": {
+    "templateCodes": [
+        "506CFE6D911"
+    ],
+    "switchFrequency": 5000,
+    "display": "AutoSwitch",
+    "refreshFrequency": 5000
+}
+
 }

kanban-client/assets/Table/index.css

@@ -11,7 +11,6 @@
   background-color: #010101;
 }
 .rc-table-header-item {
-  font-size: 1rem;
   font-weight: normal;
 }
 .rc-table-title {

kanban-client/assets/Table/index.less

@@ -17,7 +17,7 @@
 }
 
 .@{prefixCls}-header-item {
-    font-size: 1rem;
+    // font-size: 1rem;
     font-weight: normal;
 }