@riil-frontend/component-topology 2.14.2-alpha.2 → 2.14.2-alpha.6

package/lib/core/models/common/Alarm.js

@@ -136,7 +136,7 @@ var Alarm = /*#__PURE__*/function () {
 
   _proto.hmGetTopoAlarm = /*#__PURE__*/function () {
     var _hmGetTopoAlarm = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(id) {
-      var _this$topoApp$store$g, data, resAndMetrics, topoData, _this$getState, alarmIsOpened, alarmOpening, linkDynamicStyleDispatcher, nodes, links, alarmCiDoc, cids, componentIds, ids, idsx, endTime, startTime, parms, result;
+      var _this$topoApp$store$g, data, resAndMetrics, topoData, _this$getState, alarmIsOpened, alarmOpening, linkDynamicStyleDispatcher, alarmCiDoc, cids, componentIds, ids, idsx, endTime, startTime, parms, result;
 
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
@@ -144,22 +144,22 @@ var Alarm = /*#__PURE__*/function () {
             case 0:
               _this$topoApp$store$g = this.topoApp.store.getState().topoMod, data = _this$topoApp$store$g.data, resAndMetrics = _this$topoApp$store$g.resAndMetrics, topoData = _this$topoApp$store$g.topoData;
               _this$getState = this.getState(), alarmIsOpened = _this$getState.alarmIsOpened, alarmOpening = _this$getState.alarmOpening;
-              linkDynamicStyleDispatcher = this.topoApp.store.getModel("linkDynamicStyle")[1];
-              nodes = data.nodes, links = data.links;
+              linkDynamicStyleDispatcher = this.topoApp.store.getModel("linkDynamicStyle")[1]; // const { nodes, links } = data;
+
               alarmCiDoc = resAndMetrics.alarmCiDoc;
 
               _rlog["default"].debug("获取告警列表--resAndMetrics,topoData,data", this.topoApp, resAndMetrics, topoData, data);
 
               cids = Object.keys(alarmCiDoc);
-              _context2.next = 9;
+              _context2.next = 8;
               return _topo["default"].getCisComponentIds(cids);
 
-            case 9:
+            case 8:
               componentIds = _context2.sent;
               ids = [].concat(cids);
               idsx = Object.keys(componentIds).map(function (k) {
                 ids = [].concat(ids, componentIds[k]);
-                return '';
+                return "";
               });
 
               _rlog["default"].debug("获取告警列表", componentIds, alarmCiDoc, ids);
@@ -184,7 +184,7 @@ var Alarm = /*#__PURE__*/function () {
               };
 
               if (!(ids.length === 0)) {
-                _context2.next = 19;
+                _context2.next = 18;
                 break;
               }
 
@@ -194,11 +194,11 @@ var Alarm = /*#__PURE__*/function () {
               });
               return _context2.abrupt("return");
 
-            case 19:
-              _context2.next = 21;
+            case 18:
+              _context2.next = 20;
               return _topo["default"].getAlarmByIds(parms);
 
-            case 21:
+            case 20:
               result = _context2.sent;
 
               _rlog["default"].debug("getAlarmById-result", result); // if (alarmIsOpened) {
@@ -212,7 +212,7 @@ var Alarm = /*#__PURE__*/function () {
                 alarmPanelIsOpen: result.datas.length > 0
               });
 
-            case 24:
+            case 23:
             case "end":
               return _context2.stop();
           }
@@ -239,7 +239,7 @@ var Alarm = /*#__PURE__*/function () {
     var _openTopoAlarm = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(id) {
       var _this = this;
 
-      var _this$getState2, alarmOpening, topoAlarmIsOpen;
+      var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
 
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
@@ -260,10 +260,15 @@ var Alarm = /*#__PURE__*/function () {
               this.updateState({
                 alarmOpening: true
               });
-              _context3.next = 7;
+              alarmDispatchers = this.topoApp.store.getModelDispatchers("topoAlarm");
+              _context3.next = 8;
+              return alarmDispatchers.resetAlarmDoc();
+
+            case 8:
+              _context3.next = 10;
               return _topo["default"].openTopoAlarm(id);
 
-            case 7:
+            case 10:
               // rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
               _componentRiilEventEmitter.EE.on("topo", "topo", function (data, other) {
                 _rlog["default"].debug("openTopoAlarm 获取初始化告警------收到信息", data);
@@ -276,7 +281,7 @@ var Alarm = /*#__PURE__*/function () {
                 alarmIsOpened: true
               });
 
-            case 9:
+            case 12:
             case "end":
               return _context3.stop();
           }
@@ -421,34 +426,31 @@ var Alarm = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _getAlarmByEE = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(alertData) {
-      var _this$getState4, alarmIsOpened, alarmOpening, bizState, bizDispatchers, alarmDispatchers, linkDynamicStyleDispatcher, al, alarmList;
+      var _this$getState4, alarmIsOpened, resAndMetrics, resIdsList, alarmCiDoc, alarmDispatchers, linkDynamicStyleDispatcher, sendAl, alarmList;
 
       return _regenerator["default"].wrap(function _callee7$(_context7) {
         while (1) {
           switch (_context7.prev = _context7.next) {
             case 0:
-              _this$getState4 = this.getState(), alarmIsOpened = _this$getState4.alarmIsOpened, alarmOpening = _this$getState4.alarmOpening; // const { viewState } = this.topoApp.store.getState().topoMod;
-
-              bizState = this.topoApp.store.getState().topoBizMod;
-              bizDispatchers = this.topoApp.store.getModelDispatchers("topoBizMod");
+              _this$getState4 = this.getState(), alarmIsOpened = _this$getState4.alarmIsOpened;
+              resAndMetrics = this.topoApp.store.getState().topoMod.resAndMetrics;
+              resIdsList = resAndMetrics.resIdsList, alarmCiDoc = resAndMetrics.alarmCiDoc;
               alarmDispatchers = this.topoApp.store.getModelDispatchers("topoAlarm");
               linkDynamicStyleDispatcher = this.topoApp.store.getModelDispatchers("linkDynamicStyle"); // 添加事件
-              // const { type, data: alertData } = data;
 
-              console.log("getAlarmByEE", alertData, this.topoApp.store);
+              console.log("getAlarmByEE-接收到推送的原始告警信息", alertData);
 
               if (!(0, _utils.isAvailableArray)(alertData)) {
-                _context7.next = 14;
+                _context7.next = 15;
                 break;
               }
 
-              _rlog["default"].debug("useAlarm.getAlarmByEE 告警原始数据", alertData);
-
-              al = alertData.map(function (item, index) {
+              sendAl = [];
+              alertData.map(function (item, index) {
                 var _item$resourceId;
 
                 var ciId = (_item$resourceId = item.resourceId) !== null && _item$resourceId !== void 0 ? _item$resourceId : item.ciId;
-                return {
+                var obj = {
                   id: ciId,
                   level: item.alertLevel,
                   alertId: item.alertId,
@@ -456,18 +458,29 @@ var Alarm = /*#__PURE__*/function () {
                   obj: item,
                   info: item.alertType
                 };
+
+                if (resIdsList.indexOf(ciId) >= 0) {
+                  sendAl.push(obj);
+                }
+
+                return obj;
               }); // rlog.debug("before-combAlarmData", al, bizState);
 
-              _context7.next = 11;
+              if (!(sendAl.length > 0)) {
+                _context7.next = 15;
+                break;
+              }
+
+              _rlog["default"].debug("过滤掉非本拓扑的告警信息 告警开关-推送告警到ht-alarmIsOpened-sendAl", alarmIsOpened, sendAl);
+
+              _context7.next = 13;
               return alarmDispatchers.combAlarmData({
-                alarmdata: al
+                alarmdata: sendAl
               });
 
-            case 11:
+            case 13:
               alarmList = _context7.sent;
 
-              _rlog["default"].debug("useAlarm.getAlarmByEE 推送告警到ht", alarmIsOpened, alarmList, bizState);
-
               if (alarmIsOpened) {
                 this.topoApp.loadAlarm(alarmList);
                 this.hmGetTopoAlarm(); // 告警变化后，刷新链路动态样式
@@ -475,7 +488,7 @@ var Alarm = /*#__PURE__*/function () {
                 linkDynamicStyleDispatcher.execute();
               }
 
-            case 14:
+            case 15:
             case "end":
               return _context7.stop();
           }

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

@@ -15,7 +15,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
 
-var _topoData = require("../../../utils/topoData");
+var interfaceTypeMap = {
+  'network.interface': {
+    displayName: '网络接口'
+  }
+};
 
 function mergeLinksData(links, relationDetails) {
   var relationDoc = {};
@@ -26,10 +30,16 @@ function mergeLinksData(links, relationDetails) {
   });
   return links.map(function (link) {
     var relation = relationDoc[link.id];
+    var attributes = (0, _extends2["default"])({}, relation === null || relation === void 0 ? void 0 : relation.attributes); // 接口翻译
+
     return (0, _extends2["default"])({}, link, {
       ciType: relation === null || relation === void 0 ? void 0 : relation.typeCode,
-      ciId: relation.id,
       name: relation === null || relation === void 0 ? void 0 : relation.attributes.name,
+      attributes: (0, _extends2["default"])({}, attributes, {
+        source_type_object: interfaceTypeMap[attributes.source_type],
+        destination_type_object: interfaceTypeMap[attributes.destination_type]
+      }),
+      ciId: relation.id,
       detail: relation
     });
   });

package/lib/core/utils/exportData.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = _default;
+
+var _request = require("@riil-frontend/component-topology-common/es/utils/request");
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+function _default(topo) {
+  var _topo$store$getModelS = topo.store.getModelState('topoMod').data,
+      nodes = _topo$store$getModelS.nodes,
+      links = _topo$store$getModelS.links;
+  var params = {
+    id: topo.id,
+    'nodes': nodes.map(function (node) {
+      var element = topo.getDataModel().getDataByTag(node.id);
+      return {
+        'id': node.id,
+        'imageName': element.a('customName') || element.a('name') || element.getName()
+      };
+    }),
+    'linkes': links.map(function (link) {
+      var id = link.id,
+          source = link.source,
+          target = link.target,
+          interfaceSource = link.interfaceSource,
+          interfaceTarget = link.interfaceTarget;
+      return {
+        id: id,
+        source: source,
+        target: target,
+        interfaceSource: interfaceSource,
+        interfaceTarget: interfaceTarget
+      };
+    })
+  };
+
+  _rlog["default"].error('导出数据', params);
+
+  (0, _request.getRequest)().post('/topo/v1/api/structure/excel', params);
+}

package/lib/core/utils/linkPollingAttributesAdapter.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _default = function _default(first) {
+  ;
+};
+
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/BaseInfo/components/ResourceOverview/index.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ResourceOverview;
+
+var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
+
+var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+
+var _topoData = require("../../../../../../../utils/topoData");
+
+var _NoDataPage = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/components/NoDataPage"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+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; }
+
+// import ResourceDiplayInfoSetting from './Setting';
+// bimport '@riil-frontend/css/lib/index.scss';
+// 关键指标
+function indicatorRander(data) {
+  console.log('indicatorRander', data);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].indicator
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].row
+  }, data.slice(0, 3).map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].item,
+      key: item.code
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].content
+    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].label
+    }, item.name));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].row
+  }, data.slice(3, 6).map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].item,
+      key: item.code
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].content
+    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].label
+    }, item.name));
+  })));
+}
+/**
+ * 资源概览
+ */
+
+
+function ResourceOverview(props) {
+  var topo = props.topo,
+      id = props.id,
+      ciType = props.ciType;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
+      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
+
+  var _useState = (0, _react.useState)({
+    display_name: '',
+    // 资源名称/显示名称
+    ipv4_address: '',
+    // IP地址
+    asset_number: '',
+    // 资产编号
+    type: '',
+    // 资源类型
+    b: '',
+    // 资源位置
+    c: '' // 责任人
+
+  }),
+      baseInfo = _useState[0],
+      setBaseInfo = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      indicator = _useState2[0],
+      setIndicator = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    init();
+  }, [attrsAndMetrics]);
+
+  function init() {
+    var _findItem2, _findItem3, _findItem4, _findItem5;
+
+    // 资源-基本信息
+    console.log('资源-基本信息------------------------', id, attrsAndMetrics);
+
+    var _findItem = (0, _topoData.findItem)(attrsAndMetrics, 'id', id),
+        attributes = _findItem.attributes,
+        metrics = _findItem.metrics;
+
+    console.log('000', (0, _topoData.findItem)(attrsAndMetrics, 'id', id));
+    console.log('111', attributes, (0, _topoData.findItem)(attributes, 'code', 'display_name'));
+    setBaseInfo({
+      display_name: (_findItem2 = (0, _topoData.findItem)(attributes, 'code', 'display_name')) === null || _findItem2 === void 0 ? void 0 : _findItem2.value,
+      ipv4_address: (_findItem3 = (0, _topoData.findItem)(attributes, 'code', 'ipv4_address')) === null || _findItem3 === void 0 ? void 0 : _findItem3.value,
+      asset_number: (_findItem4 = (0, _topoData.findItem)(attributes, 'code', 'asset_number')) === null || _findItem4 === void 0 ? void 0 : _findItem4.value,
+      type: (_findItem5 = (0, _topoData.findItem)(attributes, 'code', 'type')) === null || _findItem5 === void 0 ? void 0 : _findItem5.value
+    }); // 链路-基本信息
+    // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
+
+    console.log('资源/链路-关键指标------------------------', id, metrics);
+
+    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
+        modelMetrics = _topo$ciTyeCache$getC.metrics;
+
+    setIndicator(modelMetrics.slice(0, 6).map(function (item) {
+      var _findItem6;
+
+      return (0, _extends2["default"])({}, item, {
+        value: (_findItem6 = (0, _topoData.findItem)(metrics, 'code', item.code)) === null || _findItem6 === void 0 ? void 0 : _findItem6.value
+      });
+    }));
+  }
+
+  var topoBizMod = topo.store.useModelState('topoBizMod');
+  (0, _react.useEffect)(function () {
+    console.log('topoBizMod', topoBizMod);
+  }, [topoBizMod]);
+  var columns = [{
+    title: '事件',
+    dataIndex: 'a',
+    key: 'a' // width: 144,
+    // cell: (alertTitle, index, record) => (
+    //   <Link
+    //     to={`/default/pagecenter/${PAGE_TYPE.ALERT_DETAIL}/view/${record.alertId}?alertId=${record.alertId}&resId=${record.ciId}&title=${record.alertObject}`}
+    //   >
+    //     <div title={alertTitle}>{alertTitle}</div>
+    //   </Link>
+    // ),
+
+  }, {
+    title: '时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 128 // cell: (createTime, index, record) => (
+    //   <div title={moment(createTime).format('YYYY-MM-DD HH:mm')}>
+    //     {moment(createTime).format('YYYY-MM-DD HH:mm')}
+    //   </div>
+    // ),
+
+  }, {
+    title: '操作',
+    dataIndex: 'alertType',
+    key: 'alertType',
+    width: 64 // cell: (alertType, index, record) => (
+    //   <div title={alertType}>{alertType}</div>
+    // ),
+
+  }];
+  var dataSource = [{
+    id: 1,
+    a: 12312
+  }, {
+    id: 2,
+    a: 12312
+  }, {
+    id: 3,
+    a: 12312
+  }, {
+    id: 4,
+    a: 12312
+  }, {
+    id: 5,
+    a: 12312
+  }, {
+    id: 6,
+    a: 12312
+  }, {
+    id: 7,
+    a: 12312
+  }, {
+    id: 8,
+    a: 12312
+  }, {
+    id: 9,
+    a: 12312
+  }, {
+    id: 10,
+    a: 12312
+  }];
+
+  function BaseInfo(type, data) {}
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['resource-overview']
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['block-box']
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "ver"
+  }), "\u57FA\u672C\u4FE1\u606F"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].body
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['base-info']
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].row
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.display_name)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "IP\u5730\u5740\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.ipv4_address))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].row
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "\u8D44\u4EA7\u7F16\u53F7\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.asset_number)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "\u8D44\u6E90\u7C7B\u578B\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.type))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].row
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "\u8D44\u6E90\u4F4D\u7F6E\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.b)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].item
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].label
+  }, "\u8D23\u4EFB\u4EBA\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: _indexModule["default"].content
+  }, baseInfo.c)))))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['block-box']
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "ver"
+  }), "\u5173\u952E\u6307\u6807"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].body
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].indicator
+  }, indicatorRander(indicator)))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['block-box']
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "ver"
+  }), "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].body
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].alarm
+  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
+    hasBorder: false,
+    columns: columns,
+    dataSource: dataSource,
+    emptyContent: /*#__PURE__*/_react["default"].createElement(_NoDataPage["default"], {
+      type: "table"
+    })
+  })))));
+}
+
+;

package/lib/core/viewer/components/plugins/BaseInfo/components/ResourceOverview/index.module.scss

@@ -0,0 +1,73 @@
+@import "~@alifd/next/variables.scss";
+
+.resource-overview {
+  .block-box {
+    color: #78849c;
+    overflow: hidden;
+    .title {
+      height: 20px;
+      line-height: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #4d6277;
+      margin-top: 16px;
+      :global {
+        .#{$css-prefix}divider-ver {
+          height: 1em;
+        }
+      }
+    }
+  }
+  .base-info {
+    margin-top: 16px;
+    .row {
+      display: flex;
+      margin-bottom: 8px;
+      .item {
+        width: 220px;
+        margin-right: 25px;
+      }
+    }
+  }
+  .indicator {
+    width: 525px;
+    margin: 12px 0 8px;
+    .row {
+      display: flex;
+      border-bottom: 1px solid #f2f5fa;
+      &:last-child {
+        border: none;
+      }
+      .item {
+        width: 175px;
+        height: 100px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        border-right: 1px solid #f2f5fa;
+        &:last-child {
+          border: none;
+        }
+        .content {
+          margin-top: 19px;
+          height: 32px;
+          line-height: 32px;
+          font-size: 32px;
+          color: #4d6277;
+        }
+        .label {
+          margin-top: 12px;
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #78849c;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+  .alarm{
+    margin-top: 12px;
+  }
+}