Skip to content

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

feat: 优化设置；优化定时请求

parent 813ac070
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 137 deletions
packages/base-components/AlarmScrollAssembly/src/demos/index.js
View file @ 5ce75391
...@@ -5,5 +5,12 @@ window.globalConfig = { ...@@ -5,5 +5,12 @@ window.globalConfig = {
userInfo: { OID: 1 }, userInfo: { OID: 1 },
}; };
export default () => { export default () => {
return <AlarmScrollAssembly deviceType={'二供泵房,二供机组'} prefix={'报警信息：'} />; // 最小宽度930px return (
<AlarmScrollAssembly
deviceType={'二供泵房,二供机组'}
prefix={'报警信息：'}
showTotal={false}
interval={1}
/>
); // 最小宽度930px
}; };
packages/base-components/AlarmScrollAssembly/src/index.js
View file @ 5ce75391
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,147 +21,179 @@ SwiperCore.use([Autoplay, Pagination, Navigation]); ...@@ -21,147 +21,179 @@ 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>
); );
}; };
let timer = null;
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 [enableToGetData, setEnableToGetData] = useState(false);
level: '1,2', const constanceRef = useRef({
type: '直接取值,取变化量,取变化率,取是否', level: '1,2',
userID: window.globalConfig.userInfo.OID, type: '直接取值,取变化量,取变化率,取是否',
userAccess: true, userID: window.globalConfig.userInfo.OID,
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 getDeviceNumber = () => { const getRealTimeData = (pagination) => {
return monitorService.getEquipmentInfo({ return monitorService.GetAlarmListRealTime({
deviceTypes: props.deviceType, deviceType: props.deviceType,
pageIndex: 1, ...constanceRef.current,
pageSize: 1, pageIndex: pagination.pageIndex,
...constanceRef.current, pageSize: pagination.pageSize,
}); userAccess: props.userAccess === void 0 ? true : props.userAccess,
}; /* dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),
const getRealTimeData = (pagination) => {
return monitorService.GetAlarmListRealTime({
deviceType: props.deviceType,
...constanceRef.current,
pageIndex: pagination.pageIndex,
pageSize: pagination.pageSize,
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'),*/ dateTo: moment().format('YYYY-MM-DD 23:59:59'),*/
}); });
}; };
const getData = async () => { const getData = async () => {
let firstRequest = await getDeviceNumber(); let firstRequest = await getDeviceNumber();
let secondRequest = await getRealTimeData({ let secondRequest = await getRealTimeData({
pageIndex: 1, pageIndex: 1,
pageSize: firstRequest.data.totalCount, // pageSize: firstRequest.data.totalCount,
}); pageSize: 10,
setRealTimeDataList(secondRequest?.data?.list || []); });
}; setRealTimeDataList(secondRequest?.data?.list || []);
useEffect(() => { setEnableToGetData(false);
getData(); runTimer(secondRequest?.data?.list.length || 0);
}, []); };
return ( const runTimer = (num) => {
<div className={styles.alarmScrollAssemblyWrapper}> console.log('timer: ', num);
{realTimeDataList && realTimeDataList.length ? <div className={styles.content} style={{display: 'flex'}}> console.log(enableToGetData);
{ let _interval = props.interval || 0;
props.prefix ? if (num > 200) _interval = 0;
<span style={{...props.style, flex: 'none', marginRight: 10}}>{props.prefix}</span> : '' timer = setTimeout(() => {
} setEnableToGetData(true);
<div }, 1000 * 60 * _interval);
className={classnames(styles.alarmScrollAssembly, (realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000))} };
id={'alarmListDiv'}> useEffect(() => {
<Swiper getData();
slidesPerView={1} }, []);
modules={[Pagination]} return (
pagination={{ <div className={styles.alarmScrollAssemblyWrapper}>
type: 'fraction', {realTimeDataList && realTimeDataList.length ? (
formatFractionCurrent: (num) => `第${num}条`, <div className={styles.content} style={{ display: 'flex' }}>
formatFractionTotal: (num) => `共${num}条`, {props.prefix ? (
}} <span style={{ ...props.style, flex: 'none', marginRight: 10 }}>{props.prefix}</span>
navigation ) : (
autoplay={{ ''
delay: 3000, )}
disableOnInteraction: false, <div
}} className={classnames(
loop styles.alarmScrollAssembly,
direction="vertical" realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000,
onSlideChange={(e) => { )}
if (e.activeIndex === realTimeDataList.length - 1) getData(); id={'alarmListDiv'}
}} >
> <Swiper
{realTimeDataList.map((item, index) => { slidesPerView={1}
return ( modules={[Pagination]}
<SwiperSlide pagination={
key={index} props.showTotal
virtualIndex={index} ? {
onClick={() => { type: 'fraction',
setCurrentInfo(item); formatFractionCurrent: (num) => `第${num}条`,
setModalVisible(true); formatFractionTotal: (num) => `共${num}条`,
}} }
> : false
<InfoItem key={index} info={item}/> }
</SwiperSlide> navigation={props.showTotal ? true : false}
); autoplay={{
})} delay: 3000,
</Swiper> disableOnInteraction: false,
{modalVisible && ( }}
<Modal loop
visible={modalVisible} direction="vertical"
onCancel={() => setModalVisible(false)} onSlideChange={(e) => {
width={'80%'} console.log(enableToGetData);
destroyOnClose if (e.activeIndex === realTimeDataList.length - 1 && enableToGetData) getData();
> }}
<NormChart >
info={currentInfo} {realTimeDataList.map((item, index) => {
deviceType={currentInfo.deviceType} return (
deviceCode={currentInfo.stationCode} <SwiperSlide
/> key={index}
</Modal> virtualIndex={index}
)} onClick={() => {
</div> setCurrentInfo(item);
</div> : ''} setModalVisible(true);
}}
>
<InfoItem key={index} info={item} />
</SwiperSlide>
);
})}
</Swiper>
{modalVisible && (
<Modal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
width={'80%'}
destroyOnClose
>
<NormChart
info={currentInfo}
deviceType={currentInfo.deviceType}
deviceCode={currentInfo.stationCode}
/>
</Modal>
)}
</div>
</div> </div>
); ) : (
''
)}
</div>
);
}; };
AlarmScrollAssembly.defaultProps = { AlarmScrollAssembly.defaultProps = {
deviceType: '二供泵房,二供机组', deviceType: '二供泵房,二供机组',
prefix: '' prefix: '',
showTotal: true,
interval: 5,
}; };
AlarmScrollAssembly.propTypes = { AlarmScrollAssembly.propTypes = {
deviceType: PropTypes.string, deviceType: PropTypes.string,
prefix: PropTypes.string prefix: PropTypes.string,
showTotal: PropTypes.bool,
interval: PropTypes.number,
}; };
export default AlarmScrollAssembly; export default AlarmScrollAssembly;
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