【看板】【title高度自动计算调整】

kanban-client/app/component/converter.js

@@ -99,10 +99,10 @@ function barConfig(model) {
                     itemGap: 0,
                     padding: 0
                 },
-                tooltip1: {
+                tooltip: {
                     trigger: 'axis',
                     axisPointer: {
-                        type: 'shandow'
+                        type: 'shadow'
                     }
                 },
                 legend: {
@@ -116,23 +116,12 @@ function barConfig(model) {
                     data : xfields,
                     axisTick: {
                         alignWithLabel: true
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: "white"
-                        }
                     }
                 }],
                 yAxis: [{
-                    // type: ytype,
-                    type: 'value',
-                    axisLine: {
-                        lineStyle: {
-                            color: "white"
-                        }
-                    }
+                    type: ytype == 'numeric' ? 'value' : ytype
                 }],
-                series: getSeries(series, 'bar')
+                series: getBarSeries(series)
             }
         },
         layout: getLayout(layout)
@@ -157,11 +146,8 @@ function lineConfig(model) {
                     itemGap: 0,
                     padding: 0
                 },
-                tooltip1: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'line'
-                    }
+                tooltip: {
+                    trigger: 'axis'
                 },
                 legend: {
                     right: '3%',
@@ -174,23 +160,12 @@ function lineConfig(model) {
                     data : xfields,
                     axisTick: {
                         alignWithLabel: true
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: "white"
-                        }
                     }
                 }],
                 yAxis: [{
-                    // type: ytype,
-                    type: 'value',
-                    axisLine: {
-                        lineStyle: {
-                            color: "white"
-                        }
-                    }
+                    type: ytype == 'numeric' ? 'value' : ytype
                 }],
-                series: getSeries(series,'line')
+                series: getLineSeries(series)
             }
         },
         layout: getLayout(layout)
@@ -202,7 +177,6 @@ function pieConfig(model) {
     let { title, subtitle, series} = config;
     series = series.map((v, i) => {
         v.value = v.data;
-        delete v.data;
         return v;
     });
     return {
@@ -219,7 +193,7 @@ function pieConfig(model) {
                     itemGap: 0,
                     padding: 0
                 },
-                tooltip1: {
+                tooltip: {
                     trigger: 'item',
                     formatter: '{a} <br/>{b} : {c} ({d}%)'
                 },
@@ -229,25 +203,22 @@ function pieConfig(model) {
                         return v.name
                     })
                 },
-                series: [getPieSeries(series)]
+                series: getPieSeries(series)
             }
         },
         layout: getLayout(layout)
     }
 }
 
-function getSeries(s,t) {
+function getBarSeries(s) {
     let series = [];
     const model = {
-        type: t,
+        type: 'bar',
         label: {
             normal: {
                 show: true,
                 position: 'top',
-                formatter: '{c}',
-                textStyle: {
-                    color: 'white'
-                }
+                formatter: '{c}'
             }
         },
         barGap: 0
@@ -261,6 +232,27 @@ function getSeries(s,t) {
     return series;
 }
 
+function getLineSeries(s) {
+    let series = [];
+    const model = {
+        type: 'line',
+        label: {
+            normal: {
+                show: true,
+                position: 'inside',
+                formatter: '{c}'
+            }
+        }
+    }
+    series = s.map((v, i) => {
+        let m = Object.assign({},model);
+        m.name = v.name;
+        m.data = v.data;
+        return m;
+    });
+    return series;
+}
+
 function getPieSeries(s) {
     const model = {
         type: 'pie',
@@ -274,7 +266,7 @@ function getPieSeries(s) {
     let series = Object.assign({},model);
     series.name = '';
     series.data = s
-    return series;
+    return [series];
 }
 
 function getLayout(l) {

kanban-client/app/component/factory.js

@@ -36,6 +36,12 @@ class Factory extends React.Component {
         });
     }
 
+    componentDidUpdate() {
+        let titleEl = document.getElementsByClassName('rc-title');
+        let titleHeight = titleEl[0].offsetHeight;
+        this.titleHeight = titleHeight;
+    }
+
     componentWillMount() {
         let {code} = this.props;
         this.getModelConfig(code[0]);
@@ -58,7 +64,9 @@ class Factory extends React.Component {
         if(!this.state.model){
             return <div></div>
         }
-        const {title, content, fixedbox} = this.state.model;
+        let {model} = this.state;
+        let titleHeight = this.titleHeight || 60;
+        const {title, content, fixedbox} = model;
         let titleConfig = title.config || {height: 0};
         let items = [];
         if(fixedbox) {
@@ -67,9 +75,9 @@ class Factory extends React.Component {
         return (
             <div>
                 <Title {...this.state.model.title.config} />
-                <Container items={content.items} rowHeight={(window.innerHeight - titleConfig.height || 55) / 10} />
+                <Container items={content.items} rowHeight={(window.innerHeight - titleHeight || 55) / 10} />
                 {items.map((item, index) => {
-                    return <FixedBox key={`${index}`} titleHeight={titleConfig.height} {...item}/>;
+                    return <FixedBox key={`${index}`} titleHeight={titleHeight} {...item}/>;
                 })}
             </div>
         );

kanban-client/app/data/cc.json

@@ -0,0 +1,203 @@
+{
+    "title": {
+        "config": {
+            "render": "titleRender2",
+            "height": 55,
+            "state": {
+                "line": "S02",
+                "ban": "班别"
+            }
+        }
+    },
+    "content": {
+        "items": [
+            {
+                "type": "pie",
+                "config": {
+                    "title": "{maintitle}",
+                    "subtitle": "{subtitle}",
+                    "series": [
+                        {"name": "字段0", "data": 33},
+                        {"name": "字段1", "data": 37},
+                        {"name": "字段2", "data": 28}
+                    ]
+            
+                },
+                "layout": {
+                    "x": "0%",
+                    "y": "0%",
+                    "w": "50%",
+                    "h": "50%"
+                }
+            },
+            {
+                "type": "bar",
+                "config": {
+                    "title": "bartitle",
+                    "subtitle": "barsub",
+                    "xtitle": "X-name",
+                    "xtype": "category",
+                    "xfields": [
+                        "字段1",
+                        "字段2",
+                        "字段3"
+                    ],
+                    "ytitle": "Y-name",
+                    "ytype": "numeric",
+                    "yfields": "",
+                    "series": [
+                        {
+                            "name": "数据组1",
+                            "data": [
+                                12,
+                                48,
+                                32
+                            ]
+                        },
+                        {
+                            "name": "数据组2",
+                            "data": [
+                                24,
+                                66,
+                                49
+                            ]
+                        }
+                    ]
+                },
+                "layout": {
+                    "x": "50%",
+                    "y": "50%",
+                    "w": "50%",
+                    "h": "50%"
+                }
+            },
+            {
+                "type": "line",
+                "config": {
+                    "title": "linetitle",
+                    "subtitle": "linesub",
+                    "xtitle": "X-name",
+                    "xtype": "category",
+                    "xfields": [
+                        "字段1",
+                        "字段2",
+                        "字段3"
+                    ],
+                    "ytitle": "Y-name",
+                    "ytype": "numeric",
+                    "yfields": "",
+                    "series": [
+                        {
+                            "name": "数据组1",
+                            "data": [
+                                12,
+                                48,
+                                32
+                            ]
+                        },
+                        {
+                            "name": "数据组2",
+                            "data": [
+                                24,
+                                66,
+                                49
+                            ]
+                        }
+                    ]
+                },
+                "layout": {
+                    "x": "0%",
+                    "y": "50%",
+                    "w": "50%",
+                    "h": "50%"
+                }
+            },
+            {
+                "type": "table",
+                "config": {
+                    "columns": [
+                        {
+                            "title": "时段",
+                            "dataIndex": "time"
+                        },
+                        {
+                            "title": "计划数",
+                            "dataIndex": "plan"
+                        },
+                        {
+                            "title": "投入数",
+                            "dataIndex": "input"
+                        },
+                        {
+                            "title": "送检数",
+                            "dataIndex": "check"
+                        },
+                        {
+                            "title": "包装数",
+                            "dataIndex": "pack"
+                        },
+                        {
+                            "title": "达成率",
+                            "dataIndex": "success",
+                            "render": "rateRender"
+                        },
+                        {
+                            "title": "备注",
+                            "dataIndex": "desc",
+                            "render": "descRender"
+                        }
+                    ],
+                    "data": [
+                        {
+                            "key": "1",
+                            "time": "8-9",
+                            "plan": "150",
+                            "input": "160",
+                            "check": "100",
+                            "pack": "0",
+                            "success": "70%",
+                            "desc": "78"
+                        },
+                        {
+                            "key": "2",
+                            "time": "9-10",
+                            "plan": "200",
+                            "input": "200",
+                            "check": "200",
+                            "pack": "0",
+                            "success": "100%",
+                            "desc": "98"
+                        },
+                        {
+                            "key": "3",
+                            "time": "10-11",
+                            "plan": "200",
+                            "input": "203",
+                            "check": "400",
+                            "pack": "0",
+                            "success": "120%",
+                            "desc": "45"
+                        },
+                        {
+                            "key": "4",
+                            "time": "11-12",
+                            "plan": "",
+                            "input": "",
+                            "check": "",
+                            "pack": "",
+                            "success": "",
+                            "desc": "344"
+                        }
+                    ],
+                    "render": "tableRender"
+                },
+                "layout": {
+                    "x": "50%",
+                    "y": "0%",
+                    "w": "50%",
+                    "h": "50%"
+                }
+            }
+        ]
+    }
+}

kanban-client/src/Title/Title.jsx

@@ -39,7 +39,7 @@ export default class Title extends React.Component {
 
   getTitle() {
     const { render, height, width, cls, style} = this.props;
-    style.height = height;
+    // style.height = height;
     let tel;
     if (renders[render]) {
       tel = <div className={cls} style={style}>{renders[render](this.props.state)}</div>;