报表展示手机端适配

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

@@ -184,4 +184,18 @@
             }
         }
     }
+}
+.previewbox.theme2 {
+    >.ant-modal-content {
+        >.ant-modal-body {
+            background: rgba(41,52,65,1);
+            .chartview-toolbar {
+                color: #E9F0F5;
+                background: rgba(41,52,65,1);
+                .anticon:hover {
+                    color: @icon-color-hover;
+                }
+            }
+        }
+    }
 }

src/components/common/dataPreview/dataPreview.less

@@ -15,12 +15,15 @@
             margin-top: -40px;
             padding-bottom: 6px;
             .ant-modal-title {
+                font-size: 20px;
+                text-align: left;
                 line-height: 40px;
+                margin: 0;
             }
         }
         .ant-modal-body {
             height: 100%;
-            padding: 0px 10px;
+            padding: 0px 36px;
 
             .ant-table-wrapper {
                 height: 100%;
@@ -57,4 +60,8 @@
             }
         }
     }
+    &.mobile {
+        max-width: 100%;
+        margin: 0;
+    }
 }

src/components/dashboardDesigner/viewLayout.jsx

@@ -7,6 +7,13 @@ import EmptyContent from '../common/emptyContent/index'
 import DataPreview from '../common/dataPreview/dataPreview'
 import ViewLayoutItem from './viewLayoutItem';
 
+const isMobile = function() {
+    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))
+        return true;
+    else
+        return false;
+};
+const esMobile = isMobile();
 class ViewLayout extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -37,10 +44,10 @@ class ViewLayout extends React.PureComponent {
 
     createElement = (item, isPreview, reload) => {
         const { code, layout } = item;
-
-        return <div key={code} data-grid={layout} style={{ height: '100%' }}>
+        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%' }}>
             <ViewLayoutItem
                 item={item}
+                esMobile={esMobile}
                 isPreview={isPreview}
                 reload={reload}
                 showPreviewBox={this.showPreviewBox}
@@ -122,8 +129,8 @@ class ViewLayout extends React.PureComponent {
                 </div> : children}
             </ReactGridLayout>
             {visiblePreviewBox && previewItem.chartType === 'dataView' && <DataPreview
+                modalClassName={`${themeName} ${esMobile ? 'mobile' : ''}`}
                 title={previewItem.name}
-                modalClassName={themeName}
                 visibleBox={visiblePreviewBox}
                 hideBox={this.hidePreviewBox}
                 fetchFunction={(page, pageSize) => {
@@ -131,9 +138,9 @@ class ViewLayout extends React.PureComponent {
                 }}
             />}
             {visiblePreviewBox && previewItem.chartType !== 'dataView' && <Modal
-                className='previewbox'
-                width='80%'
-                height='80%'
+                className={`previewbox ${themeName} ${esMobile ? 'mobile' : ''}`}
+                width={'100%'}
+                height={'100%'}
                 visible={visiblePreviewBox}
                 onCancel={this.hidePreviewBox}
                 footer={null}

src/components/dashboardDesigner/viewLayout.less

@@ -21,13 +21,6 @@
     z-index: 1;
     // border: 1px solid #CCCCCC;
     background: white;
-    &:hover {
-      .chartview-toolbar {
-        .chart-tools {
-          display: block;
-        }
-      }
-    }
     .chartview-toolbar {
       height: 40px;
       margin-top: -40px;
@@ -50,6 +43,9 @@
           display: none;
           margin-left: 10px;
           cursor: pointer;
+          &:hover {
+            color: @icon-color-hover;
+          }
         }
         .visible-icon {
           display: inline-block;
@@ -125,12 +121,22 @@
         }
       }
     }
+    &.mobile {
+        .chartview-toolbar {
+          .chart-tools {
+            display: block;
+            .anticon {
+              display: inline-block;
+            }
+          }
+        }
+    }
     &:hover {
-      .chart-tools {
-        .anticon {
-          display: inline-block;
-          &:hover {
-            color: @icon-color-hover;
+      .chartview-toolbar {
+        .chart-tools {
+          display: block;
+          .anticon {
+            display: inline-block;
           }
         }
       }
@@ -286,7 +292,7 @@
   }
 }
 .previewbox {
-  top: 10%;
+  top: 0;
   padding-bottom: 0;
   .ant-modal-content {
     height: 100%;
@@ -332,4 +338,12 @@
       }
     }
   }
+  &.mobile {
+    top: 0;
+    margin: 0;
+    max-width: 100%;
+    .ant-modal-body {
+      padding: 0 12px;
+    }
+  }
 }

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -18,7 +18,7 @@ class ViewLayoutItem extends React.Component {
     }
 
     render() {
-        const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox } = this.props;
+        const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox, esMobile } = this.props;
         const { editing, title } = this.state;
         const { currentUser } = main;
         const { dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
@@ -26,7 +26,7 @@ class ViewLayoutItem extends React.Component {
         const iconCls = editMode ? 'visible-icon' : '';
 
         return (
-            <div className={`chartview${ isPreview ? ' chartview-preview' : (editMode ? ' chartview-edit' : '')}`} style={{ height: '100%' }}>
+            <div className={`chartview${ isPreview ? ' chartview-preview' : (editMode ? ' chartview-edit' : '')}${esMobile?' mobile':''}`} style={{ height: '100%' }}>
                 <div className='chartview-toolbar mover'>
                     <div className='chart-title'>
                         {editing ? <Input width={200} ref={node => this['inputRef-' + code] = node} defaultValue={name}