@riil-frontend/component-topology 3.4.0 → 3.5.0-a.2

package/es/topoCenter/utils/linPermissionUtil.js

@@ -1,21 +1,13 @@
-var isWriteable = function isWriteable(link, source, target, linkType) {
-  if (linkType === "exit") {
-    return ["write", "delete"].indexOf(source === null || source === void 0 ? void 0 : source.operation) !== -1;
-  } else {
-    return [source, target].filter(function (node) {
-      return ["write", "delete"].indexOf(node === null || node === void 0 ? void 0 : node.operation) !== -1;
-    }).length === 2;
-  }
-};
+import { getLinkPermissionByConnectType } from "./resourcePermissionUtil";
 /**
  * 获得链路权限
  *
  * @param {*} link
  * @param {*} nodes
+ * @deprecated 
  * @returns
  */
 
-
 export function getLinkPermission(edge, nodes, link) {
   var source = nodes.find(function (node) {
     return node.id === edge.getSource().getTag();
@@ -25,11 +17,5 @@ export function getLinkPermission(edge, nodes, link) {
   }); // console.log("getLinkPermission", edge, source, target, link);
 
   var linkType = link ? link.attributes["network_link.connect_type"] : edge.a("network_link.connect_type");
-  return {
-    readable: (source === null || source === void 0 ? void 0 : source.operation) || (target === null || target === void 0 ? void 0 : target.operation),
-    writeable: isWriteable(edge, source, target, linkType),
-    deleteable: [source, target].filter(function (node) {
-      return ["write", "delete"].indexOf(node === null || node === void 0 ? void 0 : node.operation) !== -1;
-    }).length >= 1
-  };
+  return getLinkPermissionByConnectType(linkType, source, target);
 }

package/es/topoCenter/utils/resourcePermissionUtil.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+export function getNodePermission(node) {
+  return {
+    readable: !!(node !== null && node !== void 0 && node.operation),
+    writeable: ['write', 'delete'].includes(node === null || node === void 0 ? void 0 : node.operation),
+    deleteable: ['delete'].includes(node === null || node === void 0 ? void 0 : node.operation)
+  };
+}
+/**
+ * 获得链路权限
+ *
+ * @param {*} link
+ * @param {*} source
+ * @param {*} target
+ * @returns
+ */
+
+export function getLinkPermission(link, source, target) {
+  var linkType = link.attributes['network_link.connect_type'];
+
+  var isWriteable = function isWriteable() {
+    if (linkType === 'exit') {
+      return ['write', 'delete'].indexOf(source === null || source === void 0 ? void 0 : source.operation) !== -1;
+    } else {
+      return [source, target].filter(function (node) {
+        return ['write', 'delete'].indexOf(node === null || node === void 0 ? void 0 : node.operation) !== -1;
+      }).length === 2;
+    }
+  };
+
+  return {
+    readable: !!(source !== null && source !== void 0 && source.operation) || !!(target !== null && target !== void 0 && target.operation),
+    writeable: isWriteable(),
+    deleteable: [source, target].filter(function (node) {
+      return ['write', 'delete'].includes(node === null || node === void 0 ? void 0 : node.operation);
+    }).length >= 1
+  };
+}
+/**
+ * 适配接口
+ * 
+ * @param {*} connectType 
+ * @param {*} source 
+ * @param {*} target 
+ * @returns 
+ */
+
+export function getLinkPermissionByConnectType(connectType, source, target) {
+  var link = {
+    attributes: {
+      'network_link.connect_type': connectType
+    }
+  };
+  return getLinkPermission(link, source, target);
+}
+export function addTopoDataResourcePermission(data) {
+  var nodes = data.nodes,
+      links = data.links,
+      linkGroups = data.linkGroups;
+
+  var addLinksPermission = function addLinksPermission(linkList) {
+    return linkList.map(function (link) {
+      var source = nodes.find(function (n) {
+        return n.id === link.source;
+      });
+      var target = nodes.find(function (n) {
+        return n.id === link.target;
+      });
+      return _extends({}, link, {
+        permission: getLinkPermission(link, source, target)
+      });
+    });
+  };
+
+  return _extends({}, data, {
+    nodes: nodes.map(function (node) {
+      return _extends({}, node, {
+        permission: getNodePermission(node)
+      });
+    }),
+    links: addLinksPermission(links),
+    linkGroups: addLinksPermission(linkGroups)
+  });
+}

package/es/utils/ResourceConfigUtil.js

@@ -57,7 +57,7 @@ function getResourceConfigFromHt(topo) {
 
     if (id) {
       var linkData = topo.dataModel.getDataById(id);
-      var connectType = linkData === null || linkData === void 0 ? void 0 : linkData.attributes["network_link.connect_type"];
+      var connectType = linkData !== null && linkData !== void 0 && linkData.attributes ? linkData === null || linkData === void 0 ? void 0 : linkData.attributes["network_link.connect_type"] : undefined;
 
       if (connectType === "exit" && !exportLinkIdList.includes(id)) {
         exportLinkIdList.push(id);

package/es/utils/htElementUtils.js

@@ -263,4 +263,15 @@ export function getGroupChildrenNodes(group) {
 
 export function getGroupChildrenData(group) {
   return getGroupChildren(group).map(getNodeData);
+}
+export function setElementRuntimeStyle(element, name, value) {
+  var _extends2;
+
+  var runtimeStyle = _extends({}, element.a('runtimeStyles') || {}, (_extends2 = {}, _extends2[name] = value, _extends2));
+
+  if (value === undefined) {
+    delete runtimeStyle[name];
+  }
+
+  element.a('runtimeStyles', runtimeStyle);
 }

package/lib/constants/ResourceTypeLimit.js

@@ -1,11 +1,45 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.getNetworkTopoCommonResListProps = exports.filterCiTypes = exports.RESOURCE_LIMIT_TYPES = void 0;
+exports.filterCiTypes = exports.RESOURCE_LIMIT_TYPES = void 0;
+exports.filterModelTree = filterModelTree;
+exports.getCiModels = getCiModels;
+exports.getNetworkTopoCommonResListProps = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var excludeTypes = ['data_center', 'manage_assets', 'network_link', 'access_link']; // 过滤模型树
+
+function filterModelTree(modelTree) {
+  return modelTree.filter(function (node) {
+    return !excludeTypes.includes(node.code);
+  }).map(function (node) {
+    return (0, _extends2["default"])({}, node, {
+      childs: filterModelTree(node.childs || []).filter(function (child) {
+        return child.monitorable;
+      })
+    });
+  });
+}
+
+function getCiModels(modelTree) {
+  var list = [];
+  filterModelTree(modelTree).forEach(function (domainModel) {
+    list.push.apply(list, domainModel.childs);
+  });
+  return list;
+} // 资源选择组件过滤类型
+
 
 var filterCiTypes = function filterCiTypes(tree) {
-  return tree.filter(function (item) {
-    return item.value !== 'data_center';
+  return tree.filter(function (node) {
+    return !excludeTypes.includes(node.value);
+  }).map(function (node) {
+    return (0, _extends2["default"])({}, node, {
+      children: filterCiTypes(node.children || [])
+    });
   });
 };
 

package/lib/core/components/AlarmListPanel/components/AlarmListItem.js

@@ -21,6 +21,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var alarmLink = function alarmLink(alarmInfo) {
+  console.log("alarmLink", alarmInfo);
+  return "/default/pagecenter/" + _uicbb.PAGE_TYPE.ALERT_DETAIL + "/view/" + alarmInfo.alertId + "?alertId=" + alarmInfo.alertId + "&resId=" + alarmInfo.ciId + "&title=" + alarmInfo.alertObject + "&ruleId=" + alarmInfo.ruleId + "&ciCode=" + alarmInfo.ciTypeCode + "&ciType=" + alarmInfo.ciType;
+};
+
 function AlarmListItem(props) {
   // 传入参数
   var topo = props.topo,
@@ -33,7 +38,7 @@ function AlarmListItem(props) {
       className: _indexModule["default"]["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
     })
   }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
-    to: "/default/pagecenter/" + _uicbb.PAGE_TYPE.ALERT_DETAIL + "/view/" + alarmInfo.alertId + "?alertId=" + alarmInfo.alertId + "&resId=" + alarmInfo.ciId + "&title=" + alarmInfo.alertObject
+    to: alarmLink(alarmInfo)
   }, "" + alarmInfo.alertObject + alarmInfo.alertTitle));
 }
 

package/lib/core/components/TopoView/topoView.js

@@ -41,6 +41,8 @@ var _edgeUtil = require("../../utils/edgeUtil");
 
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
+var _useManageStatus = _interopRequireDefault(require("../../../hooks/useManageStatus"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -93,7 +95,6 @@ var Topology = function Topology(props) {
       tData = _useState[0],
       setTData = _useState[1];
 
-  var titleBarRef = (0, _react.useRef)();
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
     topoId: topoId,
@@ -109,10 +110,14 @@ var Topology = function Topology(props) {
   var onExitEdit = topoEdit.onExitEdit,
       onBindData = topoEdit.onBindData,
       onDeleteElement = topoEdit.onDeleteElement,
-      onSaveTopo = topoEdit.onSaveTopo; // useAlarm({
+      onSaveTopo = topoEdit.onSaveTopo;
+  var titleBarRef = (0, _react.useRef)(); // useAlarm({
   //   topo,
   // });
 
+  (0, _useManageStatus["default"])({
+    topo: topo
+  });
   (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
     name: "topo",
     onMessage: function onMessage(data) {

package/lib/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -5,8 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = TopoEditorTitleBar;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
+
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -45,7 +51,32 @@ function TopoEditorTitleBar(props) {
   }, "\u4FDD\u5B58"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: _TitleBarModule["default"].button,
     onClick: function onClick() {
-      topo.exitEditMode();
+      _dialog["default"].confirm({
+        title: "提示",
+        content: "若现在退出，图上修改的内容将不会保存！",
+        onOk: function () {
+          var _onOk = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+            return _regenerator["default"].wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    topo.exitEditMode();
+
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function onOk() {
+            return _onOk.apply(this, arguments);
+          }
+
+          return onOk;
+        }()
+      });
     }
   }, "\u9000\u51FA"))));
 }

package/lib/core/models/Alarm.js

@@ -528,10 +528,7 @@ var Alarm = /*#__PURE__*/function () {
     return handleAlarmEvent;
   }();
 
-  _proto.setAlarms = function setAlarms(alarmList) {
-    // rlog.debug("alart----------------alarmList", alarmList);
-    this.topo.topoClient.loadAlarm(alarmList);
-  };
+  _proto.updateGraphAlarm = function updateGraphAlarm() {};
 
   _proto.getState = function getState() {
     return this.topo.store.getModelState("topoAlarm");

package/lib/core/models/DataModel.js

@@ -27,6 +27,26 @@ var DataModel = /*#__PURE__*/function () {
     return [].concat(this.getGroups(), this.getNodes(), this.getEdges(), this.getEdgeGroups());
   };
 
+  _proto.useDatas = function useDatas() {
+    var topo = this.topo;
+
+    var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+        data = _topo$store$useModelS.data;
+
+    if (data) {
+      return this.getDatas();
+    }
+
+    return [];
+  };
+
+  _proto.useResources = function useResources() {
+    var datas = this.useDatas();
+    return datas.filter(function (item) {
+      return item.type !== 'group';
+    });
+  };
+
   _proto.getDataById = function getDataById(id) {
     return this.getDatas().find(function (item) {
       return item.id === id;

package/lib/core/models/TopoApp.js

@@ -48,7 +48,7 @@ var _PluginManager = _interopRequireDefault(require("./PluginManager"));
 var _topoFactory = _interopRequireDefault(require("./topoFactory"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "3.4.0" === 'string' ? "3.4.0" : null;
+var version = typeof "3.5.0-a.2" === 'string' ? "3.5.0-a.2" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/hooks/useManageStatus.js

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useManageStatus;
+
+var _react = require("react");
+
+var _htElementUtils = require("../utils/htElementUtils");
+
+var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
+
+/**
+ * 监听监控状态推送
+ * 节点、连线监控状态置灰
+ * 
+ * @param {*} props 
+ */
+function useManageStatus(props) {
+  var topo = props.topo;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
+  var resources = topo.dataModel.useResources();
+  (0, _react.useEffect)(function () {
+    // 启动监听
+    return function () {// 注销监听
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    // 首次加载和监控状态变化后，更新节点和连线置灰状态
+    if (graphLoaded) {
+      resources.forEach(function (resource) {
+        var type = resource.type,
+            id = resource.id,
+            manageStatus = resource.manageStatus,
+            permission = resource.permission;
+        var isMonite = manageStatus === 3;
+        var readable = !!(permission !== null && permission !== void 0 && permission.readable);
+        var showNotMoniteStatus = !isMonite && readable;
+        var element = topo.getDataModel().getDataByTag(id);
+        if (!element) return;
+
+        if (type === 'node') {
+          (0, _htElementUtils.setElementRuntimeStyle)(element, 'opacity', showNotMoniteStatus ? 0.3 : undefined);
+        } else {
+          (0, _htElementUtils.setElementRuntimeStyle)(element, 'color', showNotMoniteStatus ? '#C9CED2' : undefined);
+        }
+      });
+    }
+  }, [graphLoaded, resources]);
+}

package/lib/hooks/useTopoEdit.js

@@ -363,11 +363,6 @@ var useTopoEdit = function useTopoEdit(params) {
       case 'link':
         if (onLineDelete) {
           onLineDelete(data);
-        } // 临时放这里，仅拓扑中心有
-
-
-        if (topo.linkDynamicStyleExecutor) {
-          topo.linkDynamicStyleExecutor.execute();
         }
 
         break;

package/lib/models/topoAlarm.js

@@ -11,12 +11,6 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
-
-var _metric = require("@riil-frontend/component-topology-common/es/services/metric");
-
-var _model = require("@riil-frontend/component-topology-common/es/services/model");
-
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _lodash = _interopRequireDefault(require("lodash"));

package/lib/models/topoConfig.js

@@ -358,7 +358,7 @@ function _default(topoApp) {
                     _rlog["default"].debug("getTopoByConditions--------data", data);
 
                     _context4.next = 11;
-                    return (0, _getTopoData.addLinkData)(data);
+                    return (0, _getTopoData.buildData)(data);
 
                   case 11:
                     data = _context4.sent;

package/lib/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Data/index.js

@@ -36,11 +36,8 @@ function LinkDataTab(props) {
       linkGroups = _topo$store$useModelS.linkGroups;
   var linkData = [].concat(links, linkGroups).find(function (item) {
     return item.id === edge.getTag();
-  }); // rlog.debug("LinkDataTab-------linkData", linkData);
-
+  });
   (0, _react.useEffect)(function () {
-    _rlog["default"].debug("LinkDataTab--edge-linkData", edge, linkData);
-
     setLink(linkData);
   }, [edge, linkData]);
   var permission = (0, _linPermissionUtil.getLinkPermission)(edge, nodes, link);

package/lib/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyView.js

@@ -21,9 +21,7 @@ var _htElementUtils = require("../../../../../../utils/htElementUtils.js");
 
 function LinkPropertyView(props) {
   var edge = props.edge,
-      topo = props.topo;
-  console.log("LinkPropertyView-----", edge, edge.getSource()); // 无权限不显示数据页签
-  // const operation = props.edge.a('operation');
+      topo = props.topo; // 无权限不显示数据页签
 
   var _topo$store$useModelS = topo.store.useModelState("topoMod").data,
       links = _topo$store$useModelS.links,

package/lib/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js

@@ -51,6 +51,10 @@ function AddLinkDrawer(props) {
       lineData = props.lineData;
   var store = topo.store;
 
+  var _topo$store$useModel = topo.store.useModel("topoMod"),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
   var _store$useModel = store.useModel("topoConfig"),
       editState = _store$useModel[0],
       editDispatchers = _store$useModel[1];
@@ -61,8 +65,6 @@ function AddLinkDrawer(props) {
 
   var addLinkIsOpen = editState.addLinkIsOpen,
       currentLink = editState.currentLink;
-  var ciConnectable = linkState.ciConnectable; // // rlog.debug("addLinkDrawer--init-addLinkIsOpen", addLinkIsOpen, currentLink);
-  // const [visible, { setTrue, setFalse }] = useBoolean();
 
   var _useState = (0, _react.useState)(),
       link = _useState[0],
@@ -74,12 +76,16 @@ function AddLinkDrawer(props) {
 
   var _useState3 = (0, _react.useState)(false),
       loading = _useState3[0],
-      setLoading = _useState3[1]; // 保存后更新拓扑图状态
+      setLoading = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(),
+      sourceIFDoc = _useState4[0],
+      setSourceIFDoc = _useState4[1]; // 保存后更新拓扑图状态
 
 
-  var _useState4 = (0, _react.useState)([]),
-      ciIdsConnectable = _useState4[0],
-      setCiIdsConnectable = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+      ciIdsConnectable = _useState5[0],
+      setCiIdsConnectable = _useState5[1];
 
   var linkNodesRef = (0, _react.useRef)();
 
@@ -222,6 +228,7 @@ function AddLinkDrawer(props) {
 
             case 6:
               targetPorts = _context3.sent;
+              setSourceIFDoc(sourcePorts.portsDoc);
               connect_type = currentLink.attributes["network_link.connect_type"] === "exit" ? "exit" : "phy";
               setLink({
                 source: {
@@ -249,7 +256,7 @@ function AddLinkDrawer(props) {
                 })
               });
 
-            case 9:
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -272,23 +279,17 @@ function AddLinkDrawer(props) {
 
   var getCiTypesConnectable = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-      var notifier, ciTypesConnectable, nodes, ciIds, ciNodes;
+      var ciTypesConnectable, nodes, ciIds, ciNodes;
       return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              notifier = topo.view.topoClient.notifier; // rlog.debug("加载哪些ci类型可创建链路-getCiTypesConnectable");
-              // 加载哪些ci类型可创建链路
-
-              _context4.next = 3;
+              _context4.next = 2;
               return _topo["default"].networkLink.getCiTypesConnectable(_ResourceTypeLimit.RESOURCE_LIMIT_TYPES);
 
-            case 3:
+            case 2:
               ciTypesConnectable = _context4.sent;
-              nodes = (0, _htElementUtils.getNodes)(topo.getDataModel()); // rlog.debug("getCiTypesConnectable", nodes);
-              // const tags = topo.getTag();
-              // rlog.debug("加载哪些ci类型可创建链路", ciTypesConnectable, topo, nodes);
-
+              nodes = (0, _htElementUtils.getNodes)(topo.getDataModel());
               ciIds = [];
               ciNodes = [];
               nodes.map(function (node) {
@@ -304,7 +305,7 @@ function AddLinkDrawer(props) {
               setCiIdsConnectable(ciIds);
               return _context4.abrupt("return", ciNodes);
 
-            case 11:
+            case 10:
             case "end":
               return _context4.stop();
           }
@@ -404,9 +405,36 @@ function AddLinkDrawer(props) {
     }
   };
 
+  var mergeExitLinkData = function mergeExitLinkData(data, attributes) {
+    return {
+      id: data.id,
+      name: data.name,
+      source: data["network_link.source_device_id"],
+      target: data["network_link.destination_device_id"],
+      operation: data.operation,
+      interfaceSource: data["source_id"],
+      interfaceTarget: data["destination_id"],
+      ciType: data.ciType,
+      attributes: (0, _extends2["default"])({}, attributes, {
+        display_name: data.display_name,
+        name: data.name,
+        "network_link.actual_bandwidth": data["network_link.actual_bandwidth"],
+        "network_link.connect_type": data["network_link.connect_type"],
+        "network_link.destination_ipv4": data["network_link.destination_ipv4"],
+        "network_link.source_device_id": data["network_link.source_device_id"],
+        source_id: data.source_id,
+        support_templates: data.support_templates,
+        use: data.use,
+        source_id_object: {
+          displayName: sourceIFDoc[data.source_id].label
+        }
+      })
+    };
+  };
+
   var onSave = /*#__PURE__*/function () {
     var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(data) {
-      var parm, result, linkType, config, exportLinkIdList, _yield$editDispatcher, elements, linkData, edge, aobj, target;
+      var parm, result, linkType, config, exportLinkIdList, _yield$editDispatcher, elements, linkData, edge, aobj, target, links, linkAttrKey, newLinkData, newLinks, newData;
 
       return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
@@ -442,10 +470,7 @@ function AddLinkDrawer(props) {
               result = _context5.sent;
 
             case 13:
-              setLoading(false); // if (result) {
-              //   Message.success("保存成功");
-              // }
-
+              setLoading(false);
               linkType = data["network_link.connect_type"];
               _context5.prev = 15;
 
@@ -454,9 +479,7 @@ function AddLinkDrawer(props) {
                 break;
               }
 
-              config = topo.resourceConfig.getConfigFromHt(); // rlog.debug("getConfigFromHt", config, topo.resourceConfig);
-              // console.log("save success", data, result);
-              // 新建后显示到图上
+              config = topo.resourceConfig.getConfigFromHt(); // 新建后显示到图上
 
               if (!isAddMode) {
                 _context5.next = 31;
@@ -494,12 +517,7 @@ function AddLinkDrawer(props) {
               break;
 
             case 31:
-              // console.log(
-              //   "保存编辑信息",
-              //   data,
-              //   linkType,
-              //   topo.getGraphView().dm().sm().ld()
-              // );
+              // console.log("保存编辑信息", data, linkType);
               if (linkType === "exit") {
                 edge = topo.getGraphView().dm().sm().ld();
                 aobj = edge.getAttrObject();
@@ -509,6 +527,20 @@ function AddLinkDrawer(props) {
                 if (target.getTag() === undefined) {
                   target.a("name", data["network_link.destination_ipv4"]);
                 }
+
+                links = topoState.data.links;
+                linkAttrKey = links.findIndex(function (item) {
+                  return item.id === aobj.id;
+                });
+                newLinkData = mergeExitLinkData(edge.getAttrObject(), links[linkAttrKey]);
+                newLinks = (0, _copyUtil.clone)(links);
+                newLinks.splice(linkAttrKey, 1, newLinkData);
+                newData = (0, _extends2["default"])({}, topoState.data, {
+                  links: newLinks
+                });
+                topoDispatchers.update({
+                  data: newData
+                });
               }
 
               _message["default"].success("保存成功");