Commit a82b0c57 authored by 涂茜's avatar 涂茜

Merge branch 'feature/ec-components' into 'dev'

Feature/ec components See merge request !39
parents edfad7a9 18a02021
Pipeline #27640 passed with stages
in 5 minutes 2 seconds
...@@ -2,6 +2,27 @@ ...@@ -2,6 +2,27 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.2.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_devicetree@1.0.11...@wisdom-components/ec_devicetree@1.2.0) (2021-05-13)
### Bug Fixes
- 历史曲线新增数据字典配置颜色 ([98e4d15](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/98e4d1547b7674c1fdb8691c48f6384c6dbbe491))
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
# [1.1.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_devicetree@1.0.11...@wisdom-components/ec_devicetree@1.1.0) (2021-05-13)
### Bug Fixes
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
## [1.0.11](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_devicetree@1.0.7...@wisdom-components/ec_devicetree@1.0.11) (2021-05-12) ## [1.0.11](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_devicetree@1.0.7...@wisdom-components/ec_devicetree@1.0.11) (2021-05-12)
### Bug Fixes ### Bug Fixes
......
{ {
"name": "@wisdom-components/ec_devicetree", "name": "@wisdom-components/ec_devicetree",
"version": "1.0.11", "version": "1.2.0",
"description": "> TODO: description", "description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>", "author": "tuqian <webtuqian@163.com>",
"homepage": "", "homepage": "",
......
...@@ -32,6 +32,7 @@ api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/ ...@@ -32,6 +32,7 @@ api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
| prefix | 搜索框的前置图标 | ReactNode | 搜索 icon | | prefix | 搜索框的前置图标 | ReactNode | 搜索 icon |
| placeholder | 搜索框占位符 | string | 搜索设备名称 | | placeholder | 搜索框占位符 | string | 搜索设备名称 |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
| pagination | 默认分页,false 取消分页 | boolean | true |
| serviceParams | 服务参数 | object | { pageIndex: 1, pageSize: 500, deviceTypes: '二供泵房,二供机组', getChild: true, userID: 1, queryInfo: '', sortFields: '', direction: '', isTop: true } | | serviceParams | 服务参数 | object | { pageIndex: 1, pageSize: 500, deviceTypes: '二供泵房,二供机组', getChild: true, userID: 1, queryInfo: '', sortFields: '', direction: '', isTop: true } |
| deviceTreeService `必需` | 设备树服务 | promise | - | | deviceTreeService `必需` | 设备树服务 | promise | - |
| onTreeCheck | 点击复选框触发 | function(checkedNodes){ } | - | | onTreeCheck | 点击复选框触发 | function(checkedNodes){ } | - |
......
...@@ -6,7 +6,7 @@ const REQUEST_HTTP = 'http'; ...@@ -6,7 +6,7 @@ const REQUEST_HTTP = 'http';
const REQUEST_METHOD_POST = 'post'; const REQUEST_METHOD_POST = 'post';
const GET_DEVICE_LIST = const GET_DEVICE_LIST =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
// const GET_DEVICE_LIST = '/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表 // const GET_DEVICE_LIST = '/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
...@@ -37,20 +37,19 @@ const Demo = () => { ...@@ -37,20 +37,19 @@ const Demo = () => {
checkable checkable
onTreeCheck={onTreeCheck} onTreeCheck={onTreeCheck}
onTreeSelect={onTreeSelect} onTreeSelect={onTreeSelect}
deviceTreeService={dtService.getDeviceList} deviceTreeService={getDeviceList}
serviceParams={ serviceParams={{
{ pageIndex: 1,
// pageIndex: 1, pageSize: 20,
// pageSize: 20, // deviceTypes: '二供泵房,二供机组',
// deviceTypes: '二供泵房,二供机组', getChild: true,
// getChild: true, // userID: 1,
// userID: 1, // queryInfo: '',
// queryInfo: '', // sortFields: '',
// sortFields: '', // direction: '',
// direction: '', // isTop: true,
// isTop: true, }}
} // pagination={false}
}
/> />
</div> </div>
); );
......
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { Input, Tree, Divider, message, ConfigProvider } from 'antd'; import { Input, Tree, Divider, message, Pagination, ConfigProvider } from 'antd';
import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import Empty from '@wisdom-components/empty'; import Empty from '@wisdom-components/empty';
import './index.less'; import './index.less';
...@@ -14,6 +14,7 @@ const DeviceTree = (props) => { ...@@ -14,6 +14,7 @@ const DeviceTree = (props) => {
serviceParams, serviceParams,
onTreeCheck, onTreeCheck,
onTreeSelect, onTreeSelect,
pagination,
} = props; } = props;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
...@@ -21,18 +22,19 @@ const DeviceTree = (props) => { ...@@ -21,18 +22,19 @@ const DeviceTree = (props) => {
const [treeData, setTreeData] = useState([]); const [treeData, setTreeData] = useState([]);
const [params, setParams] = useState({}); const [params, setParams] = useState({});
const [total, setTotal] = useState(0);
useEffect(() => { useEffect(() => {
const param = { const param = {
pageIndex: serviceParams.pageIndex || 1, pageIndex: serviceParams.pageIndex || 1,
pageSize: serviceParams.pageSize || 500, pageSize: serviceParams.pageSize || 20,
deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组', deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组',
getChild: serviceParams.getChild || true, getChild: serviceParams.getChild,
userID: serviceParams.userID || 0, userID: serviceParams.userID || 0,
queryInfo: serviceParams.queryInfo || '', queryInfo: serviceParams.queryInfo || '',
sortFields: serviceParams.sortFields || '', sortFields: serviceParams.sortFields || '',
direction: serviceParams.direction || '', direction: serviceParams.direction || '',
isTop: serviceParams.isTop || true, isTop: serviceParams.isTop,
}; };
setParams(param); setParams(param);
}, []); }, []);
...@@ -54,7 +56,11 @@ const DeviceTree = (props) => { ...@@ -54,7 +56,11 @@ const DeviceTree = (props) => {
? response.data.list[0].deviceList ? response.data.list[0].deviceList
: [] : []
: []; : [];
setTreeData(handleData(data)); const newData = handleData(data);
setTreeData(newData);
setTotal(response.data.totalPages);
onTreeCheck([newData[0]]);
onTreeSelect([newData[0]]);
} else { } else {
message.error(response.msg); message.error(response.msg);
} }
...@@ -75,15 +81,15 @@ const DeviceTree = (props) => { ...@@ -75,15 +81,15 @@ const DeviceTree = (props) => {
}; };
// 选中复选框 // 选中复选框
const onCheck = (checkedKeysValue) => { const onCheck = ({ checked }) => {
const checkedTree = []; const checkedTree = [];
treeData.forEach((item) => { treeData.forEach((item) => {
if (checkedKeysValue.includes(item.key)) { if (checked.includes(item.key)) {
checkedTree.push(item); checkedTree.push(item);
} }
if (item.children.length > 0) { if (item.children.length > 0) {
item.children.forEach((child) => { item.children.forEach((child) => {
if (checkedKeysValue.includes(child.key)) { if (checked.includes(child.key)) {
checkedTree.push(child); checkedTree.push(child);
} }
}); });
...@@ -96,6 +102,11 @@ const DeviceTree = (props) => { ...@@ -96,6 +102,11 @@ const DeviceTree = (props) => {
onTreeSelect(info.selectedNodes); onTreeSelect(info.selectedNodes);
}; };
const onPaginationChange = (page) => {
setParams({ ...params, pageIndex: page });
setTreeData([]);
};
return ( return (
<div className={classNames(prefixCls)}> <div className={classNames(prefixCls)}>
<Input <Input
...@@ -108,10 +119,30 @@ const DeviceTree = (props) => { ...@@ -108,10 +119,30 @@ const DeviceTree = (props) => {
<Divider /> <Divider />
<div className={classNames(`${prefixCls}-content`)}> <div className={classNames(`${prefixCls}-content`)}>
{!!treeData.length && ( {!!treeData.length && (
<Tree treeData={treeData} onCheck={onCheck} onSelect={onSelect} {...props} /> <Tree
defaultCheckedKeys={[treeData[0].key]}
defaultExpandedKeys={[treeData[0].key]}
treeData={treeData}
onCheck={onCheck}
onSelect={onSelect}
checkStrictly
{...props}
/>
)} )}
{!treeData.length && <Empty />} {!treeData.length && <Empty />}
</div> </div>
{pagination && (
<div className={classNames(`${prefixCls}-pagination`)}>
<Pagination
simple
hideOnSinglePage
current={params.pageIndex || 1}
pageSize={params.pageSize || 20}
total={total}
onChange={onPaginationChange}
/>
</div>
)}
</div> </div>
); );
}; };
...@@ -119,6 +150,7 @@ const DeviceTree = (props) => { ...@@ -119,6 +150,7 @@ const DeviceTree = (props) => {
DeviceTree.defaultProps = { DeviceTree.defaultProps = {
prefix: <SearchOutlined />, prefix: <SearchOutlined />,
placeholder: '搜索设备名称', placeholder: '搜索设备名称',
pagination: true,
serviceParams: {}, serviceParams: {},
onTreeCheck: () => {}, onTreeCheck: () => {},
onTreeSelect: () => {}, onTreeSelect: () => {},
...@@ -127,6 +159,7 @@ DeviceTree.defaultProps = { ...@@ -127,6 +159,7 @@ DeviceTree.defaultProps = {
DeviceTree.propTypes = { DeviceTree.propTypes = {
prefix: PropTypes.node, prefix: PropTypes.node,
placeholder: PropTypes.string, placeholder: PropTypes.string,
pagination: PropTypes.bool,
serviceParams: PropTypes.object, serviceParams: PropTypes.object,
onTreeCheck: PropTypes.func, onTreeCheck: PropTypes.func,
onTreeSelect: PropTypes.func, onTreeSelect: PropTypes.func,
......
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
width: 100%; width: 100%;
} }
.ant-tree-indent {
width: 0;
}
.ant-tree-node-content-wrapper { .ant-tree-node-content-wrapper {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
...@@ -34,4 +38,8 @@ ...@@ -34,4 +38,8 @@
flex: 1; flex: 1;
overflow-y: scroll; overflow-y: scroll;
} }
&-pagination {
margin: 10px auto;
}
} }
...@@ -2,6 +2,16 @@ ...@@ -2,6 +2,16 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.1.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyinfo@1.0.4...@wisdom-components/ec_historyinfo@1.1.0) (2021-05-13)
### Bug Fixes
- 历史曲线新增数据字典配置颜色 ([98e4d15](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/98e4d1547b7674c1fdb8691c48f6384c6dbbe491))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
## 1.0.4 (2021-05-12) ## 1.0.4 (2021-05-12)
### Bug Fixes ### Bug Fixes
......
{ {
"name": "@wisdom-components/ec_historyinfo", "name": "@wisdom-components/ec_historyinfo",
"version": "1.0.4", "version": "1.1.0",
"description": "> TODO: description", "description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>", "author": "tuqian <webtuqian@163.com>",
"homepage": "", "homepage": "",
......
...@@ -4,11 +4,17 @@ import HistoryInfo from '../index'; ...@@ -4,11 +4,17 @@ import HistoryInfo from '../index';
const REQUEST_HTTP = 'http'; const REQUEST_HTTP = 'http';
const REQUEST_METHOD_POST = 'post'; const REQUEST_METHOD_POST = 'post';
const REQUEST_METHOD_GET = 'get';
const GET_HISTORY_INFO = const GET_HISTORY_INFO =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SensorsDataForStation'; //获取历史信息 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/PandaCore/Monitor/Device/SensorsDataForStation'; //获取历史信息
// const GET_HISTORY_INFO = '/api/Publish/GCK/Device/SensorsDataForStation'; //获取历史信息 const GET_DICTIONARY_LIST =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/PandaCore/OMS/Data/GetDataDictionaryList'; //获取数据字典信息
// const GET_HISTORY_INFO = '/api/PandaCore/GCK/Device/SensorsDataForStation'; //获取历史信息
// const GET_DICTIONARY_LIST = '/api/PandaCore/OMS/Data/GetDataDictionaryList'; //获取数据字典信息
const historyInfoService = { const historyInfoService = {
getHistoryInfo: { getHistoryInfo: {
...@@ -16,11 +22,17 @@ const historyInfoService = { ...@@ -16,11 +22,17 @@ const historyInfoService = {
method: REQUEST_METHOD_POST, method: REQUEST_METHOD_POST,
type: REQUEST_HTTP, type: REQUEST_HTTP,
}, },
getDictionaryList: {
url: GET_DICTIONARY_LIST,
method: REQUEST_METHOD_GET,
type: REQUEST_HTTP,
},
}; };
const hsService = service(historyInfoService); const hsService = service(historyInfoService);
const getHistoryInfo = hsService.getHistoryInfo; const getHistoryInfo = hsService.getHistoryInfo;
const getDictionaryList = hsService.getDictionaryList;
const Demo = () => { const Demo = () => {
return ( return (
...@@ -30,6 +42,8 @@ const Demo = () => { ...@@ -30,6 +42,8 @@ const Demo = () => {
tableProps={{ bordered: true, pagination: { pageSize: 20 } }} tableProps={{ bordered: true, pagination: { pageSize: 20 } }}
historyInfoService={getHistoryInfo} historyInfoService={getHistoryInfo}
historyInfoParams={initialParams} historyInfoParams={initialParams}
dictionaryService={getDictionaryList}
dictionaryParams={{ nodeID: 149 }}
/> />
</div> </div>
); );
......
...@@ -110,6 +110,81 @@ const DefaultDatePicker = (value) => [ ...@@ -110,6 +110,81 @@ const DefaultDatePicker = (value) => [
}, },
]; ];
const DefaultOptions = (color, contrastOption) => ({
chart: {
zoomType: 'x',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
},
colors: color,
title: null,
credits: false,
rangeSelector: {
enabled: false,
},
xAxis: [
{
lineWidth: 0,
crosshair: true,
type: 'datetime',
gridLineDashStyle: 'dash',
gridLineWidth: 1,
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%d',
week: '%d',
month: '%d',
year: '%Y',
},
},
],
yAxis: [],
tooltip: {
shared: true,
split: false,
valueDecimals: 3,
formatter: function () {
let html = `<b>${Highcharts.dateFormat(
contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
this.x,
)}</b><br/>`;
this.points.forEach((item) => {
html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
<b>${
item.point.y.toFixed(
item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
) * 1
}${item.series.userOptions.tooltip.valueSuffix}</b>
<br/>`;
});
return html;
},
},
plotOptions: {
series: {
showInNavigator: true,
connectNulls: false,
zoneAxis: 'x',
},
},
legend: {
enabled: true,
verticalAlign: 'top',
},
series: [],
responsive: {
rules: [
{
condition: {
maxWidth: 800,
minHeight: 500,
},
},
],
},
});
let chartWidth = 0; // chart width let chartWidth = 0; // chart width
let chartHeight = 0; // chart height let chartHeight = 0; // chart height
...@@ -117,7 +192,15 @@ const HistoryInfo = (props) => { ...@@ -117,7 +192,15 @@ const HistoryInfo = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-info'); const prefixCls = getPrefixCls('history-info');
const { title, tableProps, historyInfoService, historyInfoParams, defaultChecked } = props; const {
title,
tableProps,
historyInfoService,
historyInfoParams,
dictionaryService,
dictionaryParams,
defaultChecked,
} = props;
const [activeTabKey, setActiveTabKey] = useState('curve'); const [activeTabKey, setActiveTabKey] = useState('curve');
const [timeValue, setTimeValue] = useState('customer'); const [timeValue, setTimeValue] = useState('customer');
...@@ -128,6 +211,7 @@ const HistoryInfo = (props) => { ...@@ -128,6 +211,7 @@ const HistoryInfo = (props) => {
const [checkboxData, setCheckboxData] = useState(CheckboxData); const [checkboxData, setCheckboxData] = useState(CheckboxData);
const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key); const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key);
const [options, setOptions] = useState({}); const [options, setOptions] = useState({});
const [colors, setColors] = useState(defaultColors);
const [params, setParams] = useState(historyInfoParams); const [params, setParams] = useState(historyInfoParams);
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
const [pageSize, setPageSize] = useState(20); const [pageSize, setPageSize] = useState(20);
...@@ -257,6 +341,22 @@ const HistoryInfo = (props) => { ...@@ -257,6 +341,22 @@ const HistoryInfo = (props) => {
}); });
}; };
// 获取数据字典配置的曲线颜色
const getDictionaryList = () => {
dictionaryService(dictionaryParams).then((res) => {
if (res.code === 0 && res.data.length) {
const colorsData = res.data;
colorsData.sort((a, b) => a.nodeName.localeCompare(b.nodeName));
const color = colorsData.map((item) => item.nodeValue);
setColors(color);
}
});
};
useEffect(() => {
dictionaryService && getDictionaryList();
}, []);
useEffect(() => { useEffect(() => {
onChangeParams(state); onChangeParams(state);
}, [state]); }, [state]);
...@@ -472,10 +572,9 @@ const HistoryInfo = (props) => { ...@@ -472,10 +572,9 @@ const HistoryInfo = (props) => {
// 处理图表options // 处理图表options
const handleChartOptions = () => { const handleChartOptions = () => {
// const { series } = chartOptions; const _series = [];
let _series = [];
let _yAxis = []; let _yAxis = [];
let uniqueUnit = []; const uniqueUnit = [];
series.forEach((item, index) => { series.forEach((item, index) => {
// 处理series // 处理series
let _s = { let _s = {
...@@ -551,7 +650,7 @@ const HistoryInfo = (props) => { ...@@ -551,7 +650,7 @@ const HistoryInfo = (props) => {
global: { timezoneOffset: -8 * 60 }, global: { timezoneOffset: -8 * 60 },
}); });
let options = { ...defaultOptions }; let options = { ...DefaultOptions(colors, contrastOption) };
if (CheckboxData[0].checked) { if (CheckboxData[0].checked) {
_yAxis = setYaxisMin(_yAxis, _series); _yAxis = setYaxisMin(_yAxis, _series);
...@@ -561,30 +660,12 @@ const HistoryInfo = (props) => { ...@@ -561,30 +660,12 @@ const HistoryInfo = (props) => {
if (_yAxis.length > 0) { if (_yAxis.length > 0) {
options = { options = {
...defaultOptions, ...DefaultOptions(colors, contrastOption),
// ...chartOptions,
yAxis: _yAxis, yAxis: _yAxis,
series: _series, series: _series,
}; };
} }
options.tooltip.formatter = function formatter() {
let _html = `<b>${Highcharts.dateFormat(
contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
this.x,
)}</b><br/>`;
this.points.forEach((item) => {
_html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
<b>${
item.point.y.toFixed(
item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
) * 1
}${item.series.userOptions.tooltip.valueSuffix}</b>
<br/>`;
});
return _html;
};
if (container.current) { if (container.current) {
if (container.current.offsetWidth !== 0) { if (container.current.offsetWidth !== 0) {
chartWidth = container.current.offsetWidth; chartWidth = container.current.offsetWidth;
...@@ -731,7 +812,7 @@ const endFormat = 'YYYY-MM-DD 23:59:59'; ...@@ -731,7 +812,7 @@ const endFormat = 'YYYY-MM-DD 23:59:59';
const timeFormat = 'YYYY-MM-DD HH:mm:ss'; const timeFormat = 'YYYY-MM-DD HH:mm:ss';
const colors = [ const defaultColors = [
'#1884EC', '#1884EC',
'#90CE53', '#90CE53',
'#86E0C7', '#86E0C7',
...@@ -750,65 +831,6 @@ const colors = [ ...@@ -750,65 +831,6 @@ const colors = [
'#cbcc75', '#cbcc75',
]; ];
const defaultOptions = {
chart: {
zoomType: 'x',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
},
colors: colors,
title: null,
credits: false,
rangeSelector: {
enabled: false,
},
xAxis: [
{
lineWidth: 0,
crosshair: true,
type: 'datetime',
gridLineDashStyle: 'dash',
gridLineWidth: 1,
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%d',
week: '%d',
month: '%d',
year: '%Y',
},
},
],
yAxis: [],
tooltip: {
shared: true,
split: false,
valueDecimals: 3,
},
plotOptions: {
series: {
showInNavigator: true,
connectNulls: false,
zoneAxis: 'x',
},
},
legend: {
enabled: true,
verticalAlign: 'top',
},
series: [],
responsive: {
rules: [
{
condition: {
maxWidth: 800,
minHeight: 500,
},
},
],
},
};
const initialState = { const initialState = {
dateRange: [], dateRange: [],
ignoreOutliers: false, ignoreOutliers: false,
......
...@@ -2,6 +2,27 @@ ...@@ -2,6 +2,27 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.2.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.0.5...@wisdom-components/ec_quotaselect@1.2.0) (2021-05-13)
### Bug Fixes
- 历史曲线新增数据字典配置颜色 ([98e4d15](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/98e4d1547b7674c1fdb8691c48f6384c6dbbe491))
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
# [1.1.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.0.5...@wisdom-components/ec_quotaselect@1.1.0) (2021-05-13)
### Bug Fixes
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
## [1.0.5](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.0.1...@wisdom-components/ec_quotaselect@1.0.5) (2021-05-12) ## [1.0.5](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.0.1...@wisdom-components/ec_quotaselect@1.0.5) (2021-05-12)
### Bug Fixes ### Bug Fixes
......
{ {
"name": "@wisdom-components/ec_quotaselect", "name": "@wisdom-components/ec_quotaselect",
"version": "1.0.5", "version": "1.2.0",
"description": "> TODO: description", "description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>", "author": "tuqian <webtuqian@163.com>",
"homepage": "", "homepage": "",
......
...@@ -10,16 +10,16 @@ const REQUEST_METHOD_GET = 'get'; ...@@ -10,16 +10,16 @@ const REQUEST_METHOD_GET = 'get';
const REQUEST_METHOD_POST = 'post'; const REQUEST_METHOD_POST = 'post';
const GET_QUOTA_LIST = const GET_QUOTA_LIST =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetQuotaList'; //获取指标列表 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表
// '/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表 // '/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表
const GET_DEVICE_CONF = const GET_DEVICE_CONF =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置
// '/api/Publish/GCK/Device/GetDeviceConf'; //获取设备配置 // '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置
const UPDATE_DEVICE_CONF = const UPDATE_DEVICE_CONF =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SaveDeviceConf'; //更新设备配置 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置
// '/api/Publish/GCK/Device/SaveDeviceConf'; //更新设备配置 // '/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置
const quotaSelectService = { const quotaSelectService = {
getQuotaList: { getQuotaList: {
......
...@@ -52,6 +52,7 @@ const QuotaSelect = ({ ...@@ -52,6 +52,7 @@ const QuotaSelect = ({
const [targetValue, setTargetValue] = useState('emphasis'); const [targetValue, setTargetValue] = useState('emphasis');
const [allQuotaList, setAllQuotaList] = useState([]); const [allQuotaList, setAllQuotaList] = useState([]);
const [quotaList, setQuotaList] = useState([]); const [quotaList, setQuotaList] = useState([]);
const [groupQuotaList, setGroupQuotaList] = useState([]);
const [selectDevice, setSelectDevice] = useState({}); // 选中的设备 const [selectDevice, setSelectDevice] = useState({}); // 选中的设备
const [selectData, setSelectData] = useState([]); // 选中的指标数据 const [selectData, setSelectData] = useState([]); // 选中的指标数据
const [confParams, setConfParams] = useState({}); const [confParams, setConfParams] = useState({});
...@@ -99,6 +100,34 @@ const QuotaSelect = ({ ...@@ -99,6 +100,34 @@ const QuotaSelect = ({
}); });
}; };
// 处理指标分组
const handleGroupData = (data) => {
const groupData = [];
const groupQuotaData = [];
data.forEach((item) => {
if (!groupData.includes(item.groupName)) {
groupData.push(item.groupName);
}
});
groupData.forEach((group) => {
const list = [];
data.forEach((child) => {
if (child.groupName === group) {
list.push(child);
}
});
groupQuotaData.push({
groupName: group || '未分组指标',
quotaList: list,
});
});
setGroupQuotaList(groupQuotaData);
};
useEffect(() => {
handleGroupData(quotaList);
}, [quotaList]);
useEffect(() => { useEffect(() => {
if (targetValue === 'emphasis') { if (targetValue === 'emphasis') {
filterEmphasisQuota(); filterEmphasisQuota();
...@@ -360,24 +389,31 @@ const QuotaSelect = ({ ...@@ -360,24 +389,31 @@ const QuotaSelect = ({
</div> </div>
<div className={classNames(`${prefixCls}-modal-option-wrap`)}> <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
{!quotaList.length && <Empty />} {!quotaList.length && <Empty />}
<Row gutter={[0, 6]}> {!!quotaList.length &&
{!!quotaList.length && groupQuotaList.map((group, index) => (
quotaList.map((item) => ( <div key={index}>
<Col span={8} key={item.key}> <div className={classNames(`${prefixCls}-modal-class-title`)}>
<Checkbox {group.groupName}
value={item.title} </div>
checked={item.checked} <Row gutter={[0, 6]}>
disabled={ {group.quotaList.map((item) => (
(selectData.length > maximum || selectData.length === maximum) && <Col span={8} key={item.key}>
!item.checked <Checkbox
} value={item.title}
onChange={(e) => handleCheckboxChange(e, item)} checked={item.checked}
> disabled={
{item.title} (selectData.length > maximum || selectData.length === maximum) &&
</Checkbox> !item.checked
</Col> }
))} onChange={(e) => handleCheckboxChange(e, item)}
</Row> >
{item.title}
</Checkbox>
</Col>
))}
</Row>
</div>
))}
</div> </div>
</div> </div>
<div className={classNames(`${prefixCls}-modal-right`)}> <div className={classNames(`${prefixCls}-modal-right`)}>
......
...@@ -81,10 +81,26 @@ ...@@ -81,10 +81,26 @@
&-option-wrap { &-option-wrap {
height: calc(100% - 52px); height: calc(100% - 52px);
margin-top: 20px;
overflow-y: auto; overflow-y: auto;
} }
&-class-title {
position: relative;
margin: 24px 20px 16px 0;
padding: 0 0 16px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:after {
position: absolute;
top: 3px;
left: 0;
width: 3px;
height: 16px;
background: #1890ff;
content: '';
}
}
&-number { &-number {
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 0 10px 20px; padding: 4px 0 10px 20px;
......
...@@ -2,6 +2,26 @@ ...@@ -2,6 +2,26 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# 1.3.0 (2021-05-13)
### Bug Fixes
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
# 1.2.0 (2021-05-13)
### Bug Fixes
- 优化设备树组件 ([05bc085](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/05bc085fc2d6ed70179ad2f833f11f13f5ef2a75))
### Features
- add ec_realtimeinfo ([1ac8483](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1ac84839f9c2961e63d6a7284c6d54798acf9a76))
# 1.1.0 (2021-05-12) # 1.1.0 (2021-05-12)
### Features ### Features
......
{ {
"name": "@wisdom-components/ec_realtimeinfo", "name": "@wisdom-components/ec_realtimeinfo",
"version": "1.1.0", "version": "1.3.0",
"description": "> TODO: description", "description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>", "author": "tuqian <webtuqian@163.com>",
"homepage": "", "homepage": "",
......
...@@ -7,7 +7,7 @@ const REQUEST_METHOD_GET = 'get'; ...@@ -7,7 +7,7 @@ const REQUEST_METHOD_GET = 'get';
const REQUEST_METHOD_POST = 'post'; const REQUEST_METHOD_POST = 'post';
const GET_DEVICE_CONF = const GET_DEVICE_CONF =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //获取设备配置
const GET_POINT_ADDRESS_ENTRY = const GET_POINT_ADDRESS_ENTRY =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
const GET_SENSOR_TYPE = const GET_SENSOR_TYPE =
...@@ -15,7 +15,7 @@ const GET_SENSOR_TYPE = ...@@ -15,7 +15,7 @@ const GET_SENSOR_TYPE =
const GET_DEVICE_REAL_INFO = const GET_DEVICE_REAL_INFO =
'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
// const GET_DEVICE_CONF = '/api/Publish/GCK/Device/GetDeviceConf'; //获取设备配置 // const GET_DEVICE_CONF = '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //获取设备配置
// const GET_POINT_ADDRESS_ENTRY = '/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息 // const GET_POINT_ADDRESS_ENTRY = '/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
// const GET_SENSOR_TYPE = '/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型 // const GET_SENSOR_TYPE = '/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型
// const GET_DEVICE_REAL_INFO = '/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据 // const GET_DEVICE_REAL_INFO = '/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
......
...@@ -32,7 +32,7 @@ const RealTimeInfo = (props) => { ...@@ -32,7 +32,7 @@ const RealTimeInfo = (props) => {
const [tabData, setTabData] = useState([]); const [tabData, setTabData] = useState([]);
const [tabKey, setTabKey] = useState(''); const [tabKey, setTabKey] = useState('');
const [guid, setGuid] = useState(''); const [guid, setGuid] = useState('');
const [deviceConf, setDeviceConf] = useState({}); // 设备配置 const [deviceConf, setDeviceConf] = useState([]); // 设备配置
const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据 const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据
const [sensorType, setSensorType] = useState({}); // sensorType const [sensorType, setSensorType] = useState({}); // sensorType
const [pointAddress, setPointAddress] = useState([]); // pointAddress const [pointAddress, setPointAddress] = useState([]); // pointAddress
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment