资产关系图替换

craco.config.js

@@ -10,12 +10,15 @@ module.exports = {
           lessOptions: {
             modifyVars: {
               '@ant-prefix': 'yy',
-              // '@border-color-split': 'hsv(0, 0, 85%)',
-              '@border-radius-base': '4px',
-              '@primary-color': '#196AD2',
+              '@primary-color': '#c7000b',
               '@success-color': '#8FC31F',
               '@warning-color': '#F7AB00',
-              '@error-color': '#E94848',
+              '@error-color': '#c7000b',
+              '@menu-dark-bg': '#c7000b',
+              '@menu-dark-submenu-bg': '#c7000b',
+              '@menu-dark-inline-submenu-bg': '#c7000b',
+              '@layout-header-background': '#c7000b',
+              '@border-radius-base': '4px',
              },
             javascriptEnabled: true,
           },

src/index.less

@@ -199,11 +199,11 @@ tr.drop-over-upward td {
 }
 
 .primary-color {
-  color: #196AD2;
+  color: #c7000b;
 }
 
 .primary-bg-color {
-  background-color: #196AD2;
+  background-color: #c7000b;
 }
 
 .title-color {
@@ -355,7 +355,7 @@ svg {
 }
 
 .primary-bg-container {
-  background-color: #196AD2;
+  background-color: #c7000b;
 }
 
 .yy-card-head {

src/variables.less

@@ -5,6 +5,6 @@
 @scroll-height: 15px;
 
 @icon-normal-color: #6F6F6F;
-@icon-hover-color: #196AD2;
+@icon-hover-color: #c7000b;
 @icon-grey-color: #D5D5D5;
 @icon-disable-color: #bfbfbf;
\ No newline at end of file

src/view/Manage/AssetBrowse/Component/RelationContainer.jsx

@@ -6,6 +6,7 @@ import Relation from './Relation';
 import Thermodynamic from './Thermodynamic';
 import { AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant';
 import { AppContext } from '../../../../App';
+import DataAtlas from '../../../QianKun/Data-Atlas';
 
 const relationTypes = [
   {
@@ -267,7 +268,7 @@ const RelationContainer = (props) => {
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
       {
-        (type==='relation') && <Relation data={relationData} expandId={nodeParams?.expandId} resize={resize} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
+        (type==='relation') && <DataAtlas data={dirs} did={nodeParams?.centerId}  />
       }
       {
         (type==='thermodynamic') && <Thermodynamic data={thermodynamicData} resize={resize} onClick={onThermodynamicClick} />

src/view/QianKun/Data-Atlas/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 {data, did} = props
+
+  const time = new Date().getTime()
+
+  const location = props.location;
+
+
+  useEffect(() => {
+    if (!!containerRef.current) {
+      microApp.current = loadMicroApp(
+        { name: 'data-atlas', entry: `/data-atlas`, container: containerRef.current, props: { grpah: 1 } },
+      );
+    }
+
+    return () => {
+      microApp.current?.unmount();
+    }
+  }, [])
+
+  useEffect(() => {
+
+    function updateMicroApp() {
+      if (microApp.current?.update) {
+        microApp.current?.update?.({ data, did });
+      } else {
+        setTimeout(() => {
+          updateMicroApp();
+        }, 100)
+      }
+    }
+    
+    updateMicroApp();
+    
+  }, [data, did])
+
+  return (
+    <>
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+    </>
+  );
+}
+
+export default App
\ No newline at end of file