feat: 优化空数据时图表显示

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

+/**
+ * @tips:
+ * 2024年12月10日 当能查到数据，但是数据都是null，则图表的分割线无法正常出来。
+ *
+ * */
 import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
 import _, {cloneDeep} from 'lodash';
 import {BasicChart} from '@wisdom-components/basicchart';

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

@@ -29,7 +29,8 @@ const SingleChart = memo((props) => {
         predicateData,
         emptyOrError,
         theme = "Normal",
-        exportCanvas
+        exportCanvas,
+        dateRange
     } = props;
     const chartRef = useRef();
     const timerRef = useRef();
@@ -205,6 +206,7 @@ const SingleChart = memo((props) => {
     };
 
     const option = useMemo(() => {
+        const _dataSource = cloneDeep(dataSource);
         const config = {
             needUnit: true,
             curveCenter,
@@ -226,27 +228,34 @@ const SingleChart = memo((props) => {
             allValDesc[curr.name] = curr.valDesc;
             return final;
         }, {});
-        if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
-            config.sensorType = _allPointAddress[dataSource[0].sensorName];
+        if (_dataSource.length === 1 && SpecialType.includes(_allPointAddress[_dataSource[0].sensorName])) {
+            config.sensorType = _allPointAddress[_dataSource[0].sensorName];
             config.special.allValDesc = allValDesc;
-            return specialTypeChartOptionGenerator({dataSource, config});
+            return specialTypeChartOptionGenerator({_dataSource, config});
         }
-        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData, theme);
+        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, true);
+            _option.series[0].markPoint = minMaxMarkPoint(_dataSource, chart, true);
         }
         if (emptyOrError.empty || emptyOrError.error) {
             if (isArray(_option.yAxis)) {
                 _option.yAxis.forEach(item => {
-                    item.max = 100;
+                    item.max = 1;
                     item.min = 0;
                 })
             } else {
-                _option.yAxis.max = 100;
+                _option.yAxis.max = 1;
                 _option.yAxis.min = 0;
             }
+        } else {
+            _option.series.forEach(item => {
+                if (item.data.length === 0) {
+                    _option.yAxis[item.yAxisIndex].max = 1;
+                    _option.yAxis[item.yAxisIndex].min = 0;
+                }
+            })
         }
         // 加入bi模式
         if (theme === 'BI') _option = patchBIOption(_option, BI);

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

@@ -95,15 +95,30 @@ import HistoryView from '../index';
 ];*/
 const deviceParams = [
     {
-        "deviceCode": "SZJCY00000006",
-        "sensors": "浊度,pH,余氯",
-        "deviceType": "水质监测仪"
+        "deviceCode": "EGJZ00000318",
+        "sensors": "进水压力,出水瞬时流量",
+        "deviceType": "二供机组"
+    },
+    {
+        "deviceCode": "EGBF00000184",
+        "sensors": "进水压力,出水瞬时流量,今日用电量",
+        "deviceType": "二供泵房"
+    },
+    {
+        "deviceCode": "EGBF00000081",
+        "sensors": "进水压力,出水瞬时流量,今日用电量",
+        "deviceType": "二供泵房"
+    },
+    {
+        "deviceCode": "EGBF00000135",
+        "sensors": "进水压力,出水瞬时流量,今日用电量",
+        "deviceType": "二供泵房"
     }
 ]
 const Demo = () => {
     return <div>
         <div style={{height: 700}}>
-            <HistoryView deviceParams={deviceParams} grid/>
+            <HistoryView deviceParams={deviceParams} grid defaultDateRange={['2022-12-12 12:12:12','2022-12-31 23:23:23']}/>
         </div>
     </div>;
 };

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

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

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

@@ -338,6 +338,7 @@ const HistoryView = (props) => {
         needMarkLine,
         defaultDate,
         theme = 'Normal',
+        defaultDateRange = []
     } = props;
     if (theme === 'Normal') import('./index.less');
     if (theme === 'BI') import('./indexForBI.less');
@@ -419,7 +420,7 @@ const HistoryView = (props) => {
             let _dateArr = shortcutsValue ? shortcutsDatePickerArr : datePickerArr;
             return handleBatchTime(_dateArr, contrastOption);
         }
-    }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue, shortcutsValue]);
+    }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue, shortcutsValue,shortcutsDatePickerArr]);
     useEffect(() => {
         let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days');
         if (_diffDays > 7 && dataThinKey === '1min') {
@@ -1320,6 +1321,7 @@ const HistoryView = (props) => {
                         }
                     });
                     setLoading(false);
+
                     if (data.length !== 0) {
                         emptyOrError.current.empty = false;
                     } else {
@@ -1343,7 +1345,7 @@ const HistoryView = (props) => {
         const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
         // 简易模式下，在获取到时间参数后，将时间修改为 00:00:00 - 23:59:59
         let _dateRange = cloneDeep(dateRange);
-        if (timeFormatter === '简易模式' && !customerChecked) {
+        if (timeFormatter === '简易模式' && !customerChecked && timeValue === 'customer') {
             let _date = dateRange[0];
             _dateRange = [
                 {
@@ -1409,7 +1411,7 @@ const HistoryView = (props) => {
         return (
             <>
                 {tablePanelMemo}
-                <div className={`${prefixCls}-content`} ref={tableRef}>
+                <div className={`${prefixCls}-content`} data-key={'table'} ref={tableRef}>
                     {chartDataSource.length > 0 ? ( // <BasicTable
                         <VirtualTable
                             className={`${prefixCls}-virtual-table`}
@@ -1660,6 +1662,18 @@ const HistoryView = (props) => {
             );
         }
     }, [loading]);
+    // 初始时间
+    useEffect(() => {
+        if (defaultDateRange?.length === 2) {
+            let _arr = defaultDateRange.reduce((final, cur) => {
+                let _isDateStr = moment(cur).isValid();
+                final.push(_isDateStr);
+                return final
+            }, []);
+            if (_arr.includes(false)) return console.log('历史曲线组件：传入的默认日期格式错误，请修改');
+            onCustomerRangeChange(defaultDateRange.map(item => moment(item)));
+        }
+    }, [defaultDateRange]);
     return (
         <div
             className={classNames(
@@ -1763,6 +1777,7 @@ HistoryView.propTypes = {
     showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
     defaultDate: PropTypes.string,
     BIMode: PropTypes.bool,
+    defaultDateRange: PropTypes.array
 };
 
 HistoryView.defaultProps = {
@@ -1775,6 +1790,7 @@ HistoryView.defaultProps = {
     needMarkLine: true,
     defaultDate: 'day',
     BIMode: false,
+    defaultDateRange: []
 };
 
 export default HistoryView;

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

@@ -175,7 +175,13 @@
   justify-content: center;
   overflow: hidden;
 }
-
+.@{history-view}-content[data-key='table'] {
+  display: flex;
+  flex: 1;
+  align-items: start;
+  justify-content: center;
+  overflow: hidden;
+}
 .@{history-view}-grid {
   display: flex;
   flex-wrap: wrap;