Commit fdf3e3f7 authored by 陈龙's avatar 陈龙

fix: 修复历史曲线仅显示曲线的功能交互的问题;修复其他问题

parent 7f0ffbe5
...@@ -15,7 +15,6 @@ const SimgleChart = memo((props) => { ...@@ -15,7 +15,6 @@ const SimgleChart = memo((props) => {
deviceAlarmSchemes, deviceAlarmSchemes,
chartType, chartType,
justLine justLine
} = props; } = props;
const chartRef = useRef(); const chartRef = useRef();
...@@ -42,8 +41,11 @@ const SimgleChart = memo((props) => { ...@@ -42,8 +41,11 @@ const SimgleChart = memo((props) => {
const count = Object.values(selected || {}).filter((item) => item).length; const count = Object.values(selected || {}).filter((item) => item).length;
const option = cloneDeep(chart.getOption()); const option = cloneDeep(chart.getOption());
const needMarkLine = count === 1; const needMarkLine = count === 1;
// 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _tempDataArray = dataSource.filter(item => item.sensorName === '是否在线');
option.series.forEach((item, index) => { option.series.forEach((item, index) => {
let offlineAreas = offlineArea(dataSource[index]); let _data = _tempDataArray.find(offline => offline.stationCode === item.stationCode);
let offlineAreas = offlineArea(_data);
if (offlineAreas.data?.length) { if (offlineAreas.data?.length) {
option.markArea = null; option.markArea = null;
item.markArea = offlineAreas; item.markArea = offlineAreas;
...@@ -118,7 +120,6 @@ const SimgleChart = memo((props) => { ...@@ -118,7 +120,6 @@ const SimgleChart = memo((props) => {
!dataSource.find((e) => e.dataModel && e.dataModel.length > 0), !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
[dataSource], [dataSource],
); );
return isEmpty ? ( return isEmpty ? (
<PandaEmpty /> <PandaEmpty />
) : ( ) : (
......
...@@ -10,8 +10,10 @@ const deviceParams = [ ...@@ -10,8 +10,10 @@ const deviceParams = [
// }, // },
{ {
// deviceCode: 'EGBF00000002', // deviceCode: 'EGBF00000002',
deviceCode: 'EGBF00000082', // deviceCode: 'EGBF00000018',
sensors: '进水压力', deviceCode: 'EGBF00000017',
// deviceCode: 'EGBF00000014',
sensors: '今日供水量,今日用电量,1#水箱液位,是否在线',
deviceType: '二供泵房', deviceType: '二供泵房',
pointAddressID: 4, pointAddressID: 4,
}, },
......
...@@ -422,7 +422,7 @@ const HistoryView = (props) => { ...@@ -422,7 +422,7 @@ const HistoryView = (props) => {
}; };
// 曲线设置项选择/取消 // 曲线设置项选择/取消
const onCheckboxChange = (e, key) => { const onCheckboxChange = (e, key, showJustLine) => {
let data = [...checkboxData]; let data = [...checkboxData];
let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示 let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
let _index1 = data.findIndex(item => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示 let _index1 = data.findIndex(item => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示
...@@ -431,7 +431,7 @@ const HistoryView = (props) => { ...@@ -431,7 +431,7 @@ const HistoryView = (props) => {
item.checked = e.target.checked; item.checked = e.target.checked;
} }
}); });
if (key === 'ignoreOutliers') { if (key === 'ignoreOutliers' && showJustLine) {
data[_index].showInCurve = e.target.checked; data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked; data[_index].checked = e.target.checked;
} }
...@@ -449,7 +449,7 @@ const HistoryView = (props) => { ...@@ -449,7 +449,7 @@ const HistoryView = (props) => {
setDataThinKey(value); setDataThinKey(value);
}; };
const renderCheckbox = (child) => { const renderCheckbox = (child, showJustLine) => {
const curveAccess = activeTabKey === 'curve' && child.showInCurve; const curveAccess = activeTabKey === 'curve' && child.showInCurve;
const tableAccess = activeTabKey === 'table' && child.showInTable; const tableAccess = activeTabKey === 'table' && child.showInTable;
const gridOptions = ['curveCenter']; const gridOptions = ['curveCenter'];
...@@ -458,7 +458,7 @@ const HistoryView = (props) => { ...@@ -458,7 +458,7 @@ const HistoryView = (props) => {
return ( return (
(curveAccess || tableAccess) && ( (curveAccess || tableAccess) && (
<> <>
<Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}> <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key, showJustLine)}>
{child.label} {child.label}
</Checkbox> </Checkbox>
{child.tooltip && ( {child.tooltip && (
...@@ -488,7 +488,7 @@ const HistoryView = (props) => { ...@@ -488,7 +488,7 @@ const HistoryView = (props) => {
} }
<div className={classNames(`${prefixCls}-label`)}>曲线设置</div> <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
{checkboxData.map((child) => { {checkboxData.map((child) => {
const box = renderCheckbox(child); const box = renderCheckbox(child, (isChart && isSingle));
if (!box) return null; if (!box) return null;
return ( return (
<div key={child.key} className={`${prefixCls}-cover-item`}> <div key={child.key} className={`${prefixCls}-cover-item`}>
...@@ -671,7 +671,11 @@ const HistoryView = (props) => { ...@@ -671,7 +671,11 @@ const HistoryView = (props) => {
const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value; const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
const requestArr = []; const requestArr = [];
const acrossTables = []; const acrossTables = [];
deviceParams.forEach((i) => { deviceParams.map(item => {
let _item = {...item};
_item.sensors = (item.sensors && !item.sensors.includes('是否在线')) ? item.sensors + ',是否在线' : item.sensors;
return _item;
}).forEach((i) => {
if (i.sensors && i.deviceCode && i.deviceCode) if (i.sensors && i.deviceCode && i.deviceCode)
acrossTables.push(_.omit(i, ['pointAddressID'])); acrossTables.push(_.omit(i, ['pointAddressID']));
}); });
......
...@@ -42,7 +42,7 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => { ...@@ -42,7 +42,7 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
const dataAccessor = (data, contrast, contrastOption) => { const dataAccessor = (data, contrast, contrastOption) => {
const {dataModel} = data; const {dataModel} = data;
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00'; const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
return dataModel.map((item) => { return dataModel.filter(item => item.sensorName !== '是否在线').map((item) => {
const time = contrast ? moment(item.pt).format(formatStr) : item.pt; const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
return [moment(time).valueOf(), item.pv]; return [moment(time).valueOf(), item.pv];
}); });
...@@ -212,7 +212,7 @@ export const offlineArea = (dataItem) => { ...@@ -212,7 +212,7 @@ export const offlineArea = (dataItem) => {
let datas = new Array(); let datas = new Array();
let offlineData = []; let offlineData = [];
let hasOffline = false; let hasOffline = false;
dataModel.forEach((item) => { dataModel.forEach((item, index) => {
if (!item.pv && !hasOffline) { if (!item.pv && !hasOffline) {
offlineData = [ offlineData = [
{ {
...@@ -221,7 +221,7 @@ export const offlineArea = (dataItem) => { ...@@ -221,7 +221,7 @@ export const offlineArea = (dataItem) => {
}, },
]; ];
hasOffline = true; hasOffline = true;
} else if (item.pv && hasOffline) { } else if ((item.pv && hasOffline)) {
offlineData.push({ offlineData.push({
xAxis: new Date(item.pt), xAxis: new Date(item.pt),
}); });
...@@ -330,7 +330,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -330,7 +330,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
}; };
const seriesTemplate = (param, unit) => { const seriesTemplate = (param, unit) => {
if (!param) return ''; if (!param) return '';
console.log(param)
const {value, encode} = param; const {value, encode} = param;
const val = value[encode.y[0]]; const val = value[encode.y[0]];
const _unit = unit || 'Mpa'; const _unit = unit || 'Mpa';
...@@ -394,7 +393,13 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -394,7 +393,13 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name)); const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
return {get}; return {get};
})(); })();
let series = dataSource.map((item, index) => { let _offlineData = [];
let series = dataSource.filter(item => {
if (item.sensorName === '是否在线') {
_offlineData.push(item);
}
return item.sensorName !== '是否在线';
}).map((item, index) => {
const {sensorName, unit} = item; const {sensorName, unit} = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor); const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const data = dataAccessor(item, contrast, contrastOption); const data = dataAccessor(item, contrast, contrastOption);
...@@ -404,7 +409,17 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -404,7 +409,17 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const markLine = showMarkLine ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes) : {}; const markLine = showMarkLine ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes) : {};
const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {}; const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
let markArea = null; let markArea = null;
let offlineAreas = offlineArea(item); // 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _offlineAreasData = _offlineData.map(item => {
let _item = {...item};
_item.dataModel = item.dataModel.map(d => {
let _d = {...d};
_d.pv = 0;
return _d
})
return _item
}).find(offline => offline.stationCode === item.stationCode)
let offlineAreas = offlineArea(_offlineAreasData);
if (offlineAreas.data?.length) { if (offlineAreas.data?.length) {
restOption.markArea = null; restOption.markArea = null;
markArea = offlineAreas; markArea = offlineAreas;
...@@ -423,7 +438,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -423,7 +438,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
markArea, markArea,
}; };
}); });
console.log('series: ', series);
// 由于series更新后,没有的数据曲线仍然停留在图表区上,导致图表可视区范围有问题 // 由于series更新后,没有的数据曲线仍然停留在图表区上,导致图表可视区范围有问题
const min = Math.min( const min = Math.min(
...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined), ...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
...@@ -435,7 +449,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -435,7 +449,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
); );
let xAxis = {type: 'time', min, max}; let xAxis = {type: 'time', min, max};
decorateAxisGridLine(xAxis, showGridLine); decorateAxisGridLine(xAxis, showGridLine);
console.log('series: ', series);
const tooltipTimeFormat = !contrast const tooltipTimeFormat = !contrast
? 'YYYY-MM-DD HH:mm:ss' ? 'YYYY-MM-DD HH:mm:ss'
: contrastOption === 'day' : contrastOption === 'day'
......
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