地图主题变更

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

@@ -7,9 +7,10 @@ const maxTextWidth = 160;
 class Org extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
-    const { childData, parentNodeId } = this.props;
+    const { childData, parentNodeId, data } = this.props;
 
     if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
+
       const parentData = this.graph?.findDataById(parentNodeId);
       if (!parentData.children) {
         parentData.children = [];
@@ -23,7 +24,7 @@ class Org extends React.Component {
         collapsed: false,
       });
 
-    } else if (this.props.data && parentNodeId===null) {
+    } else if (data && data !== prevProps.data && parentNodeId===null) {
       this.graph?.destroy();
       this.graph = init(this)(this.elem, this.props.data);
     }

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

@@ -29,7 +29,7 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
 class Tree extends React.Component {
 
   componentDidUpdate(prevProps, prevState){
-    const { childData, parentNodeId } = this.props;
+    const { childData, parentNodeId, data } = this.props;
 
     if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
       const parentData = this.graph?.findDataById(parentNodeId);
@@ -45,7 +45,7 @@ class Tree extends React.Component {
         collapsed: false,
       });
 
-    } else if (this.props.data && parentNodeId===null) {
+    } else if (data && data !== prevProps.data && parentNodeId===null) {
       this.graph?.destroy();
       this.graph = init(this)(this.elem, this.props.data);
     }

src/view/Manage/Map/MapContent.jsx

@@ -41,10 +41,14 @@ class MapContent extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { type } = this.props;
+    const { type, topic } = this.props;
     const { currentLevel } = this.state;
 
-    if (type !== prevProps.type) {
+    if (topic !== prevProps.topic) {
+      this.setState({ curTableModelData: [], parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
+        this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
+      })
+    } else if (type !== prevProps.type) {
       this.setState({ parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
         if (type !== 'square') {
           this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel(false, currentLevel);
@@ -97,6 +101,8 @@ class MapContent extends React.Component {
         const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
 
         if (first) {
+          this.loadedRowsMap = {};
+
           this.setState({
             curTableModelData: _curTableModelData,
             breadcrumbContents: [{ data: _treeData }],

src/view/Manage/Map/index.jsx

 import React from 'react';
-import { Tabs, Spin, Radio, Tooltip } from 'antd';
+import { Spin, Radio, Tooltip, Tag } from 'antd';
 
 import MapContent from './MapContent';
 import { dispatchLatest } from '../../../model';
 
 import './index.less';
 
-const { TabPane } = Tabs;
+const { CheckableTag } = Tag;
 
 const graphModes = [
   {
@@ -34,7 +34,9 @@ class Map extends React.Component {
       type: 'square',
       tabKey: '',
       loadingTopics: false,
-      topics: null
+      resourceTopics: null,
+      assetTopics: null,
+      selectedTopic: {}
     };
   }
 
@@ -47,8 +49,9 @@ class Map extends React.Component {
         callback: data => {
           this.setState({
             loadingTopics: false,
-            topics: data || [],
-            tabKey: (data || []).length > 0 ? data[0].id : '',
+            resourceTopics: (data||[]).filter(item=>(item.code==='001'||item.code==='002')),
+            assetTopics: (data||[]).filter(item=>(item.code!=='001'&&item.code!=='002')),
+            selectedTopic: (data||[]).length>0?data[0]:{}
           });
         },
         error: () => {
@@ -66,8 +69,14 @@ class Map extends React.Component {
     this.setState({ tabKey: activeKey });
   }
 
+  onTagChange = (item, checked) => {
+    if (checked) {
+      this.setState({ selectedTopic: item });
+    }
+  }
+
   render() {
-    const { type, tabKey, topics, loadingTopics } = this.state;
+    const { type, resourceTopics, assetTopics, loadingTopics, selectedTopic } = this.state;
 
     const switchMode = <div className=''>
       <Radio.Group
@@ -91,28 +100,52 @@ class Map extends React.Component {
       <div className='asset-map' style={{ backgroundColor: '#fff' }}>
         {
           loadingTopics ? <Spin /> : <>
-            {
-              topics && topics.length > 0 && <Tabs animated={false}
-                activeKey={tabKey}
-                size='large'
-                centered
-                onChange={this.onTabChange}
-              >
+            <div 
+              className='flex' 
+              style={{ 
+                alignItems: 'center', 
+                justifyContent: 'space-between', 
+                height: 64, 
+                borderBottom: '1px solid #f0f0f0', 
+                margin: '0px 10px' 
+              }}
+            >
+              <div>
+                <span>数据资源: </span>
+                {
+                  resourceTopics && resourceTopics.map(item => {
+                    return (
+                      <CheckableTag
+                        key={item.id}
+                        checked={selectedTopic?.id===item.id}
+                        onChange={checked => this.onTagChange(item, checked)}
+                      >
+                        {item.name}
+                      </CheckableTag>
+                    );
+                  })
+                }
+              </div>
+              <div>
+                <span>数据资产: </span>
                 {
-                  topics && topics.map((topic) => {
+                  assetTopics && assetTopics.map(item => {
                     return (
-                      <TabPane tab={topic.name || ''} key={topic.id || ''}>
-                        {
-                          tabKey === topic.id && <div className='map-container' >
-                            <MapContent type={type} topic={topic} switchMode={switchMode} {...this.props} />
-                          </div>
-                        }
-                      </TabPane>
+                      <CheckableTag
+                        key={item.id}
+                        checked={selectedTopic?.id===item.id}
+                        onChange={checked => this.onTagChange(item, checked)}
+                      >
+                        {item.name}
+                      </CheckableTag>
                     );
                   })
                 }
-              </Tabs>
-            }
+              </div>
+            </div>
+            <div className='map-container' >
+              <MapContent type={type} topic={selectedTopic} switchMode={switchMode} {...this.props} />
+            </div>
           </>
         }
       </div>

src/view/Manage/Map/index.less

@@ -4,12 +4,13 @@
 
   height: calc(100vh - @header-height - @pm-4);
 
-  .yy-tabs-nav {
-    margin: 0 !important;
+  .yy-tag {
+    font-size: 14px;
+    margin-right: 2px;
   }
 
   .map-container {
-    height: calc(100vh - @header-height - @pm-4 - 57px/*  - 53px */) !important;
+    height: calc(100vh - @header-height - @pm-4 - 64px) !important;
     overflow: auto !important;
   }
 }
\ No newline at end of file