feat: 优化历史曲线交互

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

@@ -4,7 +4,7 @@ import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils';
 import { isArray, cloneDeep } from 'lodash';
 
-const SimgleChart = memo((props) => {
+const SingleChart = memo((props) => {
   const {
     dataSource,
     contrast = false,
@@ -128,4 +128,4 @@ const SimgleChart = memo((props) => {
   );
 });
 
-export default SimgleChart;
+export default SingleChart;

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

 import React from 'react';
 import HistoryView from '../index';
 
-/*const deviceParams = [
+const deviceParams = [
   {
     deviceCode: 'EGBF00000136',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
@@ -21,7 +21,7 @@ import HistoryView from '../index';
     deviceType: '二供泵房',
     pointAddressID: 4,
   },
-];*/
+];
 /*const deviceParams = [
   {
     "deviceCode": "LLJ00000055",
@@ -34,7 +34,7 @@ import HistoryView from '../index';
     "deviceType": "流量计"
   }
 ]*/
-const deviceParams = [
+/*const deviceParams = [
   {
     "deviceCode": "EGBF00000023",
     "sensors": "出水瞬时流量,是否在线",
@@ -45,7 +45,19 @@ const deviceParams = [
     "sensors": "出水瞬时流量,是否在线",
     "deviceType": "二供泵房"
   }
-]
+]*/
+/*const deviceParams = [
+  {
+    "deviceCode": "QSSSC00000001",
+    "sensors": "出水瞬时流量,是否在线",
+    "deviceType": "确山送水厂"
+  },
+  {
+    "deviceCode": "EGBF00000019",
+    "sensors": "出水瞬时流量,是否在线",
+    "deviceType": "二供泵房"
+  }
+]*/
 const Demo = () => {
   return <div style={{ height: 700 }}>
     <HistoryView deviceParams={deviceParams} grid />

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

@@ -3,13 +3,13 @@ import HistoryView from '../index';
 import {MobileHistoryChart} from "../mobile";
 
 const deviceParams = [
-    /*       {
-              deviceCode: 'EGBF00000141',
-              // sensors: '进水压力,出水瞬时流量,出水累计流量',
-              sensors: '进水压力',
-              deviceType: '二供泵房',
-              pointAddressID: 208,
-            },*/
+    {
+        deviceCode: 'EGBF00000141',
+        // sensors: '进水压力,出水瞬时流量,出水累计流量',
+        sensors: '进水压力',
+        deviceType: '二供泵房',
+        pointAddressID: 208,
+    },
     /*    {
             "deviceCode": "SYJ00000008",
             "sensors": "瞬时流量",
@@ -43,11 +43,11 @@ const deviceParams = [
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-    {
-        "deviceCode": "SC00000023",
-        "sensors": "出水压力",
-        "deviceType": "水厂"
-    }
+    /*    {
+            "deviceCode": "SC00000023",
+            "sensors": "出水压力",
+            "deviceType": "水厂"
+        }*/
     /*
         {
             "deviceCode": "JFJ00000001",

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

@@ -11,7 +11,7 @@ import {
     Tabs,
     Tooltip,
     Button,
-    message, Segmented
+    message,
 } from 'antd';
 import {
     CloseCircleFilled,
@@ -25,7 +25,7 @@ import TimeRangePicker from '@wisdom-components/timerangepicker';
 import PandaEmpty from '@wisdom-components/empty';
 import BasicTable from '@wisdom-components/basictable';
 import {getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl, getDictionaryInfoAll} from './apis';
-import SimgleChart from './SingleChart';
+import SingleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
 import {globalConfig} from 'antd/lib/config-provider';
@@ -244,7 +244,8 @@ const timeColumn = {
     sorter: true,
     // sortOrder:['descend','ascend']
 };
-
+const OriginMaxDays = 7; // 原始曲线请求数据的最大天数
+const CharacteristicMaxDays = 60; // 特征曲线或者其他曲线的最大天数
 const HistoryView = (props) => {
     const [completeInit, setCompleteInit] = useState(false);
     const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
@@ -301,6 +302,8 @@ const HistoryView = (props) => {
         }
     }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue, shortcutsValue]);
 
+    const [dates, setDates] = useState(null);
+
     const configDependence = checkboxData
         .filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
         .map((item) => item.checked)
@@ -474,37 +477,72 @@ const HistoryView = (props) => {
         }
         setShortcutsDatePickerArr(_arr);
     };
-    const renderTimeOption = () => {
+    const renderTimeOption = useMemo(() => {
         return (
             <div className={classNames(`${prefixCls}-date`)}>
                 <div className={classNames(`${prefixCls}-label`)}>时间选择</div>
                 <Radio.Group value={timeValue} onChange={onTimeSetChange}>
                     <Radio.Button value="customer">自定义</Radio.Button>
-                    <Radio.Button value="contrast">同期对比</Radio.Button>
+                    {
+                        !grid ? <Radio.Button value="contrast">同期对比</Radio.Button> : ''
+                    }
                 </Radio.Group>
                 {timeValue === 'customer' && ( // 自定义
                     <>
                         <TimeRangePicker
+                            format={'YYYY-MM-DD HH:mm'}
                             onChange={onCustomerTimeChange}
                             value={customerChecked}
-                            dataSource={timeList}
+                            dataSource={timeList.filter(item => {
+                                if (lineDataType === '原始曲线') return item.key !== 'oneMonth';
+                                return true
+                            })}
                         />
                         <RangePicker
+                            format={'YYYY-MM-DD HH:mm'}
                             className={classNames(`${prefixCls}-custime-customer`)}
                             onChange={onCustomerRangeChange}
-                            value={customerTime}
-                            showTime
+                            value={dates || customerTime}
+                            onCalendarChange={(val) => {
+                                console.log('val: ', val);
+                                setDates(val);
+                            }}
+                            onOpenChange={(open) => {
+                                if (open) {
+                                    setDates([null, null]);
+                                } else {
+                                    setDates(null);
+                                }
+                            }}
+                            disabledDate={(current) => {
+                                if (timeValue !== 'customer') return false;
+                                let _days = lineDataType === '原始曲线' ? OriginMaxDays : CharacteristicMaxDays;
+                                if (!dates) {
+                                    return false;
+                                }
+                                const tooLate = dates[0] && current.diff(dates[0], 'days') > _days;
+                                const tooEarly = dates[1] && dates[1].diff(current, 'days') > _days;
+                                return !!tooEarly || !!tooLate;
+                            }}
+                            showTime={{
+                                format: 'YYYY-MM-DD HH:mm',
+                                minuteStep: 10
+                            }}
                         />
                     </>
                 )}
                 {timeValue === 'contrast' && ( // 同期对比
                     <>
-                        <Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
-                            <Option value="day">日</Option>
-                            <Option value="month">月</Option>
-                        </Select>
+                        {
+                            lineDataType !== '原始曲线' &&
+                            <Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
+                                <Option value="day">日</Option>
+                                <Option value="month">月</Option>
+                            </Select>
+                        }
                         {/*增加快捷日期*/}
                         {
+                            lineDataType !== '原始曲线' &&
                             deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1 ?
                                 <Radio.Group value={shortcutsValue} onChange={onShortcutsChange}>
                                     {
@@ -544,7 +582,7 @@ const HistoryView = (props) => {
                 )}
             </div>
         );
-    };
+    }, [timeValue, customerChecked, lineDataType, datePickerArr, deviceParams, dates, customerTime, chartDataSource]);
 
     // 曲线设置项选择/取消
     const onCheckboxChange = (e, key, showJustLine) => {
@@ -587,7 +625,8 @@ const HistoryView = (props) => {
         let _endDate = dateRange[0]?.dateTo;
         let diffDays = moment(_endDate).diff(moment(_startDate), 'days');
         if (_val === '原始曲线' && diffDays > 7) {
-            return message.info('查阅原始曲线时，请选择小于或等于7天的时间间隔');
+            message.info('查阅原始曲线时，需选择小于或等于7天的时间间隔，已自动切换为近一周');
+            setCustomerChecked('oneWeek');
         }
         setLineDataType(_val)
     };
@@ -964,7 +1003,7 @@ const HistoryView = (props) => {
     const tableMemo = useMemo(() => {
         return <>
             <div className={`${prefixCls}-options`}>
-                {renderTimeOption()}
+                {renderTimeOption}
                 {renderCurveOption()}
             </div>
             <div className={`${prefixCls}-content`}>
@@ -1001,7 +1040,7 @@ const HistoryView = (props) => {
             return (
                 <>
                     <div className={`${prefixCls}-options`}>
-                        {renderTimeOption()}
+                        {renderTimeOption}
                         {renderCurveOption(
                             true,
                             deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1,
@@ -1020,7 +1059,7 @@ const HistoryView = (props) => {
                                 deviceAlarmSchemes={deviceAlarmSchemes}
                             />
                         ) : (
-                            <SimgleChart
+                            <SingleChart
                                 showBoxOption={showBoxOption}
                                 lineDataType={lineDataType}
                                 curveCenter={curveCenter}

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

@@ -3,7 +3,7 @@ import {ConfigProvider} from "antd";
 import {Selector, Checkbox, Space} from 'antd-mobile/es';
 import moment from "moment";
 import {getDeviceAlarmScheme, getHistoryInfo} from "./apis";
-import SimgleChart from "./SingleChart";
+import SingleChart from "./SingleChart";
 import {handlePx} from "./utils";
 import styles from './index.less';
 
@@ -171,7 +171,7 @@ const MobileHistoryChart = (
                 </Checkbox.Group>
             </div>
             <div style={{width: '100%', flex: 1}}>
-                <SimgleChart
+                <SingleChart
                     showBoxOption={showBoxOption}
                     curveCenter={options.curveCenter}
                     showGridLine={chartGrid}