Browse Source

添加图表横竖屏转换逻辑

zhuth 6 years ago
parent
commit
cd2da348f2

+ 34 - 0
src/components/dashboardDesigner/rotateTarget.js

@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+import { message } from 'antd';
+
+class RotateTarget extends React.Component {
+    componentDidMount() {
+        try{
+            if(window.webkit) {
+                window.webkit.messageHandlers.event.postMessage("ChartInterfaceOrientationMaskPortrait");
+            }else if(window.android) {
+                window.android.requestedOrientationLandscape();
+            }
+        }catch(e) {
+            message.error(e);
+        }
+    }
+
+    componentWillUnmount() {
+        try{
+            if(window.webkit) {
+                window.webkit.messageHandlers.event.postMessage("ChartInterfaceOrientationMaskLandscapeRight");
+            }else if(window.android) {
+                window.android.requestedOrientationPortrait();
+            }
+        }catch(e) {
+            message.error(e);
+        }
+    }
+
+    render() {
+        return <Fragment></Fragment>
+    }
+}
+
+export default RotateTarget;

+ 4 - 2
src/components/dashboardDesigner/viewLayout.jsx

@@ -4,7 +4,8 @@ import ReactGridLayout from 'react-grid-layout'
 import { Modal } from 'antd'
 import { Modal } from 'antd'
 import { connect } from 'dva'
 import { connect } from 'dva'
 import EmptyContent from '../common/emptyContent/index'
 import EmptyContent from '../common/emptyContent/index'
-import { hashcode } from '../../utils/baseUtils'
+import { hashcode } from '../../utils/baseUtils';
+import RotateTarget from './rotateTarget.js';
 import ViewLayoutItem from './viewLayoutItem';
 import ViewLayoutItem from './viewLayoutItem';
 
 
 class ViewLayout extends React.Component {
 class ViewLayout extends React.Component {
@@ -149,7 +150,8 @@ class ViewLayout extends React.Component {
                 keyboard={true}
                 keyboard={true}
                 maskClosable={true}
                 maskClosable={true}
                 >
                 >
-                {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true, false, {width: document.body.offsetWidth-36*2, height:document.body.offsetHeight - 40}, esMobile)}
+                    {esMobile && <RotateTarget />}
+                    {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true, false, {width: document.body.offsetWidth-36*2, height:document.body.offsetHeight - 40}, esMobile)}
             </Modal>}
             </Modal>}
         </div>);
         </div>);
     }
     }

+ 1 - 1
src/components/dashboardDesigner/viewLayout.less

@@ -326,7 +326,7 @@
             line-height: 2;
             line-height: 2;
             white-space: nowrap;
             white-space: nowrap;
             .anticon {
             .anticon {
-              margin-left: 10px;
+              margin: 0 6px;
               cursor: pointer;
               cursor: pointer;
             }
             }
           }
           }

+ 0 - 16
src/themes/default/base.less

@@ -22,17 +22,6 @@
 .ant-select-focused .ant-select-selection, .ant0select0selection:focus, .ant0select-selection:active {
 .ant-select-focused .ant-select-selection, .ant0select0selection:focus, .ant0select-selection:active {
     box-shadow: none;
     box-shadow: none;
 }
 }
-.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
-    position: absolute;
-    top: 0;
-    z-index: 2;
-    color: rgba(0,0,0,0.65);
-    line-height: 0;
-    height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 5px 0;
-}
 input::-webkit-input-placeholder {
 input::-webkit-input-placeholder {
     color: #BFBEBE !important;
     color: #BFBEBE !important;
 }
 }
@@ -240,11 +229,6 @@ input::-webkit-input-placeholder {
     font-size: 12px;
     font-size: 12px;
 }
 }
 
 
-// 登录框图标
-.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
-    background-color: transparent;
-}
-
 
 
 // 滚动条
 // 滚动条
 *::-webkit-scrollbar {
 *::-webkit-scrollbar {