feat: 优化历史曲线

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

@@ -285,14 +285,20 @@ const HistoryView = (props) => {
     const [chartType, setChartType] = useState('lineChart');
     const [showBoxOption, setShowBoxOption] = useState(true);
     const [lineDataType, setLineDataType] = useState('特征曲线');
+    // 同期对比快捷键
+    // shortcutsValue
+    // onShortcutsChange
+    const [shortcutsValue, setShortcutsValue] = useState('');
+    const [shortcutsDatePickerArr, setShortcutsDatePickerArr] = useState([]);
     // 选择的时间范围值
     const dateRange = useMemo(() => {
         if (timeValue === 'customer') {
             return updateTime(customerChecked || customerTime);
         } else {
-            return handleBatchTime(datePickerArr, contrastOption);
+            let _dateArr = shortcutsValue ? shortcutsDatePickerArr : datePickerArr;
+            return handleBatchTime(_dateArr, contrastOption);
         }
-    }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue]);
+    }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue, shortcutsValue]);
 
     const configDependence = checkboxData
         .filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
@@ -326,10 +332,7 @@ const HistoryView = (props) => {
         const chartGrid = checkboxData.find((item) => item.key === 'chartGrid')?.checked;
         return [curveCenter, chartGrid];
     }, [checkboxData]);
-    // 同期对比快捷键
-    // shortcutsValue
-    // onShortcutsChange
-    const [shortcutsValue, setShortcutsValue] = useState('');
+
     // 自定义模式: 快速选择
     const onCustomerTimeChange = (key) => {
         if (key === 'oneMonth' && lineDataType === '原始曲线') {
@@ -360,9 +363,10 @@ const HistoryView = (props) => {
     // 同期对比模式: 选择（日/月）
     const onContrastChange = (value) => {
         if (value === 'month') {
-            message.info('月模式数据量较大，不支持原始曲线模式，已切换为特征曲线')
+            if (lineDataType === '原始曲线') message.info('月模式数据量较大，不支持原始曲线模式，已切换为特征曲线')
             setLineDataType('特征曲线');
         }
+        setShortcutsValue('');
         setContrastOption(value);
         // 模式为日时，默认对比时间根据defaultDate判断 是昨天、上月、还是去年
         setDatePickerArr([...DefaultDatePicker(value === 'day' && defaultDate ? defaultDate : value)]);
@@ -408,7 +412,8 @@ const HistoryView = (props) => {
         // 操作时间就清除掉快捷键选用状态
         setShortcutsValue('');
         if (e.target.value === 'customer') {
-            setLineDataType('特征曲线')
+            setLineDataType('特征曲线');
+            setShortcutsValue('');
         }
         setTimeValue(e.target.value);
         if (e.target.value === 'contrast') {
@@ -444,6 +449,7 @@ const HistoryView = (props) => {
                     {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')},
                 ]
                 break;
             case '近3月':
@@ -460,10 +466,11 @@ const HistoryView = (props) => {
                     {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;
         }
-        setDatePickerArr(_arr);
+        setShortcutsDatePickerArr(_arr);
     };
     const renderTimeOption = () => {
         return (
@@ -511,7 +518,7 @@ const HistoryView = (props) => {
                                         picker={contrastOption}
                                         value={child.value}
                                         onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
-                                        style={{width: 130}}
+                                        style={{width: 130, border: !shortcutsValue ? '1px solid #1890ff' : ''}}
                                     />
                                     {datePickerArr.length > 2 && (
                                         <div
@@ -527,7 +534,7 @@ const HistoryView = (props) => {
                                 )}
                             </div>
                         ))}
-                        {datePickerArr.length < 5 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
+                        {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
                     </>
                 )}
             </div>