feat: 完成告警提示功能

src/pages/Offline/OfflineAlarmList/components/AlarmDetails.less

@@ -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;

src/pages/Offline/OfflineAlarmList/index.tsx

@@ -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',
+                      top: '10px',
-                      right: '-80px',
+                      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' }}>

src/pages/RealTime/AlarmList/components/AlarmDetails.less

@@ -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;

src/pages/RealTime/AlarmList/components/AlarmDetails.tsx

@@ -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) {
+    // 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_list]);
-  useEffect(() => {
-    if (props.values?.person_classify) {
-      setInvolved(props.values.person_classify);
-      console.log(involved);
     }
-  }, [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 (

src/pages/RealTime/AlarmList/components/ImageSinglePopover.tsx

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

src/pages/RealTime/AlarmList/components/ImageWithPopover.tsx

@@ -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)' }} />

src/pages/RealTime/AlarmList/index.tsx

@@ -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, 50000);
-        // setTimeout(pollServer, 5000);
       })
       .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>
   );

src/pages/RealTime/DeviceList/index.tsx

@@ -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,
     },
     {

src/pages/RealTime/InvolvedList/index.tsx

@@ -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);
               }}
             >