${data.name}
- ${item.status}
- 超标 ${item.exceedance}
- 大气环境特征污染物
+
+
`;
}
},
grid: {
- left: '20%',
- right: '10%',
- top: '0%',
- bottom: '0%'
+ left: '12%',
+ right: '5%',
+ top: '5%',
+ bottom: '12%'
},
xAxis: {
type: 'value',
max: 100,
min: 0,
interval: 10,
+ splitNumber: 10,
axisLine: {
- show: false
+ show: true,
+ lineStyle: {
+ color: '#D7D6D6',
+ width: 1
+ }
},
axisTick: {
- show: false
+ show: true,
+ lineStyle: {
+ color: '#D7D6D6'
+ }
},
axisLabel: {
color: '#666',
- formatter: function(value) {
+ formatter: function (value) {
return value;
}
},
splitLine: {
+ show: true,
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
@@ -241,9 +255,10 @@ const PollutionSourceManagement = () => {
offset: 1, color: '#FF0000'
}]
},
- borderRadius: [0, 4, 4, 0]
+ // borderRadius: [0, 4, 0, 0]
},
- barWidth: '100%'
+ barWidth: '60%',
+ barCategoryGap: '20px'
}]
};
@@ -311,8 +326,8 @@ const PollutionSourceManagement = () => {
render: (_, record) => (
${data.name}
+ ${item.status}
+ 超标 ${item.exceedance}
+ 大气环境特征污染物
{/*
超标污染物数量
*/}
{chartReady && (
-
{/*
超标污染物种类
*/}
{chartReady && (
-
-
超标排放统计
-
-
-
+
- 超标排放统计
+
+
+
+
{chartReady && (
-
-
+
-
);
};
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.less b/src/pages/business_envInformation/components/PollutionSourceManagement.less
index d60a395..1255ab3 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.less
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.less
@@ -10,17 +10,21 @@
display: flex;
gap: 15px;
margin-bottom: 15px;
- height: 20%;
+ height: 35vh;
+ align-items: stretch;
// 污染物排放统计卡片
.pollutantStatsCard {
width: 37%;
+ height: 100%;
background: url('@/assets/business_envinformation/background7.svg'),
- linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%),
- linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+ linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%),
+ linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background-repeat: no-repeat;
border-radius: 2px;
padding: 10px 20px;
+ display: flex;
+ flex-direction: column;
.cardTitle {
background: transparent;
@@ -28,7 +32,7 @@
font-weight: 500;
font-size: 16px;
padding: 0;
- margin: 0 0 15px 0;
+ margin: 0 0 15px 0;
border: none;
display: flex;
align-items: center;
@@ -39,12 +43,15 @@
// 超标排放统计卡片
.exceedanceStatsCard {
width: 40%;
+ height: 100%;
background: url('@/assets/business_envinformation/background8.svg'),
- linear-gradient(180.21deg, rgba(255, 227, 227, 0.58) 0.18%, #FFFFFF 53.1%),
- linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+ linear-gradient(180.21deg, rgba(255, 227, 227, 0.58) 0.18%, #FFFFFF 53.1%),
+ linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background-repeat: no-repeat;
border-radius: 2px;
padding: 10px 20px;
+ display: flex;
+ flex-direction: column;
.cardTitle {
background: transparent;
@@ -52,7 +59,7 @@
font-weight: 500;
font-size: 16px;
padding: 0;
- margin: 0 0 15px 0;
+ margin: 0 0 15px 0;
border: none;
display: flex;
align-items: center;
@@ -122,13 +129,14 @@
gap: 20px;
justify-content: space-between;
background: transparent;
+ flex: 1;
.pieChartContainer {
flex: 1;
text-align: center;
position: relative;
background: transparent;
- height: 200px;
+ height: 100%;
min-height: 200px;
.chartTitle {
@@ -146,10 +154,10 @@
transform: translate(-50%, -50%);
z-index: 10;
background: transparent;
- display: flex;
+ display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: center;
}
.chartValue {
@@ -175,65 +183,124 @@
// 条形图容器
.barChartContainer {
- // height: 200px;
+ flex: 1;
margin-top: 10px;
}
// 环境分类卡片区域
.environmentalCategories {
flex: 1; // 撑满剩余宽度
- display: flex;
- flex-direction: column;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
gap: 15px;
+ // background-color: pink;
+
+ .categoryCard1 {
+ flex: 1;
+ background: linear-gradient(90deg, rgba(27, 201, 181, 0.2) 0%, rgba(58, 255, 216, 0) 100%);
+
+ padding: 15px;
+ }
+
+ .categoryCard2 {
+ flex: 1;
+ background: linear-gradient(90deg, rgba(36, 149, 255, 0.2) 0%, rgba(85, 164, 255, 0) 100%);
+ padding: 15px;
+ }
- .categoryCard {
- background: rgba(255, 255, 255, 0.95);
- border-radius: 12px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- backdrop-filter: blur(10px);
- transition: all 0.3s ease;
+ .categoryCard3 {
+ flex: 1;
+ background:
+ linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%);
+ // linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
cursor: pointer;
padding: 15px;
+ }
- .categoryContent {
- display: flex;
- justify-content: space-between;
- align-items: center;
+ .categoryContent {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
- .categoryInfo {
- flex: 1;
+ .categoryInfo {
+ flex: 1;
- .categoryTitle {
- font-size: 16px;
- font-weight: 600;
- color: #333;
- margin-bottom: 5px;
+ .categoryTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+
+ &.atmosphereGradient {
+ background: linear-gradient(183.17deg, #0EE5C5 2.62%, #08C2C2 132.53%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: 'Alimama ShuHeiTi', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 22px;
+ letter-spacing: 0%;
}
- .categorySubtitle {
- font-size: 12px;
- color: #666;
+ &.waterGradient {
+ background: linear-gradient(183.17deg, #40AFFF 2.62%, #00B3FF 132.53%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: 'Alimama ShuHeiTi', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 22px;
+ letter-spacing: 0%;
+ }
+
+ &.soilGradient {
+ background: linear-gradient(183.17deg, #6E90FF 2.62%, #3D90EF 132.53%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: 'Alimama ShuHeiTi', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 22px;
+ letter-spacing: 0%;
}
}
- .categoryIcon {
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-
- .factoryIcon,
- .waterIcon,
- .soilIcon {
- font-size: 20px;
- filter: grayscale(0);
+ .categorySubtitle {
+ font-size: 12px;
+ color: #666;
+
+ &.pollutantSubtitle {
+ color: rgba(51, 51, 51, 1);
+ font-family: 'Alibaba PuHuiTi', sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: 4%;
}
}
}
+
+ .categoryIcon {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 5px;
+ // border-radius: 50%;
+ // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+ .factoryIcon,
+ .waterIcon,
+ .soilIcon {
+ font-size: 20px;
+ filter: grayscale(0);
+ }
+ }
}
}
}
@@ -259,61 +326,6 @@
}
}
- // 表格头部
- .tableHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- flex-wrap: wrap;
- gap: 15px;
-
- .searchSection {
- display: flex;
- gap: 10px;
- align-items: center;
- flex-wrap: wrap;
-
- .searchInput {
- width: 200px;
- border-radius: 8px;
- border: 1px solid #d9d9d9;
- background: rgba(255, 255, 255, 0.9);
- transition: all 0.3s ease;
- }
-
- .aiButton,
- .editButton,
- .moreButton {
- border-radius: 8px;
- border: 1px solid #d9d9d9;
- background: rgba(255, 255, 255, 0.9);
- transition: all 0.3s ease;
- }
- }
-
- .actionButtons {
- display: flex;
- gap: 10px;
- align-items: center;
-
- .addButton {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border: none;
- border-radius: 8px;
- color: white;
- font-weight: 500;
- transition: all 0.3s ease;
- }
-
- .reportButton {
- border-radius: 8px;
- border: 1px solid #d9d9d9;
- background: rgba(255, 255, 255, 0.9);
- transition: all 0.3s ease;
- }
- }
- }
// 自定义Tooltip样式
.customTooltip {
@@ -436,4 +448,4 @@
transition: all 0.3s ease;
}
}
-}
+}
\ No newline at end of file
-
- 大气环境
- 特征污染物名录库
-
-
+ 🏭
+ 大气环境
+ 特征污染物名录库
+
+
-
{
scroll={{ x: 1200, y: 600 }}
/>
-
+
-
- 水环境
- 特征污染物名录库
-
-
+ 💧
+ 水环境
+ 特征污染物名录库
+
+
@@ -541,42 +553,7 @@ const PollutionSourceManagement = () => {
{/* 污染源管理表格区域 */}
-
- 土壤及地下水
- 特征污染物名录库
-
-
+
+ 🌱
+ 土壤及地下水
+ 特征污染物名录库
污染源管理
-
-
-
+
- }
- className={styles.searchInput}
- />
- } className={styles.aiButton}>
- AI
-
- } className={styles.editButton}>
- 编辑
-
- } className={styles.moreButton}>
- ...
-
-
-
- }
- onClick={handleAdd}
- className={styles.addButton}
- >
- 新增
-
- }
- onClick={handleGenerateReport}
- className={styles.reportButton}
- >
- 生成报表
-
-
-