feat: 优化历史曲线时间选择器；优化数据加载

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -26,16 +26,16 @@ path: /
 
 ## 单图表-状态
 
-<code src="./demos/indexForStatus.js"></code>
+[//]: # (<code src="./demos/indexForStatus.js"></code>)
 
 ## 单图表-频率
 
-<code src="./demos/indexForFrequency.js"></code>
+[//]: # (<code src="./demos/indexForFrequency.js"></code>)
 
 [//]: # '## 移动端'
 [//]: # '<code src="./demos/mobile.js"></code>'
 
-## 多图表
+[//]: # (## 多图表)
 
 [//]: # (<code src="./demos/GridDemo.js"></code>)
 
@@ -52,6 +52,19 @@ path: /
 | deviceParams | 设备参数信息 | array | - | - |
 | needMarkLine | 是否添加报警标识线 | boolean | true |  |
 
+## 字典配置
+```text
+    数据字典中，根据需要配置以下条目
+     组件_ec_historyview
+        - 曲线居中 true/false
+        - 数据滤波 true/false
+        - 日期模式 常规模式/简易模式
+        - 离散算法设备类型 水厂,二供泵房
+        
+        曲线居中、数据滤波，默认是否勾选；
+        日期模式下，常规模式时间格式为 YYYY-MM-DD HH:mm，简易模式时间格式为YYYY-MM-DD；
+        离散算法设备类型，适用于数据起伏较大的设备类型，根据实际场景，配置设备类型即可
+```
 ### deviceParams
 
 ```javascript

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

@@ -34,90 +34,8 @@ const SingleChart = memo((props) => {
     const chartRef = useRef();
     const timerRef = useRef();
     const SpecialType = ['状态值', '开关值']; // 横向柱状条
-    const option = useMemo(() => {
-        const config = {
-            needUnit: true,
-            curveCenter,
-            showGridLine,
-            deviceAlarmSchemes,
-            showMarkLine: true,
-            showPoint: true,
-            chartType,
-            showBoxOption,
-            special
-        };
-        let allValDesc = {};
-        let _allSensorType = special?.allSensorType?.reduce((final, curr) => {
-            final[curr.id] = curr.type;
-            return final;
-        }, {});
-        let _allPointAddress = special?.allPointAddress?.reduce((final, curr) => {
-            final[curr.name] = _allSensorType[curr.sensorTypeID];
-            allValDesc[curr.name] = curr.valDesc;
-            return final;
-        }, {});
-        if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
-            config.sensorType = _allPointAddress[dataSource[0].sensorName];
-            config.special.allValDesc = allValDesc;
-            return specialTypeChartOptionGenerator({dataSource, config});
-        }
-        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData, theme);
-        if (emptyOrError.empty || emptyOrError.error) {
-            if (isArray(_option.yAxis)) {
-                _option.yAxis.forEach(item => {
-                    item.max = 100;
-                    item.min = 0;
-                })
-            } else {
-                _option.yAxis.max = 100;
-                _option.yAxis.min = 0;
-            }
-        }
-        // 加入bi模式
-        if (theme === 'BI') _option = patchBIOption(_option, BI);
-        return _option;
-    }, [dataSource, smooth, curveCenter, chartType, predicateData]);
-    useEffect(() => {
-        if (exportCanvas.exportFlag) {
-            const chart = chartRef.current?.getEchartsInstance?.();
-            let a = document.createElement('a');
-            a.href = chart.getDataURL('image/png');
-            a.download = '曲线图片.png'
-            a.click();
-            a.remove();
-            exportCanvas.setExportFlag(null);
-        }
-    }, [exportCanvas.exportFlag]);
-    useEffect(() => {
-        chartRef.current?.resize?.();
-        const chart = chartRef.current?.getEchartsInstance?.();
 
-        function hander(params) {
-            const {selected} = params;
-            const count = Object.values(selected || {}).filter((item) => item).length;
-            const option = cloneDeep(chart.getOption());
-            const needMarkLine = count === 1;
-            option.series.forEach((item, index) => {
-                if (needMarkLine && selected[item.name]) {
-                    item.markLine = alarmMarkLine(
-                        dataSource[index],
-                        index,
-                        [dataSource[index]],
-                        deviceAlarmSchemes,
-                    );
-                    // item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]);
-                } else {
-                    item.markLine = {};
-                    item.markPoint = {};
-                }
-            });
-            chart.setOption(option, true);
-        }
-
-        function renderMarkPoint(e) {
-            if (timerRef.current) clearTimeout(timerRef.current);
-            timerRef.current = setTimeout(() => {
-                const minMaxMarkPoint = (dataSource) => {
+    const minMaxMarkPoint = (dataSource,chart) => {
         // 只有一个数据曲线时显示markline
         if (dataSource.length !== 1) return {};
         // 1. 找出最大、最小的值
@@ -270,11 +188,98 @@ const SingleChart = memo((props) => {
             data,
         };
     };
-                // minMaxMarkPoint(dataSource)
-                chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource)}})
+
+    const renderMarkPoint = () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        const chart = chartRef.current?.getEchartsInstance?.();
+        timerRef.current = setTimeout(() => {
+            chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource,chart)}})
         }, 200)
-        }
+    };
 
+    const option = useMemo(() => {
+        const config = {
+            needUnit: true,
+            curveCenter,
+            showGridLine,
+            deviceAlarmSchemes,
+            showMarkLine: true,
+            showPoint: true,
+            chartType,
+            showBoxOption,
+            special
+        };
+        let allValDesc = {};
+        let _allSensorType = special?.allSensorType?.reduce((final, curr) => {
+            final[curr.id] = curr.type;
+            return final;
+        }, {});
+        let _allPointAddress = special?.allPointAddress?.reduce((final, curr) => {
+            final[curr.name] = _allSensorType[curr.sensorTypeID];
+            allValDesc[curr.name] = curr.valDesc;
+            return final;
+        }, {});
+        if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
+            config.sensorType = _allPointAddress[dataSource[0].sensorName];
+            config.special.allValDesc = allValDesc;
+            return specialTypeChartOptionGenerator({dataSource, config});
+        }
+        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData, theme);
+        // 将markPoint配置加入
+        const chart = chartRef.current?.getEchartsInstance?.();
+        if (_option?.series?.[0] && chart) {
+            _option.series[0].markPoint = minMaxMarkPoint(dataSource,chart);
+        }
+        if (emptyOrError.empty || emptyOrError.error) {
+            if (isArray(_option.yAxis)) {
+                _option.yAxis.forEach(item => {
+                    item.max = 100;
+                    item.min = 0;
+                })
+            } else {
+                _option.yAxis.max = 100;
+                _option.yAxis.min = 0;
+            }
+        }
+        // 加入bi模式
+        if (theme === 'BI') _option = patchBIOption(_option, BI);
+        return _option;
+    }, [dataSource, smooth, curveCenter, chartType, predicateData,chartRef]);
+    useEffect(() => {
+        if (exportCanvas.exportFlag) {
+            const chart = chartRef.current?.getEchartsInstance?.();
+            let a = document.createElement('a');
+            a.href = chart.getDataURL('image/png');
+            a.download = '曲线图片.png'
+            a.click();
+            a.remove();
+            exportCanvas.setExportFlag(null);
+        }
+    }, [exportCanvas.exportFlag]);
+    useEffect(() => {
+        chartRef.current?.resize?.();
+        const chart = chartRef.current?.getEchartsInstance?.();
+        function hander(params) {
+            const {selected} = params;
+            const count = Object.values(selected || {}).filter((item) => item).length;
+            const option = cloneDeep(chart.getOption());
+            const needMarkLine = count === 1;
+            option.series.forEach((item, index) => {
+                if (needMarkLine && selected[item.name]) {
+                    item.markLine = alarmMarkLine(
+                        dataSource[index],
+                        index,
+                        [dataSource[index]],
+                        deviceAlarmSchemes,
+                    );
+                    // item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]);
+                } else {
+                    item.markLine = {};
+                    item.markPoint = {};
+                }
+            });
+            chart.setOption(option, true);
+        }
         if (!chart) return;
         renderMarkPoint();
         chart.on('legendselectchanged', hander);
@@ -285,7 +290,7 @@ const SingleChart = memo((props) => {
             chart.off('legendselectchanged', renderMarkPoint);
             chart.off('datazoom', renderMarkPoint);
         };
-    }, [dataSource, deviceAlarmSchemes]);
+    }, [JSON.stringify(option)]);
 
     // 网格开关，不更新整个图表
     useEffect(() => {

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

@@ -59,7 +59,20 @@ export function getDictionaryInfoAll(params) {
         params
     })
 }
-
+export function searchDataDictionaryList (params) {
+    return request({
+        url: `${baseUrl}/PandaOMS/OMS/DataManger/SearchDataDictionaryList`,
+        method: REQUEST_METHOD_GET,
+        params
+    })
+}
+export function getDataDictionaryList (params) {
+    return request({
+        url: `${baseUrl}/PandaOMS/OMS/DataManger/GetDataDictionaryList`,
+        method: REQUEST_METHOD_GET,
+        params
+    })
+}
 export function getSensorType() {
     return request({
         url: `${baseUrl}/PandaMonitor/Monitor/Sensor/GetSensorType`,

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

@@ -95,14 +95,9 @@ import HistoryView from '../index';
 ];*/
 const deviceParams = [
     {
-        "deviceCode": "EGJZ00000002",
-        "sensors": "出水实际压力,1#水箱液位",
-        "deviceType": "二供机组"
-    },
-    {
-        "deviceCode": "EGBF00000004",
-        "sensors": "今日用电量,今日供水量",
-        "deviceType": "二供泵房"
+        "deviceCode": "SZJCY00000001",
+        "sensors": "温度,压力,浊度,二氧化氯",
+        "deviceType": "水质监测仪"
     }
 ]
 const Demo = () => {

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

@@ -2,10 +2,15 @@ import React from 'react';
 import HistoryView from '../index';
 
 const deviceParams = [
-    {
+    /*    {
             "deviceCode": "EGBF00000022",
             "sensors": "出水瞬时流量,今日用电量,余氯",
             "deviceType": "二供泵房"
+        }*/
+    {
+        "deviceCode": "SZJCY00000006",
+        "sensors": "浊度",
+        "deviceType": "水质监测仪"
     }
 ]
 const Demo = () => {
@@ -13,8 +18,8 @@ const Demo = () => {
         <>
             <div>
                 <div style={{height: 700}}>
-                     {/*<HistoryView deviceParams={deviceParams} defaultModel="curve" />*/}
-                    <HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/>
+                    <HistoryView deviceParams={deviceParams} defaultModel="curve"/>
+                    {/*<HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/>*/}
                 </div>
             </div>
         </>