feat: 滚动组件增加设备类型监听；历史曲线增加快捷功能

packages/base-components/AlarmScrollAssembly/src/demos/index.js

-import React from 'react';
+import React, {useState} from 'react';
 import AlarmScrollAssembly from '../index';
+import {Button} from "antd";
 
 window.globalConfig = {
-  userInfo: { OID: 1 },
+    userInfo: {OID: 1},
 };
 export default () => {
-  return (
+    const [deviceType, setDeviceType] = useState('二供泵房,二供机组');
+
+    return (<>
             <AlarmScrollAssembly
-      deviceType={'二供泵房,二供机组'}
+                deviceType={deviceType}
                 prefix={'报警信息：'}
                 showTotal={false}
-      interval={1}
+                interval={0.1}
                 userAccess={true}
             />
+            <Button onClick={() => {
+                if (deviceType === '二供泵房') {
+                    setDeviceType('二供泵房,二供机组')
+                } else {
+                    setDeviceType('二供泵房')
+                }
+            }}>点击切换</Button>
+        </>
+
     ); // 最小宽度930px
 };

packages/base-components/AlarmScrollAssembly/src/index.js

-import React, { useState, useEffect, useRef } from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import styles from './index.less';
 import PropTypes from 'prop-types';
-import { Tag, Tooltip, Modal } from 'antd';
-import { EnvironmentOutlined } from '@ant-design/icons';
-import { monitorService } from './api';
+import {Tag, Tooltip, Modal} from 'antd';
+import {EnvironmentOutlined} from '@ant-design/icons';
+import {monitorService} from './api';
 import classnames from 'classnames';
-import { switchTimeToPeriod } from './utils';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import {switchTimeToPeriod} from './utils';
+import {Swiper, SwiperSlide} from 'swiper/react';
 import 'swiper/swiper.min.css';
 import 'swiper/components/pagination/pagination.min.css';
 import 'swiper/components/navigation/navigation.min.css';
-import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core';
+import SwiperCore, {Autoplay, Pagination, Navigation} from 'swiper/core';
 
 SwiperCore.use([Autoplay, Pagination, Navigation]);
 /*
@@ -19,7 +19,7 @@ SwiperCore.use([Autoplay, Pagination, Navigation]);
  *   3. 初始化进入时，取截止到当前时间为止的所有的实时报警数据。
  *   4. 播放结束后，重新获取实时报警数据进行第二轮的播放。
  * */
-const InfoItem = ({ info }) => {
+const InfoItem = ({info}) => {
     const returnClassName = (type, key) => {
         let _className = '';
         if (type === '普通') {
@@ -29,7 +29,7 @@ const InfoItem = ({ info }) => {
         }
         return `${_className}${key}`;
     };
-  const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info;
+    const {alertLevel, startTime, stationName, alertMsg, deviceAddress} = info;
 
     return (
         <div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
@@ -38,7 +38,7 @@ const InfoItem = ({ info }) => {
             <Tooltip title={deviceAddress} placement={'topLeft'}>
         <span className={styles.location}>
           <EnvironmentOutlined
-            style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }}
+              style={{fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle'}}
           />
             {deviceAddress || ' - '}
         </span>
@@ -91,14 +91,18 @@ const AlarmScrollAssembly = (props) => {
         }, 1000 * 60 * _interval);
     };
     useEffect(() => {
+        timer && clearTimeout(timer);
         getData();
-  }, []);
+    }, [props.deviceType]);
+    useEffect(() => {
+        return () => timer && clearTimeout(timer)
+    }, [])
     return (
         <div className={styles.alarmScrollAssemblyWrapper}>
             {realTimeDataList && realTimeDataList.length ? (
-        <div className={styles.content} style={{ display: 'flex' }}>
+                <div className={styles.content} style={{display: 'flex'}}>
                     {props.prefix ? (
-            <span style={{ ...props.style, flex: 'none', marginRight: 10 }}>{props.prefix}</span>
+                        <span style={{...props.style, flex: 'none', marginRight: 10}}>{props.prefix}</span>
                     ) : (
                         ''
                     )}
@@ -132,7 +136,7 @@ const AlarmScrollAssembly = (props) => {
                                             // setModalVisible(true);
                                         }}
                                     >
-                    <InfoItem key={index} info={item} />
+                                        <InfoItem key={index} info={item}/>
                                     </SwiperSlide>
                                 );
                             })}

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

@@ -57,6 +57,37 @@ const timeList = [
     },
 ];
 
+// 同期对比 日 快捷按钮
+const shortcutsForDay = [
+    {
+        label: '近3天',
+        value: '近3天'
+    },
+    {
+        label: '近5天',
+        value: '近5天'
+    },
+    /*    {
+            label: '去年同期',
+            value: '去年同期',
+        }*/
+];
+// 同期对比 月 快捷按钮
+const shortcutsForMonth = [
+    {
+        label: '近3月',
+        value: '近3月'
+    },
+    {
+        label: '近5月',
+        value: '近5月'
+    },
+    /*    {
+            label: '去年同期',
+            value: '去年同期',
+        }*/
+]
+
 const CheckboxData = [
     {
         key: 'curveCenter',
@@ -217,7 +248,6 @@ const timeColumn = {
 const HistoryView = (props) => {
     const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('history-view');
-
     const {
         title,
         grid,
@@ -296,12 +326,15 @@ 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 === '原始曲线') {
             setLineDataType('特征曲线');
-            message.info('时间区间超过7天，已切换为特征曲线')
+            message.info('月模式数据量较大，不支持原始曲线模式，已切换为特征曲线')
         }
         setCustomerChecked(key);
         !!customerTime && setCustomerTime(null);
@@ -326,6 +359,10 @@ const HistoryView = (props) => {
 
     // 同期对比模式: 选择（日/月）
     const onContrastChange = (value) => {
+        if (value === 'month') {
+            message.info('月模式数据量较大，不支持原始曲线模式，已切换为特征曲线')
+            setLineDataType('特征曲线');
+        }
         setContrastOption(value);
         // 模式为日时，默认对比时间根据defaultDate判断 是昨天、上月、还是去年
         setDatePickerArr([...DefaultDatePicker(value === 'day' && defaultDate ? defaultDate : value)]);
@@ -333,6 +370,8 @@ const HistoryView = (props) => {
 
     // 同期对比模式: 时间段选择
     const onContrastPickerChange = (date, dateString, item) => {
+        // 操作时间就清除掉快捷键选用状态
+        setShortcutsValue('');
         const arr = [...datePickerArr];
         arr.forEach((child) => {
             if (child.key === item.key) {
@@ -344,6 +383,8 @@ const HistoryView = (props) => {
 
     // 同期对比模式: 新增日期选择组件
     const handleAddDatePicker = () => {
+        // 操作时间就清除掉快捷键选用状态
+        setShortcutsValue('');
         setDatePickerArr([
             ...datePickerArr,
             {
@@ -355,6 +396,8 @@ const HistoryView = (props) => {
 
     // 同期对比模式: 删除日期选择组件
     const handleDeleteDatePicker = (index) => {
+        // 操作时间就清除掉快捷键选用状态
+        setShortcutsValue('');
         const arr = [...datePickerArr];
         arr.splice(index, 1);
         setDatePickerArr(arr);
@@ -362,6 +405,11 @@ const HistoryView = (props) => {
 
     // 时间设置切换（自定义/同期对比）
     const onTimeSetChange = (e) => {
+        // 操作时间就清除掉快捷键选用状态
+        setShortcutsValue('');
+        if (e.target.value === 'customer') {
+            setLineDataType('特征曲线')
+        }
         setTimeValue(e.target.value);
         if (e.target.value === 'contrast') {
             // 同期对比
@@ -377,7 +425,46 @@ const HistoryView = (props) => {
             onCheckboxChange({target: {value: true}}, 'chartType');
         }
     };
-
+    const onShortcutsChange = (e) => {
+        let _val = e.target.value;
+        setShortcutsValue(_val);
+        let _arr = [];
+        switch (_val) {
+            case '近3天':
+                _arr = [
+                    {key: 1, value: moment()},
+                    {key: 2, value: moment().subtract(1, 'days')},
+                    {key: 3, value: moment().subtract(2, 'days')},
+                ]
+                break;
+            case '近5天':
+                _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')},
+                ]
+                break;
+            case '近3月':
+                _arr = [
+                    {key: 1, value: moment()},
+                    {key: 2, value: moment().subtract(1, 'months')},
+                    {key: 3, value: moment().subtract(2, 'months')},
+                ]
+                break;
+            case '近5月':
+                _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')},
+                ]
+                break;
+        }
+        setDatePickerArr(_arr);
+    };
     const renderTimeOption = () => {
         return (
             <div className={classNames(`${prefixCls}-date`)}>
@@ -407,6 +494,16 @@ const HistoryView = (props) => {
                             <Option value="day">日</Option>
                             <Option value="month">月</Option>
                         </Select>
+                        {/*增加快捷日期*/}
+                        <Radio.Group value={shortcutsValue} onChange={onShortcutsChange}>
+                            {
+                                (contrastOption === 'day' ? shortcutsForDay : shortcutsForMonth).map(item => {
+                                    return <Radio.Button value={item.value}>
+                                        {item.label}
+                                    </Radio.Button>
+                                })
+                            }
+                        </Radio.Group>
                         {datePickerArr.map((child, index) => (
                             <div key={child.key} className={classNames(`${prefixCls}-contrast-list`)}>
                                 <div className={classNames(`${prefixCls}-contrast-wrap`)}>
@@ -473,13 +570,14 @@ const HistoryView = (props) => {
     };
     // 切换数据类型
     const switchLineDataType = (e) => {
+        let _val = e.target.value
         let _startDate = dateRange[0]?.dateFrom;
         let _endDate = dateRange[0]?.dateTo;
         let diffDays = moment(_endDate).diff(moment(_startDate), 'days');
-        if (e === '原始曲线' && diffDays > 7) {
+        if (_val === '原始曲线' && diffDays > 7) {
             return message.info('查阅原始曲线时，请选择小于或等于7天的时间间隔');
         }
-        setLineDataType(e)
+        setLineDataType(_val)
     };
     const renderCheckbox = (child, showJustLine) => {
         const curveAccess = activeTabKey === 'curve' && child.showInCurve;
@@ -509,15 +607,29 @@ const HistoryView = (props) => {
                 className={classNames(`${prefixCls}-cover`)}
                 style={isChart && isSingle ? {width: '100%'} : {}}
             >
-                {isChart && isSingle && showBoxOption ? (
-                    <>
-                        <div key={''} className={`${prefixCls}-cover-item`}>
-                            <Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>
+                {
+                    isChart ? <>
+                        <div className={classNames(`${prefixCls}-label`)}>曲线选择</div>
+                        <div className={`${prefixCls}-cover-item`}>
+                            <Radio.Group
+                                value={lineDataType}
+                                onChange={switchLineDataType}
+                            >
+                                <Radio.Button value={'特征曲线'}>特征曲线</Radio.Button>
+                                <Radio.Button value={'原始曲线'}>原始曲线</Radio.Button>
+                            </Radio.Group>
+                            {/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
                             <Tooltip title={'原始曲线数据量较大，请查阅小于7天的数据~'}>
                                 <QuestionCircleFilled style={{marginLeft: 6}} className={`${prefixCls}-question`}/>
                             </Tooltip>
                         </div>
-                        <div className={classNames(`${prefixCls}-label`)}>曲线形态</div>
+                    </> : ''
+                }
+                {isChart && isSingle && showBoxOption ? (
+                    <>
+                        {
+                            lineDataType !== '原始曲线' ? <>
+                                <div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
                                 <Radio.Group
                                     value={chartType}
                                     style={{marginRight: 16}}
@@ -530,6 +642,8 @@ const HistoryView = (props) => {
                                     <Radio.Button value={'lineChart'}>线形图</Radio.Button>
                                     <Radio.Button value={'boxChart'}>箱线图</Radio.Button>
                                 </Radio.Group>
+                            </> : ''
+                        }
                     </>
                 ) : (
                     ''