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

修改

Browse Source
main
wangyunfei 2 weeks ago
parent 9fa1cad060
commit b905e07c63
8 changed files with 305 additions and 88 deletions
Show Stats Download Patch File Download Diff File

16
src/assets/business_envinformation/background8.svg
Unescape Escape View File

@ -0,0 +1,16 @@
<svg width="222" height="116" viewBox="0 0 222 116" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M116.497 104.818C145.54 62.4349 203.729 -23.0411 204.134 -25.8778V-38.0359L128.147 -43.1016L12.141 -19.7991L0.490234 115.457L116.497 104.818Z" fill="url(#paint0_linear_965_17100)" fill-opacity="0.2"/>
<path d="M172.622 70.1606C188.827 46.5122 221.294 -1.18009 221.52 -2.76287V-9.5466L179.122 -12.373L114.395 0.628852L107.895 76.0964L172.622 70.1606Z" fill="url(#paint1_linear_965_17100)" fill-opacity="0.2"/>
</g>
<defs>
<linearGradient id="paint0_linear_965_17100" x1="176.07" y1="5.96091" x2="88.0431" y2="115.563" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA39A"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_965_17100" x1="205.861" y1="15.0019" x2="156.746" y2="76.1554" gradientUnits="userSpaceOnUse">
<stop stop-color="#E04300"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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

@ -9,6 +9,7 @@ const { Option } = Select;
const PollutionSourceManagement = () => {
const [loading, setLoading] = useState(false);
const [chartReady, setChartReady] = useState(false);
const [tableData, setTableData] = useState({
list: [],
pagination: {
@ -18,53 +19,136 @@ const PollutionSourceManagement = () => {
}
});
// 污染物排放统计图表配置
// 确保DOM准备好后再渲染图表
useEffect(() => {
const timer = setTimeout(() => {
setChartReady(true);
}, 100);
return () => clearTimeout(timer);
}, []);
// 污染物排放统计图表配置 - 闭合环图+进度饼图
const pollutantEmissionOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
show: false
},
series: [{
name: '污染物排放',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
data: [
{ value: 62, name: '超标污染物数量', itemStyle: { color: '#ff6b6b' } },
{ value: 38, name: '正常污染物数量', itemStyle: { color: '#4ecdc4' } }
],
emphasis: {
series: [
// 外层闭合环图
{
name: '外层环',
type: 'pie',
radius: ['58%', '80%'],
center: ['50%', '50%'],
data: [{ value: 100, name: '外层环' }],
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
color: '#F6F1E8',
shadowBlur: 4,
shadowColor: '#FFF5F0',
shadowOffsetY: 4,
borderRadius: 10,
borderColor: 'rgba(255, 227, 208, 0.6)', // 外边框颜色
borderWidth: 2
},
label: { show: false },
labelLine: { show: false },
silent: true
},
// 内层进度饼图
{
name: '进度饼图',
type: 'pie',
radius: ['61%', '77%'],
center: ['50%', '50%'],
data: [
{
value: 62,
name: '超标污染物数量',
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1,
colorStops: [
{ offset: 0, color: '#FFF4B3' },
{ offset: 0.5, color: '#FF8351' },
{ offset: 1, color: '#FF7125' }
]
},
borderRadius: 10
}
},
{
value: 38,
name: '剩余',
itemStyle: { color: 'transparent' }
}
],
label: { show: false },
labelLine: { show: false },
silent: true
}
}]
]
};
// 超标污染物种类统计图表配置 - 闭合环图+进度饼图
const pollutantTypeOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
show: false
},
series: [{
name: '污染物种类',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
data: [
{ value: 25, name: '超标污染物种类', itemStyle: { color: '#a8e6cf' } },
{ value: 75, name: '正常污染物种类', itemStyle: { color: '#ffd3a5' } }
],
emphasis: {
series: [
// 外层闭合环图
{
name: '外层环',
type: 'pie',
radius: ['58%', '80%'],
center: ['50%', '50%'],
data: [{ value: 100, name: '外层环' }],
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
color: '#F2F0FF',
shadowBlur: 4,
shadowColor: '#F2F0FF',
shadowOffsetY: 4,
borderRadius: 10,
borderColor: '#E4E1FB', // 外边框颜色
borderWidth: 2
},
label: { show: false },
labelLine: { show: false },
silent: true
},
// 内层进度饼图
{
name: '进度饼图',
type: 'pie',
radius: ['61%', '77%'],
center: ['50%', '50%'],
data: [
{
value: 25,
name: '超标污染物种类',
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#B3D6FF' },
{ offset: 0.476, color: '#9E7DFF' },
{ offset: 1, color: '#2549FF' }
]
},
borderRadius: 10
}
},
{
value: 75,
name: '剩余',
itemStyle: { color: 'transparent' }
}
],
label: { show: false },
labelLine: { show: false },
silent: true
}
}]
]
};
// 超标排放统计图表配置
@ -97,12 +181,14 @@ const PollutionSourceManagement = () => {
grid: {
left: '20%',
right: '10%',
top: '10%',
bottom: '10%'
top: '0%',
bottom: '0%'
},
xAxis: {
type: 'value',
max: 100,
min: 0,
interval: 10,
axisLine: {
show: false
},
@ -110,7 +196,10 @@ const PollutionSourceManagement = () => {
show: false
},
axisLabel: {
color: '#666'
color: '#666',
formatter: function(value) {
return value;
}
},
splitLine: {
lineStyle: {
@ -123,7 +212,10 @@ const PollutionSourceManagement = () => {
type: 'category',
data: ['污染物1', '污染物2', '污染物3', '污染物4', '污染物5'],
axisLine: {
show: false
show: true,
lineStyle: {
color: '#D7D6D6'
}
},
axisTick: {
show: false
@ -137,10 +229,21 @@ const PollutionSourceManagement = () => {
type: 'bar',
data: [45, 66, 32, 28, 38],
itemStyle: {
color: '#ff6b6b',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#FFEBD9'
}, {
offset: 1, color: '#FF0000'
}]
},
borderRadius: [0, 4, 4, 0]
},
barWidth: '60%'
barWidth: '100%'
}]
};
@ -321,7 +424,7 @@ const PollutionSourceManagement = () => {
{/* 顶部统计区域 */}
<div className={styles.statsSection}>
{/* 污染物排放统计 */}
<div className={styles.statsCard}>
<div className={styles.pollutantStatsCard}>
<div className={styles.cardTitle}>
<span>污染物排放统计</span>
<div className={styles.cardHeader}>
@ -340,46 +443,60 @@ const PollutionSourceManagement = () => {
<div className={styles.chartsContainer}>
<div className={styles.pieChartContainer}>
{/* <div className={styles.chartTitle}>超标污染物数量</div> */}
<ReactECharts
option={pollutantEmissionOption}
style={{ height: '120px', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
<div className={styles.chartValue}>62%</div>
{chartReady && (
<ReactECharts
option={pollutantEmissionOption}
style={{ height: '100%', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
)}
<div className={styles.chartCenterContent}>
<div className={styles.chartValue}>62%</div>
<div className={styles.chartLabel}>超标污染物数量</div>
</div>
</div>
<div className={styles.pieChartContainer}>
{/* <div className={styles.chartTitle}>超标污染物种类</div> */}
<ReactECharts
option={pollutantTypeOption}
style={{ height: '120px', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
<div className={styles.chartValue}>25%</div>
{chartReady && (
<ReactECharts
option={pollutantTypeOption}
style={{ height: '100%', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
)}
<div className={styles.chartCenterContent}>
<div className={styles.chartValue}>25%</div>
<div className={styles.chartLabel}>超标污染物种类</div>
</div>
</div>
</div>
</div>
{/* 超标排放统计 */}
<div className={styles.statsCard}>
<div className={styles.cardTitle}>超标排放统计</div>
<div className={styles.exceedanceStatsCard}>
<div className={styles.cardHeader}>
<Select defaultValue="今日" className={styles.timeFilter}>
<div className={styles.cardTitle}>超标排放统计</div>
<div className={styles.filterGroup}>
<Select defaultValue="今日" className={styles.exceedanceTimeFilter}>
<Option value="今日">今日</Option>
<Option value="本周">本周</Option>
<Option value="本月">本月</Option>
</Select>
<Select defaultValue="所有名录" className={styles.categoryFilter}>
<Select defaultValue="所有名录" className={styles.exceedanceCategoryFilter}>
<Option value="所有名录">所有名录</Option>
<Option value="大气环境">大气环境</Option>
<Option value="水环境">水环境</Option>
</Select>
</div>
</div>
<div className={styles.barChartContainer}>
<ReactECharts
option={exceedanceOption}
style={{ height: '100px', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
{chartReady && (
<ReactECharts
option={exceedanceOption}
style={{ height: '100px', width: '100%' }}
opts={{ renderer: 'canvas' }}
/>
)}
</div>
</div>
@ -466,7 +583,7 @@ const PollutionSourceManagement = () => {
onChange={handleTableChange}
rowKey="key"
size="small"
scroll={{ x: 1200 }}
scroll={{ x: 1200, y: 600 }}
/>
</div>
</div>

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

@ -7,14 +7,14 @@
// 顶部统计区域
.statsSection {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
display: flex;
gap: 15px;
margin-bottom: 15px;
height: 20%;
// 统计卡片通用样式
.statsCard {
// 污染物排放统计卡片
.pollutantStatsCard {
width: 37%;
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));
@ -36,16 +36,76 @@
}
}
// 超标排放统计卡片
.exceedanceStatsCard {
width: 40%;
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));
background-repeat: no-repeat;
border-radius: 2px;
padding: 10px 20px;
.cardTitle {
background: transparent;
color: #000000;
font-weight: 500;
font-size: 16px;
padding: 0;
margin: 0 0 15px 0;
border: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.filterGroup {
display: flex;
gap: 10px;
}
.exceedanceTimeFilter,
.exceedanceCategoryFilter {
width: 100px;
flex-shrink: 0;
:global(.ant-select-selector) {
border-radius: 2px;
border: 1px solid #FFC3C3;
background: #FFDEDEB2;
transition: all 0.3s ease;
}
}
}
// 卡片头部筛选器
.cardHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 0;
.cardTitle {
background: transparent;
color: #000000;
font-weight: 500;
font-size: 16px;
padding: 0;
margin: 0;
border: none;
flex-shrink: 0;
}
.filterGroup {
display: flex;
gap: 10px;
}
.timeFilter,
.categoryFilter {
flex: 1;
min-width: 100px;
width: 100px;
flex-shrink: 0;
:global(.ant-select-selector) {
border-radius: 2px;
@ -68,6 +128,8 @@
text-align: center;
position: relative;
background: transparent;
height: 200px;
min-height: 200px;
.chartTitle {
font-size: 14px;
@ -77,16 +139,36 @@
background: transparent;
}
.chartValue {
.chartCenterContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.chartValue {
font-size: 18px;
font-weight: bold;
color: #333;
z-index: 10;
color: #FF2F2F;
background: transparent;
margin: 0;
line-height: 1;
}
.chartLabel {
font-size: 12px;
font-weight: 500;
color: #000000;
background: transparent;
margin: 0;
margin-top: 2px;
line-height: 1;
}
}
}
@ -99,6 +181,7 @@
// 环境分类卡片区域
.environmentalCategories {
flex: 1; // 撑满剩余宽度
display: flex;
flex-direction: column;
gap: 15px;

7
src/pages/business_envInformation/components/secondary_menu/DischargePermitManagement.less
Unescape Escape View File

@ -98,13 +98,14 @@
:global {
.ant-table-thead > tr > th {
font-weight: 400 !important;
font-size: 14px !important;
font-size: 12px !important;
color: #333 !important;
text-align: center !important;
background-color: #FAFAFA !important;
}
.ant-table-tbody > tr > td {
font-size: 14px;
font-size: 12px;
color: #333;
text-align: center;
}
@ -118,7 +119,7 @@
.attachmentLink {
color: #1890ff;
text-decoration: none;
font-size: 14px;
font-size: 12px;
&:hover {
text-decoration: underline;

6
src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.js
Unescape Escape View File

@ -358,7 +358,7 @@ const ProtectionFacilityMaintenance = () => {
title: '事件原因',
dataIndex: 'eventReason',
key: 'eventReason',
width: 200,
width: 180,
},
{
title: '是否报告',
@ -383,13 +383,13 @@ const ProtectionFacilityMaintenance = () => {
title: '应对措施',
dataIndex: 'responseMeasures',
key: 'responseMeasures',
width: 160,
width: 150,
align: 'center',
},
{
title: '操作',
key: 'action',
width: 140,
width: 100,
align: 'center',
fixed: 'right',
render: (_, record) => (

4
src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.less
Unescape Escape View File

@ -179,11 +179,11 @@
// 固定列阴影效果
.ant-table-cell-fix-left {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
.ant-table-cell-fix-right {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
a {

10
src/pages/business_envInformation/components/secondary_menu/WasteGasPollutionControl.less
Unescape Escape View File

@ -140,7 +140,7 @@
font-size: 12px;
.ant-table-thead > tr > th {
background-color: #fafafa;
background-color: #FAFAFA;
font-weight: 400;
color: #000000D9;
border-right: none;
@ -167,23 +167,23 @@
// 固定列样式
.ant-table-thead > tr > th.ant-table-cell-fix-left,
.ant-table-tbody > tr > td.ant-table-cell-fix-left {
background-color: #fafafa;
background-color: #FAFAFA;
z-index: 1;
}
.ant-table-thead > tr > th.ant-table-cell-fix-right,
.ant-table-tbody > tr > td.ant-table-cell-fix-right {
background-color: #fafafa;
background-color: #FAFAFA;
z-index: 1;
}
// 固定列阴影效果
.ant-table-cell-fix-left {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
.ant-table-cell-fix-right {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
a {

4
src/pages/business_envInformation/components/secondary_menu/WastewaterFacilityManagement.less
Unescape Escape View File

@ -180,11 +180,11 @@
// 固定列阴影效果
.ant-table-cell-fix-left {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
.ant-table-cell-fix-right {
box-shadow: 0px 0 4px 0px #00000040;
// box-shadow: 0px 0 4px 0px #00000040;
}
a {

Write Preview
Loading…
Cancel
Save