增加模型图形展示

package.json

@@ -43,6 +43,7 @@
     "redux-saga": "^1.0.5",
     "showdown": "^1.9.1",
     "smooth-scroll": "^16.1.3",
+    "qiankun": "2.4.0",
     "typescript": "^4.6.2",
     "web-vitals": "^1.0.1"
   },

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Button, Space, Spin, Input, Select, Tooltip } from 'antd';
+import { Button, Space, Spin, Input, Select, Tooltip, Radio } from 'antd';
 import copy from "copy-to-clipboard";  
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
@@ -18,6 +18,7 @@ import { dispatch, dispatchLatestHomepage } from '../../../model';
 import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, Holder, DDL } from '../../../util/constant';
 import { AppContext } from '../../../App';
 import DebounceInput from './Component/DebounceInput';
+import MetadataAnalysis from '../../QianKun/MetadataAnalysis'
 
 import './index.less';
 
@@ -55,6 +56,7 @@ class Model extends React.Component {
       offset: null,
       expandTree: true,
       showDeleteTip: false,
+      showMode: 'list',
     }
   }
   
@@ -432,8 +434,12 @@ class Model extends React.Component {
     }
   }
 
+  handleShowModeChange = (e) => {
+    this.setState({ showMode: e.target.value })
+  }
+
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip, showMode } = this.state;
 
     const content = (
       <ModelTable 
@@ -517,6 +523,12 @@ class Model extends React.Component {
             </Space>
 
             <Space> 
+              <Space>
+                <Radio.Group onChange={this.handleShowModeChange} value={showMode}>
+                  <Radio.Button value="list">列表展示</Radio.Button>
+                  <Radio.Button value="graph">图形展示</Radio.Button>
+                </Radio.Group>
+              </Space>
               {
                 (currentView==='dir'||keyword!=='') && <Space>
                   <Select 
@@ -551,9 +563,11 @@ class Model extends React.Component {
 
           </div>
           <div className='p-3'>
-          <Spin spinning={loadingTableData}>
+          {
+            showMode==='list' ? <Spin spinning={loadingTableData}>
             { content }
-          </Spin> 
+            </Spin>: <MetadataAnalysis view={currentView} did={catalogId} sid={currentModelState} />
+          } 
           </div>
         </div>
 

src/view/QianKun/MetadataAnalysis/index.jsx

+import { loadMicroApp, MicroApp } from 'qiankun'
+import React, { useEffect, useRef, useState } from 'react'
+import {useSelector} from "react-redux"
+
+const App= (props)=> {
+
+  const containerRef = useRef(null)
+  const microApp = useRef()
+
+  const {view, did, sid} = props
+
+  const time = new Date().getTime()
+
+  const location = props.location;
+
+
+  useEffect(() => {
+    if (!!containerRef.current) {
+      microApp.current = loadMicroApp(
+        { name: 'metadata-analysis', entry: `/metadata-analysis/?time=${time}`, container: containerRef.current, props: { type: 'er' } },
+      );
+    }
+
+    return () => {
+      microApp.current?.unmount();
+    }
+  }, [])
+
+  useEffect(() => {
+
+    function updateMicroApp() {
+      if (microApp.current?.update) {
+        microApp.current?.update?.({ view, did, sid });
+      } else {
+        setTimeout(() => {
+          updateMicroApp();
+        }, 100)
+      }
+    }
+    
+    updateMicroApp();
+    
+  }, [view, did, sid])
+
+  return (
+    <>
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+    </>
+  );
+}
+
+export default App
\ No newline at end of file