feat: 发布历史曲线

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

@@ -5,7 +5,6 @@ import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator from './utils';
 import {getPointAddress, getPointAddressEntry, getSensorsRealName, getSensorType, getStatisticsInfo} from "./apis";
 import moment from "moment";
-import {isString} from "util";
 
 const ChartTitle = ({prefixCls, title, unit}) => {
     const cls = `${prefixCls}-grid-item-title`;
@@ -31,6 +30,7 @@ const GridChart = memo((props) => {
     const [gridData, setGridData] = useState([]);
     const [pointAddressEntryData, setPointAddressEntryData] = useState(null);
     const [sensorType, setSensorType] = useState(null);
+    const [isInit, setIsInit] = useState(true);
     // 新增逻辑：需要区分出哪些是统计值
 
     /**
@@ -170,9 +170,9 @@ const GridChart = memo((props) => {
         return 'day';
     };
     useEffect(() => {
-
         async function handle() {
-            let _data = await handleDataSource(dataSource)??[];
+            let _data = isInit ? dataSource : (await handleDataSource(dataSource) ?? []);
+            setIsInit(false);
             const grids = _data.reduce((pre, item, index) => {
                 const {sensorName, deviceType} = item;
                 const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
@@ -229,8 +229,29 @@ const GridChart = memo((props) => {
                 showGridLine: true,
                 isMultiple: gridData.length > 1
             });
-            // 在多图表里，底部缩放条的高度减小
-
+            // 无数据时，图表需要显示默认图形 2024年3月14日
+            // 1. x轴
+            let dataEmpty = [];
+            option.series.forEach(item => {
+                if (item.data.length === 0) {
+                    dataEmpty.push(true)
+                    item.data = [[moment(dataSource?.[0]?.dateFrom).valueOf(), null], [moment(dataSource?.[0]?.dateTo).valueOf(), null]]
+                } else {
+                    dataEmpty.push(false);
+                }
+            })
+            // 2. y轴
+            let allEmpty = dataEmpty.length ? dataEmpty.reduce((final, cur) => {
+                if (!cur) final = false;
+                return final
+            }, true) : true;
+            if (allEmpty) {
+                option.yAxis.forEach(item => {
+                    item.max = 100;
+                    item.min = 0;
+                });
+                option.tooltip = false;
+            }
             return {
                 key,
                 option: option,

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

@@ -56,7 +56,13 @@ const SingleChart = memo((props) => {
             config.special.allValDesc = allValDesc;
             return specialTypeChartOptionGenerator({dataSource, config});
         }
-        return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData);
+        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData);
+        let isEmpty = _option.series.length===0;
+        if (isEmpty) {
+            _option.yAxis.max=100;
+            _option.yAxis.min=0;
+        }
+        return _option;
     }, [dataSource, smooth, curveCenter, chartType, predicateData]);
     useEffect(() => {
         chartRef.current?.resize?.();
@@ -108,6 +114,7 @@ const SingleChart = memo((props) => {
                     let minValueIndex = valueArr.findIndex(val => val === minValue);
                     let maxPoint = pointArr[maxValueIndex];
                     let minPoint = pointArr[minValueIndex];
+                    if (!maxPoint || !minPoint) return {}
                     // 3. 计算坐标位置，返回的是 [x,y]的像素坐标
                     let maxPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(maxPoint.pt).valueOf(), maxPoint.pv])
                     let minPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(minPoint.pt).valueOf(), minPoint.pv])
@@ -313,11 +320,12 @@ const SingleChart = memo((props) => {
             !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
         [dataSource],
     );
-    return isEmpty ? (
+    return <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
+    /*    return isEmpty ? (
             <PandaEmpty/>
         ) : (
             <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
-    );
+        );*/
 });
 
 export default SingleChart;

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

@@ -282,7 +282,31 @@ const handleBatchTime = (arr, cOption) => {
     newArr = _.uniqWith(newArr, _.isEqual); // 去掉重复日期时间
     return newArr;
 };
-
+const handleFakeData = (dateRange, deviceParams) => {
+    let dateFrom = dateRange[0].dateFrom;
+    let dateTo = dateRange[0].dateTo;
+    return deviceParams.reduce((final, cur) => {
+        let _arr = cur.sensors.split(',');
+        _arr.forEach(sensor => {
+            final.push({
+                dataModel: [
+                    /*                    {pt: dateFrom, pv: null},
+                                        {pt: dateTo, pv: null}*/
+                    // {pv:null}
+                    {pv: null}
+                ],
+                dateFrom,
+                dateTo,
+                deviceCode: cur.deviceCode,
+                deviceType: cur.deviceType,
+                sensorName: sensor,
+                equipmentName: '',
+                stationCode: cur.deviceCode
+            })
+        })
+        return final;
+    }, [])
+}
 const timeColumn = {
     title: '采集时间',
     dataIndex: 'time',
@@ -325,7 +349,6 @@ const HistoryView = (props) => {
     // 同期对比模式
     const [contrastOption, setContrastOption] = useState('day'); // 对比时间类型: 日/月
     const [datePickerArr, setDatePickerArr] = useState(DefaultDatePicker(defaultDate)); // 对比时间段配置值
-
     const [checkboxData, setCheckboxData] = useState(() => [...CheckboxData]); // 曲线设置项
     const [dataThinKey, setDataThinKey] = useState(
         timeIntervalList[0].key === '1min' ? timeIntervalList[1].key : timeIntervalList[0].key,
@@ -334,7 +357,6 @@ const HistoryView = (props) => {
 
     const [columns, setColumns] = useState([]);
     const [tableData, setTableData] = useState([]);
-    const [chartDataSource, setChartDataSource] = useState([]);
     const [timeOrder, setTimeOrder] = useState('descend');
     const [chartType, setChartType] = useState('lineChart');
     const [showBoxOption, setShowBoxOption] = useState(true);
@@ -354,8 +376,9 @@ const HistoryView = (props) => {
     const [predicateDevice, setPredicateDevice] = useState(null);
     const [predicateData, setPredicateData] = useState([]);
     const [predicateTime, setPredicateTime] = useState(null);
+
     // 这部分功能有问题，等待解决后上线 2024年3月13日
-    // const [discreteDeviceType, setDiscreteDeviceType] = useState(['水厂'])
+    const [discreteDeviceType, setDiscreteDeviceType] = useState(['水厂'])
     // 历史数据相关的特征描述
     const deviceConfig = useRef({
         oneDevice: deviceParams.length === 1, //单设备
@@ -387,7 +410,7 @@ const HistoryView = (props) => {
         }
     }, [dateRange]);
     const [dates, setDates] = useState(null);
-
+    const [chartDataSource, setChartDataSource] = useState(handleFakeData(dateRange, deviceParams) ?? []);
     const configDependence = checkboxData
         .filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
         .map((item) => item.checked)
@@ -1080,7 +1103,7 @@ const HistoryView = (props) => {
         const acrossTables = [];
         const zoomArray = [];
         // 这部分功能有问题，等待解决后上线 2024年3月13日
-        // let hasDiscreteDeviceType = false;
+        let hasDiscreteDeviceType = false;
         deviceParams
             .map((item) => {
                 let _item = {...item};
@@ -1095,9 +1118,9 @@ const HistoryView = (props) => {
                 if (i.sensors && i.deviceCode)
                     acrossTables.push(_.omit(i, ['pointAddressID']));
                 // 这部分功能有问题，等待解决后上线 2024年3月13日
-                /*                if (discreteDeviceType.includes(i.deviceType)) {
+                if (discreteDeviceType.includes(i.deviceType)) {
                     hasDiscreteDeviceType = true;
-                                }*/
+                }
             });
         if (!acrossTables?.length || !dateRange.length) {
             handleTableData([]);
@@ -1138,9 +1161,9 @@ const HistoryView = (props) => {
             }
             // 2024年3月11日 如果设备是某些特殊设备，则采用离散型算法
             // 这部分功能有问题，等待解决后上线 2024年3月13日
-            /*            if (hasDiscreteDeviceType) {
-                            _finalParams.algorithmName = "outliers";
-                        }*/
+            if (hasDiscreteDeviceType && ignoreOutliers) {
+                _finalParams.algorithmName = "derivative";
+            }
             requestArr.push(getHistoryInfo(_finalParams));
         });
         setLoading(true);
@@ -1163,6 +1186,7 @@ const HistoryView = (props) => {
                                  *
                                  *     请注意，此项为重要变更，此变更会影响原始数据。
                                  */
+                                // d.dataModel=[];
                                 d.dataModel = d.dataModel.map((item) => {
                                     let {firstPV, lastPV, maxPV, minPV, pv} = item;
                                     if (pv !== null && firstPV === null && lastPV === null && maxPV === null && minPV === null) {
@@ -1330,9 +1354,7 @@ const HistoryView = (props) => {
                         ''
                     )}
                     <div className={`${prefixCls}-content`}>
-                        {!chartDataSource.length ? (
-                            <PandaEmpty/>
-                        ) : grid === true ? (
+                        {grid === true ? (
                             <GridChart
                                 curveCenter={curveCenter}
                                 prefixCls={prefixCls}
@@ -1348,6 +1370,7 @@ const HistoryView = (props) => {
                             />
                         ) : (
                             <SingleChart
+                                dateRange={dateRange}
                                 showBoxOption={showBoxOption}
                                 lineDataType={lineDataType}
                                 curveCenter={curveCenter}
@@ -1378,14 +1401,15 @@ const HistoryView = (props) => {
     const getDefaultOptions = async () => {
         // 特定设备
         // 这部分功能有问题，等待解决后上线 2024年3月13日
-        /*        getDictionaryInfoAll({
+        getDictionaryInfoAll({
             level: '离散算法设备类型',
         }).then(res => {
             if (res.code === 0 && res.data.length) {
                 let deviceType = res.data.find(item => item.fieldName === '设备类型')?.fieldValue;
                 setDiscreteDeviceType(deviceType.split(',').filter(item => item))
             }
-                })*/
+        })
+
         // 非单曲线、单指标不执行
         if (
             deviceParams?.length !== 1 ||

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

@@ -648,14 +648,16 @@ const returnXAxis = ({
             };
         });
     // 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
+    let minArr = series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined);
+    let maxArr = series.map((item) => item.data?.[item.data.length - 1]?.[0]).filter((item) => item !== undefined);
+    let minObj = minArr.length ? minArr : [moment(dataSource?.[0]?.dateFrom).valueOf()];
+    let maxObj = maxArr.length ? maxArr : [moment(dataSource?.[0]?.dateTo).valueOf()];
     const min = Math.min(
-        ...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
-    );
+        ...minObj
+    )
     const max = Math.max(
-        ...series
-            .map((item) => item.data?.[item.data.length - 1]?.[0])
-            .filter((item) => item !== undefined),
-    );
+        ...maxObj
+    )
     return {
         xAxis: {
             type: 'time',
@@ -1331,7 +1333,6 @@ const optionGenerator = (
         visualMap,
         ...restOption,
     };
-    console.log('_option: ', _options);
     return _options;
 };