【看板展示】【title解析、title高度自适应调整】

kanban-client/app/component/Layout.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {WidthProvider} from 'react-grid-layout';
+import { WidthProvider } from 'react-grid-layout';
 var ReactGridLayout = WidthProvider(require('react-grid-layout'));
 import '../css/layoutStyle.css';
 
-import Title from '../src/Title/Title.jsx';
 import Form from '../src/Form/index.js';
 import Table from './Table.jsx';
 import Charts from '../src/Charts/ECharts.js';
@@ -13,10 +12,10 @@ import Charts from '../src/Charts/ECharts.js';
 class BasicLayout extends React.Component {
 
   constructor(props) {
-		super(props);
+    super(props);
     this.newProps = props;
     var layout = this.generateLayout();
-		this.state = {
+    this.state = {
       children: props,
       layout: layout
     };
@@ -29,7 +28,7 @@ class BasicLayout extends React.Component {
   static defaultProps = {
     className: "layout",
     items: [],
-    onLayoutChange: (l) => {  },
+    onLayoutChange: (l) => { },
     cols: 10, // 屏幕横宽最大值为10
     margin: [0, 0], // 元素间隔为0
     verticalCompact: false,
@@ -39,19 +38,17 @@ class BasicLayout extends React.Component {
 
   // 创建div元素
   generateDOM() {
-    const {items} = this.newProps;
-
-    return items.map(function(item, i) {
-      let {type, config} = item;
-      if(type == 'title') {
-        return (<div key={i}><Title {...config}/></div>);
-      }else if(type == 'form') {
-        return (<div key={i}><Form {...config}/></div>);
-      }else if(type == 'table') {
+    const { items } = this.newProps;
+
+    return items.map(function (item, i) {
+      let { type, config } = item;
+      if (type == 'form') {
+        return (<div key={i}><Form {...config} /></div>);
+      } else if (type == 'table') {
         return (<div key={i}><Table {...config} /></div>);
-      }else if(type == 'charts') {
-        return <div key={i}><Charts {...config}/></div>
-      }else{
+      } else if (type == 'charts') {
+        return <div key={i}><Charts {...config} /></div>
+      } else {
         return (<div key={i}><span className="text">{i}</span></div>);
       }
     });
@@ -59,11 +56,11 @@ class BasicLayout extends React.Component {
 
   // 设置每个div的属性
   generateLayout() {
-    const {items} = this.newProps;
-    return items.map(function(item, i) {
-      let {layout} = item;
-      let {x, y, w, h} = layout;
-      return {x: x, y: y, w: w, h: h, i: i.toString(), isDraggable: false, isResizable: false};
+    const { items } = this.newProps;
+    return items.map(function (item, i) {
+      let { layout } = item;
+      let { x, y, w, h } = layout;
+      return { x: x, y: y, w: w, h: h, i: i.toString(), isDraggable: false, isResizable: false };
     });
   }
 
@@ -71,6 +68,12 @@ class BasicLayout extends React.Component {
     this.newProps.onLayoutChange(layout);
   }
 
+  componentDidUpdate() {
+  }
+
+  componentDidMount() {
+  }
+
   componentWillReceiveProps(nextProps) {
     this.newProps = nextProps;
     let layout = this.generateLayout();
@@ -84,7 +87,7 @@ class BasicLayout extends React.Component {
   render() {
     return (
       <ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange(this.state.layout)}
-          {...this.state.children}>
+        {...this.state.children}>
         {this.generateDOM()}
       </ReactGridLayout>
     );

kanban-client/app/component/converter.js

@@ -23,7 +23,9 @@ function converter(data) {
         }
     });
     return {
-        title: title,
+        title: {
+            title
+        },
         content: {
             items: newItems
         }
@@ -87,6 +89,7 @@ function tableConfig(model) {
 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(','));
     return {
         type: 'charts',

kanban-client/app/component/factory.js

@@ -3,11 +3,11 @@ import Container from './Layout.js';
 import Title from '../src/Title/Title.jsx';
 import FixedBox from '../src/FixedBox/FixedBox.jsx';
 import DateFormatter from '../utils/DateTimeUtils.js';
-import {converter} from './converter.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/cc.json';
 
 class Factory extends React.Component {
 
@@ -15,22 +15,23 @@ class Factory extends React.Component {
         super(props);
         this.index = 0;
         this.state = {
+            titleHeight: 50
         };
     }
 
     getModelConfig(mid) {
         let me = this;
-        fetch(URL.path+mid, {
+        fetch(URL.path + mid, {
             method: 'POST',
             credentials: 'include'
         }).then(function (response) {
             return (response.json())
         }).then((json) => {
             let instance = json.instance;
-            if(!me.state.instance) {
+            if (!me.state.instance) {
                 me.setState({
                     instance: instance
-                },me.setRefresh);
+                }, me.setRefresh);
             }
             return json.data[0];
         }).then(function (modelconfig) {
@@ -42,15 +43,16 @@ class Factory extends React.Component {
         });
     }
 
-    setTitleHeight() {
+    getTitleHeight() {
         let titleEl = document.getElementsByClassName('rc-title');
         let titleHeight = titleEl.length > 0 ? titleEl[0].offsetHeight : 50;
-        this.titleHeight = titleHeight || 0;
+        titleHeight = titleHeight || 0;
+        return titleHeight;
     }
 
     setRefresh() {
         let { instance } = this.state;
-        if(!instance) {return;}
+        if (!instance) { return; }
         let codes = instance.templateCodes;
         let display = instance.display;
         let next = {
@@ -67,7 +69,7 @@ class Factory extends React.Component {
         };
         // 刷新
         if (refresh.current) {
-            if(refresh.current.enable) {
+            if (refresh.current.enable) {
                 this.refreshThis = setInterval(function () {
                     this.getModelConfig(this.props.code[0] + '?templateCode=' + codes[this.index]);
                 }.bind(this), refresh.current.interval * 1000 || 10000)
@@ -75,69 +77,70 @@ class Factory extends React.Component {
         }
         // 切换
         if (refresh.next) {
-            if(refresh.next.enable) {
+            if (refresh.next.enable) {
                 this.refreshNext = setInterval(function () {
-                    if(this.index == codes.length-1) {
+                    if (this.index == codes.length - 1) {
                         this.index = 0;
-                    }else {
-                        this.index ++;
+                    } else {
+                        this.index++;
                     }
-                }.bind(this), refresh.next.interval * 1000  || 30000)
+                }.bind(this), refresh.next.interval * 1000 || 30000)
             }
         }
     }
 
     componentDidUpdate() {
-        this.setTitleHeight();
     }
 
     componentWillMount() {
-        let {code} = this.props;
-        // this.getModelConfig(code[0]);
-        this.setState({
-                model: converter(tempdata.data[0]),
-            });
+        let { code } = this.props;
+        this.getModelConfig(code[0]);
+        // this.setState({
+        //     model: converter(tempdata.data[0]),
+        // });
     }
 
     componentDidMount() {
+        this.setState({
+            titleHeight: this.getTitleHeight()
+        });
     }
     componentWillUnmount() {
-        if(this.refreshThis) {
-            if(this.refreshThis.interval > 0) {
+        if (this.refreshThis) {
+            if (this.refreshThis.interval > 0) {
                 window.clearInterval(this.refreshThis);
             }
         }
-        if(this.refreshNext) {
-            if(this.refreshNext.interval > 0) {
+        if (this.refreshNext) {
+            if (this.refreshNext.interval > 0) {
                 window.clearInterval(this.refreshNext);
             }
         }
     }
 
     componentWillReceiveProps(nextProps) {
-        console.log('1');
-        this.setTitleHeight();
+        this.setState({
+            titleHeight: this.getTitleHeight()
+        });
     }
 
     render() {
-        if(!this.state.model){
+        if (!this.state.model) {
             return <div></div>
         }
-        let {model} = this.state;
-        let titleHeight = this.titleHeight || 0;
-        console.log(titleHeight);
-        const {title, content, fixedbox} = model;
-        let titleConfig = title ? (title.config || {height: 0}) : {height: 0};
+        let { titleHeight, model } = this.state;
+        const { title, content, fixedbox } = model;
+        let titleConfig = title;
         let items = [];
-        if(fixedbox) {
-           items  = fixedbox.items || [];
+        if (fixedbox) {
+            items = fixedbox.items || [];
         }
         return (
             <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}/>;
+                    return <FixedBox key={`${index}`} static={this.props.static} titleHeight={titleHeight} {...item} />;
                 })}
             </div>
         );

kanban-client/app/data/cc.json

@@ -2,6 +2,7 @@
     
     "data":[{
     "content": {
+        "title": "<b><i><u><font size=\"6\" color=\"#ff9900\">'已启动'fasdf</font></u></i></b>",
         "items": [
             {
                 "type": "pie",

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

@@ -9,7 +9,7 @@ export default class Title extends React.Component {
     prefixCls: PropTypes.string,
     cls: PropTypes.string,
     style: PropTypes.object,
-    render: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
@@ -17,7 +17,7 @@ export default class Title extends React.Component {
     prefixCls: 'rc-title',
     cls: '',
     style: {},
-    render: '',
+    title: '',
     height: 55,
   }
 
@@ -38,17 +38,8 @@ export default class Title extends React.Component {
   }
 
   getTitle() {
-    const { render, height, width, cls, style} = this.props;
-    // style.height = height;
-    let tel;
-    if (renders[render]) {
-      tel = <div className={cls} style={style}>{renders[render](this.props.static)}</div>;
-    }else {
-      tel = <div className={cls} style={style}>{render}</div>;
-    }
-    if (tel) {
-      return tel;
-    }
+    const { title, height, width, cls, style} = this.props;
+    return title;
   }
 
   render() {
@@ -57,11 +48,10 @@ export default class Title extends React.Component {
 
     let className = props.prefixCls;
 
-    const render = this.getTitle();
+    const title = this.getTitle();
 
     return (
-      <div className={className} key={prefixCls}>
-        {render}
+      <div className={className} key={prefixCls} dangerouslySetInnerHTML={{__html: title}}>
       </div>
     );
   }

kanban-client/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "rctable",
+  "name": "boardshow",
   "version": "1.0.0",
-  "description": "rc-table test",
+  "description": "boardshow",
   "main": "main.js",
   "scripts": {
     "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
-    "start:dev": "webpack-dev-server --port 8100 --inline --content-base build/ ",
+    "start:dev": "webpack-dev-server --port 8100 --inline --content-base build/boardshow.html ",
     "start:prod": "webpack && node server.js"
   },
   "keywords": [

kanban-client/webpack.config.js

@@ -62,11 +62,11 @@ module.exports = {
             }
         }),
         // 代码压缩
-        // new webpack.optimize.UglifyJsPlugin({
-        //     compress: {
-        //         warnings: false
-        //     }
-        // }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
         // 生产环境
         new webpack.DefinePlugin({
             "process.env": {