报表最大宽度使用model统一控制

src/components/dashboardDesigner/viewLayout.jsx

@@ -35,9 +35,11 @@ class ViewLayout extends React.PureComponent {
         });
     }
 
-    createElement = (item, isPreview, reload, contentSize, esMobile) => {
+    createElement = (item, isPreview, reload, contentSize) => {
+        const { dashboardDesigner, esMobile } = this.props;
+        const { maxLayoutW } = dashboardDesigner;
         const { code, layout } = item;
-        return <div key={code} data-grid={esMobile ? { x:0, y:50, w:12, h:8, minW: 12, maxW:12, minH:8, maxH:8 } : layout} style={{ height: '100%' }}>
+        return <div key={code} data-grid={esMobile ? { x:0, y:50, w: maxLayoutW, h:8, minW: maxLayoutW, maxW: maxLayoutW, minH:8, maxH:8 } : layout} style={{ height: '100%' }}>
             <ViewLayoutItem
                 item={item}
                 esMobile={esMobile}
@@ -106,14 +108,14 @@ class ViewLayout extends React.PureComponent {
     render() {
         const { dashboardDesigner, contentSize, esMobile, dispatch } = this.props;
         const { editingKey } = this.state;
-        const { editMode, minLayoutHeight, layoutMargin, theme: themeName } = dashboardDesigner;
+        const { editMode, minLayoutHeight, maxLayoutW, layoutMargin, theme: themeName } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
         const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption, contentSize, esMobile));
         return (<div className={`dashboard-viewcontent ${themeName}`} ref={node => this.viewContentRef = node}>
             <ReactGridLayout
                 width={ contentSize.width }
                 autoSize={true}
-                cols={12}
+                cols={maxLayoutW}
                 margin = {editMode ? layoutMargin : layoutMargin}
                 rowHeight = {minLayoutHeight}
                 isDraggable={editMode && !editingKey}
@@ -124,7 +126,7 @@ class ViewLayout extends React.PureComponent {
                 verticalCompact={true}
                 compactType='vertical'
             >
-                {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: 12, h: 2, minW: 12, maxW: 12, minH: 2, maxH: 2, static: true }}>
+                {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: 2, minW: maxLayoutW, maxW: maxLayoutW, minH: 2, maxH: 2, static: true }}>
                     <EmptyContent />
                 </div> : children}
             </ReactGridLayout>

src/models/dashboardDesigner.js

@@ -84,6 +84,8 @@ function getBodyFilters(filters) {
     }); 
 }
 
+const _maxLayoutW = 12;
+
 export default {
     namespace: 'dashboardDesigner',
     state: {
@@ -92,8 +94,9 @@ export default {
             name: '无标题',
             theme: 'default',
             minLayoutHeight: 40, // 元素最小高度
+            maxLayoutW: _maxLayoutW,
             layoutMargin: [8, 8], // 元素margin
-            defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 1 },
+            defaultLayout: { x: 0, y: 50, w: _maxLayoutW, h: 6, minW: 2, maxW: _maxLayoutW, minH: 1 },
             items: [],
             chartCodes: [], // 报表包含的所有图表
             description: '',