【看板展示】【增加loading、错误提示、title字体控制】

kanban-client/app/assets/MessageBox/msgbox.css

@@ -0,0 +1,37 @@
+.rc-msgbox {
+  color: white;
+  font-size: 20px;
+  position: relative;
+  border: 1px solid white;
+  margin: 50px auto 0;
+  vertical-align: middle;
+  width: 400px;
+  height: 200px;
+  overflow: hidden;
+  border-radius: 20px;
+}
+.rc-msgbox-title {
+  padding-top: 20px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+}
+.rc-msgbox-content {
+  text-align: left;
+  padding: 20px;
+}
+.rc-msgbox {
+  opacity: 1;
+  animation-name: fadeout;
+  animation-duration: 3s;
+  animation-fill-mode: forwards ;
+  animation-delay: 5s;
+}
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

kanban-client/app/assets/MessageBox/msgbox.less

@@ -0,0 +1,41 @@
+@prefixCls: rc-msgbox;
+
+.@{prefixCls} {
+    color: white;
+    font-size: 20px;
+    position: relative;
+    border:1px solid white;
+    margin:50px auto 0;
+    vertical-align: middle;
+    width: 400px;
+    height: 200px;
+    overflow: hidden;
+    border-radius: 20px;
+}
+.@{prefixCls}-title {
+    padding-top: 20px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+.@{prefixCls}-content {
+    text-align: left;
+    padding: 20px;
+}
+.@{prefixCls} {
+    opacity:1;
+    animation-name: fadeout;
+    animation-duration: 3s;  
+    animation-fill-mode: forwards ;
+    animation-delay:5s; 
+}
+ 
+@keyframes fadeout {
+    0% {
+        opacity: 1
+    }
+ 
+    100% {
+        opacity: 0
+    }
+}

kanban-client/app/component/Table.jsx

@@ -53,13 +53,12 @@ class TableModel extends React.Component {
 		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;
+		this.cHeight = node.offsetHeight - title.offsetHeight - thead.offsetHeight - 4;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
 		let trs = node.getElementsByClassName('fade-enter');
 		for (let i = 0; i < trs.length; i++) {
-			// trs[i].style.width = `${bodyHeight/this.rowCount}px`;
-			trs[i].style.height = `${bodyHeight/this.rowCount}px`;
+			trs[i].style.height = `${this.cHeight/this.rowCount}px`;
 		}
 	}
 
@@ -103,8 +102,12 @@ class TableModel extends React.Component {
 	 * 根据容器高度分割data展示
 	 */
 	splitData() {
-		this.cHeight = this._reactInternalInstance._hostParent._hostNode.offsetHeight;
-		this.cWidth = this._reactInternalInstance._hostParent._hostNode.offsetWidth;
+		const { fontSize } = this.newProps;
+		let node = this._reactInternalInstance.getHostNode();
+		let title = node.getElementsByClassName('rc-table-title')[0] || {offsetHeight: 0};
+		let thead = node.getElementsByClassName('rc-table-thead')[0];
+		this.cHeight = node.offsetHeight - title.offsetHeight - thead.offsetHeight;
+		this.cWidth = node.offsetWidth
 		this.rowCount = Math.round(this.cHeight/(this.newProps.rowHeight || 40));
 		this.rowHeight = this.cHeight/this.rowCount;
 		let a = this.newProps.data;

kanban-client/app/component/converter.js

@@ -23,25 +23,17 @@ function converter(data) {
         }
     });
     return {
-        title: {
-            title
-        },
+        title: titleConfig(title),
         content: {
             items: newItems
         }
     }
 }
 
-function titleConfig(model) {
-    let {render, state, cls, style, width, height, layout} = model;
-
+function titleConfig(title) {
     return {
-        render: Renders[render] || render,
-        cls,
-        style: parseStr(style),
-        width,
-        height,
-        layout
+        title: title,
+        fontSize: getFontSize()
     }
 }
 
@@ -51,7 +43,7 @@ function formConfig(model) {
     let c = {
         type: 'form',
         config: {
-            fontSize: fontSize || getFontSize(layout),
+            fontSize: fontSize || getFontSize(),
             header: Renders[header] || header,
             fieldStyle: parseStr(fieldstyle),
             valueStyle: parseStr(valuestyle),
@@ -69,7 +61,7 @@ function tableConfig(model) {
     return {
         type: 'table',
         config: {
-            fontSize: fontSize || getFontSize(layout),
+            fontSize: fontSize || getFontSize(),
             rowHeight: rowHeight,
             title: Renders[title] || title,
             render: Renders[render],
@@ -112,7 +104,7 @@ function barConfig(model) {
                     orient: 'horizontal',
                     itemGap: layout.w,
                     textStyle: {
-                        fontSize: getFontSize(layout) * 0.7
+                        fontSize: getFontSize() * 0.7
                     },
                     data: series.map((v, i) => {
                         return v.name
@@ -125,13 +117,13 @@ function barConfig(model) {
                     nameGap: 0,
                     nameRotate: 270,
                     nameTextStyle: {
-                        fontSize: getFontSize(layout) * .7
+                        fontSize: getFontSize() * .7
                     },
                     axisLabel: {
                         rotate:  getScreenSize().screenWidth * layout.w / xf.length / 100 < 60 ? 45 : 0,
                         interval: 0,
                         textStyle: {
-                            fontSize: getFontSize(layout) * .7
+                            fontSize: getFontSize() * .7
                         }
                     }
                 }],
@@ -139,11 +131,11 @@ function barConfig(model) {
                     name: ytitle,
                     type: ytype == 'numeric' ? 'value' : ytype,
                     nameTextStyle: {
-                        fontSize: getFontSize(layout) * .7
+                        fontSize: getFontSize() * .7
                     },
                     axisLabel: {
                         textStyle: {
-                            fontSize: getFontSize(layout) * .7
+                            fontSize: getFontSize() * .7
                         }
                     }
                 }],
@@ -176,7 +168,7 @@ function lineConfig(model) {
                     orient: 'horizontal',
                     itemGap: layout.w,
                     textStyle: {
-                        fontSize: fontSize || getFontSize(layout) * 0.7
+                        fontSize: fontSize || getFontSize() * 0.7
                     },
                     data: series.map((v, i) => {
                         return v.name
@@ -189,13 +181,13 @@ function lineConfig(model) {
                     nameRotate: 270,
                     nameGap: 0,
                     nameTextStyle: {
-                        fontSize: fontSize || getFontSize(layout) * .7
+                        fontSize: fontSize || getFontSize() * .7
                     },
                     axisLabel: {
                         rotate:  getScreenSize().screenWidth * layout.w / xf.length / 100 < 60 ? 45 : 0,
                         interval: 0,
                         textStyle: {
-                            fontSize: fontSize || getFontSize(layout) * .7
+                            fontSize: fontSize || getFontSize() * .7
                         }
                     }
                 }],
@@ -203,11 +195,11 @@ function lineConfig(model) {
                     name: ytitle,
                     type: ytype == 'numeric' ? 'value' : ytype,
                     nameTextStyle: {
-                        fontSize: fontSize || getFontSize(layout) * .7
+                        fontSize: fontSize || getFontSize() * .7
                     },
                     axisLabel: {
                         textStyle: {
-                            fontSize: fontSize || getFontSize(layout) * .7
+                            fontSize: fontSize || getFontSize() * .7
                         }
                     }
                 }],
@@ -250,11 +242,11 @@ function getChartsTitle(fontSize, layout, title, subtitle) {
         textAlign: 'center',
         textStyle: {
             verticalAlign: 'top',
-            fontSize: fontSize || getFontSize(layout) * 1
+            fontSize: fontSize || getFontSize() * 1
         },
         subtextStyle: {
             verticalAlign: 'top',
-            fontSize: fontSize || getFontSize(layout) * 0.75
+            fontSize: fontSize || getFontSize() * 0.75
         },
         left: '50%',
         right: '50%',
@@ -274,7 +266,7 @@ function getBarSeries(fontSize, layout, series) {
                 position: 'top',
                 formatter: '{c}',
                 textStyle: {
-                    fontSize: fontSize || getFontSize(layout) * .7
+                    fontSize: fontSize || getFontSize() * .7
                 }
             }
         },
@@ -283,7 +275,7 @@ function getBarSeries(fontSize, layout, series) {
     s = series.map((v, i) => {
         let m = Object.assign({},model);
         m.name = v.name;
-        m.data = v.data;
+        m.data = v.data instanceof Array ? v.data : [v.data];
         return m;
     });
     return s;
@@ -304,7 +296,7 @@ function getLineSeries(fontSize, series) {
     s = series.map((v, i) => {
         let m = Object.assign({},model);
         m.name = v.name;
-        m.data = v.data;
+        m.data = v.data instanceof Array ? v.data : [v.data];
         return m;
     });
     return s;
@@ -319,7 +311,7 @@ function getPieSeries(fontSize, layout, series) {
         label: {
             normal: {
                 textStyle: {
-                    fontSize: fontSize || getFontSize(layout) * 0.7
+                    fontSize: fontSize || getFontSize() * 0.7
                 },
                 formatter: '{b}:  {c} \n {d}%'
             }
@@ -327,7 +319,7 @@ function getPieSeries(fontSize, layout, series) {
     }
     let s = Object.assign({},model);
     s.name = '';
-    s.data = series
+    s.data = series instanceof Array ? series : [series];
     return [s];
 }
 
@@ -341,7 +333,7 @@ function getPieLegend(fontSize, layout, series) {
         itemGap: layout.w / 10,
         top: '20%',
         textStyle: {
-            fontSize: fontSize || getFontSize(layout) * 0.7
+            fontSize: fontSize || getFontSize() * 0.7
         },
         data: series.map((v, i) => {
             return v.name
@@ -389,7 +381,7 @@ function getScreenSize() {
     return {screenHeight, screenWidth};
 }
 
-function getFontSize(layout) {
+function getFontSize() {
     let {screenHeight, screenWidth} = getScreenSize();
     if(screenWidth > 800) {
         return 22;

kanban-client/app/component/factory.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import Container from './Layout.js';
 import Title from '../src/Title/Title.jsx';
-import FixedBox from '../src/FixedBox/FixedBox.jsx';
+import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import DateFormatter from '../utils/DateTimeUtils.js';
 import { converter } from './converter.js';
 import RenderUtils from '../utils/RenderUtils.js';
 import URL from '../constants/url.json';
 
-// import tempdata from '../data/cc.json';
+// import tempdata from '../data/error.json';
 
 class Factory extends React.Component {
 
@@ -15,7 +15,8 @@ class Factory extends React.Component {
         super(props);
         this.index = 0;
         this.state = {
-            titleHeight: 50
+            titleHeight: 0,
+            error: null
         };
     }
 
@@ -27,6 +28,9 @@ class Factory extends React.Component {
         }).then(function (response) {
             return (response.json())
         }).then((json) => {
+            if(!json.instance) {
+                throw {name: json.message, message: json.detailedMessage};
+            }
             let instance = json.instance;
             if (!me.state.instance) {
                 me.setState({
@@ -36,16 +40,20 @@ class Factory extends React.Component {
             return json.data[0];
         }).then(function (modelconfig) {
             me.setState({
+                error: null,
                 model: converter(modelconfig),
             });
         }).catch(function (ex) {
+            me.setState({
+                error: {name: ex.name, message: ex.message}
+            });
             console.log('parsing failed', ex);
         });
     }
 
     getTitleHeight() {
         let titleEl = document.getElementsByClassName('rc-title');
-        let titleHeight = titleEl.length > 0 ? titleEl[0].offsetHeight : 50;
+        let titleHeight = titleEl.length > 0 ? titleEl[0].offsetHeight : 0;
         titleHeight = titleHeight || 0;
         return titleHeight;
     }
@@ -125,10 +133,14 @@ class Factory extends React.Component {
     }
 
     render() {
+        let { titleHeight, model, error } = this.state;
+        if (this.state.error) {
+            return <MessageBox static={this.props.static} titleHeight={titleHeight} error={error} />
+        }
         if (!this.state.model) {
-            return <div></div>
+            return <div style={{color: 'white'}}>loading...</div>
         }
-        let { titleHeight, model } = this.state;
+        
         const { title, content, fixedbox } = model;
         let titleConfig = title;
         let items = [];
@@ -139,9 +151,6 @@ class Factory extends React.Component {
             <div>
                 <Title static={this.props.static} {...titleConfig} />
                 <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
-                {items.map((item, index) => {
-                    return <FixedBox key={`${index}`} static={this.props.static} titleHeight={titleHeight} {...item} />;
-                })}
             </div>
         );
     }

kanban-client/app/data/testtable.json

@@ -6,7 +6,6 @@
                     {
                         "type": "table",
                         "config": {
-                            "rowHeight": 100,
                             "columns": [
                                 {
                                     "title": "时段",
@@ -158,7 +157,7 @@
                             "x": 0,
                             "y": 0,
                             "w": 80,
-                            "h": 50
+                            "h": 40
                         }
                     }
                 ]

kanban-client/app/main.js

@@ -7,6 +7,7 @@ import './assets/Table/animation.less';
 import './assets/Form/index.less';
 import './assets/FixedBox/index.less';
 import './assets/Title/index.less';
+import './assets/MessageBox/msgbox.less';
 
 var code = window.location.search.substring(6);
 

kanban-client/app/src/MsgBox/MessageBox.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class MessageBox extends React.Component {
+    static propTypes = {
+        static: PropTypes.object,
+        prefixCls: PropTypes.string,
+        error: PropTypes.object
+    }
+
+    static defaultProps = {
+        static: {},
+        prefixCls: 'rc-msgbox',
+        error: {}
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = props;
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({...nextProps});
+    }
+
+    componentDidUpdate(prevProps) {
+    }
+
+    componentWillUnmount() {
+    }
+
+    render() {
+        const { error, prefixCls} = this.state;
+        let { name, message } = error;
+        return (
+            <div className={prefixCls} key='msgbox'>
+               <div className={`${prefixCls}-title`}>{'Error'}</div>
+               <div className={`${prefixCls}-content`}>{`${name}: ${message}`}</div>
+            </div>
+        );
+    }
+}

kanban-client/app/src/Title/Title.jsx

@@ -5,20 +5,15 @@ import renders from '../../utils/RenderUtils.js';
 export default class Title extends React.Component {
   static propTypes = {
     static: PropTypes.object,
-    state: PropTypes.object,
     prefixCls: PropTypes.string,
-    cls: PropTypes.string,
-    style: PropTypes.object,
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
   static defaultProps = {
     prefixCls: 'rc-title',
-    cls: '',
-    style: {},
     title: '',
-    height: 55,
+    fontSize: 20
   }
 
   constructor(props) {
@@ -38,20 +33,20 @@ export default class Title extends React.Component {
   }
 
   getTitle() {
-    const { title, height, width, cls, style} = this.props;
+    const { title } = this.props;
     return title;
   }
 
   render() {
     const props = this.props;
-    const prefixCls = props.prefixCls;
+    const {prefixCls, fontSize} = props;
 
-    let className = props.prefixCls;
+    let className = prefixCls;
 
     const title = this.getTitle();
 
     return (
-      <div className={className} key={prefixCls} dangerouslySetInnerHTML={{__html: title}}>
+      <div className={className} style={{fontSize: fontSize}} key={prefixCls} dangerouslySetInnerHTML={{ __html: title }}>
       </div>
     );
   }