【看板展示】【本地测试与打包配置分离、调整pie展示方式】

kanban-client/app/component/Table.jsx

@@ -133,7 +133,7 @@ class TableModel extends React.Component {
 				intervalFunction: function() {
 					this.changeData();
 				}.bind(this),
-				intervalTime: this.newProps.refreshInterval * 1000 || (this.rowCount > 5 ? this.rowCount * 1000 : 5000)
+				intervalTime: this.newProps.refreshInterval * 1000 || 2000
 			});
 		}
 	}

kanban-client/app/component/converter.js

@@ -215,8 +215,11 @@ function lineConfig(model) {
 function pieConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, series} = config;
+    series = series instanceof Array ? series : [series];
+    series.map((a,b) => {})
     series = series.map((v, i) => {
         v.value = v.data;
+        v.name += `_@_${v.data}`;
         return v;
     });
     return {
@@ -226,7 +229,11 @@ function pieConfig(model) {
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'item',
-                    formatter: '{a} <br/>{b} : {c} ({d}%)'
+                    // formatter: '{a} <br/>{b} : {c} ({d}%)'
+                    formatter: function(a, b, c, d, e) {
+                        let ns = a.data.name.split('_@_');
+                        return ns[0] + ' : ' + ns[1] + '\n' + a.percent + '%';
+                    }
                 },
                 legend: getPieLegend(fontSize, layout, series),
                 series: getPieSeries(fontSize, layout, series)
@@ -305,17 +312,19 @@ function getLineSeries(fontSize, series) {
 }
 
 function getPieSeries(fontSize, layout, series) {
-    let data = series instanceof Array ? series : [series];
+    let data = series;
     const model = {
         type: 'pie',
-        radius: `${layout.w * .7}%`,
-        center: [`${layout.w >= 35 ? (layout.w >= 60 ? 50 : (layout.w / 100 * 50 / 35 + 35)) : 50}%`,`${layout.w >= 35 ? 50 : 60}%`],
+        radius: '45%',
+        center: ['30%','50%'],
         label: {
             normal: {
+                show: data.length > 7 ? false : true,
+                position: 'inside',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * 0.7
                 },
-                formatter: '{b}:  {c} \n {d}%'
+                formatter: '{d}%'
             }
         }
     }
@@ -326,14 +335,19 @@ function getPieSeries(fontSize, layout, series) {
 }
 
 function getPieLegend(fontSize, layout, series) {
+    series.sort((a,b) => b.data - a.data);
 
     let legend = {
-        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,
+        width: '25%',
+        right: '5%',
+        orient: 'vertical',
+        padding: layout.w / 20,
         itemGap: layout.w / 10,
         top: '20%',
+        formatter: function (name) {
+            let s = name.split('_@_');
+            return s[0] +' : '+ s[1]
+        },
         textStyle: {
             fontSize: fontSize || getFontSize() * 0.7
         },

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import Container from './Layout.js';
+import Title from '../src/Title/Title.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.dev.json';
+
+import tempdata from '../data/testpie.json';
+
+class Factory extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.index = 0;
+        this.state = {
+            titleHeight: 0,
+            error: null
+        };
+    }
+
+    getModelConfig(mid) {
+        let me = this;
+        fetch(URL.path + mid, {
+            method: 'POST',
+            credentials: 'include'
+        }).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({
+                    instance: instance
+                }, me.setRefresh);
+            }
+            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 : 0;
+        titleHeight = titleHeight || 0;
+        return titleHeight;
+    }
+
+    setRefresh() {
+        let { instance } = this.state;
+        if (!instance) { return; }
+        let codes = instance.templateCodes;
+        let display = instance.display;
+        let next = {
+            enable: instance.switchFrequency > 0 ? true : false,
+            interval: instance.switchFrequency
+        };
+        let current = {
+            enable: instance.refreshFrequency > 0 ? true : false,
+            interval: instance.refreshFrequency
+        };
+        let refresh = {
+            current: current,
+            next: next
+        };
+        // 刷新
+        if (refresh.current) {
+            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)
+            }
+        }
+        // 切换
+        if (refresh.next) {
+            if (refresh.next.enable) {
+                this.refreshNext = setInterval(function () {
+                    if (this.index == codes.length - 1) {
+                        this.index = 0;
+                    } else {
+                        this.index++;
+                    }
+                }.bind(this), refresh.next.interval * 1000 || 30000)
+            }
+        }
+    }
+
+    componentDidUpdate() {
+    }
+
+    componentWillMount() {
+        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) {
+                window.clearInterval(this.refreshThis);
+            }
+        }
+        if (this.refreshNext) {
+            if (this.refreshNext.interval > 0) {
+                window.clearInterval(this.refreshNext);
+            }
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            titleHeight: this.getTitleHeight()
+        });
+    }
+
+    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 style={{color: 'white'}}>loading...</div>
+        }
+        
+        const { title, content, fixedbox } = model;
+        let titleConfig = title;
+        let 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} />
+            </div>
+        );
+    }
+
+};
+
+module.exports = Factory;

kanban-client/app/constants/url.dev.json

@@ -0,0 +1,3 @@
+{
+    "path": "http://localhost:8080/kanbanInstance/parseData/"
+}

kanban-client/app/main.dev.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Factory from './component/factory.dev.js';
+
+import './assets/Table/index.less';
+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 = '52EFB432511';
+
+ReactDOM.render(
+    <Factory code={[code]} />,
+( document.getElementById('root')));
+
+  

kanban-client/app/main.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Factory from './component/Factory.js';
+import Factory from './component/factory.js';
 
 import './assets/Table/index.less';
 import './assets/Table/animation.less';

kanban-client/webpack.dev.config.js

@@ -6,7 +6,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
     entry: {
         'src/whatwg-fetch': 'whatwg-fetch',
-        'src/main': './app/main.js',
+        'src/main': './app/main.dev.js',
         'src/title': './app/src/Title/Title.jsx',
         'src/table': './app/component/Table.jsx',
         'src/form': './app/src/Form/index.js',