diff --git a/src/assets/business_envmonitoring/warning_bg.svg b/src/assets/business_envmonitoring/warning_bg.svg new file mode 100644 index 0000000..5e76a3a --- /dev/null +++ b/src/assets/business_envmonitoring/warning_bg.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.js b/src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.js new file mode 100644 index 0000000..14fdbc3 --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.js @@ -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
已处理
; + if (text === '未处理') return
未处理
; + return
处理中
; + } + }, + { + title: '详情', dataIndex: 'action', render: (_, record) => ( +
+ 查看 +
+ ), + }, + ]; + 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 ( +
+
+ {/* 左侧容器：顶部统计卡片+暂存点情况+待审批 */} +
+
+ {stats.map((item, idx) => ( +
+
+
+ + {item.title} +
+
+ {item.value} + 吨 +
+
{item.sub} 立方米
+
+ 统计图标 +
+ ))} +
+
+
+ + 暂存点情况 +
+ +
+
+ {/* 右侧容器：批次状态卡片 */} +
+
+
+
+ + 批次状态 +
+
+
+ 批次查询 +
+
+ 所有批次状态 +
+
+ 批次状态背景 +
+
+
+ {warnings.map((w, idx) => ( +
+
+
{w.title}
+
{w.value}
+
+ 统计图标 +
+ ))} +
+ 警示背景 +
+
+
+
+ {/* 待审批和表格左右布局 */} +
+
+
+ + 待审批 +
+
+ {approvalList.map((item, idx) => ( +
+
+
{item.title}
+
提交人：张建强 | 提交时间：{item.date}
+
+ +
+ ))} +
+
+
+
+
+
+ + 信息台账 +
+