@riil-frontend/component-topology 3.1.9 → 3.1.12

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

@@ -0,0 +1,660 @@
+import _Message from "@alifd/next/es/message";
+import _Table from "@alifd/next/es/table";
+import _extends from "@babel/runtime/helpers/extends";
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import topoService from '@riil-frontend/component-topology-common/es/services/topo';
+import moment from 'moment';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { findItem } from "../../../../../../../utils/topoData";
+import { queryCisByIds } from "../../../../../../services";
+import alarmService from "../../../../../../services/alarm";
+import service from "../../../../../../services/overview";
+import BaseInfoBlock from "./BaseInfoBlock";
+import BlockBox from "./BlockBox";
+import styles from "./index.module.scss";
+import ResourceOverviewMetric from "./ResourceOverviewMetric";
+import useCiAttrAndMetricData from "./useCiAttrAndMetricData"; // url 处理，UICBB 的地址需截取前缀
+
+function formatUrl(url) {
+  var _window, _window$location;
+
+  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) {
+    return url.split(prefix)[1];
+  } else {
+    return url;
+  }
+}
+/**
+ * 资源概览
+ */
+
+
+export default function ResourceOverview(props) {
+  var _viewerProps$resource, _baseInfo$resource;
+
+  var topo = props.topo,
+      id = props.id,
+      type = props.type,
+      ciType = props.ciType,
+      userId = props.userId,
+      viewerProps = props.viewerProps;
+  var resourceOverviewProps = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.resourceOverviewProps) || {};
+  var data = useMemo(function () {
+    return topo.dataModel.getDataById(id);
+  }, [id]);
+  var ciAttrAndMetricData = useCiAttrAndMetricData({
+    topo: topo,
+    id: id
+  });
+
+  var _useState = useState({
+    // 资源
+    resource: {
+      display_name: '',
+      // 资源名称/显示名称
+      link: '' // 资源跳转链接
+
+    },
+    ipv4_address: '',
+    // IP地址
+    asset_number: '',
+    // 资产编号
+    ciName: '',
+    // 资源类型
+    res_address: '',
+    // 资源位置
+    // principal: '', // 负责人
+    // 链路
+    rated_bandwidth: '',
+    // 链路带宽
+    source_ipv4: '',
+    // 源IP地址
+    destination_ipv4: '',
+    // 目的IP地址
+    source_Interface: '',
+    // 源端口
+    destination_Interface: '' // 目的端口
+
+  }),
+      baseInfo = _useState[0],
+      setBaseInfo = _useState[1];
+
+  var _useState2 = useState([]),
+      indicator = _useState2[0],
+      setIndicator = _useState2[1];
+
+  var _useState3 = useState([]),
+      alarmRiskList = _useState3[0],
+      setAlarmRiskList = _useState3[1];
+
+  var _useState4 = useState(false),
+      isAppTopo = _useState4[0],
+      setIsAppTopo = _useState4[1];
+
+  var ciTypeMeta = useMemo(function () {
+    var typeMeta;
+
+    if (ciType === 'network_link') {
+      // 网络链路要按链路类型查询属性、指标
+      var link = topo.dataModel.getDataById(id);
+      var linkConnectType = link.attributes['network_link.connect_type'];
+      typeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
+    } else {
+      typeMeta = topo.ciTyeCache.getCiType(ciType);
+    }
+
+    return typeMeta;
+  }, [id]);
+  useEffect(function () {
+    init();
+  }, [ciAttrAndMetricData, ciTypeMeta, id]);
+
+  function init() {
+    return _init.apply(this, arguments);
+  }
+
+  function _init() {
+    _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _topo$options$resourc, _modelAttributeMap$ow, _modelAttributeMap$, _modelAttributeMap$2, _modelAttributeMap$3, _modelAttributeMap$di, _modelAttributeMap$ip, _modelAttributeMap$as, _modelAttributeMap$5, _modelAttributeMap$6, _modelAttributeMap$so, _attributeMap$source_, _modelAttributeMap$de, _attributeMap$destina;
+
+      var modelMetrics, ciName, modelAttributeMap, domain, displayMetricModels, metricCodes, isAppTopoFlag, attributeMap, metrics, res_address, _attributeMap$, rated_bandwidth, _modelAttributeMap$4;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              console.log('初始化/更新概览 props', props); // 指标模型
+
+              modelMetrics = ciTypeMeta.metrics, ciName = ciTypeMeta.displayName, modelAttributeMap = ciTypeMeta.attributeMap, domain = ciTypeMeta.domain;
+              displayMetricModels = modelMetrics.slice(0, 6);
+
+              if (resourceOverviewProps !== null && resourceOverviewProps !== void 0 && resourceOverviewProps.getMetricCodes) {
+                metricCodes = resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.getMetricCodes({
+                  id: id,
+                  type: type,
+                  ciType: ciType
+                });
+
+                if (metricCodes) {
+                  displayMetricModels = metricCodes.map(function (code) {
+                    return modelMetrics.find(function (item) {
+                      return item.code === code;
+                    });
+                  }).filter(function (item) {
+                    return !!item;
+                  });
+                }
+              }
+
+              displayMetricModels = displayMetricModels.slice(0, 6); // 应用拓扑处理
+
+              isAppTopoFlag = !!((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData);
+              console.log('应用拓扑判断', topo, isAppTopoFlag);
+              setIsAppTopo(isAppTopoFlag);
+
+              if (!isAppTopoFlag) {
+                _context.next = 11;
+                break;
+              }
+
+              initAppTopo(displayMetricModels, modelAttributeMap, ciName, domain);
+              return _context.abrupt("return");
+
+            case 11:
+              // 拓扑（默认） ---------------------------
+              // 基本信息
+              attributeMap = ciAttrAndMetricData.attributeMap, metrics = ciAttrAndMetricData.metrics;
+              console.log('基本信息', attributeMap, modelAttributeMap); // userVisible
+              // 位置
+
+              res_address = false;
+
+              if (!((_modelAttributeMap$ow = modelAttributeMap.owned_computer_room) !== null && _modelAttributeMap$ow !== void 0 && _modelAttributeMap$ow.userVisible)) {
+                _context.next = 20;
+                break;
+              }
+
+              _context.next = 17;
+              return getAddressFormat(attributeMap);
+
+            case 17:
+              res_address = _context.sent;
+              _context.next = 21;
+              break;
+
+            case 20:
+              if ((_modelAttributeMap$ = modelAttributeMap[ciType + ".computer_room"]) !== null && _modelAttributeMap$ !== void 0 && _modelAttributeMap$.userVisible || (_modelAttributeMap$2 = modelAttributeMap[ciType + ".area"]) !== null && _modelAttributeMap$2 !== void 0 && _modelAttributeMap$2.userVisible) {
+                res_address = attributeMap[ciType + ".computer_room "] || attributeMap[ciType + ".area"] ? " " + (((_attributeMap$ = attributeMap[ciType + ".area_object"]) === null || _attributeMap$ === void 0 ? void 0 : _attributeMap$.displayName) || '') + " " + (attributeMap[ciType + ".computer_room"] || '') : false;
+              }
+
+            case 21:
+              // 链路带宽(取实际带宽)
+              rated_bandwidth = false;
+
+              if ((_modelAttributeMap$3 = modelAttributeMap[ciType + ".actual_bandwidth"]) !== null && _modelAttributeMap$3 !== void 0 && _modelAttributeMap$3.userVisible) {
+                rated_bandwidth = attributeMap[ciType + ".actual_bandwidth"] ? attributeMap[ciType + ".actual_bandwidth"] + " " + ((_modelAttributeMap$4 = modelAttributeMap[ciType + ".actual_bandwidth"]) === null || _modelAttributeMap$4 === void 0 ? void 0 : _modelAttributeMap$4.unit) : '';
+              }
+
+              setBaseInfo({
+                // 资源
+                // display_name: modelAttributeMap['display_name'] ? attributeMap.display_name : false,
+                resource: (_modelAttributeMap$di = modelAttributeMap.display_name) !== null && _modelAttributeMap$di !== void 0 && _modelAttributeMap$di.userVisible ? {
+                  display_name: attributeMap.display_name,
+                  // 资源名称/显示名称
+                  link: "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType // 资源跳转链接
+
+                } : false,
+                ipv4_address: (_modelAttributeMap$ip = modelAttributeMap.ipv4_address) !== null && _modelAttributeMap$ip !== void 0 && _modelAttributeMap$ip.userVisible ? attributeMap.ipv4_address : false,
+                asset_number: (_modelAttributeMap$as = modelAttributeMap.asset_number) !== null && _modelAttributeMap$as !== void 0 && _modelAttributeMap$as.userVisible ? attributeMap.asset_number : false,
+                ciName: ciName,
+                res_address: res_address,
+                // principal: modelAttributeMap[`${ciType}.principal`] ? attributeMap[`${ciType}.principal`] : false,
+                // 链路
+                rated_bandwidth: rated_bandwidth,
+                source_ipv4: (_modelAttributeMap$5 = modelAttributeMap[ciType + ".source_ipv4"]) !== null && _modelAttributeMap$5 !== void 0 && _modelAttributeMap$5.userVisible ? attributeMap[ciType + ".source_ipv4"] : false,
+                destination_ipv4: (_modelAttributeMap$6 = modelAttributeMap[ciType + ".destination_ipv4"]) !== null && _modelAttributeMap$6 !== void 0 && _modelAttributeMap$6.userVisible ? attributeMap[ciType + ".destination_ipv4"] : false,
+                source_Interface: (_modelAttributeMap$so = modelAttributeMap.source_id) !== null && _modelAttributeMap$so !== void 0 && _modelAttributeMap$so.userVisible ? (_attributeMap$source_ = attributeMap.source_id_object) === null || _attributeMap$source_ === void 0 ? void 0 : _attributeMap$source_.displayName : false,
+                destination_Interface: (_modelAttributeMap$de = modelAttributeMap.destination_id) !== null && _modelAttributeMap$de !== void 0 && _modelAttributeMap$de.userVisible ? (_attributeMap$destina = attributeMap.destination_id_object) === null || _attributeMap$destina === void 0 ? void 0 : _attributeMap$destina.displayName : false
+              }); // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
+
+              setIndicator(displayMetricModels.map(function (item) {
+                var _findItem;
+
+                return _extends({}, item, {
+                  value: ((_findItem = findItem(metrics, 'code', item.code)) === null || _findItem === void 0 ? void 0 : _findItem.value) || ''
+                });
+              })); // 资源-告警/风险
+
+              getAlarmRiskData(id);
+
+            case 26:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _init.apply(this, arguments);
+  }
+
+  function initAppTopo(_x, _x2, _x3, _x4) {
+    return _initAppTopo.apply(this, arguments);
+  } // 获取属性信息（应用拓扑）
+
+
+  function _initAppTopo() {
+    _initAppTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(topModelMetrics, modelAttributeMap, ciName, domain) {
+      var _topo$options$resourc2, _modelAttributeMap$ow2, _modelAttributeMap$7, _modelAttributeMap$8, _modelAttributeMap$di2, _modelAttributeMap$ip2, _modelAttributeMap$as2, _alarmList;
+
+      var _yield$topo$options$r, metrics, alarmList, attributeMap, res_address, _attributeMap$2;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              topo.resourceOverviewDrawer = {
+                refreshData: function refreshData() {
+                  init();
+                }
+              };
+              _context2.next = 3;
+              return (_topo$options$resourc2 = topo.options.resourceOverviewDrawer) === null || _topo$options$resourc2 === void 0 ? void 0 : _topo$options$resourc2.getData({
+                id: id,
+                metrics: topModelMetrics
+              });
+
+            case 3:
+              _yield$topo$options$r = _context2.sent;
+              metrics = _yield$topo$options$r.metrics;
+              alarmList = _yield$topo$options$r.alarms;
+              console.log('应用拓扑 参数获取', metrics, alarmList);
+              _context2.next = 9;
+              return getAttribute(id);
+
+            case 9:
+              attributeMap = _context2.sent;
+              // 位置
+              res_address = false;
+
+              if (!((_modelAttributeMap$ow2 = modelAttributeMap.owned_computer_room) !== null && _modelAttributeMap$ow2 !== void 0 && _modelAttributeMap$ow2.userVisible)) {
+                _context2.next = 17;
+                break;
+              }
+
+              _context2.next = 14;
+              return getAddressFormat(attributeMap);
+
+            case 14:
+              res_address = _context2.sent;
+              _context2.next = 18;
+              break;
+
+            case 17:
+              if ((_modelAttributeMap$7 = modelAttributeMap[ciType + ".computer_room"]) !== null && _modelAttributeMap$7 !== void 0 && _modelAttributeMap$7.userVisible || (_modelAttributeMap$8 = modelAttributeMap[ciType + ".area"]) !== null && _modelAttributeMap$8 !== void 0 && _modelAttributeMap$8.userVisible) {
+                res_address = attributeMap[ciType + ".computer_room "] || attributeMap[ciType + ".area"] ? " " + (((_attributeMap$2 = attributeMap[ciType + ".area_object"]) === null || _attributeMap$2 === void 0 ? void 0 : _attributeMap$2.displayName) || '') + " " + (attributeMap[ciType + ".computer_room"] || '') : false;
+              }
+
+            case 18:
+              setBaseInfo({
+                // 资源
+                // display_name: modelAttributeMap['display_name'] ? attributeMap.display_name : false,
+                resource: (_modelAttributeMap$di2 = modelAttributeMap.display_name) !== null && _modelAttributeMap$di2 !== void 0 && _modelAttributeMap$di2.userVisible ? {
+                  display_name: attributeMap.display_name,
+                  // 资源名称/显示名称
+                  link: "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType // 资源跳转链接
+
+                } : false,
+                ipv4_address: (_modelAttributeMap$ip2 = modelAttributeMap.ipv4_address) !== null && _modelAttributeMap$ip2 !== void 0 && _modelAttributeMap$ip2.userVisible ? attributeMap.ipv4_address : false,
+                asset_number: (_modelAttributeMap$as2 = modelAttributeMap.asset_number) !== null && _modelAttributeMap$as2 !== void 0 && _modelAttributeMap$as2.userVisible ? attributeMap.asset_number : false,
+                ciName: ciName,
+                res_address: res_address // principal: modelAttributeMap[`${ciType}.principal`] ? attributeMap[`${ciType}.principal`] : false,
+
+              });
+              setIndicator(topModelMetrics.map(function (item) {
+                return _extends({}, item, {
+                  value: metrics[item.code] || ''
+                });
+              }));
+              alarmList = ((_alarmList = alarmList) === null || _alarmList === void 0 ? void 0 : _alarmList.map(function (item) {
+                return {
+                  type: 'alarm',
+                  icon: 'gaojing-3',
+                  className: "alarm-color-icon-lv" + item.alertLevel,
+                  title: "[" + item.alertObject + "] " + item.alertTitle,
+                  link: "/default/pagecenter/alertDetail/view/" + item.alertId + "?alertId=" + item.alertId + "&resId=" + item.ciId + "&title=" + item.alertObject + "&ruleId=" + item.ruleId,
+                  time: item.createTime,
+                  status: item.status,
+                  params: [{
+                    alertId: item.alertId,
+                    status: 'dealing',
+                    userId: userId,
+                    isBaseAlert: false
+                  }]
+                };
+              })) || [];
+              setAlarmRiskList(alarmList);
+
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _initAppTopo.apply(this, arguments);
+  }
+
+  function getAttribute(_x5) {
+    return _getAttribute.apply(this, arguments);
+  } // 获取地址信息：机房 机柜 起始U-结束U
+
+
+  function _getAttribute() {
+    _getAttribute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
+      var res, _ref2, attributes, attributeMap;
+
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return topoService.ciInfo.batchQueryCiInfo({
+                ciId: [{
+                  ciId: id,
+                  operation: 'delete'
+                }],
+                codes: [],
+                relationId: []
+              });
+
+            case 2:
+              res = _context3.sent;
+              _ref2 = res[0] || {}, attributes = _ref2.attributes;
+              attributeMap = {};
+              attributes.forEach(function (item) {
+                attributeMap[item.code] = item.value;
+              });
+              return _context3.abrupt("return", attributeMap);
+
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+    return _getAttribute.apply(this, arguments);
+  }
+
+  function getAddressFormat(_x6) {
+    return _getAddressFormat.apply(this, arguments);
+  } // 获取告警/风险信息
+
+
+  function _getAddressFormat() {
+    _getAddressFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref) {
+      var owned_computer_room, owned_cabinet, start_u_location, end_u_location, address, _res$find, _res$find$attributes, _res$find2, _res$find2$attributes, res, u;
+
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              owned_computer_room = _ref.owned_computer_room, owned_cabinet = _ref.owned_cabinet, start_u_location = _ref.start_u_location, end_u_location = _ref.end_u_location;
+              console.log('获取地址信息：', {
+                owned_computer_room: owned_computer_room,
+                owned_cabinet: owned_cabinet,
+                start_u_location: start_u_location,
+                end_u_location: end_u_location
+              });
+              address = '';
+
+              if (!(owned_computer_room && owned_cabinet)) {
+                _context4.next = 8;
+                break;
+              }
+
+              _context4.next = 6;
+              return queryCisByIds([owned_computer_room, owned_cabinet]);
+
+            case 6:
+              res = _context4.sent;
+              address = (((_res$find = res.find(function (item) {
+                return item.id === owned_computer_room;
+              })) === null || _res$find === void 0 ? void 0 : (_res$find$attributes = _res$find.attributes) === null || _res$find$attributes === void 0 ? void 0 : _res$find$attributes.display_name) || '') + " " + (((_res$find2 = res.find(function (item) {
+                return item.id === owned_cabinet;
+              })) === null || _res$find2 === void 0 ? void 0 : (_res$find2$attributes = _res$find2.attributes) === null || _res$find2$attributes === void 0 ? void 0 : _res$find2$attributes.display_name) || '');
+
+            case 8:
+              u = '';
+
+              if (start_u_location || end_u_location) {
+                u = (start_u_location || '') + "-" + (end_u_location || '');
+              }
+
+              return _context4.abrupt("return", address || u ? "" + (address || '') + (u ? " " + u : '') : '');
+
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+    return _getAddressFormat.apply(this, arguments);
+  }
+
+  function getAlarmRiskData(_x7) {
+    return _getAlarmRiskData.apply(this, arguments);
+  } // 告警table列配置
+
+
+  function _getAlarmRiskData() {
+    _getAlarmRiskData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id) {
+      var _yield$alarmService$g, alarmList, _yield$service$getRis, riskList;
+
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return alarmService.getAlarmByIds([id], {
+                alertStatusList: ['toDeal', 'dealing'],
+                // toDeal: 待处理, dealing：处理中
+                pageNum: 1,
+                pageSize: 999,
+                sortField: 'alertLevel',
+                sortOrder: 'desc'
+              });
+
+            case 2:
+              _yield$alarmService$g = _context5.sent;
+              alarmList = _yield$alarmService$g.datas;
+              alarmList = alarmList.map(function (item) {
+                return {
+                  type: 'alarm',
+                  icon: 'gaojing-3',
+                  className: "alarm-color-icon-lv" + item.alertLevel,
+                  title: "[" + item.alertObject + "] " + item.alertTitle,
+                  link: "/default/pagecenter/alertDetail/view/" + item.alertId + "?alertId=" + item.alertId + "&resId=" + item.ciId + "&title=" + item.alertObject + "&ruleId=" + item.ruleId,
+                  time: item.createTime,
+                  status: item.status,
+                  params: [{
+                    alertId: item.alertId,
+                    status: 'dealing',
+                    userId: userId,
+                    isBaseAlert: false
+                  }]
+                };
+              });
+              _context5.next = 7;
+              return service.getRiskByIds({
+                ciIdList: [id],
+                statusList: ['toDeal', 'dealing'],
+                current: 1,
+                pageSize: 999
+              });
+
+            case 7:
+              _yield$service$getRis = _context5.sent;
+              riskList = _yield$service$getRis.content;
+              riskList = riskList.map(function (item) {
+                return {
+                  type: 'risk',
+                  icon: 'Overall_risk_full',
+                  className: 'risk-icon',
+                  title: item.itemName,
+                  link: "/default/inspectionTaskList/inspectionReport?title=" + item.ciName + "&reportId=" + item.executeId + "&reportTime=" + item.executeTime + "&reportType=" + item.viewType + "&reportName=" + item.ciName,
+                  time: item.firstFoundTime
+                };
+              });
+              console.log('告警和风险', alarmList, riskList);
+              setAlarmRiskList([].concat(alarmList, riskList));
+
+            case 12:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+    return _getAlarmRiskData.apply(this, arguments);
+  }
+
+  var columns = [{
+    title: '描述',
+    dataIndex: 'title',
+    key: 'title',
+    cell: function cell(value, index, record) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles['alarm-title'],
+        title: value
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: record.icon,
+        size: "xs",
+        className: styles['alarm-color-icon'] + " " + record.className
+      }), /*#__PURE__*/React.createElement(Link, {
+        className: styles.link,
+        to: formatUrl(record.link)
+      }, value));
+    }
+  }, {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+    width: 144,
+    cell: function cell(value, index, record) {
+      return /*#__PURE__*/React.createElement("div", {
+        title: moment(value).format('YYYY-MM-DD HH:mm:ss')
+      }, moment(value).format('YYYY-MM-DD HH:mm:ss'));
+    }
+  }, {
+    title: '操作',
+    dataIndex: 'status',
+    key: 'status',
+    width: 64,
+    cell: function cell(status, index, record) {
+      if (record.type === 'alarm') {
+        return status === 'toDeal' ? /*#__PURE__*/React.createElement(_Button, {
+          text: true,
+          type: "primary",
+          onClick: function onClick() {
+            return alarmRiskOperation(record.type, record.params);
+          }
+        }, "\u53D7\u7406") : /*#__PURE__*/React.createElement(_Button, {
+          disabled: true,
+          text: true,
+          type: "primary"
+        }, "\u5DF2\u53D7\u7406");
+      } else {
+        // return <Button text type="primary" onClick={() => alarmRiskOperation(record.type, record)}>受理</Button>
+        return '';
+      }
+    }
+  }]; // 告警/风险 操作 (受理)
+
+  function alarmRiskOperation(_x8, _x9) {
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
+  function _alarmRiskOperation() {
+    _alarmRiskOperation = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(type, params) {
+      var res, _topo$ciTyeCache$getC, modelMetrics, ciName, modelAttributeMap, domain, topModelMetrics;
+
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              if (!(type === 'alarm')) {
+                _context6.next = 6;
+                break;
+              }
+
+              _context6.next = 3;
+              return service.handleAlarm(params);
+
+            case 3:
+              res = _context6.sent;
+
+              _Message.success('受理成功');
+
+              if (isAppTopo) {
+                _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType), modelMetrics = _topo$ciTyeCache$getC.metrics, ciName = _topo$ciTyeCache$getC.displayName, modelAttributeMap = _topo$ciTyeCache$getC.attributeMap, domain = _topo$ciTyeCache$getC.domain;
+                topModelMetrics = modelMetrics.slice(0, 6);
+                initAppTopo(topModelMetrics, modelAttributeMap, ciName, domain);
+              } else {
+                getAlarmRiskData(id);
+              }
+
+            case 6:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    }));
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
+  var elementData = {
+    id: id,
+    ciType: ciType,
+    type: type,
+    name: baseInfo === null || baseInfo === void 0 ? void 0 : (_baseInfo$resource = baseInfo.resource) === null || _baseInfo$resource === void 0 ? void 0 : _baseInfo$resource.display_name
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['resource-overview']
+  }, /*#__PURE__*/React.createElement(BaseInfoBlock, _extends({
+    data: elementData,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: baseInfo
+  }, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps)), /*#__PURE__*/React.createElement(BlockBox, {
+    headerTitle: "\u5173\u952E\u6307\u6807"
+  }, /*#__PURE__*/React.createElement(ResourceOverviewMetric, {
+    topo: topo,
+    type: type,
+    x: {
+      data: data,
+      ciAttrAndMetricData: ciAttrAndMetricData
+    },
+    data: indicator
+  })), /*#__PURE__*/React.createElement(BlockBox, {
+    headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.alarm
+  }, /*#__PURE__*/React.createElement(_Table, {
+    hasBorder: false,
+    fixedHeader: true,
+    columns: columns,
+    maxBodyHeight: "auto",
+    dataSource: alarmRiskList,
+    emptyContent: /*#__PURE__*/React.createElement("div", {
+      className: styles['no-data']
+    }, "\u6682\u65E0\u6570\u636E")
+  }))));
+}