diff --git a/src/assets/business_Emergency/bgDrill2.svg b/src/assets/business_Emergency/bgDrill2.svg new file mode 100644 index 0000000..434205e --- /dev/null +++ b/src/assets/business_Emergency/bgDrill2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/business_Emergency/dutylog1.svg b/src/assets/business_Emergency/dutylog1.svg new file mode 100644 index 0000000..65f578e --- /dev/null +++ b/src/assets/business_Emergency/dutylog1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/dutylog2.svg b/src/assets/business_Emergency/dutylog2.svg new file mode 100644 index 0000000..7140a82 --- /dev/null +++ b/src/assets/business_Emergency/dutylog2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/dutylog3.svg b/src/assets/business_Emergency/dutylog3.svg new file mode 100644 index 0000000..806d5aa --- /dev/null +++ b/src/assets/business_Emergency/dutylog3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_Emergency/dutylog4.svg b/src/assets/business_Emergency/dutylog4.svg new file mode 100644 index 0000000..4705979 --- /dev/null +++ b/src/assets/business_Emergency/dutylog4.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/pages/business_emergencyDuty/components/DutyLog.js b/src/pages/business_emergencyDuty/components/DutyLog.js index 65eadb5..20f2d92 100644 --- a/src/pages/business_emergencyDuty/components/DutyLog.js +++ b/src/pages/business_emergencyDuty/components/DutyLog.js @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Input, Button, Select, message, Modal, Tag } from 'antd'; import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import ReactECharts from 'echarts-for-react'; import StandardTable from '@/components/StandardTable'; import styles from './DutyLog.less'; @@ -90,16 +91,73 @@ const DutyLog = () => { }, ]; - // 事件类型分布数据 + const [chartReady, setChartReady] = useState(false); + + // 确保DOM准备好后再渲染图表 + useEffect(() => { + const timer = setTimeout(() => { + setChartReady(true); + }, 100); + return () => clearTimeout(timer); + }, []); + + // 事件类型分布数据（根据图片描述调整颜色） const eventTypeData = [ - { name: '交通事故', value: 10, color: '#52C41A' }, - { name: '自然灾害', value: 15, color: '#FAAD14' }, - { name: '社会安全', value: 8, color: '#FF7A45' }, - { name: '电力故障', value: 5, color: '#F5222D' }, - { name: '火灾隐患', value: 3, color: '#CF1322' }, - { name: '设施故障', value: 7, color: '#1890FF' }, + { name: '交通事故', value: 10, color: '#4A90E2' }, // 浅蓝色 + { name: '自然灾害', value: 15, color: '#52C41A' }, // 绿色 + { name: '社会安全', value: 8, color: '#FAAD14' }, // 黄色 + { name: '电力故障', value: 5, color: '#FF7A45' }, // 橙色 + { name: '火灾隐患', value: 3, color: '#F5222D' }, // 红色 + { name: '设施故障', value: 7, color: '#1890FF' }, // 深蓝色 ]; + // ECharts 玫瑰图配置（空心饼图） + const roseChartOption = { + tooltip: { + trigger: 'item', + formatter: '{b}: {c} ({d}%)' + }, + legend: { + show: false + }, + series: [ + { + type: 'pie', + radius: ['40%', '70%'], // 空心饼图：内半径40%，外半径70% + center: ['50%', '50%'], + roseType: 'area', // 玫瑰图类型：使用面积表示数值 + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 4, + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: false + }, + labelLine: { + show: false + }, + emphasis: { + label: { + show: true, + fontSize: 14, + fontWeight: 'bold' + }, + scale: true, + scaleSize: 5 + }, + data: eventTypeData.map(item => ({ + value: item.value, + name: item.name, + itemStyle: { + color: item.color + } + })) + } + ] + }; + // 表格列配置 const columns = [ { @@ -226,45 +284,17 @@ const DutyLog = () => { ); }; - // 渲染饼图（简化版） - const renderPieChart = () => { - const total = eventTypeData.reduce((sum, item) => sum + item.value, 0); - let currentAngle = 0; - + // 渲染玫瑰图（使用 ECharts） + const renderRoseChart = () => { return (
- - {eventTypeData.map((item, index) => { - const percentage = (item.value / total) * 100; - const angle = (percentage / 100) * 360; - const largeArc = percentage > 50 ? 1 : 0; - - const x1 = 100 + 60 * Math.cos((currentAngle * Math.PI) / 180); - const y1 = 100 + 60 * Math.sin((currentAngle * Math.PI) / 180); - const x2 = 100 + 60 * Math.cos(((currentAngle + angle) * Math.PI) / 180); - const y2 = 100 + 60 * Math.sin(((currentAngle + angle) * Math.PI) / 180); - - const path = [ - `M 100 100`, - `L ${x1} ${y1}`, - `A 60 60 0 ${largeArc} 1 ${x2} ${y2}`, - `Z`, - ].join(' '); - - currentAngle += angle; - - return ( - - ); - })} - - + {chartReady && ( + + )}
{eventTypeData.map((item, index) => (
@@ -281,9 +311,10 @@ const DutyLog = () => { }; return ( -
+
{/* A块：顶部统计卡片 */}
+
@@ -330,7 +361,7 @@ const DutyLog = () => {
事件类型分布
- {renderPieChart()} + {renderRoseChart()}
{/* 下部分：最近值班日志 */} diff --git a/src/pages/business_emergencyDuty/components/DutyLog.less b/src/pages/business_emergencyDuty/components/DutyLog.less index decbbc8..e03d7dc 100644 --- a/src/pages/business_emergencyDuty/components/DutyLog.less +++ b/src/pages/business_emergencyDuty/components/DutyLog.less @@ -1,6 +1,6 @@ -.container { - padding: 20px; - background: #F5F5F5; +.containerDutyLog { + padding: 15px 0px 15px 5px; + background: transparent; height: 100vh; display: flex; flex-direction: column; @@ -9,20 +9,23 @@ // A块：顶部统计卡片区域 .blockA { width: 100%; - height: 20%; + height: 18%; display: flex; gap: 16px; margin-bottom: 16px; - background: linear-gradient(135deg, #E6F4FF 0%, #BAE0FF 100%); + background: url('@/assets/business_Emergency/bgDrill2.svg') no-repeat center center; + background-size: 100% 100%; border-radius: 2px; padding: 16px; .statCard { flex: 1; height: 100%; - background: #FFFFFF; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%); border-radius: 2px; - padding: 20px; + border: 2px solid #FFFFFF; + // padding: 20px; + margin: 0px 20px 0px 5px ; display: flex; align-items: center; gap: 16px; @@ -165,10 +168,13 @@ align-items: center; gap: 24px; width: 100%; + height: 200px; + position: relative; - .pieSvg { - width: 160px; - height: 160px; + // ECharts 图表容器 + >div:first-child { + width: 200px; + height: 200px; flex-shrink: 0; } @@ -366,7 +372,7 @@ } } - .ant-table-thead > tr > th { + .ant-table-thead>tr>th { background: #F5F5FA; font-weight: 500; color: #333333; @@ -375,13 +381,13 @@ border-radius: 0; } - .ant-table-tbody > tr > td { + .ant-table-tbody>tr>td { color: #666666; font-size: 13px; text-align: center; } - .ant-table-tbody > tr:hover > td { + .ant-table-tbody>tr:hover>td { background: #F5F5F5; } @@ -409,4 +415,4 @@ } } } -} +} \ No newline at end of file