Yaxin
/
Uighur-Recognition-Monitor-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 完成告警提示功能

Browse Source
master
JINGYJ 12 months ago
parent 7d413768ef
commit 2f42c42d36
9 changed files with 151 additions and 24 deletions
Show Stats Download Patch File Download Diff File

4
src/pages/Offline/OfflineAlarmList/components/AlarmDetails.less
Unescape Escape View File

@ -73,9 +73,11 @@
justify-content: center;
box-sizing: border-box;
width: 784px;
// height: 172px;
max-height: 760px;
margin-bottom: 24px;
padding: 16px 0 16px 16px;
// height: 172px;
overflow: scroll;
background: #fbfcff;
border: 1px dashed #dcdcdc;
border-radius: 4px;

71
src/pages/Offline/OfflineAlarmList/index.tsx
Unescape Escape View File

@ -5,7 +5,11 @@ import React, { useEffect, useState } from 'react';
import { proTablePaginationOptions } from '../../../../config/defaultTable';
// import DeviceStatusCard from './components/DeviceStatusCard';
// import CreateForm from './components/CreateForm';
import { postUploadAlarmList, postUploadAlarmListIschecked } from '@/services/realTime/alarmlist';
import {
postUploadAlarmList,
postUploadAlarmListIschecked,
postUploadWarningStatistics,
} from '@/services/realTime/alarmlist';
import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
@ -68,7 +72,22 @@ const OfflineAlarmList: React.FC = () => {
// // }
// setTabs(alarmVideoAnalysis);
// };
const [tabFlag, settabFlag] = useState<any>([]);
const pollServer = () => {
postUploadWarningStatistics({})
.then((res) => {
if (res && res.data.total_results) {
// 使用 state.totalResults 来设置 selectOptions
const newOptions = res.data.total_results[0].warning_type;
settabFlag(newOptions);
}
setTimeout(pollServer, 50000);
})
.catch(() => {});
};
useEffect(() => {
pollServer();
}, []);
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
@ -116,7 +135,7 @@ const OfflineAlarmList: React.FC = () => {
style={{
marginLeft: 16,
height: 110,
position: 'relative',
// position: 'relative',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
@ -177,8 +196,8 @@ const OfflineAlarmList: React.FC = () => {
style={{
display: 'inline-block',
position: 'absolute',
top: '0px',
right: '-80px',
top: '10px',
right: '10px',
width: '10px',
height: '10px',
background: '#E80D0D',
@ -297,6 +316,20 @@ const OfflineAlarmList: React.FC = () => {
}}
>
单人徘徊告警
{tabFlag[0] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
<Button
style={{ height: 32, borderRadius: 20, margin: '0 16px' }}
@ -306,6 +339,20 @@ const OfflineAlarmList: React.FC = () => {
}}
>
多人徘徊告警
{tabFlag[1] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
<Button
style={{ height: 32, borderRadius: 20 }}
@ -315,6 +362,20 @@ const OfflineAlarmList: React.FC = () => {
}}
>
敏感时间段告警
{tabFlag[2] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
</div>
<div style={{ padding: '16px 0' }}>

7
src/pages/RealTime/AlarmList/components/AlarmDetails.less
Unescape Escape View File

@ -68,12 +68,15 @@
}
.alarmImgContent {
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
width: 784px;
margin-bottom: 24px;
padding: 16px;
// height: 172px;
max-height: 760px;
margin-bottom: 24px;
padding: 16px 0 16px 16px;
overflow: scroll;
background: #fbfcff;
border: 1px dashed #dcdcdc;
border-radius: 4px;

33
src/pages/RealTime/AlarmList/components/AlarmDetails.tsx
Unescape Escape View File

@ -29,6 +29,7 @@ export type UpdateFormProps = {
handleModal: () => void;
values: Partial<API.AlarmDetailsParams>;
reload: any;
warning_type: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
@ -39,17 +40,29 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const [involved, setInvolved] = useState(0);
// const [involvedInfo, setInvolvedInfo] = useState([...(props?.values?.person_list || [])]);
const [involvedInfo, setInvolvedInfo] = useState<any[]>([]);
// useEffect(() => {
// if (props.values?.person_list) {
// setInvolvedInfo([...props.values.person_list]);
// }
// }, [props.values?.person_list]);
// useEffect(() => {
// if (props.values?.person_classify) {
// setInvolved(props.values.person_classify);
// console.log(involved);
// }
// }, [props.values?.person_classify]);
useEffect(() => {
if (props.values?.person_list) {
setInvolvedInfo([...props.values.person_list]);
}
}, [props.values?.person_list]);
useEffect(() => {
if (props.values?.person_classify) {
setInvolved(props.values.person_classify);
console.log(involved);
// console.log(Array.isArray(props.values?.person_id),'Array.isArray(props.values?.person_id)');
if (props.updateModalOpen) {
if (props.warning_type === '1') {
console.log('props.values?.warning_type1', props.values.person_list[0][2]);
setInvolved(props.values.person_list[0][2]);
} else {
console.log('props.values?.warning_type2');
setInvolvedInfo([...props.values.person_list]);
}
}
}, [props.values?.person_classify]);
}, [props.updateModalOpen]);
const handlePostRecognition = (person_id: any, classify: any) => {
postRecognition({
person_id: person_id,
@ -184,7 +197,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
设备地址: <span className={styles.alarmSpan}>{props.values.device_address}</span>
</div>
<div className={styles.alarmImgContent}>
{Array.isArray(props.values?.person_id)
{props.warning_type === '2'
? Array.isArray(involvedInfo) && involvedInfo.length
? involvedInfo.map((item: any, index: any) => {
return (

2
src/pages/RealTime/AlarmList/components/ImageSinglePopover.tsx
Unescape Escape View File

@ -78,7 +78,7 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
position: 'relative',
boxSizing: 'border-box',
width: 140,
height: 160,
height: 170,
marginRight: 12,
}}
>

4
src/pages/RealTime/AlarmList/components/ImageWithPopover.tsx
Unescape Escape View File

@ -100,7 +100,7 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
position: 'relative',
boxSizing: 'border-box',
width: 140,
height: 160,
height: 170,
marginRight: 12,
}}
>
@ -130,7 +130,7 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
onOpenChange={handleOpenChange}
>
<Button
style={{ position: 'absolute', bottom: 20, right: 0 }}
style={{ position: 'absolute', bottom: 30, right: 0, display: 'none' }}
type="text"
icon={
<EllipsisOutlined style={{ color: '#fff', fontSize: 24, transform: 'rotate(90deg)' }} />

49
src/pages/RealTime/AlarmList/index.tsx
Unescape Escape View File

@ -76,6 +76,7 @@ const AlarmList: React.FC = () => {
// const { state } = location;
const [selectOptions, setSelectOptions] = useState<any>([]);
const [selectValue, setSelectValue] = useState<number>();
const [tabFlag, settabFlag] = useState<any>([]);
const pollServer = () => {
postWarningStatistics({})
.then((res) => {
@ -103,9 +104,9 @@ const AlarmList: React.FC = () => {
}));
setSelectValue(res.data.total_results[0].id);
setSelectOptions(newOptions);
settabFlag(res.data.total_results[0].warning_type);
}
console.log(selectValue, 'selectValue');
// setTimeout(pollServer, 5000);
setTimeout(pollServer, 50000);
})
.catch(() => {});
};
@ -334,6 +335,7 @@ const AlarmList: React.FC = () => {
className="select_Bg"
style={{ width: 280, borderRadius: 4 }}
onChange={handleChange}
value={selectValue}
options={selectOptions}
/>
<Button
@ -369,6 +371,20 @@ const AlarmList: React.FC = () => {
}}
>
单人徘徊告警
{tabFlag?.[0] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
<Button
style={{ height: 32, borderRadius: 20, margin: '0 16px' }}
@ -378,6 +394,20 @@ const AlarmList: React.FC = () => {
}}
>
多人徘徊告警
{tabFlag?.[1] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
<Button
style={{ height: 32, borderRadius: 20 }}
@ -387,6 +417,20 @@ const AlarmList: React.FC = () => {
}}
>
敏感时间段告警
{tabFlag?.[2] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '-5px',
right: '5px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</Button>
</div>
<ProList<any>
@ -489,6 +533,7 @@ const AlarmList: React.FC = () => {
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={initList}
warning_type={tab}
/>
</PageContainer>
);

3
src/pages/RealTime/DeviceList/index.tsx
Unescape Escape View File

@ -98,6 +98,7 @@ const DeviceList: React.FC = () => {
),
dataIndex: 'device_name',
hideInSearch: true,
width: 240,
// width: 240,
},
{
@ -196,7 +197,7 @@ const DeviceList: React.FC = () => {
/>
),
dataIndex: 'platform_name',
// width: 240,
width: 240,
hideInSearch: true,
},
{

2
src/pages/RealTime/InvolvedList/index.tsx
Unescape Escape View File

@ -404,6 +404,7 @@ const InvolvedList: React.FC = () => {
className="select_Bg"
style={{ width: 280, borderRadius: 4, marginRight: 12 }}
onChange={handleChange}
value={selectValue}
options={selectOptions}
/>
<DatePicker
@ -430,6 +431,7 @@ const InvolvedList: React.FC = () => {
// setCreateModalOpen(true);
setImportDate(null);
setInnerDate(null);
// setSelectValue(1);
initList(classify, null);
}}
>

Write Preview
Loading…
Cancel
Save