Home Explore Help
Register Sign In
usoft
/
platform-bi-web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

图片路径调整/看板宽度自适应逻辑修改，现在可以不用固定延时等待页面渲染了

zhuth 7 years ago
parent
b8d010099d
commit
2041ab2b8e
10 changed files with 54 additions and 68 deletions
Unified View Show Diff Stats
  1. BIN
      public/images/favicon.png
  2. BIN
      public/images/login-bg.png
  3. 2 1
      public/index.html
  4. 3 3
      src/components/common/login/login.jsx
  5. 4 1
      src/components/common/login/login.less
  6. 0 9
      src/components/common/login/register.less
  7. 24 23
      src/components/dashboardDesigner/content.jsx
  8. 11 1
      src/components/dashboardDesigner/layout.less
  9. 2 9
      src/components/dashboardDesigner/viewLayout.jsx
  10. 8 21
      src/models/dashboardDesigner.js

BIN
public/images/favicon.png
View File


BIN
public/images/login-bg.png
View File


+ 2 - 1
public/index.html
View File 

@@ -3,7 +3,8 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>BI 商业智能报表</title>
 
+  <title>BI 商业智能平台</title>
 
+  <link rel="shortcut icon" href="/images/favicon.png">
 
   <link rel="stylesheet" href="index.css" />
 
   <link rel="stylesheet" href="index.css" />
 
 </head>
 
 </head>
 
 <body>
 
 <body>

+ 3 - 3
src/components/common/login/login.jsx
View File 

@@ -120,8 +120,8 @@ class LoginComponent extends React.Component {
 
                 <div className='content'>
 
                 <div className='content'>
 
                     <div className='main'>
 
                     <div className='main'>
 
                         <div className='login-header'>
 
                         <div className='login-header'>
 
-                            <img className='logo' src='../../../../public/images/uas.png' alt='UAS' style={{ height: '30px', marginTop: '3px'}}></img>
 
-                            <span className='text' >BI 商业智能报表</span>
 
+                            <img className='logo' src='/images/uas.png' alt='UAS' style={{ height: '30px', marginTop: '3px'}}></img>
 
+                            <span className='text' >BI 商业智能平台</span>
 
                         </div>
 
                         </div>
 
                         <Login
 
                         <Login
 
                             className='login'
 
                             className='login'
 
@@ -171,7 +171,7 @@ class LoginComponent extends React.Component {
 
                                 }}
 
                                 }}
 
                             />
 
                             />
 
                             <div>
 
                             <div>
 
-                                <Checkbox defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
 
+                                <Checkbox style={{ color: 'white' }} defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
 
                                 {/* <a style={{ float: 'right' }} href="">忘记密码</a> */}
 
                                 {/* <a style={{ float: 'right' }} href="">忘记密码</a> */}
 
                             </div>
 
                             </div>
 
                             <Submit disabled={fetching}>
 
                             <Submit disabled={fetching}>

+ 4 - 1
src/components/common/login/login.less
View File 

@@ -3,7 +3,9 @@
 
     flex-direction: column;
 
     flex-direction: column;
 
     height: 100%;
 
     height: 100%;
 
     overflow: auto;
 
     overflow: auto;
 
-    background: #f0f2f5;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    background-image: url(/images/login-bg.png);
 
     .content {
 
     .content {
 
         padding: 112px 0 24px;
 
         padding: 112px 0 24px;
 
         flex: 1 1;
 
         flex: 1 1;
 
@@ -22,6 +24,7 @@
 
                 .text {
 
                 .text {
 
                     font-size: 24px;
 
                     font-size: 24px;
 
                     font-weight: bold;
 
                     font-weight: bold;
 
+                    color: white;
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }

+ 0 - 9
src/components/common/login/register.less
View File 

@@ -1,15 +1,6 @@
 
 .container {
 
 .container {
 
-    display: flex;
 
-    flex-direction: column;
 
-    height: 100%;
 
-    overflow: auto;
 
-    background: #f0f2f5;
 
     .content {
 
     .content {
 
-        padding: 112px 0 24px;
 
-        flex: 1 1;
 
         .main {
 
         .main {
 
-            width: 368px;
 
-            margin: 0 auto;
 
             h3 {
 
             h3 {
 
                 font-size: 16px;
 
                 font-size: 16px;
 
                 margin-bottom: 20px;
 
                 margin-bottom: 20px;

+ 24 - 23
src/components/dashboardDesigner/content.jsx
View File 

@@ -1,5 +1,4 @@
 
 import React from 'react'
 
 import React from 'react'
 
-import { findDOMNode } from 'react-dom'
 
 import { Layout, Tooltip, Tag, Icon } from 'antd'
 
 import { Layout, Tooltip, Tag, Icon } from 'antd'
 
 import { connect } from 'dva'
 
 import { connect } from 'dva'
 
 import ViewLayout from './viewLayout'
 
 import ViewLayout from './viewLayout'
 
@@ -24,10 +23,6 @@ class DashboardDesignerContent extends React.Component {
 
     }
 
     }
 
 
 
     componentDidMount() {
 
     componentDidMount() {
 
-        // 这里延迟等待页面渲染结束，也许有更好的办法。
 
-        window.setTimeout(() => {
 
-            this.refreshContentSize(true);
 
-        }, 1500);
 
         window.addEventListener("resize", () => {
 
         window.addEventListener("resize", () => {
 
             this.refreshContentSize(true);
 
             this.refreshContentSize(true);
 
         });
 
         });
 
@@ -64,23 +59,28 @@ class DashboardDesignerContent extends React.Component {
 
     /**
 
     /**
 
      * 重设容器宽度
 
      * 重设容器宽度
 
      */
 
      */
 
-    refreshContentSize = (flag) => {
 
-        let contentEl = findDOMNode(this.refs.contentEl);
 
+    refreshContentSize = () => {
 
+        this.setState({
 
+            refresh: true
 
+        });
 
+    }
 
+
 
+    getContentSize = () => {
 
+        const { dashboardDesigner, isOwner } = this.props;
 
+        const { editMode } = dashboardDesigner;
 
+        let contentEl = document.getElementsByClassName('viewlayout')[0];
 
         if(!contentEl) {
 
         if(!contentEl) {
 
-            return; 
+            return {
 
+                width: 0,
 
+                height: 0
 
+            }; 
         }
 
         }
 
         let _scroll = contentEl.scrollHeight > contentEl.clientHeight;
 
         let _scroll = contentEl.scrollHeight > contentEl.clientHeight;
 
 
 
-        if(!flag && this.state.contentSize.scroll === _scroll) { // 如果滚动条没有变化则直接退出
 
-            return;
 
+        return {
 
+            width: document.body.offsetWidth - 20 - (isOwner && editMode ? 380 : 0) - 10 - (_scroll ? 17 : 2), // 有滚动条时需要减去滚动条的宽度
 
+            height: contentEl.clientHeight
 
         }
 
         }
 
-        this.setState({
 
-            contentSize: {
 
-                scroll: _scroll,
 
-                width: contentEl.offsetWidth - (_scroll ? 28 : 10), // 有滚动条时需要减去滚动条的宽度
 
-                height: contentEl.clientHeight
 
-            }
 
-        });
 
     }
 
     }
 
 
 
     getRelationFilterColumns = () => {
 
     getRelationFilterColumns = () => {
 
@@ -158,8 +158,9 @@ class DashboardDesignerContent extends React.Component {
 
     render() {
 
     render() {
 
         const { dashboardDesigner, dispatch, isOwner } = this.props;
 
         const { dashboardDesigner, dispatch, isOwner } = this.props;
 
         const { code, editMode, filters } = dashboardDesigner;
 
         const { code, editMode, filters } = dashboardDesigner;
 
-        const { contentSize, visibleChooseChartBox, visibleFilterBox } = this.state;
 
+        const { visibleChooseChartBox, visibleFilterBox } = this.state;
 
 
 
+        const contentSize = this.getContentSize();
 
         let tags = filters.map((f, i)=>{
 
         let tags = filters.map((f, i)=>{
 
             return {
 
             return {
 
                 key: f.key,
 
                 key: f.key,
 
@@ -191,13 +192,13 @@ class DashboardDesignerContent extends React.Component {
 
                     </Tag>
 
                     </Tag>
 
                 </div>
 
                 </div>
 
                 {visibleFilterBox && <FilterBox type='dashboard' code={code} columns={this.getRelationFilterColumns()} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
 
                 {visibleFilterBox && <FilterBox type='dashboard' code={code} columns={this.getRelationFilterColumns()} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
 
-                {isOwner && <div className='viewtype'>
 
-                    <Tooltip title="图表">
 
+                {isOwner && editMode && <div className='viewtype'>
 
+                    <Tooltip placement='bottom' title="图表">
 
                         <Icon className='viewtype-icon' type="area-chart" theme="outlined" onClick={(item) => {
 
                         <Icon className='viewtype-icon' type="area-chart" theme="outlined" onClick={(item) => {
 
                             this.showBox("create");
 
                             this.showBox("create");
 
                         }}/>
 
                         }}/>
 
                     </Tooltip >
 
                     </Tooltip >
 
-                    <Tooltip title="富文本">
 
+                    <Tooltip placement='bottom' title="富文本">
 
                         <Icon className='viewtype-icon' type="book" theme="outlined" onClick={() => {
 
                         <Icon className='viewtype-icon' type="book" theme="outlined" onClick={() => {
 
                             dispatch({ type: 'dashboardDesigner/addRichText' });
 
                             dispatch({ type: 'dashboardDesigner/addRichText' });
 
                         }}/>
 
                         }}/>
 
@@ -207,8 +208,8 @@ class DashboardDesignerContent extends React.Component {
 
             </Header>
 
             </Header>
 
             <Content className='dashboard-content'>
 
             <Content className='dashboard-content'>
 
                 <Layout className='content-layout'>
 
                 <Layout className='content-layout'>
 
-                    <Content className='viewlayout' ref='contentEl'>
 
-                        <ViewLayout contentSize={contentSize} reset={this.refreshContentSize} editMode={editMode}/>
 
+                    <Content className='viewlayout'>
 
+                        <ViewLayout contentSize={contentSize} editMode={editMode}/>
 
                     </Content>
 
                     </Content>
 
                     <Sider className='config-sider' width={(isOwner && editMode) ? 380 : 0}>
 
                     <Sider className='config-sider' width={(isOwner && editMode) ? 380 : 0}>
 
                         <ConfigForm/>
 
                         <ConfigForm/>

+ 11 - 1
src/components/dashboardDesigner/layout.less
View File 

@@ -195,12 +195,22 @@
 
                     }
 
                     }
 
                 }
 
                 }
 
                 .viewtype {
 
                 .viewtype {
 
+                    display: flex;
 
+                    align-items: center;
 
                     .viewtype-icon {
 
                     .viewtype-icon {
 
                         font-size: 20px;
 
                         font-size: 20px;
 
                         cursor: pointer;
 
                         cursor: pointer;
 
                         margin-left: 5px;
 
                         margin-left: 5px;
 
+                        height: 30px;
 
+                        width: 30px;
 
+                        border: 1px solid black;
 
+                        border-radius: 4px;
 
+                        padding: 4px;
 
+                        border: 1px solid #1890FF;
 
+                        color: #1890FF;
 
                         &:hover {
 
                         &:hover {
 
-                            color: #1890FF;
 
+                            background-color: #1890FF;
 
+                            color: white;
 
                         }
 
                         }
 
                     }
 
                     }
 
                 }
 
                 }

+ 2 - 9
src/components/dashboardDesigner/viewLayout.jsx
View File 

@@ -49,7 +49,7 @@ class ViewLayout extends React.PureComponent {
 
                         {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
 
                         {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
 
                         {editMode && !isPreview && item.creatorCode === currentUser.code && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
 
                         {editMode && !isPreview && item.creatorCode === currentUser.code && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
 
                             dispatch({ type: 'dashboard/remoteModify' });
 
                             dispatch({ type: 'dashboard/remoteModify' });
 
-                            dispatch({ type: 'chartDesigner/reset' });
 
+                            dispatch({ type: 'dashboardDesigner/reset' });
 
                             dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
 
                             dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
 
                         }}/>}
 
                         }}/>}
 
                         {!isPreview && editMode && <Icon className={iconCls} type='delete' onClick={() => {
 
                         {!isPreview && editMode && <Icon className={iconCls} type='delete' onClick={() => {
 
@@ -64,14 +64,8 @@ class ViewLayout extends React.PureComponent {
 
     }
 
     }
 
 
 
     onLayoutChange = (layout) => {
 
     onLayoutChange = (layout) => {
 
-        const { dispatch, reset } = this.props;
 
+        const { dispatch } = this.props;
 
         dispatch({ type: 'dashboardDesigner/changeLayout', layout });
 
         dispatch({ type: 'dashboardDesigner/changeLayout', layout });
 
-        reset();
 
-    }
 
-
 
-    onResize = () => {
 
-        const { reset } = this.props;
 
-        reset();
 
     }
 
     }
 
 
 
     showPreviewBox = (item) => {
 
     showPreviewBox = (item) => {
 
@@ -104,7 +98,6 @@ class ViewLayout extends React.PureComponent {
 
                 isResizable={editMode}
 
                 isResizable={editMode}
 
                 draggableHandle='.mover'
 
                 draggableHandle='.mover'
 
                 onLayoutChange={this.onLayoutChange}
 
                 onLayoutChange={this.onLayoutChange}
 
-                onResize={this.onResize}
 
                 onBreakpointChange={this.onBreakpointChange}
 
                 onBreakpointChange={this.onBreakpointChange}
 
                 verticalCompact={true}
 
                 verticalCompact={true}
 
                 compactType='vertical'
 
                 compactType='vertical'

+ 8 - 21
src/models/dashboardDesigner.js
View File 

@@ -65,6 +65,7 @@ export default {
 
         originData: {
 
         originData: {
 
             code: null,
 
             code: null,
 
             name: '无标题',
 
             name: '无标题',
 
+            defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 1 },
 
             items: [],
 
             items: [],
 
             description: '',
 
             description: '',
 
             thumbnail: '',
 
             thumbnail: '',
 
@@ -72,24 +73,11 @@ export default {
 
             editMode: true,
 
             editMode: true,
 
             filterColumns: [],
 
             filterColumns: [],
 
             filters: [],
 
             filters: [],
 
-            dataSources: [],
 
-            relationColumns: [],
 
+            dataSources: [], // 图表关联的所有数据源
 
+            relationColumns: [], // 自定义的列
 
             columnFetching: false,
 
             columnFetching: false,
 
             loading: false,
 
             loading: false,
 
         },
 
         },
 
-        name: '无标题',
 
-        defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 1 },
 
-        items: [],
 
-        description: '',
 
-        thumbnail: '',
 
-        dirty: false,
 
-        editMode: true,
 
-        filterColumns: [],
 
-        filters: [],
 
-        dataSources: [], // 图表关联的所有数据源
 
-        relationColumns: [], // 自定义的列
 
-        columnFetching: false,
 
-        loading: false,
 
     },
 
     },
 
     
     
     reducers: {
 
     reducers: {
 
@@ -432,12 +420,6 @@ export default {
 
                 message.error('请求图表展示数据失败: ' + e);
 
                 message.error('请求图表展示数据失败: ' + e);
 
             }finally {
 
             }finally {
 
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: false });
 
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: false });
 
-                // 主动触发一次window的resize事件
 
-                window.setTimeout(() => {
 
-                    var e = document.createEvent("Event");
 
-                    e.initEvent("resize", true, true);
 
-                    window.dispatchEvent(e);
 
-                }, 300);
 
             }
 
             }
 
         },
 
         },
 
         *saveWithThumbnail(action, {put, call}) {
 
         *saveWithThumbnail(action, {put, call}) {
 
@@ -454,6 +436,11 @@ export default {
 
                 message.error('生成缩略图失败: ' + e);
 
                 message.error('生成缩略图失败: ' + e);
 
             }
 
             }
 
         }
 
         }
 
+    },
 
+    subscriptions: {
 
+        setup({ dispatch, history}) {
 
+            dispatch({ type: 'reset' });
 
+        }
 
     }
 
     }
 
 };
 
 };