数据看板自动布局滚动条控制/默认主题更改/报表主题控制

src/components/chartDesigner/charts/indicatorView.jsx

@@ -41,6 +41,7 @@ class IndicatorView extends React.Component {
             inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
             cardWidth = (bodyBox.width - (inScroll ? 18 : 0)) / maxColNum - (inScroll ? 8 : 11);
         }
+        body.style.overflow = inScroll ? 'auto' : 'visible';
 
         if(cardCount === 1) {
             cards[0].style.border = 'none';

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

@@ -1,31 +1,20 @@
 {
     "base": {
         "color": [
-            "#0190eb",
-            "#fabd62",
-            "#7971ff",
-            "#3bdbf0",
-            "#59aefc",
-            "#6cdeff",
-            "#9b79ff",
-            "#fae41f",
-            "#1fc1d6",
-            "#325beb",
-            "#8d98b3",
-            "#e5cf0d",
-            "#97b552",
-            "#95706d",
-            "#dc69aa",
+            "#2eb4ff",
+            "#51edda",
+            "#8121fc",
+            "#a0a7e6",
+            "#c4ebad",
+            "#96dee8",
+            "#19a0bd",
+            "#3772eb",
+            "#59c4e6",
+            "#a5e7f0",
+            "#f7e426",
             "#07a2a4",
             "#9a7fd1",
-            "#588dd5",
-            "#f5994e",
-            "#c05050",
-            "#59678c",
-            "#c9ab00",
-            "#7eb00a",
-            "#6f5553",
-            "#c14089"
+            "#da9bf7"
         ],
         "backgroundColor": "rgba(41,52,65,1)",
         "textStyle": {},
@@ -225,8 +214,5 @@
         "cellStyle": {
             "color": "#fff"
         }
-    },
-    "dashboard": {
-        
     }
 }

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

@@ -5,11 +5,11 @@ import dark from './dark.json';
 export default [{
     name: 'default',
     label: '默认',
-    config: defaultTheme
+    config: bluelight
 }, {
     name: 'light',
     label: '主题一',
-    config: bluelight
+    config: defaultTheme
 }, {
     name: 'dark',
     label: '主题二',

src/components/dashboardDesigner/configSider.jsx

@@ -213,10 +213,10 @@ class ConfigSider extends React.Component {
             <div className='divider'>看板主题</div>
             <FormItem>
                 <Select
-                    disabled
                     defaultValue={theme || 'default'}
                     onChange={(value, item) => {
                         dispatch({ type: 'dashboardDesigner/setField', name: 'theme', value: value });
+                        dispatch({ type: 'dashboardDesigner/refresh' });
                     }}
                 >
                     {themes.map((theme) => (

src/components/dashboardDesigner/header.jsx

@@ -142,7 +142,7 @@ class Header extends React.Component {
                                 var e = document.createEvent("Event");
                                 e.initEvent("resize", true, true);
                                 window.dispatchEvent(e);
-                            }, 300);
+                            }, 500);
                         }}
                     />}
                     {this.isOwner() && <Button disabled={!this.isValid()} style={{ marginLeft: '8px' }} onClick={() => {

src/components/dashboardDesigner/viewLayout.jsx

@@ -6,6 +6,7 @@ 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'
 
 class ViewLayout extends React.PureComponent {
     constructor(props) {
@@ -44,12 +45,14 @@ class ViewLayout extends React.PureComponent {
         const { dispatch, main, dashboardDesigner } = this.props;
         const { editingKey, richTextReadOnly } = this.state;
         const { currentUser } = main;
-        const { dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
+        const { dashboardDesignerCode, editMode, minLayoutHeight, theme: themeName } = dashboardDesigner;
         const { code, name, viewType, layout, chartCode, chartOption } = item;
         const iconCls = editMode ? 'visible-icon' : '';
 
+        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}>
+            <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) => {
@@ -157,6 +160,7 @@ class ViewLayout extends React.PureComponent {
         const { editMode, minLayoutHeight, layoutMargin } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
         const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption));
+        
         return (<div className='dashboard-viewcontent' ref={node => this.viewContentRef = node}>
             <ReactGridLayout
                 width={ contentSize.width ? contentSize.width : lastContentSize.width }

src/components/dashboardDesigner/viewLayout.less

@@ -59,6 +59,7 @@
     .chartview-content {
       flex: 1;
       overflow: hidden;
+      padding: 0 8px;
       .dashboard-table { // 表格
         height: 100%;
         .ant-spin-nested-loading {
@@ -270,6 +271,7 @@
     bottom: 0;
     right: 0;
     cursor: s-resize;
+    background: transparent;
     &::after {
       content: "";
       cursor: se-resize;
@@ -278,8 +280,9 @@
       bottom: 3px;
       width: 7px;
       height: 7px;
-      border-right: 2px solid rgba(0, 0, 0, 0.4);
-      border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+      border-width: 0 2px 2px 0;
+      border-style: solid;
+      border-color: #EEEEEE;
     }
   }
 }
@@ -305,6 +308,7 @@
           margin-top: -40px;
           display: flex;
           justify-content: space-between;
+          background: #fff;
           .chart-title {
             font-size: 20px;
             line-height: 2.5;

src/models/dashboard.js

@@ -757,7 +757,8 @@ export default {
                         filters: JSON.parse((resData.filters|| "[]")),
                         shareCode: resData.bdCode,
                         chartCodes: chartCodes,
-                        demo: resData.demo
+                        demo: resData.demo,
+                        theme: resData.theme
                     }
 
                     let fields = [];