Skip to content

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

feat: 变更设备报警的实现方式

parent 60c22585
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 136 deletions
packages/base-components/AlarmScrollAssembly/src/api/service/monitor.js
View file @ f495636f
import { request } from '@wisdom-utils/utils';
import {request} from '@wisdom-utils/utils';
import * as constants from '../../constants';
const MonitorDevice = '/PandaMonitor/Monitor/Device';
const API = {
GET_ALARM_LIST_REAL_TIME: `${MonitorDevice}/GetAlarmListRealTime`,
GET_DEVICE_QUOTA_LIST: `${MonitorDevice}/GetQuotaList`, //
GET_ALARM_LIST_REAL_TIME: `${MonitorDevice}/GetAlarmListRealTime`,
GET_DEVICE_QUOTA_LIST: `${MonitorDevice}/GetQuotaList`, //
GET_EQUIPMENT_INFO: `${MonitorDevice}/GetEquipmentInfo`, // 获取设备树
};
const monitorServices = {
GetAlarmListRealTime: {
url: API.GET_ALARM_LIST_REAL_TIME, // 获取 数据维护日志
method: constants.REQUEST_METHOD_POST,
type: constants.REQUEST_HTTP,
},
GetDeviceQuotaList: {
url: API.GET_DEVICE_QUOTA_LIST,
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_HTTP,
},
GetAlarmListRealTime: {
url: API.GET_ALARM_LIST_REAL_TIME, // 获取 数据维护日志
method: constants.REQUEST_METHOD_POST,
type: constants.REQUEST_HTTP,
},
GetDeviceQuotaList: {
url: API.GET_DEVICE_QUOTA_LIST,
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_HTTP,
},
getEquipmentInfo: {
url: API.GET_EQUIPMENT_INFO,
method: constants.REQUEST_METHOD_POST,
type: constants.REQUEST_HTTP,
},
};
export default monitorServices;
packages/base-components/AlarmScrollAssembly/src/index.js
View file @ f495636f
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 moment from 'moment';
import classnames from 'classnames';
import { switchTimeToPeriod } from './utils';
import {switchTimeToPeriod} from './utils';
import NormChart from './NormChart/NormChart';
import { Swiper, SwiperSlide } from 'swiper/react';
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]);
/*
......@@ -21,132 +21,141 @@ SwiperCore.use([Autoplay, Pagination, Navigation]);
* 3. 初始化进入时，取截止到当前时间为止的所有的实时报警数据。
* 4. 播放结束后，重新获取实时报警数据进行第二轮的播放。
* */
const InfoItem = ({ info }) => {
const returnClassName = (type, key) => {
let _className = '';
if (type === '普通') {
_className = 'normal';
} else if (type === '紧急') {
_className = 'warning';
}
return `${_className}${key}`;
};
const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info;
return (
<div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
<Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
<span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span>
<Tooltip title={deviceAddress} placement={'topLeft'}>
const InfoItem = ({info}) => {
const returnClassName = (type, key) => {
let _className = '';
if (type === '普通') {
_className = 'normal';
} else if (type === '紧急') {
_className = 'warning';
}
return `${_className}${key}`;
};
const {alertLevel, startTime, stationName, alertMsg, deviceAddress} = info;
return (
<div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
<Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
<span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span>
<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}
{deviceAddress}
</span>
</Tooltip>
<Tooltip title={alertMsg} placement={'topLeft'}>
<span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span>
</Tooltip>
<div className={styles.periodWrapper}>
<span className={styles.period}>{switchTimeToPeriod(startTime)}</span>
</div>
</div>
);
</Tooltip>
<Tooltip title={alertMsg} placement={'topLeft'}>
<span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span>
</Tooltip>
<div className={styles.periodWrapper}>
<span className={styles.period}>{switchTimeToPeriod(startTime)}</span>
</div>
</div>
);
};
const AlarmScrollAssembly = (props) => {
const [modalVisible, setModalVisible] = useState(false);
const [currentInfo, setCurrentInfo] = useState({});
const constanceRef = useRef({
level: '1,2',
type: '直接取值,取变化量,取变化率,取是否',
userID: window.globalConfig.userInfo.OID,
userAccess: true,
});
const [realTimeDataList, setRealTimeDataList] = useState(null);
const getRealTimeData = (pagination) => {
return monitorService.GetAlarmListRealTime({
deviceType: props.deviceType,
...constanceRef.current,
pageIndex: pagination.pageIndex,
pageSize: pagination.pageSize,
dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),
dateTo: moment().format('YYYY-MM-DD 23:59:59'),
const [modalVisible, setModalVisible] = useState(false);
const [currentInfo, setCurrentInfo] = useState({});
const constanceRef = useRef({
level: '1,2',
type: '直接取值,取变化量,取变化率,取是否',
userID: window.globalConfig.userInfo.OID,
userAccess: true,
});
};
const getData = async () => {
let firstRequest = await getRealTimeData({ pageSize: 1, pageIndex: 1 });
let secondRequest = await getRealTimeData({
pageIndex: 1,
pageSize: firstRequest.data.totalCount,
});
setRealTimeDataList(secondRequest.data.list);
};
useEffect(() => {
getData();
}, []);
return (
<div className={styles.alarScrollAssembly} id={'alarmListDiv'}>
{/*{realTimeDataList && realTimeDataList.length ? <Swiper*/}
{realTimeDataList && realTimeDataList.length ? (
<Swiper
// spaceBetween={50}
slidesPerView={1}
modules={[Pagination]}
pagination={{
type: 'fraction',
formatFractionCurrent: (num) => `第${num}条`,
formatFractionTotal: (num) => `共${num}条`,
}}
navigation
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
loop
direction="vertical"
onSlideChange={(e) => {
if (e.activeIndex === realTimeDataList.length - 1) getData();
}}
>
{realTimeDataList.map((item, index) => {
return (
<SwiperSlide
key={index}
virtualIndex={index}
onClick={() => {
setCurrentInfo(item);
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>
);
const [realTimeDataList, setRealTimeDataList] = useState(null);
const getDeviceNumber = () => {
return monitorService.getEquipmentInfo({
deviceTypes: props.deviceType,
pageIndex: 1,
pageSize: 1,
...constanceRef.current,
})
};
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'),*/
});
};
const getData = async () => {
let firstRequest = await getDeviceNumber();
let secondRequest = await getRealTimeData({
pageIndex: 1,
pageSize: firstRequest.data.totalCount,
});
setRealTimeDataList(secondRequest.data.list);
};
useEffect(() => {
getData();
}, []);
return (
<div className={styles.alarScrollAssembly} id={'alarmListDiv'}>
{/*{realTimeDataList && realTimeDataList.length ? <Swiper*/}
{realTimeDataList && realTimeDataList.length ? (
<Swiper
// spaceBetween={50}
slidesPerView={1}
modules={[Pagination]}
pagination={{
type: 'fraction',
formatFractionCurrent: (num) => `第${num}条`,
formatFractionTotal: (num) => `共${num}条`,
}}
navigation
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
loop
direction="vertical"
onSlideChange={(e) => {
if (e.activeIndex === realTimeDataList.length - 1) getData();
}}
>
{realTimeDataList.map((item, index) => {
return (
<SwiperSlide
key={index}
virtualIndex={index}
onClick={() => {
setCurrentInfo(item);
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>
);
};
AlarmScrollAssembly.defaultProps = {
deviceType: '二供泵房,二供机组',
deviceType: '二供泵房,二供机组',
};
AlarmScrollAssembly.propTypes = {
deviceType: PropTypes.string,
deviceType: PropTypes.string,
};
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