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

页面

Browse Source
main
wangyunfei 2 weeks ago
parent b905e07c63
commit 824ba541dd
5 changed files with 207 additions and 206 deletions
Show Stats Download Patch File Download Diff File

6
src/assets/business_envinformation/icon_atmosphere.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-4" y="-4" width="58" height="58"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_965_17026_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4" d="M41.7071 28.9597L42.1071 30.2151L42.4714 31.3197L42.8571 32.4664C45.2393 39.4798 47.6179 45.3255 50 50H0C2.38214 45.3255 4.76071 39.4798 7.14286 32.4664L7.89286 30.2151L8.28571 28.9597H41.7036H41.7071ZM39.2857 18.4395C39.2857 19.4775 39.5214 20.9784 39.9929 22.9421L40.3857 24.4991L40.6536 25.453H9.34286L9.61071 24.4991L9.82143 23.6996L10.175 22.2268C10.5321 20.6137 10.7143 19.3513 10.7143 18.4395H39.2857ZM42.4929 5.19813C42.7753 6.23224 42.8129 7.31613 42.6027 8.36671C42.3926 9.4173 41.9402 10.4067 41.2803 11.2591C40.6205 12.1114 39.7706 12.8041 38.7959 13.2841C37.8212 13.7641 36.7475 14.0186 35.6571 14.0281C34.2593 14.803 32.6364 15.0933 31.05 14.8521C30.4788 15.3669 29.8007 15.7537 29.0624 15.986C28.3241 16.2183 27.5432 16.2905 26.7737 16.1976C26.0042 16.1047 25.2645 15.8489 24.6055 15.4479C23.9465 15.0469 23.384 14.5102 22.9569 13.8749C22.5297 13.2396 22.2481 12.5209 22.1314 11.7683C22.0148 11.0158 22.0659 10.2473 22.2812 9.51602C22.4965 8.78473 22.8709 8.10804 23.3785 7.53268C23.8862 6.95732 24.5149 6.49701 25.2214 6.18352C25.6118 4.6852 26.4953 3.35548 27.7347 2.40107C28.9742 1.44666 30.5 0.921033 32.075 0.905903C33.024 0.379902 34.083 0.0740866 35.1709 0.0118675C36.2589 -0.0503516 37.3469 0.132676 38.3516 0.546937C39.3564 0.961199 40.2514 1.59571 40.9679 2.4019C41.6845 3.20808 42.2036 4.16457 42.4857 5.19813H42.4929Z" fill="#8EFFC7"/>
<defs>
<clipPath id="bgblur_0_965_17026_clip_path" transform="translate(4 4)"><path d="M41.7071 28.9597L42.1071 30.2151L42.4714 31.3197L42.8571 32.4664C45.2393 39.4798 47.6179 45.3255 50 50H0C2.38214 45.3255 4.76071 39.4798 7.14286 32.4664L7.89286 30.2151L8.28571 28.9597H41.7036H41.7071ZM39.2857 18.4395C39.2857 19.4775 39.5214 20.9784 39.9929 22.9421L40.3857 24.4991L40.6536 25.453H9.34286L9.61071 24.4991L9.82143 23.6996L10.175 22.2268C10.5321 20.6137 10.7143 19.3513 10.7143 18.4395H39.2857ZM42.4929 5.19813C42.7753 6.23224 42.8129 7.31613 42.6027 8.36671C42.3926 9.4173 41.9402 10.4067 41.2803 11.2591C40.6205 12.1114 39.7706 12.8041 38.7959 13.2841C37.8212 13.7641 36.7475 14.0186 35.6571 14.0281C34.2593 14.803 32.6364 15.0933 31.05 14.8521C30.4788 15.3669 29.8007 15.7537 29.0624 15.986C28.3241 16.2183 27.5432 16.2905 26.7737 16.1976C26.0042 16.1047 25.2645 15.8489 24.6055 15.4479C23.9465 15.0469 23.384 14.5102 22.9569 13.8749C22.5297 13.2396 22.2481 12.5209 22.1314 11.7683C22.0148 11.0158 22.0659 10.2473 22.2812 9.51602C22.4965 8.78473 22.8709 8.10804 23.3785 7.53268C23.8862 6.95732 24.5149 6.49701 25.2214 6.18352C25.6118 4.6852 26.4953 3.35548 27.7347 2.40107C28.9742 1.44666 30.5 0.921033 32.075 0.905903C33.024 0.379902 34.083 0.0740866 35.1709 0.0118675C36.2589 -0.0503516 37.3469 0.132676 38.3516 0.546937C39.3564 0.961199 40.2514 1.59571 40.9679 2.4019C41.6845 3.20808 42.2036 4.16457 42.4857 5.19813H42.4929Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

3
src/assets/business_envinformation/icon_soil.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3523 32.7194H33.3872L38.1459 37.3848H9.5936L14.3523 32.7194ZM4.83489 42.0502H42.9046L47.6633 46.7156H0.0761719L4.83489 42.0502ZM38.0364 13.7872C38.6455 13.302 37.9151 12.4202 37.3464 12.8261C33.0136 15.9006 31.0792 20.8133 29.604 22.9454C29.3732 23.2813 28.9044 23.2883 28.6451 22.9687C27.3293 21.3871 24.7001 17.1696 29.3827 12.7655C33.3562 9.03314 38.567 7.34425 41.3081 4.97656C41.979 4.39808 43.0093 4.8366 43.164 5.75802C43.8373 9.73764 43.3186 13.134 42.324 16.7544C40.3158 24.0371 36.704 26.0222 32.3117 25.3737C32.1832 25.3504 32.05 25.3294 31.9024 25.2944C31.486 25.1918 31.291 24.6762 31.5265 24.31C31.5217 24.31 33.0017 19.8312 38.0388 13.7895L38.0364 13.7872ZM25.9707 13.0127C22.4302 17.4752 25.0047 21.5598 26.3562 23.181C26.4209 23.2627 26.5039 23.3287 26.5988 23.374C26.6937 23.4193 26.7979 23.4426 26.9034 23.4423C26.4442 24.282 25.935 24.9678 25.521 25.467C25.1641 25.9033 24.5217 25.8939 24.2028 25.432C22.1732 22.5022 19.5155 15.7513 13.5505 11.5198C12.7724 10.9599 11.766 12.1729 12.6035 12.8424C19.5322 21.1492 21.5665 27.3075 21.5618 27.3075C21.8853 27.8114 21.6165 28.5229 21.0455 28.6628C20.8408 28.7095 20.6576 28.7398 20.4815 28.7701C14.4403 29.6636 9.47463 26.9366 6.71458 16.92C5.34645 11.942 4.63264 7.27195 5.56059 1.79944C5.77236 0.535131 7.19045 -0.066725 8.11124 0.726394C11.8778 3.98284 19.042 6.3062 24.505 11.4359C25.0689 11.9654 25.5543 12.4902 25.9731 13.0127H25.9707Z" fill="#88AAFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/assets/business_envinformation/icon_water.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.25 31.25L15.75 34.75C14.25 35.25 12.75 35.5 11.25 35C10 34.75 8.75 34.25 8.25 33.75C5.75 32 4.5 32.25 2.5 33.75C2.25 34 1.75 34.25 1.25 34.25V30C4 28.25 7 28.25 10.5 30.75C10.75 31 11.25 31.25 12 31.5C12.5 31.25 12.75 31.25 13.25 31.25ZM38.25 28.5C40.5 28.5 42.5 29.25 44.5 30.5L45 31C45.5 31.25 46.25 31.25 47.5 30.5C47.75 30.25 48.25 30.25 48.75 30.25V34.5C46.5 35.75 44.25 35.5 42.75 34.25C42.25 34 42 33.5 42 33.75C39.75 32.25 37 32.25 34.75 33.75L38.25 28.5ZM12 21.25L11.5 25.25H11C9.75 25 8.75 24.25 8.25 23.75C5.75 22 4.5 22.25 2.5 23.75C2 24 1.75 24.25 1.25 24.25V19.75C4 18 7 18 10.5 20.5C10.75 20.75 11.25 21.25 12 21.25ZM37.75 18.75C40.25 18.5 42.5 19.25 44.5 20.75L45 21.25C45.5 21.5 46.25 21.5 47.5 20.75C47.75 20.5 48.25 20.5 48.75 20.5V24.75C46.5 26 44.25 25.75 42.75 24.5C42.25 24.25 42 23.75 42 24C40.75 23.25 39.5 22.75 38 22.75L37.75 18.75ZM1.25 44V39.75C4 38 7 38 10.5 40.5C10.75 40.75 11.25 41 12 41.25C13 41.5 14.25 41.25 15.25 40.5C19 38 23.75 38 27.5 40.5C27.75 40.75 28.25 41 29 41.25C30 41.5 31.25 41.25 32.25 40.5C36 38 40.75 38 44.5 40.5L45 41C45.5 41.25 46.25 41.25 47.5 40.5C47.75 40.25 48.25 40.25 48.75 40.25V44.5C46.5 45.75 44.25 45.5 42.75 44.25C42.25 44 42 43.5 42 43.75C39.75 42.25 36.75 42.25 34.5 43.75C32.5 45.25 30.25 45.5 28 45C26.75 44.75 25.5 44.25 25 43.75C22.75 42.25 19.75 42.25 17.5 43.75C15.5 45.25 13.25 45.5 11.25 45C10 44.75 8.75 44.25 8.25 43.75C5.75 42 4.5 42.25 2.5 43.75C2 44 1.75 44 1.25 44ZM35 24C35 29.5 30.5 33.75 25 33.75C19.5 33.75 15 29.5 15 24C15 18.5 25 5 25 5C25 5 35 18.5 35 24Z" fill="#8DD6FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

181
src/pages/business_envInformation/components/PollutionSourceManagement.js
Unescape Escape View File

@ -4,6 +4,11 @@ import { SearchOutlined, PlusOutlined, FileTextOutlined, DeleteOutlined, EditOut
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import styles from './PollutionSourceManagement.less'; import styles from './PollutionSourceManagement.less';
import icon_water from '@/assets/business_envinformation/icon_water.svg';
import icon_soil from '@/assets/business_envinformation/icon_soil.svg';
import icon_factory from '@/assets/business_envinformation/icon_atmosphere.svg';
const { Option } = Select; const { Option } = Select;
@ -60,10 +65,10 @@ const PollutionSourceManagement = () => {
radius: ['61%', '77%'], radius: ['61%', '77%'],
center: ['50%', '50%'], center: ['50%', '50%'],
data: [ data: [
{ {
value: 62, value: 62,
name: '超标污染物数量', name: '超标污染物数量',
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, x: 0, y: 0, x2: 1, y2: 1,
@ -76,8 +81,8 @@ const PollutionSourceManagement = () => {
borderRadius: 10 borderRadius: 10
} }
}, },
{ {
value: 38, value: 38,
name: '剩余', name: '剩余',
itemStyle: { color: 'transparent' } itemStyle: { color: 'transparent' }
} }
@ -122,10 +127,10 @@ const PollutionSourceManagement = () => {
radius: ['61%', '77%'], radius: ['61%', '77%'],
center: ['50%', '50%'], center: ['50%', '50%'],
data: [ data: [
{ {
value: 25, value: 25,
name: '超标污染物种类', name: '超标污染物种类',
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 0, y2: 1, x: 0, y: 0, x2: 0, y2: 1,
@ -138,8 +143,8 @@ const PollutionSourceManagement = () => {
borderRadius: 10 borderRadius: 10
} }
}, },
{ {
value: 75, value: 75,
name: '剩余', name: '剩余',
itemStyle: { color: 'transparent' } itemStyle: { color: 'transparent' }
} }
@ -158,7 +163,7 @@ const PollutionSourceManagement = () => {
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
formatter: function(params) { formatter: function (params) {
const data = params[0]; const data = params[0];
const exceedanceData = [ const exceedanceData = [
{ name: '污染物1', status: '轻微超标', exceedance: '15%' }, { name: '污染物1', status: '轻微超标', exceedance: '15%' },
@ -169,39 +174,48 @@ const PollutionSourceManagement = () => {
]; ];
const item = exceedanceData[data.dataIndex]; const item = exceedanceData[data.dataIndex];
return ` return `
<div style="padding: 10px; background: rgba(0,0,0,0.8); color: white; border-radius: 8px;"> <div style=" background: #fff; color: #000000; border-radius: 8px;">
<div style="font-weight: 600; margin-bottom: 5px;">${data.name}</div> <div style="font-weight: 600; display: inline-block; margin-right: 10px;">${data.name}</div>
<div style="color: #ff6b6b; margin-bottom: 3px;">${item.status}</div> <div style="color: #ff6b6b; display: inline-block; margin-bottom: 5px;">${item.status}</div>
<div style="color: #ffd93d; margin-bottom: 3px;">超标 ${item.exceedance}</div> <div style="color: #000000; margin-bottom: 5px;">超标 ${item.exceedance}</div>
<div style="color: #a8e6cf; font-size: 11px;">大气环境特征污染物</div> <div style="color: #000000; font-size: 12px;">大气环境特征污染物</div>
</div> </div>
`; `;
} }
}, },
grid: { grid: {
left: '20%', left: '12%',
right: '10%', right: '5%',
top: '0%', top: '5%',
bottom: '0%' bottom: '12%'
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
max: 100, max: 100,
min: 0, min: 0,
interval: 10, interval: 10,
splitNumber: 10,
axisLine: { axisLine: {
show: false show: true,
lineStyle: {
color: '#D7D6D6',
width: 1
}
}, },
axisTick: { axisTick: {
show: false show: true,
lineStyle: {
color: '#D7D6D6'
}
}, },
axisLabel: { axisLabel: {
color: '#666', color: '#666',
formatter: function(value) { formatter: function (value) {
return value; return value;
} }
}, },
splitLine: { splitLine: {
show: true,
lineStyle: { lineStyle: {
color: '#f0f0f0', color: '#f0f0f0',
type: 'dashed' type: 'dashed'
@ -241,9 +255,10 @@ const PollutionSourceManagement = () => {
offset: 1, color: '#FF0000' 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) => ( render: (_, record) => (
<Space size="middle"> <Space size="middle">
<Tooltip title="删除"> <Tooltip title="删除">
<DeleteOutlined <DeleteOutlined
style={{ color: '#ff4d4f', cursor: 'pointer' }} style={{ color: '#ff4d4f', cursor: 'pointer' }}
onClick={() => handleDelete(record)} onClick={() => handleDelete(record)}
/> />
</Tooltip> </Tooltip>
@ -444,8 +459,8 @@ const PollutionSourceManagement = () => {
<div className={styles.pieChartContainer}> <div className={styles.pieChartContainer}>
{/* <div className={styles.chartTitle}>超标污染物数量</div> */} {/* <div className={styles.chartTitle}>超标污染物数量</div> */}
{chartReady && ( {chartReady && (
<ReactECharts <ReactECharts
option={pollutantEmissionOption} option={pollutantEmissionOption}
style={{ height: '100%', width: '100%' }} style={{ height: '100%', width: '100%' }}
opts={{ renderer: 'canvas' }} opts={{ renderer: 'canvas' }}
/> />
@ -458,8 +473,8 @@ const PollutionSourceManagement = () => {
<div className={styles.pieChartContainer}> <div className={styles.pieChartContainer}>
{/* <div className={styles.chartTitle}>超标污染物种类</div> */} {/* <div className={styles.chartTitle}>超标污染物种类</div> */}
{chartReady && ( {chartReady && (
<ReactECharts <ReactECharts
option={pollutantTypeOption} option={pollutantTypeOption}
style={{ height: '100%', width: '100%' }} style={{ height: '100%', width: '100%' }}
opts={{ renderer: 'canvas' }} opts={{ renderer: 'canvas' }}
/> />
@ -475,25 +490,25 @@ const PollutionSourceManagement = () => {
{/* 超标排放统计 */} {/* 超标排放统计 */}
<div className={styles.exceedanceStatsCard}> <div className={styles.exceedanceStatsCard}>
<div className={styles.cardHeader}> <div className={styles.cardHeader}>
<div className={styles.cardTitle}>超标排放统计</div> <div className={styles.cardTitle}>超标排放统计</div>
<div className={styles.filterGroup}> <div className={styles.filterGroup}>
<Select defaultValue="今日" className={styles.exceedanceTimeFilter}> <Select defaultValue="今日" className={styles.exceedanceTimeFilter}>
<Option value="今日">今日</Option> <Option value="今日">今日</Option>
<Option value="本周">本周</Option> <Option value="本周">本周</Option>
<Option value="本月">本月</Option> <Option value="本月">本月</Option>
</Select> </Select>
<Select defaultValue="所有名录" className={styles.exceedanceCategoryFilter}> <Select defaultValue="所有名录" className={styles.exceedanceCategoryFilter}>
<Option value="所有名录">所有名录</Option> <Option value="所有名录">所有名录</Option>
<Option value="大气环境">大气环境</Option> <Option value="大气环境">大气环境</Option>
<Option value="水环境">水环境</Option> <Option value="水环境">水环境</Option>
</Select> </Select>
</div>
</div> </div>
</div>
<div className={styles.barChartContainer}> <div className={styles.barChartContainer}>
{chartReady && ( {chartReady && (
<ReactECharts <ReactECharts
option={exceedanceOption} option={exceedanceOption}
style={{ height: '100px', width: '100%' }} style={{ height: '200px', width: '100%' }}
opts={{ renderer: 'canvas' }} opts={{ renderer: 'canvas' }}
/> />
)} )}
@ -502,37 +517,34 @@ const PollutionSourceManagement = () => {
{/* 环境分类卡片 */} {/* 环境分类卡片 */}
<div className={styles.environmentalCategories}> <div className={styles.environmentalCategories}>
<div className={styles.categoryCard}> <div className={styles.categoryCard1}>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <div className={styles.categoryInfo}>
<div className={styles.categoryTitle}>大气环境</div> <div className={`${styles.categoryTitle} ${styles.atmosphereGradient}`}>大气环境</div>
<div className={styles.categorySubtitle}>特征污染物名录库</div> <div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<div className={styles.categoryIcon}>
<div className={styles.factoryIcon}>🏭</div>
</div> </div>
<img className={styles.categoryIcon} src={icon_factory} alt="icon_factory" />
</div> </div>
</div> </div>
<div className={styles.categoryCard}> <div className={styles.categoryCard2}>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <div className={styles.categoryInfo}>
<div className={styles.categoryTitle}>水环境</div> <div className={`${styles.categoryTitle} ${styles.waterGradient}`}>水环境</div>
<div className={styles.categorySubtitle}>特征污染物名录库</div> <div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<div className={styles.categoryIcon}>
<div className={styles.waterIcon}>💧</div>
</div> </div>
<img src={icon_water} alt="icon_water" className={styles.categoryIcon} />
</div> </div>
</div> </div>
<div className={styles.categoryCard}> <div className={styles.categoryCard3}>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <div className={styles.categoryInfo}>
<div className={styles.categoryTitle}>土壤及地下水</div> <div className={`${styles.categoryTitle} ${styles.soilGradient}`}>土壤及地下水</div>
<div className={styles.categorySubtitle}>特征污染物名录库</div> <div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<div className={styles.categoryIcon}>
<div className={styles.soilIcon}>🌱</div>
</div> </div>
<img className={styles.categoryIcon} src={icon_soil} alt="icon_soil" />
</div> </div>
</div> </div>
</div> </div>
@ -541,42 +553,7 @@ const PollutionSourceManagement = () => {
{/* 污染源管理表格区域 */} {/* 污染源管理表格区域 */}
<div className={styles.tableCard}> <div className={styles.tableCard}>
<div className={styles.cardTitle}>污染源管理</div> <div className={styles.cardTitle}>污染源管理</div>
<div className={styles.tableHeader}>
<div className={styles.searchSection}>
<Input
placeholder="搜索污染源..."
prefix={<SearchOutlined />}
className={styles.searchInput}
/>
<Button icon={<RobotOutlined />} className={styles.aiButton}>
AI
</Button>
<Button icon={<EditOutlined />} className={styles.editButton}>
编辑
</Button>
<Button icon={<MoreOutlined />} className={styles.moreButton}>
...
</Button>
</div>
<div className={styles.actionButtons}>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleAdd}
className={styles.addButton}
>
新增
</Button>
<Button
icon={<FileTextOutlined />}
onClick={handleGenerateReport}
className={styles.reportButton}
>
生成报表
</Button>
</div>
</div>
<StandardTable <StandardTable
columns={columns} columns={columns}
data={tableData} data={tableData}
@ -586,7 +563,7 @@ const PollutionSourceManagement = () => {
scroll={{ x: 1200, y: 600 }} scroll={{ x: 1200, y: 600 }}
/> />
</div> </div>
</div> </div >
); );
}; };

220
src/pages/business_envInformation/components/PollutionSourceManagement.less
Unescape Escape View File

@ -10,17 +10,21 @@
display: flex; display: flex;
gap: 15px; gap: 15px;
margin-bottom: 15px; margin-bottom: 15px;
height: 20%; height: 35vh;
align-items: stretch;
// 污染物排放统计卡片 // 污染物排放统计卡片
.pollutantStatsCard { .pollutantStatsCard {
width: 37%; width: 37%;
height: 100%;
background: url('@/assets/business_envinformation/background7.svg'), background: url('@/assets/business_envinformation/background7.svg'),
linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%), 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(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 2px; border-radius: 2px;
padding: 10px 20px; padding: 10px 20px;
display: flex;
flex-direction: column;
.cardTitle { .cardTitle {
background: transparent; background: transparent;
@ -28,7 +32,7 @@
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
margin: 0 0 15px 0; margin: 0 0 15px 0;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -39,12 +43,15 @@
// 超标排放统计卡片 // 超标排放统计卡片
.exceedanceStatsCard { .exceedanceStatsCard {
width: 40%; width: 40%;
height: 100%;
background: url('@/assets/business_envinformation/background8.svg'), background: url('@/assets/business_envinformation/background8.svg'),
linear-gradient(180.21deg, rgba(255, 227, 227, 0.58) 0.18%, #FFFFFF 53.1%), 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(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 2px; border-radius: 2px;
padding: 10px 20px; padding: 10px 20px;
display: flex;
flex-direction: column;
.cardTitle { .cardTitle {
background: transparent; background: transparent;
@ -52,7 +59,7 @@
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
margin: 0 0 15px 0; margin: 0 0 15px 0;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -122,13 +129,14 @@
gap: 20px; gap: 20px;
justify-content: space-between; justify-content: space-between;
background: transparent; background: transparent;
flex: 1;
.pieChartContainer { .pieChartContainer {
flex: 1; flex: 1;
text-align: center; text-align: center;
position: relative; position: relative;
background: transparent; background: transparent;
height: 200px; height: 100%;
min-height: 200px; min-height: 200px;
.chartTitle { .chartTitle {
@ -146,10 +154,10 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 10; z-index: 10;
background: transparent; background: transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.chartValue { .chartValue {
@ -175,65 +183,124 @@
// 条形图容器 // 条形图容器
.barChartContainer { .barChartContainer {
// height: 200px; flex: 1;
margin-top: 10px; margin-top: 10px;
} }
// 环境分类卡片区域 // 环境分类卡片区域
.environmentalCategories { .environmentalCategories {
flex: 1; // 撑满剩余宽度 flex: 1; // 撑满剩余宽度
display: flex; height: 100%;
flex-direction: column; display: flex;
flex-direction: column;
gap: 15px; 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 { .categoryCard3 {
background: rgba(255, 255, 255, 0.95); flex: 1;
border-radius: 12px; background:
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%);
border: 1px solid rgba(255, 255, 255, 0.2); // linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
backdrop-filter: blur(10px);
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
padding: 15px; padding: 15px;
}
.categoryContent { .categoryContent {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.categoryInfo { .categoryInfo {
flex: 1; flex: 1;
.categoryTitle { .categoryTitle {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 5px; 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 { &.waterGradient {
font-size: 12px; background: linear-gradient(183.17deg, #40AFFF 2.62%, #00B3FF 132.53%);
color: #666; -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 { .categorySubtitle {
width: 40px; font-size: 12px;
height: 40px; color: #666;
display: flex;
align-items: center; &.pollutantSubtitle {
justify-content: center; color: rgba(51, 51, 51, 1);
border-radius: 50%; font-family: 'Alibaba PuHuiTi', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 500;
font-size: 14px;
.factoryIcon, line-height: 22px;
.waterIcon, letter-spacing: 4%;
.soilIcon {
font-size: 20px;
filter: grayscale(0);
} }
} }
} }
.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样式 // 自定义Tooltip样式
.customTooltip { .customTooltip {
@ -436,4 +448,4 @@
transition: all 0.3s ease; transition: all 0.3s ease;
} }
} }
} }
Write Preview
Loading…
Cancel
Save