Merge branch 'feature/RealTimeInfo' into 'dev'

.umirc.js

@@ -107,7 +107,7 @@ export default {
       },
       {
         title: '数据展示',
-        children: ['DeviceTree'],
+        children: ['DeviceTree', 'RealTimeInfo'],
       },
     ],
   },

packages/RealTimeInfo/README.md

+# `@wisdom-components/RealTimeInfo`
+
+> TODO: description
+
+## Usage
+
+```
+const realtimeinfo = require('@wisdom-components/RealTimeInfo');
+
+// TODO: DEMONSTRATE API
+```

packages/RealTimeInfo/package.json

+{
+  "name": "@wisdom-components/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/RealTimeInfo/src/RealTimeInfo.md

+---
+title: RealTimeInfo - 实时数据查看
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# RealTimeInfo 实时数据查看
+
+基础业务组件
+
+- 查看指标名称对应的实时数据
+- 允许对重点指标和全部指标筛选
+- 允许搜索指标名称
+
+## 何时使用
+
+- 实时指标监控，查看实时指标数据时。
+
+## 代码演示
+
+<code src="./demos/Basic.js">
+
+## API
+
+api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API
+
+| 参数          | 说明                                       | 类型               | 默认值         |
+| ------------- | ------------------------------------------ | ------------------ | -------------- |
+| guid          | 采集编码                                   | string             | -              |
+| placeholder   | 搜索框占位符                               | string             | 输入指标名称等 |
+| targetValue   | 选中‘重要指标’或者‘全部’                   | string             | emphasis       |
+| onSearch      | 搜索框输入事件的回调，会返回搜索框输入信息 | function(value){ } | -              |
+| onRadioChange | 指标选择事件的回调，会返回选中的指标值     | function(value){ } | -              |

packages/RealTimeInfo/src/demos/Basic.js

+import React, { useEffect, useState } from 'react';
+import Empty from '@wisdom-components/Empty';
+import RealTimeInfo from '../index';
+import request from 'umi-request';
+
+const Demo = () => {
+  const [data, setData] = useState([]);
+  const [targetValue, setTargetValue] = useState('emphasis');
+  const [guid, setGuid] = useState('');
+  const [updateTime, setUpdateTime] = useState('');
+
+  const GetPointAddressEntry = (params = {}) => {
+    return request(baseUrl + '/Publish/Monitor/PointAddress/GetPointAddressEntry', {
+      method: 'get',
+      params: {
+        versionID: 4,
+      },
+    });
+  };
+
+  const GetSensorType = (params = {}) => {
+    return request(baseUrl + '/Publish/Monitor/Scada/GetSensorType', {
+      method: 'get',
+      params: {},
+    });
+  };
+
+  const GetDeviceRealInfo = (params = {}) => {
+    return request(baseUrl + '/Publish/Monitor/Device/DeviceRealInfo', {
+      method: 'post',
+      data: {
+        userID: '1',
+        pageIndex: 1,
+        pageSize: 20,
+        isFocus: false,
+        accountFieldParams: [{ AName: '二供泵房' }, { AName: '二供机组' }],
+        equipmentCode: 'EGBF00000001',
+      },
+    });
+  };
+
+  const fetchData = async () => {
+    let data1 = await GetPointAddressEntry();
+    let data2 = await GetSensorType();
+    let data3 = await GetDeviceRealInfo();
+    setUpdateTime(data3.data.list[0].PT);
+    setGuid(data3.data.list[0].Child[0].GUID);
+    handleData(data1.data, data2.data, data3.data);
+  };
+
+  const handleData = (data1 = [], data2 = [], data3 = []) => {
+    let newData = data1.map((item, index) => {
+      return {
+        id: item.ID,
+        key: item.ID,
+        index: index + 1,
+        name: item.Name,
+        value: 0,
+        unit: '--',
+        type: '--',
+        time: data3.list[0].PT,
+        ...item,
+      };
+    });
+    newData.forEach((item) => {
+      let curData1 = data2.filter((child) => child.ID == item.SensorTypeID);
+      let curData2 = data3.list[0].DataList.filter((child) => child.PAID == item.ID);
+      if (curData1.length) {
+        item.unit = curData1[0].Unit || '--';
+        item.type = curData1[0].Name || '--';
+      }
+      if (curData2.length) {
+        item.value = curData2[0].PV || '--';
+      }
+    });
+    setData(newData);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onSearch = (e) => {
+    console.log(e.type, e.target.value);
+  };
+
+  const onRadioChange = (e) => {
+    setTargetValue(e.target.value);
+    console.log('value', e.target.value);
+  };
+
+  return (
+    <RealTimeInfo
+      onSearch={onSearch}
+      onRadioChange={onRadioChange}
+      targetValue={targetValue}
+      guid={guid}
+      updateTime={updateTime}
+      bordered
+      columns={columns}
+      dataSource={data}
+      pagination={{ pageSize: 50 }}
+      scroll={{ y: 500 }}
+      locale={{ emptyText: <Empty /> }}
+    />
+  );
+};
+
+export default Demo;
+
+const baseUrl = 'http://192.168.10.150:8777';
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+  },
+  {
+    title: '指标名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '最新指标',
+    dataIndex: 'value',
+    render: (text) => <a>{text}</a>,
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+  },
+  {
+    title: '指标类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'time',
+  },
+];

packages/RealTimeInfo/src/index.js

+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Input, Radio, Table, ConfigProvider } from 'antd';
+import './index.less';
+
+const RealTimeInfo = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('realtime-info');
+
+  const { placeholder, targetValue, guid, updateTime, onSearch, onRadioChange } = props;
+
+  return (
+    <div className={classNames(prefixCls)}>
+      <div className={classNames(`${prefixCls}-search-wrap`)}>
+        <div className={classNames(`${prefixCls}-search`)}>
+          <div className={classNames(`${prefixCls}-label`)}>搜索：</div>
+          <Input placeholder={placeholder} onChange={onSearch} onPressEnter={onSearch} />
+        </div>
+        <div className={classNames(`${prefixCls}-target`)}>
+          <div className={classNames(`${prefixCls}-label`)}>指标：</div>
+          <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
+            <Radio.Button value="emphasis">重点指标</Radio.Button>
+            <Radio.Button value="all">全部</Radio.Button>
+          </Radio.Group>
+        </div>
+      </div>
+      <div className={classNames(`${prefixCls}-code-wrap`)}>
+        <div>采集编码：{guid}</div>
+        <div>更新时间：{updateTime}</div>
+      </div>
+      <Table {...props} />
+    </div>
+  );
+};
+
+RealTimeInfo.defaultProps = {
+  placeholder: '输入指标名称等',
+  guid: '--',
+  targetValue: 'emphasis',
+  updateTime: '--',
+  onSearch: () => {},
+  onRadioChange: () => {},
+};
+
+RealTimeInfo.propTypes = {
+  placeholder: PropTypes.string,
+  guid: PropTypes.string,
+  targetValue: PropTypes.string,
+  updateTime: PropTypes.string,
+  onSearch: PropTypes.func,
+  onRadioChange: PropTypes.func,
+};
+
+export default RealTimeInfo;

packages/RealTimeInfo/src/index.less

+@import (reference) '~antd/es/style/themes/default';
+@realtime-info-prefix-cls: ~'@{ant-prefix}-realtime-info';
+
+.@{realtime-info-prefix-cls} {
+  padding: 10px;
+
+  &-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;
+  }
+}