diff --git a/src/assets/business_Emergency/bgDrill3.svg b/src/assets/business_Emergency/bgDrill3.svg new file mode 100644 index 0000000..30bff28 --- /dev/null +++ b/src/assets/business_Emergency/bgDrill3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/business_Emergency/bgMan2.svg b/src/assets/business_Emergency/bgMan2.svg new file mode 100644 index 0000000..3eb509d --- /dev/null +++ b/src/assets/business_Emergency/bgMan2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/business_Emergency/bgMan3.svg b/src/assets/business_Emergency/bgMan3.svg new file mode 100644 index 0000000..62db118 --- /dev/null +++ b/src/assets/business_Emergency/bgMan3.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/business_Emergency/bgMan4.svg b/src/assets/business_Emergency/bgMan4.svg new file mode 100644 index 0000000..1d6bd8d --- /dev/null +++ b/src/assets/business_Emergency/bgMan4.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/business_Emergency/bgMan5.svg b/src/assets/business_Emergency/bgMan5.svg new file mode 100644 index 0000000..5baa35f --- /dev/null +++ b/src/assets/business_Emergency/bgMan5.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.js b/src/pages/business_emergencyAccident/components/EventWarningManagement.js index 76d55f9..3a6500e 100644 --- a/src/pages/business_emergencyAccident/components/EventWarningManagement.js +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.js @@ -1,9 +1,9 @@ import React, { useState, useEffect, useRef } from 'react'; import { Button, Segmented, Tag } from 'antd'; -import { - ExclamationCircleOutlined, - FolderOutlined, - FileTextOutlined, +import { + ExclamationCircleOutlined, + FolderOutlined, + FileTextOutlined, PlusOutlined, EditOutlined, EyeOutlined @@ -12,6 +12,12 @@ import * as echarts from 'echarts'; import StandardTable from '@/components/StandardTable'; import styles from './EventWarningManagement.less'; +// import bgMan1 from '@/assets/business_Emergency/bgMan1.svg'; +import bgMan2 from '@/assets/business_Emergency/bgMan2.svg'; +import bgMan3 from '@/assets/business_Emergency/bgMan3.svg'; +import bgMan4 from '@/assets/business_Emergency/bgMan4.svg'; +import bgMan5 from '@/assets/business_Emergency/bgMan5.svg'; + const EventWarningManagement = () => { const [timeType, setTimeType] = useState('month'); const lineChartRef = useRef(null); @@ -92,16 +98,17 @@ const EventWarningManagement = () => { grid: { left: '3%', right: '4%', - top: '25%', + top: '15%', bottom: '3%', containLabel: true }, legend: { - data: ['气象灾害', '安全事故', '公共卫生', '社会安全'], - top: '5%', + data: ['气象灾害', '安全事故', '公共卫生'], + top: '0%', left: 'center', itemGap: 30, - icon: 'line', + itemWidth: 18, // 图例图标宽度 + itemHeight: 8, // 图例图标高度 textStyle: { color: '#666666', fontSize: 12 @@ -161,11 +168,11 @@ const EventWarningManagement = () => { itemStyle: { color: '#ffffff', borderColor: '#8979FF', - borderWidth: 2 + borderWidth: 1 }, lineStyle: { color: '#8979FF', - width: 2 + width: 1 }, areaStyle: { color: { @@ -185,9 +192,9 @@ const EventWarningManagement = () => { symbolKeepAspect: true, emphasis: { itemStyle: { - color: '#ffffff', + color: '#fff', borderColor: '#8979FF', - borderWidth: 2 + borderWidth: 1 } } }, @@ -199,11 +206,11 @@ const EventWarningManagement = () => { itemStyle: { color: '#ffffff', borderColor: '#FF928A', - borderWidth: 2 + borderWidth: 1 }, lineStyle: { color: '#FF928A', - width: 2 + width: 1 }, areaStyle: { color: { @@ -223,9 +230,9 @@ const EventWarningManagement = () => { symbolKeepAspect: true, emphasis: { itemStyle: { - color: '#ffffff', + color: '#fff', borderColor: '#FF928A', - borderWidth: 2 + borderWidth: 1 } } }, @@ -237,11 +244,11 @@ const EventWarningManagement = () => { itemStyle: { color: '#ffffff', borderColor: '#3CC3DF', - borderWidth: 2 + borderWidth: 1 }, lineStyle: { color: '#3CC3DF', - width: 2 + width: 1 }, areaStyle: { color: { @@ -261,9 +268,9 @@ const EventWarningManagement = () => { symbolKeepAspect: true, emphasis: { itemStyle: { - color: '#ffffff', + color: '#fff', borderColor: '#3CC3DF', - borderWidth: 2 + borderWidth: 1 } } } @@ -302,21 +309,23 @@ const EventWarningManagement = () => { const option = { legend: { orient: 'vertical', - right: 20, + right: 30, top: 'center', itemGap: 15, + itemWidth: 14, + itemHeight: 3, textStyle: { color: '#666666', fontSize: 12 }, - formatter: function(name) { + formatter: function (name) { return name; } }, series: [ { type: 'pie', - radius: ['40%', '70%'], + radius: ['45%', '75%'], center: ['35%', '50%'], avoidLabelOverlap: false, label: { @@ -326,10 +335,10 @@ const EventWarningManagement = () => { show: false }, data: [ - { value: 35, name: '气象灾害', itemStyle: { color: '#4B69F1' } }, - { value: 25, name: '社会安全', itemStyle: { color: '#44BB5F' } }, + { value: 65, name: '气象灾害', itemStyle: { color: '#4B69F1' } }, + { value: 10, name: '社会安全', itemStyle: { color: '#44BB5F' } }, { value: 20, name: '公共卫生', itemStyle: { color: '#A493FB' } }, - { value: 20, name: '社会安全', itemStyle: { color: '#FFD85A' } } + { value: 5, name: '安全事故', itemStyle: { color: '#FFD85A' } } ] } ] @@ -370,61 +379,68 @@ const EventWarningManagement = () => { title: '预警编号', dataIndex: 'alertId', key: 'alertId', - width: 180 + width: 180, + align: 'center' }, { title: '预警类型', dataIndex: 'alertType', key: 'alertType', - width: 120 - }, - { - title: '预警级别', - dataIndex: 'alertLevel', - key: 'alertLevel', - width: 100, - render: (text) => { - let color = '#ff4d4f'; - if (text === '中级') color = '#ff9800'; - if (text === '低级') color = '#36cfc9'; - return {text}; - } + width: 120, + align: 'center' }, { title: '来源渠道', dataIndex: 'sourceChannel', key: 'sourceChannel', - width: 150 + width: 150, + align: 'center' }, { title: '影响区域', dataIndex: 'affectedArea', key: 'affectedArea', - width: 180 + width: 180, + align: 'center' }, { title: '预警级别', dataIndex: 'alertLevelColor', key: 'alertLevelColor', width: 120, + align: 'center', render: (text) => { - let color = '#ff4d4f'; - if (text === '橙色预警') color = '#ff9800'; - if (text === '蓝色预警') color = '#1890ff'; - return {text}; + let color = '#FF3E48'; + let backgroundColor = '#FFE0E2'; + + if (text === '橙色预警') { + color = '#FF8800'; + backgroundColor = '#FFF3E9'; + } else if (text === '蓝色预警') { + color = '#00AAFA'; + backgroundColor = '#DAF3FF'; + } + + return ( + + {text} + + ); } }, { title: '预警时间', dataIndex: 'alertTime', key: 'alertTime', - width: 180 + width: 180, + align: 'center' }, { title: '状态', dataIndex: 'status', key: 'status', width: 100, + align: 'center', render: (text, record) => { let color = '#ff9800'; if (record.statusType === 'pending') color = '#36cfc9'; @@ -436,6 +452,7 @@ const EventWarningManagement = () => { title: '操作', key: 'action', width: 120, + align: 'center', render: (_, record) => (
@@ -456,16 +473,16 @@ const EventWarningManagement = () => {
今日预警统计
-
卡片1
-
卡片2
-
卡片3
+ + +
{/* b块：右侧30% */}
- 待处理指令 + 待处理指令
12
@@ -474,7 +491,7 @@ const EventWarningManagement = () => {
- 待审核上报 + 待审核上报
10
diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.less b/src/pages/business_emergencyAccident/components/EventWarningManagement.less index c54f2cf..8e54576 100644 --- a/src/pages/business_emergencyAccident/components/EventWarningManagement.less +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.less @@ -1,7 +1,7 @@ .container { width: 100%; height: 100vh; - padding: 0; + padding: 15px 0px 10px 5px; margin: 0; background-color: #f0f2f5; display: flex; @@ -15,16 +15,16 @@ gap: 8px; .titleBar { - width: 2px; + width: 3px; height: 16px; background-color: #2E4CD4; flex-shrink: 0; } .titleText { - font-size: 16px; - font-weight: bold; - color: #333333; + font-size: 15px; + font-weight: 450; + color: #333; } } @@ -33,9 +33,6 @@ height: 20%; padding: 0; margin: 0; - background-color: #ffffff; - border-radius: 8px; - // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; gap: 15px; box-sizing: border-box; @@ -47,24 +44,22 @@ margin: 0; display: flex; flex-direction: column; + background: url('~@/assets/business_Emergency/bgDrill3.svg') right center no-repeat, + linear-gradient(170.5deg, #FFF5F4 6.87%, #FFFFFF 46.42%); + background-size: contain, 100% 100%; + border: 2px solid #FFFFFF; + width: 141; gap: 15px; - padding: 20px; + padding: 10px 15px; box-sizing: border-box; .threeCards { display: flex; - gap: 15px; + align-items: center; + justify-content: center; + gap: 6%; + margin-right: 15%; flex: 1; - - .pinkCard { - flex: 1; - background-color: pink; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - min-height: 80px; - } } } @@ -75,19 +70,17 @@ margin: 0; display: flex; flex-direction: row; - gap: 15px; - padding: 20px; - box-sizing: border-box; + // gap: 5px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); + border: 2px solid #FFFFFF; + .imageTextCard { flex: 1; display: flex; align-items: center; - gap: 15px; + gap: 10px; padding: 20px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); - border-radius: 8px; - // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); .cardIcon { flex-shrink: 0; @@ -112,7 +105,7 @@ } .cardNumber { - font-size: 32px; + font-size: 30px; font-weight: bold; color: #333333; line-height: 1; @@ -142,28 +135,24 @@ padding: 0; margin: 0; background-color: #ffffff; - border-radius: 8px; - // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; - padding: 20px; - box-sizing: border-box; + padding: 5px 15px 0px 15px; + .chartHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 15px; } .chartContent { flex: 1; min-height: 0; - .lineChart { width: 100%; height: 100%; - min-height: 200px; + // min-height: 200px; } } } @@ -174,11 +163,9 @@ padding: 0; margin: 0; background-color: #ffffff; - border-radius: 8px; - // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; - padding: 20px; + padding: 10px 15px 0px 15px; box-sizing: border-box; .chartContent { @@ -188,7 +175,6 @@ .donutChart { width: 100%; height: 100%; - min-height: 200px; } } } @@ -200,22 +186,22 @@ padding: 0; margin: 0; background-color: #ffffff; - border-radius: 8px; - // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; - padding: 20px; - box-sizing: border-box; - min-height: 0; - + padding: 10px 15px 0px 15px; .tableHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: 10px; .addButton { border-radius: 4px; + background-color: #2E4CD4; + height: 30px; + display: flex; + align-items: center; + padding: 10px; } } @@ -225,9 +211,26 @@ min-height: 0; overflow: auto; + // 表头样式 + :global(.ant-table-thead > tr > th) { + background-color: #F5F5FA !important; + text-align: center; + color: #333333 !important; + font-size: 14px !important; + font-weight: 450 !important; + } + + // 表体样式 + :global(.ant-table-tbody > tr > td) { + color: #666666 !important; + font-size: 13px !important; + font-weight: 400 !important; + } + .actionButtons { display: flex; gap: 8px; + justify-content: center; :global(.ant-btn-link) { padding: 0;