@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/es/core/editor/components/settings/common/text/TextStyle.js

@@ -20,8 +20,9 @@ function parseValue(value) {
   };
 }
 
-export default function TextStyle(props) {
-  var value = props.value,
+var TextStyle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var topo = props.topo,
+      value = props.value,
       _onChange = props.onChange;
 
   var field = _Field.useField({
@@ -116,7 +117,13 @@ export default function TextStyle(props) {
       width: '100%',
       marginRight: 8
     },
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex'
@@ -138,7 +145,15 @@ export default function TextStyle(props) {
     label: "\u989C\u8272"
   }, /*#__PURE__*/React.createElement(ColorPicker, {
     name: "color",
-    align: "br"
+    align: "br",
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   }))))));
-}
-;
+});
+export default TextStyle;

package/es/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -46,7 +46,6 @@ var fontStyleUtil = {
         map[key.replace(prefix, '')] = obj[key];
       }
     });
-    console.error(obj, prefix, map);
     return map;
   }
 };

package/es/core/editor/components/settings/propertyViews/box/BoxPropertyView.js

@@ -3,6 +3,7 @@ import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useEffect } from 'react';
+import useHtElement from "../../../../../common/hooks/useHtElement";
 import NameInput from "./NameInput";
 var CollapsePanel = _Collapse.Panel;
 
@@ -14,6 +15,10 @@ export default function BoxPropertyView(props) {
   var topo = props.topo,
       values = props.values,
       _onChange = props.onChange;
+  var boxNode = useHtElement({
+    topo: topo,
+    id: values.id
+  });
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -22,6 +27,11 @@ export default function BoxPropertyView(props) {
       var newValues = field.getValues();
 
       _onChange(name, value, newValues);
+
+      if (name === 'attrObject.topLeftText') {
+        // 修改框名称改变名称背景块大小
+        topo.getHtTopo().setRectangleText(boxNode);
+      }
     }
   });
 
@@ -42,6 +52,7 @@ export default function BoxPropertyView(props) {
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6807\u9898\u540D\u79F0"
   }, /*#__PURE__*/React.createElement(NameInput, {
-    name: "attrObject.topLeftText"
+    name: "attrObject.topLeftText",
+    topo: topo
   }))))));
 }

package/es/core/editor/components/settings/propertyViews/box/NameInput.js

@@ -2,7 +2,8 @@ import _Input from "@alifd/next/es/input";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var onChange = props.onChange;
+  var onChange = props.onChange,
+      topo = props.topo;
 
   var _useState = useState(props.value),
       value = _useState[0],
@@ -20,16 +21,23 @@ var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
+  var handleFocus = function handleFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
   var handleBlur = function handleBlur() {
     if (!value) {
       onChange('');
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(_Input, _extends({}, props, {
     ref: ref,
     value: value,
     onChange: handleChange,
+    onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });

package/es/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -92,6 +92,12 @@ export default function CommonEdgePropertyView(props) {
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: "100%"
+    },
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
     }
   }))), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -105,6 +111,14 @@ export default function CommonEdgePropertyView(props) {
   }, /*#__PURE__*/React.createElement(ColorPicker, {
     value: values["styleMap.edge.color"],
     align: "br",
-    onChange: setLineColor
+    onChange: setLineColor,
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   })))), extraDisplaySetting))));
 }

package/es/core/editor/components/settings/propertyViews/group/DataTab/GroupNodeList.js

@@ -18,6 +18,7 @@ export default function GroupNodeList(props) {
    */
 
   var handleNodeRemove = function handleNodeRemove(data) {
+    topo.historyManager.beginTransaction();
     var node = data.node;
     node.setParent(null);
     var viewRect = topo.getGraphView().getViewRect();
@@ -26,6 +27,7 @@ export default function GroupNodeList(props) {
 
     setTimeout(function () {
       node.iv();
+      topo.historyManager.endTransaction();
     }, 50);
   };
 

package/es/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandSetting.js

@@ -20,16 +20,19 @@ export default function GroupExpandSetting(props) {
       setLayout = _useState[1];
 
   var alignOnChange = function alignOnChange(v) {
-    // console.log("setAlignmentBySelectionNodes", v);
+    topo.historyManager.beginTransaction(); // console.log("setAlignmentBySelectionNodes", v);
     // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
+
     onChange("groupAlign", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+
+    topo.historyManager.endTransaction();
   };
 
   var layoutOnChange = function layoutOnChange(v) {
-    // console.log("layoutOnChange", v);
-    setLayout(v); // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
-
-    onChange("layout", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+    topo.historyManager.beginTransaction();
+    setLayout(v);
+    onChange("layout", v);
+    topo.historyManager.endTransaction();
   };
 
   useEffect(function () {
@@ -62,6 +65,7 @@ export default function GroupExpandSetting(props) {
       marginBottom: 0
     }
   }, /*#__PURE__*/React.createElement(GroupExpandStatus, {
+    topo: topo,
     group: group,
     expanded: expanded,
     setExpanded: function setExpanded(val) {

package/es/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandStatus.js

@@ -17,11 +17,19 @@ var list = [{
 
 export default function GroupExpandStatus(props) {
   var expanded = props.expanded,
-      setExpanded = props.setExpanded;
+      setExpanded = props.setExpanded,
+      topo = props.topo;
+
+  var handleChange = function handleChange(val) {
+    topo.historyManager.beginTransaction();
+    setExpanded(val);
+    topo.historyManager.endTransaction();
+  };
+
   return /*#__PURE__*/React.createElement(_Radio.Group, {
     dataSource: list,
     value: expanded,
-    onChange: setExpanded
+    onChange: handleChange
   });
 }
 ;

package/es/core/editor/components/settings/propertyViews/group/SettingTab/Setting.js

@@ -51,6 +51,7 @@ export default function GroupSetting(props) {
     }, /*#__PURE__*/React.createElement(_Form.Item, {
       label: "\u9ED8\u8BA4\u663E\u793A\u65B9\u5F0F"
     }, /*#__PURE__*/React.createElement(GroupExpandStatus, {
+      topo: topo,
       group: group,
       expanded: expanded,
       setExpanded: function setExpanded(val) {
@@ -70,9 +71,13 @@ export default function GroupSetting(props) {
         height: values.height
       },
       onChange: function onChange(size) {
+        topo.historyManager.beginTransaction();
+
         _onChange("width", size.width);
 
         _onChange("height", size.height);
+
+        topo.historyManager.endTransaction();
       },
       settingRuntimeState: settingRuntimeState
     }))));
@@ -92,7 +97,13 @@ export default function GroupSetting(props) {
   }), /*#__PURE__*/React.createElement(_Input, {
     name: "attrObject.name",
     maxLength: 30,
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), expanded ? /*#__PURE__*/React.createElement(GroupExpandSetting, {
     id: id,
     group: group,

package/es/core/editor/components/settings/propertyViews/layer/SettingTab/Setting.js

@@ -5,6 +5,7 @@ import _Input from "@alifd/next/es/input";
 import _Field from "@alifd/next/es/field";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useState, useEffect } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import AlignSetting from "../../../common/AlignSetting"; // import BatchSetNodeSize from '../../view/BatchSetNodeSize';
 
 import { SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, validateSpecialCharacter } from "../../../../../../../utils/SpecialCharacterValidateUtil"; // import LineType from '../../../common/LineType';
@@ -24,7 +25,7 @@ export default function LayerSettingTab(props) {
         return;
       }
 
-      console.error(values[name], value);
+      rlog.debug(values[name], value);
       var newValues = field.getValues();
 
       _onChange(name, value, newValues);
@@ -36,11 +37,14 @@ export default function LayerSettingTab(props) {
   }, [values]);
 
   var alignOnChange = function alignOnChange(v) {
-    console.log('setAlignmentBySelectionNodes', v);
+    topo.historyManager.beginTransaction();
+    rlog.debug('setAlignmentBySelectionNodes', v);
     topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
 
     _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
+
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(_Form, {
@@ -57,7 +61,13 @@ export default function LayerSettingTab(props) {
   }), /*#__PURE__*/React.createElement(_Input, {
     name: "styleMap.label",
     maxLength: 30,
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
     defaultExpandedKeys: ['布局', '图片', '对齐方式', '线形'],
     style: {

package/es/core/editor/components/settings/propertyViews/layer/SettingTab/Setting_bak.js

@@ -42,7 +42,6 @@ var fontStyleUtil = {
         map[key.replace(prefix, "")] = obj[key];
       }
     });
-    console.error(obj, prefix, map);
     return map;
   },
   build: function build(style) {

package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeIcon.js

@@ -5,6 +5,7 @@ export default function BatchSetNodeIcon(props) {
   var topo = props.topo;
 
   var setNodeIcon = function setNodeIcon(iconId) {
+    topo.historyManager.beginTransaction();
     var selection = topo.getSelectionModel().getSelection().toArray();
     var nodes = selection.filter(function (element) {
       return isNode(element) && !isGroup(element);
@@ -12,6 +13,7 @@ export default function BatchSetNodeIcon(props) {
     nodes.forEach(function (node) {
       node.setImage(iconId);
     });
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(NodeIconSelect, {

package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js

@@ -87,6 +87,7 @@ export default function BatchSetNodeSize(props) {
       setSize(_extends({}, size, (_extends2 = {}, _extends2[name] = value, _extends2)));
     }
 
+    topo.historyManager.beginTransaction();
     nodes.forEach(function (node) {
       if (name === 'width') {
         if (lock) {
@@ -104,6 +105,7 @@ export default function BatchSetNodeSize(props) {
         node.setHeight(value);
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var onLockChange = function onLockChange(isLock) {

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -38,10 +38,13 @@ export default function MultipleElementPropertyView(props) {
 
   var alignOnChange = function alignOnChange(v) {
     console.log('setAlignmentBySelectionNodes', v);
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
+    topo.historyManager.beginTransaction();
+    topo.getHtTopo().setAlignmentBySelectionNodes(v);
 
     _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
+
+    topo.historyManager.endTransaction();
   }; // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
 
 

package/es/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -68,9 +68,13 @@ export default function Setting(props) {
       height: values.height
     },
     onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
       _onChange('width', size.width);
 
       _onChange('height', size.height);
+
+      topo.historyManager.endTransaction();
     },
     settingRuntimeState: settingRuntimeState
   }))))));

package/es/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -1,8 +1,10 @@
 import _Form from "@alifd/next/es/form";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
 import _Select from "@alifd/next/es/select";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from "react";
 import useHtElement from "../../../../../../common/hooks/useHtElement";
 import textStyles from "../../../../../../common/text.module.scss";
@@ -54,18 +56,44 @@ export default function Data(props) {
   }, [values]);
 
   var setBindType = function setBindType(newBindType) {
+    topo.historyManager.beginTransaction();
+
     _onChange("attrObject.bindType", newBindType);
 
+    topo.historyManager.endTransaction();
+
     if (newBindType === "topo") {//
     }
   };
 
-  var handleBindTopoChange = function handleBindTopoChange(value, data) {
-    // 设置名称为拓扑名称，清空自定义名称
-    node.a("name", data.label);
-    node.a("customName", null);
-    topoEditApi.deleteExLink(node);
-  };
+  var handleBindTopoChange = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, data) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              topo.historyManager.beginTransaction(); // 设置名称为拓扑名称，清空自定义名称
+
+              node.a("name", data.label);
+              node.a("customName", null);
+              _context.next = 5;
+              return topoEditApi.deleteExLink(node);
+
+            case 5:
+              topo.historyManager.endTransaction();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleBindTopoChange(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
   return /*#__PURE__*/React.createElement(_Collapse, {

package/es/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -85,8 +85,15 @@ export default function TextPropertyView(props) {
       minRows: 4,
       maxRows: 4
     },
-    placeholder: "\u6587\u672C\u8F93\u5165"
+    placeholder: "\u6587\u672C\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
-    name: "styleMap.textObj"
+    name: "styleMap.textObj",
+    topo: topo
   })))))));
 }

package/es/core/editor/components/settings/propertyViews/view/BackgroundSize.js

@@ -1,3 +1,5 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import NodeSizeInput from "../../common/NodeSizeInput/NodeSizeInput";
 import useBackgroundSizeConfig from "./hooks/useBackgroundSizeConfig";
@@ -9,13 +11,40 @@ export default function BackgroundSize(props) {
     topo: topo,
     current: backgroundConfig.current
   });
+
+  var setSize = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(size) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              topo.historyManager.beginTransaction();
+              _context.next = 3;
+              return backgroundSizeConfig.setSize(size);
+
+            case 3:
+              topo.historyManager.endTransaction();
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function setSize(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   return /*#__PURE__*/React.createElement(NodeSizeInput, {
     nodeId: backgroundSizeConfig.nodeId,
     value: backgroundSizeConfig.size,
     max: 100000,
     step: 10,
     lockId: "background",
-    onChange: backgroundSizeConfig.setSize,
+    onChange: setSize,
     settingRuntimeState: settingRuntimeState
   });
 }

package/es/core/editor/components/settings/propertyViews/view/GlobalLayout.js

@@ -13,9 +13,11 @@ export default function GlobalLayout(props) {
 
   var onChange = function onChange(data) {
     console.log("handleChange", data);
+    topo.historyManager.beginTransaction();
     setLayout(data);
     var layouType = data.id === "toward" ? "" + data.id + data.options.subId : data.id;
     topo.getHtTopo().layoutInTopo(layouType);
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(LayoutSettings, {

package/es/core/editor/components/settings/propertyViews/view/GlobalNodeLabelStyle.js

@@ -66,6 +66,12 @@ export default function GlobalNodeLabelStyle(props) {
     style: {
       width: '100%',
       marginRight: 8
+    },
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
     }
   }, /*#__PURE__*/React.createElement(Option, {
     value: "\u5B8B\u4F53"
@@ -102,7 +108,15 @@ export default function GlobalNodeLabelStyle(props) {
     }
   }, /*#__PURE__*/React.createElement(ColorPicker, {
     name: "color",
-    align: "br"
+    align: "br",
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   }))))));
 }
 ;

package/es/core/editor/components/settings/propertyViews/view/hooks/useBackgroundSizeConfig.js

@@ -33,7 +33,6 @@ export default (function (props) {
       return;
     }
 
-    console.error(222, e);
     setSize(topo.view.background.getSize());
   };
 

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

@@ -9,6 +9,7 @@ import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import { useState } from "react";
 import { useEffect } from "react";
+import DebugTools from "./widgets/DebugTools";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
@@ -65,7 +66,9 @@ export default function TopoEditorTitleBar(props) {
   }, /*#__PURE__*/React.createElement(_Box, {
     direction: "row",
     spacing: 8
-  }, /*#__PURE__*/React.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(DebugTools, {
+    topo: topo
+  }), /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     className: styles.button,
     onClick: function onClick() {

package/es/core/editor/components/titlebar/widgets/DebugTools.js

@@ -0,0 +1,29 @@
+import _Button from "@alifd/next/es/button";
+import React from 'react';
+export default function DebugTools(props) {
+  var topo = props.topo,
+      style = props.style;
+  var debug = topo.viewProps.debug;
+
+  if (!debug) {
+    return null;
+  }
+
+  var printLog = function printLog() {
+    console.info("HistoryManager " + topo.historyManager.toString(), topo.historyManager.getHistories(), topo.historyManager.htHistoryManager.getHistoryIndex());
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(_Button.Group, null, /*#__PURE__*/React.createElement(_Button, {
+    onClick: function onClick() {
+      return topo.historyManager.undo();
+    }
+  }, "\u56DE\u9000"), /*#__PURE__*/React.createElement(_Button, {
+    onClick: function onClick() {
+      return topo.historyManager.redo();
+    }
+  }, "\u91CD\u505A"), /*#__PURE__*/React.createElement(_Button, {
+    onClick: printLog
+  }, "\u6253\u5370\u65E5\u5FD7")));
+}

package/es/core/hooks/useAlarm.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { useCbbEventListener } from "@riil-frontend/component-riil-event-emitter";
@@ -90,6 +91,21 @@ export default function useAlarm(options) {
     }
   };
 
+  var handleRelateTopoAlarm = function handleRelateTopoAlarm(data) {
+    var relateTopoAlarm = _extends({}, topo.store.getModelState('topoAlarm').relateTopoAlarm);
+
+    data.forEach(function (item) {
+      relateTopoAlarm[item.topoId] = item.alertLevel;
+    });
+    topo.store.getModelDispatchers('topoAlarm').update({
+      relateTopoAlarm: relateTopoAlarm
+    });
+    rlog.debug("\u5173\u8054\u62D3\u6251\u544A\u8B66\uFF1A\u6536\u5230 " + data.length, {
+      received: data,
+      all: relateTopoAlarm
+    });
+  };
+
   useCbbEventListener("topo", {
     name: "topo",
     onMessage: function onMessage(data) {
@@ -99,6 +115,8 @@ export default function useAlarm(options) {
         topo.alarm.handleAlarmEvent(data.data);
       } else if (data.type === "risk") {
         handleRiskData(data.data);
+      } else if (data.type === "relateTopoAlarm") {
+        handleRelateTopoAlarm(data.data);
       }
     }
   });