添加table边框线/table行计算微调/layout布局rowHeight微调使渲染的高度不大于屏幕高度

kanban-client/app/assets/Table/animation.css

@@ -2,6 +2,7 @@
   animation-duration: .5s;
   animation-fill-mode: both;
   opacity: .7;
+  border: none;
   animation-timing-function: linear;
   animation-play-state: paused;
 }
@@ -9,6 +10,7 @@
   animation-duration: .5s;
   animation-fill-mode: both;
   opacity: .7;
+  border: none;
   animation-timing-function: linear;
   animation-play-state: paused;
 }
@@ -17,6 +19,7 @@
   animation-fill-mode: both;
   transform: translateX(0px);
   opacity: .5;
+  border: none;
   animation-timing-function: ease-out;
   animation-play-state: paused;
 }
@@ -35,16 +38,20 @@
 @keyframes fadeIn {
   0% {
     opacity: .7;
+    border: none;
   }
   100% {
     opacity: 1;
+    border: none;
   }
 }
 @keyframes fadeOut {
   0% {
     opacity: .5;
+    border: none;
   }
   100% {
     opacity: 0;
+    border: none;
   }
 }

kanban-client/app/assets/Table/animation.less

@@ -3,6 +3,7 @@
 .fade-enter {
   .motion-common();
   opacity: .7;
+  border: none;
   animation-timing-function: linear;
   animation-play-state: paused;
 }
@@ -10,6 +11,7 @@
 .fade-appear {
   .motion-common();
   opacity: .7;
+  border: none;
   animation-timing-function: linear;
   animation-play-state: paused;
 }
@@ -18,6 +20,7 @@
   .motion-common();
   transform: translateX(0px);
   opacity: .5;
+  border: none;
   animation-timing-function: ease-out;
   animation-play-state: paused;
 }
@@ -40,19 +43,23 @@
 @keyframes fadeIn {
   0% {
     opacity: .7;
+    border: none;
   }
   100% {
     opacity: 1;
+    border: none;
   }
 }
 
 @keyframes fadeOut {
   0% {
     opacity: .5;
+    border: none;
     // transform: translateX(0px);
   }
   100% {
     opacity: 0;
+    border: none;
     // transform: translateX(300px);
   }
 }

kanban-client/app/assets/Table/index.css

@@ -36,4 +36,5 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  border: 1px solid white;
 }

kanban-client/app/assets/Table/index.less

@@ -44,6 +44,6 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        // border: 1px solid white;
+        border: 1px solid white;
     }
   }

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

@@ -29,11 +29,11 @@ class BasicLayout extends React.Component {
     className: "layout",
     items: [],
     onLayoutChange: (l) => { },
-    cols: 10, // 屏幕横宽最大值为10
-    margin: [1, 1], // 元素间隔为0
-    verticalCompact: false,
-    useCSSTransforms: false, // 不使用动画
-    autoSize: true
+    cols: 10, // 屏幕横宽最大值
+    margin: [1, 1], // 元素间隔
+    verticalCompact: false, // 垂直方向贴靠
+    useCSSTransforms: false, // 使用动画
+    autoSize: true //自适应
   }
 
   // 创建div元素

kanban-client/app/component/Layout.js

@@ -29,11 +29,11 @@ class BasicLayout extends React.Component {
     className: "layout",
     items: [],
     onLayoutChange: (l) => { },
-    cols: 10, // 屏幕横宽最大值为10
-    margin: [1, 1], // 元素间隔为0
-    verticalCompact: false,
-    useCSSTransforms: false, // 不使用动画
-    autoSize: true
+    cols: 10, // 屏幕横宽最大值
+    margin: [1, 1], // 元素间隔
+    verticalCompact: false, // 垂直方向贴靠
+    useCSSTransforms: false, // 使用动画
+    autoSize: true //自适应
   }
 
   // 创建div元素

kanban-client/app/component/Table.jsx

@@ -89,16 +89,17 @@ class TableModel extends React.Component {
 		let node = this.refs.body;
 		let title = node.getElementsByClassName('rc-table-title')[0] || { offsetHeight: 0 };
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
-		this.cHeight = node.offsetHeight - title.offsetHeight - 4;
+		this.cHeight = node.offsetHeight - 4  - title.offsetHeight; // 这里的4是上下padding和border
 		let trHeight = (this.cHeight) / (this.rowCount + 1);
-		thead.style.fontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
+		let trFontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
+		thead.style.fontSize = trFontSize;
+		thead.getElementsByTagName('th')[0].style.height = `${trHeight}px` ;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
 		let trs = node.getElementsByClassName('fade-enter');
 		for (let i = 0; i < trs.length; i++) {
-			let trHeight = (this.cHeight - thead.offsetHeight) / (this.rowCount);
+			trs[i].style.fontSize = trFontSize;
 			trs[i].style.height = `${trHeight}px` ;
-			trs[i].style.fontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
 		}
 	}
 
@@ -107,7 +108,6 @@ class TableModel extends React.Component {
 		let node = this.refs.body;
 		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') || [];

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

@@ -11,7 +11,7 @@ class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local ';
+        this.dev = 'local';
         this.index = 0;
         this.state = {
             titleHeight: 0,
@@ -163,7 +163,7 @@ class Factory extends React.Component {
         return (
             <div ref='body'>
                 <Title static={this.props.static} {...titleConfig} />
-                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
+                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10 - 1} />
             </div>
         );
     }

kanban-client/app/component/factory.js

@@ -76,7 +76,7 @@ class Factory extends React.Component {
         if (refresh.current) {
             if (refresh.current.enable) {
                 this.refreshThis = setInterval(function () {
-                    this.getModelConfig(this.props.code[0] + '?templateCode=' + codes[this.index]);
+                    this.getModelConfig(this.props.code[0] + '?kanbanCode=' + codes[this.index]);
                 }.bind(this), refresh.current.interval * 1000 || 10000)
             }
         }
@@ -150,7 +150,7 @@ class Factory extends React.Component {
         return (
             <div>
                 <Title static={this.props.static} {...titleConfig} />
-                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
+                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10 - 1} />
             </div>
         );
     }

kanban-client/app/data/cc.json

@@ -48,8 +48,8 @@
                         "layout": {
                             "w": 40,
                             "x": 0,
-                            "h": 57,
-                            "y": 0
+                            "h": 50,
+                            "y": 50
                         },
                         "type": "form",
                         "config": {
@@ -95,7 +95,8 @@
                                     "value": {
                                         "style": "color: red",
                                         "text": 0
-                                    }
+                                    },
+                                    "render": "function(field, value) { return { field, value: { text: value.text + 'xxxx', style: {color: 'green'} } } }"
                                 },
                                 {
                                     "field": {
@@ -135,37 +136,36 @@
                         "layout": {
                             "w": 40,
                             "x": 0,
-                            "h": 43,
-                            "y": 57
+                            "h": 50,
+                            "y": 0
                         },
                         "type": "table",
                         "config": {
-                            "data": [
-                                null,
-                                null,
-                                null,
-                                null,
-                                null
-                            ],
+                            "title": "function() { return { text: ''+ new Date().format('hh:mm:ss'), style: { float: 'left' } } }",
+                            "data": 
+                            [{"前五大不良": "漏印"}, {"前五大不良": "错位"}, {"前五大不良": "漏焊"}, {"前五大不良": "翘件"}, {"前五大不良": "碰焊"}],
                             "columns": [
                                 {
                                     "width": 100,
                                     "sort": 0,
-                                    "title": "前五大不良"
+                                    "title": "前五大不良",
+                                    "dataIndex": "前五大不良"
                                 },
                                 {
                                     "width": 100,
                                     "sort": 0,
-                                    "title": "数量"
+                                    "title": "数量",
+                                    "dataIndex": "数量"
                                 },
                                 {
                                     "width": 100,
                                     "sort": 0,
-                                    "title": "原因"
+                                    "title": "原因",
+                                    "dataIndex": "原因" 
                                 }
                             ],
                             "pagesize": 5,
-                            "interval": 3
+                            "interval": 2
                         }
                     },
                     {
@@ -341,34 +341,6 @@
                                     "时段": "当天",
                                     "投入数": 17
                                 },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 0
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 0
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 0
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 0
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 7
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 1654
-                                },
-                                {
-                                    "时段": "当天",
-                                    "投入数": 0
-                                },
                                 {
                                     "时段": "当天",
                                     "投入数": 0
@@ -418,8 +390,8 @@
                                     "title": "备注"
                                 }
                             ],
-                            "pagesize": 13,
-                            "interval": 7
+                            "pagesize": 0,
+                            "interval": 3
                         }
                     }
                 ]

kanban-client/app/data/testpie.json

@@ -6,7 +6,7 @@
                     {
                         "layout": {
                             "w": 50,
-                            "h": 80,
+                            "h": 100,
                             "y": 0,
                             "x": 0
                         },

kanban-client/app/main.dev.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import Factory from './component/factory.dev.js';
 import DateFormatter from './utils/DateTimeUtils.js';
 
-var code = '5F26ADA961D';
+var code = '5FBDD501D27';
 
 ReactDOM.render(
     <Factory code={[code]} />,