Skip to content

W
wisdom-components
Commit baf4594e authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化报警滚动组件

parent 8b2770f0
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 161 deletions
packages/base-components/AlarmScrollAssembly/src/index.js
View file @ baf4594e
import React, { useState, useEffect, useRef } from 'react'; import React, {useState, useEffect, useRef} from 'react';
import styles from './index.less'; import styles from './index.less';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Tag, Tooltip, Modal } from 'antd'; import {Tag, Tooltip, Modal} from 'antd';
import { EnvironmentOutlined } from '@ant-design/icons'; import {EnvironmentOutlined} from '@ant-design/icons';
import { monitorService } from './api'; import {monitorService} from './api';
import moment from 'moment'; import moment from 'moment';
import classnames from 'classnames'; import classnames from 'classnames';
import { switchTimeToPeriod } from './utils'; import {switchTimeToPeriod} from './utils';
import NormChart from './NormChart/NormChart'; import NormChart from './NormChart/NormChart';
import { Swiper, SwiperSlide } from 'swiper/react'; import {Swiper, SwiperSlide} from 'swiper/react';
import 'swiper/swiper.min.css'; import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.min.css'; import 'swiper/components/pagination/pagination.min.css';
import 'swiper/components/navigation/navigation.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]); SwiperCore.use([Autoplay, Pagination, Navigation]);
/* /*
...@@ -21,139 +21,139 @@ SwiperCore.use([Autoplay, Pagination, Navigation]); ...@@ -21,139 +21,139 @@ SwiperCore.use([Autoplay, Pagination, Navigation]);
* 3. 初始化进入时，取截止到当前时间为止的所有的实时报警数据。 * 3. 初始化进入时，取截止到当前时间为止的所有的实时报警数据。
* 4. 播放结束后，重新获取实时报警数据进行第二轮的播放。 * 4. 播放结束后，重新获取实时报警数据进行第二轮的播放。
* */ * */
const InfoItem = ({ info }) => { const InfoItem = ({info}) => {
const returnClassName = (type, key) => { const returnClassName = (type, key) => {
let _className = ''; let _className = '';
if (type === '普通') { if (type === '普通') {
_className = 'normal'; _className = 'normal';
} else if (type === '紧急') { } else if (type === '紧急') {
_className = 'warning'; _className = 'warning';
} }
return `${_className}${key}`; return `${_className}${key}`;
}; };
const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info; const {alertLevel, startTime, stationName, alertMsg, deviceAddress} = info;
return ( return (
<div className={styles[returnClassName(alertLevel, 'Wrapper')]}> <div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
<Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag> <Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
<span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span> <span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span>
<Tooltip title={deviceAddress} placement={'topLeft'}> <Tooltip title={deviceAddress} placement={'topLeft'}>
<span className={styles.location}> <span className={styles.location}>
<EnvironmentOutlined <EnvironmentOutlined
style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }} style={{fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle'}}
/> />
{deviceAddress} {deviceAddress || ' - '}
</span> </span>
</Tooltip> </Tooltip>
<Tooltip title={alertMsg} placement={'topLeft'}> <Tooltip title={alertMsg} placement={'topLeft'}>
<span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span> <span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span>
</Tooltip> </Tooltip>
<div className={styles.periodWrapper}> <div className={styles.periodWrapper}>
<span className={styles.period}>{switchTimeToPeriod(startTime)}</span> <span className={styles.period}>{switchTimeToPeriod(startTime)}</span>
</div> </div>
</div> </div>
); );
}; };
const AlarmScrollAssembly = (props) => { const AlarmScrollAssembly = (props) => {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [currentInfo, setCurrentInfo] = useState({}); const [currentInfo, setCurrentInfo] = useState({});
const constanceRef = useRef({ const constanceRef = useRef({
level: '1,2', level: '1,2',
type: '直接取值,取变化量,取变化率,取是否', type: '直接取值,取变化量,取变化率,取是否',
userID: window.globalConfig.userInfo.OID, userID: window.globalConfig.userInfo.OID,
userAccess: true, userAccess: true,
});
const [realTimeDataList, setRealTimeDataList] = useState(null);
const getDeviceNumber = () => {
return monitorService.getEquipmentInfo({
deviceTypes: props.deviceType,
pageIndex: 1,
pageSize: 1,
...constanceRef.current,
}); });
}; const [realTimeDataList, setRealTimeDataList] = useState(null);
const getRealTimeData = (pagination) => { const getDeviceNumber = () => {
return monitorService.GetAlarmListRealTime({ return monitorService.getEquipmentInfo({
deviceType: props.deviceType, deviceTypes: props.deviceType,
...constanceRef.current, pageIndex: 1,
pageIndex: pagination.pageIndex, pageSize: 1,
pageSize: pagination.pageSize, ...constanceRef.current,
userAccess: props.userAccess === void 0 ? true : props.userAccess, });
/* dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'), };
dateTo: moment().format('YYYY-MM-DD 23:59:59'),*/ const getRealTimeData = (pagination) => {
}); return monitorService.GetAlarmListRealTime({
}; deviceType: props.deviceType,
const getData = async () => { ...constanceRef.current,
let firstRequest = await getDeviceNumber(); pageIndex: pagination.pageIndex,
let secondRequest = await getRealTimeData({ pageSize: pagination.pageSize,
pageIndex: 1, userAccess: props.userAccess === void 0 ? true : props.userAccess,
pageSize: firstRequest.data.totalCount, /* dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),
}); dateTo: moment().format('YYYY-MM-DD 23:59:59'),*/
setRealTimeDataList(secondRequest.data.list); });
}; };
useEffect(() => { const getData = async () => {
getData(); let firstRequest = await getDeviceNumber();
}, []); let secondRequest = await getRealTimeData({
return ( pageIndex: 1,
<div className={styles.alarScrollAssembly} id={'alarmListDiv'}> pageSize: firstRequest.data.totalCount,
{realTimeDataList && realTimeDataList.length ? ( });
<Swiper setRealTimeDataList(secondRequest?.data?.list || []);
slidesPerView={1} };
modules={[Pagination]} useEffect(() => {
pagination={{ getData();
type: 'fraction', }, []);
formatFractionCurrent: (num) => `第${num}条`, return (
formatFractionTotal: (num) => `共${num}条`, <>
}} {realTimeDataList && realTimeDataList.length ? <div
navigation className={classnames(styles.alarScrollAssembly, (realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000))}
autoplay={{ id={'alarmListDiv'}>
delay: 3000, <Swiper
disableOnInteraction: false, slidesPerView={1}
}} modules={[Pagination]}
loop pagination={{
direction="vertical" type: 'fraction',
onSlideChange={(e) => { formatFractionCurrent: (num) => `第${num}条`,
if (e.activeIndex === realTimeDataList.length - 1) getData(); formatFractionTotal: (num) => `共${num}条`,
}} }}
> navigation
{realTimeDataList.map((item, index) => { autoplay={{
return ( delay: 3000,
<SwiperSlide disableOnInteraction: false,
key={index} }}
virtualIndex={index} loop
onClick={() => { direction="vertical"
setCurrentInfo(item); onSlideChange={(e) => {
setModalVisible(true); if (e.activeIndex === realTimeDataList.length - 1) getData();
}} }}
> >
<InfoItem key={index} info={item} /> {realTimeDataList.map((item, index) => {
</SwiperSlide> return (
); <SwiperSlide
})} key={index}
</Swiper> virtualIndex={index}
) : ( onClick={() => {
'' setCurrentInfo(item);
)} setModalVisible(true);
{modalVisible && ( }}
<Modal >
visible={modalVisible} <InfoItem key={index} info={item}/>
onCancel={() => setModalVisible(false)} </SwiperSlide>
width={'80%'} );
destroyOnClose })}
> </Swiper>
<NormChart {modalVisible && (
info={currentInfo} <Modal
deviceType={currentInfo.deviceType} visible={modalVisible}
deviceCode={currentInfo.stationCode} onCancel={() => setModalVisible(false)}
/> width={'80%'}
</Modal> destroyOnClose
)} >
</div> <NormChart
); info={currentInfo}
deviceType={currentInfo.deviceType}
deviceCode={currentInfo.stationCode}
/>
</Modal>
)}
</div> : ''}
</>
);
}; };
AlarmScrollAssembly.defaultProps = { AlarmScrollAssembly.defaultProps = {
deviceType: '二供泵房,二供机组', deviceType: '二供泵房,二供机组',
}; };
AlarmScrollAssembly.propTypes = { AlarmScrollAssembly.propTypes = {
deviceType: PropTypes.string, deviceType: PropTypes.string,
}; };
export default AlarmScrollAssembly; export default AlarmScrollAssembly;
packages/base-components/AlarmScrollAssembly/src/index.less
View file @ baf4594e
.alarScrollAssembly { .alarScrollAssembly {
:global { &.moreThan1000 {
.swiper-container { :global {
width: 950px; .swiper-container {
height: 42px; width: 950px;
height: 42px;
.swiper-button-prev {
right: 150px; .swiper-button-prev {
left: auto !important; right: 150px;
left: auto !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
}
.swiper-pagination-fraction {
top: 15px;
right: 24px;
left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper {
width: calc(100% - 140px);
}
.swiper-slide {
height: 32px;
line-height: 32px;
text-align: center;
}
} }
}
.swiper-button-next:after, }
.swiper-button-prev:after { &.lessThan1000 {
font-size: 12px; :global {
} .swiper-container {
width: 950px;
.swiper-pagination-fraction { height: 42px;
top: 15px;
right: 24px; .swiper-button-prev {
left: auto; right: 150px;
width: 130px; left: auto !important;
line-height: 12px; }
}
.swiper-button-next:after,
.swiper-wrapper { .swiper-button-prev:after {
width: calc(100% - 140px); font-size: 12px;
} }
.swiper-slide { .swiper-pagination-fraction {
height: 32px; top: 15px;
line-height: 32px; right: 24px;
text-align: center; left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper {
width: calc(100% - 140px);
}
.swiper-slide {
height: 32px;
line-height: 32px;
text-align: center;
}
} }
} }
} }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment