Skip to content

W
wisdom-components
Commit ef721b5d authored by 李纪文's avatar 李纪文
Browse files
Options

fix: 修改实时数据数据为0展示--问题

parent 7fa4df59
Show whitespace changes
Inline Side-by-side
Showing with 291 additions and 73 deletions
package.json
View file @ ef721b5d
...@@ -180,7 +180,8 @@ ...@@ -180,7 +180,8 @@
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"react-resizable": "^3.0.4", "react-resizable": "^3.0.4",
"react-window": "1.8.9", "react-window": "1.8.9",
"sha1": "^1.1.1" "sha1": "^1.1.1",
"skmeans": "^0.11.3"
}, },
"size-limit": [ "size-limit": [
{ {
......
packages/extend-components/EC_AlarmCurve/src/demos/Basic.tsx
View file @ ef721b5d
import React from 'react'; import React, { useState } from 'react';
import { LimitCurve } from '../index'; import { LimitCurve } from '../index';
import { Button } from 'antd';
const Demos = () => { const Demos = () => {
const [open, setOpen] = useState(false);
return ( return (
<> <>
<LimitCurve /> <Button
onClick={() => {
setOpen(true);
}}
>
打开限制曲线
</Button>
<LimitCurve open={open} />
</> </>
); );
}; };
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/K-means.js 0 → 100644
View file @ ef721b5d
const getDataRanges = (extremes) => {
var ranges = [];
for (var dimension in extremes) {
ranges[dimension] = extremes[dimension].max - extremes[dimension].min;
}
return ranges;
}
const getDataExtremes = (data)=> {
var extremes = [];
for (var i in data) {
var point = data[i];
for (var dimension in point) {
if (!extremes[dimension]) {
extremes[dimension] = { min: 1000, max: 0 };
}
if (point[dimension] < extremes[dimension].min) {
extremes[dimension].min = point[dimension];
}
if (point[dimension] > extremes[dimension].max) {
extremes[dimension].max = point[dimension];
}
}
}
return extremes;
}
const initMeans = (k, dataExtremes, dataRange) => {
if (!k) {
k = 3;
}
const means = [];
while (k--) {
var mean = [];
for (var dimension in dataExtremes) {
mean[dimension] = dataExtremes[dimension].min + Math.random() * dataRange[dimension];
}
means.push(mean);
}
return means;
}
const makeAssignments = (means, data) => {
const assignments = {};
for (var i in data) {
var point = data[i];
var distances = [];
for (var j in means) {
var mean = means[j];
var sum = 0;
for (var dimension in point) {
var difference = point[dimension] - mean[dimension];
difference *= difference;
sum += difference;
}
distances[j] = Math.sqrt(sum);
}
assignments[i] = distances.indexOf(Math.min.apply(null, distances));
}
return assignments;
}
const setup = (data) => {
const dataExtremes = getDataExtremes(data);
const dataRange = getDataRanges(dataExtremes);
const means = initMeans(3, dataExtremes, dataRange);
return makeAssignments(means, data);
}
export default setup;
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.js
View file @ ef721b5d
...@@ -4,23 +4,22 @@ import classNames from 'classnames'; ...@@ -4,23 +4,22 @@ import classNames from 'classnames';
import moment from 'moment'; import moment from 'moment';
import { BasicChart } from '@wisdom-components/basicchart'; import { BasicChart } from '@wisdom-components/basicchart';
import { getHistoryInfo } from '../apis'; import { getHistoryInfo } from '../apis';
import { std,median } from 'mathjs'; import { std } from 'mathjs';
import skmeans from 'skmeans';
import './index.less'; import './index.less';
const LimitCurve = (props) => { const LimitCurve = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('limit-curve'); const prefixCls = getPrefixCls('limit-curve');
const { width, deviceCode, sensors, deviceType, getContainer, title } = props; const { width, deviceCode, sensors, deviceType, getContainer, title } = props;
const [open, isOpen] = useState(true); const [open, setOpen] = useState(false);
const [cluster, setCluster] = useState('K-means'); // 聚集算法 const [cluster, setCluster] = useState('K-means'); // 聚集算法
const [outlier, setOutlier] = useState(1); // 过滤异常 const [outlier, setOutlier] = useState(3); // 过滤异常
const [curve, setCurve] = useState('特征曲线'); // 曲线类型 const [curve, setCurve] = useState('特征曲线'); // 曲线类型
const [sensitive, setSensitive] = useState(10); // 敏感度 const [sensitive, setSensitive] = useState(10); // 敏感度
const [stdVal, setStdVal] = useState(null); // 均方差
const [medianVal, setMedianVal] = useState(null); // 平均值
const [sensorData, setSensorData] = useState([]); // 所有数据 const [sensorData, setSensorData] = useState([]); // 所有数据
const [chartData, setChartData] = useState([]); // 图表数据 const [chartData, setChartData] = useState([]); // 图表数据
const [timeCycle, setTimeCycle] = useState(60);
const [options, setOptions] = useState({}); const [options, setOptions] = useState({});
const chartRef = useRef(null); const chartRef = useRef(null);
...@@ -31,7 +30,9 @@ const LimitCurve = (props) => { ...@@ -31,7 +30,9 @@ const LimitCurve = (props) => {
}; };
// 取消 // 取消
const onCancel = () => {}; const onCancel = () => {
setOpen(false);
};
// 获取历史数据 // 获取历史数据
const getSensorsData = async () => { const getSensorsData = async () => {
...@@ -39,8 +40,8 @@ const LimitCurve = (props) => { ...@@ -39,8 +40,8 @@ const LimitCurve = (props) => {
isDilute: true, isDilute: true,
zoom: '', zoom: '',
unit: '', unit: '',
dateFrom: moment().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'), dateFrom: moment().subtract(8, 'day').format('YYYY-MM-DD 00:00:00'),
dateTo: moment().format('YYYY-MM-DD 23:59:59'), dateTo: moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'),
acrossTables: [ acrossTables: [
{ deviceCode: 'EGBF00000120', sensors: '出水瞬时流量', deviceType: '二供泵房' }, { deviceCode: 'EGBF00000120', sensors: '出水瞬时流量', deviceType: '二供泵房' },
], ],
...@@ -48,16 +49,80 @@ const LimitCurve = (props) => { ...@@ -48,16 +49,80 @@ const LimitCurve = (props) => {
}; };
const results = await getHistoryInfo(params); const results = await getHistoryInfo(params);
const historyData = results?.data?.[0] || {}; const historyData = results?.data?.[0] || {};
const dataArr = historyData?.dataModel.map((item) => {
return item.pv;
});
setSensorData(() => { setSensorData(() => {
setStdVal(std(dataArr));
setMedianVal(median(dataArr));
return historyData; return historyData;
}); });
console.log(historyData, std(dataArr),median(dataArr)); };
// 图表数据处理
const chartDataHandle = (data) => {
const times = moment().subtract(1, 'day').format('YYYY-MM-DD');
const chart = data.map((item) => {
return {
...item,
time: moment(item.pt).format(times + ' HH:mm:ss'),
};
});
return chart;
};
// 聚集方法
const clusteredMothod = () => {};
// 渲染图表
const renderChart = (_chartData) => {
const chartData = _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
});
const clustered = skmeans(chartData, 24);
const { centroids = [] } = clustered;
const _centroids = centroids.sort((a, b) => {
return a[0] - b[0];
});
const option = {
xAxis: {
type: 'time',
axisTick: {
alignWithLabel: true,
},
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
},
yAxis: {
type: 'value',
name: 'm',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value}',
},
},
series: [
{
symbolSize: 5,
data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
}),
type: 'scatter',
},
{
data: centroids.map((item) => {
return [Math.floor(item[0]), item[1]];
}),
type: 'line',
},
],
};
setOptions(option);
}; };
useEffect(() => { useEffect(() => {
...@@ -65,55 +130,111 @@ const LimitCurve = (props) => { ...@@ -65,55 +130,111 @@ const LimitCurve = (props) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
const {dataModel= []} = sensorData; const { dataModel = [] } = sensorData;
if (!dataModel.length) return setChartData([]);
const count = Math.floor((24 * 60) / timeCycle);
const times = moment().subtract(1, 'day').format('YYYY-MM-DD');
const _dataModel = dataModel.map((item) => {
return {
...item,
time: moment(item.pt).format(times + ' HH:mm:ss'),
};
});
const _chartData = [];
const _clustered = [];
for (let i = 0; i < count; i++) {
const data = _dataModel.filter((item) => {
const time = new Date(item.time).getTime();
const min = new Date(moment(times + ' 00:00:00').add(i * timeCycle, 'minute')).getTime();
const max = new Date(
moment(times + ' 00:00:00').add((i + 1) * timeCycle, 'minute'),
).getTime();
return time && time >= min && max >= time;
});
const clusteredArr = [];
const dataArr = [];
const pvArr = data.map((item) => {
return item.pv;
// clusteredArr.push([new Date(item.time).getTime(),item.pv])
});
const stdVal = pvArr.length ? std(pvArr) : 0;
const medianVal = pvArr.length ? average(pvArr) : 0;
const range = { const range = {
min: medianVal - stdVal*outlier, min: medianVal - outlier * stdVal,
min: medianVal + stdVal*outlier, max: medianVal + outlier * stdVal,
};
data.forEach((item) => {
if (item.pv >= range.min && item.pv <= range.max) dataArr.push(item);
clusteredArr.push([new Date(item.time).getTime(), item.pv]);
});
const clustered = clusteredArr.length ? skmeans(clusteredArr, 1) : {};
const { centroids = [] } = clustered;
_chartData.push(...dataArr);
_clustered.push(...centroids);
} }
const data = dataModel.map((item) => { renderChart(_chartData, _clustered);
return item.pv >= range.min && item.pv<=range.max; }, [sensorData, cluster, outlier]);
})
useEffect(() => {
console.log(data); console.log(chartData);
}, [sensorData, cluster, outlier]) const _chartData = chartDataHandle(chartData);
const clusteredData = _chartData.map((item) => {
// useEffect(() => { return [new Date(item.time).getTime(), item.pv];
// const option = { });
// xAxis: {}, const clustered = clusteredData.length ? skmeans(clusteredData, 24) : {};
// yAxis: {}, console.log(clustered);
// series: [ const { centroids = [] } = clustered;
// { const _centroids = centroids.sort((a, b) => {
// symbolSize: 20, return a[0] - b[0];
// data: [ });
// [10.0, 8.04], const option = {
// [8.07, 6.95], xAxis: {
// [13.0, 7.58], type: 'time',
// [9.05, 8.81], // axisTick: {
// [11.0, 8.33], // alignWithLabel: true,
// [14.0, 7.66], // },
// [13.4, 6.81], // boundaryGap: false,
// [10.0, 6.33], // splitLine: {
// [14.0, 8.96], // show: true,
// [12.5, 6.82], // lineStyle: {
// [9.15, 7.2], // type: 'dashed',
// [11.5, 7.2],
// [3.03, 4.23],
// [12.2, 7.83],
// [2.02, 4.47],
// [1.05, 3.33],
// [4.05, 4.96],
// [6.03, 7.24],
// [12.0, 6.26],
// [12.0, 8.84],
// [7.08, 5.82],
// [5.02, 5.68],
// ],
// type: 'scatter',
// }, // },
// ], // },
// }; },
// setOptions(option); yAxis: {
// }, [sensorData]); type: 'value',
name: 'm',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value}',
},
},
series: [
{
symbolSize: 5,
data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
}),
type: 'scatter',
},
{
data: _centroids.map((item) => {
return [new Date(Math.floor(item[0])).getTime(), item[1]];
}),
type: 'line',
},
],
};
setOptions(option);
}, [chartData]);
useEffect(()=>{
setOpen(props.open);
},[props.open])
return ( return (
<> <>
...@@ -138,8 +259,8 @@ const LimitCurve = (props) => { ...@@ -138,8 +259,8 @@ const LimitCurve = (props) => {
options={clusterArr} options={clusterArr}
optionType={'button'} optionType={'button'}
value={cluster} value={cluster}
onChange={(value) => { onChange={(e) => {
setCluster(value); setCluster(e.target.value);
}} }}
/> />
</span> </span>
...@@ -149,8 +270,8 @@ const LimitCurve = (props) => { ...@@ -149,8 +270,8 @@ const LimitCurve = (props) => {
options={outlierArr} options={outlierArr}
optionType={'button'} optionType={'button'}
value={outlier} value={outlier}
onChange={(value) => { onChange={(e) => {
setOutlier(value); setOutlier(e.target.value);
}} }}
/> />
</span> </span>
...@@ -187,8 +308,8 @@ const LimitCurve = (props) => { ...@@ -187,8 +308,8 @@ const LimitCurve = (props) => {
options={chartArr} options={chartArr}
optionType={'button'} optionType={'button'}
value={curve} value={curve}
onChange={(value) => { onChange={(e) => {
setCurve(value); setCurve(e.target.value);
}} }}
/> />
</span> </span>
...@@ -211,7 +332,7 @@ const LimitCurve = (props) => { ...@@ -211,7 +332,7 @@ const LimitCurve = (props) => {
const outlierArr = [ const outlierArr = [
{ {
label: '低', label: '低',
value: 1, value: 3,
}, },
{ {
label: '中', label: '中',
...@@ -219,7 +340,7 @@ const outlierArr = [ ...@@ -219,7 +340,7 @@ const outlierArr = [
}, },
{ {
label: '高', label: '高',
value: 3, value: 1,
}, },
]; ];
...@@ -241,4 +362,9 @@ const chartArr = [ ...@@ -241,4 +362,9 @@ const chartArr = [
}, },
]; ];
// 平均值方法
const average = (arr) => {
return arr.reduce((acc, cur) => acc + cur, 0) / arr.length;
};
export default LimitCurve; export default LimitCurve;
packages/extend-components/EC_RealTimeInfo/src/index.js
View file @ ef721b5d
...@@ -212,7 +212,7 @@ const RealTimeInfo = (props) => { ...@@ -212,7 +212,7 @@ const RealTimeInfo = (props) => {
item.type = curData1[0].name || '--'; item.type = curData1[0].name || '--';
} }
if (curData2.length) { if (curData2.length) {
item.value = curData2[0].pv || '--'; item.value = curData2[0].pv || curData2[0].pv === 0 ? curData2[0].pv : '--';
} }
}); });
return newData; return newData;
......
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