Skip to content

W
wisdom-components
Commit 8eca492e authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化历史曲线的数据请求流程；报表变更字段

parent a7da9f06
Show whitespace changes
Inline Side-by-side
Showing with 106 additions and 94 deletions
packages/base-components/BasicReport/src/ReportsManage/ReportEditForm.js
View file @ 8eca492e
......@@ -124,7 +124,7 @@ const ReportEditForm = ({ reportDetails, reportData, onCancel, reportName, modal
fieldValue: _value === null ? _value : String(_value),
};
if (modalType === '编辑') {
_finalData.key = reportData.Key;
_finalData.key = reportData.key;
}
final.push(_finalData);
}
......
packages/base-components/BasicReport/src/ReportsManage/ReportsManage.js
View file @ 8eca492e
......@@ -461,7 +461,7 @@ const ReportsManage = (props) => {
if (!!waterMarkCustom && !waterMarkContent)
return message.warning('请输入水印内容！');
setExportLoading(true);
let keyItems = selectedRows.map((item) => item.Key);
let keyItems = selectedRows.map((item) => item.key);
let _data = addFilterAndSearchParams({
reportName,
pageIndex: 0,
......@@ -1058,7 +1058,7 @@ const ReportsManage = (props) => {
.delReportData({
reportName: reportName,
userId: USER_ID,
key: record.Key,
key: record.key,
})
.then((res) => {
if (res.code === 0) {
......@@ -1114,7 +1114,7 @@ const ReportsManage = (props) => {
permission.includes('rowSelect')
? {
type: 'checkbox',
selectedRowKeys: selectedRows.map((item) => item.Key),
selectedRowKeys: selectedRows.map((item) => item.key),
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows);
},
......@@ -1384,7 +1384,7 @@ const ReportsManage = (props) => {
.setReportAllow({
userId: USER_ID,
reportName: reportName,
reportKey: record.Key,
reportKey: record.key,
})
.then((res) => {
if (res.code === 0) {
......
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 8eca492e
......@@ -22,22 +22,22 @@ path: /
## 单图表
<!-- <code src="./demos/index.js"></code> -->
<code src="./demos/index.js"></code>
## 单图表-状态
<!-- <code src="./demos/indexForStatus.js"></code> -->
[//]: # (<code src="./demos/indexForStatus.js"></code>)
## 单图表-频率
<code src="./demos/indexForFrequency.js"></code>
[//]: # (<code src="./demos/indexForFrequency.js"></code>)
[//]: # '## 移动端'
[//]: # '<code src="./demos/mobile.js"></code>'
## 多图表
<!-- <code src="./demos/GridDemo.js"></code> -->
[//]: # (<code src="./demos/GridDemo.js"></code>)
## API
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 8eca492e
......@@ -32,11 +32,17 @@ const deviceParams = [
},*/
/* {
deviceCode: 'EGJZ00000197',
// sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
sensors: '1#变频器运行频率',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率',
deviceType: '二供机组',
// pointAddressID: 208,
}, */
},*/
{
"deviceCode": "SC00000001",
// "sensors": "出厂瞬时流量1,1#清水池液位,2#清水池液位,今日供水量,出水压力1",
"sensors": "出厂瞬时流量1",
"deviceType": "水厂"
}
/* {
deviceCode: 'EGJZ00000198',
// sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
......@@ -149,11 +155,11 @@ const deviceParams = [
sensors: '站点在线状态',
deviceType: '水源井',
}, */
{
/* {
"deviceCode": "SSB00000005",
"sensors": "频率,站点在线状态",
"deviceType": "送水泵"
}
}*/
];
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 8eca492e
......@@ -3,7 +3,7 @@
* 非influxdb版本的接口，使用isDilute=false实现；
* 建议：不抽稀的时候，传isDilute=false&zoom=''&unit=''
* */
import React, { useContext, useEffect, useMemo, useState, useCallback, useRef } from 'react';
import React, {useContext, useEffect, useMemo, useState, useCallback, useRef} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
......@@ -40,13 +40,13 @@ import {
import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import { globalConfig } from 'antd/lib/config-provider';
import { getSensorType } from './apis/index';
import { ExportExcel } from '@wisdom-components/exportexcel';
import {globalConfig} from 'antd/lib/config-provider';
import {getSensorType} from './apis/index';
import {ExportExcel} from '@wisdom-components/exportexcel';
import VirtualTable from './VirtualTable';
const { RangePicker } = DatePicker;
const { Option } = Select;
const {RangePicker} = DatePicker;
const {Option} = Select;
const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59';
......@@ -278,7 +278,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数
const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数
const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view');
const {
title,
......@@ -486,13 +486,13 @@ const HistoryView = (props) => {
onContrastChange(contrastOption);
setShowBoxOption(false);
setChartType('lineChart');
onCheckboxChange({ target: { value: false } }, 'chartType');
onCheckboxChange({ target: { value: false } }, 'ignoreOutliers');
onCheckboxChange({target: {value: false}}, 'chartType');
onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
} else {
// 自定义
// 不需要处理
setShowBoxOption(true);
onCheckboxChange({ target: { value: true } }, 'chartType');
onCheckboxChange({target: {value: true}}, 'chartType');
}
};
const onShortcutsChange = (e) => {
......@@ -502,37 +502,37 @@ const HistoryView = (props) => {
switch (_val) {
case '近3天':
_arr = [
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'days') },
{ key: 3, value: moment().subtract(2, 'days') },
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'days')},
{key: 3, value: moment().subtract(2, 'days')},
];
break;
case '近7天':
_arr = [
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'days') },
{ key: 3, value: moment().subtract(2, 'days') },
{ key: 4, value: moment().subtract(3, 'days') },
{ key: 5, value: moment().subtract(4, 'days') },
{ key: 6, value: moment().subtract(5, 'days') },
{ key: 7, value: moment().subtract(6, 'days') },
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'days')},
{key: 3, value: moment().subtract(2, 'days')},
{key: 4, value: moment().subtract(3, 'days')},
{key: 5, value: moment().subtract(4, 'days')},
{key: 6, value: moment().subtract(5, 'days')},
{key: 7, value: moment().subtract(6, 'days')},
];
break;
case '近3月':
_arr = [
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'months') },
{ key: 3, value: moment().subtract(2, 'months') },
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'months')},
{key: 3, value: moment().subtract(2, 'months')},
];
break;
case '近6月':
_arr = [
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'months') },
{ key: 3, value: moment().subtract(2, 'months') },
{ key: 4, value: moment().subtract(3, 'months') },
{ key: 5, value: moment().subtract(4, 'months') },
{ key: 6, value: moment().subtract(5, 'months') },
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'months')},
{key: 3, value: moment().subtract(2, 'months')},
{key: 4, value: moment().subtract(3, 'months')},
{key: 5, value: moment().subtract(4, 'months')},
{key: 6, value: moment().subtract(5, 'months')},
];
break;
}
......@@ -593,7 +593,7 @@ const HistoryView = (props) => {
)}
{timeValue === 'contrast' && ( // 同期对比
<>
<Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
<Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
<Option value="day">日</Option>
<Option value="month" disabled={lineDataType === '原始曲线'}>
月
......@@ -617,14 +617,14 @@ const HistoryView = (props) => {
picker={contrastOption === 'day' ? undefined : contrastOption}
value={child.value}
onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
style={{ width: 130, border: !shortcutsValue ? '1px solid #1890ff' : '' }}
style={{width: 130, border: !shortcutsValue ? '1px solid #1890ff' : ''}}
/>
{datePickerArr.length > 2 && (
<div
className={classNames(`${prefixCls}-contrast-delete`)}
onClick={() => handleDeleteDatePicker(index)}
>
<CloseCircleFilled />
<CloseCircleFilled/>
</div>
)}
</div>
......@@ -633,7 +633,7 @@ const HistoryView = (props) => {
)}
</div>
))}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
</>
)}
</div>
......@@ -712,12 +712,12 @@ const HistoryView = (props) => {
</Checkbox>
{child.tooltip && (
<Tooltip title={child.tooltip}>
<QuestionCircleFilled className={`${prefixCls}-question`} />
<QuestionCircleFilled className={`${prefixCls}-question`}/>
</Tooltip>
)}
{child.hasSub && child.checked && false ? (
<Select
style={{ width: 80, marginLeft: 10 }}
style={{width: 80, marginLeft: 10}}
value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)}
>
......@@ -737,7 +737,7 @@ const HistoryView = (props) => {
return (
<div
className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? { width: '100%' } : {}}
style={isChart && isSingle ? {width: '100%'} : {}}
>
{isChart && !isStatus ? (
<>
......@@ -750,7 +750,7 @@ const HistoryView = (props) => {
{/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled
style={{ marginLeft: 6 }}
style={{marginLeft: 6}}
className={`${prefixCls}-question`}
/>
</Tooltip>
......@@ -763,16 +763,16 @@ const HistoryView = (props) => {
<>
{lineDataType !== '原始曲线' ? (
<>
<div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}>
<div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>
曲线形态
</div>
<Radio.Group
value={chartType}
style={{ marginRight: 16 }}
style={{marginRight: 16}}
onChange={(e) => {
let _value = e.target.value;
setChartType(_value);
onCheckboxChange({ target: { value: _value !== 'boxChart' } }, 'chartType');
onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType');
}}
>
<Radio.Button value={'lineChart'}>线形图</Radio.Button>
......@@ -803,7 +803,7 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && (
<Select
value={dataThinKey}
style={{ width: 90 }}
style={{width: 90}}
onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin}
>
......@@ -857,7 +857,8 @@ const HistoryView = (props) => {
aDom.click();
aDom.remove();
})
.catch((err) => {});
.catch((err) => {
});
});
};
const exportFeatureBtn = () => {
......@@ -913,7 +914,7 @@ const HistoryView = (props) => {
// data = data.filter(item => item.sensorName !== '是否在线');
const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
const dataIndexAccess = (dataItem, index) => {
const { stationCode, sensorName } = dataItem;
const {stationCode, sensorName} = dataItem;
return `${stationCode}-${sensorName}-${index}`;
};
......@@ -924,7 +925,7 @@ const HistoryView = (props) => {
// 判断是否是单设备，单设备则不显示设备名称
// 处理表头数据
const columnsData = data.map((item, index) => {
const { stationCode, equipmentName, sensorName, unit, dataModel } = item;
const {stationCode, equipmentName, sensorName, unit, dataModel} = item;
const dataIndex = dataIndexAccess(item, index);
let _title = '';
if (deviceConfig.current.oneDevice) {
......@@ -954,7 +955,7 @@ const HistoryView = (props) => {
// 格式化时间对齐数据, 生成行数
const timeData = {};
const buildDefaultData = (time) => {
const obj = { key: time, time: time };
const obj = {key: time, time: time};
data.forEach((item, index) => {
const dataIndex = dataIndexAccess(item, index);
obj[dataIndex] = '';
......@@ -963,7 +964,7 @@ const HistoryView = (props) => {
return obj;
};
data.forEach((item, index) => {
const { stationCode, sensorName, dataModel } = item;
const {stationCode, sensorName, dataModel} = item;
dataModel &&
dataModel.forEach((data) => {
const formatTime = moment(data.pt).format(format);
......@@ -978,7 +979,7 @@ const HistoryView = (props) => {
});
// 处理表格数据
data.forEach((child, index) => {
const { dataModel } = child;
const {dataModel} = child;
const dataIndex = dataIndexAccess(child, index);
dataModel &&
dataModel.forEach((value, j) => {
......@@ -1008,7 +1009,12 @@ const HistoryView = (props) => {
const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState([]);
const beforChangeParams = (value = {}) => {
if (!needMarkLine) return Promise.resolve();
// 不需要报警标线 或者 多曲线、多设备时不显示报警标线
let _lengthEqual0 = deviceParams?.length === 0;
let _lengthEqual1 = deviceParams?.length === 1;
let _lengthMoreThan1 = deviceParams?.length > 1;
let returnNothing = !needMarkLine || _lengthEqual0 || _lengthMoreThan1 || (_lengthEqual1 && deviceParams[0].sensors.split(',').length > 1)
if (returnNothing) return Promise.resolve();
return getDeviceAlarmScheme({
data: deviceParams.map((item) => ({
deviceType: item.deviceType,
......@@ -1029,34 +1035,34 @@ const HistoryView = (props) => {
};
const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => {
if (lineDataType === '原始曲线') {
return { unit: '', zoom: '' };
return {unit: '', zoom: ''};
}
// edit by zy 根据选择的时长控制抽稀频度
if (diffYears > 0) {
if (diffYears === 1) return { unit: 'h', zoom: '24' };
return { unit: 'h', zoom: '48' };
if (diffYears === 1) return {unit: 'h', zoom: '24'};
return {unit: 'h', zoom: '48'};
} else if (diffYears === 0 && diffDays > 0) {
if (diffDays > 90) return { unit: 'h', zoom: '24' };
if (diffDays > 30) return { unit: 'h', zoom: '4' };
if (diffDays > 15) return { unit: 'h', zoom: '2' };
if (diffDays > 7) return { unit: 'h', zoom: '1' };
if (diffDays > 3) return { unit: 'min', zoom: '20' };
if (diffDays > 1) return { unit: 'min', zoom: '15' };
if (diffDays === 1) return { unit: 'min', zoom: '5' };
if (diffDays > 90) return {unit: 'h', zoom: '24'};
if (diffDays > 30) return {unit: 'h', zoom: '4'};
if (diffDays > 15) return {unit: 'h', zoom: '2'};
if (diffDays > 7) return {unit: 'h', zoom: '1'};
if (diffDays > 3) return {unit: 'min', zoom: '20'};
if (diffDays > 1) return {unit: 'min', zoom: '15'};
if (diffDays === 1) return {unit: 'min', zoom: '5'};
} else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
if (diffHours > 12) return { unit: 'min', zoom: '5' };
if (diffHours > 4) return { unit: 'min', zoom: '1' };
if (diffHours > 1) return { unit: 's', zoom: '30' };
if (diffHours > 0) return { unit: 's', zoom: '5' };
return { unit: 's', zoom: '5' };
if (diffHours > 12) return {unit: 'min', zoom: '5'};
if (diffHours > 4) return {unit: 'min', zoom: '1'};
if (diffHours > 1) return {unit: 's', zoom: '30'};
if (diffHours > 0) return {unit: 's', zoom: '5'};
return {unit: 's', zoom: '5'};
} else {
return { unit: '', zoom: '' };
return {unit: '', zoom: ''};
}
};
// 处理接口服务参数的变化
const onChangeParams = (value = {}) => {
const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days');
// 查询时段大于7天时，不提供1分钟的抽稀选项。
if (_diffDays > 7 && zoom === '1' && unit === 'min') {
......@@ -1067,7 +1073,7 @@ const HistoryView = (props) => {
const zoomArray = [];
deviceParams
.map((item) => {
let _item = { ...item };
let _item = {...item};
// 历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15
/* _item.sensors =
item.sensors && !item.sensors.includes('是否在线')
......@@ -1109,10 +1115,10 @@ const HistoryView = (props) => {
activeTabKey === 'curve'
? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType)
: !isDilute
? { zoom: '', unit: '' }
? {zoom: '', unit: ''}
: {}; // 表格也支持全数据模式；
requestArr.push(getHistoryInfo({ ...param, ...zoomParam }));
requestArr.push(getHistoryInfo({...param, ...zoomParam}));
});
setLoading(true);
Promise.all(requestArr)
......@@ -1121,7 +1127,7 @@ const HistoryView = (props) => {
if (results.length) {
let data = [];
results.forEach((res, index) => {
const { dateFrom, dateTo } = dateRange?.[index] ?? {};
const {dateFrom, dateTo} = dateRange?.[index] ?? {};
if (res.code === 0 && res.data.length) {
res.data.forEach((d) => {
d.dateFrom = dateFrom || '';
......@@ -1134,8 +1140,8 @@ const HistoryView = (props) => {
* 请注意，此项为重要变更，此变更会影响原始数据。
*/
d.dataModel = d.dataModel.map((item) => {
let { firstPV, lastPV, maxPV, minPV, pv } = item;
if (pv!==null && firstPV === null && lastPV === null && maxPV === null && minPV === null) {
let {firstPV, lastPV, maxPV, minPV, pv} = item;
if (pv !== null && firstPV === null && lastPV === null && maxPV === null && minPV === null) {
firstPV = pv;
lastPV = pv;
maxPV = pv;
......@@ -1190,7 +1196,7 @@ const HistoryView = (props) => {
useEffect(() => {
if (!completeInit) return;
const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
beforChangeParams().finally(() => {
onChangeParams({
isDilute: dataThin,
......@@ -1244,7 +1250,7 @@ const HistoryView = (props) => {
}}
/>
) : (
<PandaEmpty />
<PandaEmpty/>
)}
</div>
</>
......@@ -1292,13 +1298,13 @@ const HistoryView = (props) => {
)}
</div>
{lineDataType === '原始曲线' && false ? (
<div style={{ marginTop: 10 }}>展示区间：{returnLongestPeriod(chartDataSource)}</div>
<div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div>
) : (
''
)}
<div className={`${prefixCls}-content`}>
{!chartDataSource.length ? (
<PandaEmpty />
<PandaEmpty/>
) : grid === true ? (
<GridChart
curveCenter={curveCenter}
......@@ -1344,7 +1350,7 @@ const HistoryView = (props) => {
)
return setCompleteInit(true);
setLoading(true);
const { deviceCode, deviceType, sensors } = deviceParams[0];
const {deviceCode, deviceType, sensors} = deviceParams[0];
let _id = (
await getPointAddress({
code: deviceCode,
......@@ -1371,7 +1377,7 @@ const HistoryView = (props) => {
return final;
}, {});
let _checkboxData = [...checkboxData].map((item) => {
let _item = { ...item };
let _item = {...item};
if (_opt[item.label] !== undefined) {
_item.checked = _opt[item.label] === 'true';
}
......@@ -1439,7 +1445,7 @@ const HistoryView = (props) => {
}, [loading]);
return (
<div className={classNames(prefixCls, 'wkt-scroll-light')}>
<div className={classNames(`${prefixCls}-spin`)} style={{ position: 'relative' }}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}>
{loading || percent !== 0 ? (
<div className={classNames(`${prefixCls}-progressWrapper`)}>
<div className={classNames(`${prefixCls}-contentWrapper`)}>
......@@ -1457,7 +1463,7 @@ const HistoryView = (props) => {
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</>
) : (
<Spin spinning={loading || false} />
<Spin spinning={loading || false}/>
)}
</div>
</div>
......@@ -1479,7 +1485,7 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && (
<>
<Button type="link" onClick={exportFeatureBtn}>
<DownloadOutlined />
<DownloadOutlined/>
下载
</Button>
{/* 保留此处代码，当项目需要表格定制时需要使用 */}
......
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