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

feat: 代码优化修改

Browse Source
master
JINGYJ 11 months ago
parent 2f42c42d36
commit 4511641865
28 changed files with 530 additions and 224 deletions
Show Stats Download Patch File Download Diff File

9
public/images/icons/alarmList.svg
Unescape Escape View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.0002 5.59974C6.49063 5.59974 5.26686 6.82351 5.26686 8.33307V13.0664H10.7335V8.33307C10.7335 6.82351 9.50976 5.59974 8.0002 5.59974ZM4.06686 8.33307C4.06686 6.16077 5.82789 4.39974 8.0002 4.39974C10.1725 4.39974 11.9335 6.16077 11.9335 8.33307V13.6664C11.9335 13.9978 11.6649 14.2664 11.3335 14.2664H4.66686C4.33549 14.2664 4.06686 13.9978 4.06686 13.6664V8.33307Z" fill="white"/>
<path d="M8.0002 1.06641C8.33157 1.06641 8.6002 1.33504 8.6002 1.66641V2.66641C8.6002 2.99778 8.33157 3.26641 8.0002 3.26641C7.66882 3.26641 7.4002 2.99778 7.4002 2.66641V1.66641C7.4002 1.33504 7.66882 1.06641 8.0002 1.06641Z" fill="white"/>
<path d="M12.3498 2.64952C12.6036 2.86252 12.6368 3.24098 12.4238 3.49482L11.781 4.26088C11.568 4.51472 11.1895 4.54783 10.9357 4.33483C10.6818 4.12183 10.6487 3.74338 10.8617 3.48953L11.5045 2.72348C11.7175 2.46963 12.096 2.43652 12.3498 2.64952Z" fill="white"/>
<path d="M14.664 6.65798C14.7215 6.98431 14.5036 7.29551 14.1773 7.35306L13.1925 7.52672C12.8661 7.58427 12.5549 7.36637 12.4974 7.04004C12.4398 6.7137 12.6577 6.4025 12.9841 6.34496L13.9689 6.17129C14.2952 6.11374 14.6064 6.33164 14.664 6.65798Z" fill="white"/>
<path d="M1.33636 6.65803C1.3939 6.33169 1.70509 6.11378 2.03143 6.17132L3.01624 6.34495C3.34257 6.40249 3.56048 6.71368 3.50294 7.04002C3.4454 7.36636 3.13421 7.58426 2.80788 7.52673L1.82307 7.35309C1.49673 7.29555 1.27883 6.98436 1.33636 6.65803Z" fill="white"/>
<path d="M3.65072 2.64945C3.90457 2.43645 4.28302 2.46956 4.49602 2.72341L5.13882 3.48947C5.35182 3.74331 5.31871 4.12177 5.06487 4.33477C4.81102 4.54777 4.43257 4.51466 4.21957 4.26081L3.57677 3.49475C3.36377 3.24091 3.39688 2.86245 3.65072 2.64945Z" fill="white"/>
<path d="M1.4002 13.6664C1.4002 13.335 1.66882 13.0664 2.0002 13.0664H14.3335C14.6649 13.0664 14.9335 13.335 14.9335 13.6664C14.9335 13.9978 14.6649 14.2664 14.3335 14.2664H2.0002C1.66882 14.2664 1.4002 13.9978 1.4002 13.6664Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
public/images/icons/alarmSubscript.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0H0L16 16V4C16 1.79086 14.2091 0 12 0Z" fill="#E80D0D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 173 B

6
public/images/icons/deviceManagement.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.00039 8.06713C2.33176 8.06713 2.60039 8.33576 2.60039 8.66713V14.0005C2.60039 14.3318 2.33176 14.6005 2.00039 14.6005C1.66902 14.6005 1.40039 14.3318 1.40039 14.0005V8.66713C1.40039 8.33576 1.66902 8.06713 2.00039 8.06713Z" fill="white"/>
<path d="M5.99988 8.50123C6.27559 8.68504 6.3501 9.05757 6.16629 9.33328L4.83295 11.3333C4.72167 11.5002 4.53434 11.6005 4.33372 11.6005H2.00039C1.66902 11.6005 1.40039 11.3318 1.40039 11.0005C1.40039 10.6691 1.66902 10.4005 2.00039 10.4005H4.01261L5.16783 8.66764C5.35164 8.39193 5.72416 8.31742 5.99988 8.50123Z" fill="white"/>
<path d="M1.83449 6.33431C2.01831 6.05859 2.39083 5.98409 2.66654 6.1679L11.3506 11.9573L14.3584 10.1526C14.6425 9.98214 15.0111 10.0743 15.1816 10.3584C15.352 10.6426 15.2599 11.0111 14.9758 11.1816L11.8233 13.0731C11.8233 13.0731 11.8233 13.0731 11.8233 13.0731C11.514 13.2586 11.1255 13.2494 10.8254 13.0494L2.0009 7.16636C1.72519 6.98255 1.65068 6.61003 1.83449 6.33431Z" fill="white"/>
<path d="M5.04911 2.24088L13.4253 7.53108L10.9886 9.27152L3.00181 3.94697L5.04911 2.24088ZM4.50448 1.13269L1.82205 3.36805C1.41124 3.7104 1.4455 4.35164 1.89044 4.64827L10.5527 10.4231C10.8293 10.6075 11.191 10.6017 11.4615 10.4085L14.607 8.16165C15.0694 7.83135 15.0497 7.13773 14.5692 6.83428L5.44383 1.07088C5.15044 0.885583 4.77106 0.91055 4.50448 1.13269Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

17
public/images/icons/recognition.svg
Unescape Escape View File

@ -0,0 +1,17 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12722_4688)">
<path d="M1.3334 10.7324C1.66477 10.7324 1.9334 11.0011 1.9334 11.3324V14.0658H4.66673C4.9981 14.0658 5.26673 14.3344 5.26673 14.6658C5.26673 14.9971 4.9981 15.2658 4.66673 15.2658H1.3334C1.00203 15.2658 0.733398 14.9971 0.733398 14.6658V11.3324C0.733398 11.0011 1.00203 10.7324 1.3334 10.7324Z" fill="white"/>
<path d="M14.6667 10.7324C14.9981 10.7324 15.2667 11.0011 15.2667 11.3324V14.6658C15.2667 14.9971 14.9981 15.2658 14.6667 15.2658H11.3334C11.002 15.2658 10.7334 14.9971 10.7334 14.6658C10.7334 14.3344 11.002 14.0658 11.3334 14.0658H14.0667V11.3324C14.0667 11.0011 14.3354 10.7324 14.6667 10.7324Z" fill="white"/>
<path d="M10.7334 1.33242C10.7334 1.00105 11.002 0.732422 11.3334 0.732422H14.6667C14.9981 0.732422 15.2667 1.00105 15.2667 1.33242V4.66575C15.2667 4.99713 14.9981 5.26576 14.6667 5.26576C14.3354 5.26576 14.0667 4.99713 14.0667 4.66575V1.93242H11.3334C11.002 1.93242 10.7334 1.66379 10.7334 1.33242Z" fill="white"/>
<path d="M0.733398 1.33242C0.733398 1.00105 1.00203 0.732422 1.3334 0.732422H4.66673C4.9981 0.732422 5.26673 1.00105 5.26673 1.33242C5.26673 1.66379 4.9981 1.93242 4.66673 1.93242H1.9334V4.66575C1.9334 4.99713 1.66477 5.26576 1.3334 5.26576C1.00203 5.26576 0.733398 4.99713 0.733398 4.66575V1.33242Z" fill="white"/>
<path d="M5.7556 10.9061C5.52109 10.6743 5.1426 10.6747 4.90913 10.9082C4.67482 11.1425 4.67482 11.5224 4.90913 11.7567L5.3334 11.3324C4.90913 11.7567 4.90969 11.7572 4.90987 11.7574L4.91071 11.7583L4.91266 11.7602L4.91772 11.7651L4.93239 11.7792C4.94419 11.7904 4.96002 11.8051 4.97982 11.8228C5.0194 11.8581 5.07497 11.9057 5.14591 11.9612C5.28751 12.072 5.49205 12.216 5.75442 12.3592C6.27898 12.6453 7.04404 12.9324 8.00007 12.9324C8.95609 12.9324 9.72115 12.6453 10.2457 12.3592C10.5081 12.216 10.7126 12.072 10.8542 11.9612C10.9252 11.9057 10.9807 11.8581 11.0203 11.8228C11.0401 11.8051 11.0559 11.7904 11.0677 11.7792L11.0824 11.7651L11.0875 11.7602L11.0894 11.7583L11.0903 11.7574L11.091 11.7567C11.0912 11.7565 11.091 11.7567 10.6667 11.3324L11.091 11.7567C11.3253 11.5224 11.3253 11.1425 11.091 10.9082C10.8575 10.6747 10.4795 10.6738 10.245 10.9056L10.2424 10.9081C10.2388 10.9116 10.2315 10.9183 10.2207 10.928C10.1991 10.9473 10.1635 10.9779 10.1147 11.0162C10.0167 11.0928 9.86705 11.1988 9.67109 11.3057C9.27898 11.5196 8.7107 11.7324 8.00007 11.7324C7.28943 11.7324 6.72115 11.5196 6.32904 11.3057C6.13309 11.1988 5.98345 11.0928 5.88548 11.0162C5.83662 10.9779 5.80105 10.9473 5.77942 10.928C5.76862 10.9183 5.76099 10.9113 5.75733 10.9078L5.7556 10.9061C5.75514 10.9057 5.75559 10.9061 5.7556 10.9061L5.75646 10.907L5.75733 10.9078C5.75733 10.9078 5.75733 10.9078 5.75733 10.9078M5.75733 10.9078C5.75733 10.9078 5.75733 10.9078 5.75733 10.9078Z" fill="white"/>
<path d="M8.00006 4.06576C8.33144 4.06576 8.60007 4.33438 8.60007 4.66576V7.66576C8.60007 8.19423 8.34187 8.67248 8.00766 9.00669C7.67346 9.34089 7.1952 9.59909 6.66673 9.59909H6.3334C6.00203 9.59909 5.7334 9.33046 5.7334 8.99909C5.7334 8.66772 6.00203 8.39909 6.3334 8.39909H6.66673C6.80493 8.39909 6.99334 8.32395 7.15913 8.15816C7.32493 7.99237 7.40007 7.80395 7.40007 7.66576V4.66576C7.40007 4.33438 7.66869 4.06576 8.00006 4.06576Z" fill="white"/>
<path d="M11.3334 4.06576C11.6648 4.06576 11.9334 4.33438 11.9334 4.66576V5.33242C11.9334 5.66379 11.6648 5.93242 11.3334 5.93242C11.002 5.93242 10.7334 5.66379 10.7334 5.33242V4.66576C10.7334 4.33438 11.002 4.06576 11.3334 4.06576Z" fill="white"/>
<path d="M4.66673 4.06576C4.9981 4.06576 5.26673 4.33438 5.26673 4.66576V5.33242C5.26673 5.66379 4.9981 5.93242 4.66673 5.93242C4.33536 5.93242 4.06673 5.66379 4.06673 5.33242V4.66576C4.06673 4.33438 4.33536 4.06576 4.66673 4.06576Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_12722_4688">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

7
public/images/icons/recordSummary.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.7334 3.00039C2.7334 2.48493 3.15125 2.06706 3.66673 2.06706H6.00007V3.26706H3.9334V14.0671H12.7334V3.26706H10.6667V2.06706H13.0001C13.5155 2.06706 13.9334 2.48493 13.9334 3.00039V14.3337C13.9334 14.8492 13.5155 15.2671 13.0001 15.2671H3.66673C3.15126 15.2671 2.7334 14.8492 2.7334 14.3337V3.00039Z" fill="white"/>
<path d="M8.3334 1.60039C8.11248 1.60039 7.9334 1.77947 7.9334 2.00039V2.65056C7.9334 2.99135 7.65706 3.26706 7.3169 3.26706H6.60007V4.06706H10.0667V3.26706H9.3499C9.00974 3.26706 8.7334 2.99135 8.7334 2.65056V2.00039C8.7334 1.77947 8.55432 1.60039 8.3334 1.60039ZM6.7334 2.00039C6.7334 1.11674 7.44972 0.400391 8.3334 0.400391C9.21708 0.400391 9.9334 1.11674 9.9334 2.00039V2.06706H11.2667V4.33372C11.2667 4.84919 10.8489 5.26706 10.3334 5.26706H6.3334C5.81793 5.26706 5.40007 4.84919 5.40007 4.33372V2.06706H6.7334V2.00039Z" fill="white"/>
<path d="M5.40007 7.00039C5.40007 7.33176 5.66869 7.60039 6.00007 7.60039H10.6667C10.9981 7.60039 11.2667 7.33176 11.2667 7.00039C11.2667 6.66902 10.9981 6.40039 10.6667 6.40039H6.00007C5.66869 6.40039 5.40007 6.66902 5.40007 7.00039Z" fill="white"/>
<path d="M5.40007 9.66706C5.40007 9.33569 5.66869 9.06706 6.00007 9.06706H10.6667C10.9981 9.06706 11.2667 9.33569 11.2667 9.66706C11.2667 9.99843 10.9981 10.2671 10.6667 10.2671H6.00007C5.66869 10.2671 5.40007 9.99843 5.40007 9.66706Z" fill="white"/>
<path d="M5.40007 12.3337C5.40007 12.0024 5.66869 11.7337 6.00007 11.7337H10.6667C10.9981 11.7337 11.2667 12.0024 11.2667 12.3337C11.2667 12.6651 10.9981 12.9337 10.6667 12.9337H6.00007C5.66869 12.9337 5.40007 12.6651 5.40007 12.3337Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
public/images/icons/ruleSetting.svg
Unescape Escape View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33307 1.93242C3.29625 1.93242 3.26641 1.96227 3.26641 1.99909V13.9991C3.26641 14.0359 3.29625 14.0658 3.33307 14.0658H12.6664C12.7032 14.0658 12.7331 14.0359 12.7331 13.9991V1.99909C12.7331 1.96227 12.7032 1.93242 12.6664 1.93242H3.33307ZM2.06641 1.99909C2.06641 1.29953 2.63351 0.732422 3.33307 0.732422H12.6664C13.366 0.732422 13.9331 1.29953 13.9331 1.99909V13.9991C13.9331 14.6986 13.366 15.2658 12.6664 15.2658H3.33307C2.63351 15.2658 2.06641 14.6986 2.06641 13.9991V1.99909Z" fill="white"/>
<path d="M6.39974 4.66576C6.39974 4.33438 6.66837 4.06576 6.99974 4.06576H10.9997C11.3311 4.06576 11.5997 4.33438 11.5997 4.66576C11.5997 4.99713 11.3311 5.26576 10.9997 5.26576H6.99974C6.66837 5.26576 6.39974 4.99713 6.39974 4.66576Z" fill="white"/>
<path d="M6.39974 7.99909C6.39974 8.33046 6.66837 8.59909 6.99974 8.59909H10.9997C11.3311 8.59909 11.5997 8.33046 11.5997 7.99909C11.5997 7.66772 11.3311 7.39909 10.9997 7.39909H6.99974C6.66837 7.39909 6.39974 7.66772 6.39974 7.99909Z" fill="white"/>
<path d="M6.39974 11.3324C6.39974 11.0011 6.66837 10.7324 6.99974 10.7324H10.9997C11.3311 10.7324 11.5997 11.0011 11.5997 11.3324C11.5997 11.6638 11.3311 11.9324 10.9997 11.9324H6.99974C6.66837 11.9324 6.39974 11.6638 6.39974 11.3324Z" fill="white"/>
<path d="M4.99974 5.33242C5.36794 5.33242 5.66641 5.03396 5.66641 4.66576C5.66641 4.29756 5.36794 3.99909 4.99974 3.99909C4.63154 3.99909 4.33307 4.29756 4.33307 4.66576C4.33307 5.03396 4.63154 5.33242 4.99974 5.33242Z" fill="white"/>
<path d="M4.99974 8.66576C5.36794 8.66576 5.66641 8.36729 5.66641 7.99909C5.66641 7.63089 5.36794 7.33242 4.99974 7.33242C4.63154 7.33242 4.33307 7.63089 4.33307 7.99909C4.33307 8.36729 4.63154 8.66576 4.99974 8.66576Z" fill="white"/>
<path d="M4.99974 11.9991C5.36794 11.9991 5.66641 11.7006 5.66641 11.3324C5.66641 10.9642 5.36794 10.6658 4.99974 10.6658C4.63154 10.6658 4.33307 10.9642 4.33307 11.3324C4.33307 11.7006 4.63154 11.9991 4.99974 11.9991Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

7
public/images/icons/videoSourceManagement.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.40039 3.00045C1.40039 2.1168 2.11674 1.40045 3.00039 1.40045H13.0004C13.8841 1.40045 14.6004 2.11681 14.6004 3.00045V13.0005C14.6004 13.8841 13.8841 14.6005 13.0004 14.6005H3.00039C2.11674 14.6005 1.40039 13.8841 1.40039 13.0005V3.00045ZM3.00039 2.60045C2.77948 2.60045 2.60039 2.77954 2.60039 3.00045V13.0005C2.60039 13.2214 2.77947 13.4005 3.00039 13.4005H13.0004C13.2213 13.4005 13.4004 13.2214 13.4004 13.0005V3.00045C13.4004 2.77954 13.2213 2.60045 13.0004 2.60045H3.00039Z" fill="white"/>
<path d="M6.53372 6.79344C6.71937 6.68626 6.94808 6.68626 7.13373 6.79344L10.6337 8.81417C10.8194 8.92135 10.9337 9.11943 10.9337 9.33379C10.9337 9.54815 10.8194 9.74622 10.6337 9.8534L7.13373 11.8741C6.94808 11.9813 6.71937 11.9813 6.53372 11.8741C6.34808 11.767 6.23372 11.5689 6.23372 11.3545V7.31305C6.23372 7.09869 6.34808 6.90062 6.53372 6.79344ZM7.43372 8.35229V10.3153L9.13373 9.33379L7.43372 8.35229Z" fill="white"/>
<path d="M1.40039 5.00045C1.40039 4.66908 1.66902 4.40045 2.00039 4.40045H14.0004C14.3318 4.40045 14.6004 4.66908 14.6004 5.00045C14.6004 5.33183 14.3318 5.60045 14.0004 5.60045H2.00039C1.66902 5.60045 1.40039 5.33183 1.40039 5.00045Z" fill="white"/>
<path d="M11.3332 1.50122C11.6089 1.68504 11.6834 2.05756 11.4996 2.33327L9.49962 5.33327C9.31581 5.60899 8.94329 5.6835 8.66757 5.49968C8.39185 5.31587 8.31735 4.94335 8.50116 4.66763L10.5012 1.66763C10.685 1.39192 11.0575 1.31741 11.3332 1.50122Z" fill="white"/>
<path d="M7.33321 1.50122C7.60893 1.68504 7.68343 2.05756 7.49962 2.33327L5.49962 5.33327C5.31581 5.60899 4.94329 5.6835 4.66757 5.49968C4.39185 5.31587 4.31735 4.94335 4.50116 4.66763L6.50116 1.66763C6.68497 1.39192 7.05749 1.31741 7.33321 1.50122Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

13
public/images/icons/white_list.svg
Unescape Escape View File

@ -0,0 +1,13 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12707_25317)">
<path d="M0 6C0 9.31364 2.68636 12 6 12C9.31364 12 12 9.31364 12 6C12 2.68636 9.31364 0 6 0C2.68636 0 0 2.68636 0 6Z" fill="#52C41A"/>
<path d="M7.63614 2.72656C7.98754 2.72658 8.32537 2.86226 8.57917 3.10529C8.83298 3.34832 8.98316 3.67995 8.99841 4.03102L8.99978 4.0902V5.45384H8.45432V4.0902C8.45433 3.88151 8.3746 3.68069 8.23143 3.52886C8.08826 3.37702 7.89248 3.28562 7.68414 3.27338L7.63614 3.27202H4.09069C3.88199 3.27201 3.68118 3.35174 3.52934 3.49491C3.3775 3.63808 3.28611 3.83386 3.27387 4.0422L3.27251 4.0902V8.45383C3.27249 8.66253 3.35223 8.86334 3.4954 9.01518C3.63857 9.16702 3.83435 9.25841 4.04269 9.27065L4.09069 9.27202H5.45432V9.81747H4.09069C3.73929 9.81745 3.40146 9.68178 3.14766 9.43875C2.89385 9.19571 2.74367 8.86408 2.72841 8.51302L2.72705 8.45383V4.0902C2.72707 3.7388 2.86274 3.40097 3.10578 3.14717C3.34881 2.89336 3.68044 2.74318 4.03151 2.72793L4.09069 2.72656H7.63614Z" fill="white"/>
<path d="M7.63614 5.72656C8.14246 5.72656 8.62805 5.9277 8.98607 6.28572C9.3441 6.64375 9.54523 7.12933 9.54523 7.63565C9.54523 8.14198 9.3441 8.62756 8.98607 8.98558C8.62805 9.34361 8.14246 9.54474 7.63614 9.54474C7.12982 9.54474 6.64423 9.34361 6.28621 8.98558C5.92819 8.62756 5.72705 8.14198 5.72705 7.63565C5.72705 7.12933 5.92819 6.64375 6.28621 6.28572C6.64423 5.9277 7.12982 5.72656 7.63614 5.72656ZM7.63614 6.27202C7.27448 6.27202 6.92764 6.41569 6.67191 6.67142C6.41617 6.92715 6.27251 7.27399 6.27251 7.63565C6.27251 7.99731 6.41617 8.34416 6.67191 8.59989C6.92764 8.85562 7.27448 8.99929 7.63614 8.99929C7.9978 8.99929 8.34465 8.85562 8.60038 8.59989C8.85611 8.34416 8.99978 7.99731 8.99978 7.63565C8.99978 7.27399 8.85611 6.92715 8.60038 6.67142C8.34465 6.41569 7.9978 6.27202 7.63614 6.27202Z" fill="white"/>
<path d="M3.81836 4.63672H6.54563V5.04581H3.81836V4.63672ZM3.81836 6.54581H5.182V6.9549H3.81836V6.54581ZM9.097 6.9159L7.55418 8.45872L7.40963 8.31417L7.34472 8.37881L6.57345 7.60754L6.86254 7.31845L7.48981 7.9449L8.80763 6.62681L9.097 6.9159Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_12707_25317">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

5
public/images/icons/whitelist.svg
Unescape Escape View File

@ -0,0 +1,5 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.80236 5.93344C7.49431 5.67224 7.14927 5.45812 6.77848 5.29805C7.27431 4.99232 7.65686 4.53317 7.86805 3.99029C8.07924 3.44741 8.10754 2.85045 7.94865 2.29003C7.78976 1.7296 7.45237 1.23632 6.98768 0.885064C6.52299 0.533805 5.95638 0.34375 5.37387 0.34375C4.79136 0.34375 4.22476 0.533805 3.76007 0.885064C3.29538 1.23632 2.95798 1.7296 2.79909 2.29003C2.64021 2.85045 2.66851 3.44741 2.8797 3.99029C3.09089 4.53317 3.47343 4.99232 3.96927 5.29805C2.25301 6.02927 1.01416 8.05977 1.01416 10.446C1.01416 10.5375 1.05054 10.6254 1.1153 10.6901C1.18006 10.7549 1.2679 10.7913 1.35948 10.7913H5.67603C5.40497 10.347 5.24508 9.84391 5.20991 9.32466C5.17475 8.80542 5.26535 8.28535 5.47404 7.80859C5.68272 7.33182 6.00333 6.91243 6.40866 6.586C6.81399 6.25956 7.29207 6.03571 7.80236 5.93344Z" fill="#52C41A"/>
<path d="M10.2403 7.3061C9.88408 6.95018 9.43028 6.70788 8.93633 6.60982C8.44237 6.51175 7.93043 6.56234 7.46522 6.75517C7.00001 6.948 6.60241 7.27443 6.32268 7.69319C6.04295 8.11194 5.89365 8.60423 5.89365 9.10783C5.89365 9.61142 6.04295 10.1037 6.32268 10.5225C6.60241 10.9412 7.00001 11.2677 7.46522 11.4605C7.93043 11.6533 8.44237 11.7039 8.93633 11.6058C9.43028 11.5078 9.88408 11.2655 10.2403 10.9096C10.7179 10.4315 10.9861 9.7835 10.9861 9.10783C10.9861 8.43216 10.7179 7.78412 10.2403 7.3061ZM9.76812 10.4373C9.46048 10.7456 9.05546 10.9376 8.6221 10.9806C8.18875 11.0237 7.75387 10.9151 7.39159 10.6734C7.02931 10.4318 6.76206 10.0719 6.63539 9.65527C6.50872 9.23861 6.53046 8.79091 6.69692 8.38848C6.86338 7.98606 7.16425 7.65382 7.54824 7.44838C7.93223 7.24295 8.37559 7.17705 8.80273 7.2619C9.22988 7.34675 9.61438 7.57711 9.89069 7.91372C10.167 8.25032 10.318 8.67234 10.318 9.10783C10.3188 9.35478 10.2705 9.59941 10.1761 9.82761C10.0817 10.0558 9.94306 10.263 9.76812 10.4373Z" fill="#52C41A"/>
<path d="M9.84754 8.3533C9.7828 8.28872 9.6951 8.25245 9.60366 8.25245C9.51222 8.25245 9.42451 8.28872 9.35977 8.3533L8.11488 9.612L7.52265 9.01546C7.45753 8.95324 7.37068 8.91893 7.28062 8.91984C7.19056 8.92074 7.10442 8.9568 7.04057 9.02032C6.97672 9.08383 6.94021 9.16978 6.93882 9.25983C6.93743 9.34988 6.97128 9.43691 7.03315 9.50236L7.66251 10.1369C7.72172 10.1965 7.79213 10.2438 7.8697 10.2761C7.94726 10.3083 8.03044 10.3249 8.11445 10.3249C8.19846 10.3249 8.28164 10.3083 8.3592 10.2761C8.43676 10.2438 8.50718 10.1965 8.56639 10.1369L9.85358 8.84193C9.8853 8.80946 9.9103 8.77106 9.92716 8.72893C9.94402 8.68679 9.95241 8.64174 9.95185 8.59636C9.95129 8.55098 9.94179 8.50615 9.92389 8.46445C9.90599 8.42274 9.88005 8.38497 9.84754 8.3533Z" fill="#52C41A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

10
src/components/MenuBar/index.less
Unescape Escape View File

@ -1,4 +1,4 @@
@menubar_ThemeColor: #004fb2;
@menubar_ThemeColor: #011434;
.menubar_wrap {
display: flex;
// flex: 1;
@ -13,10 +13,14 @@
.ant-menu-dark > .ant-menu.ant-menu-inline .ant-menu-sub.ant-menu-inline {
background-color: @menubar_ThemeColor;
}
.ant-menu-dark .ant-menu-item,
.ant-menu-dark > .ant-menu .ant-menu-item {
padding-left: 20px !important;
}
.ant-menu-dark .ant-menu-item-selected,
.ant-menu-dark > .ant-menu .ant-menu-item-selected {
color: @menubar_ThemeColor;
background: rgba(255, 255, 255, 0.9);
// color: @menubar_ThemeColor;
background: rgba(0, 79, 178, 1);
border-radius: 4px;
}
.menu_top {

4
src/enums/status.ts
Unescape Escape View File

@ -28,6 +28,10 @@ export const alarmVideoAnalysis: Record<string, any>[] = [
label: '多人聚集告警',
key: '2',
},
{
label: '敏感时间段告警',
key: '3',
},
];
// 分布式设备状态

2
src/global.css
Unescape Escape View File

@ -279,7 +279,7 @@ a.ant-dropdown-trigger {
padding-inline: 6px;
}
.gn .ant-list .ant-list-pagination {
margin-block-start: 10px;
margin-block-start: 24px;
}
.gn .ant-table-wrapper table tr th.ant-table-selection-column,
.gn .ant-table-wrapper table tr td.ant-table-selection-column,

30
src/pages/Offline/InvolvedUploadList/components/ImageWithPopover.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import { postUploadRecognition } from '@/services/realTime/involved';
import { CloseCircleOutlined, EllipsisOutlined } from '@ant-design/icons';
import { CloseCircleOutlined, EllipsisOutlined, StarFilled } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Image, Popover, message } from 'antd';
import React, { useState } from 'react';
@ -58,11 +58,14 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
};
return (
<div style={{ position: 'relative', boxSizing: 'border-box', width: 130, height: 130 }}>
<div style={{ position: 'relative', boxSizing: 'border-box', width: 120, height: 120 }}>
<Image
style={{ borderRadius: '4px 0 0 4px' }}
width={'100%'}
height={'100%'}
style={{
border: classify === 1 ? '2px solid #FAAD14' : 'none',
borderRadius: 4,
}}
width={120}
height={120}
preview={false}
src={src}
/>
@ -90,25 +93,26 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
</Popover>
)}
{/* {involved.state && (
{classify === 1 && (
<div
style={{
position: 'absolute',
top: 0,
right: 0,
width: 64,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px'
lineHeight: '24px',
}}
>
<StarFilled style={{ marginRight: 4 }} />
重点关注
</div>
)} */}
)}
</div>
);
};

70
src/pages/Offline/InvolvedUploadList/index.tsx
Unescape Escape View File

@ -9,8 +9,6 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
import { CheckboxProps } from 'antd/lib/checkbox';
import DatePicker, { DatePickerProps } from 'antd/lib/date-picker';
import moment from 'moment';
import Alarm_list_bg from '../../../../public/Alarm_list_bg.png';
import Involved_jiaobiao from '../../../../public/images/involved/involved_jiaobiao.png';
import { ReactComponent as NoData } from '../../../../public/images/no_data.svg';
import ImageWithPopover from './components/ImageWithPopover';
import InvolvedDetails from './components/InvolvedDetails';
@ -148,15 +146,12 @@ const InvolvedUploadList: React.FC = () => {
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
// padding: 20,
justifyContent: 'flex-start',
height: 130,
background: `url(${Alarm_list_bg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative',
justifyContent: 'center',
padding: 16,
height: 256,
background: '#FAFCFF',
// backgroundImage: 'url(../../../../public/images/involved/involved_jiaobiao.png)',
}}
onClick={() => {
@ -180,12 +175,13 @@ const InvolvedUploadList: React.FC = () => {
></ImageWithPopover>
<div
style={{
marginLeft: 16,
marginTop: 12,
height: 110,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
color: '#666',
fontSize: 12,
}}
>
{/* <div>
@ -202,7 +198,7 @@ const InvolvedUploadList: React.FC = () => {
首次识别:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{moment(record.analyse_time_first).format('YYYY-MM-DD hh:mm:ss')}
@ -210,7 +206,7 @@ const InvolvedUploadList: React.FC = () => {
</div>
<div
style={{
width: '250px',
width: '185px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -219,7 +215,7 @@ const InvolvedUploadList: React.FC = () => {
来源文件:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.video_name_first}
@ -229,7 +225,7 @@ const InvolvedUploadList: React.FC = () => {
最后识别:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{moment(record.analyse_time).format('YYYY-MM-DD hh:mm:ss')}
@ -237,7 +233,7 @@ const InvolvedUploadList: React.FC = () => {
</div>
<div
style={{
width: '250px',
width: '185px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -246,18 +242,18 @@ const InvolvedUploadList: React.FC = () => {
来源文件:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.video_name}
</span>
</div>
</div>
{record.classify === 1 && (
{/* {record.classify === 1 && (
<div style={{ position: 'absolute', top: 0, right: 0 }}>
<img src={Involved_jiaobiao} />
</div>
)}
)} */}
</div>
</ProCard>
),
@ -361,10 +357,9 @@ const InvolvedUploadList: React.FC = () => {
>
<div
style={{
padding: '16px 0 12px',
// display: 'flex',
// justifyContent: 'space-between',
// alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div style={{ paddingBottom: 16 }}>
@ -398,14 +393,31 @@ const InvolvedUploadList: React.FC = () => {
重置
</Button>
</div>
<Checkbox
onChange={onChangeCheckbox}
<div
style={{
fontSize: 16,
boxSizing: 'border-box',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 146,
height: 32,
background: 'rgba(0,79,178,0.1)',
borderRadius: 4,
border: '1px solid rgba(0,79,178,1)',
fontSize: 14,
}}
>
仅显示重点关注
</Checkbox>
<Checkbox
onChange={onChangeCheckbox}
style={
{
// fontSize: 16,
}
}
>
仅显示重点关注
</Checkbox>
</div>
</div>
<ProList<any>
className="gn"
@ -452,7 +464,7 @@ const InvolvedUploadList: React.FC = () => {
}}
showActions="hover"
rowSelection={false}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 5, xxl: 6 }}
metas={{
type: {
// 不展示在筛选项

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

@ -76,7 +76,7 @@
// height: 172px;
max-height: 760px;
margin-bottom: 24px;
padding: 16px 0 16px 16px;
padding: 16px 0 0 16px;
overflow: scroll;
background: #fbfcff;
border: 1px dashed #dcdcdc;

3
src/pages/Offline/OfflineAlarmList/components/AlarmDetails.tsx
Unescape Escape View File

@ -88,6 +88,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
if (props.warning_type === '1') {
console.log('props.values?.warning_type1');
setInvolved(props.values.person_list[0][2]);
} else if (props.warning_type === '3') {
console.log('props.values?.warning_type1');
setInvolved(props.values.person_list[0][2]);
} else {
console.log('props.values?.warning_type2');
setInvolvedInfo([...props.values.person_list]);

34
src/pages/Offline/OfflineAlarmList/components/ImageSinglePopover.tsx
Unescape Escape View File

@ -1,7 +1,8 @@
import { EyeOutlined, StarFilled } from '@ant-design/icons';
import Icon, { EyeOutlined, StarFilled } from '@ant-design/icons';
import { Image } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { ReactComponent as Whitelist } from '../../../../../public/images/icons/whitelist.svg';
interface ImageSinglePopoverProps {
src: string;
@ -83,7 +84,8 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
>
<Image
style={{
border: involved === 1 ? '2px solid #FAAD14' : 'none',
border:
involved === 1 ? '2px solid #FAAD14' : involved === 2 ? '2px solid #52C41A' : 'none',
borderRadius: 4,
}}
width={140}
@ -127,13 +129,13 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
<div
style={{
position: 'absolute',
top: 0,
right: 0,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
@ -143,6 +145,26 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
重点关注
</div>
)}
{involved === 2 && (
<div
style={{
position: 'absolute',
top: 2,
right: 2,
width: 80,
height: 24,
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#52C41A',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
}}
>
<Icon component={Whitelist} style={{ marginInlineEnd: 4 }} />
白名单
</div>
)}
</div>
);
};

31
src/pages/Offline/OfflineAlarmList/components/ImageWithPopover.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import {
import Icon, {
CloseCircleOutlined,
EllipsisOutlined,
EyeOutlined,
@ -8,6 +8,7 @@ import {
import { Button, Image, Popover } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { ReactComponent as Whitelist } from '../../../../../public/images/icons/whitelist.svg';
interface ImageWithPopoverProps {
src: string;
@ -156,13 +157,13 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
<div
style={{
position: 'absolute',
top: 0,
right: 0,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
@ -172,6 +173,26 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
重点关注
</div>
)}
{involved === 2 && (
<div
style={{
position: 'absolute',
top: 2,
right: 2,
width: 80,
height: 24,
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#52C41A',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
}}
>
<Icon component={Whitelist} style={{ marginInlineEnd: 4 }} />
白名单
</div>
)}
</div>
);
};

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

@ -1,6 +1,6 @@
import { alarmVideoAnalysis } from '@/enums/status';
import { PageContainer, ProCard, ProList } from '@ant-design/pro-components';
import { Button, DatePicker, Image } from 'antd';
import { Button, DatePicker, Image, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { proTablePaginationOptions } from '../../../../config/defaultTable';
// import DeviceStatusCard from './components/DeviceStatusCard';
@ -14,6 +14,7 @@ import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import Alarm_list_bg from '../../../../public/Alarm_list_bg.png';
import { ReactComponent as AlarmSubscript } from '../../../../public/images/icons/alarmSubscript.svg';
import { ReactComponent as NoData } from '../../../../public/images/no_data.svg';
import AlarmDetails from './components/AlarmDetails';
// import dayjs from 'dayjs';
@ -53,7 +54,7 @@ const OfflineAlarmList: React.FC = () => {
const [dataTestList, setdataTestList] = useState<any>([]);
const [tab, setTab] = useState<string>(alarmVideoAnalysis[0].key);
// const [tabs, setTabs] = useState<any>([]);
const [tabs, setTabs] = useState<any>([]);
const [importDate, setImportDate] = useState<any>(null);
const [innerDate, setInnerDate] = useState<any>(null);
@ -66,12 +67,12 @@ const OfflineAlarmList: React.FC = () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
initList(key);
};
// const getTabs = () => {
// // if (alarmVideoAnalysis.length) {
// // setTab(alarmVideoAnalysis[0].key);
// // }
// setTabs(alarmVideoAnalysis);
// };
const getTabs = () => {
// if (alarmVideoAnalysis.length) {
// setTab(alarmVideoAnalysis[0].key);
// }
setTabs(alarmVideoAnalysis);
};
const [tabFlag, settabFlag] = useState<any>([]);
const pollServer = () => {
postUploadWarningStatistics({})
@ -85,6 +86,9 @@ const OfflineAlarmList: React.FC = () => {
})
.catch(() => {});
};
useEffect(() => {
getTabs();
}, []);
useEffect(() => {
pollServer();
}, []);
@ -114,13 +118,15 @@ const OfflineAlarmList: React.FC = () => {
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
// padding: 20,
justifyContent: 'flex-start',
paddingTop: 16,
justifyContent: 'center',
background: `url(${Alarm_list_bg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
height: 130,
height: 234,
}}
onClick={() => {
console.log('11111111111111111');
@ -130,65 +136,58 @@ const OfflineAlarmList: React.FC = () => {
setCurrentRow(record);
}}
>
<Image width={130} height={130} preview={false} src={record.picture_path[0]} />
<Image
width={140}
height={140}
style={{
borderRadius: 4,
}}
preview={false}
src={record.picture_path[0]}
/>
<div
style={{
marginLeft: 16,
paddingTop: 12,
height: 110,
// position: 'relative',
display: 'flex',
width: '100%',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
color: '#666',
}}
>
<div>
{/* 告警名称:{' '} */}
<span
style={{
color: '#333',
fontWeight: 'bold',
}}
>
{record.warning_name}
</span>
</div>
<div
style={{
width: '250px',
width: '100%',
padding: '0 16px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'center',
}}
>
来源视频:{' '}
{/* 来源视频:{' '} */}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.origin}
</span>
</div>
<div>
发现时间:{' '}
<span
style={{
color: '#333',
}}
>
{moment(record.trigger_time).format('YYYY-MM-DD HH:mm:ss')}
</span>
</div>
<div>
时间定位:{' '}
<span
style={{
color: '#333',
}}
>
{record.video_start}/{record.video_length}
</span>
<div
style={{
width: '100%',
height: 32,
background: '#BCD2F8',
textAlign: 'center',
lineHeight: '32px',
color: '#004FB2',
}}
>
{/* <span>{formatTimeByDateType(record.trigger_time)}</span> */}
<span>{moment(record.trigger_time).format('YYYY-MM-DD HH:mm:ss')}</span>
</div>
</div>
{record.is_checked === 0 && (
@ -196,14 +195,16 @@ const OfflineAlarmList: React.FC = () => {
style={{
display: 'inline-block',
position: 'absolute',
top: '10px',
right: '10px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
top: '0px',
right: '0px',
width: '16px',
height: '16px',
// background: '#E80D0D',
// borderRadius: '50%',
}}
/>
>
<AlarmSubscript />
</span>
)}
</div>
</ProCard>
@ -307,7 +308,40 @@ const OfflineAlarmList: React.FC = () => {
changeProjectTab(key);
}}
></Tabs> */}
<div>
<div style={{ paddingInline: 16, height: 46, background: '#FFF', borderRadius: 4 }}>
<Tabs
activeKey={tab}
items={tabs.map((item: any, index: any) => {
const tabLabel = (
<div className="tab-label">
{item.label}
{tabFlag?.[index] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '10px',
right: '5px',
width: '8px',
height: '8px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</div>
);
return {
label: tabLabel,
key: item.key,
};
})}
onChange={(key) => {
changeProjectTab(key);
}}
></Tabs>
</div>
{/* <div>
<Button
style={{ height: 32, borderRadius: 20 }}
type={tab === '1' ? 'primary' : 'default'}
@ -377,7 +411,7 @@ const OfflineAlarmList: React.FC = () => {
/>
)}
</Button>
</div>
</div> */}
<div style={{ padding: '16px 0' }}>
选择导入时间：
<DatePicker
@ -480,7 +514,7 @@ const OfflineAlarmList: React.FC = () => {
}}
showActions="hover"
rowSelection={false}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 5, xxl: 6 }}
metas={{
type: {
// 不展示在筛选项

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

@ -75,7 +75,7 @@
// height: 172px;
max-height: 760px;
margin-bottom: 24px;
padding: 16px 0 16px 16px;
padding: 16px 0 0 16px;
overflow: scroll;
background: #fbfcff;
border: 1px dashed #dcdcdc;

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

@ -57,6 +57,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
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 if (props.warning_type === '3') {
console.log('props.values?.warning_type1');
setInvolved(props.values.person_list[0][2]);
} else {
console.log('props.values?.warning_type2');
setInvolvedInfo([...props.values.person_list]);

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

@ -1,7 +1,8 @@
import { EyeOutlined, StarFilled } from '@ant-design/icons';
import Icon, { EyeOutlined, StarFilled } from '@ant-design/icons';
import { Image } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { ReactComponent as Whitelist } from '../../../../../public/images/icons/whitelist.svg';
interface ImageSinglePopoverProps {
src: string;
@ -84,7 +85,8 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
>
<Image
style={{
border: involved === 1 ? '2px solid #FAAD14' : 'none',
border:
involved === 1 ? '2px solid #FAAD14' : involved === 2 ? '2px solid #52C41A' : 'none',
borderRadius: 4,
}}
width={140}
@ -128,13 +130,13 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
<div
style={{
position: 'absolute',
top: 0,
right: 0,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
@ -144,6 +146,26 @@ const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved,
重点关注
</div>
)}
{involved === 2 && (
<div
style={{
position: 'absolute',
top: 2,
right: 2,
width: 80,
height: 24,
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#52C41A',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
}}
>
<Icon component={Whitelist} style={{ marginInlineEnd: 4 }} />
白名单
</div>
)}
</div>
);
};

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

@ -1,4 +1,4 @@
import {
import Icon, {
CloseCircleOutlined,
EllipsisOutlined,
EyeOutlined,
@ -8,6 +8,7 @@ import {
import { Button, Image, Popover } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { ReactComponent as Whitelist } from '../../../../../public/images/icons/whitelist.svg';
interface ImageWithPopoverProps {
src: string;
@ -106,7 +107,8 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
>
<Image
style={{
border: involved === 1 ? '2px solid #FAAD14' : 'none',
border:
involved === 1 ? '2px solid #FAAD14' : involved === 2 ? '2px solid #52C41A' : 'none',
borderRadius: 4,
}}
width={140}
@ -152,13 +154,13 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
<div
style={{
position: 'absolute',
top: 0,
right: 0,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
@ -168,6 +170,26 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
重点关注
</div>
)}
{involved === 2 && (
<div
style={{
position: 'absolute',
top: 2,
right: 2,
width: 80,
height: 24,
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#52C41A',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px',
}}
>
<Icon component={Whitelist} style={{ marginInlineEnd: 4 }} />
白名单
</div>
)}
</div>
);
};

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

@ -1,20 +1,22 @@
import { alarmRulesEnums } from '@/enums/status';
import { PageContainer, ProCard, ProList } from '@ant-design/pro-components';
import { Button, Image, Select } from 'antd';
import { Button, Image, Select, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { proTablePaginationOptions } from '../../../../config/defaultTable';
// import DeviceStatusCard from './components/DeviceStatusCard';
// import CreateForm from './components/CreateForm';
import { useMoment } from '@/hooks/useMoment';
// import { useMoment } from '@/hooks/useMoment';
import {
postAlarmList,
postAlarmListIschecked,
postWarningStatistics,
} from '@/services/realTime/alarmlist';
import Alarm_list_bg from '../../../../public/Alarm_list_bg.png';
import { ReactComponent as AlarmSubscript } from '../../../../public/images/icons/alarmSubscript.svg';
import { ReactComponent as NoData } from '../../../../public/images/no_data.svg';
import AlarmDetails from './components/AlarmDetails';
// import { useLocation } from '@umijs/max';
import moment from 'moment';
import './components/AlarmDetails.less';
/**
@ -37,7 +39,7 @@ import './components/AlarmDetails.less';
// };
// eslint-disable-next-line react-hooks/rules-of-hooks
const { formatTimeByDateType } = useMoment();
// const { formatTimeByDateType } = useMoment();
const AlarmList: React.FC = () => {
/**
@ -114,7 +116,7 @@ const AlarmList: React.FC = () => {
pollServer();
console.log(selectOptions);
}, []);
// const [tabs, setTabs] = useState<any>([]);
const [tabs, setTabs] = useState<any>([]);
const changeProjectTab = (key: string) => {
setTab(key);
console.log(key, 'setTab');
@ -124,6 +126,12 @@ const AlarmList: React.FC = () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
initList(key);
};
const getTabs = () => {
setTabs(alarmRulesEnums);
};
useEffect(() => {
getTabs();
}, []);
const handleUpdateModal = () => {
if (updateModalOpen) {
@ -151,13 +159,15 @@ const AlarmList: React.FC = () => {
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
// padding: 20,
justifyContent: 'flex-start',
paddingTop: 16,
justifyContent: 'center',
background: `url(${Alarm_list_bg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
height: 130,
height: 234,
}}
onClick={() => {
console.log(index, 'index');
@ -168,57 +178,49 @@ const AlarmList: React.FC = () => {
setCurrentRow(record);
}}
>
<Image width={130} height={130} preview={false} src={record.picture_path[0]} />
<Image
width={140}
height={140}
style={{
borderRadius: 4,
}}
preview={false}
src={record.picture_path[0]}
/>
<div
style={{
marginLeft: 16,
paddingTop: 12,
height: 110,
display: 'flex',
width: '100%',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
color: '#666',
}}
>
<div>
{/* 告警名称:{' '} */}
<span
style={{
color: '#333',
fontWeight: 'bold',
}}
>
{record.warning_name}
</span>
</div>
<div>
来源设备:{' '}
{/* 来源设备:{' '} */}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.device_name}
</span>
</div>
<div>
触发时间:{' '}
<span
style={{
color: '#333',
}}
>
{formatTimeByDateType(record.trigger_time)}
</span>
</div>
<div>
设备地址:{' '}
<span
style={{
color: '#333',
}}
>
{record.device_address}
</span>
<div
style={{
width: '100%',
height: 32,
background: '#BCD2F8',
textAlign: 'center',
lineHeight: '32px',
color: '#004FB2',
}}
>
{/* <span>{formatTimeByDateType(record.trigger_time)}</span> */}
<span>{moment(record.trigger_time).format('YYYY-MM-DD HH:mm:ss')}</span>
</div>
</div>
{record.is_checked === 0 && (
@ -226,14 +228,16 @@ const AlarmList: React.FC = () => {
style={{
display: 'inline-block',
position: 'absolute',
top: '10px',
right: '10px',
width: '10px',
height: '10px',
background: '#E80D0D',
borderRadius: '50%',
top: '0px',
right: '0px',
width: '16px',
height: '16px',
// background: '#E80D0D',
// borderRadius: '50%',
}}
/>
>
<AlarmSubscript />
</span>
)}
</div>
</ProCard>
@ -362,7 +366,48 @@ const AlarmList: React.FC = () => {
重置
</Button>
</div>
<div style={{ marginBottom: 12 }}>
<div
style={{
paddingInline: 16,
height: 46,
background: '#FFF',
borderRadius: 4,
marginBottom: 16,
}}
>
<Tabs
activeKey={tab}
items={tabs.map((item: any, index: any) => {
const tabLabel = (
<div className="tab-label">
{item.label}
{tabFlag?.[index] && (
<span
style={{
display: 'inline-block',
position: 'absolute',
top: '10px',
right: '5px',
width: '8px',
height: '8px',
background: '#E80D0D',
borderRadius: '50%',
}}
/>
)}
</div>
);
return {
label: tabLabel,
key: item.key,
};
})}
onChange={(key) => {
changeProjectTab(key);
}}
></Tabs>
</div>
{/* <div style={{ marginBottom: 12 }}>
<Button
style={{ height: 32, borderRadius: 20 }}
type={tab === '1' ? 'primary' : 'default'}
@ -432,7 +477,7 @@ const AlarmList: React.FC = () => {
/>
)}
</Button>
</div>
</div> */}
<ProList<any>
className="gn"
ghost={true}
@ -505,7 +550,7 @@ const AlarmList: React.FC = () => {
}}
showActions="hover"
rowSelection={false}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 5, xxl: 6 }}
metas={{
type: {
// 不展示在筛选项

26
src/pages/RealTime/InvolvedList/components/ImageWithPopover.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import { postRecognition } from '@/services/realTime/involved';
import { CloseCircleOutlined, EllipsisOutlined } from '@ant-design/icons';
import { CloseCircleOutlined, EllipsisOutlined, StarFilled } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Image, Popover, message } from 'antd';
import React, { useState } from 'react';
@ -59,9 +59,12 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
};
return (
<div style={{ position: 'relative', boxSizing: 'border-box', width: 130, height: 130 }}>
<div style={{ position: 'relative', boxSizing: 'border-box', width: 120, height: 120 }}>
<Image
style={{ borderRadius: '4px 0 0 4px' }}
style={{
borderRadius: '4px',
border: classify === 1 ? '2px solid #FAAD14' : 'none',
}}
width={'100%'}
height={'100%'}
preview={false}
@ -91,25 +94,26 @@ const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({
</Popover>
)}
{/* {involved.state && (
{classify === 1 && (
<div
style={{
position: 'absolute',
top: 0,
right: 0,
width: 64,
top: 2,
right: 2,
width: 80,
height: 24,
background: '#FAAD14',
background: 'rgba(0,0,0,0.6)',
borderRadius: '0px 4px 0px 4px',
color: '#FFF',
color: '#FAAD14',
fontSize: 12,
textAlign: 'center',
lineHeight: '24px'
lineHeight: '24px',
}}
>
<StarFilled style={{ marginRight: 4 }} />
重点关注
</div>
)} */}
)}
</div>
);
};

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

@ -11,8 +11,6 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
import { CheckboxProps } from 'antd/lib/checkbox';
import { DatePickerProps } from 'antd/lib/date-picker';
import moment from 'moment';
import Alarm_list_bg from '../../../../public/Alarm_list_bg.png';
import Involved_jiaobiao from '../../../../public/images/involved/involved_jiaobiao.png';
import { ReactComponent as NoData } from '../../../../public/images/no_data.svg';
import ImageWithPopover from './components/ImageWithPopover';
import InvolvedDetails from './components/InvolvedDetails';
@ -176,15 +174,12 @@ const InvolvedList: React.FC = () => {
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
// padding: 20,
justifyContent: 'flex-start',
height: 130,
background: `url(${Alarm_list_bg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative',
justifyContent: 'center',
padding: 16,
height: 256,
background: '#FAFCFF',
// backgroundImage: 'url(../../../../public/images/involved/involved_jiaobiao.png)',
}}
onClick={() => {
@ -208,19 +203,20 @@ const InvolvedList: React.FC = () => {
></ImageWithPopover>
<div
style={{
marginLeft: 16,
marginTop: 12,
height: 110,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
color: '#666',
fontSize: 12,
}}
>
<div>
首次识别:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{moment(record.appear_time_first).format('YYYY-MM-DD hh:mm:ss')}
@ -228,7 +224,7 @@ const InvolvedList: React.FC = () => {
</div>
<div
style={{
width: '250px',
width: '185px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -237,7 +233,7 @@ const InvolvedList: React.FC = () => {
来源设备:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.device_name_first}
@ -247,7 +243,7 @@ const InvolvedList: React.FC = () => {
最后识别:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{moment(record.appear_time).format('YYYY-MM-DD hh:mm:ss')}
@ -255,7 +251,7 @@ const InvolvedList: React.FC = () => {
</div>
<div
style={{
width: '250px',
width: '185px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -264,18 +260,18 @@ const InvolvedList: React.FC = () => {
来源设备:{' '}
<span
style={{
color: '#333',
color: '#000',
}}
>
{record.device_name}
</span>
</div>
</div>
{record.classify === 1 && (
{/* {record.classify === 1 && (
<div style={{ position: 'absolute', top: 0, right: 0 }}>
<img src={Involved_jiaobiao} />
</div>
)}
)} */}
</div>
</ProCard>
),
@ -392,10 +388,10 @@ const InvolvedList: React.FC = () => {
>
<div
style={{
paddingBottom: 12,
// display: 'flex',
// justifyContent: 'space-between',
// alignItems: 'center',
// paddingBottom: 12,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div style={{ paddingBottom: 16 }}>
@ -438,14 +434,30 @@ const InvolvedList: React.FC = () => {
重置
</Button>
</div>
<Checkbox
onChange={onChangeCheckbox}
<div
style={{
fontSize: 16,
boxSizing: 'border-box',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 146,
height: 32,
background: 'rgba(0,79,178,0.1)',
borderRadius: 4,
border: '1px solid rgba(0,79,178,1)',
// fontSize: 14
}}
>
仅显示重点关注
</Checkbox>
<Checkbox
onChange={onChangeCheckbox}
style={{
fontSize: 14,
color: '#004FB2',
}}
>
仅显示重点关注
</Checkbox>
</div>
</div>
<ProList<any>
className="gn"
@ -519,7 +531,7 @@ const InvolvedList: React.FC = () => {
}}
showActions="hover"
rowSelection={false}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
grid={{ gutter: 16, xs: 1, md: 2, lg: 2, xl: 5, xxl: 6 }}
metas={{
type: {
// 不展示在筛选项

18
src/utils/FixMenuItemIcon.tsx
Unescape Escape View File

@ -40,6 +40,18 @@ import {
import { MenuDataItem } from '@ant-design/pro-layout';
import { ReactComponent as OffLine } from '../../public/images/icons/off_line.svg';
import { ReactComponent as RealTime } from '../../public/images/icons/real_time.svg';
/** 告警列表 */
import { ReactComponent as AlarmList } from '../../public/images/icons/alarmList.svg';
/** 设备管理 */
import { ReactComponent as DeviceManagement } from '../../public/images/icons/deviceManagement.svg';
/** 规则设置 */
import { ReactComponent as RuleSetting } from '../../public/images/icons/ruleSetting.svg';
/** 识别分类 */
import { ReactComponent as Recognition } from '../../public/images/icons/recognition.svg';
/** 记录汇总 */
import { ReactComponent as RecordSummary } from '../../public/images/icons/recordSummary.svg';
/** 视频源管理 */
import { ReactComponent as VideoSourceManagement } from '../../public/images/icons/videoSourceManagement.svg';
const iconMap: any = {
CarOutlined: <CarOutlined />,
@ -68,6 +80,12 @@ const iconMap: any = {
StarFilled: <StarFilled />,
RealTime: <RealTime />,
OffLine: <OffLine />,
AlarmList: <AlarmList />,
DeviceManagement: <DeviceManagement />,
RuleSetting: <RuleSetting />,
Recognition: <Recognition />,
RecordSummary: <RecordSummary />,
VideoSourceManagement: <VideoSourceManagement />,
};
// FIX从接口获取菜单时icon为string类型
const fixMenuItemIcon = (menus: MenuDataItem[]): MenuDataItem[] => {

14
testData/menuData.ts
Unescape Escape View File

@ -24,14 +24,14 @@ export const mockGetMenuData = {
path: '/realTime',
key: '1',
name: 'realTime',
icon: 'RealTime',
icon: '',
component: '',
title: '实时分析',
access: 'canReadMenu',
routes: [
{
component: 'RealTime/InvolvedList',
icon: '',
icon: 'RecordSummary',
key: '101',
name: 'realTime-involved-list',
path: '/realTime/involved-list',
@ -41,7 +41,7 @@ export const mockGetMenuData = {
},
{
component: 'RealTime/AlarmList',
icon: '',
icon: 'AlarmList',
key: '102',
name: 'realTime-alarm-list',
path: '/realTime/alarm-list',
@ -59,7 +59,7 @@ export const mockGetMenuData = {
// },
{
component: 'RealTime/DeviceList',
icon: '',
icon: 'DeviceManagement',
key: '104',
name: 'realTime-device-list',
path: '/realTime/device-list',
@ -72,13 +72,13 @@ export const mockGetMenuData = {
path: '/offline',
key: '2',
name: 'offline',
icon: 'OffLine',
icon: '',
component: '',
title: '离线分析',
routes: [
{
component: 'Offline/InvolvedUploadList',
icon: '',
icon: 'RecordSummary',
key: '201',
name: 'offline-involved-list-upload',
path: '/offline/involved-list-upload',
@ -87,7 +87,7 @@ export const mockGetMenuData = {
},
{
component: 'Offline/OfflineAlarmList',
icon: '',
icon: 'AlarmList',
key: '202',
name: 'offline-alarm-list',
path: '/offline/alarm-list',

Write Preview
Loading…
Cancel
Save