地图调整

src/index.less

@@ -84,5 +84,9 @@ div[id^='__qiankun_microapp_wrapper_'] {
   background-color: transparent !important;
 }
 
+.yy-card-bordered {
+  border-color: #333333 !important;
+}
+
 
 

src/view/Manage/Map/Component/Relation.jsx

@@ -217,7 +217,6 @@ class Relation extends React.Component {
       const nodeId = node.get('id');
       const model = node.getModel();
 
-      console.log('model', model);
       if (model.dbType==='Dir') {
         const children = model.children;
         if (!children && loadMoreData) {

src/view/Manage/Map/Component/SquareItem.less

 .map-square-item {
   .yy-card-head {
-    background-color: #ff4d4f !important;
+    background-color: #f4856f !important;
 
     .yy-card-head-title {
       color: #fff !important;
+      font-size: 20px !important;
+      font-weight: bold !important;
 
       :hover {
         color: #1890ff;
       }
     }
   }
+
+  .yy-card-body {
+    p {
+      color: #1890ff !important;
+      font-size: 18px !important;
+    }
+  }
 }
\ No newline at end of file

src/view/Manage/Map/MapContent.jsx

@@ -94,7 +94,6 @@ class MapContent extends React.Component {
   }
 
   onSquareItemClick = (item) => {
-    const { tableModelData } = this.state;
     if (!item.children) {
       dispatchLatest({
         type: 'map.getTableModelByDirIid',
@@ -103,14 +102,12 @@ class MapContent extends React.Component {
           this.convertRemoteData(data||[]);
           item.children = (data||[]);
           this.setSquareGraphState(item);
-          this.setAllTreeGraphState(tableModelData);
         }
       })
       return;
     }
 
     this.setSquareGraphState(item);
-    this.setAllTreeGraphState(tableModelData);
   }
 
   onBreadcrumbItemClick = (content, index) => {
@@ -141,7 +138,7 @@ class MapContent extends React.Component {
   }
 
   render() {
-    const { diagram, topic } = this.props;
+    const { type, topic } = this.props;
     const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading, orgChildData, treeChildData, relationChildData, parentNodeId } = this.state;
 
     let groups = [];
@@ -156,7 +153,7 @@ class MapContent extends React.Component {
       {
         loading ? <Spin /> : <>
         {
-          diagram==='square' && <>
+          type==='square' && <>
           {
             breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'>
             {
@@ -194,30 +191,30 @@ class MapContent extends React.Component {
         </>
         }
         {
-          diagram==='org' && <Org 
+          type==='org' && <Org 
             data={orgModelData} 
             parentNodeId={parentNodeId}
             childData={orgChildData}
-            type={`${topic.id||''}${diagram}`} 
+            type={`${topic.id||''}${type}`} 
             {...this.props} 
             loadMoreData={this.loadMoreData}
           />
         }
         {
-          diagram==='tree' && <Tree 
+          type==='tree' && <Tree 
             data={treeModelData} 
             parentNodeId={parentNodeId}
             childData={treeChildData}
-            type={`${topic.id||''}${diagram}`} 
+            type={`${topic.id||''}${type}`} 
             {...this.props} 
             loadMoreData={this.loadMoreData} />
         }
         {
-          diagram==='relation' && <Relation 
+          type==='relation' && <Relation 
             data={relationModelData} 
             parentNodeId={parentNodeId}
             childData={relationChildData}
-            type={`${topic.id||''}${diagram}`} 
+            type={`${topic.id||''}${type}`} 
             {...this.props} 
             loadMoreData={this.loadMoreData} />
         }

src/view/Manage/Map/index.jsx

 import React from 'react';
-import { Tabs, Radio, Spin } from 'antd';
+import { Tabs, Spin, Select } from 'antd';
 
 import MapContent from './MapContent';
 import { dispatchLatest } from '../../../model';
 
 const { TabPane } = Tabs;
+const { Option } = Select;
+
+const graphModes = [
+  {
+    title: '方块图',
+    key: 'square'
+  },
+  {
+    title: '组织图',
+    key: 'org',
+  },
+  {
+    title: '树形图',
+    key: 'tree',
+  },
+  {
+    title: '关系图',
+    key: 'relation'
+  }
+];
 
 class Map extends React.Component {
   constructor(props) {
     super(props);
     this.state = { 
-      diagram: 'square', 
+      type: 'square', 
       tabKey: '0',
       loadingTopics: false,
       topics: null
@@ -36,8 +56,8 @@ class Map extends React.Component {
     })
   }
 
-  onRadioChange = e => {
-    this.setState({ diagram: e.target.value });
+  onTypeChange = value => {
+    this.setState({ type: value||'' });
   };
 
   onTabChange = activeKey => {
@@ -45,7 +65,7 @@ class Map extends React.Component {
   }
 
   render() {
-    const { diagram, tabKey, topics, loadingTopics } = this.state;
+    const { type, tabKey, topics, loadingTopics } = this.state;
     return (
       <div style={{ backgroundColor: '#fff', height: '100%' }}>
       {
@@ -57,13 +77,21 @@ class Map extends React.Component {
             centered
             style={{ height: '100%' }}
             tabBarExtraContent={{
-              left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onRadioChange} >
-                <Radio.Button value='square'>方块图</Radio.Button>
-                <Radio.Button value='org'>组织图</Radio.Button>
-                <Radio.Button value='tree'>树形图</Radio.Button>
-                <Radio.Button value='relation'>关系图</Radio.Button>
-              </Radio.Group>,
-              right: <div style={{ width: 172 }}></div>
+              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}
           >
@@ -71,7 +99,7 @@ class Map extends React.Component {
             topics && topics.map((topic, index) => {
               return (
                 <TabPane tab={topic.name||''} key={index.toString()} className='p-3' style={{ height: '100%' }}>
-                { tabKey===index.toString() && <MapContent diagram={diagram} topic={topic} {...this.props} /> }
+                { tabKey===index.toString() && <MapContent type={type} topic={topic} {...this.props} /> }
                 </TabPane>
               );
             })