Merge branch 'develop' of http://117.78.60.236:8000/csbr-daop/fe-data-asset-management into develop

fanguang
Showing 4 changed files with 61 additions and 34 deletions
src/components/RelationNetwork/index.vue
src/views/data_meta/components/Sankey.vue
src/views/data_meta/standard-query-view.vue
src/views/data_meta/standard-query.vue
--- a/src/components/RelationNetwork/index.vue
View file @d3bd009
+++ b/src/components/RelationNetwork/index.vue
View file @d3bd009
@@ -82,7 +82,7 @@ watch(() => props.treeData, (val) => {
 const renderGraph = (graph: any, lineageData: any) => {
  if (!graph || !lineageData) return;
-  graph.setMinZoom(0.7);
+  graph.setMinZoom(1);
  graph.setMaxZoom(1);
  graph.data(lineageData);
  graph.render();
@@ -230,7 +230,7 @@ const initGraph = () => {
    container: container,
    width,
    height,
-   // animate: false,
+    // animate: false,
    plugins: [contextMenu, tooltip.value],
    fitCenter: true,
    fitView: true,
@@ -247,6 +247,11 @@ const initGraph = () => {
            }
            const data = item.getModel();
            data.collapsed = collapsed;
+            setTimeout(() => {
+              graph.focusItem(item, true, {
+                duration: 400 // 动画时长为500ms
+              });
+            }, 500)
            return true;
          },
          shouldBegin: (e) => {
@@ -260,7 +265,7 @@ const initGraph = () => {
      ],
    },
    defaultNode: {
-      size: 24,
+      size: 20,
      anchorPoints: [
        [0, 0.5],
        [1, 0.5],
@@ -287,7 +292,7 @@ const initGraph = () => {
        return 16;
      },
      getVGap: function getVGap() {
-        return 25;
+        return 15;
      },
      getHGap: function getHGap() {
        return 120;
@@ -301,7 +306,7 @@ const initGraph = () => {
      label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string),
      collapsed: node.children?.length ? false : true,
      labelCfg: {
-        offset: 10,
+        offset: 7,
        style: {
          fontSize: 13,
          fill: '#212121',
@@ -364,7 +369,7 @@ const observeResize = () => {
          return;
        }
        graphRef.value.changeSize(width, height);
-        graphRef.value.setMinZoom(0.7);
+        graphRef.value.setMinZoom(1);
        graphRef.value.setMaxZoom(1);
        graphRef.value.fitView(40, { direction: 'both' });
        graphRef.value.fitCenter();
@@ -380,7 +385,7 @@ const observeResize = () => {
      return;
    }
    graphRef.value.changeSize(width, height);
-    graphRef.value.setMinZoom(0.7);
+    graphRef.value.setMinZoom(1);
    graphRef.value.setMaxZoom(1);
    graphRef.value.fitView(40, { direction: 'both' });
    graphRef.value.fitCenter();
@@ -472,7 +477,9 @@ const bindEvents = () => {
        }
      });
      lastSelectNode.value = item;
-      detailInfo.value.guid = model.guid;
+      detailInfo.value = {};
+      //   detailInfo.value.guid = model.guid;
+      detailInfoLabel.value = model.label || {};
      updateTooltipPosition(evt);
      detailLoading.value = true;
@@ -600,7 +607,7 @@ defineExpose({
  overflow-y: auto;
  .title {
-    font-size: 16px;
+    font-size: 14px;
    color: #212121;
    line-height: 24px;
    font-weight: 600;
@@ -608,7 +615,7 @@ defineExpose({
  .row {
    margin-top: 8px;
-    font-size: 14px;
+    font-size: 12px;
    color: #666666;
    word-break: break-all;
    line-height: 21px;
--- a/src/views/data_meta/components/Sankey.vue
View file @d3bd009
+++ b/src/views/data_meta/components/Sankey.vue
View file @d3bd009
@@ -78,6 +78,7 @@ const sankeyInstance: any = ref();
 const containerRef = ref();
 const setChartsOption = () => {
  let option = {
    tooltip: {
      trigger: 'item',
@@ -85,19 +86,33 @@ const setChartsOption = () => {
        if (params.data.name) {
          return null;
        }
-        return params.data.source + '     -->     ' + params.data.target
+        return params.data.source + '      >      ' + params.data.target
      }
    },
    color: ["#3DBCBE", "#6b67d1", "#7BBCE0", "#2B8EF3", "#51dca2", "#E19D46"],
    series: [
      {
        type: 'sankey',
-        top: 80,
+        top: 60,
-        bottom: 40,
+        bottom: 20,
        draggable: false,
-        left: 40,
+        left: 50,
-        right: 80,
+        right: 100,
-        data: props.names,
+        label: {
+          fontSize: 10,
+        },
+        data: props.names?.map(n => {
+          if (n.isLast) {
+            return {
+              ...n,
+              label: {
+                width: 97,
+                overflow: 'breakAll'
+              }
+            }
+          }
+          return n;
+        }),
        links: props.treeData,
        lineStyle: {
          color: 'source',
@@ -113,10 +128,9 @@ const setChartsOption = () => {
 const resizeObserver = ref();
 const observeResize = () => {
-  resizeObserver.value = new ResizeObserver(() => {
+  window.addEventListener('resize', (e) => {
    sankeyInstance.value?.resize();
  });
-  resizeObserver.value.observe(containerRef.value);
 }
 onMounted(() => {
--- a/src/views/data_meta/standard-query-view.vue
View file @d3bd009
+++ b/src/views/data_meta/standard-query-view.vue
View file @d3bd009
@@ -7,8 +7,8 @@
    <div className='g6-component-topbar'>
      <graphTopbar ref="topBarRef" @displaySwitchChange="displaySwitchChange" :isGraphDisplay="isGraphDisplay" />
    </div>
-    <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData" :noContextMenu="true"
+    <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData"
-      @nodeItemClick="handleNodeItemClick">
+      :noContextMenu="true" @nodeItemClick="handleNodeItemClick">
    </RelationNetwork>
    <Sankey v-show="!isGraphDisplay && (sankeyNames?.length || sankeyDataLoading)" v-loading="sankeyDataLoading"
      :tree-data="sankeyData" :names="sankeyNames">
@@ -112,8 +112,8 @@ const handleNodeItemClick = (graph, nodeItem) => {
      nodeItem.getModel().collapsed = false;
      parentData.collapsed = false;
      graph.updateItem(nodeItem, {
-          ...nodeItem.getModel(),
+        ...nodeItem.getModel(),
-          collapsed: false
+        collapsed: false
      });
      graph.layout();
      setTimeout(() => {
@@ -128,6 +128,9 @@ const handleNodeItemClick = (graph, nodeItem) => {
        graph.layout();
        graph.setMinZoom(0.5);
        graph.setMaxZoom(5);
+            graph.focusItem(nodeItem, true, {
+    duration: 400 // 动画时长为500ms
+  });
      }, 500);
    } else {
      parentData.isLoading = false;
@@ -144,20 +147,20 @@ onBeforeMount(() => {
      const data = res.data || [];
      let resultData = data?.[0] || {};
      if (!resultData?.children?.length && resultData.isHaveData == 'Y') {
-         graphDataLoading.value = true;
+        graphDataLoading.value = true;
-  getMetaStandardField(resultData.guid).then((res: any) => {
+        getMetaStandardField(resultData.guid).then((res: any) => {
-    graphDataLoading.value = false;
+          graphDataLoading.value = false;
-    if (res?.code == proxy.$passCode) {
+          if (res?.code == proxy.$passCode) {
-      resultData.children = res.data || [];
+            resultData.children = res.data || [];
-      graphTreeData.value = resultData;
+            graphTreeData.value = resultData;
+          } else {
+            graphTreeData.value = resultData;
+            ElMessage.error(res.msg);
+          }
+        });
      } else {
        graphTreeData.value = resultData;
-      ElMessage.error(res.msg);
+      }
-    }
-      });
-    } else {
-      graphTreeData.value = resultData;
-    }
    } else {
      ElMessage.error(res.msg);
    }
--- a/src/views/data_meta/standard-query.vue
View file @d3bd009
+++ b/src/views/data_meta/standard-query.vue
View file @d3bd009
@@ -204,6 +204,9 @@ const handleNodeItemClick = (graph, nodeItem) => {
        graph.layout();
        graph.setMinZoom(0.5);
        graph.setMaxZoom(5);
+        graph.focusItem(nodeItem, true, {
+    duration: 500 // 动画时长为500ms
+  });
      }, 500);
    } else {
      parentData.isLoading = false;