jiangxucong
/
dq-emgms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ym

Browse Source
main
wangyunfei 1 month ago
parent dfc7634b7b
commit 5e367440cd
7 changed files with 169 additions and 98 deletions
Show Stats Download Patch File Download Diff File

14
src/assets/business_Emergency/bgDrill3.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 420 KiB

12
src/assets/business_Emergency/bgMan2.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

12
src/assets/business_Emergency/bgMan3.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 301 KiB

7
src/assets/business_Emergency/bgMan4.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<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="M33.8709 41.2488C34.1249 37.8908 36.8339 35.1536 40.1919 34.8714C41.49 34.7585 42.7034 35.0125 43.7757 35.4922C44.6505 35.9155 45.6663 35.2665 45.6663 34.307V27.7885C45.6663 26.0672 44.2554 24.6562 42.5341 24.6562H26.9292C25.2078 24.6562 23.7969 26.0672 23.7969 27.7885V44.1836C23.7969 45.9049 25.2078 47.3158 26.9292 47.3158H33.6734C34.6893 47.3158 35.3101 46.2153 34.8022 45.3123C34.0967 44.1553 33.7581 42.7444 33.8709 41.2488ZM32.6293 35.464H26.9574C26.4777 35.464 26.1108 35.0972 26.1108 34.6174C26.1108 34.1377 26.4777 33.7709 26.9574 33.7709H32.6293C33.109 33.7709 33.4759 34.1377 33.4759 34.6174C33.4759 35.0971 33.0808 35.464 32.6293 35.464ZM26.9574 30.4128C26.4777 30.4128 26.1108 30.046 26.1108 29.5663C26.1108 29.0866 26.4777 28.7197 26.9574 28.7197H37.6523C38.1319 28.7197 38.4988 29.0866 38.4988 29.5663C38.4988 30.046 38.1319 30.4128 37.6523 30.4128H26.9574Z" fill="white"/>
<path d="M40.842 36.4512C37.8791 36.4512 35.4805 38.8498 35.4805 41.8127C35.4805 44.7757 37.8791 47.1743 40.842 47.1743C43.805 47.1743 46.2036 44.7757 46.2036 41.8127C46.2036 38.878 43.805 36.4512 40.842 36.4512H40.842ZM43.0431 44.7757C42.8738 44.945 42.6763 45.0296 42.4505 45.0296C42.2248 45.0296 42.0272 44.945 41.8579 44.7757L40.2212 43.139C40.0519 42.9697 39.9672 42.7721 39.9672 42.5464V39.4988C39.9672 39.0191 40.3341 38.6522 40.8138 38.6522C41.2935 38.6522 41.6604 39.0191 41.6604 39.4988V42.1796L43.0431 43.5905C43.3817 43.9009 43.3817 44.4371 43.0431 44.7757Z" 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

6
src/assets/business_Emergency/bgMan5.svg
Unescape Escape View File

@ -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="M39.1445 41.7526H39.3906L40.3653 40.4815C38.9221 38.8829 39.0469 36.4161 40.644 34.9716C40.968 34.6786 41.3389 34.4421 41.7413 34.2721C42.0963 34.1428 42.4712 34.077 42.849 34.0775C42.9475 34.0775 43.0459 34.0816 43.1443 34.0898V26.8371C43.1762 25.9339 42.4724 25.1751 41.5703 25.1396H26.3289C25.4252 25.1731 24.7192 25.9326 24.751 26.8371V45.1277C24.7227 46.0299 25.4277 46.7856 26.3289 46.819H36.9317C36.9532 46.8194 36.9746 46.8152 36.9944 46.8067C36.7401 46.3677 36.6068 45.8691 36.608 45.3618V44.4787C36.5609 43.0266 37.694 41.8088 39.1445 41.7526ZM27.799 30.3322C27.8309 29.9138 28.163 29.5814 28.5811 29.5495H33.7182C34.1858 29.5851 34.536 29.9935 34.5004 30.4615C34.4685 30.88 34.1362 31.2124 33.7182 31.2443H28.581C28.1134 31.2087 27.7632 30.8003 27.799 30.3322ZM36.9538 40.4593C36.9257 40.8846 36.5873 41.2233 36.1624 41.2514H28.581C28.1131 41.2204 27.7588 40.8156 27.7897 40.3473C27.8178 39.922 28.1562 39.5833 28.581 39.5552H36.1624C36.6304 39.5861 36.9848 39.9909 36.9538 40.4593ZM28.581 36.2479C28.1134 36.2121 27.7632 35.8037 27.7989 35.3357C27.8308 34.9173 28.163 34.5849 28.581 34.5529H37.3464C37.814 34.5887 38.1642 34.997 38.1285 35.4651C38.0966 35.8835 37.7644 36.2159 37.3464 36.2479H28.581ZM47.7473 43.0202L47.7461 43.0239H46.8525L44.4427 40.1686C45.7598 39.7543 46.4917 38.3499 46.0778 37.0319C46.0732 37.0173 46.0685 37.0027 46.0636 36.9882C45.6989 35.9566 44.7214 35.2695 43.628 35.276C43.3495 35.2763 43.0728 35.3212 42.8084 35.409C41.4918 35.8225 40.7595 37.2259 41.1726 38.5435C41.1774 38.5588 41.1824 38.5742 41.1876 38.5895C41.3169 38.9608 41.5305 39.2972 41.8118 39.572C42.093 39.8469 42.4342 40.0528 42.8084 40.1735L40.4035 43.0338H39.51C38.69 43.0242 38.0175 43.6814 38.0073 44.5021V45.3926C38.0175 46.2133 38.69 46.8705 39.51 46.861H47.7472C48.5667 46.8692 49.2385 46.2127 49.25 45.3926V44.4984C49.2419 43.6752 48.5696 43.014 47.7473 43.0202Z" 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

113
src/pages/business_emergencyAccident/components/EventWarningManagement.js
Unescape Escape View File

@ -12,6 +12,12 @@ 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 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 EventWarningManagement = () => {
const [timeType, setTimeType] = useState('month'); const [timeType, setTimeType] = useState('month');
const lineChartRef = useRef(null); const lineChartRef = useRef(null);
@ -92,16 +98,17 @@ const EventWarningManagement = () => {
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
top: '25%', top: '15%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
legend: { legend: {
data: ['气象灾害', '安全事故', '公共卫生', '社会安全'], data: ['气象灾害', '安全事故', '公共卫生'],
top: '5%', top: '0%',
left: 'center', left: 'center',
itemGap: 30, itemGap: 30,
icon: 'line', itemWidth: 18, // 图例图标宽度
itemHeight: 8, // 图例图标高度
textStyle: { textStyle: {
color: '#666666', color: '#666666',
fontSize: 12 fontSize: 12
@ -161,11 +168,11 @@ const EventWarningManagement = () => {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#ffffff',
borderColor: '#8979FF', borderColor: '#8979FF',
borderWidth: 2 borderWidth: 1
}, },
lineStyle: { lineStyle: {
color: '#8979FF', color: '#8979FF',
width: 2 width: 1
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -185,9 +192,9 @@ const EventWarningManagement = () => {
symbolKeepAspect: true, symbolKeepAspect: true,
emphasis: { emphasis: {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#fff',
borderColor: '#8979FF', borderColor: '#8979FF',
borderWidth: 2 borderWidth: 1
} }
} }
}, },
@ -199,11 +206,11 @@ const EventWarningManagement = () => {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#ffffff',
borderColor: '#FF928A', borderColor: '#FF928A',
borderWidth: 2 borderWidth: 1
}, },
lineStyle: { lineStyle: {
color: '#FF928A', color: '#FF928A',
width: 2 width: 1
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -223,9 +230,9 @@ const EventWarningManagement = () => {
symbolKeepAspect: true, symbolKeepAspect: true,
emphasis: { emphasis: {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#fff',
borderColor: '#FF928A', borderColor: '#FF928A',
borderWidth: 2 borderWidth: 1
} }
} }
}, },
@ -237,11 +244,11 @@ const EventWarningManagement = () => {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#ffffff',
borderColor: '#3CC3DF', borderColor: '#3CC3DF',
borderWidth: 2 borderWidth: 1
}, },
lineStyle: { lineStyle: {
color: '#3CC3DF', color: '#3CC3DF',
width: 2 width: 1
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -261,9 +268,9 @@ const EventWarningManagement = () => {
symbolKeepAspect: true, symbolKeepAspect: true,
emphasis: { emphasis: {
itemStyle: { itemStyle: {
color: '#ffffff', color: '#fff',
borderColor: '#3CC3DF', borderColor: '#3CC3DF',
borderWidth: 2 borderWidth: 1
} }
} }
} }
@ -302,21 +309,23 @@ const EventWarningManagement = () => {
const option = { const option = {
legend: { legend: {
orient: 'vertical', orient: 'vertical',
right: 20, right: 30,
top: 'center', top: 'center',
itemGap: 15, itemGap: 15,
itemWidth: 14,
itemHeight: 3,
textStyle: { textStyle: {
color: '#666666', color: '#666666',
fontSize: 12 fontSize: 12
}, },
formatter: function(name) { formatter: function (name) {
return name; return name;
} }
}, },
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['45%', '75%'],
center: ['35%', '50%'], center: ['35%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
@ -326,10 +335,10 @@ const EventWarningManagement = () => {
show: false show: false
}, },
data: [ data: [
{ value: 35, name: '气象灾害', itemStyle: { color: '#4B69F1' } }, { value: 65, name: '气象灾害', itemStyle: { color: '#4B69F1' } },
{ value: 25, name: '社会安全', itemStyle: { color: '#44BB5F' } }, { value: 10, name: '社会安全', itemStyle: { color: '#44BB5F' } },
{ value: 20, name: '公共卫生', itemStyle: { color: '#A493FB' } }, { 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: '预警编号', title: '预警编号',
dataIndex: 'alertId', dataIndex: 'alertId',
key: 'alertId', key: 'alertId',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '预警类型', title: '预警类型',
dataIndex: 'alertType', dataIndex: 'alertType',
key: 'alertType', key: 'alertType',
width: 120 width: 120,
}, align: 'center'
{
title: '预警级别',
dataIndex: 'alertLevel',
key: 'alertLevel',
width: 100,
render: (text) => {
let color = '#ff4d4f';
if (text === '中级') color = '#ff9800';
if (text === '低级') color = '#36cfc9';
return <Tag color={color}>{text}</Tag>;
}
}, },
{ {
title: '来源渠道', title: '来源渠道',
dataIndex: 'sourceChannel', dataIndex: 'sourceChannel',
key: 'sourceChannel', key: 'sourceChannel',
width: 150 width: 150,
align: 'center'
}, },
{ {
title: '影响区域', title: '影响区域',
dataIndex: 'affectedArea', dataIndex: 'affectedArea',
key: 'affectedArea', key: 'affectedArea',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '预警级别', title: '预警级别',
dataIndex: 'alertLevelColor', dataIndex: 'alertLevelColor',
key: 'alertLevelColor', key: 'alertLevelColor',
width: 120, width: 120,
align: 'center',
render: (text) => { render: (text) => {
let color = '#ff4d4f'; let color = '#FF3E48';
if (text === '橙色预警') color = '#ff9800'; let backgroundColor = '#FFE0E2';
if (text === '蓝色预警') color = '#1890ff';
return <Tag color={color}>{text}</Tag>; if (text === '橙色预警') {
color = '#FF8800';
backgroundColor = '#FFF3E9';
} else if (text === '蓝色预警') {
color = '#00AAFA';
backgroundColor = '#DAF3FF';
}
return (
<Tag style={{ color, backgroundColor, border: 'none'}}>
{text}
</Tag>
);
} }
}, },
{ {
title: '预警时间', title: '预警时间',
dataIndex: 'alertTime', dataIndex: 'alertTime',
key: 'alertTime', key: 'alertTime',
width: 180 width: 180,
align: 'center'
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 100, width: 100,
align: 'center',
render: (text, record) => { render: (text, record) => {
let color = '#ff9800'; let color = '#ff9800';
if (record.statusType === 'pending') color = '#36cfc9'; if (record.statusType === 'pending') color = '#36cfc9';
@ -436,6 +452,7 @@ const EventWarningManagement = () => {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 120, width: 120,
align: 'center',
render: (_, record) => ( render: (_, record) => (
<div className={styles.actionButtons}> <div className={styles.actionButtons}>
<Button type="link" size="small" icon={<EditOutlined />}>编辑</Button> <Button type="link" size="small" icon={<EditOutlined />}>编辑</Button>
@ -456,16 +473,16 @@ const EventWarningManagement = () => {
<div className={styles.titleText}>今日预警统计</div> <div className={styles.titleText}>今日预警统计</div>
</div> </div>
<div className={styles.threeCards}> <div className={styles.threeCards}>
<div className={styles.pinkCard}>卡片1</div> <img src={bgMan3} alt="" style={{ width: '140px', height: '75px' }} />
<div className={styles.pinkCard}>卡片2</div> <img src={bgMan2} alt="" style={{ width: '140px', height: '75px' }} />
<div className={styles.pinkCard}>卡片3</div> <img src={bgMan3} alt="" style={{ width: '140px', height: '75px' }} />
</div> </div>
</div> </div>
{/* b块：右侧30% */} {/* b块：右侧30% */}
<div className={styles.blockA_b}> <div className={styles.blockA_b}>
<div className={styles.imageTextCard}> <div className={styles.imageTextCard}>
<div className={styles.cardIcon}> <div className={styles.cardIcon}>
<img src="https://via.placeholder.com/48x48/2E4CD4/ffffff?text=📄" alt="待处理指令" /> <img src={bgMan4} alt="待处理指令" />
</div> </div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<div className={styles.cardNumber}>12</div> <div className={styles.cardNumber}>12</div>
@ -474,7 +491,7 @@ const EventWarningManagement = () => {
</div> </div>
<div className={styles.imageTextCard}> <div className={styles.imageTextCard}>
<div className={styles.cardIcon}> <div className={styles.cardIcon}>
<img src="https://via.placeholder.com/48x48/2E4CD4/ffffff?text=✓" alt="待审核上报" /> <img src={bgMan5} alt="待审核上报" />
</div> </div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<div className={styles.cardNumber}>10</div> <div className={styles.cardNumber}>10</div>

95
src/pages/business_emergencyAccident/components/EventWarningManagement.less
Unescape Escape View File

@ -1,7 +1,7 @@
.container { .container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding: 0; padding: 15px 0px 10px 5px;
margin: 0; margin: 0;
background-color: #f0f2f5; background-color: #f0f2f5;
display: flex; display: flex;
@ -15,16 +15,16 @@
gap: 8px; gap: 8px;
.titleBar { .titleBar {
width: 2px; width: 3px;
height: 16px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
flex-shrink: 0; flex-shrink: 0;
} }
.titleText { .titleText {
font-size: 16px; font-size: 15px;
font-weight: bold; font-weight: 450;
color: #333333; color: #333;
} }
} }
@ -33,9 +33,6 @@
height: 20%; height: 20%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #ffffff;
border-radius: 8px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
gap: 15px; gap: 15px;
box-sizing: border-box; box-sizing: border-box;
@ -47,24 +44,22 @@
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; 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; gap: 15px;
padding: 20px; padding: 10px 15px;
box-sizing: border-box; box-sizing: border-box;
.threeCards { .threeCards {
display: flex; display: flex;
gap: 15px; align-items: center;
justify-content: center;
gap: 6%;
margin-right: 15%;
flex: 1; 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; margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 15px; // gap: 5px;
padding: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%);
box-sizing: border-box; border: 2px solid #FFFFFF;
.imageTextCard { .imageTextCard {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 10px;
padding: 20px; 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 { .cardIcon {
flex-shrink: 0; flex-shrink: 0;
@ -112,7 +105,7 @@
} }
.cardNumber { .cardNumber {
font-size: 32px; font-size: 30px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 1; line-height: 1;
@ -142,28 +135,24 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 5px 15px 0px 15px;
box-sizing: border-box;
.chartHeader { .chartHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px;
} }
.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; // min-height: 200px;
} }
} }
} }
@ -174,11 +163,9 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 10px 15px 0px 15px;
box-sizing: border-box; box-sizing: border-box;
.chartContent { .chartContent {
@ -188,7 +175,6 @@
.donutChart { .donutChart {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 200px;
} }
} }
} }
@ -200,22 +186,22 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 10px 15px 0px 15px;
box-sizing: border-box;
min-height: 0;
.tableHeader { .tableHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 10px;
.addButton { .addButton {
border-radius: 4px; border-radius: 4px;
background-color: #2E4CD4;
height: 30px;
display: flex;
align-items: center;
padding: 10px;
} }
} }
@ -225,9 +211,26 @@
min-height: 0; min-height: 0;
overflow: auto; 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 { .actionButtons {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center;
:global(.ant-btn-link) { :global(.ant-btn-link) {
padding: 0; padding: 0;

Write Preview
Loading…
Cancel
Save