feat: 修改报警曲线组件

packages/extend-components/EC_AlarmCurve/src/demos/Basic.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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} />