修复关系网样式问题

lihua
Showing 4 changed files with 62 additions and 21 deletions
src/api/modules/dataMetaService.ts
src/components/RelationNetwork/index.vue
src/views/data_meta/standard-query-view.vue
src/views/data_meta/standard-query.vue
--- a/src/api/modules/dataMetaService.ts
View file @13306d1
+++ b/src/api/modules/dataMetaService.ts
View file @13306d1
@@ -392,7 +392,7 @@ export const getMetaStandardField = (guid) => request({
 /** 根据元数据标准展示字段去获取未展示的详情信息 */
 export const getMetaStandardFieldDetail = (guid) => request({
-  url: `${import.meta.env.VITE_APP_STANDARD_URL}/meta-standard/data/detail?guid=${guid}`,
+  url: `${import.meta.env.VITE_APP_STANDARD_URL}/meta-standard/data/convert-detail?guid=${guid}`,
  method: 'get'
 })
--- a/src/components/RelationNetwork/index.vue
View file @13306d1
+++ b/src/components/RelationNetwork/index.vue
View file @13306d1
@@ -4,7 +4,7 @@
      <div class="title">{{ detailInfoLabel }}</div>
      <div class="row" v-for="item in Object.keys(detailInfo)">
        <span>{{ item + '：' }}</span>
-        <span>{{ detailInfo[item] == null ? '-' :  detailInfo[item] }}</span>
+        <span>{{ detailInfo[item] == null ? '-' : detailInfo[item] }}</span>
      </div>
    </div>
  </div>
@@ -51,11 +51,11 @@ const containerRef = ref();
 const graphRef = ref();
-const resizeObserver = ref();
 watch(() => props.treeData, (val) => {
  if (!graphRef.value && val?.guid) {
-    initGraph();
+    nextTick(() => {
+      initGraph();
+    })
    return;
  }
  if (!graphRef.value) {
@@ -82,7 +82,7 @@ watch(() => props.treeData, (val) => {
 const renderGraph = (graph: any, lineageData: any) => {
  if (!graph || !lineageData) return;
-  graph.setMinZoom(0.5);
+  graph.setMinZoom(0.7);
  graph.setMaxZoom(1);
  graph.data(lineageData);
  graph.render();
@@ -120,7 +120,7 @@ const detectLanguage = (text) => {
 const handleLabelLength = (label: string) => {
  if (detectLanguage(label) == 'English') {
-    return label?.length > maxEnglishCount.value ? label.slice(0,  maxEnglishCount.value) + '...' : label;
+    return label?.length > maxEnglishCount.value ? label.slice(0, maxEnglishCount.value) + '...' : label;
  }
  return label?.length > maxChineseCount.value ? label.slice(0, maxChineseCount.value) + '...' : label;
 };
@@ -230,11 +230,12 @@ const initGraph = () => {
    container: container,
    width,
    height,
+   // animate: false,
    plugins: [contextMenu, tooltip.value],
    fitCenter: true,
    fitView: true,
    fitViewPadding: 40,
-    minZoom: 0.5,
+    minZoom: 0.7,
    maxZoom: 1,
    modes: {
      default: [
@@ -286,7 +287,7 @@ const initGraph = () => {
        return 16;
      },
      getVGap: function getVGap() {
-        return 30;
+        return 25;
      },
      getHGap: function getHGap() {
        return 120;
@@ -336,7 +337,7 @@ onMounted(() => {
 })
 const observeResize = () => {
-  resizeObserver.value = new ResizeObserver(() => {
+  window.addEventListener('resize', (e) => {
    let domWidth = document.documentElement.clientWidth;
    if (lastSelectNode.value) {
      tooltip1Ref.value.style.display = 'none';
@@ -363,7 +364,7 @@ const observeResize = () => {
          return;
        }
        graphRef.value.changeSize(width, height);
-        graphRef.value.setMinZoom(0.5);
+        graphRef.value.setMinZoom(0.7);
        graphRef.value.setMaxZoom(1);
        graphRef.value.fitView(40, { direction: 'both' });
        graphRef.value.fitCenter();
@@ -379,14 +380,13 @@ const observeResize = () => {
      return;
    }
    graphRef.value.changeSize(width, height);
-    graphRef.value.setMinZoom(0.5);
+    graphRef.value.setMinZoom(0.7);
    graphRef.value.setMaxZoom(1);
    graphRef.value.fitView(40, { direction: 'both' });
    graphRef.value.fitCenter();
    graphRef.value.setMinZoom(0.5);
    graphRef.value.setMaxZoom(5);
  });
-  resizeObserver.value.observe(containerRef.value);
 }
--- a/src/views/data_meta/standard-query-view.vue
View file @13306d1
+++ b/src/views/data_meta/standard-query-view.vue
View file @13306d1
@@ -81,7 +81,7 @@ const getSankeyDataList = () => {
 const handleNodeItemClick = (graph, nodeItem) => {
  const nodeId = nodeItem.get('id');
-  const parentData = graph.findDataById(nodeId);
+  let parentData = graph.findDataById(nodeId);
  if (!parentData.children) {
    parentData.children = [];
  }
@@ -89,10 +89,15 @@ const handleNodeItemClick = (graph, nodeItem) => {
    ElMessage.warning('没有可展开的下级字段');
    return;
  }
+  // graph.updateConfig({ animate: false });
+  // graph.refresh();
+  nodeItem.getModel().collapsed = false;
+  parentData.collapsed = false;
  graphDataLoading.value = true;
  getMetaStandardField(nodeId).then((res: any) => {
    graphDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
+      parentData = graph.findDataById(nodeId);
      const data = res.data || [];
      parentData.children = [];
      if (!data?.length) {
@@ -103,13 +108,27 @@ const handleNodeItemClick = (graph, nodeItem) => {
      data.forEach(d => {
        parentData.children.push(d);
      })
+      parentData.isLoading = false;
+      nodeItem.getModel().collapsed = false;
      parentData.collapsed = false;
+      graph.updateItem(nodeItem, {
+          ...nodeItem.getModel(),
+          collapsed: false
+      });
+      graph.layout();
      setTimeout(() => {
-        parentData.isLoading = false;
+        // graph.updateConfig({ animate: true });
+        // graph.refresh();
+        graph.updateItem(nodeItem, {
+          ...nodeItem.getModel(),
+          collapsed: false
+        });
+        graph.setMinZoom(1);
        graph.setMaxZoom(1);
-        graph.changeData(graphTreeData.value);
+        graph.layout();
+        graph.setMinZoom(0.5);
        graph.setMaxZoom(5);
-      }, 100);
+      }, 500);
    } else {
      parentData.isLoading = false;
      ElMessage.error(res.msg);
@@ -123,7 +142,22 @@ onBeforeMount(() => {
    graphDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
-      graphTreeData.value = data?.[0] || {};
+      let resultData = data?.[0] || {};
+      if (!resultData?.children?.length && resultData.isHaveData == 'Y') {
+         graphDataLoading.value = true;
+  getMetaStandardField(resultData.guid).then((res: any) => {
+    graphDataLoading.value = false;
+    if (res?.code == proxy.$passCode) {
+      resultData.children = res.data || [];
+      graphTreeData.value = resultData;
+      } 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 @13306d1
+++ b/src/views/data_meta/standard-query.vue
View file @13306d1
@@ -191,13 +191,20 @@ const handleNodeItemClick = (graph, nodeItem) => {
      data.forEach(d => {
        parentData.children.push(d);
      })
+      parentData.isLoading = false;
      parentData.collapsed = false;
+      graph.layout();
      setTimeout(() => {
-        parentData.isLoading = false;
+        graph.updateItem(nodeItem, {
+          ...nodeItem.getModel(),
+          collapsed: false
+        });
+        graph.setMinZoom(1);
        graph.setMaxZoom(1);
-        graph.changeData(lastClickNode.value);
+        graph.layout();
+        graph.setMinZoom(0.5);
        graph.setMaxZoom(5);
-      }, 100);
+      }, 500);
    } else {
      parentData.isLoading = false;
      ElMessage.error(res.msg);