【看板客户端】【浮动标签实现】【配置项修改】等

kanban-client/app/component/Layout.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-var WidthProvider = require('react-grid-layout').WidthProvider;
-var ReactGridLayout = require('react-grid-layout');
-ReactGridLayout = WidthProvider(ReactGridLayout);
+import {WidthProvider} from 'react-grid-layout';
+var ReactGridLayout = WidthProvider(require('react-grid-layout'));
 import '../css/layoutStyle.css';
 
 import Title from '../../src/Title/Title.jsx';

kanban-client/app/component/factory.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Container from '../../app/component/Layout.js';
 import Title from '../../src/Title/Title.jsx';
+import FixedBox from '../../src/FixedBox/FixedBox.jsx';
 import DateFormatter from '../utils/DateTimeUtils.js';
 import RenderUtils from '../utils/RenderUtils.js';
 
@@ -13,31 +14,79 @@ class Factory extends React.Component {
 
     constructor(props) {
         super(props);
+        this.models = [];
         this.state = {
-            config: config1
         };
     }
 
+    getModels() {
+        let { model } = this.props;
+        this.models = [];
+        if (Object.prototype.toString.call(model) == '[object Array]') {
+            model.map((m, i) => {
+                if (typeof m == 'object') {
+                    this.models.push(m);
+                } else if (typeof m == 'string') {
+                    this.models.push({
+                        mid: m
+                    });
+                }
+            });
+            let md1 = model[0];
+        } else if (Object.prototype.toString.call(model) == '[object String]') {
+            this.models.push({
+                mid: model
+            });
+        } else if (Object.prototype.toString.call(model) == '[object Object]') {
+            this.models.push(model);
+        }
+        return this.models;
+    }
+
+    getModelConfig(mid) {
+        // 通过模板id获得展示模板
+        if (mid == 'config1') {
+            return config1;
+        } else {
+            return config2
+        }
+    }
+
+    componentWillMount() {
+        this.getModels();
+        this.midIndex = 0;
+        this.setState({
+            model: this.getModelConfig(this.models[this.midIndex].mid)
+        });
+    }
+
     componentDidMount() {
-        setInterval(function () {
-            let s = new Date().getSeconds();
-            let config = ((s%2 == 0) ? config1 : config2);
-			this.setState({
-                config: config
-            },()=>{});
-
-		}.bind(this), 1000)
+        let { refresh } = this.props;
+        if (refresh) {
+            setInterval(function () {
+                let length = this.models.length;
+                this.midIndex = this.midIndex == length - 1 ? 0 : this.midIndex + 1;
+                this.setState({
+                    model: this.getModelConfig(this.models[this.midIndex].mid)
+                }, () => { });
+
+            }.bind(this), refresh.interval || 3000)
+        }
     }
 
     render() {
+        const {fixedbox} = this.state.model;
+        let items = [];
+        if(fixedbox) {
+           items  = fixedbox.items || [];
+        }
         return (
             <div>
-                <div>
-                    <Title {...this.state.config.title.config} />
-                </div>
-                <div>
-                    <Container items={this.state.config.content.items} rowHeight={(window.innerHeight - this.state.config.title.config.height || 55) / 10} />
-                </div>
+                <Title {...this.state.model.title.config} />
+                <Container items={this.state.model.content.items} rowHeight={(window.innerHeight - this.state.model.title.config.height || 55) / 10} />
+                {items.map((item, index) => {
+                    return <FixedBox key={`${index}`} titleHeight={this.state.model.title.config.height} {...item}/>;
+                })}
             </div>
         );
     }

kanban-client/app/css/layoutStyle.css

@@ -65,7 +65,7 @@
   columns: 120px;
 }
 .react-grid-item {
-  box-sizing: border-box;
+  box-sizing: content-box;
 }
 .react-grid-item:not(.react-grid-placeholder) {
   background: #2f2e2c;

kanban-client/app/data/BoardConfig3.json

@@ -14,6 +14,41 @@
             "type": "charts",
             "config": {
                 "option": {
+                    "graphic": [{
+                        "type": "group",
+                        "rotation": "0.1",
+                        "left": "10%",
+                        "top": "center",
+                        "children": [{
+                            "type": "rect",
+                            "z": 100,
+                            "left": "center",
+                            "top": "middle",
+                            "shape": {
+                                "width": 190,
+                                "height": 90
+                            },
+                            "style": {
+                                "fill": "#fff",
+                                "stroke": "#555",
+                                "lineWidth": 2,
+                                "shadowBlur": 8,
+                                "shadowOffsetX": 3,
+                                "shadowOffsetY": 3,
+                                "shadowColor": "rgba(0,0,0,0.3)"
+                            }
+                        },{
+                            "type": "text",
+                            "z": 100,
+                            "left": "center",
+                            "top": "middle",
+                            "style": {
+                                "fill": "#333",
+                                "text": "这也是一个浮动标签\n这也是一个浮动标签\n这也是一个浮动标签",
+                                "font": "14px Microsoft YaHei"
+                            }
+                        }]
+                    }],
                     "title": {
                         "text": "直通率1",
                         "subtext": "First Pass Yield(FPY)",
@@ -94,95 +129,91 @@
                 "x": 0, "y": 5, "w": 7, "h": 5
             }
         },{
-            "type": "charts",
+            "type": "table",
             "config": {
-                "option": {
-                  "title":{
-                    "show": true,
-                    "text": "投入/产出柱状图",
-                    "subtext": "Input/outPut Histogram",
-                    "textAlign": "center",
-                    "left": "50%",
-                    "right": "50%",
-                    "itemGap": 0,
-                    "padding": 0
-                  },
-                  "color": ["#6395EC", "#FFFE03"],
-                  "tooltip" : {
-                      "trigger": "axis",
-                      "axisPointer" : {            
-                          "type" : "shadow"       
-                      }
-                  },
-                  "legend": {
-                    "right": "3%",
-                    "data": [
-                      {"name": "投入"},
-                      {"name": "产出"}
-                    ]
-                  },
-                  "xAxis" : [
+                "columns": [
                     {
-                        "type": "category",
-                        "data": [
-                            "08:00~08:59",
-                            "09:00~09:59",
-                            "10:00~10:59"
-                        ],
-                        "axisTick": {
-                            "alignWithLabel": true
-                        },
-                        "axisLine": {
-                            "lineStyle": {
-                                "color": "white"
-                            }
-                        }
+                        "title": "时段",
+                        "dataIndex": "time",
+                        "key": "time"
+                    },
+                    {
+                        "title": "计划数",
+                        "dataIndex": "inplan",
+                        "sort": 1,
+                        "key": "inplan"
+                    },
+                    {
+                        "title": "投入数",
+                        "dataIndex": "trs",
+                        "key": "trs"
+                    },
+                    {
+                        "title": "产出数",
+                        "dataIndex": "ccs",
+                        "key": "ccs"
+                    },
+                    {
+                        "title": "差异数",
+                        "dataIndex": "cys",
+                        "key": "cys"
+                    },
+                    {
+                        "title": "达成率%",
+                        "dataIndex": "dcl",
+                        "key": "dcl"
+                    },
+                    {
+                        "title": "直通率%",
+                        "dataIndex": "ztl",
+                        "key": "ztl"
+                    },
+                    {
+                        "title": "收益率%",
+                        "dataIndex": "syl",
+                        "key": "syl"
+                    },
+                    {
+                        "title": "备注",
+                        "dataIndex": "desc",
+                        "key": "desc",
+                        "render": "descRender"
                     }
                 ],
-                "yAxis" : [
-                      {
-                          "type" : "value",
-                          "axisLine": {
-                              "lineStyle": {
-                                  "color": "white"
-                              }
-                          }
-                      }
-                  ],
-                  "series" : [
-                      {
-                          "name":"投入",
-                          "type":"bar",
-                          "label": {
-                            "normal": {
-                              "show": true,
-                              "position": "top",
-                              "formatter": "{c}",
-                              "textStyle": {
-                                "color": "white"
-                              }
-                            }
-                          },
-                          "data":[64,87,12]
-                      },
-                        {
-                          "name":"产出",
-                          "type":"bar",
-                          "label": {
-                            "normal": {
-                              "show": true,
-                              "position": "top",
-                              "formatter": "{c}",
-                              "textStyle": {
-                                "color": "white"
-                              }
-                            }
-                          },
-                          "barGap": 0,
-                          "data":[32,71,11]
-                      }
-                  ]
-              }
+                "data":[{
+                    "key": "1",
+                    "time": "上午",
+                    "inplan": 400,
+                    "trs": 200,
+                    "ccs": 98,
+                    "cys": 62,
+                    "dcl": "75.2%",
+                    "ztl": "23.3%",
+                    "syl": "45.4%",
+                    "desc": "良好"
+                },{
+                    "key": "2",
+                    "time": "上午",
+                    "inplan": 199,
+                    "trs": 45,
+                    "ccs": 188,
+                    "cys": 9,
+                    "dcl": "75.2%",
+                    "ztl": "50.3%",
+                    "syl": "73.4%",
+                    "desc": "良好"
+                },{
+                    "key": "3",
+                    "time": "上午",
+                    "inplan": 250,
+                    "trs": 77,
+                    "ccs": 188,
+                    "cys": 62,
+                    "dcl": "78.2%",
+                    "ztl": "50.3%",
+                    "syl": "73.4%",
+                    "desc": "良好"
+                }]
             },
             "layout": {
                 "x": 0, "y": 0, "w": 7, "h": 5 
@@ -237,7 +268,7 @@
                 }
             },
             "layout": {
-                "x": 7, "y": 3, "w": 3, "h": 7 
+                "x": 7, "y": 3, "w": 3, "h": 5 
             }
         },{
             "type": "form",
@@ -254,7 +285,21 @@
                 ]
             },
             "layout": {
-                "x": 7, "y": 0, "w": 3, "h": 3 
+                "x": 7, "y": 0, "w": 3, "h": 5
+            }
+        }]
+    },
+    "fixedbox": {
+        "items": [{
+            "type": "div",
+            "config": {
+                "render": "这是一个浮动标签\n这是一个浮动标签\n这是一个浮动标签\n这是一个浮动标签\n这是一个浮动标签\n",
+                "style": {
+                    "color": "white"
+                }
+            },
+            "layout": {
+                "x": 3, "y": 3, "w": 3, "h": 1 
             }
         }]
     }

kanban-client/app/data/BoardConfig4.json

@@ -14,6 +14,41 @@
             "type": "charts",
             "config": {
                 "option": {
+                    "graphic": [{
+                        "type": "group",
+                        "rotation": "0.5",
+                        "right": "0%",
+                        "top": "center",
+                        "children": [{
+                            "type": "rect",
+                            "z": 100,
+                            "left": "center",
+                            "top": "middle",
+                            "shape": {
+                                "width": 190,
+                                "height": 90
+                            },
+                            "style": {
+                                "fill": "#fff",
+                                "stroke": "#555",
+                                "lineWidth": 2,
+                                "shadowBlur": 8,
+                                "shadowOffsetX": 3,
+                                "shadowOffsetY": 3,
+                                "shadowColor": "rgba(0,0,0,0.3)"
+                            }
+                        },{
+                            "type": "text",
+                            "z": 100,
+                            "left": "center",
+                            "top": "middle",
+                            "style": {
+                                "fill": "#333",
+                                "text": "4\n5\n6",
+                                "font": "14px Microsoft YaHei"
+                            }
+                        }]
+                    }],
                     "title": {
                         "text": "直通率2",
                         "subtext": "First Pass Yield(FPY)",

kanban-client/app/data/RefreshData.json

@@ -0,0 +1,4 @@
+{
+    "model": [{"mid": "config1"}, "config2"],
+    "refresh": false
+}

kanban-client/app/main.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Factory from './component/Factory.js';
-
+import Model from './data/RefreshData.json';
 
 ReactDOM.render(
-    <Factory />,
+    <Factory {...Model}/>,
 ( document.getElementById('root')));
 
   

kanban-client/assets/FixedBox/index.less

@@ -0,0 +1,6 @@
+@prefixCls: rc-fixedbox;
+
+.@{prefixCls} {
+    position: relative;
+    overflow: hidden;
+}

kanban-client/src/FixedBox/FixedBox.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../../assets/FixedBox/index.less';
+import renders from '../../app/utils/RenderUtils.js';
+
+export default class Form extends React.Component {
+    static propTypes = {
+        render: PropTypes.string,
+        state: PropTypes.object,
+        prefixCls: PropTypes.string,
+        cls: PropTypes.string,
+        style: PropTypes.object,
+        titleHeight: PropTypes.number,
+    }
+
+    static defaultProps = {
+        render: '',
+        state: {},
+        prefixCls: 'rc-fixedbox',
+        cls: '',
+        titleHeight: 55,
+        layout: { x: 0, y: 0 }
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = props;
+        let oriState = props.state;
+        for (let key in oriState) {
+            this.state[key] = oriState[key];
+        }
+    }
+
+    getTop(y) {
+        let { titleHeight } = this.props;
+        let screenHeight = window.innerHeight;
+        let contentHeight = screenHeight - titleHeight;
+        let top = contentHeight * (y / 10);
+        return top + titleHeight;
+    }
+
+    getLeft(x) {
+        let screenWidth = window.innerWidth;
+        let left = screenWidth * (x / 10);
+        return left;
+    }
+
+    getWidth(w) {
+        let screenWidth = window.innerWidth;
+        let width = screenWidth * (w / 10);
+        return width;
+    }
+
+    getHeight(h) {
+        let { titleHeight } = this.props;
+        let screenHeight = window.innerHeight;
+        let contentHeight = screenHeight - titleHeight;
+        let height = contentHeight * (h / 10);
+        return height;
+    }
+
+    getContent() {
+        const {config} = this.state;
+        let {render, cls, style} = config;
+        let tel;
+        if (renders[render]) {
+          tel = <div className={cls} style={style}>{renders[render]()}</div>;
+        }else {
+          tel = <div className={cls} style={style}>{render}</div>;
+        }
+        return tel;
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState(nextProps);
+    }
+
+    componentDidUpdate(prevProps) {
+    }
+
+    componentWillUnmount() {
+    }
+
+    render() {
+        const defaultStyle = { position: 'absolute', top: 0, left: 0 }
+        const {config, prefixCls, cls, layout } = this.state;
+        let { x, y, w, h} = layout;
+
+        let style = Object.assign({}, defaultStyle, { top: this.getTop(y) }, { left: this.getLeft(x) }, {width: this.getWidth(w)}, {height: this.getHeight(h)});
+        let className = prefixCls;
+        if (cls) {
+            className += ` ${cls}`;
+        }
+
+        let content = this.getContent();
+
+        return (
+            <div className={className} style={style} key='fixed'>
+                {content}
+        </div>
+        );
+    }
+}