@riil-frontend/component-topology 2.7.2 → 2.8.0

package/lib/components/TemplateButton/index.module.scss

@@ -1,41 +1,28 @@
 @import "@alifd/next/variables";
 
 .card {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #c4c6cf;
-  width: 120px;
-  height: 136px;
-  background-color: #fff;
-  text-align: center;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
-  vertical-align: middle;
-  margin-right: 12px;
-
-  &:hover, &:focus, &.selected {
-    border-color: $color-brand1-5;
-  }
-
-  &.sizeNormal {
-    width: 120px;
-    height: 136px;
-  }
+}
 
-  &.sizeSmall {
-    width: 50px;
-    height: 50px;
-  }
+.iconWrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
 }
 
 .icon {
-  width: 50%;
+  width: 120px;
 }
 
 .text {
-  font-size: $font-size-body-1;
-  margin-top: 10px;
+  font-size: 18px;
+  margin-top: 16px;
+  padding-bottom: 24px;
   color: $color-text1-3;
   outline: none;
 }

package/lib/components/TemplateSelect/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,30 +17,52 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
 var _TemplateGroup = _interopRequireDefault(require("../TemplateGroup"));
 
+var _TagSelect = _interopRequireDefault(require("../TagSelect"));
+
 var TagGroup = _tag["default"].Group,
     SelectableTag = _tag["default"].Selectable;
 
 var TemplateSelect = function TemplateSelect(props) {
-  return /*#__PURE__*/_react["default"].createElement(_TemplateGroup["default"], props); // const { data = [], size } = props;
+  var _data$filter$;
+
   // return (
-  //   <TagGroup>
-  //     {data.map((item) => (
-  //       <SelectableTag
-  //         key={item.name}
-  //         checked={item.selected}
-  //         onChange={() => {}}
-  //       >
-  //         <TemplateButton
-  //           key={item.id}
-  //           {...item}
-  //           size={size}
-  //         >
-  //           {item.name}
-  //         </TemplateButton>
-  //       </SelectableTag>
-  //     ))}
-  //   </TagGroup>
+  //   <TemplateGroup {...props}/>
   // )
+  var _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps;
+  var value = (_data$filter$ = data.filter(function (item) {
+    return item.selected;
+  })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.id;
+  return /*#__PURE__*/_react["default"].createElement(_TagSelect["default"], {
+    defaultValue: value,
+    dataSource: data.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  });
+  return /*#__PURE__*/_react["default"].createElement(TagGroup, null, data.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(SelectableTag, {
+      key: item.name,
+      checked: item.selected,
+      onChange: function onChange() {}
+    }, /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({
+      key: item.id
+    }, item, {
+      size: size
+    }), item.name));
+  }));
 };
 
 var _default = TemplateSelect;

package/lib/models/linkDynamicStyle.js

@@ -221,13 +221,28 @@ function _default(engine) {
 
                     links = [];
 
-                    if (isEdit && rootState.topoCreateMod.elements.links.length) {
-                      links = rootState.topoCreateMod.elements.links;
-                    } else {
-                      links = rootState.topoMod.topoData.links;
-                    } // 获取属性。无权限的属性为 []
+                    if (!(isEdit && rootState.topoCreateMod.elements.links.length)) {
+                      _context3.next = 9;
+                      break;
+                    }
+
+                    links = rootState.topoCreateMod.elements.links;
+                    _context3.next = 12;
+                    break;
+
+                  case 9:
+                    if (rootState.topoMod.topoData) {
+                      _context3.next = 11;
+                      break;
+                    }
+
+                    return _context3.abrupt("return");
 
+                  case 11:
+                    links = rootState.topoMod.topoData.links;
 
+                  case 12:
+                    // 获取属性。无权限的属性为 []
                     allLinkAttributes = rootState.topoBizMod.attrsAndMetrics; // 告警
 
                     alarmMap = rootState.topoBizMod.alarmDoc; // 如果是显示模式，过滤有告警的链路
@@ -281,7 +296,7 @@ function _default(engine) {
                       engine.view.topoClient.batchSetLineStyle(linkStyleMap);
                     }
 
-                  case 13:
+                  case 19:
                   case "end":
                     return _context3.stop();
                 }

package/lib/models/topoMod.js

@@ -38,14 +38,13 @@ function _default(topoApp) {
       urlParams: {},
       topoLoading: true,
       topoLoadError: false,
-      topoId: '',
-      topoName: '',
-      topoPermission: undefined,
       viewState: 'view',
       // view, create, 2种模式
-      // lastRefresh: undefined,
+      topoId: '',
+      topoName: '',
       topoData: null,
       currentTopo: undefined,
+      topoPermission: undefined,
       currentNode: {
         id: '',
         name: '无数据'
@@ -196,7 +195,10 @@ function _default(topoApp) {
         },
         clearData: function clearData() {
           this.update({
-            topoData: null
+            topoId: '',
+            topoName: '',
+            topoData: null,
+            currentTopo: undefined
           });
         },
         switchToViewMode: function switchToViewMode(playload, rootState) {

package/lib/topoCenter/store/topoTreeMod.js

@@ -21,27 +21,7 @@ var _tree = require("../../utils/tree");
 
 var clone = function clone(data) {
   return JSON.parse(JSON.stringify(data));
-}; // 展开选中项
-
-
-function findSelectedParentIds(data, selectedId) {
-  // 选中 id 为 -1,则没有默认选中项
-  if (selectedId == '-1') return [];
-  var node = {};
-  (0, _tree.loopTree)(data, selectedId, function (item, index, arr, pid) {
-    node = {
-      item: item,
-      pid: pid
-    };
-  });
-  if (!node.item) return [];
-
-  if (node.pid != -1 && node.item.id) {
-    return node.item.type === 0 ? ["" + node.item.id].concat(findSelectedParentIds(data, node.pid)) : [].concat(findSelectedParentIds(data, node.pid));
-  } else {
-    return ["" + node.item.id];
-  }
-}
+};
 /**
  * TODO 导航树相关增删改移到拓扑中心
  */
@@ -94,7 +74,7 @@ function _default(topoApp) {
                       treeData: (0, _tree.treeNodeCount)(treeData),
                       defId: defId,
                       selectedNode: [selectedTopoId],
-                      expandedKeys: findSelectedParentIds(treeData, selectedTopoId)
+                      expandedKeys: (0, _tree.findParentIdsById)(treeData, selectedTopoId)
                     }); // console.log('resTreeData', resTreeData, rootState.topoMod.topoId);
 
 
@@ -383,10 +363,10 @@ function _default(topoApp) {
           }
 
           var expandedKeys = [].concat(treeState.expandedKeys || []);
-          var parentIds = findSelectedParentIds(treeState.treeData, id);
+          var parentIds = (0, _tree.findParentIdsById)(treeState.treeData, id);
           expandedKeys.push.apply(expandedKeys, parentIds);
           this.update({
-            selectedNode: [id],
+            selectedNode: ["" + id],
             expandedKeys: expandedKeys
           });
         }

package/lib/utils/template.js

@@ -41,7 +41,7 @@ var INIT_STATIC_STATE = {
 
 exports.INIT_STATIC_STATE = INIT_STATIC_STATE;
 var DEFAULT_LAYOUT = {
-  id: 'circular'
+  id: 'hierarchical'
 };
 /**
  * 默认容器数据

package/lib/utils/tree.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.findNodeById = findNodeById;
+exports.findParentIdsById = findParentIdsById;
 exports.formatTree = formatTree;
 exports.treeNodeCount = exports.loopTreeFun = exports.loopTreeByKey = exports.loopTree = exports.iconImg = void 0;
 
@@ -103,6 +104,21 @@ function findNodeById(tree, id) {
   });
   return node;
 }
+/**
+ * 按id查找祖先节点id列表
+ */
+
+
+function findParentIdsById(tree, id) {
+  var node = findNodeById(tree, id);
+  var parentId = "" + node.parentId;
+
+  if (parentId === '-1') {
+    return [];
+  }
+
+  return [parentId].concat(findParentIdsById(tree, parentId));
+}
 /**
  * 递归循环遍历树匹配KEY
  * @param {array} json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -44,7 +44,6 @@
     "@ice/store": "^1.4.2",
     "@riil-frontend/component-topo-icon-select": "^1.0.2",
     "@riil-frontend/component-topology-common": "^1.0.0",
-    "@riil-frontend/component-topology-graph": "^2.2.1",
     "@riil-frontend/component-topology-utils": "^2.0.18",
     "classnames": "^2.2.3",
     "prop-types": "^15.5.8",
@@ -68,6 +67,7 @@
     "@riil-frontend/component-row-delete-ballon": "^1.0.2",
     "@riil-frontend/component-table-filter-tags": "latest",
     "@riil-frontend/component-table-layout": "^2.0.2",
+    "@riil-frontend/component-topology-graph": "^2.2.5",
     "@riil-frontend/css": "^2.0.2",
     "@riil-frontend/hooks": "latest",
     "@riil-frontend/next-collapse": "^1.0.1-a.0",
@@ -90,7 +90,8 @@
   },
   "peerDependencies": {
     "@alifd/next": "1.x",
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@riil-frontend/component-topology-graph": "^2.x"
   },
   "componentConfig": {
     "name": "Topology",
@@ -101,6 +102,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.7.2/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.8.0/build/index.html",
   "gitHead": "62eadeca07c85ed047f2e933676f62015eff98cc"
 }