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

废物监测管理-一般固废页面开发

Browse Source
main
jiangxucong 2 months ago
parent 6ac63189fc
commit 9d69b01159
3 changed files with 707 additions and 0 deletions
Show Stats Download Patch File Download Diff File

21
src/assets/business_envmonitoring/warning_bg.svg
View File

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

After

Width:  |  Height:  |  Size: 341 KiB

231
src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.js
Unescape Escape View File

@ -0,0 +1,231 @@
import React, { useRef, useEffect, useState } from 'react';
import { Card, Row, Col, Select, Progress, Button, Tag } from 'antd';
import ReactECharts from 'echarts-for-react';
import { CheckCircleOutlined } from '@ant-design/icons';
import './GeneralSolidWaste.less';
import StandardTable from '@/components/StandardTable';
import jhrkIcon from '@/assets/business_envmonitoring/jhrk_icon.svg';
import zclIcon from '@/assets/business_envmonitoring/zcl_icon.svg';
import yszIcon from '@/assets/business_envmonitoring/ysz_icon.svg';
import ljczIcon from '@/assets/business_envmonitoring/ljcz_icon.svg';
import rzsIcon from '@/assets/business_envmonitoring/rzs_icon.svg';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
import pcztBg from '@/assets/business_envmonitoring/pczt_bg.svg';
import warningBg from '@/assets/business_envmonitoring/warning_bg.svg';
const GeneralSolidWaste = () => {
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 12,
});
const categoryBarOption = {
grid: { left: 40, right: 20, top: 10, bottom: 20 },
xAxis: {
type: 'category',
data: ['xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类'],
axisTick: { show: false },
axisLine: { show: false }
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#E9EBF1',
width: 1
}
}
},
series: [{
type: 'bar',
data: [20, 25, 18, 22, 30, 15, 28, 19, 24, 21, 27, 23],
barWidth: 10,
itemStyle: {
color: '#9F92FF',
barBorderRadius: [10, 10, 0, 0]
}
}]
};
// 顶部统计卡片数据
const stats = [
{ title: '计划入库', value: '69', sub: '80', icon: jhrkIcon },
{ title: '暂存量', value: '69', sub: '80', icon: zclIcon },
{ title: '运输中', value: '69', sub: '80', icon: yszIcon },
{ title: '累计处置', value: '69', sub: '80', icon: ljczIcon },
];
// 预警卡片
const warnings = [
{ title: '资质预警', value: 8, icon: rzsIcon },
{ title: '库存预警', value: 8, icon: rzsIcon },
{ title: '处理量预警', value: 8, icon: rzsIcon },
{ title: '流程停滞预警', value: 8, icon: rzsIcon },
];
// 待审批列表
const approvalList = [
{ title: 'loia234批次入库', date: '2023-08-28', status: '待审批', type: 'orange' },
{ title: 'loia234批次运输申请', date: '2023-08-28', status: '待审批', type: 'green' },
{ title: 'loia234批次运输申请', date: '2023-08-28', status: '待审批', type: 'green' },
{ title: 'loia234批次入库申请', date: '2023-08-28', status: '待审批', type: 'orange' },
];
// 表格数据
const columns = [
{ title: '序号', dataIndex: 'key', key: 'key', width: 60 },
{ title: '产生时间', dataIndex: 'date', key: 'date' },
{ title: '废物名称', dataIndex: 'name', key: 'name' },
{ title: '废物类别', dataIndex: 'type', key: 'type' },
{ title: '产生部门', dataIndex: 'dept', key: 'dept' },
{ title: '产生量', dataIndex: 'amount', key: 'amount' },
{ title: '暂存位置', dataIndex: 'location', key: 'location' },
{
title: '状态', dataIndex: 'status', key: 'status', render: (text) => {
if (text === '已处理') return <div className='gsw-table-processed'>已处理</div>;
if (text === '未处理') return <div className='gsw-table-unprocessed'>未处理</div>;
return <div className='gsw-table-processing'>处理中</div>;
}
},
{
title: '详情', dataIndex: 'action', render: (_, record) => (
<div style={{ display: 'flex', alignItems: 'center'}}>
<img
src={viewIcon}
alt="查看"
style={{ width: 16, height: 16, cursor: 'pointer' }}
/>
</div>
),
},
];
const dataSource = [
{ key: 1, date: '2025-09-22', name: 'xxxxx', type: 'hto', dept: 26, amount: '10吨', location: 'xxx号暂存点', status: '已处理' },
{ key: 2, date: '2025-09-21', name: 'xxxxx', type: 'dfafaf', dept: 58, amount: '3吨', location: 'xxx号暂存点', status: '未处理' },
{ key: 3, date: '2025-10-01', name: 'dfadf', type: 'dfadf', dept: 52, amount: '5吨', location: 'xxx号暂存点', status: '处理中' },
{ key: 4, date: '2025-09-27', name: 'xxxxx', type: 'dadf', dept: 43, amount: '7吨', location: 'xxx号暂存点', status: '处理中' },
{ key: 5, date: '2025-09-19', name: 'xxxxx', type: 'dadf', dept: 43, amount: '6吨', location: 'xxx号暂存点', status: '处理中' },
];
const selectOptions = [
{ label: '产生清单', value: '产生清单' },
];
const getCurrentPageData = () => {
const { current, pageSize } = pagination;
const start = (current - 1) * pageSize;
const end = start + pageSize;
return dataSource.slice(start, end);
};
return (
<div className="gsw-main">
<div className="gsw-content" style={{ display: 'flex', gap: 10 }}>
{/* 左侧容器：顶部统计卡片+暂存点情况+待审批 */}
<div className="gsw-left" style={{ flex: 2, display: 'flex', flexDirection: 'column', gap: 10 }}>
<div className="gsw-top" style={{ marginBottom: 0 }}>
{stats.map((item, idx) => (
<div className="gsw-stat-card" key={idx}>
<div>
<div className="gsw-stat-title">
<span className="gsw-stat-title-bar" />
{item.title}
</div>
<div className="gsw-stat-value">
<span>{item.value}</span>
<span className='gsw-stat-unit'>吨</span>
</div>
<div className="gsw-stat-sub">{item.sub} 立方米</div>
</div>
<img src={item.icon} style={{ width: '40px' }} alt="统计图标" />
</div>
))}
</div>
<div className="gsw-chart">
<div className="gsw-chart-title">
<span className="gsw-chart-title-bar" />
暂存点情况
</div>
<ReactECharts option={categoryBarOption} style={{ height: 160 }} />
</div>
</div>
{/* 右侧容器：批次状态卡片 */}
<div className="gsw-right" style={{ flex: 1.2, display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 10 }}>
<div className="gsw-batch-status">
<div className="gsw-batch-title">
<span className="gsw-batch-title-bar" />
批次状态
</div>
<div className="gsw-status">
<div className="gsw-status-card gsw-status-card-active">
批次查询
</div>
<div className="gsw-status-card gsw-status-card-inactive">
所有批次状态
</div>
</div>
<img src={pcztBg} alt="批次状态背景" className="gsw-batch-bg" style={{position: 'absolute', right: 0, top: 0, width: 70, pointerEvents: 'none'}} />
</div>
<div className="gsw-batch-status" style={{ padding: '20px 50px 20px 20px', background: 'linear-gradient(-90deg, rgba(255,213,213,0.4) 0%, rgba(255,238,238,0.4) 20%, rgba(255,246,246,0.39) 80%, rgba(255,255,255,1) 100%)' }}>
<div className="gsw-warnings">
{warnings.map((w, idx) => (
<div className="gsw-warning-card" key={idx}>
<div>
<div className="gsw-warning-title">{w.title}</div>
<div className="gsw-warning-value">{w.value}</div>
</div>
<img src={w.icon} style={{ width: '40px' }} alt="统计图标" />
</div>
))}
</div>
<img src={warningBg} alt="警示背景" className="gsw-batch-bg" style={{position: 'absolute', right: 0, bottom: 0, width: 60, pointerEvents: 'none'}} />
</div>
</div>
</div>
</div>
{/* 待审批和表格左右布局 */}
<div className="gsw-bottom-row" style={{ display: 'flex', gap: 10, marginTop: 10 }}>
<div className="gsw-approval" style={{ flex: 3.5 }}>
<div className="gsw-approval-title">
<span className="gsw-approval-title-bar" />
待审批
</div>
<div className="gsw-approval-list">
{approvalList.map((item, idx) => (
<div className={`gsw-approval-item gsw-approval-${item.type}`} key={idx}>
<div>
<div className="gsw-approval-main">{item.title}</div>
<div className="gsw-approval-date">提交人：张建强 | 提交时间：{item.date}</div>
</div>
<Button size="small">详情</Button>
</div>
))}
</div>
</div>
<div className="gsw-table-section" style={{ flex: 8.5 }}>
<div className="gsw-table-header">
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div className="gsw-table-title">
<span className="gsw-table-title-bar" />
信息台账
</div>
<Select size="small" options={selectOptions} defaultValue={'产生清单'} style={{ fontSize: 12 }} />
</div>
<Button size="small" style={{ fontSize: 12, padding: '0 12px' }}>导出</Button>
</div>
<StandardTable
columns={columns}
// dataSource={dataSource}
data={{
list: getCurrentPageData(),
pagination: {
...pagination,
total: dataSource.length,
showTotal: (total) => `共 ${total} 条`,
showSizeChanger: false,
}
}}
size="small"
/>
</div>
</div>
</div>
);
};
export default GeneralSolidWaste;

455
src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.less
Unescape Escape View File

@ -0,0 +1,455 @@
.gsw-table-select-small .ant-select-selector {
font-size: 12px !important;
height: 28px !important;
min-height: 28px !important;
padding-top: 2px;
padding-bottom: 2px;
}
// 主容器
.gsw-main {
// min-height: 100vh;
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
// 顶部统计卡片区
.gsw-top {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.gsw-stat-card {
background: #fff;
box-shadow: 0 2px 8px #e6f7ff33;
flex: 1;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.gsw-stat-title {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
margin-bottom: 12px;
}
.gsw-stat-title-bar {
display: inline-block;
width: 3px;
height: 18px;
background: #1ecb8c;
border-radius: 2px;
margin-right: 6px;
}
.gsw-stat-value {
font-size: 15px;
font-weight: bold;
color: #333333;
margin-bottom: 12px;
margin-left: 10px;
}
.gsw-stat-unit {
font-size: 13px;
color: #333333;
margin-left: 4px;
font-weight: normal;
}
.gsw-stat-sub {
width: 70px;
padding: 4px;
font-size: 13px;
color: #6BA99B;
text-align: center;
background-color: rgba(219, 255, 245, 0.68);
margin-left: 10px;
}
.gsw-stat-icon {
position: absolute;
right: 18px;
top: 18px;
width: 32px;
height: 32px;
background: url('/public/img/stat-icon.png') no-repeat center/cover;
opacity: 0.7;
}
.gsw-stat-select {
display: flex;
align-items: center;
margin-left: 10px;
}
.gsw-stat-select select {
border: 1px solid #e6f7ff;
border-radius: 4px;
padding: 4px 12px;
font-size: 15px;
}
// 内容区
.gsw-content {
display: flex;
gap: 20px;
}
.gsw-left {
flex: 2;
display: flex;
flex-direction: column;
gap: 20px;
}
.gsw-right {
flex: 1.2;
display: flex;
flex-direction: column;
}
// 批次状态区块
.gsw-batch-status {
background: #fff;
box-shadow: 0 2px 8px #e6f7ff33;
padding: 10px;
position: relative;
}
.gsw-batch-title {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
}
.gsw-batch-title-bar {
display: inline-block;
width: 3px;
height: 18px;
background: #1ecb8c;
border-radius: 2px;
margin-right: 6px;
}
.gsw-status {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 5px 40px 5px 10px;
}
.gsw-status-card {
background: #f7fafd;
border-radius: 6px;
padding: 25px 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #333;
}
.gsw-status-card-active {
background-color: rgba(0, 217, 166, 0.12);
border: 1px solid #6AF9D8;
color: #009D6F;
}
.gsw-status-card-inactive {
background-color: rgba(164, 196, 255, 0.11);
border: 1px solid #B8D1FF;
color: #335188;
}
.gsw-warnings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gsw-warning-card {
background: rgba(255, 251, 237, 0.47);
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #FAEDA1;
}
.gsw-warning-title {
font-size: 13px;
color: #000000;
margin-bottom: 6px;
}
.gsw-warning-value {
font-size: 18px;
font-weight: bold;
color: #000000;
text-align: center;
}
// 柱状图区块
.gsw-chart {
background: #fff;
padding: 10px;
}
.gsw-chart-title {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
}
.gsw-chart-title-bar {
display: inline-block;
width: 3px;
height: 18px;
background: #1ecb8c;
border-radius: 2px;
margin-right: 6px;
}
.gsw-chart-bar {
display: flex;
align-items: flex-end;
height: 160px;
gap: 10px;
margin-bottom: 8px;
}
.gsw-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.gsw-bar {
width: 18px;
background: linear-gradient(180deg, #7ad6ff 0%, #4e8cff 100%);
border-radius: 6px 6px 0 0;
margin-bottom: 4px;
transition: height 0.3s;
}
.gsw-bar-label {
font-size: 12px;
color: #888;
}
// 待审批区块
.gsw-approval {
background: #fff;
padding: 10px;
}
.gsw-approval-title {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
}
.gsw-approval-title-bar {
display: inline-block;
width: 3px;
height: 18px;
background: #1ecb8c;
border-radius: 2px;
margin-right: 6px;
}
.gsw-approval-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.gsw-approval-item {
background: #f7fafd;
padding: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.gsw-approval-orange {
background-color: #FFFAF5;
.ant-btn {
background: #FFA952;
color: #fff;
border: none;
font-size: 12px;
&:hover {
color: #fff;
}
}
}
.gsw-approval-green {
background-color: #EFFFFA;
.ant-btn {
background: #20D9A4;
color: #fff;
border: none;
font-size: 12px;
&:hover {
color: #fff;
}
}
}
.gsw-approval-main {
font-size: 13px;
color: #333;
font-weight: bold;
margin-bottom: 10px;
}
.gsw-approval-date {
font-size: 12px;
color: #666;
}
// 表格区块
.gsw-table-section {
background: #fff;
padding: 10px;
.ant-table {
font-size: 12px !important;
.ant-table-thead>tr>th {
background-color: #fafafa;
font-weight: 400;
color: #000000D9;
border-right: none;
white-space: nowrap; // 防止换行
overflow: hidden;
text-overflow: ellipsis;
}
.ant-table-tbody>tr>td {
border-right: none;
color: #000000D9;
font-weight: 400;
white-space: nowrap; // 防止换行
overflow: hidden;
text-overflow: ellipsis;
}
.ant-table-tbody>tr:hover>td {
background-color: #f5f5f5;
}
// 固定列样式
.ant-table-thead>tr>th.ant-table-cell-fix-left,
.ant-table-tbody>tr>td.ant-table-cell-fix-left {
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;
z-index: 1;
}
a {
color: #1890ff;
text-decoration: none;
&:hover {
color: #40a9ff;
}
}
}
}
.gsw-table-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
.ant-select-selector {
font-size: 12px !important;
}
}
.gsw-table-title {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #333;
}
.gsw-table-title-bar {
display: inline-block;
width: 3px;
height: 18px;
background: #1ecb8c;
border-radius: 2px;
margin-right: 6px;
}
.gsw-table-select {
border: 1px solid #e6f7ff;
border-radius: 4px;
padding: 4px 12px;
font-size: 15px;
}
.gsw-table-export {
background: #e6fff7;
color: #1ecb8c;
border: none;
font-weight: bold;
}
.gsw-table-processed {
display: inline-block;
padding: 2px 6px;
background-color: #F6FFED;
color: #52C41A;
font-size: 12px;
border: 1px solid #B7EB8F;
}
.gsw-table-unprocessed {
display: inline-block;
padding: 2px 6px;
background-color: #FFF2E8;
color: #FA541C;
font-size: 12px;
border: 1px solid #FFBB96;
}
.gsw-table-processing {
display: inline-block;
padding: 2px 6px;
background-color: #FFFBE6;
color: #FAAD14;
font-size: 12px;
border: 1px solid #FFE58F;
}
Write Preview
Loading…
Cancel
Save