feat: 升级历史曲线

packages/extend-components/EC_HistoryView/src/SingleChart.js

-import React, { memo, useEffect, useMemo, useRef } from 'react';
-import { BasicChart } from '@wisdom-components/basicchart';
+import React, {memo, useEffect, useMemo, useRef} from 'react';
+import {BasicChart} from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
-import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils';
-import { isArray, cloneDeep } from 'lodash';
+import optionGenerator, {alarmMarkLine, minMaxMarkPoint, offlineArea} from './utils';
+import {isArray, cloneDeep} from 'lodash';
 
 const SingleChart = memo((props) => {
     const {
@@ -16,6 +16,7 @@ const SingleChart = memo((props) => {
         chartType,
         lineDataType,
         showBoxOption,
+        special
     } = props;
     const chartRef = useRef();
 
@@ -30,15 +31,16 @@ const SingleChart = memo((props) => {
             chartType,
             // justLine,
             showBoxOption,
+            special
         };
-    return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config,lineDataType);
-  }, [dataSource, smooth, curveCenter,chartType]);
+        return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType);
+    }, [dataSource, smooth, curveCenter, chartType]);
     useEffect(() => {
         chartRef.current?.resize?.();
         const chart = chartRef.current?.getEchartsInstance?.();
 
         function hander(params) {
-      const { selected } = params;
+            const {selected} = params;
             const count = Object.values(selected || {}).filter((item) => item).length;
             const option = cloneDeep(chart.getOption());
             const needMarkLine = count === 1;
@@ -66,6 +68,7 @@ const SingleChart = memo((props) => {
             });
             chart.setOption(option, true);
         }
+
         if (!chart) return;
         chart.on('legendselectchanged', hander);
         return () => {
@@ -103,7 +106,7 @@ const SingleChart = memo((props) => {
         };
         let yAxis = axisConfig;
         if (isArray(option.yAxis)) {
-      yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
+            yAxis = option.yAxis.map((item) => ({...axisConfig}));
         }
         let xAxis = axisConfig;
         chart.setOption({
@@ -122,9 +125,9 @@ const SingleChart = memo((props) => {
         [dataSource],
     );
     return isEmpty ? (
-    <PandaEmpty />
+        <PandaEmpty/>
     ) : (
-    <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
+        <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
     );
 });
 

packages/extend-components/EC_HistoryView/src/apis/index.js

@@ -7,6 +7,22 @@ const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api
 
 const monitorDeviceUrl = `${baseUrl}/PandaMonitor/Monitor/Device`;
 
+// 获取单个设备的配置信息
+export function getPointAddress (params) {
+    return request({
+        url: `/PandaMonitor/Monitor/PointAddress/GetPointAddress`,
+        method: REQUEST_METHOD_GET,
+        params
+    });
+}
+// 获取点表信息
+export function getPointAddressEntry(params) {
+    return request({
+        url: `/PandaMonitor/Monitor/PointAddress/GetPointAddressEntry`,
+        method: REQUEST_METHOD_GET,
+        params
+    });
+}
 
 // 获取历史数据
 export function getHistoryInfo(data) {

packages/extend-components/EC_HistoryView/src/demos/index.js

@@ -3,13 +3,21 @@ import HistoryView from '../index';
 import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
+    /*10.182*/
 /*          {
                 deviceCode: 'EGBF00000141',
                 // sensors: '进水压力,出水瞬时流量,出水累计流量',
                 sensors: '进水压力',
-                deviceType: '二供泵房',
+                deviceType: '熊猫二供泵房',
                 pointAddressID: 208,
-            },  */
+            },*/
+/*    {
+        deviceCode: 'EGJZ00000197',
+        // sensors: '进水压力,出水瞬时流量,出水累计流量',
+        sensors: '1#变频器运行频率',
+        deviceType: '二供机组',
+        // pointAddressID: 208,
+    }*/
     /*    {
             "deviceCode": "SYJ00000008",
             "sensors": "瞬时流量",
@@ -73,6 +81,21 @@ const deviceParams = [
         "sensors": "瞬时流量",
         "deviceType": "流量计"
     }
+    /*邳州*/
+/*    {
+        deviceCode: 'EGJZ00000027',
+        sensors: '2#变频器运行频率',
+        deviceType: '二供机组',
+    }*/
+    /*确山*/
+    /*泵3状态*/
+/*    {
+        // EGJZ00000003
+        deviceCode: 'EGJZ00000003',
+        // sensors: '3#频率',
+        sensors: '出1累计流量',
+        deviceType: '二供机组',
+    }*/
 ];
 const Demo = () => {
     return (
@@ -81,7 +104,6 @@ const Demo = () => {
                 <HistoryView deviceParams={deviceParams} defaultModel="curve" />
             </div>
         </div>
-
     );
 };
 

packages/extend-components/EC_HistoryView/src/index.js

@@ -24,11 +24,18 @@ import _ from 'lodash';
 import TimeRangePicker from '@wisdom-components/timerangepicker';
 import PandaEmpty from '@wisdom-components/empty';
 import BasicTable from '@wisdom-components/basictable';
-import {getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl, getDictionaryInfoAll} from './apis';
+import {
+    getHistoryInfo,
+    getDeviceAlarmScheme,
+    getExportDeviceHistoryUrl,
+    getDictionaryInfoAll,
+    getPointAddress, getPointAddressEntry
+} from './apis';
 import SingleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
 import {globalConfig} from 'antd/lib/config-provider';
+
 const {RangePicker} = DatePicker;
 const {Option} = Select;
 
@@ -108,12 +115,12 @@ const CheckboxData = [
     },
     {
         key: 'ignoreOutliers',
-        label: '曲线降噪',
+        label: '去除异常值',
         type: 'updateIgnoreOutliers',
         checked: false,
         showInCurve: true,
         showInTable: true,
-        tooltip: '本算法采用递推平均滤波法（滑动平均滤波法）对采样数据进行均值化平滑处理。',
+        tooltip: '采用递推平均滤波法（滑动平均滤波法）对采样数据中的异常离群值进行识别与去除。',
         hasSub: true
     },
     {
@@ -302,6 +309,8 @@ const HistoryView = (props) => {
     const [shortcutsValue, setShortcutsValue] = useState('');
     const [shortcutsDatePickerArr, setShortcutsDatePickerArr] = useState([]);
     const [percent, setPercent] = useState(0);
+    // 频率指标特殊业务
+    const [special1, setSpecial1] = useState(null);
     // 选择的时间范围值
     const dateRange = useMemo(() => {
         if (timeValue === 'customer') {
@@ -565,7 +574,8 @@ const HistoryView = (props) => {
                             <div key={child.key} className={classNames(`${prefixCls}-contrast-list`)}>
                                 <div className={classNames(`${prefixCls}-contrast-wrap`)}>
                                     <DatePicker
-                                        picker={contrastOption}
+                                        key={child.key}
+                                        picker={contrastOption === 'day' ? undefined : contrastOption}
                                         value={child.value}
                                         onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
                                         style={{width: 130, border: !shortcutsValue ? '1px solid #1890ff' : ''}}
@@ -922,10 +932,16 @@ const HistoryView = (props) => {
         deviceParams
             .map((item) => {
                 let _item = {...item};
-                _item.sensors =
+                //                历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15
+                /*                _item.sensors =
                                     item.sensors && !item.sensors.includes('是否在线')
                                         ? item.sensors + ',是否在线'
-                        : item.sensors;
+                                        : item.sensors;*/
+                _item.sensors = item.sensors;
+                // special 业务
+                if (special1) {
+                    _item.sensors += `,${special1.name}`;
+                }
                 return _item;
             })
             .forEach((i) => {
@@ -972,7 +988,12 @@ const HistoryView = (props) => {
                         deviceParams.forEach((p) => {
                             // 返回数据按查询指标顺序排序
                             const sensors = p.sensors?.split(',') ?? [];
-                            if (sensors?.length) sensors.push('是否在线');
+                            if (sensors?.length) {
+                                sensors.push('是否在线');
+                                if (special1) {
+                                    sensors.push(special1.name);
+                                }
+                            }
                             const list = sensors.map((s) => {
                                 const dataItem = res.data.find(
                                     (d) => d.stationCode === p.deviceCode && d.sensorName === s,
@@ -1117,6 +1138,9 @@ const HistoryView = (props) => {
                                 contrast={timeValue === 'contrast'}
                                 contrastOption={contrastOption}
                                 deviceAlarmSchemes={deviceAlarmSchemes}
+                                special={{
+                                    special1, // 频率业务
+                                }}
                             />
                         )}
                     </div>
@@ -1132,11 +1156,26 @@ const HistoryView = (props) => {
         // 非单曲线、单指标不执行
         if (deviceParams?.length !== 1 || (deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',')?.length > 1)) return setCompleteInit(true);
         setLoading(true);
-        await getDictionaryInfoAll({
+        const {deviceCode, deviceType, sensors} = deviceParams[0];
+        let _id = (await getPointAddress({
+            code: deviceCode
+        }))?.data?.[0]?.id;
+        let _params = {
+            deviceType: deviceType
+        };
+        if (_id) _params.versionId = _id;
+        let _request0 = getDictionaryInfoAll({
             level: '组件_ec_historyview'
-        }).then(res => {
-            if (res.code === 0) {
-                let _opt = res.data.reduce((final, cur) => {
+        });
+        let _request1 = getPointAddressEntry(_params);
+
+        await Promise.all([_request0, _request1]).then(result => {
+            if (result) {
+                let _res0 = result[0];
+                let _res1 = result[1];
+                // 查字典配置
+                if (_res0.code === 0) {
+                    let _opt = _res0.data.reduce((final, cur) => {
                         final[cur.fieldName] = cur.fieldValue
                         return final
                     }, {});
@@ -1149,9 +1188,25 @@ const HistoryView = (props) => {
                     });
                     setCheckboxData(_checkboxData);
                 }
-        }).catch(err=>{
-            setLoading(false);
-        })
+                // 查点表配置
+                if (_res1.code === 0) {
+                    let _sensorConfig = _res1.data.find(item => item.name.trim() === sensors.trim());
+                    let _statusName = _sensorConfig.statusName;
+                    if (_statusName) {
+                        let _statusConfig = _res1.data.find(item => item.name.trim() === _statusName.trim());
+                        let _valDesc = _statusConfig.valDesc;
+                        setSpecial1({
+                            name: _statusName,
+                            valDesc: _valDesc.split(';').reduce((final, cur) => {
+                                let _arr = cur.split(':');
+                                final[_arr[0]] = _arr[1];
+                                return final
+                            }, {})
+                        });
+                    }
+                }
+            }
+        });
         setCompleteInit(true);
     };
     useEffect(() => {
@@ -1184,7 +1239,8 @@ const HistoryView = (props) => {
                     (loading || percent !== 0) ? <div className={classNames(`${prefixCls}-progressWrapper`)}>
                         <div className={classNames(`${prefixCls}-contentWrapper`)}>
                             {
-                                lineDataType === '原始曲线' || lineDataType === '特征曲线'&& moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >= 30? <><Progress percent={percent}
+                                lineDataType === '原始曲线' || lineDataType === '特征曲线' && moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >= 30 ? <>
+                                    <Progress percent={percent}
                                               steps={20}
                                               className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
                                               showInfo={false}/>

packages/extend-components/EC_HistoryView/src/utils.js

@@ -261,7 +261,7 @@ export const offlineArea = (dataItem) => {
                 {
                     name: '离线',
                     xAxis: new Date(item.pt),
-                    label:{show:!datas?.length}
+                    label: {show: !datas?.length}
                 },
             ];
             hasOffline = true;
@@ -282,7 +282,7 @@ export const offlineArea = (dataItem) => {
         data: datas,
     };
 };
-
+// 生成默认legend配置
 export const buildDefaultLegend = (option) => {
     const {title} = option;
 
@@ -304,7 +304,7 @@ export const buildDefaultLegend = (option) => {
         },
     };
 };
-
+// tooltip 模板
 const headTemplate = (param, opt) => {
     if (!param) return '';
     const {name, axisValueLabel, axisType, axisValue} = param;
@@ -378,6 +378,105 @@ const tooltipAccessor = (unit, contrastOption) => {
         },
     };
 };
+// 处理特殊业务：1. 频率；2. 是否在线（暂时不上）
+const handleSpecial1 = (special, dataSource) => {
+    // 频率部分的业务
+    const _colorMap = {
+        变频: '#1685ff',
+        工频: '#00d0c7',
+        运行: '#1685ff',
+        故障: '#ff6b37',
+        停止: '#666666'
+    };
+    let _special1 = special?.special1 ?? {};
+    let _valDesc = _special1?.valDesc ?? {};
+    let _data = dataSource.find(item => item.sensorName === _special1.name);
+    let _markAreaData = [];
+    let _pieces = _data?.dataModel?.reduce((final, cur, index) => {
+        let _pt = moment(cur.pt).valueOf();
+        let _length = final.length;
+        if (_colorMap[_valDesc[cur.pv]]) {
+            if (_length === 0) {
+                final.push({
+                    lte: _pt,
+                    gte: 0,
+                    color: _colorMap[_valDesc[cur.pv]],
+                    value: cur.pv,
+                    text: _valDesc[cur.pv]
+                });
+            } else {
+                if (cur.pv === final[_length - 1].value) {
+                    final[_length - 1].lte = _pt;
+                } else {
+                    final.push({
+                        lte: _pt,
+                        gte: _pt,
+                        color: _colorMap[_valDesc[cur.pv]],
+                        value: cur.pv,
+                        text: _valDesc[cur.pv]
+                    });
+                }
+            }
+        }
+        return final;
+    }, [])
+        .map(item => {
+            _markAreaData.push(
+                [
+                    {
+                        xAxis: item.gte,
+                        itemStyle: {
+                            // color: item.color
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: item.color // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: item.color// 100% 处的颜色
+                                }],
+                                global: false // 缺省为 false
+                            }
+                        },
+                        name: item.text,
+                        label: {show: true}
+                    },
+                    {
+                        xAxis: item.lte,
+                        itemStyle: {
+                            color: item.color
+                        }
+                    }
+                ]
+            )
+            delete item.value;
+            return item;
+        })??[];
+    let _final = {};
+    if (_markAreaData.length) {
+        _final.visualMap = {
+            type: 'piecewise',
+            show: false,
+            dimension: 0,
+            seriesIndex: 0,
+            pieces: _pieces,
+        }
+    }
+    if (_pieces.length) {
+        _final.markArea = {
+            silent: true,
+            itemStyle: {
+                opacity: 0.1
+            },
+            data: _markAreaData
+        }
+    }
+    return _final;
+};
+// 生成x坐标
 const returnXAxis = ({
                          dataSource,
                          contrast,
@@ -387,7 +486,8 @@ const returnXAxis = ({
                          deviceAlarmSchemes,
                          showPoint,
                          restOption,
-                         smooth
+                         smooth,
+                         special
                      }) => {
     // 根据"指标名称"分类yAxis
     const yAxisInterator = (() => {
@@ -397,12 +497,19 @@ const returnXAxis = ({
         return {get};
     })();
     let _offlineData = [];
+    // 生成visualMap、markArea
+    let {visualMap, markArea} = handleSpecial1(special, dataSource);
+    let _filterArr = ['是否在线'];
+    if (special?.special1?.name) {
+        _filterArr.push(special.special1.name);
+    }
+    // 生成series
     let series = dataSource
         .filter((item) => {
             if (item.sensorName === '是否在线') {
                 _offlineData.push(item);
             }
-            return item.sensorName !== '是否在线';
+            return !_filterArr.includes(item.sensorName);
         })
         .map((item, index) => {
             const {sensorName, unit} = item;
@@ -415,24 +522,17 @@ const returnXAxis = ({
                 ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
                 : {};
             const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
-            let markArea = null;
+            // let markArea = null;
             // 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 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;
-                                })*/
+            // 暂时注释，离线逻辑需要再确认 2023-09-15
+            /*            let _offlineAreasData = _offlineData
                             .find((offline) => offline.stationCode === item.stationCode);
                         let offlineAreas = offlineArea(_offlineAreasData);
                         if (offlineAreas.data?.length) {
                             restOption.markArea = null;
                             markArea = offlineAreas;
-            }
+                        }*/
+            // 需求新增：增加频率业务
             return {
                 notMerge: true,
                 name,
@@ -469,9 +569,8 @@ const returnXAxis = ({
                     none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}'
                 }
             }
-        }, series
+        }, series, visualMap
     };
-
 }
 const handleDefault = (config, cusOption) => {
     const needUnit = _.get(config, 'needUnit', false);
@@ -486,6 +585,7 @@ const handleDefault = (config, cusOption) => {
     const showBoxOption = _.get(config, 'showBoxOption', false);
     // 自定义属性
     const restOption = _.pick(cusOption, ['title', 'legend']);
+    const special = _.get(config, 'special', {});
     return {
         needUnit,
         curveCenter,
@@ -496,7 +596,8 @@ const handleDefault = (config, cusOption) => {
         deviceAlarmSchemes,
         chartType,
         showBoxOption,
-        restOption
+        restOption,
+        special
     }
 }
 const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
@@ -514,7 +615,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
                 position: i % 2 === 0 ? 'left' : 'right',
                 offset: Math.floor(i / 2) * AXIS_WIDTH,
                 axisLabel: {
-                    formatter: (value) => (value > 100000 ? `${value / 1000}k` : value.toFixed(2)),
+                    formatter: (value) => (value > 100000 ? `${(value / 1000).toFixed(2)}k` : value.toFixed(2)),
                 },
                 axisLine: {
                     show: true,
@@ -728,11 +829,12 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         deviceAlarmSchemes,
         chartType,
         showBoxOption,
-        restOption
+        restOption,
+        special
     } = handleDefault(config, cusOption);
     const {leftNum, rightNum, yAxis} = handleYAxis({dataSource, needUnit, curveCenter, showGridLine});
     const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
-    let {xAxis, series} = returnXAxis({
+    let {xAxis, series, visualMap} = returnXAxis({
         dataSource,
         contrast,
         contrastOption,
@@ -741,7 +843,8 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         deviceAlarmSchemes,
         showPoint,
         smooth,
-        restOption
+        restOption,
+        special
     });
     decorateAxisGridLine(xAxis, showGridLine);
     const tooltipTimeFormat = !contrast
@@ -752,7 +855,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     let tooltip = {};
     // 增加箱线图的逻辑，单曲线才存在该逻辑
     if (chartType && showBoxOption) {
-        if (chartType === 'boxChart') {
+        if (chartType === 'boxChart' && lineDataType === '特征曲线') {
             const otherData =
                 dataSource?.[0]?.dataModel.map((item) => {
                     const {firstPV, lastPV, maxPV, minPV, pt} = item;
@@ -780,7 +883,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             });
             tooltip = tooltipAccessor(unit);
         }
-        if (chartType === 'lineChart') {
+        if (chartType === 'lineChart' || lineDataType === '原始曲线') {
             let _maxData = [];
             let _minData = [];
             let _currentYear = moment().format('YYYY');
@@ -806,7 +909,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             decorateAxisGridLine(xAxis, showGridLine);
             let _unit = '';
             series = series.map((item) => {
-                _unit = item.unit;
+                _unit = item.unit ?? '';
                 item.areaStyle = null;
                 return {...item, showSymbol: false};
             });
@@ -871,14 +974,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     tooltip.timeFormat = tooltipTimeFormat;
     let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
     assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
-    return {
+    let _options = {
         yAxis,
         grid,
         xAxis,
         series,
         tooltip,
+        visualMap,
         ...restOption,
     };
+    return _options
 };
 
 export default optionGenerator;