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

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

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

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

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

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

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

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

@ -358,7 +358,7 @@ const ProtectionFacilityMaintenance = () => {
title: '事件原因', title: '事件原因',
dataIndex: 'eventReason', dataIndex: 'eventReason',
key: 'eventReason', key: 'eventReason',
width: 200, width: 180,
}, },
{ {
title: '是否报告', title: '是否报告',
@ -383,13 +383,13 @@ const ProtectionFacilityMaintenance = () => {
title: '应对措施', title: '应对措施',
dataIndex: 'responseMeasures', dataIndex: 'responseMeasures',
key: 'responseMeasures', key: 'responseMeasures',
width: 160, width: 150,
align: 'center', align: 'center',
}, },
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 140, width: 100,
align: 'center', align: 'center',
fixed: 'right', fixed: 'right',
render: (_, record) => ( 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 { .ant-table-cell-fix-left {
box-shadow: 0px 0 4px 0px #00000040; // box-shadow: 0px 0 4px 0px #00000040;
} }
.ant-table-cell-fix-right { .ant-table-cell-fix-right {
box-shadow: 0px 0 4px 0px #00000040; // box-shadow: 0px 0 4px 0px #00000040;
} }
a { a {

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

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

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

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

Write Preview
Loading…
Cancel
Save