From eae3e5ff213d15e4b7ca122dad34df8dfb7afbfd Mon Sep 17 00:00:00 2001 From: jiangxucong Date: Thu, 30 Oct 2025 16:22:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=9F=E7=89=A9=E7=9B=91=E6=B5=8B=E7=AE=A1?= =?UTF-8?q?=E7=90=86-=E4=BA=A7=E5=BA=9F=E7=AE=A1=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_envmonitoring/alarm_icon.svg | 4 + .../business_envmonitoring/jhrk_icon.svg | 20 + .../business_envmonitoring/ledger_icon.svg | 32 ++ .../business_envmonitoring/ljcz_icon.svg | 20 + .../business_envmonitoring/normal_icon.svg | 3 + src/assets/business_envmonitoring/pczt_bg.svg | 11 + .../business_envmonitoring/rzs_icon.svg | 5 + .../business_envmonitoring/warning_icon.svg | 3 + .../business_envmonitoring/ysz_icon.svg | 20 + .../business_envmonitoring/zcl_icon.svg | 20 + .../components/WasteMonitoring.js | 49 ++- .../components/WasteMonitoring.less | 102 +++-- .../components/secondary_menu/ProductWaste.js | 368 ++++++++++++++++++ .../secondary_menu/ProductWaste.less | 246 ++++++++++++ 14 files changed, 872 insertions(+), 31 deletions(-) create mode 100644 src/assets/business_envmonitoring/alarm_icon.svg create mode 100644 src/assets/business_envmonitoring/jhrk_icon.svg create mode 100644 src/assets/business_envmonitoring/ledger_icon.svg create mode 100644 src/assets/business_envmonitoring/ljcz_icon.svg create mode 100644 src/assets/business_envmonitoring/normal_icon.svg create mode 100644 src/assets/business_envmonitoring/pczt_bg.svg create mode 100644 src/assets/business_envmonitoring/rzs_icon.svg create mode 100644 src/assets/business_envmonitoring/warning_icon.svg create mode 100644 src/assets/business_envmonitoring/ysz_icon.svg create mode 100644 src/assets/business_envmonitoring/zcl_icon.svg create mode 100644 src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.js create mode 100644 src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.less diff --git a/src/assets/business_envmonitoring/alarm_icon.svg b/src/assets/business_envmonitoring/alarm_icon.svg new file mode 100644 index 0000000..b54568a --- /dev/null +++ b/src/assets/business_envmonitoring/alarm_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_envmonitoring/jhrk_icon.svg b/src/assets/business_envmonitoring/jhrk_icon.svg new file mode 100644 index 0000000..c6f79dd --- /dev/null +++ b/src/assets/business_envmonitoring/jhrk_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/business_envmonitoring/ledger_icon.svg b/src/assets/business_envmonitoring/ledger_icon.svg new file mode 100644 index 0000000..851179b --- /dev/null +++ b/src/assets/business_envmonitoring/ledger_icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/business_envmonitoring/ljcz_icon.svg b/src/assets/business_envmonitoring/ljcz_icon.svg new file mode 100644 index 0000000..ac2c800 --- /dev/null +++ b/src/assets/business_envmonitoring/ljcz_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/business_envmonitoring/normal_icon.svg b/src/assets/business_envmonitoring/normal_icon.svg new file mode 100644 index 0000000..ffeee14 --- /dev/null +++ b/src/assets/business_envmonitoring/normal_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/business_envmonitoring/pczt_bg.svg b/src/assets/business_envmonitoring/pczt_bg.svg new file mode 100644 index 0000000..d50c11f --- /dev/null +++ b/src/assets/business_envmonitoring/pczt_bg.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/business_envmonitoring/rzs_icon.svg b/src/assets/business_envmonitoring/rzs_icon.svg new file mode 100644 index 0000000..6618dd8 --- /dev/null +++ b/src/assets/business_envmonitoring/rzs_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/business_envmonitoring/warning_icon.svg b/src/assets/business_envmonitoring/warning_icon.svg new file mode 100644 index 0000000..652ae94 --- /dev/null +++ b/src/assets/business_envmonitoring/warning_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/business_envmonitoring/ysz_icon.svg b/src/assets/business_envmonitoring/ysz_icon.svg new file mode 100644 index 0000000..1ce70ae --- /dev/null +++ b/src/assets/business_envmonitoring/ysz_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/business_envmonitoring/zcl_icon.svg b/src/assets/business_envmonitoring/zcl_icon.svg new file mode 100644 index 0000000..ab13d36 --- /dev/null +++ b/src/assets/business_envmonitoring/zcl_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/business_envmonitoring/components/WasteMonitoring.js b/src/pages/business_envmonitoring/components/WasteMonitoring.js index f53ce40..7853e1e 100644 --- a/src/pages/business_envmonitoring/components/WasteMonitoring.js +++ b/src/pages/business_envmonitoring/components/WasteMonitoring.js @@ -1,10 +1,55 @@ -import React from 'react'; +import React, { useState } from 'react'; import styles from './WasteMonitoring.less'; +import ProductWaste from './secondary_menu/ProductWaste'; // 产废管理 +import GeneralSolidWaste from './secondary_menu/GeneralSolidWaste'; // 一般固废 +// import HazardouSolidWaste from './secondary_menu/HazardouSolidWaste'; // 危固废 const WasteMonitoring = () => { + const [activeMenu, setActiveMenu] = useState('product'); + + const menuItems = [ + { key: 'product', label: '产废管理' }, + { key: 'general', label: '一般固废' }, + { key: 'hazardou', label: '危固废' }, + ]; + + const handleMenuClick = (key) => { + setActiveMenu(key); + }; + + const renderContent = () => { + switch (activeMenu) { + case 'product': + return ; + case 'general': + return ; + case 'hazardou': + return ; + default: + return ; + } + }; + return (
- 开发中 + {/* 左侧菜单 */} +
+ {menuItems.map(item => ( +
handleMenuClick(item.key)} + > + {activeMenu === item.key &&
} + {item.label} +
+ ))} +
+ + {/* 右侧内容区 */} +
+ {renderContent()} +
); }; diff --git a/src/pages/business_envmonitoring/components/WasteMonitoring.less b/src/pages/business_envmonitoring/components/WasteMonitoring.less index 6d0fee9..48579ef 100644 --- a/src/pages/business_envmonitoring/components/WasteMonitoring.less +++ b/src/pages/business_envmonitoring/components/WasteMonitoring.less @@ -2,40 +2,84 @@ width: 100%; height: 100%; display: flex; - justify-content: center; - align-items: center; - background-color: #fff; - border-radius: 4px; - padding: 20px; + gap: 10px; + padding-left: 5px; + // padding-right: 5px; + padding-top: 10px; + padding-bottom: 10px; + background-color: #f5f5f5; - .developingBox { + // 左侧菜单 + .leftMenu { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - padding: 60px 80px; - background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - border-radius: 12px; - box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3); - - .developingText { - font-size: 32px; - font-weight: 600; - color: #ffffff; - letter-spacing: 4px; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - animation: pulse 2s ease-in-out infinite; + // gap: 1px; + flex-shrink: 0; + background-color: #fff; + + .menuItem { + width: 100px; + height: 50px; + background-color: #FFFFFF; + border-radius: 4px; + display: flex; + align-items: center; + position: relative; + cursor: pointer; + transition: all 0.3s ease; + padding-left: 20px; + + .menuText { + font-size: 14px; + color: #999999; + font-weight: 400; + transition: color 0.3s ease; + } + + // 激活状态的指示器（左侧长条） + .activeIndicator { + position: absolute; + left: 3px; + width: 17.34765625px; + height: 1.97802734375px; + border-radius: 6px; + background-color: #009D6F; + transform: rotate(-90deg); + } + + // 激活状态样式 + &.active { + background-color: #D4FFEC; + + .menuText { + color: #009D6F; + } + } + + // 鼠标悬停效果 + &:hover:not(.active) { + background-color: #f9f9f9; + } } } -} -@keyframes pulse { - 0%, 100% { - opacity: 1; - transform: scale(1); - } - 50% { - opacity: 0.8; - transform: scale(1.05); + // 右侧内容区 + .rightContent { + flex: 1; + // background-color: #FFFFFF; + border-radius: 4px; + // padding: 20px; + overflow: auto; + + .contentPlaceholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #666666; + } } } + diff --git a/src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.js b/src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.js new file mode 100644 index 0000000..d4b096c --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.js @@ -0,0 +1,368 @@ +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 './ProductWaste.less'; +import ledgerIcon from '@/assets/business_envmonitoring/ledger_icon.svg'; +import alarmIcon from '@/assets/business_envmonitoring/alarm_icon.svg'; +import warningIcon from '@/assets/business_envmonitoring/warning_icon.svg'; +import normalIcon from '@/assets/business_envmonitoring/normal_icon.svg'; +const ProductWaste = () => { + const leftRef = useRef(null); + const [leftHeight, setLeftHeight] = useState('auto'); + useEffect(() => { + function updateHeight() { + if (leftRef.current) { + setLeftHeight(leftRef.current.offsetHeight); + } + } + updateHeight(); + window.addEventListener('resize', updateHeight); + return () => window.removeEventListener('resize', updateHeight); + }, []); + const yearOptions = [ + { label: '2024', value: '2024' }, + { label: '2023', value: '2023' }, + ]; + + const timeTypeOptions = [ + { label: '月', value: 'month' }, + { label: '季度', value: 'quarter' }, + { label: '年', value: 'year' }, + ]; + + const monthOptions = [ + { label: '本月', value: 'month' }, + { label: '本季度', value: 'quarter' }, + { label: '本年', value: 'year' }, + ]; + + // 折线图 option + const lineOption = { + tooltip: { trigger: 'axis' }, + legend: { + data: ['产废量', '贮存量', '处置量'], + top: 0, + itemWidth: 18, // 图标宽度 + itemHeight: 8 // 图标高度 + }, + grid: { left: 40, right: 20, top: 30, bottom: 20 }, + xAxis: { + type: 'category', + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + axisLine: { + lineStyle: { + color: '#D5E2FF' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#333' + } + }, + yAxis: { + type: 'value', + name: '(吨)', + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#D5E2FF' + } + } + }, + series: [ + { name: '产废量', type: 'line', smooth: false, data: [20, 25, 18, 22, 30, 15, 28, 19, 24, 21, 27, 23], lineStyle: { color: '#FF8800', width: 1 }, itemStyle: { color: '#FF8800' } }, + { name: '贮存量', type: 'line', smooth: false, data: [30, 28, 32, 25, 20, 27, 22, 29, 26, 31, 24, 28], lineStyle: { color: '#FFC403', width: 1 }, itemStyle: { color: '#FFC403' } }, + { name: '处置量', type: 'line', smooth: false, data: [15, 10, 12, 18, 20, 13, 17, 14, 16, 11, 19, 12], lineStyle: { color: '#00AAFA', width: 1 }, itemStyle: { color: '#00AAFA' } }, + ], + }; + + // 南丁格尔玫瑰图 option（数值大的扇叶半径更大） + const pieOption = { + color: ['#32AEED', '#4FD884', '#6D59FF', '#FF685D', '#D25BDD', '#FFB800'], + legend: { + orient: 'vertical', + right: '10%', + top: 'center', + itemWidth: 13, + itemHeight: 4, + textStyle: { + fontSize: 12, + color: '#333' + } + }, + series: [{ + name: '固废种类构成', + type: 'pie', + // radius: ['20%', '70%'], + center: ['30%', '45%'], + // roseType: 'radius', // 南丁格尔玫瑰图，扇区半径根据数值大小变化 + avoidLabelOverlap: false, + label: { + show: true, + position: 'inside', + formatter: '{d}%', // 显示占比百分数 + fontSize: 12, + color: '#ffffff', + fontWeight: 'bold' + }, + emphasis: { + label: { + show: true, + fontSize: '14', + fontWeight: 'bold' + } + }, + labelLine: { + show: true, + length: 10, + length2: 5, + lineStyle: { + color: '#999', + width: 1 + } + }, + data: [ + { value: 45, name: '危险废物' }, + { value: 10, name: '一般固废' }, + { value: 13, name: '建筑垃圾' }, + { value: 15, name: '医疗废物' }, + { value: 8, name: '电子废物' }, + { value: 9, name: '其他' } + ] + }] + }; + + // 危固废占比 + const dangerPercent = 88; + + // 固废点情况 + const pointStatus = [ + { type: '超期库存点', value: 8, color: '#FF6B6B', btn: '详情' }, + { type: '预警库存点', value: 12, color: '#FFD666', btn: '详情' }, + { type: '正常库存点', value: 8, color: '#52C41A', btn: '详情' }, + ]; + + // 单位产废排名 option + const rankData = [ + { name: 'xxx单位', value: 50.21 }, + { name: 'xxx单位', value: 50.00 }, + { name: 'xxx单位', value: 48.52 }, + { name: 'xxx单位', value: 45.03 }, + { name: 'xxx单位', value: 30.25 }, + { name: 'xxx单位', value: 30.00 }, + { name: 'xxx单位', value: 20.02 }, + { name: 'xxx单位', value: 30.25 }, + ]; + + const maxValue = Math.max(...rankData.map(item => item.value)); + + // 各类别固废量 option + 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 ledgerBtns = [ + '产废单位及产废信息', + '危固废单位及产废信息', + '贮废点及贮废信息', + '固废种类信息', + '固废利用处置明细', + '固废运输单位', + ]; + return ( +
+
+ {/* 左侧容器 */} +
+ + {/* 顶部折线图+右侧单位产废排名 */} + + +
+ 固定产、存、处趋势分析 +
+ +
+
+ + + + + + {/* 左侧危固废占比+中间饼图+右侧固废点情况 */} + + +
+ 危固废占比 +
+ +
+
+
+ ( + <> +
{`${p}%`}
+
危固废
+ + + )} + /> +
+ + + + +
+ 固废种类构成 +
+ +
+
+ + + + + + 贮废点情况 +
+ {/* 超限库存点 */} +
+
+ + 超限库存点 + + 超限库存点 + 8 +
+ +
+ {/* 预警库存点 */} +
+
+ + 预警库存点 + + 预警库存点 + 12 +
+ +
+ {/* 正常库存点 */} +
+
+ + 正常库存点 + + 正常库存点 + 8 +
+ +
+
+ + + +
+ {/* 右侧容器 */} +
+ +
+ 单位产废排名 + +