feat: add ec_realtimeinfo

.umirc.js

@@ -102,8 +102,8 @@ export default {
     ],
     '/extend-components': [
       {
-        title: '数据展示',
-        children: ['EC_DeviceTree', 'EC_QuotaSelect', 'EC_HistoryInfo'],
+        title: '业务数据展示',
+        children: ['EC_DeviceTree', 'EC_QuotaSelect', 'EC_HistoryInfo', 'EC_RealTimeInfo'],
       },
     ],
   },

package.json

@@ -138,7 +138,7 @@
     "registry": "https://g.civnet.cn:4873"
   },
   "dependencies": {
-    "@wisdom-components/basictable": "^1.4.5",
+    "@wisdom-components/basictable": "^1.5.5",
     "@wisdom-components/empty": "^1.3.9",
     "@wisdom-components/timerangepicker": "^1.3.4",
     "@wisdom-utils/utils": "0.0.46",

packages/extend-components/EC_DeviceTree/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```
-const ECDeviceTree = require('@wisdom-components/ec_devicetree');
+import ECDeviceTree from '@wisdom-components/ec_devicetree';
 
 // TODO: DEMONSTRATE API
 ```

packages/extend-components/EC_HistoryInfo/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```
-const ECHistoryInfo = require('@wisdom-components/ec_historyinfo');
+import ECHistoryInfo from '@wisdom-components/ec_historyinfo';
 
 // TODO: DEMONSTRATE API
 ```

packages/extend-components/EC_HistoryInfo/src/EC_HistoryInfo.md

 ---
-title: EC-HistoryInfo - 历史数据查看
+title: EC_HistoryInfo - 历史数据查看
 nav:
   title: 基础组件
   path: /extend-components

packages/extend-components/EC_QuotaSelect/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```
-const ECQuotaSelect = require('@wisdom-components/ec_quotaselect');
+import ECQuotaSelect from '@wisdom-components/ec_quotaselect';
 
 // TODO: DEMONSTRATE API
 ```

packages/extend-components/EC_QuotaSelect/src/EC_QuotaSelect.md

 ---
-title: EC-QuotaSelect - 指标选择
+title: EC_QuotaSelect - 指标选择
 nav:
   title: 业务组件
   path: /extend-components

packages/extend-components/EC_RealTimeInfo/README.md

+# `@wisdom-components/ec_realtimeinfo`
+
+> TODO: description
+
+## Usage
+
+```
+import ECRealTimeInfo from '@wisdom-components/ec_realtimeinfo';
+
+// TODO: DEMONSTRATE API
+```

packages/extend-components/EC_RealTimeInfo/package.json

+{
+  "name": "@wisdom-components/ec_realtimeinfo",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/extend-components/EC_RealTimeInfo/src/EC_RealTimeInfo.md

+---
+title: EC_RealTimeInfo - 实时数据查看
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# RealTimeInfo 实时数据查看
+
+基础业务组件
+
+- 查看指标名称对应的实时数据
+- 允许对重点指标和全部指标筛选
+- 允许搜索指标名称
+
+## 何时使用
+
+- 实时指标监控，查看实时指标数据时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API
+
+| 参数                           | 说明                         | 类型    | 默认值         |
+| ------------------------------ | ---------------------------- | ------- | -------------- |
+| buttonText                     | 按钮文本                     | string  | 查看更多       |
+| modalTitle                     | 模态框标题                   | string  | 实时指标监控   |
+| placeholder                    | 搜索框占位符                 | string  | 输入指标名称等 |
+| defaultTargetValue             | 默认选中‘重要指标’或者‘全部’ | string  | emphasis       |
+| user                           | 当前登录用户的用户名         | string  | 1              |
+| deviceRealInfoParams`必需`     | 设备实时信息的服务参数       | object  | {}             |
+| deviceConfService`必需`        | 获取设备配置服务             | promise | -              |
+| pointAddressEntryService`必需` | 获取点表信息服务             | promise | -              |
+| sensorTypeService`必需`        | 获取传感器类型服务           | promise | -              |
+| deviceRealInfoService`必需`    | 获取设备实时数据服务         | promise | -              |

packages/extend-components/EC_RealTimeInfo/src/demos/Basic.tsx

+import React, { useEffect, useState } from 'react';
+import { service } from '@wisdom-utils/utils';
+import RealTimeInfo from '../index';
+
+const REQUEST_HTTP = 'http';
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+
+const GET_DEVICE_CONF =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置
+const GET_POINT_ADDRESS_ENTRY =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
+const GET_SENSOR_TYPE =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型
+const GET_DEVICE_REAL_INFO =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
+
+// const GET_DEVICE_CONF = '/api/Publish/GCK/Device/GetDeviceConf'; //获取设备配置
+// const GET_POINT_ADDRESS_ENTRY = '/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
+// const GET_SENSOR_TYPE = '/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型
+// const GET_DEVICE_REAL_INFO = '/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
+
+const realTimeInfoService = {
+  getDeviceConf: {
+    url: GET_DEVICE_CONF,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  getPointAddressEntry: {
+    url: GET_POINT_ADDRESS_ENTRY,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  getSensorType: {
+    url: GET_SENSOR_TYPE,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  getDeviceRealInfo: {
+    url: GET_DEVICE_REAL_INFO,
+    method: REQUEST_METHOD_POST,
+    type: REQUEST_HTTP,
+  },
+};
+
+const rtService = service(realTimeInfoService);
+
+const getDeviceConf = rtService.getDeviceConf;
+const getPointAddressEntry = rtService.getPointAddressEntry;
+const getSensorType = rtService.getSensorType;
+const getDeviceRealInfo = rtService.getDeviceRealInfo;
+
+const Demo = () => {
+  return (
+    <div style={{ width: '200px', height: '60px', background: 'black' }}>
+      <RealTimeInfo
+        deviceConfService={getDeviceConf}
+        pointAddressEntryService={getPointAddressEntry}
+        sensorTypeService={getSensorType}
+        deviceRealInfoService={getDeviceRealInfo}
+        deviceRealInfoParams={{
+          userID: '1',
+          pageIndex: 1,
+          pageSize: 20,
+          isFocus: false,
+          accountFieldParams: [{ AName: '二供泵房' }, { AName: '二供机组' }],
+          equipmentCode: 'EGBF00000001',
+        }}
+        user={'1'}
+      />
+    </div>
+  );
+};
+
+export default Demo;

packages/extend-components/EC_RealTimeInfo/src/index.less

+@import (reference) '../../../../node_modules/antd/es/style/themes/default';
+@realtime-info-prefix-cls: ~'@{ant-prefix}-realtime-info';
+
+.@{realtime-info-prefix-cls} {
+  padding: 10px;
+
+  .ant-btn-link {
+    color: #d0d6e8;
+  }
+
+  &-search-wrap {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  &-search,
+  &-target {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+  }
+
+  &-label {
+    white-space: nowrap;
+  }
+
+  &-code-wrap {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+}
+
+.@{realtime-info-prefix-cls}-modal {
+  .ant-modal-header {
+    height: 63px;
+    padding: 16px 48px 0 24px;
+  }
+
+  &-title {
+    .ant-tabs-nav {
+      margin: 0;
+    }
+
+    .ant-tabs-nav:before {
+      border: none;
+    }
+
+    .ant-tabs-extra-content {
+      margin-right: 10px;
+    }
+
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+
+  .ant-modal-content {
+    height: 705px;
+  }
+
+  &-table {
+    height: 500px;
+  }
+}