feat: 升级历史曲线

packages/base-components/BasicChart/src/demos/Basic.tsx

@@ -16,7 +16,7 @@ const Demo = () => {
       },
     },
     grid: {
-      right: '20%',
+      right: '10%',
     },
     toolbox: {
       feature: {

packages/base-components/BasicChart/src/utils/legend.js

@@ -18,7 +18,7 @@ export const buildDefaultLegend = (option) => {
         textStyle: {
             padding: [0, 0, 0, 4],
             color: '#2d2d2d',
-            width: 80,
+            width: 120,
             overflow:'truncate'
         },
         tooltip:{

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

@@ -30,7 +30,7 @@ path: /
 
 ## 多图表
 
-<code src="./demos/GridDemo.js"></code>
+<!-- <code src="./demos/GridDemo.js"></code> -->
 
 ## API
 

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

@@ -29,7 +29,6 @@ const SingleChart = memo((props) => {
             showMarkLine: true,
             showPoint: true,
             chartType,
-            // justLine,
             showBoxOption,
             special
         };

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

@@ -4,26 +4,32 @@ import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
     /*10.182*/
-/*          {
-                deviceCode: 'EGBF00000141',
-                // sensors: '进水压力,出水瞬时流量,出水累计流量',
-                sensors: '进水压力',
-                deviceType: '熊猫二供泵房',
-                pointAddressID: 208,
-            },*/
-/*            {
-            "deviceCode": "SYJ00000008",
-            "sensors": "瞬时流量",
-            "deviceType": "水源井"
-        },*/
-    {
-        deviceCode: 'EGJZ00000197',
-        sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
-        // sensors: '1#变频器运行频率',
-        deviceType: '二供机组',
-        // pointAddressID: 208,
-    }
-
+    /*          {
+                    deviceCode: 'EGBF00000141',
+                    // sensors: '进水压力,出水瞬时流量,出水累计流量',
+                    sensors: '进水压力',
+                    deviceType: '熊猫二供泵房',
+                    pointAddressID: 208,
+                }, */
+    /*            {
+                "deviceCode": "SYJ00000008",
+                "sensors": "瞬时流量",
+                "deviceType": "水源井"
+            },
+        {
+            deviceCode: 'EGJZ00000197',
+            sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
+            // sensors: '1#变频器运行频率',
+            deviceType: '二供机组',
+            // pointAddressID: 208,
+        }, */
+    /*     {
+            deviceCode: 'EGJZ00000198',
+            sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
+            // sensors: '1#变频器运行频率',
+            deviceType: '二供机组',
+            // pointAddressID: 208,
+        }, */
     /*    {
             // deviceCode: 'EGBF00000002',
             // deviceCode: 'EGBF00000018',
@@ -35,12 +41,12 @@ const deviceParams = [
             deviceType: '熊猫压力表',
             pointAddressID: 4,
         },*/
-    /*        {
-              deviceCode: 'EGJZ00000226',
-              sensors: '出水压力',
-              deviceType: '二供机组',
-              pointAddressID: 4,
-            },*/
+    {
+        deviceCode: 'EGJZ00000226',
+        sensors: '出水压力',
+        deviceType: '二供机组',
+        pointAddressID: 4,
+    },
     /*        {
                 "deviceCode": "LLJ00000055",
                 "sensors": "正累计流量,瞬时流量",
@@ -52,51 +58,51 @@ const deviceParams = [
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-/*     {
+    {
         "deviceCode": "SC00000023",
         "sensors": "瞬时流量",
         "deviceType": "水厂"
-    } */
-    /*        {
-                "deviceCode": "JFJ00000001",
-                "sensors": "沉淀池投矾量瞬时,",
-                "deviceType": "加矾间"
-            }*/
-    /*    {
-            "deviceCode": "QSBF00000001",
-            "sensors": "取水浊度",
-            "deviceType": "取水泵房"
-        }*/
-    /*    {
-            "deviceCode": "SC00000023",
-            "sensors": "出水瞬时流量",
-            "deviceType": "水厂"
-        }*/
-    // {
-    //     "deviceCode": "XNCDC00000001",
-    //     "sensors": "沉淀池1号进水管流量",
-    //     "deviceType": "絮凝沉淀池"
-    // }
-/*    {
+    },
+    {
+        "deviceCode": "JFJ00000001",
+        "sensors": "沉淀池投矾量瞬时,",
+        "deviceType": "加矾间"
+    },
+    {
+        "deviceCode": "QSBF00000001",
+        "sensors": "取水浊度",
+        "deviceType": "取水泵房"
+    },
+    {
+        "deviceCode": "SC00000023",
+        "sensors": "出水瞬时流量",
+        "deviceType": "水厂"
+    },
+    {
+        "deviceCode": "XNCDC00000001",
+        "sensors": "沉淀池1号进水管流量",
+        "deviceType": "絮凝沉淀池"
+    },
+    {
         "deviceCode": "LLJ00000001",
         "sensors": "瞬时流量",
         "deviceType": "流量计"
-    }*/
+    },
     /*邳州*/
-/*    {
+    {
         deviceCode: 'EGJZ00000027',
         sensors: '2#变频器运行频率',
         deviceType: '二供机组',
-    }*/
+    },
     /*确山*/
     /*泵3状态*/
-/*    {
-        // EGJZ00000003
-        deviceCode: 'EGJZ00000003',
-        // sensors: '3#频率',
-        sensors: '出1累计流量',
-        deviceType: '二供机组',
-    }*/
+    /*    {
+            // EGJZ00000003
+            deviceCode: 'EGJZ00000003',
+            // sensors: '3#频率',
+            sensors: '出1累计流量',
+            deviceType: '二供机组',
+        } */
 ];
 const Demo = () => {
     return (

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

-import React, {useContext, useEffect, useMemo, useState, useCallback, useRef} from 'react';
+import React, { useContext, useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
@@ -34,10 +34,10 @@ import {
 import SingleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
-import {globalConfig} from 'antd/lib/config-provider';
+import { globalConfig } from 'antd/lib/config-provider';
 
-const {RangePicker} = DatePicker;
-const {Option} = Select;
+const { RangePicker } = DatePicker;
+const { Option } = Select;
 
 const startFormat = 'YYYY-MM-DD 00:00:00';
 const endFormat = 'YYYY-MM-DD 23:59:59';
@@ -263,7 +263,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数
 const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数
 const HistoryView = (props) => {
     const [completeInit, setCompleteInit] = useState(false);
-    const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('history-view');
     const {
         title,
@@ -311,6 +311,14 @@ const HistoryView = (props) => {
     const [percent, setPercent] = useState(0);
     // 频率指标特殊业务
     const [special1, setSpecial1] = useState(null);
+    // 历史数据相关的特征描述
+    const deviceConfig = useRef({
+        oneDevice: deviceParams.length === 1,//单设备
+        oneSensor: [...new Set(deviceParams.reduce((final, cur) => {
+            let _sensors = cur.sensors.split(',');
+            return final.concat(_sensors);
+        }, []))].length === 1, // 单指标
+    });
     // 选择的时间范围值
     const dateRange = useMemo(() => {
         if (timeValue === 'customer') {
@@ -444,13 +452,13 @@ const HistoryView = (props) => {
             onContrastChange(contrastOption);
             setShowBoxOption(false);
             setChartType('lineChart');
-            onCheckboxChange({target: {value: false}}, 'chartType');
-            onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
+            onCheckboxChange({ target: { value: false } }, 'chartType');
+            onCheckboxChange({ target: { value: false } }, 'ignoreOutliers');
         } else {
             // 自定义
             // 不需要处理
             setShowBoxOption(true);
-            onCheckboxChange({target: {value: true}}, 'chartType');
+            onCheckboxChange({ target: { value: true } }, 'chartType');
         }
     };
     const onShortcutsChange = (e) => {
@@ -460,37 +468,37 @@ const HistoryView = (props) => {
         switch (_val) {
             case '近3天':
                 _arr = [
-                    {key: 1, value: moment()},
-                    {key: 2, value: moment().subtract(1, 'days')},
-                    {key: 3, value: moment().subtract(2, 'days')},
+                    { key: 1, value: moment() },
+                    { key: 2, value: moment().subtract(1, 'days') },
+                    { key: 3, value: moment().subtract(2, 'days') },
                 ]
                 break;
             case '近7天':
                 _arr = [
-                    {key: 1, value: moment()},
-                    {key: 2, value: moment().subtract(1, 'days')},
-                    {key: 3, value: moment().subtract(2, 'days')},
-                    {key: 4, value: moment().subtract(3, 'days')},
-                    {key: 5, value: moment().subtract(4, 'days')},
-                    {key: 6, value: moment().subtract(5, 'days')},
-                    {key: 7, value: moment().subtract(6, 'days')},
+                    { key: 1, value: moment() },
+                    { key: 2, value: moment().subtract(1, 'days') },
+                    { key: 3, value: moment().subtract(2, 'days') },
+                    { key: 4, value: moment().subtract(3, 'days') },
+                    { key: 5, value: moment().subtract(4, 'days') },
+                    { key: 6, value: moment().subtract(5, 'days') },
+                    { key: 7, value: moment().subtract(6, 'days') },
                 ]
                 break;
             case '近3月':
                 _arr = [
-                    {key: 1, value: moment()},
-                    {key: 2, value: moment().subtract(1, 'months')},
-                    {key: 3, value: moment().subtract(2, 'months')},
+                    { key: 1, value: moment() },
+                    { key: 2, value: moment().subtract(1, 'months') },
+                    { key: 3, value: moment().subtract(2, 'months') },
                 ]
                 break;
             case '近6月':
                 _arr = [
-                    {key: 1, value: moment()},
-                    {key: 2, value: moment().subtract(1, 'months')},
-                    {key: 3, value: moment().subtract(2, 'months')},
-                    {key: 4, value: moment().subtract(3, 'months')},
-                    {key: 5, value: moment().subtract(4, 'months')},
-                    {key: 6, value: moment().subtract(5, 'months')},
+                    { key: 1, value: moment() },
+                    { key: 2, value: moment().subtract(1, 'months') },
+                    { key: 3, value: moment().subtract(2, 'months') },
+                    { key: 4, value: moment().subtract(3, 'months') },
+                    { key: 5, value: moment().subtract(4, 'months') },
+                    { key: 6, value: moment().subtract(5, 'months') },
                 ]
                 break;
         }
@@ -553,7 +561,7 @@ const HistoryView = (props) => {
                 )}
                 {timeValue === 'contrast' && ( // 同期对比
                     <>
-                        <Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
+                        <Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
                             <Option value="day">日</Option>
                             <Option value="month" disabled={lineDataType === '原始曲线'}>月</Option>
                         </Select>
@@ -578,14 +586,14 @@ const HistoryView = (props) => {
                                         picker={contrastOption === 'day' ? undefined : contrastOption}
                                         value={child.value}
                                         onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
-                                        style={{width: 130, border: !shortcutsValue ? '1px solid #1890ff' : ''}}
+                                        style={{ width: 130, border: !shortcutsValue ? '1px solid #1890ff' : '' }}
                                     />
                                     {datePickerArr.length > 2 && (
                                         <div
                                             className={classNames(`${prefixCls}-contrast-delete`)}
                                             onClick={() => handleDeleteDatePicker(index)}
                                         >
-                                            <CloseCircleFilled/>
+                                            <CloseCircleFilled />
                                         </div>
                                     )}
                                 </div>
@@ -594,7 +602,7 @@ const HistoryView = (props) => {
                                 )}
                             </div>
                         ))}
-                        {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
+                        {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
                     </>
                 )}
             </div>
@@ -664,13 +672,13 @@ const HistoryView = (props) => {
                     </Checkbox>
                     {child.tooltip && (
                         <Tooltip title={child.tooltip}>
-                            <QuestionCircleFilled className={`${prefixCls}-question`}/>
+                            <QuestionCircleFilled className={`${prefixCls}-question`} />
                         </Tooltip>
                     )}
                     {
                         child.hasSub && child.checked && false ?
-                            <Select style={{width: 80, marginLeft: 10}} value={algorithmValue}
-                                    onChange={(e) => setAlgorithmValue(e)}>
+                            <Select style={{ width: 80, marginLeft: 10 }} value={algorithmValue}
+                                onChange={(e) => setAlgorithmValue(e)}>
                                 <Option value={1}>低</Option>
                                 <Option value={5}>中</Option>
                                 <Option value={10}>高</Option>
@@ -685,7 +693,7 @@ const HistoryView = (props) => {
         return (
             <div
                 className={classNames(`${prefixCls}-cover`)}
-                style={isChart && isSingle ? {width: '100%'} : {}}
+                style={isChart && isSingle ? { width: '100%' } : {}}
             >
                 {
                     isChart ? <>
@@ -700,7 +708,7 @@ const HistoryView = (props) => {
                             </Radio.Group>
                             {/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
                             <Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
-                                <QuestionCircleFilled style={{marginLeft: 6}} className={`${prefixCls}-question`}/>
+                                <QuestionCircleFilled style={{ marginLeft: 6 }} className={`${prefixCls}-question`} />
                             </Tooltip>
                         </div>
                     </> : ''
@@ -709,14 +717,14 @@ const HistoryView = (props) => {
                     <>
                         {
                             lineDataType !== '原始曲线' ? <>
-                                <div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
+                                <div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
                                 <Radio.Group
                                     value={chartType}
-                                    style={{marginRight: 16}}
+                                    style={{ marginRight: 16 }}
                                     onChange={(e) => {
                                         let _value = e.target.value;
                                         setChartType(_value);
-                                        onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType');
+                                        onCheckboxChange({ target: { value: _value !== 'boxChart' } }, 'chartType');
                                     }}
                                 >
                                     <Radio.Button value={'lineChart'}>线形图</Radio.Button>
@@ -743,7 +751,7 @@ const HistoryView = (props) => {
                 {activeTabKey === 'table' && (
                     <Select
                         value={dataThinKey}
-                        style={{width: 90}}
+                        style={{ width: 90 }}
                         onChange={onTimeIntervalChange}
                         disabled={!dataConfig.dataThin}
                     >
@@ -792,7 +800,7 @@ const HistoryView = (props) => {
         // data = data.filter(item => item.sensorName !== '是否在线');
         const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
         const dataIndexAccess = (dataItem, index) => {
-            const {stationCode, sensorName} = dataItem;
+            const { stationCode, sensorName } = dataItem;
             return `${stationCode}-${sensorName}-${index}`;
         };
 
@@ -800,17 +808,24 @@ const HistoryView = (props) => {
         if (timeValue === 'contrast') {
             format = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
         }
-
+        // 判断是否是单设备，单设备则不显示设备名称
         // 处理表头数据
         const columnsData = data.map((item, index) => {
-            const {stationCode, equipmentName, sensorName, unit, dataModel} = item;
+            const { stationCode, equipmentName, sensorName, unit, dataModel } = item;
             const dataIndex = dataIndexAccess(item, index);
+            let _title = '';
+            if (deviceConfig.current.oneDevice) {
+                _title = `${sensorName}${unit ? `(${unit})` : ''}`;
+            } else {
+                _title = `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`
+            }
             let col = {
-                title: `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`,
+                title: _title,
                 dataIndex: dataIndex,
                 key: dataIndex,
                 ellipsis: true,
                 align: 'center',
+                width:200
             };
             // 同期对比
             if (timeValue === 'contrast' && dataModel[0]) {
@@ -825,7 +840,7 @@ const HistoryView = (props) => {
         // 格式化时间对齐数据, 生成行数
         const timeData = {};
         const buildDefaultData = (time) => {
-            const obj = {key: time, time: time};
+            const obj = { key: time, time: time };
             data.forEach((item, index) => {
                 const dataIndex = dataIndexAccess(item, index);
                 obj[dataIndex] = '';
@@ -833,32 +848,32 @@ const HistoryView = (props) => {
             return obj;
         };
         data.forEach((item, index) => {
-            const {stationCode, sensorName, dataModel} = item;
+            const { stationCode, sensorName, dataModel } = item;
             dataModel &&
-            dataModel.forEach((data) => {
-                const formatTime = moment(data.pt).format(format);
+                dataModel.forEach((data) => {
+                    const formatTime = moment(data.pt).format(format);
 
-                let time = formatTime;
-                if (timeValue === 'contrast') {
-                    time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
-                }
+                    let time = formatTime;
+                    if (timeValue === 'contrast') {
+                        time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
+                    }
 
-                timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
-            });
+                    timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
+                });
         });
 
         // 处理表格数据
         data.forEach((child, index) => {
-            const {dataModel} = child;
+            const { dataModel } = child;
             const dataIndex = dataIndexAccess(child, index);
             dataModel &&
-            dataModel.forEach((value, j) => {
-                const formatTime = moment(value.pt).format(format);
-                const dataRow = timeData[formatTime];
-                if (dataRow) {
-                    dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
-                }
-            });
+                dataModel.forEach((value, j) => {
+                    const formatTime = moment(value.pt).format(format);
+                    const dataRow = timeData[formatTime];
+                    if (dataRow) {
+                        dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
+                    }
+                });
         });
         const timeSort = (a, b) => {
             let aa = a,
@@ -898,40 +913,40 @@ const HistoryView = (props) => {
     };
     const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => {
         if (lineDataType === '原始曲线') {
-            return {unit: '', zoom: ''}
+            return { unit: '', zoom: '' }
         }
         // edit by zy 根据选择的时长控制抽稀频度
         if (diffYears > 0) {
-            if (diffYears === 1) return {unit: 'h', zoom: '24'}
-            return {unit: 'h', zoom: '48'}
+            if (diffYears === 1) return { unit: 'h', zoom: '24' }
+            return { unit: 'h', zoom: '48' }
         } else if (diffYears === 0 && diffDays > 0) {
-            if (diffDays > 90) return {unit: 'h', zoom: '24'}
-            if (diffDays > 30) return {unit: 'h', zoom: '6'}
-            if (diffDays > 15) return {unit: 'h', zoom: '4'}
-            if (diffDays > 7) return {unit: 'h', zoom: '1'}
-            if (diffDays > 3) return {unit: 'min', zoom: '30'}
-            if (diffDays > 1) return {unit: 'min', zoom: '15'}
-            if (diffDays === 1) return {unit: 'min', zoom: '5'}
+            if (diffDays > 90) return { unit: 'h', zoom: '24' }
+            if (diffDays > 30) return { unit: 'h', zoom: '6' }
+            if (diffDays > 15) return { unit: 'h', zoom: '4' }
+            if (diffDays > 7) return { unit: 'h', zoom: '1' }
+            if (diffDays > 3) return { unit: 'min', zoom: '30' }
+            if (diffDays > 1) return { unit: 'min', zoom: '15' }
+            if (diffDays === 1) return { unit: 'min', zoom: '5' }
         } else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
-            if (diffHours > 12) return {unit: 'min', zoom: '5'}
-            if (diffHours > 4) return {unit: 'min', zoom: '1'}
-            if (diffHours > 1) return {unit: 's', zoom: '30'}
-            if (diffHours > 0) return {unit: 's', zoom: '5'}
-            return {unit: 's', zoom: '5'}
+            if (diffHours > 12) return { unit: 'min', zoom: '5' }
+            if (diffHours > 4) return { unit: 'min', zoom: '1' }
+            if (diffHours > 1) return { unit: 's', zoom: '30' }
+            if (diffHours > 0) return { unit: 's', zoom: '5' }
+            return { unit: 's', zoom: '5' }
         } else {
-            return {unit: '', zoom: ''}
+            return { unit: '', zoom: '' }
         }
     };
 
     // 处理接口服务参数的变化
     const onChangeParams = (value = {}) => {
-        const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
+        const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
         const requestArr = [];
         const acrossTables = [];
         const zoomArray = [];
         deviceParams
             .map((item) => {
-                let _item = {...item};
+                let _item = { ...item };
                 //                历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15
                 /*                _item.sensors =
                                     item.sensors && !item.sensors.includes('是否在线')
@@ -971,7 +986,7 @@ const HistoryView = (props) => {
             let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
             let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) : {};
             zoomArray.push(zoomParam);
-            requestArr.push(getHistoryInfo({...param, ...zoomParam}));
+            requestArr.push(getHistoryInfo({ ...param, ...zoomParam }));
         });
         setLoading(true);
         Promise.all(requestArr).then((results) => {
@@ -979,7 +994,7 @@ const HistoryView = (props) => {
             if (results.length) {
                 let data = [];
                 results.forEach((res, index) => {
-                    const {dateFrom, dateTo} = dateRange?.[index] ?? {};
+                    const { dateFrom, dateTo } = dateRange?.[index] ?? {};
                     if (res.code === 0 && res.data.length) {
                         res.data.forEach((d) => {
                             d.dateFrom = dateFrom || '';
@@ -1022,7 +1037,7 @@ const HistoryView = (props) => {
 
     useEffect(() => {
         if (!completeInit) return;
-        const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
+        const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
         beforChangeParams().finally(() => {
             onChangeParams({
                 isDilute: dataThin,
@@ -1067,9 +1082,10 @@ const HistoryView = (props) => {
                         {...tableProps}
                         pagination={false}
                         onChange={handleChange}
+                        scroll={{x:'max-content',y:'calc(100% - 40px)'}}
                     />
                 ) : (
-                    <PandaEmpty/>
+                    <PandaEmpty />
                 )}
             </div>
         </>
@@ -1107,11 +1123,11 @@ const HistoryView = (props) => {
                     </div>
                     {
                         lineDataType === '原始曲线' && false ?
-                            <div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
+                            <div style={{ marginTop: 10 }}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
                     }
                     <div className={`${prefixCls}-content`}>
                         {!chartDataSource.length ? (
-                            <PandaEmpty/>
+                            <PandaEmpty />
                         ) : grid === true ? (
                             <GridChart
                                 curveCenter={curveCenter}
@@ -1129,7 +1145,6 @@ const HistoryView = (props) => {
                                 showGridLine={chartGrid}
                                 prefixCls={prefixCls}
                                 dataSource={chartDataSource}
-                                // justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
                                 chartType={isBoxPlots ? chartType : null}
                                 contrast={timeValue === 'contrast'}
                                 contrastOption={contrastOption}
@@ -1152,7 +1167,7 @@ const HistoryView = (props) => {
         // 非单曲线、单指标不执行
         if (deviceParams?.length !== 1 || (deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',')?.length > 1)) return setCompleteInit(true);
         setLoading(true);
-        const {deviceCode, deviceType, sensors} = deviceParams[0];
+        const { deviceCode, deviceType, sensors } = deviceParams[0];
         let _id = (await getPointAddress({
             code: deviceCode
         }))?.data?.[0]?.id;
@@ -1176,7 +1191,7 @@ const HistoryView = (props) => {
                         return final
                     }, {});
                     let _checkboxData = [...checkboxData].map(item => {
-                        let _item = {...item};
+                        let _item = { ...item };
                         if (_opt[item.label] !== undefined) {
                             _item.checked = _opt[item.label] === 'true'
                         }
@@ -1190,7 +1205,7 @@ const HistoryView = (props) => {
                     let _statusName = _sensorConfig?.statusName;
                     if (_statusName) {
                         let _statusConfig = _res1.data.find(item => item?.name.trim() === _statusName.trim());
-                        let _valDesc = _statusConfig?.valDesc||'';
+                        let _valDesc = _statusConfig?.valDesc || '';
                         setSpecial1({
                             name: _statusName,
                             valDesc: _valDesc.split(';').reduce((final, cur) => {
@@ -1230,18 +1245,18 @@ const HistoryView = (props) => {
     }, [loading])
     return (
         <div className={classNames(prefixCls, 'wkt-scroll-light')}>
-            <div className={classNames(`${prefixCls}-spin`)} style={{position: "relative"}}>
+            <div className={classNames(`${prefixCls}-spin`)} style={{ position: "relative" }}>
                 {
                     (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}
-                                              steps={20}
-                                              className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
-                                              showInfo={false}/>
+                                        steps={20}
+                                        className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
+                                        showInfo={false} />
                                     <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
-                                </> : <Spin spinning={loading || false}/>
+                                </> : <Spin spinning={loading || false} />
                             }
 
                         </div>
@@ -1261,7 +1276,7 @@ const HistoryView = (props) => {
                                 <div className={`${prefixCls}-extra-right`}>
                                     {activeTabKey === 'table' && (
                                         <Button type="link" onClick={exportExcelBtn}>
-                                            <DownloadOutlined/>
+                                            <DownloadOutlined />
                                             下载
                                         </Button>
                                     )}

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

 import moment from 'moment';
-import _, {isArray} from 'lodash';
+import _, { isArray } from 'lodash';
 import maxIcon from './assets/最大实心.svg';
 import minIcon from './assets/最小实心.svg';
 import minIconDownArrow from './assets/最小实心箭头朝下.svg';
-import lineChart from "@wisdom-components/basicchart/es/LineChart";
+import lineChart from '@wisdom-components/basicchart/es/LineChart';
+import { offset } from 'highcharts';
 
 /** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
 const AXIS_WIDTH = 40;
 const COLOR = {
-    NORMAL: '#1685FF',
-    UPER: '#fa8c16',
-    UPUPER: '#FF0000',
-    // LOWER: '#13c2c2',
-    // LOWLOWER: '#2f54eb',
-    LOWER: '#fa8c16',
-    LOWLOWER: '#FF0000',
-    AVG: '#00B8B1',
+  NORMAL: '#1685FF',
+  UPER: '#fa8c16',
+  UPUPER: '#FF0000',
+  // LOWER: '#13c2c2',
+  // LOWLOWER: '#2f54eb',
+  LOWER: '#fa8c16',
+  LOWLOWER: '#FF0000',
+  AVG: '#00B8B1',
 };
 
 const isMobile = () => {
-    const userAgent = navigator.userAgent.toLowerCase();
-    if (
-        /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
-            userAgent
-        )
-    ) {
-        return true;
-    }
-    return false;
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
+    return true;
+  }
+  return false;
 };
 const returnRem = (num, base = 375) => num * (base / 375);
 export const handlePx = (num, unit = '') => {
-    const _isMobile = isMobile();
-    const _base = document.body.clientWidth;
-    let _num = _isMobile ? `${returnRem(num, _base)}` : `${num}`;
-    return unit ? `${_num}${unit}` : Number(_num);
+  const _isMobile = isMobile();
+  const _base = document.body.clientWidth;
+  let _num = _isMobile ? `${returnRem(num, _base)}` : `${num}`;
+  return unit ? `${_num}${unit}` : Number(_num);
 };
 const PC_OPTION = {
-    markPoint: {
-        padding: [2, 12],
-        lineHeight: 22,
-        backgroundColor:
-            window.globalConfig &&
-            window.globalConfig &&
-            window.globalConfig.variableTheme?.primaryColor
-                ? window.globalConfig.variableTheme.primaryColor
-                : '#0087F7',
-        borderWidth: 1
-    },
-    fontSize: 16,
-    fontColor: "#ffffff",
-    dataZoomHeight: 28
-}
+  markPoint: {
+    padding: [2, 12],
+    lineHeight: 22,
+    backgroundColor:
+      window.globalConfig && window.globalConfig && window.globalConfig.variableTheme?.primaryColor
+        ? window.globalConfig.variableTheme.primaryColor
+        : '#0087F7',
+    borderWidth: 1,
+  },
+  fontSize: 16,
+  fontColor: '#ffffff',
+  dataZoomHeight: 28,
+};
 const MOBILE_OPTION = {
-    markPoint: {
-        padding: [2, 6],
-        lineHeight: 18,
-        backgroundColor: 'rgba(255,255,255,0.6)',
-        borderWidth: 0
-    },
-    fontSize: handlePx(12),
-    fontColor: "#0087F7",
-    dataZoomHeight: 20
-}
+  markPoint: {
+    padding: [2, 6],
+    lineHeight: 18,
+    backgroundColor: 'rgba(255,255,255,0.6)',
+    borderWidth: 0,
+  },
+  fontSize: handlePx(12),
+  fontColor: '#0087F7',
+  dataZoomHeight: 20,
+};
 const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
 /**
  * 图表系列名称格式化
@@ -73,13 +68,13 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
  * @returns
  */
 const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
-    const {equipmentName, sensorName, unit, dataModel, dateFrom, dateTo} = data;
-    let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
-    if (contrast) {
-        const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
-        name = `${name}-${time}`;
-    }
-    return name;
+  const { equipmentName, sensorName, unit, dataModel, dateFrom, dateTo } = data;
+  let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
+  if (contrast) {
+    const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
+    name = `${name}-${time}`;
+  }
+  return name;
 };
 
 /**
@@ -91,14 +86,14 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
  * @returns 图表系列数据, [[DateTime, value]]
  */
 const dataAccessor = (data, contrast, contrastOption) => {
-    const dataModel = data?.dataModel ?? [];
-    const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:ss' : '2020-01-DD HH:mm:ss';
-    return dataModel
-        .filter((item) => item.sensorName !== '是否在线')
-        .map((item) => {
-            const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
-            return [moment(time).valueOf(), item.pv];
-        });
+  const dataModel = data?.dataModel ?? [];
+  const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:ss' : '2020-01-DD HH:mm:ss';
+  return dataModel
+    .filter((item) => item.sensorName !== '是否在线')
+    .map((item) => {
+      const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
+      return [moment(time).valueOf(), item.pv];
+    });
 };
 
 /**
@@ -108,8 +103,8 @@ const dataAccessor = (data, contrast, contrastOption) => {
  * @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
  */
 const areaStyleFormatter = (data) => {
-    const {sensorName} = data;
-    return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
+  const { sensorName } = data;
+  return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
 };
 
 /**
@@ -119,100 +114,100 @@ const areaStyleFormatter = (data) => {
  * @returns
  */
 const minMax = (data) => {
-    const {dataModel} = data;
-    let min = Number.MAX_SAFE_INTEGER;
-    let max = Number.MIN_SAFE_INTEGER;
-    dataModel.forEach((item) => {
-        min = Math.min(min, item.pv ?? 0);
-        max = Math.max(max, item.pv ?? 0);
-    });
-    return [min, max];
+  const { dataModel } = data;
+  let min = Number.MAX_SAFE_INTEGER;
+  let max = Number.MIN_SAFE_INTEGER;
+  dataModel.forEach((item) => {
+    min = Math.min(min, item.pv ?? 0);
+    max = Math.max(max, item.pv ?? 0);
+  });
+  return [min, max];
 };
 
 const markLineItem = (name, value, color) => {
-    return {
-        name: name,
-        yAxis: value,
-        value: value,
-        lineStyle: {
-            color: color || '#000',
-        },
-        label: {
-            position: 'insideEndTop',
-            color: color || '#000',
-            formatter: function () {
-                return `${name}:${value}`;
-            },
-        },
-    };
+  return {
+    name: name,
+    yAxis: value,
+    value: value,
+    lineStyle: {
+      color: color || '#000',
+    },
+    label: {
+      position: 'insideEndTop',
+      color: color || '#000',
+      formatter: function () {
+        return `${name}:${value}`;
+      },
+    },
+  };
 };
 
 export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
-    // 只有一个数据曲线时显示markline
-    if (!dataItem || !schemes || dataSource.length !== 1) return {};
-    const {deviceType, stationCode, sensorName, decimalPoint} = dataItem;
-    const curSchemes = schemes.filter(
-        (item) =>
-            item.deviceCode === stationCode &&
-            item.sensorName === sensorName &&
-            item.valueType === '直接取值',
-    );
-    const data = [];
-    curSchemes.forEach((scheme) => {
-        const {hLimit, hhLimit, lLimit, llLimit} = scheme;
-        lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
-        hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
-        llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
-        hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#FF0000'));
-    });
-    data.push({
-        name: '平均线',
-        type: 'average',
-        lineStyle: {
-            color: '#00b8b1',
-            type: 'solid',
-        },
-        label: {
-            position: 'insideEndTop',
-            color: '#00b8b1',
-            formatter: function (param) {
-                return `平均值:${param.value}`;
-            },
-        },
-    });
-    return {
-        symbol: ['none', 'none'],
-        data,
-    };
+  // 只有一个数据曲线时显示markline
+  if (!dataItem || !schemes || dataSource.length !== 1) return {};
+  const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
+  const curSchemes = schemes.filter(
+    (item) =>
+      item.deviceCode === stationCode &&
+      item.sensorName === sensorName &&
+      item.valueType === '直接取值',
+  );
+  const data = [];
+  curSchemes.forEach((scheme) => {
+    const { hLimit, hhLimit, lLimit, llLimit } = scheme;
+    lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
+    hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
+    llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
+    hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#FF0000'));
+  });
+  data.push({
+    name: '平均线',
+    type: 'average',
+    lineStyle: {
+      color: '#00b8b1',
+      type: 'solid',
+    },
+    label: {
+      position: 'insideEndTop',
+      color: '#00b8b1',
+      formatter: function (param) {
+        return `平均值:${param.value}`;
+      },
+    },
+  });
+  return {
+    symbol: ['none', 'none'],
+    data,
+  };
 };
 
 export const minMaxMarkPoint = (dataItem, index, dataSource) => {
-    const _isMobile = isMobile();
-    // 只有一个数据曲线时显示markline
-    if (!dataItem || dataSource.length !== 1) return {};
-    const data = [
-        {
-            type: 'min',
-            value: null,
-            name: '最小: ',
-            symbol: `image://${minIcon}`,
-            symbolOffset: [0, 18],
-        },
-        {
-            type: 'max',
-            value: null,
-            name: '最大: ',
-            symbol: `image://${maxIcon}`,
-            symbolOffset: [0, -16],
-        }
-    ];
-    return {
-        label: {
-            show: false
-        },
-        symbolSize: [49, 31],
-        data,
-    };
+  const _isMobile = isMobile();
+  // 只有一个数据曲线时显示markline
+  if (!dataItem || dataSource.length !== 1) return {};
+  const data = [
+    {
+      type: 'min',
+      value: null,
+      name: '最小: ',
+      symbol: `image://${minIcon}`,
+      symbolOffset: [0, 18],
+    },
+    {
+      type: 'max',
+      value: null,
+      name: '最大: ',
+      symbol: `image://${maxIcon}`,
+      symbolOffset: [0, -16],
+    },
+  ];
+  return {
+    label: {
+      show: false,
+    },
+    symbolSize: [49, 31],
+    data,
+  };
 };
 
 /**
@@ -221,27 +216,27 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
  * @param {any} axis
  */
 export const decorateAxisGridLine = (axis, showGrid) => {
-    if (!axis) return;
-    axis.minorTick = {
-        lineStyle: {
-            color: '#e2e2e2',
-        },
-        ...(axis.minorTick || {}),
-        show: showGrid,
-        splitNumber: 2,
-    };
-    axis.minorSplitLine = {
-        lineStyle: {
-            color: '#e2e2e2',
-            type: 'dashed',
-        },
-        ...(axis.minorSplitLine || {}),
-        show: showGrid,
-    };
-    axis.splitLine = {
-        ...(axis.splitLine || {}),
-        show: showGrid,
-    };
+  if (!axis) return;
+  axis.minorTick = {
+    lineStyle: {
+      color: '#e2e2e2',
+    },
+    ...(axis.minorTick || {}),
+    show: showGrid,
+    splitNumber: 2,
+  };
+  axis.minorSplitLine = {
+    lineStyle: {
+      color: '#e2e2e2',
+      type: 'dashed',
+    },
+    ...(axis.minorSplitLine || {}),
+    show: showGrid,
+  };
+  axis.splitLine = {
+    ...(axis.splitLine || {}),
+    show: showGrid,
+  };
 };
 
 /**
@@ -250,562 +245,625 @@ export const decorateAxisGridLine = (axis, showGrid) => {
  * @param {any} dataItem
  */
 export const offlineArea = (dataItem) => {
-    if (!dataItem) return {};
-    const {dataModel} = dataItem;
-    let datas = new Array();
-    let offlineData = [];
-    let hasOffline = false;
-    dataModel.forEach((item, index) => {
-        if (!item.pv && !hasOffline) {
-            offlineData = [
-                {
-                    name: '离线',
-                    xAxis: new Date(item.pt),
-                    label: {show: !datas?.length}
-                },
-            ];
-            hasOffline = true;
-        } else if (item.pv && hasOffline) {
-            offlineData.push({
-                xAxis: new Date(item.pt),
-            });
-            datas.push(offlineData);
-            offlineData = [];
-            hasOffline = false;
-        }
-    });
-    return {
-        itemStyle: {
-            color: '#eee',
-            opacity: 0.6,
+  if (!dataItem) return {};
+  const { dataModel } = dataItem;
+  let datas = new Array();
+  let offlineData = [];
+  let hasOffline = false;
+  dataModel.forEach((item, index) => {
+    if (!item.pv && !hasOffline) {
+      offlineData = [
+        {
+          name: '离线',
+          xAxis: new Date(item.pt),
+          label: { show: !datas?.length },
         },
-        data: datas,
-    };
+      ];
+      hasOffline = true;
+    } else if (item.pv && hasOffline) {
+      offlineData.push({
+        xAxis: new Date(item.pt),
+      });
+      datas.push(offlineData);
+      offlineData = [];
+      hasOffline = false;
+    }
+  });
+  return {
+    itemStyle: {
+      color: '#eee',
+      opacity: 0.6,
+    },
+    data: datas,
+  };
 };
 // 生成默认legend配置
 export const buildDefaultLegend = (option) => {
-    const {title} = option;
+  const { title } = option;
 
-    let paddingRight = 0;
-    if (title && title.show) paddingRight = 80; // 给标题留够空间
+  let paddingRight = 0;
+  if (title && title.show) paddingRight = 80; // 给标题留够空间
 
-    return {
-        show: true,
-        right: 20,
-        top: 20,
-        icon: 'rect',
-        itemWidth: 14,
-        itemHeight: 8,
-        itemGap: 20,
-        padding: [0, 0, 0, paddingRight],
-        textStyle: {
-            padding: [0, 0, 0, 4],
-            color: '#2d2d2d',
-        },
-    };
+  return {
+    show: true,
+    right: 20,
+    top: 20,
+    icon: 'rect',
+    itemWidth: 14,
+    itemHeight: 8,
+    itemGap: 20,
+    padding: [0, 0, 0, paddingRight],
+    textStyle: {
+      padding: [0, 0, 0, 4],
+      color: '#2d2d2d',
+    },
+  };
 };
 // tooltip 模板
 const headTemplate = (param, opt) => {
-    if (!param) return '';
-    const {name, axisValueLabel, axisType, axisValue} = param;
-    const timeFormat = opt && opt.contrast ? (opt.contrastOption === 'day' ? 'HH:mm:ss' : 'DD日HH时') : 'YYYY-MM-DD HH:mm:ss';
-    const text =
-        axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
-    return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom:${handlePx(5, 'px')}; padding-bottom: ${handlePx(5, 'px')};">${text}</div>`;
+  if (!param) return '';
+  const { name, axisValueLabel, axisType, axisValue } = param;
+  const timeFormat =
+    opt && opt.contrast
+      ? opt.contrastOption === 'day'
+        ? 'HH:mm:ss'
+        : 'DD日HH时'
+      : 'YYYY-MM-DD HH:mm:ss';
+  const text =
+    axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
+  return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom:${handlePx(
+    5,
+    'px',
+  )}; padding-bottom: ${handlePx(5, 'px')};">${text}</div>`;
 };
 const seriesTemplate = (param, unit) => {
-    if (!param || param.seriesName === '自定义') return '';
-    const {value, encode} = param;
-    // const val = value[encode.y[0]];
-    const _unit = unit || '';
-    const color = '#008CFF';
-    if (!isArray(value))
-        return ` <div style="display: flex; align-items: center;">
-            <span style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${param.seriesName}</span>
+  if (!param || param.seriesName === '自定义') return '';
+  const { value, encode } = param;
+  // const val = value[encode.y[0]];
+  const _unit = unit || '';
+  const color = '#008CFF';
+  if (!isArray(value))
+    return ` <div style="display: flex; align-items: center;">
+            <span style="${isMobile()
+        ? 'width: ' +
+        handlePx(90, 'px') +
+        ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
+        : ''
+      }">${param.seriesName}</span>
             <span style="display:inline-block;">：</span>
-            <span style="color:${color};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value?.toFixed(3) ?? '-'}</span>
+            <span style="color:${color};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value?.toFixed(3) ?? '-'
+      }</span>
             <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
         </div>`;
-    return param.componentSubType !== 'candlestick'
-        ? `<div style="display: flex; align-items: center;">
-              <span style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${param.seriesName}</span><span style="display:inline-block;">：</span>
-              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'}</span>
+  return param.componentSubType !== 'candlestick'
+    ? `<div style="display: flex; align-items: center;">
+              <span style="${isMobile()
+      ? 'width: ' +
+      handlePx(90, 'px') +
+      ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
+      : ''
+    }">${param.seriesName}</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'
+    }</span>
               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
             </div>`
-        : `
+    : `
             <div style="display: flex; align-items: center;">
               <span>首值</span><span style="display:inline-block;">：</span>
-              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'}</span>
+              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'
+    }</span>
               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
             </div>
             <div style="display: flex; align-items: center;">
               <span>尾值</span><span style="display:inline-block;">：</span>
-              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[2] ?? '-'}</span>
+              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[2] ?? '-'
+    }</span>
               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
             </div>
             <div style="display: flex; align-items: center;">
               <span>周期最小值</span><span style="display:inline-block;">：</span>
-              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[3] ?? '-'}</span>
+              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[3] ?? '-'
+    }</span>
               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
             </div>
             <div style="display: flex; align-items: center;">
               <span>周期最大值</span><span style="display:inline-block;">：</span>
-              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[4] ?? '-'}</span>
+              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[4] ?? '-'
+    }</span>
               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
             </div>
           `;
 };
 const tooltipAccessor = (unit, contrastOption) => {
-    return {
-        formatter: function (params, ticket, callback) {
-            let tooltipHeader = '';
-            let tooltipContent = '';
-            if (isArray(params)) {
-                tooltipHeader = headTemplate(params[0], contrastOption);
-                params.forEach((param) => {
-                    tooltipContent += seriesTemplate(param, unit?.[param?.seriesIndex]);
-                });
-            } else {
-                tooltipHeader = headTemplate(params, contrastOption);
-                tooltipContent += seriesTemplate(params, unit?.[params?.seriesIndex]);
-            }
-            return `
+  return {
+    formatter: function (params, ticket, callback) {
+      let tooltipHeader = '';
+      let tooltipContent = '';
+      if (isArray(params)) {
+        tooltipHeader = headTemplate(params[0], contrastOption);
+        params.forEach((param) => {
+          tooltipContent += seriesTemplate(param, unit?.[param?.seriesIndex]);
+        });
+      } else {
+        tooltipHeader = headTemplate(params, contrastOption);
+        tooltipContent += seriesTemplate(params, unit?.[params?.seriesIndex]);
+      }
+      return `
       <div>
         ${tooltipHeader}
         <div>${tooltipContent}</div>
       </div>
     `;
-        },
-    };
+    },
+  };
 };
 // 处理特殊业务：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) => {
+  // 频率部分的业务
+  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]
-                });
+          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 {
-                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]
-                    });
-                }
+              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,
+      }, [])
+      .map((item) => {
+        _markAreaData.push([
+          {
+            xAxis: item.gte,
             itemStyle: {
-                opacity: 0.1
+              // 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
+              },
             },
-            data: _markAreaData
-        }
-    }
-    return _final;
+            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,
-                         contrastOption,
-                         nameWithSensor,
-                         showMarkLine,
-                         deviceAlarmSchemes,
-                         showPoint,
-                         restOption,
-                         smooth,
-                         special
-                     }) => {
-    // 根据"指标名称"分类yAxis
-    const yAxisInterator = (() => {
-        const map = new Map();
-        let current = -1;
-        const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
-        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 !_filterArr.includes(item.sensorName);
-        })
-        .map((item, index) => {
-            const {sensorName, unit} = item;
-            const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
-            const data = dataAccessor(item, contrast, contrastOption);
-            const type = 'line';
-            const areaStyle = areaStyleFormatter(item);
-            const yAxisIndex = yAxisInterator.get(sensorName);
-            const markLine = showMarkLine
-                ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
-                : {};
-            const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
-            // let markArea = null;
-            // 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
-            // 暂时注释，离线逻辑需要再确认 2023-09-15
-            /*            let _offlineAreasData = _offlineData
+  dataSource,
+  contrast,
+  contrastOption,
+  nameWithSensor,
+  showMarkLine,
+  deviceAlarmSchemes,
+  showPoint,
+  restOption,
+  smooth,
+  special,
+}) => {
+  // 根据"指标名称"分类yAxis
+  const yAxisInterator = (() => {
+    const map = new Map();
+    let current = -1;
+    const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
+    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 !_filterArr.includes(item.sensorName);
+    })
+    .map((item, index) => {
+      const { sensorName, unit } = item;
+      const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
+      const data = dataAccessor(item, contrast, contrastOption);
+      const type = 'line';
+      const areaStyle = areaStyleFormatter(item);
+      const yAxisIndex = yAxisInterator.get(sensorName);
+      const markLine = showMarkLine
+        ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
+        : {};
+      const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
+      // let markArea = null;
+      // 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
+      // 暂时注释，离线逻辑需要再确认 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,
-                type,
-                data,
-                areaStyle,
-                yAxisIndex,
-                smooth,
-                unit,
-                markLine,
-                markPoint,
-                markArea,
-            };
-        });
-    // 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
-    const min = Math.min(
-        ...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
-    );
-    const max = Math.max(
-        ...series
-            .map((item) => item.data?.[item.data.length - 1]?.[0])
-            .filter((item) => item !== undefined),
-    );
-    return {
-        xAxis: {
-            type: 'time', min, max, axisLabel: {
-                formatter: contrast ? (contrastOption === 'month' ? '{dd}日' : '{HH}:{mm}') : {
-                    year: '{yyyy}',
-                    month: '{MMM}',
-                    day: '{d}日',
-                    hour: '{HH}:{mm}',
-                    minute: '{HH}:{mm}',
-                    second: '{HH}:{mm}:{ss}',
-                    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}'
-                }
-            }
-        }, series, visualMap
-    };
-}
+      // 需求新增：增加频率业务
+      return {
+        notMerge: true,
+        name,
+        type,
+        data,
+        areaStyle,
+        yAxisIndex,
+        smooth,
+        unit,
+        markLine,
+        markPoint,
+        markArea,
+      };
+    });
+  // 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
+  const min = Math.min(
+    ...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
+  );
+  const max = Math.max(
+    ...series
+      .map((item) => item.data?.[item.data.length - 1]?.[0])
+      .filter((item) => item !== undefined),
+  );
+  return {
+    xAxis: {
+      type: 'time',
+      min,
+      max,
+      axisLabel: {
+        formatter: contrast
+          ? contrastOption === 'month'
+            ? '{dd}日'
+            : '{HH}:{mm}'
+          : {
+            year: '{yyyy}',
+            month: '{MMM}',
+            day: '{d}日',
+            hour: '{HH}:{mm}',
+            minute: '{HH}:{mm}',
+            second: '{HH}:{mm}:{ss}',
+            none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}',
+          },
+      },
+    },
+    series,
+    visualMap,
+  };
+};
 const handleDefault = (config, cusOption) => {
-    const needUnit = _.get(config, 'needUnit', false);
-    const curveCenter = _.get(config, 'curveCenter', false);
-    const nameWithSensor = _.get(config, 'nameWithSensor', true);
-    const showGridLine = _.get(config, 'showGridLine', true);
-    const showMarkLine = _.get(config, 'showMarkLine', false);
-    const showPoint = _.get(config, 'showPoint', false);
-    const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
-    const chartType = _.get(config, 'chartType', null);
-    // const justLine = _.get(config, 'justLine', false);
-    const showBoxOption = _.get(config, 'showBoxOption', false);
-    // 自定义属性
-    const restOption = _.pick(cusOption, ['title', 'legend']);
-    const special = _.get(config, 'special', {});
-    return {
-        needUnit,
-        curveCenter,
-        nameWithSensor,
-        showGridLine,
-        showMarkLine,
-        showPoint,
-        deviceAlarmSchemes,
-        chartType,
-        showBoxOption,
-        restOption,
-        special
-    }
+  const needUnit = _.get(config, 'needUnit', false);
+  const curveCenter = _.get(config, 'curveCenter', false);
+  const nameWithSensor = _.get(config, 'nameWithSensor', true);
+  const showGridLine = _.get(config, 'showGridLine', true);
+  const showMarkLine = _.get(config, 'showMarkLine', false);
+  const showPoint = _.get(config, 'showPoint', false);
+  const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
+  const chartType = _.get(config, 'chartType', null);
+  // const justLine = _.get(config, 'justLine', false);
+  const showBoxOption = _.get(config, 'showBoxOption', false);
+  // 自定义属性
+  const restOption = _.pick(cusOption, ['title', 'legend']);
+  const special = _.get(config, 'special', {});
+  return {
+    needUnit,
+    curveCenter,
+    nameWithSensor,
+    showGridLine,
+    showMarkLine,
+    showPoint,
+    deviceAlarmSchemes,
+    chartType,
+    showBoxOption,
+    restOption,
+    special,
+  };
+};
+const handleMaxValue = (value) => {
+  if (value <= 1) return value;
+  if (value >= 10000) return `${(value / 1000).toFixed(0)}k`;
+  return value.toFixed(0);
 }
-const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
-    // 一种指标一个y轴
-    const yAxisMap = new Map();
-    dataSource.forEach((item, index) => {
-        const {sensorName, unit} = item;
-        const key = sensorName;
-
-        if (!yAxisMap.has(key)) {
-            const i = yAxisMap.size;
-            const axis = {
-                type: 'value',
-                name: needUnit ? unit : null,
-                position: i % 2 === 0 ? 'left' : 'right',
-                offset: Math.floor(i / 2) * 80,
-                axisLabel: {
-                    formatter: (value) => (value > 10000 ? `${(value / 1000).toFixed(1)}k` : value.toFixed(1)),
-                },
-                axisLine: {
-                    show: true,
-                },
-                nameTextStyle: {
-                    align: i % 2 === 0 ? 'right' : 'left',
-                },
-                minorTick: {
-                    lineStyle: {
-                        color: '#e2e2e2',
-                    },
-                },
-                minorSplitLine: {
-                    lineStyle: {
-                        color: '#e2e2e2',
-                        type: 'dashed',
-                    },
-                },
-            };
-            yAxisMap.set(key, axis);
-        }
+const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
+  // 一种指标一个y轴
+  const yAxisMap = new Map();
+  // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
+  let _maxValueArray = [];
+  let _offsetValue = [];
+  dataSource.forEach((item, index) => {
+    let _maxValue = item.dataModel.reduce((final, cur) => {
+      if (cur.pv > final) final = cur.pv;
+      return final
+    }, 0);
+    _maxValueArray.push(handleMaxValue(_maxValue));
+    const { sensorName, unit } = item;
+    const key = sensorName;
+    if (!yAxisMap.has(key)) {
+      const i = yAxisMap.size;
+      let _offset = _maxValueArray[i - 2];
+      let _baseOffset = _offsetValue[i - 2] ?? 0;
+      let _finalOffset = (_offset !== undefined ? (_offset === 0 ? 2 : _offset.toString().replaceAll('.','').length) * 10 : 0) + _baseOffset;
+      _offsetValue.push(_finalOffset);
+      const axis = {
+        type: 'value',
+        name: needUnit ? unit : null,
+        position: i % 2 === 0 ? 'left' : 'right',
+        // offset: _offset !== undefined ? (_offset === 0? 2:_offset.toString().length) * 10 : 0,
+        offset: _finalOffset,
+        axisLabel: {
+          formatter: (value) => {
+            return handleMaxValue(value);
+          }
+        },
+        axisLine: {
+          show: true,
+        },
+        nameTextStyle: {
+          align: i % 2 === 0 ? 'right' : 'left',
+        },
+        minorTick: {
+          lineStyle: {
+            color: '#e2e2e2',
+          },
+        },
+        minorSplitLine: {
+          lineStyle: {
+            color: '#e2e2e2',
+            type: 'dashed',
+          },
+        },
+      };
+      yAxisMap.set(key, axis);
+    }
 
-        // 曲线居中
-        if (curveCenter && item.dataModel && item.dataModel.length > 0) {
-            const [min, max] = minMax(item);
-            const axis = yAxisMap.get(key);
-            axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
-            axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
-        }
+    // 曲线居中
+    if (curveCenter && item.dataModel && item.dataModel.length > 0) {
+      const [min, max] = minMax(item);
+      const axis = yAxisMap.get(key);
+      axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
+      axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
+    }
 
-        // 网格显示
-        const axis = yAxisMap.get(key);
-        decorateAxisGridLine(axis, showGridLine);
-    });
-    const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : {type: 'value'};
+    // 网格显示
+    const axis = yAxisMap.get(key);
+    decorateAxisGridLine(axis, showGridLine);
+  });
+  const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
 
-    // 根据y轴个数调整边距
-    const leftNum = Math.ceil(yAxisMap.size / 2);
-    const rightNum = Math.floor(yAxisMap.size / 2);
-    return {leftNum, rightNum, yAxis};
-}
+  // 根据y轴个数调整边距
+  const leftNum = Math.ceil(yAxisMap.size / 2);
+  const rightNum = Math.floor(yAxisMap.size / 2);
+  return { leftNum, rightNum, yAxis };
+};
 const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contrastOption) => {
-    restOption.dataZoom = [
-        {
-            show: true,
-            bottom: 10,
-            start: 0,
-            end: 100,
-            height: currentOption['dataZoomHeight'],
-            type: 'inside',
-            zoomOnMouseWheel: true,
-            filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter'
-        },
-        {
-            show: true,
-            bottom: 10,
-            start: 0,
-            end: 100,
-            height: currentOption['dataZoomHeight'],
-            type: 'slider',
-            zoomOnMouseWheel: true,
-            labelFormatter: function (e) {
-                let _formatterStr = 'YYYY-MM-DD HH:mm:ss';
-                if (contrast) {
-                    if (contrastOption === 'day') _formatterStr = 'HH:mm';
-                    if (contrastOption === 'month') _formatterStr = 'MM月DD日 HH时';
-                }
-                return moment(e).format(_formatterStr)
-            }
-        },
-    ];
-    xAxis.minInterval = 3600 * (1 * 1000);
-    if (legendData) {
-        restOption.legend = {...buildDefaultLegend({}), ...{data: legendData}};
-    }
+  restOption.dataZoom = [
+    {
+      show: true,
+      bottom: 10,
+      start: 0,
+      end: 100,
+      height: currentOption['dataZoomHeight'],
+      type: 'inside',
+      zoomOnMouseWheel: true,
+      filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter',
+    },
+    {
+      show: true,
+      bottom: 10,
+      start: 0,
+      end: 100,
+      height: currentOption['dataZoomHeight'],
+      type: 'slider',
+      zoomOnMouseWheel: true,
+      labelFormatter: function (e) {
+        let _formatterStr = 'YYYY-MM-DD HH:mm:ss';
+        if (contrast) {
+          if (contrastOption === 'day') _formatterStr = 'HH:mm';
+          if (contrastOption === 'month') _formatterStr = 'MM月DD日 HH时';
+        }
+        return moment(e).format(_formatterStr);
+      },
+    },
+  ];
+  xAxis.minInterval = 3600 * (1 * 1000);
+  if (legendData) {
+    restOption.legend = { ...buildDefaultLegend({}), ...{ data: legendData } };
+  }
 };
 
 const returnMaxOrMinNumber = (dataSource, type) => {
-    let _obj = null;
-    if (type === 'period' && dataSource?.[0]?.dataModel?.length) {
-        let _length = dataSource?.[0]?.dataModel?.length;
-        let _first = dataSource?.[0]?.dataModel[0]?.pt;
-        let _last = dataSource?.[0]?.dataModel[_length - 1]?.pt;
-        return ['展示时段: ', _first, _last, type]
-    }
-    dataSource?.[0]?.dataModel.filter(item => item.pv !== null).forEach(item => {
-        if (!_obj) {
+  let _obj = null;
+  if (type === 'period' && dataSource?.[0]?.dataModel?.length) {
+    let _length = dataSource?.[0]?.dataModel?.length;
+    let _first = dataSource?.[0]?.dataModel[0]?.pt;
+    let _last = dataSource?.[0]?.dataModel[_length - 1]?.pt;
+    return ['展示时段: ', _first, _last, type];
+  }
+  dataSource?.[0]?.dataModel
+    .filter((item) => item.pv !== null)
+    .forEach((item) => {
+      if (!_obj) {
+        _obj = item;
+      } else {
+        if (type === 'min') {
+          if (item.pv < _obj.pv) {
             _obj = item;
-        } else {
-            if (type === 'min') {
-                if (item.pv < _obj.pv) {
-                    _obj = item
-                }
-            }
-            if (type === 'max') {
-                if (item.pv > _obj.pv) {
-                    _obj = item
-                }
-            }
+          }
+        }
+        if (type === 'max') {
+          if (item.pv > _obj.pv) {
+            _obj = item;
+          }
         }
+      }
     });
-    let _value = [];
-    if (_obj?.pt) {
-        _value = [moment(_obj.pt).valueOf(), _obj.pv];
-        let _img = type === 'max' ? maxIcon : minIconDownArrow;
-        _value.push(_img);
-        _value.push(type);
-        // 把最大值最小值都push进去，方便计算
-    }
-    return _value;
+  let _value = [];
+  if (_obj?.pt) {
+    _value = [moment(_obj.pt).valueOf(), _obj.pv];
+    let _img = type === 'max' ? maxIcon : minIconDownArrow;
+    _value.push(_img);
+    _value.push(type);
+    // 把最大值最小值都push进去，方便计算
+  }
+  return _value;
 };
 
 const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
-    // 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
-    let _base = 60;
-    let _topForUnit = needUnit ? 20 : 0;
-    return {
-        top: _base + _topForUnit,
-        left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
-        right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
-        bottom: 60,
-        containLabel: true
-    };
+  // 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
+  let _base = 60;
+  let _topForUnit = needUnit ? 20 : 0;
+  return {
+    top: _base + _topForUnit,
+    // left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
+    left: 10,
+    // right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
+    bottom: 60,
+    containLabel: true,
+  };
 };
 const renderItem = (params, api) => {
-    let _base = params.dataIndex;
-    let _baseChartWidth = 10;
-    let _numberStringWidth = _base === 1 && api.value(3) === 'max' ? String(api.value(4) || 0).length * _baseChartWidth : String(api.value(1)).length * _baseChartWidth;
-    let _left = 30;
-    let _baseWidth = 190 + _numberStringWidth;
-    let _imgWidth = 45;
-    let _dateWidth = 128;
-    let _imageX = _left + _base * _baseWidth;
-    let _timeX = _left + _base * _baseWidth + _imgWidth;
-    let _valueX = _left + _base * _baseWidth + _imgWidth + _dateWidth;
-    let _color = api.value(3) === 'min' ? '#05C2BC' : '#1685FF';
-    let topValue = 25;
-    let _trimmer = -2;
-    return {
-        type: 'group',
-        children: [
-            {
-                type: 'image',
-                style: {
-                    image: api.value(2),
-                    textVerticalAlign: 'middle',
-                    y: -6
-                },
-                position: [_imageX, topValue]
-            },
-            {
-                type: 'text',
-                style: {
-                    text: moment(api.value(0)).format('YYYY-MM-DD HH:mm:ss') + ': ',
-                    textVerticalAlign: 'top'
-                },
-                position: [_timeX, topValue + _trimmer],
-            },
-            {
-                type: 'text',
-                style: {
-                    text: api.value(1),
-                    textVerticalAlign: 'middle',
-                    fill: _color,
-                    font: 'bolder 16px cursive',
-                    lineWidth: 10,
-                    y: 3
-                },
-                position: [_valueX, topValue + _trimmer]
-            }
-        ]
-    }
+  let _base = params.dataIndex;
+  let _baseChartWidth = 10;
+  let _numberStringWidth =
+    _base === 1 && api.value(3) === 'max'
+      ? String(api.value(4) || 0).length * _baseChartWidth
+      : String(api.value(1)).length * _baseChartWidth;
+  let _left = 30;
+  let _baseWidth = 190 + _numberStringWidth;
+  let _imgWidth = 45;
+  let _dateWidth = 128;
+  let _imageX = _left + _base * _baseWidth;
+  let _timeX = _left + _base * _baseWidth + _imgWidth;
+  let _valueX = _left + _base * _baseWidth + _imgWidth + _dateWidth;
+  let _color = api.value(3) === 'min' ? '#05C2BC' : '#1685FF';
+  let topValue = 25;
+  let _trimmer = -2;
+  return {
+    type: 'group',
+    children: [
+      {
+        type: 'image',
+        style: {
+          image: api.value(2),
+          textVerticalAlign: 'middle',
+          y: -6,
+        },
+        position: [_imageX, topValue],
+      },
+      {
+        type: 'text',
+        style: {
+          text: moment(api.value(0)).format('YYYY-MM-DD HH:mm:ss') + ': ',
+          textVerticalAlign: 'top',
+        },
+        position: [_timeX, topValue + _trimmer],
+      },
+      {
+        type: 'text',
+        style: {
+          text: api.value(1),
+          textVerticalAlign: 'middle',
+          fill: _color,
+          font: 'bolder 16px cursive',
+          lineWidth: 10,
+          y: 3,
+        },
+        position: [_valueX, topValue + _trimmer],
+      },
+    ],
+  };
 };
 const returnCustomSeries = (dataSource) => {
-    let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
-    let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
-    // let _period = returnMaxOrMinNumber(dataSource, 'period');
-    // 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
-    let _max = _maxNumber[1];
-    let _min = _minNumber[1];
-    [_maxNumber, _minNumber].forEach(item => {
-        item.push(_min);
-        item.push(_max);
-    })
-    return {
-        name: '自定义',
-        type: 'custom',
-        renderItem: renderItem,
-        data: [_minNumber, _maxNumber],
-    }
+  let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
+  let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
+  // let _period = returnMaxOrMinNumber(dataSource, 'period');
+  // 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
+  let _max = _maxNumber[1];
+  let _min = _minNumber[1];
+  [_maxNumber, _minNumber].forEach((item) => {
+    item.push(_min);
+    item.push(_max);
+  });
+  return {
+    name: '自定义',
+    type: 'custom',
+    renderItem: renderItem,
+    data: [_minNumber, _maxNumber],
+  };
 };
 /**
  * 图表配置项生成
@@ -818,172 +876,206 @@ const returnCustomSeries = (dataSource) => {
  * @param {any} config 额外配置信息
  */
 
-const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth, config, lineDataType = '') => {
-    const {
-        needUnit,
-        curveCenter,
-        nameWithSensor,
-        showGridLine,
-        showMarkLine,
-        showPoint,
-        deviceAlarmSchemes,
-        chartType,
-        showBoxOption,
-        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, visualMap} = returnXAxis({
-        dataSource,
-        contrast,
-        contrastOption,
-        nameWithSensor,
-        showMarkLine,
-        deviceAlarmSchemes,
-        showPoint,
-        smooth,
-        restOption,
-        special
-    });
-    decorateAxisGridLine(xAxis, showGridLine);
-    const tooltipTimeFormat = !contrast
-        ? 'YYYY-MM-DD HH:mm:ss'
-        : contrastOption === 'day'
-            ? 'HH:mm'
-            : 'DD HH:mm';
-    let tooltip = {};
-    // 增加箱线图的逻辑，单曲线才存在该逻辑
-    if (chartType && showBoxOption) {
-        if (chartType === 'boxChart' && lineDataType === '特征曲线') {
-            const otherData =
-                dataSource?.[0]?.dataModel.map((item) => {
-                    const {firstPV, lastPV, maxPV, minPV, pt} = item;
-                    return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
-                }) || []; //当存在othersData的时候，只是单曲线
-            xAxis = {type: 'time'};
-            decorateAxisGridLine(xAxis, showGridLine);
-            let unit = [];
-            series = series.map((item) => {
-                if (item.unit) unit.push(item.unit);
-                item.areaStyle = null;
-                return {...item, showSymbol: false};
-            });
-            series.push({
-                type: 'candlestick',
-                name: '箱线图',
-                symbol: 'none',
-                data: otherData,
-                itemStyle: {
-                    color: '#FFA200',
-                    color0: '#44CD00',
-                    borderColor: '#FFA200',
-                    borderColor0: '#44CD00',
-                },
-            });
-            tooltip = tooltipAccessor(unit);
-        }
-        if (chartType === 'lineChart' || lineDataType === '原始曲线') {
-            let _maxData = [];
-            let _minData = [];
-            let _currentYear = moment().format('YYYY');
-            const formatStr =
-                contrastOption === 'day'
-                    ? `${_currentYear}-01-01 HH:mm:00`
-                    : `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
-            let _maxValues = [];
-            /**
-             *  生成泳道图，分两种情况
-             *  1. 当最大值最小值都是正数时；
-             *  2. 当最大值小于零时（此时，最小值一定小于零）；
-             */
-            dataSource?.[0]?.dataModel.forEach((item) => {
-                const {firstPV, lastPV, maxPV, minPV, pt} = item;
-                _maxValues.push(maxPV);
-                let time = contrast ? moment(pt).format(formatStr) : pt;
-                _maxData.push([moment(time).valueOf(), (maxPV > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2)]);
-                _minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
-            }); //当存在othersData的时候，只是单曲线
-            // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
-            xAxis = {type: 'time'};
-            decorateAxisGridLine(xAxis, showGridLine);
-            let _unit = '';
-            series = series.map((item) => {
-                _unit = item.unit ?? '';
-                item.areaStyle = null;
-                return {...item, showSymbol: false};
-            });
-            [[..._minData], [..._maxData]].forEach((item, index) => {
-                series.push({
-                    name: index === 0 ? '周期最小值' : '周期最大值',
-                    type: 'line',
-                    data: item,
-                    lineStyle: {
-                        opacity: 0,
-                    },
-                    ...(index !== 0
-                        ? {
-                            areaStyle: {
-                                color: series?.[0]?.itemStyle?.color ?? '#65a0d1',
-                                opacity: 0.2,
-                            },
-                        }
-                        : {}),
-                    stack: 'confidence-band',
-                    symbol: 'none',
-                });
-            });
-            tooltip = {
-                trigger: 'axis',
-                formatter: (e) => {
-                    return `<div>
+const optionGenerator = (
+  dataSource,
+  cusOption,
+  contrast,
+  contrastOption,
+  smooth,
+  config,
+  lineDataType = '',
+) => {
+  const {
+    needUnit,
+    curveCenter,
+    nameWithSensor,
+    showGridLine,
+    showMarkLine,
+    showPoint,
+    deviceAlarmSchemes,
+    chartType,
+    showBoxOption,
+    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, visualMap } = returnXAxis({
+    dataSource,
+    contrast,
+    contrastOption,
+    nameWithSensor,
+    showMarkLine,
+    deviceAlarmSchemes,
+    showPoint,
+    smooth,
+    restOption,
+    special,
+  });
+  decorateAxisGridLine(xAxis, showGridLine);
+  const tooltipTimeFormat = !contrast
+    ? 'YYYY-MM-DD HH:mm:ss'
+    : contrastOption === 'day'
+      ? 'HH:mm'
+      : 'DD HH:mm';
+  let tooltip = {};
+  // 增加箱线图的逻辑，单曲线才存在该逻辑
+  if (chartType && showBoxOption) {
+    if (chartType === 'boxChart' && lineDataType === '特征曲线') {
+      const otherData =
+        dataSource?.[0]?.dataModel.map((item) => {
+          const { firstPV, lastPV, maxPV, minPV, pt } = item;
+          return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
+        }) || []; //当存在othersData的时候，只是单曲线
+      xAxis = { type: 'time' };
+      decorateAxisGridLine(xAxis, showGridLine);
+      let unit = [];
+      series = series.map((item) => {
+        if (item.unit) unit.push(item.unit);
+        item.areaStyle = null;
+        return { ...item, showSymbol: false };
+      });
+      series.push({
+        type: 'candlestick',
+        name: '箱线图',
+        symbol: 'none',
+        data: otherData,
+        itemStyle: {
+          color: '#FFA200',
+          color0: '#44CD00',
+          borderColor: '#FFA200',
+          borderColor0: '#44CD00',
+        },
+      });
+      tooltip = tooltipAccessor(unit);
+    }
+    if (chartType === 'lineChart' || lineDataType === '原始曲线') {
+      let _maxData = [];
+      let _minData = [];
+      let _currentYear = moment().format('YYYY');
+      const formatStr =
+        contrastOption === 'day'
+          ? `${_currentYear}-01-01 HH:mm:00`
+          : `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
+      let _maxValues = [];
+      /**
+       *  生成泳道图，分两种情况
+       *  1. 当最大值最小值都是正数时；
+       *  2. 当最大值小于零时（此时，最小值一定小于零）；
+       */
+      dataSource?.[0]?.dataModel.forEach((item) => {
+        const { firstPV, lastPV, maxPV, minPV, pt } = item;
+        _maxValues.push(maxPV);
+        let time = contrast ? moment(pt).format(formatStr) : pt;
+        _maxData.push([
+          moment(time).valueOf(),
+          (maxPV > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2),
+        ]);
+        _minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
+      }); //当存在othersData的时候，只是单曲线
+      // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
+      xAxis = { type: 'time' };
+      decorateAxisGridLine(xAxis, showGridLine);
+      let _unit = '';
+      series = series.map((item) => {
+        _unit = item.unit ?? '';
+        item.areaStyle = null;
+        return { ...item, showSymbol: false };
+      });
+      [[..._minData], [..._maxData]].forEach((item, index) => {
+        series.push({
+          name: index === 0 ? '周期最小值' : '周期最大值',
+          type: 'line',
+          data: item,
+          lineStyle: {
+            opacity: 0,
+          },
+          ...(index !== 0
+            ? {
+              areaStyle: {
+                color: series?.[0]?.itemStyle?.color ?? '#65a0d1',
+                opacity: 0.2,
+              },
+            }
+            : {}),
+          stack: 'confidence-band',
+          symbol: 'none',
+        });
+      });
+      tooltip = {
+        trigger: 'axis',
+        formatter: (e) => {
+          return `<div>
                     ${headTemplate(e[0])}
                     <div>
                         <div style="display: flex; align-items: center;">
-                              <span style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${e[0].seriesName
-                    }</span><span style="display:inline-block;">：</span>
-                              <span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e[0]?.value?.[1] ?? '-'
-                    }</span>
+                              <span style="${isMobile()
+              ? 'width: ' +
+              handlePx(90, 'px') +
+              ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
+              : ''
+            }">${e[0].seriesName
+            }</span><span style="display:inline-block;">：</span>
+                              <span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(
+              5,
+              'px',
+            )} 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
                               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
                             </div>
-                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'}; align-items: center;">
+                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
+            }; align-items: center;">
                               <span>周期最小值</span><span style="display:inline-block;">：</span>
-                              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e?.[1]?.value?.[1] ?? '-'
-                    }</span>
+                              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
+              5,
+              'px',
+            )} 0 auto;">${e?.[1]?.value?.[1] ?? '-'}</span>
                               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
                             </div>
-                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'}; align-items: center;">
+                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
+            }; align-items: center;">
                               <span>周期最大值</span><span style="display:inline-block;">：</span>
-                              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'
-                    }</span>
+                              <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
+              5,
+              'px',
+            )} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'}</span>
                               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
                             </div>
                         </div>
                     </div>`;
-                },
-            };
-        }
-        // 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
-        if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
-            let _customSeries = returnCustomSeries(dataSource);
-            series.push(_customSeries)
-        }
-    } else {
-        tooltip = tooltipAccessor(series.map(item => item.unit), {contrastOption, contrast});
+        },
+      };
     }
-    tooltip.timeFormat = tooltipTimeFormat;
-    let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
-    assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
-    let _options = {
-        yAxis,
-        grid,
-        xAxis,
-        series,
-        tooltip,
-        visualMap,
-        ...restOption,
-    };
-    return _options
+    // 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
+    if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
+      let _customSeries = returnCustomSeries(dataSource);
+      series.push(_customSeries);
+    }
+  } else {
+    tooltip = tooltipAccessor(
+      series.map((item) => item.unit),
+      { contrastOption, contrast },
+    );
+  }
+  tooltip.timeFormat = tooltipTimeFormat;
+  let _legendData = series
+    .filter((item) => !['周期最大值', '周期最小值', '自定义'].includes(item.name))
+    .map((item) => item.name);
+  assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
+  let _options = {
+    yAxis,
+    grid,
+    xAxis,
+    series,
+    tooltip,
+    visualMap,
+    ...restOption,
+  };
+  return _options;
 };
 
 export default optionGenerator;