调整资产地图

src/index.less

@@ -81,10 +81,6 @@ div[id^='__qiankun_microapp_wrapper_'] {
   background-color: #ECEEF3 !important;
 }
 
-.yy-tabs-content-holder {
-  height: 100% !important;
-}
-
 .yy-tabs-content, .yy-table {
   height: 100% !important;
   overflow: auto !important;

src/view/Manage/Map/MapContent.jsx

 import React from 'react';
-import { Row, Col, Breadcrumb, Spin } from 'antd';
+import { Row, Col, Breadcrumb, Spin, Slider } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
 
 import SquareItem from './Component/SquareItem';
@@ -16,7 +16,7 @@ class MapContent extends React.Component {
     super(props);
     this.state = {
       loading: false,
-      tableModelData: null,
+      // tableModelData: null,
       curTableModelData: null,
       orgModelData: null,
       orgChildData: null,
@@ -41,7 +41,7 @@ class MapContent extends React.Component {
           this.convertRemoteData(data);
           this.setState({
             loading: false,
-            tableModelData: data||[],
+            // tableModelData: data||[],
             curTableModelData: data||[],
             breadcrumbContents: [{ data: data||[] }]
           }, () => {
@@ -166,7 +166,7 @@ class MapContent extends React.Component {
     return (
       <>
       {
-        loading ? <Spin /> : <>
+        loading ? <Spin /> : <div className='position-relative' style={{ height: '100%' }}>
         {
           type==='square' && <>
           {
@@ -189,17 +189,20 @@ class MapContent extends React.Component {
           {
             groups && groups.map((group, index) => {
               return (
-                <Row gutter={10} key={index} className={index===0?'':'mt-3'}>
-                {
-                  group && group.map((item, _index) => {
-                    return (
-                      <Col key={_index} span={24/column}>
-                        <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
-                      </Col>
-                    )
-                  })
-                }
-                </Row>
+                <div key={index}>
+                  <Row gutter={10} className={index===0?'':'mt-3'}>
+                  {
+                    group && group.map((item, _index) => {
+                      return (
+                        <Col key={_index} span={24/column}>
+                          <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
+                        </Col>
+                      )
+                    })
+                  }
+                  </Row>
+                  { (index===groups.length-1) && <div style={{ height: 10 }} /> }
+                </div>
               )
             })
           }
@@ -233,7 +236,21 @@ class MapContent extends React.Component {
             {...this.props} 
             loadMoreData={this.loadMoreData} />
         }
-        </>
+        {
+          type!=='square' && <div 
+            className='position-absolute' 
+            style={{ 
+              display: 'inline-block',
+              height: 60,
+              right: 15, 
+              top: 15 
+            }}
+          >
+            <span>层数</span>
+            <Slider vertical min={1} max={20} />
+           </div>
+        }
+        </div>
       }
       </>  
     );

src/view/Manage/Map/index.jsx

@@ -4,6 +4,8 @@ import { Tabs, Spin, Select } from 'antd';
 import MapContent from './MapContent';
 import { dispatchLatest } from '../../../model';
 
+import './index.less';
+
 const { TabPane } = Tabs;
 const { Option } = Select;
 
@@ -31,7 +33,7 @@ class Map extends React.Component {
     super(props);
     this.state = { 
       type: 'square', 
-      tabKey: '0',
+      tabKey: '',
       loadingTopics: false,
       topics: null
     };
@@ -46,7 +48,8 @@ class Map extends React.Component {
         callback: data => {
           this.setState({
             loadingTopics: false, 
-            topics: data
+            topics: data||[],
+            tabKey: (data||[]).length>0?data[0].id:'',
           });
         },
         error: () => {
@@ -67,7 +70,7 @@ class Map extends React.Component {
   render() {
     const { type, tabKey, topics, loadingTopics } = this.state;
     return (
-      <div style={{ backgroundColor: '#fff', height: '100%' }}>
+      <div className='asset-map' style={{ backgroundColor: '#fff' }}>
       {
         loadingTopics ? <Spin /> : <>
         {
@@ -75,31 +78,30 @@ class Map extends React.Component {
             activeKey={tabKey}
             size='large' 
             centered
-            style={{ height: '100%' }}
-            tabBarExtraContent={{
-              left: <div className='ml-3' style={{ width: 120, marginRight: 50 }} ></div>,
-              right: (
-                <Select 
-                  value={type}
-                  className='mr-3' 
-                  style={{ width: 120, marginLeft: 50 }} 
-                  onChange={this.onTypeChange}
-                >
-                {
-                  graphModes && graphModes.map((mode, index) => {
-                    return <Option key={index} value={mode.key||''}>{mode.title||''}</Option>
-                  })
-                }
-                </Select>
-              )
-            }}
             onChange={this.onTabChange}
           >
           {
-            topics && topics.map((topic, index) => {
+            topics && topics.map((topic) => {
               return (
-                <TabPane tab={topic.name||''} key={index.toString()} className='p-3' style={{ height: '100%' }}>
-                { tabKey===index.toString() && <MapContent type={type} topic={topic} {...this.props} /> }
+                <TabPane tab={topic.name||''} key={topic.id||''}>
+                  <div className='d-flex px-3' style={{ height: 53, alignItems: 'center' }}>
+                    <Select 
+                      value={type} 
+                      style={{ width: 120, marginLeft: 'auto' }} 
+                      onChange={this.onTypeChange}
+                    >
+                    {
+                      graphModes && graphModes.map((mode, index) => {
+                        return <Option key={index} value={mode.key||''}>{mode.title||''}</Option>
+                      })
+                    }
+                    </Select>
+                  </div>
+                  { 
+                    tabKey===topic.id && <div className='map-container' style={{ padding: '0 10px' }}>
+                      <MapContent type={type} topic={topic} {...this.props} />
+                    </div> 
+                  }
                 </TabPane>
               );
             })

src/view/Manage/Map/index.less

+.asset-map {
+
+  height: calc(100vh - 64px - 30px);
+
+  .yy-tabs-nav {
+    margin: 0 !important;
+  }
+
+  .map-container {
+    height: calc(100vh - 64px - 30px - 57px - 53px) !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file