Skip to content

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

feat: 修改报警曲线组件

parent 7b371c20
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 34 deletions
packages/extend-components/EC_AlarmCurve/src/demos/Basic.tsx
View file @ 227d9483
......@@ -4,7 +4,7 @@ import { Button } from 'antd';
const Demos = () => {
const [open, setOpen] = useState(false);
const [sensors, setSensors] = useState('出水瞬时流量');
const [sensors, setSensors] = useState('瞬时流量');
const onOk = (data) => {
setOpen(false);
......@@ -35,8 +35,8 @@ const Demos = () => {
open={open}
onOk={onOk}
onCancel={onCancel}
deviceCode={'EGBF00000120'}
deviceType={'二供泵房'}
deviceCode={'SYJ00000022'}
deviceType={'水源井'}
sensors={sensors}
/>
</>
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/historyTrend/index.js
View file @ 227d9483
......@@ -15,7 +15,7 @@ const HistoryTrend = (props) => {
const infoRef = useRef({
decimalPoint: 2,
unit: '',
})
});
const [sensitive, setSensitive] = useState(10); // 敏感度
const [timeType, setTimeType] = useState('近7日'); // 时间
......@@ -83,11 +83,11 @@ const HistoryTrend = (props) => {
const info = result?.data?.[0] || {};
infoRef.current = {
decimalPoint: info?.decimalPoint || 2,
unit: info?.unit || ''
}
unit: info?.unit || '',
};
historyData = historyData.concat([..._historyData]);
});
console.log(historyData);
// console.log(historyData);
setSensorData(() => {
dataMonthod(historyData);
return historyData;
......@@ -140,7 +140,7 @@ const HistoryTrend = (props) => {
},
yAxis: {
type: 'value',
name: 'm',
name: infoRef.current?.unit || '',
position: 'left',
alignTicks: true,
axisLabel: {
......@@ -152,7 +152,11 @@ const HistoryTrend = (props) => {
const title = moment(params[0].axisValue).format('HH:mm:ss');
let html = `<div style="border-bottom: 1px solid #F0F0F0;color: #808080;margin-bottom: 5px;padding-bottom: 5px;">${title}</div><div>`;
params.forEach((item) => {
html += `<span style="display: inline-block;margin: 0 7px 2px 0;border-radius: 5px;width: 5px;height: 5px;background: ${item.color};"></span>${item.seriesName}：<span style="color: ${item.color}">${item.data[1]}</span><br />`;
html += `<span style="display: inline-block;margin: 0 7px 2px 0;border-radius: 5px;width: 5px;height: 5px;background: ${
item.color
};"></span>${item.seriesName}：<span style="color: ${item.color}">${
item.data[1] || item.data[1] === 0 ? item.data[1] : '--'
} ${infoRef.current?.unit}</span><br />`;
});
return html;
},
......@@ -169,7 +173,7 @@ const HistoryTrend = (props) => {
});
let max = Math.max(...pvArr);
let min = Math.min(...pvArr);
console.log(max, min);
// console.log(max, min);
const decimalPoint = infoRef.current.decimalPoint || 2;
const data = [
(min * (1 - sensitive / 100)).toFixed(decimalPoint) * 1,
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.js
View file @ 227d9483
......@@ -27,7 +27,7 @@ const LimitCurve = (props) => {
// 返回数据
const backData = (data) => {
console.log(data);
// console.log(data);
setRuleData(data);
};
......@@ -54,7 +54,7 @@ const LimitCurve = (props) => {
{
label: `智能提取`,
key: '智能提取',
children: <IntellectDraw {...props} changeSpin={changeSpin} />,
children: <IntellectDraw {...props} changeSpin={changeSpin} backData={backData} />,
},
]}
/>
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/intellectDraw/index.js
View file @ 227d9483
......@@ -18,11 +18,11 @@ const IntellectDraw = (props) => {
const [sensorData, setSensorData] = useState([]); // 所有数据
const [chartData, setChartData] = useState([]); // 图表数据
const [sensitive, setSensitive] = useState(10); // 敏感度
const [timeCycle, setTimeCycle] = useState(60);
const [timeDan, setTimeDan] = useState(1);
const [foldData, setFoldData] = useState([]);
const [options, setOptions] = useState({});
const [selectCheck, setSelectCheck] = useState([]);
const chartRef = useRef(null);
......@@ -31,8 +31,8 @@ const IntellectDraw = (props) => {
changeSpin(true);
const params = {
isDilute: true,
zoom: '',
unit: '',
zoom: '5',
unit: 'min',
dateFrom: moment().subtract(8, 'day').format('YYYY-MM-DD 00:00:00'),
dateTo: moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'),
acrossTables: [{ deviceCode: deviceCode, sensors: sensors, deviceType: deviceType }],
......@@ -62,7 +62,7 @@ const IntellectDraw = (props) => {
// 聚集方法
const clusteredMothod = (clustered, num) => {
console.log(clustered);
// console.log(clustered);
let foldLine = [];
const arr = [];
const times = moment().subtract(1, 'day').format('YYYY-MM-DD');
......@@ -70,7 +70,7 @@ const IntellectDraw = (props) => {
return item[1];
});
const medianVal = median([...data]);
console.log(data, medianVal);
// console.log(data, medianVal);
if (timeDan === 1) {
return [
[new Date(moment(times + ' 00:00:00')).getTime(), medianVal],
......@@ -98,7 +98,7 @@ const IntellectDraw = (props) => {
});
}
});
console.log(arr);
// console.log(arr);
arr.forEach((list, index) => {
const _list = list.map((item) => {
return item['y'];
......@@ -121,7 +121,7 @@ const IntellectDraw = (props) => {
]);
}
});
console.log(foldLine);
// console.log(foldLine, 'foldLine');
if (arr.length === timeDan || arr.length === num) {
return foldLine;
} else {
......@@ -139,9 +139,9 @@ const IntellectDraw = (props) => {
const _centroids = centroids.sort((a, b) => {
return a[0] - b[0];
});
console.log(_centroids);
// console.log(_centroids);
const foldLine = clusteredMothod(_centroids, 0);
console.log(foldLine);
// console.log(foldLine);
const option = {
xAxis: {
type: 'time',
......@@ -158,7 +158,7 @@ const IntellectDraw = (props) => {
},
yAxis: {
type: 'value',
name: 'm',
name: sensorData?.unit || '',
position: 'left',
alignTicks: true,
axisLine: {
......@@ -211,7 +211,7 @@ const IntellectDraw = (props) => {
_data[Math.floor(index / 2)].push([...item]);
}
});
console.log(_data);
// console.log(_data);
return _data.map((list) => {
return {
......@@ -224,7 +224,7 @@ const IntellectDraw = (props) => {
};
const onCheckChange = (checkedValues) => {
console.log(checkedValues);
setSelectCheck(checkedValues);
};
const proposeRender = () => {
......@@ -232,6 +232,11 @@ const IntellectDraw = (props) => {
<div className={classNames(`${prefixCls}-propose-box`)}>
<Checkbox.Group onChange={onCheckChange}>
{foldData.map((list, index) => {
const decimalPoint = sensorData?.decimalPoint || 2;
const lower1 = (list.value * (1 - list.wave / 100) * (1 - list.wave / 100)).toFixed(decimalPoint) * 1;
const lower2 = (list.value * (1 - list.wave / 100)).toFixed(decimalPoint) * 1;
const high1 = (list.value * (1 + list.wave / 100)).toFixed(decimalPoint) * 1;
const high2 = (list.value * (1 + list.wave / 100) * (1 + list.wave / 100)).toFixed(decimalPoint) * 1;
return (
<div className={classNames(`${prefixCls}-propose-list`)} key={index}>
<div className={classNames(`${prefixCls}-propose-select`)}>
......@@ -246,6 +251,7 @@ const IntellectDraw = (props) => {
width: '150px',
}}
addonBefore="低低限"
value={lower1}
disabled
/>
</div>
......@@ -255,6 +261,7 @@ const IntellectDraw = (props) => {
width: '150px',
}}
addonBefore="低限"
value={lower2}
disabled
/>
</div>
......@@ -264,6 +271,7 @@ const IntellectDraw = (props) => {
width: '150px',
}}
addonBefore="高限"
value={high1}
disabled
/>
</div>
......@@ -273,6 +281,7 @@ const IntellectDraw = (props) => {
width: '150px',
}}
addonBefore="高高限"
value={high2}
disabled
/>
</div>
......@@ -284,9 +293,11 @@ const IntellectDraw = (props) => {
max={100}
style={{ width: '100px' }}
onChange={(value) => {
setSensitive(value);
const _foldData = structuredClone(foldData);
_foldData[index].wave = value;
setFoldData(_foldData);
}}
value={typeof sensitive === 'number' ? sensitive : 0}
value={typeof list.wave === 'number' ? list.wave : 0}
/>
<InputNumber
min={1}
......@@ -296,9 +307,11 @@ const IntellectDraw = (props) => {
width: '100px',
}}
formatter={(value) => `${value}%`}
value={sensitive}
value={list.wave}
onChange={(value) => {
setSensitive(value);
const _foldData = structuredClone(foldData);
_foldData[index].wave = value;
setFoldData(_foldData);
}}
/>
</div>
......@@ -310,6 +323,29 @@ const IntellectDraw = (props) => {
);
};
useEffect(() => {
const data = [];
const decimalPoint = sensorData?.decimalPoint || 2;
selectCheck.forEach((index) => {
const value = foldData[index]?.value || 0;
const wave = foldData[index]?.wave || 0;
const lower1 = (value * (1 - wave / 100) * (1 - wave / 100)).toFixed(decimalPoint) * 1;
const lower2 = (value * (1 - wave / 100)).toFixed(decimalPoint) * 1;
const high1 = (value * (1 + wave / 100)).toFixed(decimalPoint) * 1;
const high2 = (value * (1 + wave / 100) * (1 + wave / 100)).toFixed(decimalPoint) * 1;
data.push({
...foldData[index],
lower1,
lower2,
high1,
high2,
})
})
if (data.length) return props.backData([data[0].lower1, data[0].lower2, data[0].high1, data[0].high2]);
return props.backData([]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectCheck, foldData]);
useEffect(() => {
open && getSensorsData();
// eslint-disable-next-line react-hooks/exhaustive-deps
......@@ -339,7 +375,7 @@ const IntellectDraw = (props) => {
});
let dataArr = [];
const pvArr = data.map((item) => {
return item.pv;
return item.pv || 0;
});
const stdVal = pvArr.length ? std(pvArr) : 0;
const medianVal = pvArr.length ? average(pvArr) : 0;
......@@ -376,7 +412,6 @@ const IntellectDraw = (props) => {
}}
defaultValue={1}
onChange={(value) => {
console.log(outlierArr);
setOutlier(outlierArr[value]?.value || 0);
}}
min={0}
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/intellectDraw/index.less
View file @ 227d9483
......@@ -40,6 +40,8 @@
&-propose-box {
display: flex;
flex-direction: column;
height: 95px;
overflow: auto;
}
&-propose-list {
......
packages/extend-components/EC_AlarmCurve/src/predictionCurve/index.js
View file @ 227d9483
......@@ -11,6 +11,8 @@ import {
Select,
} from 'antd';
import classNames from 'classnames';
import { BasicChart } from '@wisdom-components/basicchart';
import moment from 'moment';
import LoadBox from '@wisdom-components/loadbox';
import './index.less';
......@@ -22,6 +24,8 @@ const PredictionCurve = (props) => {
const [open, setOpen] = useState(false);
const [spinning, setSpinning] = useState(false);
const [sensitive, setSensitive] = useState(10); // 波动幅度
const [options, setOptions] = useState({});
const chartRef = useRef(null);
// 确定
const onOk = () => {
......@@ -55,7 +59,46 @@ const PredictionCurve = (props) => {
);
};
useEffect(() => {}, [open]);
useEffect(() => {
const arrayData = new Array(24).fill([]);
const option = {
xAxis: {
type: 'time',
axisTick: {
alignWithLabel: true,
},
axisLabel: {
formatter: (value) => {
return moment(value).format('HH:mm');
},
},
boundaryGap: false,
},
yAxis: {
type: 'value',
name: '',
show: true,
interval: 1,
max: 10,
min: 0,
position: 'left',
alignTicks: true,
axisLabel: {
formatter: '{value}',
},
},
series: [{
type: 'line',
name: sensors,
smooth: true,
areaStyle: {},
data: arrayData.map((item, index) => {
return [new Date(moment(moment(new Date()).format('YYYY-MM-DD 00:00:00')).subtract(-index, 'hour').format('YYYY-MM-DD HH:mm:ss')).getTime(), null];
}),
}],
};
setOptions(option);
}, [open]);
useEffect(() => {
setOpen(props.open);
......@@ -86,7 +129,7 @@ const PredictionCurve = (props) => {
style={{
width: 120,
}}
onChange={() => {}}
onChange={() => { }}
options={[
{
value: '滑动平均值',
......@@ -102,7 +145,7 @@ const PredictionCurve = (props) => {
style={{
width: 120,
}}
onChange={() => {}}
onChange={() => { }}
options={[
{
value: 'M1',
......@@ -141,7 +184,14 @@ const PredictionCurve = (props) => {
}}
/>
</div>
<div className={classNames(`${prefixCls}-chart`)}></div>
<div className={classNames(`${prefixCls}-chart`)}>
<BasicChart
ref={chartRef}
option={options}
notMerge
style={{ width: '100%', height: '100%' }}
/>
</div>
{spinning && (
<div className={classNames(`${prefixCls}-load`)}>
<LoadBox spinning={spinning} />
......
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