Skip to content

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

feat: 发布历史曲线

parent 6098857f
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 41 deletions
packages/extend-components/EC_HistoryView/src/GridChart.js
View file @ d69a4882
......@@ -5,7 +5,6 @@ import PandaEmpty from '@wisdom-components/empty';
import optionGenerator from './utils';
import {getPointAddress, getPointAddressEntry, getSensorsRealName, getSensorType, getStatisticsInfo} from "./apis";
import moment from "moment";
import {isString} from "util";
const ChartTitle = ({prefixCls, title, unit}) => {
const cls = `${prefixCls}-grid-item-title`;
......@@ -31,6 +30,7 @@ const GridChart = memo((props) => {
const [gridData, setGridData] = useState([]);
const [pointAddressEntryData, setPointAddressEntryData] = useState(null);
const [sensorType, setSensorType] = useState(null);
const [isInit, setIsInit] = useState(true);
// 新增逻辑：需要区分出哪些是统计值
/**
......@@ -170,9 +170,9 @@ const GridChart = memo((props) => {
return 'day';
};
useEffect(() => {
async function handle() {
let _data = await handleDataSource(dataSource)??[];
let _data = isInit ? dataSource : (await handleDataSource(dataSource) ?? []);
setIsInit(false);
const grids = _data.reduce((pre, item, index) => {
const {sensorName, deviceType} = item;
const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
......@@ -229,8 +229,29 @@ const GridChart = memo((props) => {
showGridLine: true,
isMultiple: gridData.length > 1
});
// 在多图表里，底部缩放条的高度减小
// 无数据时，图表需要显示默认图形 2024年3月14日
// 1. x轴
let dataEmpty = [];
option.series.forEach(item => {
if (item.data.length === 0) {
dataEmpty.push(true)
item.data = [[moment(dataSource?.[0]?.dateFrom).valueOf(), null], [moment(dataSource?.[0]?.dateTo).valueOf(), null]]
} else {
dataEmpty.push(false);
}
})
// 2. y轴
let allEmpty = dataEmpty.length ? dataEmpty.reduce((final, cur) => {
if (!cur) final = false;
return final
}, true) : true;
if (allEmpty) {
option.yAxis.forEach(item => {
item.max = 100;
item.min = 0;
});
option.tooltip = false;
}
return {
key,
option: option,
......
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ d69a4882
......@@ -56,7 +56,13 @@ const SingleChart = memo((props) => {
config.special.allValDesc = allValDesc;
return specialTypeChartOptionGenerator({dataSource, config});
}
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData);
let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData);
let isEmpty = _option.series.length===0;
if (isEmpty) {
_option.yAxis.max=100;
_option.yAxis.min=0;
}
return _option;
}, [dataSource, smooth, curveCenter, chartType, predicateData]);
useEffect(() => {
chartRef.current?.resize?.();
......@@ -108,6 +114,7 @@ const SingleChart = memo((props) => {
let minValueIndex = valueArr.findIndex(val => val === minValue);
let maxPoint = pointArr[maxValueIndex];
let minPoint = pointArr[minValueIndex];
if (!maxPoint || !minPoint) return {}
// 3. 计算坐标位置，返回的是 [x,y]的像素坐标
let maxPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(maxPoint.pt).valueOf(), maxPoint.pv])
let minPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(minPoint.pt).valueOf(), minPoint.pv])
......@@ -313,11 +320,12 @@ const SingleChart = memo((props) => {
!dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
[dataSource],
);
return isEmpty ? (
<PandaEmpty/>
) : (
<BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
);
return <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
/* return isEmpty ? (
<PandaEmpty/>
) : (
<BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
);*/
});
export default SingleChart;
packages/extend-components/EC_HistoryView/src/index.js
View file @ d69a4882
......@@ -282,7 +282,31 @@ const handleBatchTime = (arr, cOption) => {
newArr = _.uniqWith(newArr, _.isEqual); // 去掉重复日期时间
return newArr;
};
const handleFakeData = (dateRange, deviceParams) => {
let dateFrom = dateRange[0].dateFrom;
let dateTo = dateRange[0].dateTo;
return deviceParams.reduce((final, cur) => {
let _arr = cur.sensors.split(',');
_arr.forEach(sensor => {
final.push({
dataModel: [
/* {pt: dateFrom, pv: null},
{pt: dateTo, pv: null}*/
// {pv:null}
{pv: null}
],
dateFrom,
dateTo,
deviceCode: cur.deviceCode,
deviceType: cur.deviceType,
sensorName: sensor,
equipmentName: '',
stationCode: cur.deviceCode
})
})
return final;
}, [])
}
const timeColumn = {
title: '采集时间',
dataIndex: 'time',
......@@ -325,7 +349,6 @@ const HistoryView = (props) => {
// 同期对比模式
const [contrastOption, setContrastOption] = useState('day'); // 对比时间类型: 日/月
const [datePickerArr, setDatePickerArr] = useState(DefaultDatePicker(defaultDate)); // 对比时间段配置值
const [checkboxData, setCheckboxData] = useState(() => [...CheckboxData]); // 曲线设置项
const [dataThinKey, setDataThinKey] = useState(
timeIntervalList[0].key === '1min' ? timeIntervalList[1].key : timeIntervalList[0].key,
......@@ -334,7 +357,6 @@ const HistoryView = (props) => {
const [columns, setColumns] = useState([]);
const [tableData, setTableData] = useState([]);
const [chartDataSource, setChartDataSource] = useState([]);
const [timeOrder, setTimeOrder] = useState('descend');
const [chartType, setChartType] = useState('lineChart');
const [showBoxOption, setShowBoxOption] = useState(true);
......@@ -354,8 +376,9 @@ const HistoryView = (props) => {
const [predicateDevice, setPredicateDevice] = useState(null);
const [predicateData, setPredicateData] = useState([]);
const [predicateTime, setPredicateTime] = useState(null);
// 这部分功能有问题，等待解决后上线 2024年3月13日
// const [discreteDeviceType, setDiscreteDeviceType] = useState(['水厂'])
const [discreteDeviceType, setDiscreteDeviceType] = useState(['水厂'])
// 历史数据相关的特征描述
const deviceConfig = useRef({
oneDevice: deviceParams.length === 1, //单设备
......@@ -387,7 +410,7 @@ const HistoryView = (props) => {
}
}, [dateRange]);
const [dates, setDates] = useState(null);
const [chartDataSource, setChartDataSource] = useState(handleFakeData(dateRange, deviceParams) ?? []);
const configDependence = checkboxData
.filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
.map((item) => item.checked)
......@@ -1080,7 +1103,7 @@ const HistoryView = (props) => {
const acrossTables = [];
const zoomArray = [];
// 这部分功能有问题，等待解决后上线 2024年3月13日
// let hasDiscreteDeviceType = false;
let hasDiscreteDeviceType = false;
deviceParams
.map((item) => {
let _item = {...item};
......@@ -1095,9 +1118,9 @@ const HistoryView = (props) => {
if (i.sensors && i.deviceCode)
acrossTables.push(_.omit(i, ['pointAddressID']));
// 这部分功能有问题，等待解决后上线 2024年3月13日
/* if (discreteDeviceType.includes(i.deviceType)) {
hasDiscreteDeviceType = true;
}*/
if (discreteDeviceType.includes(i.deviceType)) {
hasDiscreteDeviceType = true;
}
});
if (!acrossTables?.length || !dateRange.length) {
handleTableData([]);
......@@ -1138,9 +1161,9 @@ const HistoryView = (props) => {
}
// 2024年3月11日 如果设备是某些特殊设备，则采用离散型算法
// 这部分功能有问题，等待解决后上线 2024年3月13日
/* if (hasDiscreteDeviceType) {
_finalParams.algorithmName = "outliers";
}*/
if (hasDiscreteDeviceType && ignoreOutliers) {
_finalParams.algorithmName = "derivative";
}
requestArr.push(getHistoryInfo(_finalParams));
});
setLoading(true);
......@@ -1163,6 +1186,7 @@ const HistoryView = (props) => {
*
* 请注意，此项为重要变更，此变更会影响原始数据。
*/
// d.dataModel=[];
d.dataModel = d.dataModel.map((item) => {
let {firstPV, lastPV, maxPV, minPV, pv} = item;
if (pv !== null && firstPV === null && lastPV === null && maxPV === null && minPV === null) {
......@@ -1330,9 +1354,7 @@ const HistoryView = (props) => {
''
)}
<div className={`${prefixCls}-content`}>
{!chartDataSource.length ? (
<PandaEmpty/>
) : grid === true ? (
{grid === true ? (
<GridChart
curveCenter={curveCenter}
prefixCls={prefixCls}
......@@ -1348,6 +1370,7 @@ const HistoryView = (props) => {
/>
) : (
<SingleChart
dateRange={dateRange}
showBoxOption={showBoxOption}
lineDataType={lineDataType}
curveCenter={curveCenter}
......@@ -1378,14 +1401,15 @@ const HistoryView = (props) => {
const getDefaultOptions = async () => {
// 特定设备
// 这部分功能有问题，等待解决后上线 2024年3月13日
/* getDictionaryInfoAll({
level: '离散算法设备类型',
}).then(res => {
if (res.code === 0 && res.data.length) {
let deviceType = res.data.find(item => item.fieldName === '设备类型')?.fieldValue;
setDiscreteDeviceType(deviceType.split(',').filter(item => item))
}
})*/
getDictionaryInfoAll({
level: '离散算法设备类型',
}).then(res => {
if (res.code === 0 && res.data.length) {
let deviceType = res.data.find(item => item.fieldName === '设备类型')?.fieldValue;
setDiscreteDeviceType(deviceType.split(',').filter(item => item))
}
})
// 非单曲线、单指标不执行
if (
deviceParams?.length !== 1 ||
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ d69a4882
......@@ -648,14 +648,16 @@ const returnXAxis = ({
};
});
// 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
let minArr = series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined);
let maxArr = series.map((item) => item.data?.[item.data.length - 1]?.[0]).filter((item) => item !== undefined);
let minObj = minArr.length ? minArr : [moment(dataSource?.[0]?.dateFrom).valueOf()];
let maxObj = maxArr.length ? maxArr : [moment(dataSource?.[0]?.dateTo).valueOf()];
const min = Math.min(
...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
);
...minObj
)
const max = Math.max(
...series
.map((item) => item.data?.[item.data.length - 1]?.[0])
.filter((item) => item !== undefined),
);
...maxObj
)
return {
xAxis: {
type: 'time',
......@@ -1331,7 +1333,6 @@ const optionGenerator = (
visualMap,
...restOption,
};
console.log('_option: ', _options);
return _options;
};
......
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