main
wangyunfei 1 month ago
parent 1badf05ea3
commit 2ba9e32ea7

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.85 4.6875H9.15C7.71783 4.6875 6.34432 5.25643 5.33162 6.26912C4.31893 7.28182 3.75 8.65533 3.75 10.0875V39.7875C3.75 40.4966 3.88967 41.1988 4.16105 41.854C4.43243 42.5091 4.83019 43.1044 5.33162 43.6059C5.83306 44.1073 6.42835 44.5051 7.08351 44.7765C7.73867 45.0478 8.44086 45.1875 9.15 45.1875H38.85C40.2822 45.1875 41.6557 44.6186 42.6684 43.6059C43.6811 42.5932 44.25 41.2197 44.25 39.7875V10.0875C44.25 8.65533 43.6811 7.28182 42.6684 6.26912C41.6557 5.25643 40.2822 4.6875 38.85 4.6875Z" fill="#0065F3"/>
<path opacity="0.4" d="M50.1 15.9375H20.4C18.9678 15.9375 17.5943 16.5064 16.5816 17.5191C15.5689 18.5318 15 19.9053 15 21.3375V51.0375C15 52.4697 15.5689 53.8432 16.5816 54.8559C17.5943 55.8686 18.9678 56.4375 20.4 56.4375H50.1C51.5322 56.4375 52.9057 55.8686 53.9184 54.8559C54.9311 53.8432 55.5 52.4697 55.5 51.0375V21.3375C55.5 19.9053 54.9311 18.5318 53.9184 17.5191C52.9057 16.5064 51.5322 15.9375 50.1 15.9375Z" fill="#82B6FA"/>
<path opacity="0.4" d="M20.4 16.4062H50.1C51.4078 16.4062 52.6621 16.9258 53.5869 17.8506C54.5117 18.7754 55.0312 20.0297 55.0312 21.3375V51.0375C55.0312 52.3453 54.5117 53.5996 53.5869 54.5244C52.6621 55.4492 51.4078 55.9688 50.1 55.9688H20.4C19.0922 55.9688 17.8379 55.4492 16.9131 54.5244C15.9883 53.5996 15.4688 52.3453 15.4688 51.0375V21.3375C15.4688 20.0297 15.9883 18.7754 16.9131 17.8506C17.8379 16.9258 19.0922 16.4062 20.4 16.4062ZM55.9688 21.3375C55.9688 19.781 55.3504 18.2883 54.2498 17.1877C53.1492 16.0871 51.6565 15.4688 50.1 15.4688H20.4C18.8435 15.4688 17.3508 16.0871 16.2502 17.1877C15.1496 18.2883 14.5312 19.781 14.5312 21.3375V51.0375C14.5313 52.594 15.1496 54.0867 16.2502 55.1873C17.3508 56.2879 18.8435 56.9062 20.4 56.9062H50.1C51.6565 56.9062 53.1492 56.2879 54.2498 55.1873C55.3504 54.0867 55.9688 52.594 55.9688 51.0375V21.3375Z" fill="white"/>
<path d="M33.4556 48.5658C34.1381 48.9689 34.6744 48.6998 34.6744 47.8833V38.3892C34.6744 37.5727 34.1259 36.7561 33.4556 36.353L25.5937 31.4658C24.9112 31.1977 24.375 31.4658 24.375 32.1483V41.6442C24.375 42.4598 24.9234 43.2773 25.5937 43.6795L33.4556 48.5667V48.5658ZM26.8125 28.4798C26.13 28.883 26.13 29.4305 26.8125 29.8327L34.5525 34.7198C35.235 35.123 36.1856 35.123 36.8559 34.8539L44.595 30.9173C45.2775 30.5152 45.2775 29.9667 44.595 29.5645L36.4416 24.6773C35.8931 24.2742 34.8084 24.2742 34.1381 24.6773L26.8125 28.4798ZM36.8559 47.8833C36.8559 48.6998 37.4044 48.968 38.0747 48.5658L45.8137 44.6292C46.4963 44.227 47.0325 43.4105 47.0325 42.5939V33.0877C47.0325 32.2702 46.4841 32.002 45.8137 32.4042L38.0747 36.3417C37.3922 36.7439 36.8559 37.5605 36.8559 38.3761V47.8833Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.85 4.6875H9.15C7.71783 4.6875 6.34432 5.25643 5.33162 6.26912C4.31893 7.28182 3.75 8.65533 3.75 10.0875V39.7875C3.75 40.4966 3.88967 41.1988 4.16105 41.854C4.43243 42.5091 4.83019 43.1044 5.33162 43.6059C5.83306 44.1073 6.42835 44.5051 7.08351 44.7765C7.73867 45.0478 8.44086 45.1875 9.15 45.1875H38.85C40.2822 45.1875 41.6557 44.6186 42.6684 43.6059C43.6811 42.5932 44.25 41.2197 44.25 39.7875V10.0875C44.25 8.65533 43.6811 7.28182 42.6684 6.26912C41.6557 5.25643 40.2822 4.6875 38.85 4.6875Z" fill="#0065F3"/>
<path opacity="0.4" d="M50.2328 15.9375H20.5328C19.1006 15.9375 17.7271 16.5064 16.7144 17.5191C15.7017 18.5318 15.1328 19.9053 15.1328 21.3375V51.0375C15.1328 52.4697 15.7017 53.8432 16.7144 54.8559C17.7271 55.8686 19.1006 56.4375 20.5328 56.4375H50.2328C51.665 56.4375 53.0385 55.8686 54.0512 54.8559C55.0639 53.8432 55.6328 52.4697 55.6328 51.0375V21.3375C55.6328 19.9053 55.0639 18.5318 54.0512 17.5191C53.0385 16.5064 51.665 15.9375 50.2328 15.9375Z" fill="#82B6FA"/>
<path d="M49.1649 44.6469L37.6046 24.6288C37.407 24.2895 37.124 24.008 36.7838 23.8123C36.4437 23.6166 36.0582 23.5137 35.6659 23.5137C35.2736 23.5137 34.8881 23.6166 34.548 23.8123C34.2078 24.008 33.9248 24.2895 33.7272 24.6288L22.1825 44.6469C21.9886 44.977 21.8878 45.3536 21.8907 45.7366C21.8936 46.1196 22.0003 46.4946 22.1992 46.8218C22.3982 47.1489 22.682 47.4159 23.0205 47.5943C23.359 47.7726 23.7395 47.8558 24.1215 47.8348H47.2273C47.6093 47.8558 47.9898 47.7726 48.3283 47.5943C48.6668 47.4159 48.9506 47.1489 49.1496 46.8218C49.3486 46.4946 49.4552 46.1196 49.4581 45.7366C49.4611 45.3536 49.3602 44.977 49.1663 44.6469H49.1649ZM35.7535 44.982C35.3055 44.9815 34.876 44.8028 34.5595 44.4853C34.2431 44.1678 34.0655 43.7374 34.066 43.2888C34.0665 42.8402 34.245 42.4102 34.5621 42.0934C34.8793 41.7765 35.3091 41.5988 35.7572 41.5993C35.979 41.5996 36.1986 41.6435 36.4035 41.7288C36.6084 41.814 36.7945 41.9388 36.9511 42.096C37.1078 42.2532 37.2321 42.4398 37.3167 42.6451C37.4014 42.8504 37.4449 43.0704 37.4446 43.2925C37.4444 43.5146 37.4005 43.7345 37.3153 43.9396C37.2302 44.1447 37.1056 44.331 36.9485 44.4879C36.7915 44.6448 36.6051 44.7692 36.4001 44.854C36.1951 44.9387 35.9753 44.9822 35.7535 44.982ZM37.4695 38.3483C37.469 38.797 37.2906 39.2272 36.9735 39.5444C36.6564 39.8615 36.2265 40.0396 35.7783 40.0396C35.5597 40.0383 35.3435 39.9932 35.1425 39.907C34.9415 39.8208 34.7598 39.6952 34.608 39.5376C34.4563 39.3799 34.3376 39.1935 34.2588 38.9893C34.1801 38.785 34.143 38.5671 34.1497 38.3483V31.2478C34.143 31.0289 34.1801 30.811 34.2588 30.6068C34.3376 30.4025 34.4563 30.2161 34.608 30.0585C34.7598 29.9009 34.9415 29.7753 35.1425 29.6891C35.3435 29.6028 35.5597 29.5577 35.7783 29.5564C36.2265 29.5564 36.6564 29.7346 36.9735 30.0517C37.2906 30.3688 37.469 30.799 37.4695 31.2478V38.3483Z" fill="white"/>
<path opacity="0.4" d="M20.4 16.4062H50.1C51.4078 16.4062 52.6621 16.9258 53.5869 17.8506C54.5117 18.7754 55.0312 20.0297 55.0312 21.3375V51.0375C55.0312 52.3453 54.5117 53.5996 53.5869 54.5244C52.6621 55.4492 51.4078 55.9688 50.1 55.9688H20.4C19.0922 55.9688 17.8379 55.4492 16.9131 54.5244C15.9883 53.5996 15.4688 52.3453 15.4688 51.0375V21.3375C15.4688 20.0297 15.9883 18.7754 16.9131 17.8506C17.8379 16.9258 19.0922 16.4062 20.4 16.4062ZM55.9688 21.3375C55.9688 19.781 55.3504 18.2883 54.2498 17.1877C53.1492 16.0871 51.6565 15.4688 50.1 15.4688H20.4C18.8435 15.4688 17.3508 16.0871 16.2502 17.1877C15.1496 18.2883 14.5312 19.781 14.5312 21.3375V51.0375C14.5313 52.594 15.1496 54.0867 16.2502 55.1873C17.3508 56.2879 18.8435 56.9062 20.4 56.9062H50.1C51.6565 56.9062 53.1492 56.2879 54.2498 55.1873C55.3504 54.0867 55.9688 52.594 55.9688 51.0375V21.3375Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.85 4.6875H9.15C7.71783 4.6875 6.34432 5.25643 5.33162 6.26912C4.31893 7.28182 3.75 8.65533 3.75 10.0875V39.7875C3.75 40.4966 3.88967 41.1988 4.16105 41.854C4.43243 42.5091 4.83019 43.1044 5.33162 43.6059C5.83306 44.1073 6.42835 44.5051 7.08351 44.7765C7.73867 45.0478 8.44086 45.1875 9.15 45.1875H38.85C40.2822 45.1875 41.6557 44.6186 42.6684 43.6059C43.6811 42.5932 44.25 41.2197 44.25 39.7875V10.0875C44.25 8.65533 43.6811 7.28182 42.6684 6.26912C41.6557 5.25643 40.2822 4.6875 38.85 4.6875Z" fill="#0065F3"/>
<path opacity="0.4" d="M50.1 15.9375H20.4C18.9678 15.9375 17.5943 16.5064 16.5816 17.5191C15.5689 18.5318 15 19.9053 15 21.3375V51.0375C15 52.4697 15.5689 53.8432 16.5816 54.8559C17.5943 55.8686 18.9678 56.4375 20.4 56.4375H50.1C51.5322 56.4375 52.9057 55.8686 53.9184 54.8559C54.9311 53.8432 55.5 52.4697 55.5 51.0375V21.3375C55.5 19.9053 54.9311 18.5318 53.9184 17.5191C52.9057 16.5064 51.5322 15.9375 50.1 15.9375Z" fill="#82B6FA"/>
<path d="M35.5 24C42.4037 24 48 29.5962 48 36.5C48 43.4037 42.4037 49 35.5 49C28.5962 49 23 43.4037 23 36.5C23 29.5962 28.5962 24 35.5 24ZM41.9275 31.02C41.6739 30.8065 41.3458 30.7025 41.0156 30.7309C40.6853 30.7592 40.3798 30.9176 40.1662 31.1712L33.0825 39.5875L30.8112 37.02L30.7 36.9075C30.4618 36.6925 30.1501 36.5772 29.8293 36.5857C29.5086 36.5942 29.2033 36.7257 28.9769 36.9529C28.7504 37.1802 28.6199 37.4859 28.6126 37.8067C28.6053 38.1275 28.7216 38.4389 28.9375 38.6762L32.17 42.33L32.2762 42.4363C32.401 42.5473 32.5468 42.6323 32.705 42.6861C32.8632 42.7398 33.0305 42.7614 33.1972 42.7494C33.3638 42.7374 33.5264 42.6921 33.6752 42.6162C33.8241 42.5403 33.9562 42.4353 34.0637 42.3075L42.08 32.7812L42.1725 32.655C42.3377 32.3994 42.404 32.0922 42.3589 31.7912C42.3138 31.4902 42.1604 31.216 41.9275 31.02Z" fill="white"/>
<path opacity="0.4" d="M20.4 16.4062H50.1C51.4078 16.4062 52.6621 16.9258 53.5869 17.8506C54.5117 18.7754 55.0312 20.0297 55.0312 21.3375V51.0375C55.0312 52.3453 54.5117 53.5996 53.5869 54.5244C52.6621 55.4492 51.4078 55.9688 50.1 55.9688H20.4C19.0922 55.9688 17.8379 55.4492 16.9131 54.5244C15.9883 53.5996 15.4688 52.3453 15.4688 51.0375V21.3375C15.4688 20.0297 15.9883 18.7754 16.9131 17.8506C17.8379 16.9258 19.0922 16.4062 20.4 16.4062ZM55.9688 21.3375C55.9688 19.781 55.3504 18.2883 54.2498 17.1877C53.1492 16.0871 51.6565 15.4688 50.1 15.4688H20.4C18.8435 15.4688 17.3508 16.0871 16.2502 17.1877C15.1496 18.2883 14.5312 19.781 14.5312 21.3375V51.0375C14.5313 52.594 15.1496 54.0867 16.2502 55.1873C17.3508 56.2879 18.8435 56.9062 20.4 56.9062H50.1C51.6565 56.9062 53.1492 56.2879 54.2498 55.1873C55.3504 54.0867 55.9688 52.594 55.9688 51.0375V21.3375Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1,18 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.85 4.6875H9.15C7.71783 4.6875 6.34432 5.25643 5.33162 6.26912C4.31893 7.28182 3.75 8.65533 3.75 10.0875V39.7875C3.75 40.4966 3.88967 41.1988 4.16105 41.854C4.43243 42.5091 4.83019 43.1044 5.33162 43.6059C5.83306 44.1073 6.42835 44.5051 7.08351 44.7765C7.73867 45.0478 8.44086 45.1875 9.15 45.1875H38.85C40.2822 45.1875 41.6557 44.6186 42.6684 43.6059C43.6811 42.5932 44.25 41.2197 44.25 39.7875V10.0875C44.25 8.65533 43.6811 7.28182 42.6684 6.26912C41.6557 5.25643 40.2822 4.6875 38.85 4.6875Z" fill="#0065F3"/>
<path opacity="0.4" d="M50.1 15.9375H20.4C18.9678 15.9375 17.5943 16.5064 16.5816 17.5191C15.5689 18.5318 15 19.9053 15 21.3375V51.0375C15 52.4697 15.5689 53.8432 16.5816 54.8559C17.5943 55.8686 18.9678 56.4375 20.4 56.4375H50.1C51.5322 56.4375 52.9057 55.8686 53.9184 54.8559C54.9311 53.8432 55.5 52.4697 55.5 51.0375V21.3375C55.5 19.9053 54.9311 18.5318 53.9184 17.5191C52.9057 16.5064 51.5322 15.9375 50.1 15.9375Z" fill="#82B6FA"/>
<g clip-path="url(#clip0_2365_25431)">
<g clip-path="url(#clip1_2365_25431)">
<path d="M35.5 23.8438C28.5104 23.8438 22.8438 29.5104 22.8438 36.5C22.8438 43.4896 28.5104 49.1562 35.5 49.1562C42.4896 49.1562 48.1562 43.4896 48.1562 36.5C48.1562 29.5104 42.4896 23.8438 35.5 23.8438ZM41.251 38.8018H34.35C33.7146 38.8018 33.1999 38.2871 33.1999 37.6517V29.5973C33.1999 29.2923 33.3211 28.9998 33.5368 28.7841C33.7524 28.5684 34.045 28.4472 34.35 28.4472C34.655 28.4472 34.9475 28.5684 35.1632 28.7841C35.3788 28.9998 35.5 29.2923 35.5 29.5973V36.5H41.2535C41.5588 36.5002 41.8514 36.6217 42.0671 36.8377C42.2827 37.0537 42.4038 37.3465 42.4036 37.6517C42.4033 37.9569 42.2819 38.2496 42.0659 38.4653C41.8499 38.6809 41.5571 38.802 41.2518 38.8018H41.251Z" fill="white"/>
</g>
</g>
<path opacity="0.4" d="M20.4 16.4062H50.1C51.4078 16.4062 52.6621 16.9258 53.5869 17.8506C54.5117 18.7754 55.0312 20.0297 55.0312 21.3375V51.0375C55.0312 52.3453 54.5117 53.5996 53.5869 54.5244C52.6621 55.4492 51.4078 55.9688 50.1 55.9688H20.4C19.0922 55.9688 17.8379 55.4492 16.9131 54.5244C15.9883 53.5996 15.4688 52.3453 15.4688 51.0375V21.3375C15.4688 20.0297 15.9883 18.7754 16.9131 17.8506C17.8379 16.9258 19.0922 16.4062 20.4 16.4062ZM55.9688 21.3375C55.9688 19.781 55.3504 18.2883 54.2498 17.1877C53.1492 16.0871 51.6565 15.4688 50.1 15.4688H20.4C18.8435 15.4688 17.3508 16.0871 16.2502 17.1877C15.1496 18.2883 14.5312 19.781 14.5312 21.3375V51.0375C14.5313 52.594 15.1496 54.0867 16.2502 55.1873C17.3508 56.2879 18.8435 56.9062 20.4 56.9062H50.1C51.6565 56.9062 53.1492 56.2879 54.2498 55.1873C55.3504 54.0867 55.9688 52.594 55.9688 51.0375V21.3375Z" fill="white"/>
<defs>
<clipPath id="clip0_2365_25431">
<rect width="27" height="27" fill="white" transform="translate(22 23)"/>
</clipPath>
<clipPath id="clip1_2365_25431">
<rect width="27" height="27" fill="white" transform="translate(22 23)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

@ -1,24 +1,17 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Button, Segmented, Tag } from 'antd'; import { Button, Segmented, Tag, Drawer, Form, Input, Select } from 'antd';
import { import { PlusOutlined } from '@ant-design/icons';
ExclamationCircleOutlined,
FolderOutlined,
FileTextOutlined,
PlusOutlined,
EditOutlined,
EyeOutlined
} from '@ant-design/icons';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import styles from './EventWarningManagement.less'; import styles from './EventWarningManagement.less';
// import bgMan1 from '@/assets/business_Emergency/bgMan1.svg';
import bgMan2 from '@/assets/business_Emergency/bgMan2.svg'; import bgMan2 from '@/assets/business_Emergency/bgMan2.svg';
import bgMan3 from '@/assets/business_Emergency/bgMan3.svg'; import bgMan3 from '@/assets/business_Emergency/bgMan3.svg';
import bgMan4 from '@/assets/business_Emergency/bgMan4.svg'; import bgMan4 from '@/assets/business_Emergency/bgMan4.svg';
import bgMan5 from '@/assets/business_Emergency/bgMan5.svg'; import bgMan5 from '@/assets/business_Emergency/bgMan5.svg';
const EventWarningManagement = () => { const EventWarningManagement = () => {
const [form] = Form.useForm();
const [drawerVisible, setDrawerVisible] = useState(false);
const [timeType, setTimeType] = useState('month'); const [timeType, setTimeType] = useState('month');
const lineChartRef = useRef(null); const lineChartRef = useRef(null);
const lineChartInstanceRef = useRef(null); const lineChartInstanceRef = useRef(null);
@ -442,8 +435,8 @@ const EventWarningManagement = () => {
width: 100, width: 100,
align: 'center', align: 'center',
render: (text) => { render: (text) => {
let color = "#00AAFA" let color = "#00AAFA";
let backgroundColor = "#DAF3FF" let backgroundColor = "#DAF3FF";
if (text === '处理中') { if (text === '处理中') {
color = '#FF8800'; color = '#FF8800';
backgroundColor = '#FFF3E9'; backgroundColor = '#FFF3E9';
@ -451,10 +444,9 @@ const EventWarningManagement = () => {
color = '#44BB5F'; color = '#44BB5F';
backgroundColor = '#D8F7DE'; backgroundColor = '#D8F7DE';
} }
return ( return (
<Tag style={{ color, backgroundColor, border: 'none' }}>{text}</Tag> <Tag style={{ color, backgroundColor, border: 'none' }}>{text}</Tag>
) );
} }
}, },
{ {
@ -462,15 +454,40 @@ const EventWarningManagement = () => {
key: 'action', key: 'action',
width: 140, width: 140,
align: 'center', align: 'center',
render: (_, record) => ( render: () => (
<div className={styles.actionButtons} style={{display:"flex", gap:"20px"}}> <div className={styles.actionButtons}>
<Button type="link" size="small" style={{color:"#2E4CD4"}}>编辑</Button> <Button type="link" size="small" style={{ color: "#2E4CD4" }}>编辑</Button>
<Button type="link" size="small" style={{color:"#2E4CD4"}}>查看</Button> <Button type="link" size="small" style={{ color: "#2E4CD4" }}>查看</Button>
</div> </div>
) )
} }
]; ];
// 显示添加预警抽屉
const showAddDrawer = () => {
setDrawerVisible(true);
};
// 关闭抽屉
const onCloseDrawer = () => {
setDrawerVisible(false);
form.resetFields();
};
// 提交表单
const handleSubmit = async () => {
try {
const values = await form.validateFields();
console.log('提交的表单数据:', values);
// TODO: 调用API提交数据
// 提交成功后关闭抽屉并刷新表格
onCloseDrawer();
// 刷新表格数据
} catch (error) {
console.error('表单验证失败:', error);
}
};
return ( return (
<div className={styles.container}> <div className={styles.container}>
{/* A块顶部统计区域 */} {/* A块顶部统计区域 */}
@ -549,7 +566,12 @@ const EventWarningManagement = () => {
<div className={styles.titleBar}></div> <div className={styles.titleBar}></div>
<div className={styles.titleText}>事件预警信息</div> <div className={styles.titleText}>事件预警信息</div>
</div> </div>
<Button type="primary" icon={<PlusOutlined />} className={styles.addButton}> <Button
type="primary"
icon={<PlusOutlined />}
className={styles.addButton}
onClick={showAddDrawer}
>
添加预警 添加预警
</Button> </Button>
</div> </div>
@ -561,6 +583,101 @@ const EventWarningManagement = () => {
/> />
</div> </div>
</div> </div>
{/* 添加事件预警抽屉 */}
<Drawer
title="添加事件预警"
placement="right"
onClose={onCloseDrawer}
open={drawerVisible}
width={400}
maskClosable={true}
className={styles.eventWarningDrawer}
headerStyle={{
backgroundColor: '#F6F7FF',
padding: '16px 24px'
}}
bodyStyle={{
color: '#333333',
padding: '24px'
}}
footer={
<div className={styles.drawerFooter}>
<Button
onClick={onCloseDrawer}
className={styles.drawerCancelBtn}
>
取消
</Button>
<Button
onClick={handleSubmit}
className={styles.drawerSubmitBtn}
>
提交
</Button>
</div>
}
>
<Form
form={form}
layout="vertical"
style={{ padding: 0 }}
>
<Form.Item
label="预警类型"
name="alertType"
rules={[{ required: true, message: '请选择预警类型' }]}
>
<Select placeholder="请选择预警类型">
<Select.Option value="气象预警">气象预警</Select.Option>
<Select.Option value="火灾隐患">火灾隐患</Select.Option>
<Select.Option value="疫情传播">疫情传播</Select.Option>
<Select.Option value="化工泄漏">化工泄漏</Select.Option>
<Select.Option value="安全事故">安全事故</Select.Option>
<Select.Option value="公共卫生">公共卫生</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="预警级别"
name="alertLevel"
rules={[{ required: true, message: '请选择预警级别' }]}
>
<Select placeholder="请选择预警级别">
<Select.Option value="高级">高级</Select.Option>
<Select.Option value="中级">中级</Select.Option>
<Select.Option value="低级">低级</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="来源渠道"
name="sourceChannel"
rules={[{ required: true, message: '请输入来源渠道' }]}
>
<Input placeholder="请输入来源渠道" />
</Form.Item>
<Form.Item
label="影响区域"
name="affectedArea"
rules={[{ required: true, message: '请输入影响区域' }]}
>
<Input placeholder="请输入影响区域" />
</Form.Item>
<Form.Item
label="预警内容"
name="alertContent"
rules={[{ required: true, message: '请输入预警内容' }]}
>
<Input.TextArea
placeholder="请输入预警内容..."
rows={6}
/>
</Form.Item>
</Form>
</Drawer>
</div> </div>
); );
}; };

@ -40,15 +40,12 @@
// a块左侧70% // a块左侧70%
.blockA_a { .blockA_a {
width: 70%; width: 70%;
padding: 0;
margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: url('~@/assets/business_Emergency/bgDrill3.svg') right center no-repeat, background: url('~@/assets/business_Emergency/bgDrill3.svg') right center no-repeat,
linear-gradient(170.5deg, #FFF5F4 6.87%, #FFFFFF 46.42%); linear-gradient(170.5deg, #FFF5F4 6.87%, #FFFFFF 46.42%);
background-size: contain, 100% 100%; background-size: contain, 100% 100%;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
width: 141;
gap: 15px; gap: 15px;
padding: 10px 15px; padding: 10px 15px;
box-sizing: border-box; box-sizing: border-box;
@ -66,11 +63,8 @@
// b块右侧30% // b块右侧30%
.blockA_b { .blockA_b {
flex: 1; flex: 1;
padding: 0;
margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// gap: 5px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%);
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
@ -132,14 +126,11 @@
// c块左侧70% // c块左侧70%
.blockB_c { .blockB_c {
width: 70%; width: 70%;
padding: 0;
margin: 0;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px 15px 0px 15px; padding: 5px 15px 0px 15px;
.chartHeader { .chartHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -149,10 +140,10 @@
.chartContent { .chartContent {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
.lineChart { .lineChart {
width: 100%; width: 100%;
height: 100%; height: 100%;
// min-height: 200px;
} }
} }
} }
@ -160,8 +151,6 @@
// d块右侧30% // d块右侧30%
.blockB_d { .blockB_d {
flex: 1; flex: 1;
padding: 0;
margin: 0;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -183,8 +172,6 @@
// C块底部表格区域高度撑满剩余 // C块底部表格区域高度撑满剩余
.blockC { .blockC {
flex: 1; flex: 1;
padding: 0;
margin: 0;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -239,4 +226,79 @@
} }
} }
} }
// 抽屉 Footer 样式
.drawerFooter {
text-align: right;
padding: 10px 0;
:global {
button.ant-btn {
&.drawerCancelBtn {
margin-right: 8px;
background-color: #B6BBD9 !important;
border-color: #B6BBD9 !important;
color: #fff !important;
&:hover,
&:focus {
background-color: #A5AAC7 !important;
border-color: #A5AAC7 !important;
color: #fff !important;
}
}
&.drawerSubmitBtn {
background-color: #2E4CD4 !important;
border-color: #2E4CD4 !important;
color: #fff !important;
&:hover,
&:focus {
background-color: #2540B8 !important;
border-color: #2540B8 !important;
color: #fff !important;
}
}
}
}
}
:global {
.eventWarningDrawer {
.ant-drawer-header {
background-color: #F6F7FF !important;
.ant-drawer-title {
color: #333333 !important;
}
}
.ant-drawer-body {
color: #333333;
.ant-form-item-label > label {
color: #333333 !important;
}
.ant-input,
.ant-select-selector {
color: #333333 !important;
}
.ant-input::placeholder {
color: #999999 !important;
}
.ant-select-selection-placeholder {
color: #999999 !important;
}
}
.ant-drawer-footer {
border-top: 1px solid #E5E5E5;
padding: 16px 24px;
}
}
}
} }

@ -9,8 +9,10 @@
// A块顶部统计卡片区域 // A块顶部统计卡片区域
.blockA { .blockA {
width: 100%; width: 100%;
height: 18%; height: 15%;
display: flex; display: flex;
align-items: center;
justify-content: center;
gap: 16px; gap: 16px;
margin-bottom: 16px; margin-bottom: 16px;
background: url('@/assets/business_Emergency/bgDrill2.svg') no-repeat center center; background: url('@/assets/business_Emergency/bgDrill2.svg') no-repeat center center;
@ -19,8 +21,8 @@
padding: 1 6px; padding: 1 6px;
.statCard { .statCard {
flex: 1; width:20%;
height: 100%; height: 80%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%);
border-radius: 2px; border-radius: 2px;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;

Loading…
Cancel
Save