报表主题完善/报表子组件结构分割

src/components/chartDesigner/charts/aggregateTableView.jsx

@@ -34,71 +34,69 @@ class AggregateTableView extends React.Component {
     }
 
     // 无分组
-    createTableBodyInNoGroups = (chartOption, themeConfig) => {
+    createTableBodyInNoGroups = (chartOption) => {
         const { targetColumn, direction, statistics, data } = chartOption;
-        const { targetStyle, statisticsStyle, cellStyle } = themeConfig;
         if(direction === 'vertical') {
             return <tbody>
-                <tr>
-                    <th className='target-cell' rowSpan={`${statistics.length + 1}`} style={targetStyle}>{targetColumn.label}</th>
+                <tr className='row-target'>
+                    <th className='cell-target' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
-                    statistics.map((s, i) => <tr key={i}>
-                        <td style={statisticsStyle}>{s.label}</td>
-                        <td style={cellStyle}>{data[s.name]}</td>
+                    statistics.map((s, i) => <tr className='row-statistics' key={i}>
+                        <td className='cell-statistics-key'>{s.label}</td>
+                        <td className='cell-statistics-value'>{data[s.name]}</td>
                     </tr>)
                 }
             </tbody>
         }
         return <tbody>
-            <tr>
-                <th className='target-cell' colSpan={`${statistics.length}`} style={targetStyle}>{targetColumn.label}</th>
+            <tr className='row-target'>
+                <th className='cell-target' colSpan={`${statistics.length}`}>{targetColumn.label}</th>
             </tr>
             <tr>
-                { statistics.map((s, i) => <td key={i} style={statisticsStyle}>{s.label}</td>) }
+                { statistics.map((s, i) => <td className='cell-statistics-key' key={i}>{s.label}</td>) }
             </tr>
-            <tr>
-                { statistics.map((s, i) => <td key={i} style={cellStyle}>{data[s.name]}</td>) }
+            <tr className='row-statistics'>
+                { statistics.map((s, i) => <td className='cell-statistics-value' key={i}>{data[s.name]}</td>) }
             </tr>
         </tbody>;
     }
 
     // 有一个分组
-    createTableBodyInOneGroups = (chartOption, themeConfig) => {
+    createTableBodyInOneGroups = (chartOption) => {
         const { targetColumn, direction, group1s, statistics, data } = chartOption;
-        const { targetStyle, statisticsStyle, groupByStyle, cellStyle } = themeConfig;
         if(direction === 'vertical') {
             return <tbody>
-                <tr>
-                    <td colSpan="2"></td>
-                    { group1s.map((g, i) => <td key={i} style={groupByStyle}>{g}</td>) }
+                <tr className='row-group'>
+                    <td className='cell-empty' colSpan="2"></td>
+                    { group1s.map((g, i) => <td className='cell-group' key={i}>{g}</td>) }
                 </tr>
-                <tr>
-                    <th className='target-cell' rowSpan={`${statistics.length + 1}`} style={targetStyle}>{targetColumn.label}</th>
+                <tr className='row-target'>
+                    <th className='cell-target' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
-                    statistics.map((s, si) => <tr key={si}>
-                        <td style={statisticsStyle}>{s.label}</td>
-                        { group1s.map((g1, gi) => <td key={gi} style={cellStyle}>{data[gi][s.name]}</td>) }
+                    statistics.map((s, si) => <tr className='row-statistics' key={si}>
+                        <td className='cell-statistics-key'>{s.label}</td>
+                        { group1s.map((g1, gi) => <td className='cell-statistics-value' key={gi}>{data[gi][s.name]}</td>) }
                     </tr>)
                 }
             </tbody>
         }
         return <tbody>
-            <tr>
-                <th className='target-cell' colSpan={`${statistics.length + 1}`} style={targetStyle}>{targetColumn.label}</th>
+            <tr className='row-target'>
+                <th className='cell-target' colSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
             </tr>
-            <tr>
-                <td></td>
+            <tr className='row-statistics'>
+                <td className='cell-empty'></td>
                 {
-                    statistics.map((s, i) => <td key={i} style={statisticsStyle}>{s.label}</td>)
+                    statistics.map((s, i) => <td className='cell-statistics-key' key={i}>{s.label}</td>)
                 }
             </tr>
             {
-                group1s.map((g, gi) => <tr key={gi}>
-                    <td style={groupByStyle}>{g}</td>
+                group1s.map((g, gi) => <tr className='row-statistics' key={gi}>
+                    <td className='cell-group'>{g}</td>
                     {
-                        statistics.map((s, si) => <td key={si} style={cellStyle}>{data[gi][s.name]}</td>)
+                        statistics.map((s, si) => <td className='cell-statistics-value' key={si}>{data[gi][s.name]}</td>)
                     }
                 </tr>)
             }
@@ -106,26 +104,25 @@ class AggregateTableView extends React.Component {
     }
 
     // 有两个分组
-    createTableBodyInTwoGroups = (chartOption, themeConfig) => {
+    createTableBodyInTwoGroups = (chartOption) => {
         const { targetColumn, direction, group1Name, group1s, group2s, statistics, data } = chartOption;
-        const { targetStyle, statisticsStyle, groupByStyle, cellStyle } = themeConfig;
         if(direction === 'vertical') {
             return <tbody>
-                <tr>
-                    <td colSpan="3"></td>
-                    {group1s.map((g, i) => <td key={i} style={groupByStyle}>{g}</td>)}
+                <tr className='row-group'>
+                    <td className='cell-empty' colSpan="3"></td>
+                    {group1s.map((g, i) => <td className='cell-group' key={i}>{g}</td>)}
                 </tr>
-                <tr>
-                    <th className='target-cell' rowSpan={`${group2s.length * statistics.length + 1}`} style={targetStyle}>{targetColumn.label}</th>
+                <tr className='row-target'>
+                    <th className='cell-target' rowSpan={`${group2s.length * statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
                     group2s.map((g2, idx2) => {
-                        return statistics.map((s, si) => <tr key={si}>
-                            { si === 0 && <td rowSpan={`${statistics.length}`} style={groupByStyle}>{g2}</td>}
-                            <td style={statisticsStyle}>{s.label}</td>
+                        return statistics.map((s, si) => <tr className='row-statistics' key={si}>
+                            { si === 0 && <td className='cell-group' rowSpan={`${statistics.length}`}>{g2}</td>}
+                            <td className='cell-statistics-key'>{s.label}</td>
                             {group1s.map((g1, idx1) => {
                                 let values = data[idx1].data[idx2];
-                                return <td key={idx1} style={cellStyle}>{values[s.name]}</td>
+                                return <td className='cell-statistics-value' key={idx1}>{values[s.name]}</td>
                             })}
                         </tr>)
                     })
@@ -133,24 +130,24 @@ class AggregateTableView extends React.Component {
             </tbody>
         }
         return <tbody>
-            <tr>
-                <th className='target-cell' colSpan={direction === 'vertical' ? group1s.length + 3 : statistics.length * group2s.length + 1} style={targetStyle}>{targetColumn.label}</th>
+            <tr className='row-target'>
+                <th className='cell-target' colSpan={direction === 'vertical' ? group1s.length + 3 : statistics.length * group2s.length + 1}>{targetColumn.label}</th>
             </tr>
-            <tr>
-                <td rowSpan={2}></td>
-                { group2s.map((g, i) => <td colSpan={statistics.length} key={i} style={groupByStyle}>{g}</td>) }
+            <tr className='row-group'>
+                <td className='cell-empty' rowSpan={2}></td>
+                { group2s.map((g, i) => <td className='cell-group' colSpan={statistics.length} key={i}>{g}</td>) }
             </tr>
-            <tr>
-                { group2s.map((g, gi) => statistics.map((s, si) => <td key={`${gi}-${si}`} style={statisticsStyle}>{s.label}</td>)) }
+            <tr className='row-statistics'>
+                { group2s.map((g, gi) => statistics.map((s, si) => <td className='cell-statistics-key' key={`${gi}-${si}`}>{s.label}</td>)) }
             </tr>
             {
                 data.map((d1, d1i) => {
                     let data2 = d1.data;
-                    return <tr key={d1i}>
-                        <td style={groupByStyle}>{ d1[group1Name] }</td>
+                    return <tr className='row-statistics' key={d1i}>
+                        <td className='cell-group'>{ d1[group1Name] }</td>
                         { data2.map(d2 => {
                                 return statistics.map((s, si) => {
-                                    return <td key={si} style={cellStyle}>{d2[s.name]}</td>
+                                    return <td className='cell-statistics-value' key={si}>{d2[s.name]}</td>
                                 })
                         }) }
                     </tr>
@@ -162,7 +159,7 @@ class AggregateTableView extends React.Component {
     render() {
         const { chartOption } = this.props;
         const { direction, themeConfig } = chartOption;
-        const { backgroundColor } = themeConfig || {};
+        const { name: themeName } = themeConfig || {};
         if(!chartOption || !chartOption.targetColumn || !chartOption.statistics || chartOption.statistics.length === 0) {
             return <EmptyContent />
         }
@@ -170,7 +167,7 @@ class AggregateTableView extends React.Component {
         if(!body) {
             return <EmptyContent />
         }
-        return <div ref={ node => this.formRef = node } className='aggregate-container' style={{ backgroundColor }}>
+        return <div ref={ node => this.formRef = node } className={`aggregate-container ${themeName}`}>
             <table className={`aggregate-table ${direction}`} border='1'>
                 { body }
             </table>

src/components/chartDesigner/charts/aggregateTableView.less

@@ -11,7 +11,7 @@
                     padding: 8px 16px;
                     border-color: #4A90E2;
                 }
-                .target-cell {
+                .cell-target {
                     background: #D6EEFE;
                 }
             }

src/components/chartDesigner/charts/indicatorView.jsx

@@ -69,13 +69,13 @@ class IndicatorView extends React.Component {
         }
     }
 
-    generateExtra = (data, nameLabelColor, valueLabelColor) => {
+    generateExtra = (data) => {
         return data.map((d, i) => (
             <div className='row indicator-extra' key={i}>
                 <div className='cell c-extra'>
                     <div className='over-wrapper'>
-                        <span className='til' title={d.name} style={{ color: nameLabelColor }}>{d.name === null ? '空' : d.name}</span>
-                        <span className='val' title={d.value} style={{ color: valueLabelColor }}>{d.value === null ? '--' : d.value}</span>
+                        <span className='til' title={d.name}>{d.name === null ? '空' : d.name}</span>
+                        <span className='val' title={d.value}>{d.value === null ? '--' : d.value}</span>
                     </div>
                 </div>
             </div>
@@ -85,7 +85,7 @@ class IndicatorView extends React.Component {
     render() {
         const { chartOption } = this.props;
         const { data, themeConfig } = chartOption;
-        const { backgroundColor, boxBackgroundColor, nameLabelColor, keyLabelColor, valueLabelColor, extraNameLabelColor, extraValueLabelColor } = themeConfig || {};
+        const { name: themeName } = themeConfig || {};
         if(!chartOption || !chartOption.data || !chartOption.data.length === 0) {
             return <div className='indicator-container empty' ref={ node => this.containerRef = node }>
                 <div className='indicator-body'>
@@ -93,27 +93,27 @@ class IndicatorView extends React.Component {
                 </div>
             </div>
         }
-        return <div className='indicator-container' ref={ node => this.containerRef = node } style={{ backgroundColor: backgroundColor }}>
+        return <div className={`indicator-container ${themeName}`} ref={ node => this.containerRef = node }>
             <div className='indicator-body'>
                 {
                     data.map((d, i) => (
-                        <div className={`indicator-box`} key={i} style={{ backgroundColor: boxBackgroundColor }}>
+                        <div className={`indicator-box`} key={i}>
                             {d.name !== undefined && <div className='row indicator-name'>
                                 <div className='cell c-name'>
-                                    <div className='over-wrapper' title={d.name} style={{ color: nameLabelColor }}>{d.name === null ? '空' : d.name}</div>
+                                    <div className='over-wrapper' title={d.name}>{d.name === null ? '空' : d.name}</div>
                                 </div>
                             </div>}
                             <div className='row indicator-key'>
                                 <div className='cell c-key'>
-                                    <div className='over-wrapper' title={d.key} style={{ color: keyLabelColor }}>{d.key === null ? '空': d.key}</div>
+                                    <div className='over-wrapper' title={d.key}>{d.key === null ? '空': d.key}</div>
                                 </div>
                             </div>
                             <div className='row indicator-value'>
                                 <div className='cell c-value'>
-                                    <div className='over-wrapper' title={d.value} style={{ color: valueLabelColor }}>{d.value === null ? '--' : d.value}</div>
+                                    <div className='over-wrapper' title={d.value}>{d.value === null ? '--' : d.value}</div>
                                 </div>
                             </div>
-                            {d.others && d.others.length > 0 && this.generateExtra(d.others, extraNameLabelColor, extraValueLabelColor)}
+                            {d.others && d.others.length > 0 && this.generateExtra(d.others)}
                         </div>
                     ))
                 }

src/components/chartDesigner/charts/indicatorView.less

@@ -1,10 +1,6 @@
 .indicator-container {
     height: 100%;
     width: 100%;
-    background: #fff;
-    &.empty {
-        background: @content-background-color;
-    }
     .indicator-body {
         width: 100%;
         height: 100%;
@@ -33,7 +29,7 @@
                         text-overflow: ellipsis;
                     }
                     &.c-name {
-
+                        font-size: 18px;
                     }
                     &.c-key {
                         font-size: 12px;

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -43,7 +43,6 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 						}
 					}}
 					options={columns.filter(c =>['ordinal', 'categorical', 'time'].indexOf(c.type) !== -1).map((c, i)=>{
-						
 						return {
 							type: c.type,
 							value: c.name,

src/components/chartDesigner/sections/granularity.json

@@ -1,6 +1,6 @@
 {
-    "ordinal": null,
-    "categorical": null,
+    "ordinal": [],
+    "categorical": [],
     "time": [{
         "value": "year",
         "label": "年"

src/components/chartDesigner/sections/style/theme/bluelight.json

@@ -1,195 +0,0 @@
-{
-    "base": {
-        "name": "default",
-        "color": [
-            "#2eb4ff",
-            "#51edda",
-            "#8121fc",
-            "#a0a7e6",
-            "#c4ebad",
-            "#96dee8",
-            "#19a0bd",
-            "#3772eb",
-            "#59c4e6",
-            "#a5e7f0",
-            "#f7e426",
-            "#07a2a4",
-            "#9a7fd1",
-            "#da9bf7"
-        ],
-        "backgroundColor": "#fff",
-        "textStyle": {},
-        "legend": {
-            "textStyle": {
-                "color": "#333"
-            }
-        },
-        "tooltip": {
-            "axisPointer": {
-                "lineStyle": {
-                    "color": "#cccccc",
-                    "width": 1
-                },
-                "crossStyle": {
-                    "color": "#cccccc",
-                    "width": 1
-                }
-            }
-        }
-    },
-    "dataZoom": {
-        "dataZoom": {
-            "backgroundColor": "rgba(47,69,84,0)",
-            "dataBackgroundColor": "rgba(47,69,84,0.3)",
-            "fillerColor": "rgba(167,183,204,0.4)",
-            "handleColor": "#a7b7cc",
-            "handleSize": "100%",
-            "textStyle": {
-                "color": "#333"
-            }
-        }
-    },
-    "line": {
-        "line": {
-            "itemStyle": {
-                "normal": {
-                    "borderWidth": 1
-                }
-            },
-            "lineStyle": {
-                "normal": {
-                    "width": 2
-                }
-            }
-        }
-    },
-    "bar": {
-        "bar": {
-            "itemStyle": {
-                "normal": {
-                    "barBorderWidth": 0,
-                    "barBorderColor": "#ccc"
-                },
-                "emphasis": {
-                    "barBorderWidth": 0,
-                    "barBorderColor": "#ccc"
-                }
-            }
-        }
-    },
-    "pie": {
-        "pie": {
-            "itemStyle": {
-                "normal": {
-                    "borderWidth": 0,
-                    "borderColor": "#ccc"
-                },
-                "emphasis": {
-                    "borderWidth": 0,
-                    "borderColor": "#ccc"
-                }
-            }
-        },
-        "dataZoom": null,
-        "markPoint": null
-    },
-    "scatter": {
-        "scatter": {
-            "itemStyle": {
-                "normal": {
-                    "borderWidth": 0,
-                    "borderColor": "#ccc"
-                },
-                "emphasis": {
-                    "borderWidth": 0,
-                    "borderColor": "#ccc"
-                }
-            }
-        }
-    },
-    "xAxis": {
-        "xAxis": {
-            "0": {
-                "axisLine": {
-                    "show": true,
-                    "lineStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "axisTick": {
-                    "show": true,
-                    "lineStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "axisLabel": {
-                    "show": true,
-                    "textStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "splitLine": {
-                    "show": false,
-                    "lineStyle": {
-                        "color": [
-                            "#F5F6FB"
-                        ]
-                    }
-                },
-                "splitArea": {
-                    "show": false,
-                    "areaStyle": {
-                        "color": [
-                            "rgba(250,250,250,0.3)",
-                            "rgba(200,200,200,0.3)"
-                        ]
-                    }
-                }
-            }
-        }
-    },
-    "yAxis": {
-        "yAxis": {
-            "0": {
-                "axisLine": {
-                    "show": true,
-                    "lineStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "axisTick": {
-                    "show": true,
-                    "lineStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "axisLabel": {
-                    "show": true,
-                    "textStyle": {
-                        "color": "#aaaaaa"
-                    }
-                },
-                "splitLine": {
-                    "show": true,
-                    "lineStyle": {
-                        "color": [
-                            "#F5F6FB"
-                        ]
-                    }
-                },
-                "splitArea": {
-                    "show": false,
-                    "areaStyle": {
-                        "color": [
-                            "rgba(250,250,250,0.3)",
-                            "rgba(200,200,200,0.3)"
-                        ]
-                    }
-                }
-            }
-        }
-    },
-    "indicator": {
-        "boxBackgroundColor": "#F0F8FF"
-    }
-}

src/components/chartDesigner/sections/style/theme/dark.less

@@ -1,65 +0,0 @@
-.table-view.theme2 {
-    .ant-table {
-        border: none;
-        .ant-table-header {
-            &:after {
-                background: #3054AF;
-            }
-            > .ant-table-fixed > .ant-table-thead > tr {
-                background: #3054AF;
-                border: none;
-                &:hover {
-                    background: #3054AF;
-                    border: none;
-                }
-                &>th {
-                    color: #E9F0F5;
-                    border: none;
-                }
-            }
-        }
-        .ant-table-tbody {
-            tr:nth-child(even) {
-                background: #253C7E;
-                color: #E9F0F5;
-                td {
-                    border: none;
-                }
-            }
-            tr:nth-child(odd) {
-                background: #182E6F;
-                color: #E9F0F5;
-                td {
-                    border: none;
-                }
-            }
-        }
-    }
-    .ant-pagination {
-        >.ant-pagination-total-text {
-            color: #E6EDFF;
-        }
-        >.ant-pagination-prev,.ant-pagination-next {
-            >a {
-                color: #E6EDFF;
-            }
-            &.ant-pagination-disabled {
-                >a {
-                    color: #5a5a5a;
-                }
-            }
-        }
-        >.ant-pagination-item {
-            >a {
-                color: #E6EDFF
-            }
-            &-active {
-                background: #fff;
-                border-color: transparent;
-                >a {
-                    color: #333333;
-                }
-            }
-        }
-    }
-}

src/components/chartDesigner/sections/style/theme/default.json

@@ -1,39 +1,27 @@
 {
     "base": {
-        "name": "theme1",
+        "name": "default",
         "color": [
-            "#516b91",
+            "#2eb4ff",
+            "#51edda",
+            "#8121fc",
+            "#a0a7e6",
+            "#c4ebad",
+            "#96dee8",
+            "#19a0bd",
+            "#3772eb",
             "#59c4e6",
-            "#edafda",
-            "#93b7e3",
             "#a5e7f0",
-            "#cbb0e3",
-            "#2ec7c9",
-            "#b6a2de",
-            "#5ab1ef",
-            "#ffb980",
-            "#d87a80",
-            "#8d98b3",
-            "#e5cf0d",
-            "#97b552",
-            "#95706d",
-            "#dc69aa",
+            "#f7e426",
             "#07a2a4",
             "#9a7fd1",
-            "#588dd5",
-            "#f5994e",
-            "#c05050",
-            "#59678c",
-            "#c9ab00",
-            "#7eb00a",
-            "#6f5553",
-            "#c14089"
+            "#da9bf7"
         ],
         "backgroundColor": "#fff",
         "textStyle": {},
         "legend": {
             "textStyle": {
-                "color": "#999999"
+                "color": "#333"
             }
         },
         "tooltip": {
@@ -51,8 +39,8 @@
     },
     "dataZoom": {
         "dataZoom": {
-            "backgroundColor": "rgba(0,0,0,0)",
-            "dataBackgroundColor": "rgba(255,255,255,0.3)",
+            "backgroundColor": "rgba(47,69,84,0)",
+            "dataBackgroundColor": "rgba(47,69,84,0.3)",
             "fillerColor": "rgba(167,183,204,0.4)",
             "handleColor": "#a7b7cc",
             "handleSize": "100%",
@@ -65,17 +53,14 @@
         "line": {
             "itemStyle": {
                 "normal": {
-                    "borderWidth": "2"
+                    "borderWidth": 1
                 }
             },
             "lineStyle": {
                 "normal": {
-                    "width": "2"
+                    "width": 2
                 }
-            },
-            "symbolSize": "6",
-            "symbol": "emptyCircle",
-            "smooth": false
+            }
         }
     },
     "bar": {
@@ -122,7 +107,86 @@
             }
         }
     },
-    "indicator": {
-        "boxBackgroundColor": "#ececec"
+    "xAxis": {
+        "xAxis": {
+            "0": {
+                "axisLine": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "axisTick": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "axisLabel": {
+                    "show": true,
+                    "textStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "splitLine": {
+                    "show": false,
+                    "lineStyle": {
+                        "color": [
+                            "#F5F6FB"
+                        ]
+                    }
+                },
+                "splitArea": {
+                    "show": false,
+                    "areaStyle": {
+                        "color": [
+                            "rgba(250,250,250,0.3)",
+                            "rgba(200,200,200,0.3)"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "yAxis": {
+        "yAxis": {
+            "0": {
+                "axisLine": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "axisTick": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "axisLabel": {
+                    "show": true,
+                    "textStyle": {
+                        "color": "#aaaaaa"
+                    }
+                },
+                "splitLine": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": [
+                            "#F5F6FB"
+                        ]
+                    }
+                },
+                "splitArea": {
+                    "show": false,
+                    "areaStyle": {
+                        "color": [
+                            "rgba(250,250,250,0.3)",
+                            "rgba(200,200,200,0.3)"
+                        ]
+                    }
+                }
+            }
+        }
     }
 }

src/components/chartDesigner/sections/style/theme/default.less

@@ -0,0 +1,23 @@
+.indicator-container.default {
+    .indicator-body {
+        .indicator-box {
+            border: none;
+            .row{
+                .cell {
+                    &.c-name,&.c-value {
+                        color: #F5F7FB;
+                    }
+                    &.c-key, &.c-extra .over-wrapper > span{
+                        color: #bdcce8;
+                    }
+                }
+            }
+            &:nth-child(odd) {
+                background: #3054AF;
+            }
+            &:nth-child(even) {
+                background: #4F96E3;
+            }
+        }
+    }
+}

src/components/chartDesigner/sections/style/theme/index.js

@@ -1,18 +1,20 @@
 import defaultTheme from './default.json';
-import bluelight from './bluelight.json';
-import dark from './dark.json';
-import './dark.less';
+import theme1 from './theme1.json';
+import theme2 from './theme2.json';
+import './default.less';
+import './theme1.less';
+import './theme2.less';
 
 export default [{
     name: 'default',
     label: '默认',
-    config: bluelight
+    config: defaultTheme
 }, {
-    name: 'light',
+    name: 'theme1',
     label: '主题一',
-    config: defaultTheme
+    config: theme1
 }, {
-    name: 'dark',
+    name: 'theme2',
     label: '主题二',
-    config: dark
+    config: theme2
 }]

src/components/chartDesigner/sections/style/theme/theme1.json

@@ -0,0 +1,128 @@
+{
+    "base": {
+        "name": "theme1",
+        "color": [
+            "#516b91",
+            "#59c4e6",
+            "#edafda",
+            "#93b7e3",
+            "#a5e7f0",
+            "#cbb0e3",
+            "#2ec7c9",
+            "#b6a2de",
+            "#5ab1ef",
+            "#ffb980",
+            "#d87a80",
+            "#8d98b3",
+            "#e5cf0d",
+            "#97b552",
+            "#95706d",
+            "#dc69aa",
+            "#07a2a4",
+            "#9a7fd1",
+            "#588dd5",
+            "#f5994e",
+            "#c05050",
+            "#59678c",
+            "#c9ab00",
+            "#7eb00a",
+            "#6f5553",
+            "#c14089"
+        ],
+        "backgroundColor": "#fff",
+        "textStyle": {},
+        "legend": {
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "tooltip": {
+            "axisPointer": {
+                "lineStyle": {
+                    "color": "#cccccc",
+                    "width": 1
+                },
+                "crossStyle": {
+                    "color": "#cccccc",
+                    "width": 1
+                }
+            }
+        }
+    },
+    "dataZoom": {
+        "dataZoom": {
+            "backgroundColor": "rgba(0,0,0,0)",
+            "dataBackgroundColor": "rgba(255,255,255,0.3)",
+            "fillerColor": "rgba(167,183,204,0.4)",
+            "handleColor": "#a7b7cc",
+            "handleSize": "100%",
+            "textStyle": {
+                "color": "#333"
+            }
+        }
+    },
+    "line": {
+        "line": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": "2"
+                }
+            },
+            "lineStyle": {
+                "normal": {
+                    "width": "2"
+                }
+            },
+            "symbolSize": "6",
+            "symbol": "emptyCircle",
+            "smooth": false
+        }
+    },
+    "bar": {
+        "bar": {
+            "itemStyle": {
+                "normal": {
+                    "barBorderWidth": 0,
+                    "barBorderColor": "#ccc"
+                },
+                "emphasis": {
+                    "barBorderWidth": 0,
+                    "barBorderColor": "#ccc"
+                }
+            }
+        }
+    },
+    "pie": {
+        "pie": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "dataZoom": null,
+        "markPoint": null
+    },
+    "scatter": {
+        "scatter": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        }
+    },
+    "indicator": {
+        "boxBackgroundColor": "#ececec"
+    }
+}

src/components/chartDesigner/sections/style/theme/theme1.less

@@ -0,0 +1,7 @@
+.indicator-container.theme1 {
+    .indicator-body {
+        .indicator-box {
+            background: #F0F8FF;
+        }
+    }
+}

src/components/chartDesigner/sections/style/theme/dark.json → src/components/chartDesigner/sections/style/theme/theme2.json

@@ -194,26 +194,5 @@
                 }
             }
         }
-    },
-    "indicator": {
-        "nameLabelColor": "#fff",
-        "keyLabelColor": "#999",
-        "valueLabelColor": "#2153D4",
-        "extraNameLabelColor": "#999",
-        "extraValueLabelColor": "#fff"
-    },
-    "aggregateTable": {
-        "targetStyle": {
-            "color": "#50595F"
-        },
-        "statisticsStyle": {
-            "color": "#fff"
-        },
-        "groupByStyle": {
-            "color": "#fff"
-        },
-        "cellStyle": {
-            "color": "#fff"
-        }
     }
 }

src/components/chartDesigner/sections/style/theme/theme2.less

@@ -0,0 +1,134 @@
+.table-view.theme2 {
+    .ant-table {
+        border: none;
+        .ant-table-header {
+            &:after {
+                background: #3054AF;
+            }
+            > .ant-table-fixed > .ant-table-thead > tr {
+                background: #3054AF;
+                border: none;
+                &:hover {
+                    background: #3054AF;
+                    border: none;
+                }
+                &>th {
+                    color: #E9F0F5;
+                    border: none;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr:nth-child(even) {
+                background: #253C7E;
+                color: #E9F0F5;
+                td {
+                    border: none;
+                }
+            }
+            tr:nth-child(odd) {
+                background: #182E6F;
+                color: #E9F0F5;
+                td {
+                    border: none;
+                }
+            }
+        }
+    }
+    .ant-pagination {
+        >.ant-pagination-total-text {
+            color: #E6EDFF;
+        }
+        >.ant-pagination-prev,.ant-pagination-next {
+            >a {
+                color: #E6EDFF;
+            }
+            &.ant-pagination-disabled {
+                >a {
+                    color: #5a5a5a;
+                }
+            }
+        }
+        >.ant-pagination-item {
+            >a {
+                color: #E6EDFF
+            }
+            &-active {
+                background: #fff;
+                border-color: transparent;
+                >a {
+                    color: #333333;
+                }
+            }
+        }
+    }
+}
+.aggregate-container.theme2 {
+    background: rgba(41,52,65,1);
+    .aggregate-table {
+        color: #E9F0F5;
+        .cell-target {
+            background: #3054AF;
+        }
+        .cell-group {
+            background: #3054AF;
+        }
+        .cell-statistics-key {
+            background: #3054AF;
+        }
+        .cell-empty {
+            background: #3054AF;
+        }
+        .row-statistics {
+            &:nth-child(odd) {
+                .cell-statistics-value {
+                    background: #182E6F;
+                }
+            }
+            &:nth-child(even) {
+                .cell-statistics-value {
+                    background: #253C7E;
+                }
+            }
+        }
+    }
+}
+.indicator-container.theme2 {
+    .indicator-body {
+        .indicator-box {
+            border: none;
+            .row{
+                .cell {
+                    &.c-name,&.c-value {
+                        color: #F5F7FB;
+                    }
+                    &.c-key, &.c-extra .over-wrapper > span{
+                        color: #bdcce8;
+                    }
+                }
+            }
+            &:nth-child(odd) {
+                background: #3054AF;
+            }
+            &:nth-child(even) {
+                background: #4F96E3;
+            }
+        }
+    }
+}
+.chartview.theme2 {
+    background: rgba(41,52,65,1);
+    &> .chartview-toolbar {
+        &> .chart-title {
+            color: #9fc8e6 !important;
+        }
+        > .chart-tools {
+            >.anticon {
+                color: #9fc8e6;
+                &:hover {
+                    color: @icon-color-hover;
+                  }
+            }
+        }
+    }
+}

src/components/dashboardDesigner/viewLayout.jsx

@@ -1,12 +1,11 @@
 import React from "react"
 import "./viewLayout.less"
 import ReactGridLayout from 'react-grid-layout'
-import { Modal, Icon, Input } from 'antd'
+import { Modal } from 'antd'
 import { connect } from 'dva'
-import ChartView from './chartView'
 import EmptyContent from '../common/emptyContent/index'
 import DataPreview from '../common/dataPreview/dataPreview'
-import themes from '../chartDesigner/sections/style/theme/index'
+import ViewLayoutItem from './viewLayoutItem';
 
 class ViewLayout extends React.PureComponent {
     constructor(props) {
@@ -36,75 +35,12 @@ class ViewLayout extends React.PureComponent {
         });
     }
 
-    modifyItem = (item) => {
-        const { dispatch } = this.props;
-        dispatch({ type: 'dashboardDesigner/modifyItem', item });
-    }
-
     createElement = (item, isPreview, reload) => {
-        const { dispatch, main, dashboardDesigner } = this.props;
-        const { editingKey, richTextReadOnly } = this.state;
-        const { currentUser } = main;
-        const { dashboardDesignerCode, editMode, minLayoutHeight, theme: themeName } = dashboardDesigner;
-        const { code, name, viewType, layout, chartCode, chartOption } = item;
-        const iconCls = editMode ? 'visible-icon' : '';
+        const { code, layout } = item;
 
-        let t = themes.find(t => t.name === themeName);
-        let theme = t ? t.config : themes[0].config;
-        return (
-            <div className={`chartview${ isPreview ? ' chartview-preview' : (editMode ? ' chartview-edit' : '')}`} key={code} data-grid={layout} style={{ backgroundColor: theme.base.backgroundColor }}>
-                <div className='chartview-toolbar mover'>
-                    <div className='chart-title'>
-                        {editingKey && editingKey === code ? <Input width={200} ref={node => this['inputRef-' + code] = node} defaultValue={name} onBlur={(e) => {
-                            let value = e.target.value
-                            this.setState({
-                                editingKey: null,
-                                richTextReadOnly: false,
-                            }, () => {
-                                !!value.trim() && this.modifyItem({ ...item, name: value });
-                            });
-                        // TODO 这里使用onPressEnter在存在富文本类型时会出问题
-                        // }} onPressEnter={(e) => {
-                        //     let value = e.target.value
-                        //     this.setState({
-                        //         editingKey: null,
-                        //         // richTextReadOnly: false,
-                        //     }, () => {
-                        //         !!value.trim() && this.modifyItem({ ...item, name: value });
-                        //     });
-                        }}/> : <span>{name}</span>}
-                        <div className='tools'>
-                            {editMode && (!editingKey || editingKey !== code) && !isPreview && <Icon type='edit' title='修改' style={{ cursor: 'pointer', marginLeft: '8px' }} onClick={() => {
-                                this.setState({
-                                    editingKey: code,
-                                    richTextReadOnly: true,
-                                }, () => {
-                                    this['inputRef-' + code].focus();
-                                })
-                            }}/>}
-                        </div>
-                    </div>
-                    <div className='chart-tools'>
-                        {viewType !== 'richText' && <Icon className={iconCls} type="sync" theme="outlined" onClick={() => {
-                            let page = chartOption ? chartOption.page : 1;
-                            let pageSize = chartOption ? chartOption.pageSize : (~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1)
-                            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
-                        }}/>}
-                        {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="fullscreen" onClick={() => this.showPreviewBox(item)}/>}
-                        {editMode && !isPreview && (item.creatorCode === currentUser.code || currentUser.role === 'superAdmin') && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
-                            dispatch({ type: 'dashboard/remoteModify',hideMessage:true });
-                            dispatch({ type: 'dashboardDesigner/reset' });
-                            dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
-                        }}/>}
-                        {!isPreview && editMode && <Icon className={iconCls} type='delete' onClick={() => {
-                            dispatch({ type: 'dashboardDesigner/deleteItem', item });
-                        }} />}
-                        {isPreview && <Icon className={iconCls} type="close" onClick={this.hidePreviewBox}/>}
-                    </div>
-                </div>
-                <ChartView chartRef={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} readOnly={richTextReadOnly} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
-            </div>
-        )
+        return <div key={code} data-grid={layout}>
+            <ViewLayoutItem item={item} isPreview={isPreview} reload={reload}/>
+        </div>
     }
 
     onLayoutChange = (layout) => {

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Input, Icon } from 'antd'
+import ChartView from './chartView';
+
+class ViewLayoutItem extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            editing: false
+        };
+    }
+
+    modifyItem = (item) => {
+        const { dispatch } = this.props;
+        dispatch({ type: 'dashboardDesigner/modifyItem', item });
+    }
+
+    render() {
+        const { dispatch, main, dashboardDesigner, item, isPreview, reload } = this.props;
+        const { editing } = this.state;
+        const { currentUser } = main;
+        const { dashboardDesignerCode, editMode, minLayoutHeight, theme: themeName } = dashboardDesigner;
+        const { code, name, viewType, layout, chartCode, chartOption } = item;
+        const iconCls = editMode ? 'visible-icon' : '';
+
+        return (
+            <div className={`chartview${ isPreview ? ' chartview-preview' : (editMode ? ' chartview-edit' : '')} ${themeName}`} style={{ height: '100%' }}>
+                <div className='chartview-toolbar mover'>
+                    <div className='chart-title'>
+                        {editing ? <Input width={200} ref={node => this['inputRef-' + code] = node} defaultValue={name}
+                            style={{ marginTop: '4px' }}
+                            onMouseDown={e => {
+                                e.stopPropagation()
+                            }}
+                            onBlur={(e) => {
+                                let value = e.target.value
+                                this.setState({
+                                    editing: false,
+                                }, () => {
+                                    !!value.trim() && this.modifyItem({ ...item, name: value });
+                                });
+                            }}
+                            onPressEnter={(e) => {
+                                let value = e.target.value
+                                this.setState({
+                                    editing: false,
+                                }, () => {
+                                    !!value.trim() && this.modifyItem({ ...item, name: value });
+                                });
+                            }}
+                        /> : <span>{name}</span>}
+                        <div className='tools'>
+                            {editMode && !editing && !isPreview && <Icon type='edit' title='修改' style={{ cursor: 'pointer', marginLeft: '8px' }} onClick={() => {
+                                this.setState({
+                                    editing: true
+                                }, () => {
+                                    this['inputRef-' + code].focus();
+                                })
+                            }}/>}
+                        </div>
+                    </div>
+                    <div className='chart-tools'>
+                        {viewType !== 'richText' && <Icon className={iconCls} type="sync" theme="outlined" onClick={() => {
+                            let page = chartOption ? chartOption.page : 1;
+                            let pageSize = chartOption ? chartOption.pageSize : (~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1)
+                            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
+                        }}/>}
+                        {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="fullscreen" onClick={() => this.showPreviewBox(item)}/>}
+                        {editMode && !isPreview && (item.creatorCode === currentUser.code || currentUser.role === 'superAdmin') && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
+                            dispatch({ type: 'dashboard/remoteModify',hideMessage:true });
+                            dispatch({ type: 'dashboardDesigner/reset' });
+                            dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
+                        }}/>}
+                        {!isPreview && editMode && <Icon className={iconCls} type='delete' onClick={() => {
+                            dispatch({ type: 'dashboardDesigner/deleteItem', item });
+                        }} />}
+                        {isPreview && <Icon className={iconCls} type="close" onClick={this.hidePreviewBox}/>}
+                    </div>
+                </div>
+                <ChartView chartRef={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
+            </div>
+        )
+    }
+}
+
+export default connect(({ present: { main, dashboardDesigner } }) => ({ main, dashboardDesigner }))(ViewLayoutItem);

src/models/dashboardDesigner.js

@@ -261,7 +261,7 @@ export default {
                 code: Math.random() + '',
                 viewType: 'richText',
                 name: '',
-                layout: defaultLayout
+                layout: JSON.parse(JSON.stringify(defaultLayout)) // 深拷贝
             });
             return Object.assign({}, state, {items, dirty: true});
         },