Skip to content

W
wisdom-components
Commit a08bd4fb authored by 崔佳豪's avatar 崔佳豪
Browse files
Options

fix(EC_RealTimeInfo): 组件服务优化

parent 4af880d5
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 229 deletions
config/proxy.js
View file @ a08bd4fb
......@@ -16,4 +16,14 @@ export default {
'/PandaMonitor': '/PandaMonitor',
},
},
'/PandaCore': {
target: proxyURL,
changeOrigin: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
pathRewrite: {
'/PandaCore': '/PandaCore',
},
},
};
packages/extend-components/EC_RealTimeInfo/apis/index.js 0 → 100644
View file @ a08bd4fb
import { request } from '@wisdom-utils/utils';
const REQUEST_METHOD_GET = 'get';
const REQUEST_METHOD_POST = 'post';
// eslint-disable-next-line no-undef
const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
// 获取监控展示配置
export function getMonitorConfig({ params, data } = {}) {
return request({
url: `/PandaMonitor/Monitor/MonitorConfig/GetMonitorConf`,
method: REQUEST_METHOD_GET,
params,
data,
});
}
// 获取传感器类型
export function getSensorType({ params, data } = {}) {
return request({
url: `/PandaCore/GCK/Sensor/GetSensorType`,
method: REQUEST_METHOD_GET,
params,
data,
});
}
// 获取设备实时数据
export function getDeviceRealInfo({ params, data } = {}) {
return request({
url: `/PandaMonitor/Monitor/Device/GetDeviceRealInfo`,
method: REQUEST_METHOD_POST,
params,
data,
});
}
// 获取点表地址
export function getPointAddressEntry({ params, data } = {}) {
return request({
url: `/PandaMonitor/Monitor/PointAddress/GetPointAddressEntry`,
method: REQUEST_METHOD_GET,
params,
data,
});
}
// 获取点表版本
export function getPointAddress({ params, data } = {}) {
return request({
url: `/PandaMonitor/Monitor/PointAddress/GetPointAddress`,
method: REQUEST_METHOD_GET,
params,
data,
});
}
packages/extend-components/EC_RealTimeInfo/src/demos/Basic.tsx
View file @ a08bd4fb
......@@ -20,53 +20,55 @@ const GET_DEVICE_REAL_INFO =
// 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 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 rtService = service(realTimeInfoService);
const getDeviceConf = rtService.getDeviceConf;
const getPointAddressEntry = rtService.getPointAddressEntry;
const getSensorType = rtService.getSensorType;
const getDeviceRealInfo = rtService.getDeviceRealInfo;
// 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'}
deviceParams={[
{
deviceType: '二供泵房',
deviceCode: 'EGBF00000001',
},
{
deviceType: '二供机组',
deviceCode: 'EGJZ00000001',
},
{
deviceType: '二供机组',
deviceCode: 'EGJZ00000002',
},
]}
user={1}
/>
</div>
);
......
packages/extend-components/EC_RealTimeInfo/src/index.js
View file @ a08bd4fb
import React, { useState, useEffect, useContext } from 'react';
import React, { useState, useEffect, useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import Empty from '@wisdom-components/empty';
import classNames from 'classnames';
import { Modal, Button, Tabs, Input, Radio, ConfigProvider } from 'antd';
import { Modal, Button, Tabs, Input, Radio, ConfigProvider, message } from 'antd';
import BasicTable from '@wisdom-components/basictable';
import {
getMonitorConfig,
getSensorType,
getDeviceRealInfo,
getPointAddressEntry,
getPointAddress,
} from '../apis';
import './index.less';
const { TabPane } = Tabs;
const defaultColumns = [
{
title: '序号',
dataIndex: 'index',
width: 60,
},
{
title: '指标名称',
dataIndex: 'name',
width: 150,
},
{
title: '最新指标',
dataIndex: 'value',
render: (text) => <a>{text}</a>,
},
{
title: '单位',
dataIndex: 'unit',
},
{
title: '指标类型',
dataIndex: 'type',
},
{
title: '数据描述',
dataIndex: 'desc',
},
{
title: '更新时间',
dataIndex: 'time',
},
];
const RealTimeInfo = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('realtime-info');
const {
deviceConfService,
pointAddressEntryService,
sensorTypeService,
deviceRealInfoService,
deviceRealInfoParams,
user,
placeholder,
defaultTargetValue,
modalTitle,
buttonText,
} = props;
const { deviceParams, user, placeholder, defaultTargetValue, modalTitle, buttonText } = props;
const [isModalVisible, setIsModalVisible] = useState(false);
const [targetValue, setTargetValue] = useState(defaultTargetValue); // 重点/全部
const [searchValue, setSearchValue] = useState(''); // 搜索框内容
const [columns, setColumns] = useState(defaultColumns); // 搜索框内容
const [tabData, setTabData] = useState([]);
const [tabKey, setTabKey] = useState('');
const [guid, setGuid] = useState('');
const [deviceConf, setDeviceConf] = useState([]); // 设备配置
const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据
const [sensorType, setSensorType] = useState({}); // sensorType
const [sensorType, setSensorType] = useState([]); // sensorType
const [pointAddress, setPointAddress] = useState([]); // pointAddress
const [tableData, setTableData] = useState([]); // 表格数据
const [searchData, setSearchData] = useState([]); // 表格搜索数据
const handleTabData = (data = {}) => {
const tabData = useMemo(() => {
const data = deviceInfo;
let tData = [];
if (!data) return tData;
tData.push({
key: data.code,
title: data.name,
......@@ -59,43 +87,92 @@ const RealTimeInfo = (props) => {
});
});
}
setTabData(tData);
setTabKey(tData[0].key);
};
return tData;
}, [deviceInfo]);
// 过滤重点指标
const filterEmphasis = (dataSource) => {
// 过滤重点指标（带搜索）
const filterEmphasis = (dataSource, searchValue) => {
const cur = tabData.filter((item) => item.key === tabKey);
const conf =
cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
const data = dataSource.filter((item) => dPoints.includes(item.name));
setSearchData(data);
const data = dataSource.filter((item) =>
searchValue
? dPoints.indexOf(searchValue) > -1 && dPoints.includes(item.name)
: dPoints.includes(item.name),
);
return data;
};
// 过滤普通指标（带搜索）
const filterSearch = (dataSource, searchValue) => {
return !searchValue ? dataSource : dataSource.filter((item) => item.name.includes(searchValue));
};
const handleFilterColumns = (data = []) => {
const keyArr = defaultColumns.map((item) => item.dataIndex);
const filter = [];
keyArr.forEach((key) => {
let length = 0;
data.forEach((item) => {
if (item[key] === '--' || item[key] === '') {
length++;
const getData = () => {
const deviceType =
deviceParams.length > 0
? Array.from(new Set(deviceParams.map((item) => item.deviceType))).join(',')
: '二供泵房,二供机组';
const configReq = getMonitorConfig({
params: {
user,
showAll: true,
deviceType,
},
});
const sensorReq = getSensorType();
const realDataReq = getDeviceRealInfo({
data: {
pageIndex: 1,
pageSize: 200,
param: deviceParams,
useID: user,
},
});
Promise.all([configReq, sensorReq, realDataReq])
.then((results) => {
if (results.some((item) => item.code !== 0)) message.error('获取数据失败');
const [configRes, sensorRes, realDataRes] = results;
setSensorType(sensorRes.data);
setDeviceConf(configRes.data);
setDeviceInfo(realDataRes.data.list[0]);
setTabKey(realDataRes?.data?.list?.[0]?.code);
})
.catch((err) => {
message.error('获取数据失败');
});
};
useEffect(() => {
if (!isModalVisible || !deviceParams || !deviceParams.length) return;
getData();
}, [deviceParams, user, isModalVisible]);
const GetPointAddressEntry = () => {
const cur = tabData.filter((item) => item.key === tabKey);
!!cur.length &&
getPointAddressEntry({
params: {
versionId: cur[0].versionID,
},
}).then((res) => {
if (res.code === 0 && res.data.length) {
setPointAddress(res.data);
}
});
if (data.length === length) {
filter.push(key);
}
});
const column = defaultColumns.filter((item) => !filter.includes(item.dataIndex));
setColumns(column);
setTableData(data);
};
const handleData = (data1 = [], data2 = [], data3 = {}) => {
let time = data3.pt;
useEffect(() => {
if (!tabKey || !tabData || !tabData.length) return;
GetPointAddressEntry();
}, [tabKey]);
const formatData = (data = [], sensorType = [], deviceInfo = {}) => {
if (!deviceInfo) return [];
let time = deviceInfo.pt;
if (time) time = time.slice(5, 19).replace('-', '/');
let newData = data1.map((item, index) => {
let newData = data.map((item, index) => {
return {
id: item.id,
key: item.id,
......@@ -110,8 +187,8 @@ const RealTimeInfo = (props) => {
};
});
newData.forEach((item) => {
let curData1 = data2.filter((child) => child.id == item.sensorTypeID);
let curData2 = data3.dataList.filter((child) => child.paid == item.id);
let curData1 = sensorType.filter((child) => child.id == item.sensorTypeID);
let curData2 = deviceInfo.dataList.filter((child) => child.paid == item.id);
if (curData1.length) {
item.unit = curData1[0].unit || '--';
item.type = curData1[0].name || '--';
......@@ -120,90 +197,29 @@ const RealTimeInfo = (props) => {
item.value = curData2[0].pv || '--';
}
});
handleFilterColumns(newData);
const data = searchValue
? newData.filter((item) => item.name.indexOf(searchValue) !== -1)
: newData;
if (targetValue === 'emphasis') {
filterEmphasis(data);
} else {
setSearchData(data);
}
return newData;
};
const GetDeviceConf = () => {
const deviceType =
deviceRealInfoParams.accountFieldParams.length > 0
? deviceRealInfoParams.accountFieldParams.map((item) => item.AName).join(',')
: '二供泵房,二供机组';
deviceConfService({
user,
showAll: true,
deviceType,
}).then((res) => {
if (res.code === 0 && res.data.length) {
setDeviceConf(res.data);
}
});
};
const GetDeviceRealInfo = () => {
deviceRealInfoService(deviceRealInfoParams).then((res) => {
if (res.code === 0 && res.data) {
setDeviceInfo(res.data.list[0]);
handleTabData(res.data.list[0]);
}
});
};
const GetSensorType = () => {
sensorTypeService({}).then((res) => {
if (res.code === 0 && res.data.length) {
setSensorType(res.data);
}
});
};
const GetPointAddressEntry = () => {
const cur = tabData.filter((item) => item.key === tabKey);
!!cur.length &&
pointAddressEntryService({ versionID: cur[0].versionID }).then((res) => {
if (res.code === 0 && res.data.length) {
setPointAddress(res.data);
}
});
};
useEffect(() => {
if (isModalVisible) {
GetDeviceConf();
GetDeviceRealInfo();
GetSensorType();
}
}, [isModalVisible]);
useEffect(() => {
GetPointAddressEntry();
}, [tabKey]);
useEffect(() => {
handleData(pointAddress, sensorType, deviceInfo);
}, [pointAddress]);
useEffect(() => {
const tableData = useMemo(() => {
// 过滤数据
let points = [];
if (targetValue === 'emphasis') {
// 重点指标
filterEmphasis(searchData);
points = filterEmphasis(pointAddress, searchValue);
} else {
// 全部
if (searchValue) {
const data = tableData.filter((item) => item.name.indexOf(searchValue) !== -1);
setSearchData(data);
} else {
setSearchData(tableData);
}
points = filterSearch(pointAddress, searchValue);
}
}, [targetValue]);
const deviceData =
deviceInfo.code === tabKey
? deviceInfo
: deviceInfo?.child?.find((item) => item.code === tabKey);
const newData = formatData(points, sensorType, deviceData);
return newData;
}, [targetValue, searchValue, pointAddress, deviceInfo]);
const columns = useMemo(() => {
return defaultColumns;
}, []);
const showModal = () => {
setIsModalVisible(true);
......@@ -217,33 +233,13 @@ const RealTimeInfo = (props) => {
setIsModalVisible(false);
};
const onSearch = (e) => {
const changeSearch = (e) => {
e.target && e.target.value === '' && setSearchValue('');
};
const onSearch = (value) => {
// 前端搜索
if (e.target.value) {
if (targetValue === 'emphasis') {
// 重点指标
const cur = tabData.filter((item) => item.key === tabKey);
const conf =
cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
const data = tableData.filter((item) => dPoints.includes(item.name));
const newDate = data.filter((item) => item.name.indexOf(e.target.value) !== -1);
setSearchData(newDate);
} else {
// 全部
const data = tableData.filter((item) => item.name.indexOf(e.target.value) !== -1);
setSearchData(data);
}
} else {
if (targetValue === 'emphasis') {
// 重点指标
filterEmphasis(tableData);
} else {
// 全部
setSearchData(tableData);
}
}
setSearchValue(e.target.value);
setSearchValue(value);
};
const onTabChange = (key) => {
......@@ -291,7 +287,7 @@ const RealTimeInfo = (props) => {
<div className={classNames(`${prefixCls}-search-wrap`)}>
<div className={classNames(`${prefixCls}-search`)}>
<div className={classNames(`${prefixCls}-label`)}>搜索：</div>
<Input placeholder={placeholder} onChange={onSearch} value={searchValue} />
<Input.Search placeholder={placeholder} onSearch={onSearch} onChange={changeSearch} />
</div>
<div className={classNames(`${prefixCls}-target`)}>
<div className={classNames(`${prefixCls}-label`)}>指标：</div>
......@@ -311,7 +307,7 @@ const RealTimeInfo = (props) => {
columns={columns}
locale={{ emptyText: <Empty /> }}
pagination={false}
dataSource={searchData}
dataSource={tableData}
{...props}
/>
</div>
......@@ -327,6 +323,7 @@ RealTimeInfo.defaultProps = {
placeholder: '输入指标名称等',
defaultTargetValue: 'emphasis',
user: null,
deviceParams: [],
deviceRealInfoParams: {},
deviceConfService: () => {},
pointAddressEntryService: () => {},
......@@ -339,7 +336,8 @@ RealTimeInfo.propTypes = {
modalTitle: PropTypes.string,
placeholder: PropTypes.string,
defaultTargetValue: PropTypes.string,
user: PropTypes.string,
user: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
deviceParams: PropTypes.array,
deviceRealInfoParams: PropTypes.object,
deviceConfService: PropTypes.func,
pointAddressEntryService: PropTypes.func,
......@@ -348,37 +346,3 @@ RealTimeInfo.propTypes = {
};
export default RealTimeInfo;
const defaultColumns = [
{
title: '序号',
dataIndex: 'index',
width: 60,
},
{
title: '指标名称',
dataIndex: 'name',
width: 150,
},
{
title: '最新指标',
dataIndex: 'value',
render: (text) => <a>{text}</a>,
},
{
title: '单位',
dataIndex: 'unit',
},
{
title: '指标类型',
dataIndex: 'type',
},
{
title: '数据描述',
dataIndex: 'desc',
},
{
title: '更新时间',
dataIndex: 'time',
},
];
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