@riil-frontend/component-topology 12.1.2 → 13.0.0-dev.10

package/es/components/ColorPanel/index.js

@@ -1,14 +1,68 @@
 import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 
 /* eslint-disable eqeqeq */
 
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Color from 'color';
 import { SketchPicker } from 'react-color';
 import ColorBlock from "./components/ColorBlock";
 import styles from "./index.module.scss";
+var defaultColorList = [{
+  color: 'rgba(255, 255, 255, 1)',
+  borderColor: 'rgba(219, 219, 219, 1)'
+}, {
+  color: 'rgba(245, 245, 245, 1)',
+  borderColor: 'rgba(208, 208, 208, 1)'
+}, {
+  color: 'rgba(230, 230, 230, 1)',
+  borderColor: 'rgba(196, 196, 196, 1)'
+}, {
+  color: 'rgba(168, 168, 168, 1)',
+  borderColor: 'rgba(146, 146, 146, 1)'
+}, {
+  color: 'rgba(97, 97, 97, 1)',
+  borderColor: 'rgba(85, 85, 85, 1)'
+}, {
+  color: 'rgba(49, 49, 49, 1)',
+  borderColor: 'rgba(43, 43, 43, 1)'
+}, {
+  color: 'rgba(251, 115, 80, 1)',
+  borderColor: 'rgba(213, 98, 69, 1)'
+}, {
+  color: 'rgba(255, 166, 41, 1)',
+  borderColor: 'rgba(219, 144, 45, 1)'
+}, {
+  color: 'rgba(255, 205, 42, 1)',
+  borderColor: 'rgba(216, 175, 37, 1)'
+}, {
+  color: 'rgba(18, 174, 92, 1)',
+  borderColor: 'rgba(23, 148, 79, 1)'
+}, {
+  color: 'rgba(83, 184, 255, 1)',
+  borderColor: 'rgba(74, 156, 217, 1)'
+}, {
+  color: 'rgba(183, 128, 255, 1)',
+  borderColor: 'rgba(155, 109, 216, 1)'
+}, {
+  color: 'rgba(254, 192, 174, 1)',
+  borderColor: 'rgba(217, 163, 148, 1)'
+}, {
+  color: 'rgba(252, 209, 156, 1)',
+  borderColor: 'rgba(215, 178, 133, 1)'
+}, {
+  color: 'rgba(255, 232, 163, 1)',
+  borderColor: 'rgba(217, 198, 139, 1)'
+}, {
+  color: 'rgba(176, 244, 197, 1)',
+  borderColor: 'rgba(153, 209, 171, 1)'
+}, {
+  color: 'rgba(189, 227, 255, 1)',
+  borderColor: 'rgba(161, 193, 217, 1)'
+}];
 /**
  * 颜色选择
  *
@@ -22,7 +76,9 @@ function ColorPanel(props) {
 
   var value = props.value,
       showClear = props.showClear,
-      dataSource = props.dataSource,
+      _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? defaultColorList : _props$dataSource,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
       onChange = props.onChange,
       onPickerFocus = props.onPickerFocus,
       onPickerBlur = props.onPickerBlur;
@@ -169,9 +225,7 @@ function ColorPanel(props) {
     onClick: function onClick() {
       changClick('17');
     }
-  }, /*#__PURE__*/React.createElement(_Balloon, {
-    visible: visible,
-    trigger: defaultTrigger,
+  }, /*#__PURE__*/React.createElement(_Balloon, _extends({
     closable: false,
     triggerType: "click",
     animation: false,
@@ -180,9 +234,12 @@ function ColorPanel(props) {
     alignEdge: true,
     style: {
       paddingBottom: 0
-    },
+    }
+  }, colorPickerBalloonProps, {
+    visible: visible,
+    trigger: defaultTrigger,
     onClose: close
-  }, /*#__PURE__*/React.createElement(SketchPicker, {
+  }), /*#__PURE__*/React.createElement(SketchPicker, {
     color: data !== null && data !== void 0 ? data : undefined // width={230}
     ,
     disableAlpha: true,
@@ -198,61 +255,14 @@ function ColorPanel(props) {
   }))))));
 }
 
+ColorPanel.propTypes = {
+  dataSource: PropTypes.array
+};
 ColorPanel.defaultProps = {
   value: undefined,
   showClear: false,
-  dataSource: [{
-    color: 'rgba(255, 255, 255, 1)',
-    borderColor: 'rgba(219, 219, 219, 1)'
-  }, {
-    color: 'rgba(245, 245, 245, 1)',
-    borderColor: 'rgba(208, 208, 208, 1)'
-  }, {
-    color: 'rgba(230, 230, 230, 1)',
-    borderColor: 'rgba(196, 196, 196, 1)'
-  }, {
-    color: 'rgba(168, 168, 168, 1)',
-    borderColor: 'rgba(146, 146, 146, 1)'
-  }, {
-    color: 'rgba(97, 97, 97, 1)',
-    borderColor: 'rgba(85, 85, 85, 1)'
-  }, {
-    color: 'rgba(49, 49, 49, 1)',
-    borderColor: 'rgba(43, 43, 43, 1)'
-  }, {
-    color: 'rgba(251, 115, 80, 1)',
-    borderColor: 'rgba(213, 98, 69, 1)'
-  }, {
-    color: 'rgba(255, 166, 41, 1)',
-    borderColor: 'rgba(219, 144, 45, 1)'
-  }, {
-    color: 'rgba(255, 205, 42, 1)',
-    borderColor: 'rgba(216, 175, 37, 1)'
-  }, {
-    color: 'rgba(18, 174, 92, 1)',
-    borderColor: 'rgba(23, 148, 79, 1)'
-  }, {
-    color: 'rgba(83, 184, 255, 1)',
-    borderColor: 'rgba(74, 156, 217, 1)'
-  }, {
-    color: 'rgba(183, 128, 255, 1)',
-    borderColor: 'rgba(155, 109, 216, 1)'
-  }, {
-    color: 'rgba(254, 192, 174, 1)',
-    borderColor: 'rgba(217, 163, 148, 1)'
-  }, {
-    color: 'rgba(252, 209, 156, 1)',
-    borderColor: 'rgba(215, 178, 133, 1)'
-  }, {
-    color: 'rgba(255, 232, 163, 1)',
-    borderColor: 'rgba(217, 198, 139, 1)'
-  }, {
-    color: 'rgba(176, 244, 197, 1)',
-    borderColor: 'rgba(153, 209, 171, 1)'
-  }, {
-    color: 'rgba(189, 227, 255, 1)',
-    borderColor: 'rgba(161, 193, 217, 1)'
-  }],
+  dataSource: defaultColorList,
+  colorPickerBalloonProps: {},
   onChange: function onChange() {},
   onPickerFocus: function onPickerFocus() {},
   onPickerBlur: function onPickerBlur() {}

package/es/core/editor/components/Toolbar/widgets/FontColorButton.js

@@ -3,33 +3,20 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState } from 'react';
-import DropdownButton from "./components/DropdownButton";
+import FontColorDropdown from "./components/FontColorDropdown";
 import WidgetBox from "./WidgetBox";
-import ColorPanel from "../../../../../components/ColorPanel";
-import FontColorRange from "../../../../../components/ColorPanel/components/FontColorRange";
-import styles from "./FontColorButton.module.scss";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 
-function FontColorDropdown(props) {
-  var color = props.color,
-      onChange = props.onChange,
+function FontColorButton(props) {
+  var showLabel = props.showLabel,
       topo = props.topo,
-      opacity = props.opacity,
-      background = props.background,
+      style = props.style,
       setStyle = props.setStyle,
-      _props$fieldDisabled = props.fieldDisabled,
-      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
-
-  var _useState = useState(false),
-      disabled = _useState[0],
-      setDisabled = _useState[1];
-
-  var backgroundEnabled = fieldDisabled.background !== true;
-  var opacityEnabled = fieldDisabled.opacity !== true;
+      fieldDisabled = props.fieldDisabled;
 
   var backOpacityChange = function backOpacityChange(value) {
     topo.historyManager.beginTransaction();
-    onChange({
+    setStyle({
       opacity: (value / 100).toFixed(2) * 1
     });
     topo.historyManager.endTransaction();
@@ -111,84 +98,16 @@ function FontColorDropdown(props) {
     };
   }();
 
-  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
-  };
-
-  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
-  };
-
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/React.createElement(DropdownButton, {
-    disabled: disabled,
-    trigger: icon
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.fontColor
-  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px'
-    }
-  }, /*#__PURE__*/React.createElement(ColorPanel, {
-    value: color,
-    onChange: colorChang,
-    onPickerFocus: onFocus,
-    onPickerBlur: onBlur
-  }))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
-    className: styles.backgroundColor
-  }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
-    className: styles.backOpacity
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
-  }), /*#__PURE__*/React.createElement(FontColorRange, {
-    max: 100,
-    min: 0,
-    unit: "%",
-    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
-    onChange: backOpacityChange,
-    defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
-
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px',
-      marginBottom: '3px'
-    }
-  }, /*#__PURE__*/React.createElement(ColorPanel, {
-    showClear: true,
-    value: background,
-    onChange: backgroundChang,
-    onPickerFocus: onFocus,
-    onPickerBlur: onBlur
-  })))));
-}
-
-function FontColorButton(props) {
-  var showLabel = props.showLabel,
-      topo = props.topo,
-      style = props.style,
-      setStyle = props.setStyle,
-      fieldDisabled = props.fieldDisabled;
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6587\u5B57\u989C\u8272",
     tooltip: "\u6587\u5B57\u989C\u8272",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(FontColorDropdown, {
-    color: style.color,
-    background: style.background,
-    opacity: style.opacity,
+    value: style,
     fieldDisabled: fieldDisabled,
-    setStyle: setStyle,
-    onChange: function onChange(val) {
-      setStyle(val);
-    },
+    onColorChange: colorChang,
+    onBackgroundChange: backgroundChang,
+    onOpacityChange: backOpacityChange,
     topo: topo
   }));
 }

package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["topo", "value", "onChange", "fieldDisabled"];
+
+/* eslint-disable jsx-a11y/alt-text */
+import React, { useState } from 'react';
+import DropdownButton from "./DropdownButton";
+import ColorPanel from "../../../../../../components/ColorPanel";
+import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
+import styles from "./FontColorDropdown.module.scss";
+
+function FontColorDropdown(props) {
+  var color = props.color,
+      opacity = props.opacity,
+      background = props.background,
+      _props$fieldDisabled = props.fieldDisabled,
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
+      backgroundPickerBalloonProps = props.backgroundPickerBalloonProps,
+      onChange = props.onChange,
+      onColorChange = props.onColorChange,
+      onBackgroundChange = props.onBackgroundChange,
+      onOpacityChange = props.onOpacityChange;
+
+  var _useState = useState(false),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
+  var backgroundEnabled = fieldDisabled.background !== true;
+  var opacityEnabled = fieldDisabled.opacity !== true;
+
+  var onFocus = function onFocus() {};
+
+  var onBlur = function onBlur() {};
+
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
+    alt: ""
+  });
+  return /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.fontColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    value: color,
+    colorPickerBalloonProps: colorPickerBalloonProps,
+    onChange: onColorChange,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  }))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
+    className: styles.backgroundColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
+    className: styles.backOpacity
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    max: 100,
+    min: 0,
+    unit: "%",
+    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+    onChange: onOpacityChange,
+    defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
+
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    showClear: true,
+    value: background,
+    colorPickerBalloonProps: backgroundPickerBalloonProps,
+    onChange: onBackgroundChange,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  })))));
+}
+/**
+ * 
+ * @param {*} props 
+ * @param {{color, background, opacity}} props.value
+ * @returns 
+ */
+
+
+function FontColorD(props) {
+  var topo = props.topo,
+      value = props.value,
+      onChange = props.onChange,
+      fieldDisabled = props.fieldDisabled,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(FontColorDropdown, _extends({}, otherProps, {
+    color: value.color,
+    background: value.background,
+    opacity: value.opacity,
+    fieldDisabled: fieldDisabled,
+    setStyle: onChange,
+    onChange: onChange,
+    topo: topo
+  }));
+}
+
+ColorPanel.defaultProps = {
+  colorPickerBalloonProps: {},
+  backgroundPickerBalloonProps: {}
+};
+export default FontColorD;

package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js

@@ -32,7 +32,25 @@ function FontStyleSelect(props) {
       disabled = props.disabled,
       onChange = props.onChange,
       _props$fieldDisabled = props.fieldDisabled,
-      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      hideItemTootip = props.hideItemTootip;
+
+  var renderMenuItemContent = function renderMenuItemContent(item) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      style: fieldDisabled[item.key] ? {} : {
+        color: variables['$color-text1-4']
+      }
+    }, item.label));
+  };
+
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     value: value,
     valueRender: function valueRender() {
@@ -48,20 +66,8 @@ function FontStyleSelect(props) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       key: item.key,
       disabled: !!fieldDisabled[item.key]
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      trigger: /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
-        alt: ""
-      }), /*#__PURE__*/React.createElement("span", {
-        style: fieldDisabled[item.key] ? {} : {
-          color: variables['$color-text1-4']
-        }
-      }, item.label)),
+    }, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: renderMenuItemContent(item),
       align: "r",
       popupStyle: {}
     }, item.tooltip));

package/es/core/hooks/useResourceConfig.js

@@ -41,8 +41,7 @@ export default function (props) {
     var config = getConfigFromHt();
     return {
       resources: config.resources,
-      groups: config.groups,
-      relateTopoIdList: config.relateTopoIdList
+      groups: config.groups
     };
   };
 

package/es/core/hooks/useTopoEdit.js

@@ -1142,7 +1142,8 @@ var useTopoEdit = function useTopoEdit(params) {
      */
     onSaveTopo: onSaveTopo,
     getResourceConfigFromHt: resourceConfig.getConfigFromHt,
-    onLayerAdded: onLayerAdded
+    onLayerAdded: onLayerAdded,
+    findUNExistedLinkElements: findUNExistedLinkElements
   };
 };
 

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "12.1.2" === 'string' ? "12.1.2" : null;
+var version = typeof "13.0.0-dev.10" === 'string' ? "13.0.0-dev.10" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/models/topoData.js

@@ -41,11 +41,11 @@ export function saveTopo(_x) {
 
 function _saveTopo() {
   _saveTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
-    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, relateTopoIdList, viewGroupId, groupInfo, viewResources;
+    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, viewGroupId, groupInfo, viewResources;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, relateTopoIdList = data.relateTopoIdList, viewGroupId = data.viewGroupId;
+          topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, viewGroupId = data.viewGroupId;
           rlog.debug("saveTopo", data); // 保存布局
 
           if (!(template && layout)) {
@@ -97,8 +97,7 @@ function _saveTopo() {
           rlog.debug("saveTopo-groupInfo", groupInfo);
           _context.next = 15;
           return topoService.bindResourceToTopo(topoId, {
-            groups: groupInfo,
-            relateTopoIdList: relateTopoIdList
+            groups: groupInfo
           });
 
         case 15:

package/es/core/models/utils/linkUtils.js

@@ -46,40 +46,34 @@ export function isAggLink(link) {
 
   return (link === null || link === void 0 ? void 0 : (_link$attributes2 = link.attributes) === null || _link$attributes2 === void 0 ? void 0 : _link$attributes2.destination_type) === "network.agg_interface" && (link === null || link === void 0 ? void 0 : (_link$attributes3 = link.attributes) === null || _link$attributes3 === void 0 ? void 0 : _link$attributes3.source_type) === "network.agg_interface";
 }
-export function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
+export function mergeLinksData(links, linkCis, nodes, ciMap, interfaceDoc) {
   var linkCiMap = keyBy(links, "id");
   return links.map(function (link) {
-    var _interfaceCiMap$attri, _interfaceCiMap$attri2;
+    var _ciMap$attributes$net, _ciMap$attributes$net2, _ciMap$attributes$sou, _ciMap$attributes$des;
 
     var linkCi = linkCiMap[link.id];
 
-    var attributes = _extends({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes);
+    var attributes = _extends({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes); // 翻译
 
-    var sourceNode = nodes.find(function (node) {
-      return node.id === attributes["network_link.source_device_id"];
-    });
-    var targetNode = nodes.find(function (node) {
-      return node.id === attributes["network_link.destination_device_id"];
-    }); // 翻译
 
     return _extends({}, link, {
       attributes: _extends({}, attributes, {
         // 源/目的设备
         "network_link.source_device_id_object": {
-          displayName: sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.name
+          displayName: (_ciMap$attributes$net = ciMap[attributes["network_link.source_device_id"]]) === null || _ciMap$attributes$net === void 0 ? void 0 : _ciMap$attributes$net.attributes["display_name"]
         },
         "network_link.destination_device_id_object": {
-          displayName: targetNode === null || targetNode === void 0 ? void 0 : targetNode.name
+          displayName: (_ciMap$attributes$net2 = ciMap[attributes["network_link.destination_device_id"]]) === null || _ciMap$attributes$net2 === void 0 ? void 0 : _ciMap$attributes$net2.attributes["display_name"]
         },
         // 源/目的接口类型
         source_type_object: interfaceDoc[attributes.source_type],
         destination_type_object: interfaceDoc[attributes.destination_type],
         // 源/目的接口
         source_id_object: {
-          displayName: (_interfaceCiMap$attri = interfaceCiMap[attributes.source_id]) === null || _interfaceCiMap$attri === void 0 ? void 0 : _interfaceCiMap$attri.attributes["display_name"]
+          displayName: (_ciMap$attributes$sou = ciMap[attributes.source_id]) === null || _ciMap$attributes$sou === void 0 ? void 0 : _ciMap$attributes$sou.attributes["display_name"]
         },
         destination_id_object: {
-          displayName: (_interfaceCiMap$attri2 = interfaceCiMap[attributes.destination_id]) === null || _interfaceCiMap$attri2 === void 0 ? void 0 : _interfaceCiMap$attri2.attributes["display_name"]
+          displayName: (_ciMap$attributes$des = ciMap[attributes.destination_id]) === null || _ciMap$attributes$des === void 0 ? void 0 : _ciMap$attributes$des.attributes["display_name"]
         }
       })
     });
@@ -91,7 +85,7 @@ export function getLinksDetail(_x, _x2) {
 
 function _getLinksDetail() {
   _getLinksDetail = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(links, nodes) {
-    var linkCis, interfaceIds, interfaceTypes, interfaceCiMap, interfaceDoc;
+    var linkCis, ciMap, ciIds, interfaceTypes, loadCiMap, interfaceDoc;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -104,11 +98,20 @@ function _getLinksDetail() {
 
         case 2:
           linkCis = links;
-          interfaceIds = [].concat(linkCis.map(function (item) {
+          ciMap = keyBy(nodes, "id");
+          ciIds = _.uniq([].concat(linkCis.map(function (item) {
+            return item.attributes['network_link.destination_device_id'];
+          }), linkCis.map(function (item) {
+            return item.attributes['network_link.source_device_id'];
+          }), linkCis.map(function (item) {
             return item.attributes.source_id;
           }), linkCis.map(function (item) {
             return item.attributes.destination_id;
-          }));
+          }))).filter(function (item) {
+            return !!item;
+          }).filter(function (item) {
+            return !ciMap[item];
+          });
           interfaceTypes = _.compact(_.uniq([].concat(linkCis.map(function (item) {
             return item.attributes.source_type;
           }), linkCis.map(function (item) {
@@ -116,19 +119,21 @@ function _getLinksDetail() {
           })))).filter(function (item) {
             return item !== "ip";
           });
-          _context.next = 7;
-          return CiCache.load(interfaceIds);
+          _context.next = 8;
+          return CiCache.load(ciIds);
 
-        case 7:
-          interfaceCiMap = _context.sent;
-          _context.next = 10;
+        case 8:
+          loadCiMap = _context.sent;
+          _context.next = 11;
           return CiTypeCache.load(interfaceTypes);
 
-        case 10:
+        case 11:
           interfaceDoc = _context.sent;
-          return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc));
+          Object.assign(ciMap, loadCiMap); // console.log('getLinksDetail-mergeLinksData', { relations, interfaceIds, interfaceCis, })
+
+          return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, ciMap, interfaceDoc));
 
-        case 12:
+        case 14:
         case "end":
           return _context.stop();
       }

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js

@@ -10,11 +10,11 @@ import Link from "../../../../../../../components/Link";
 import service from "../../../../../../services/overview";
 import styles from "./index.module.scss";
 import { getHistory } from '@riil-frontend/component-topology-utils';
+import loglevel from 'loglevel';
 
 function formatUrl(url) {
   var _window, _window$location;
 
-  console.log(url);
   var prefix = '/default/pagecenter';
 
   if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
@@ -28,12 +28,14 @@ function EventsCard(props) {
   var alarmRiskList = props.alarmRiskList,
       closeDetailDrawer = props.closeDetailDrawer,
       onHandleAlarm = props.onHandleAlarm;
+  var log = loglevel.getLogger('topo');
 
   var jumpTo = function jumpTo(url) {
     closeDetailDrawer();
 
     if (topo.viewProps.jumpto) {
-      topo.viewProps.jumpto(formatUrl(url));
+      log.debug('formatUrl(url)', url);
+      topo.viewProps.jumpto(url);
     } else {
       getHistory().push(formatUrl(url));
     }