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

src/assets/business_envmonitoring/alarm_icon.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6 5.4C12.6 4.90294 13.0029 4.5 13.5 4.5C13.9971 4.5 14.4 4.90294 14.4 5.4C14.4 5.89706 13.9971 6.3 13.5 6.3C13.0029 6.3 12.6 5.89706 12.6 5.4ZM7.1379 8.4123C6.78648 8.06088 6.78648 7.49112 7.1379 7.1397C7.48932 6.78828 8.05908 6.78828 8.4105 7.1397C8.76192 7.49112 8.76192 8.06088 8.4105 8.4123C8.05908 8.76372 7.48932 8.76372 7.1379 8.4123ZM4.5 13.5C4.5 13.0029 4.90294 12.6 5.4 12.6C5.89706 12.6 6.3 13.0029 6.3 13.5C6.3 13.9971 5.89706 14.4 5.4 14.4C4.90294 14.4 4.5 13.9971 4.5 13.5ZM20.7 13.5C20.7 13.0029 21.1029 12.6 21.6 12.6C22.0971 12.6 22.5 13.0029 22.5 13.5C22.5 13.9971 22.0971 14.4 21.6 14.4C21.1029 14.4 20.7 13.9971 20.7 13.5ZM18.5894 8.41759C18.238 8.06619 18.2379 7.4965 18.5892 7.14499C18.9407 6.79321 19.5109 6.79321 19.8624 7.14499C20.2137 7.4965 20.2136 8.06619 19.8622 8.41759C19.5107 8.76907 18.9409 8.76907 18.5894 8.41759Z" fill="#FF2626"/>
+<path d="M19.8 13.4992C19.8 11.8284 19.1363 10.2259 17.9548 9.04445C16.7733 7.86297 15.1709 7.19922 13.5 7.19922C11.8291 7.19922 10.2267 7.86297 9.04523 9.04445C7.86375 10.2259 7.2 11.8284 7.2 13.4992V20.6992H5.4C4.90294 20.6992 4.5 21.1022 4.5 21.5992C4.5 22.0963 4.90294 22.4992 5.4 22.4992H21.6C22.0971 22.4992 22.5 22.0963 22.5 21.5992C22.5 21.1022 22.0971 20.6992 21.6 20.6992H19.8V13.4992ZM12.6 10.7992C12.6 10.3022 13.0029 9.89922 13.5 9.89922C13.9971 9.89922 14.4 10.3022 14.4 10.7992V15.2992C14.4 15.7963 13.9971 16.1992 13.5 16.1992C13.0029 16.1992 12.6 15.7963 12.6 15.2992V10.7992ZM12.6 18.8992C12.6 18.4022 13.0029 17.9992 13.5 17.9992C13.9971 17.9992 14.4 18.4022 14.4 18.8992C14.4 19.3963 13.9971 19.7992 13.5 19.7992C13.0029 19.7992 12.6 19.3963 12.6 18.8992Z" fill="#FF2626"/>
+</svg>

src/assets/business_envmonitoring/jhrk_icon.svg

@@ -0,0 +1,20 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.703 5.16797H7.93297C6.83497 5.16797 5.78195 5.60415 5.00555 6.38055C4.22915 7.15695 3.79297 8.20997 3.79297 9.30797V32.078C3.79297 32.6216 3.90005 33.16 4.10811 33.6623C4.31616 34.1646 4.62111 34.621 5.00555 35.0054C5.38998 35.3898 5.84637 35.6948 6.34866 35.9028C6.85095 36.1109 7.3893 36.218 7.93297 36.218H30.703C31.801 36.218 32.854 35.7818 33.6304 35.0054C34.4068 34.229 34.843 33.176 34.843 32.078V9.30797C34.843 8.20997 34.4068 7.15695 33.6304 6.38055C32.854 5.60415 31.801 5.16797 30.703 5.16797Z" fill="#00D9A6"/>
+<path opacity="0.4" d="M38.5116 12.2188H15.7416C14.6436 12.2188 13.5905 12.6549 12.8141 13.4313C12.0377 14.2077 11.6016 15.2608 11.6016 16.3588V39.1287C11.6016 40.2267 12.0377 41.2798 12.8141 42.0562C13.5905 42.8326 14.6436 43.2688 15.7416 43.2688H38.5116C39.6096 43.2688 40.6626 42.8326 41.439 42.0562C42.2154 41.2798 42.6516 40.2267 42.6516 39.1287V16.3588C42.6516 15.2608 42.2154 14.2077 41.439 13.4313C40.6626 12.6549 39.6096 12.2188 38.5116 12.2188Z" fill="#82FAC6"/>
+<path opacity="0.4" d="M15.64 12.5781H38.41C39.4127 12.5781 40.3743 12.9764 41.0833 13.6854C41.7923 14.3944 42.1906 15.3561 42.1906 16.3588V39.1287C42.1906 40.1314 41.7923 41.0931 41.0833 41.8021C40.3743 42.5111 39.4127 42.9094 38.41 42.9094H15.64C14.6373 42.9094 13.6757 42.5111 12.9667 41.8021C12.2577 41.0931 11.8594 40.1314 11.8594 39.1287V16.3588C11.8594 15.3561 12.2577 14.3944 12.9667 13.6854C13.6757 12.9764 14.6373 12.5781 15.64 12.5781ZM42.9094 16.3588C42.9094 15.1654 42.4353 14.021 41.5915 13.1772C40.7477 12.3334 39.6033 11.8594 38.41 11.8594H15.64C14.4467 11.8594 13.3023 12.3334 12.4585 13.1772C11.6147 14.021 11.1406 15.1654 11.1406 16.3588V39.1287C11.1406 40.3221 11.6147 41.4665 12.4585 42.3103C13.3023 43.1541 14.4467 43.6281 15.64 43.6281H38.41C39.6033 43.6281 40.7477 43.1541 41.5915 42.3103C42.4353 41.4665 42.9094 40.3221 42.9094 39.1287V16.3588Z" fill="white"/>
+<g filter="url(#filter0_d_2132_25558)">
+<path d="M22.0344 33.5069C22.5002 33.6689 22.8686 34.0361 23.0327 34.5003H36.1253C36.269 34.5003 36.4068 34.5574 36.5083 34.659C36.6099 34.7606 36.667 34.8984 36.667 35.042C36.667 35.1857 36.6099 35.3234 36.5083 35.425C36.4068 35.5266 36.269 35.5837 36.1253 35.5837H23.0332C22.9416 35.8429 22.7858 36.0747 22.5803 36.2573C22.3747 36.4399 22.1262 36.5674 21.858 36.6279C21.5898 36.6883 21.3106 36.6798 21.0466 36.603C20.7826 36.5262 20.5424 36.3837 20.3484 36.1889C20.1545 35.994 20.0131 35.7531 19.9376 35.4887C19.862 35.2244 19.8548 34.9452 19.9165 34.6772C19.9782 34.4093 20.1069 34.1614 20.2905 33.9567C20.4741 33.7521 20.7066 33.5973 20.9662 33.5069C20.9612 33.4772 20.9587 33.4471 20.9587 33.417V21.7246L19.4924 20.2583C19.3935 20.1562 19.3387 20.0193 19.3399 19.8771C19.341 19.735 19.398 19.599 19.4985 19.4985C19.599 19.398 19.735 19.341 19.8771 19.3399C20.0193 19.3387 20.1562 19.3935 20.2583 19.4924L21.7907 21.0242C21.8064 21.0405 21.821 21.0567 21.834 21.0735C21.8989 21.1241 21.9513 21.1889 21.9874 21.2629C22.0234 21.3368 22.0421 21.4181 22.042 21.5003V33.417C22.042 33.4479 22.0393 33.4777 22.0344 33.5069ZM24.2087 20.9587H34.5003C34.7876 20.9587 35.0632 21.0728 35.2664 21.276C35.4695 21.4791 35.5837 21.7547 35.5837 22.042V32.3337C35.5837 32.621 35.4695 32.8965 35.2664 33.0997C35.0632 33.3029 34.7876 33.417 34.5003 33.417H24.2087C23.9214 33.417 23.6458 33.3029 23.4426 33.0997C23.2395 32.8965 23.1253 32.621 23.1253 32.3337V22.042C23.1253 21.7547 23.2395 21.4791 23.4426 21.276C23.6458 21.0728 23.9214 20.9587 24.2087 20.9587ZM30.167 29.0837C30.0233 29.0837 29.8856 29.1408 29.784 29.2423C29.6824 29.3439 29.6253 29.4817 29.6253 29.6253C29.6253 29.769 29.6824 29.9068 29.784 30.0084C29.8856 30.1099 30.0233 30.167 30.167 30.167H32.3337C32.4773 30.167 32.6151 30.1099 32.7167 30.0084C32.8183 29.9068 32.8753 29.769 32.8753 29.6253C32.8753 29.4817 32.8183 29.3439 32.7167 29.2423C32.6151 29.1408 32.4773 29.0837 32.3337 29.0837H30.167ZM21.5003 35.5837C21.644 35.5837 21.7818 35.5266 21.8833 35.425C21.9849 35.3234 22.042 35.1857 22.042 35.042C22.042 34.8984 21.9849 34.7606 21.8833 34.659C21.7818 34.5574 21.644 34.5003 21.5003 34.5003C21.3567 34.5003 21.2189 34.5574 21.1173 34.659C21.0157 34.7606 20.9587 34.8984 20.9587 35.042C20.9587 35.1857 21.0157 35.3234 21.1173 35.425C21.2189 35.5266 21.3567 35.5837 21.5003 35.5837Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2132_25558" x="17.7398" y="18.7398" width="20.5281" height="20.5281" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.107341 0 0 0 0 0.826923 0 0 0 0 0.657805 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2132_25558"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2132_25558" result="shape"/>
+</filter>
+</defs>
+</svg>

src/assets/business_envmonitoring/ledger_icon.svg

@@ -0,0 +1,32 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.8867 45.7734C35.5267 45.7734 45.7734 35.5267 45.7734 22.8867C45.7734 10.2467 35.5267 0 22.8867 0C10.2467 0 0 10.2467 0 22.8867C0 35.5267 10.2467 45.7734 22.8867 45.7734Z" fill="#E5FFF4"/>
+<g clip-path="url(#clip0_2132_25392)" filter="url(#filter0_d_2132_25392)">
+<path opacity="0.41" d="M12.2669 17.2471L33.4942 9.96887C33.8943 9.84251 34.1443 9.96887 34.2943 10.3732L39.6199 26.2186C39.7449 26.6229 39.6199 26.8757 39.2199 27.0273L17.9925 34.2803C17.5925 34.4066 17.3424 34.2803 17.1924 33.8759L11.8668 18.0558C11.7418 17.6515 11.8668 17.3988 12.2669 17.2471Z" fill="url(#paint0_linear_2132_25392)"/>
+<path d="M9.0157 15.0742H31.0932C31.5182 15.0742 31.7182 15.2764 31.7182 15.706V30.9701C31.7182 31.3998 31.5182 31.6019 31.0932 31.6019H9.0157C8.59065 31.6019 8.39062 31.3998 8.39062 30.9701V15.706C8.39062 15.2764 8.59065 15.0742 9.0157 15.0742Z" fill="url(#paint1_linear_2132_25392)"/>
+<path d="M23.9688 20.5816C23.9688 22.2495 25.2939 23.5889 26.9441 23.5889C28.5943 23.5889 29.9194 22.2495 29.9194 20.5816C29.9194 18.9136 28.5943 17.5742 26.9441 17.5742C25.3189 17.5742 23.9688 18.9136 23.9688 20.5816Z" fill="white"/>
+<path d="M13.4688 25.9141H21.7697C21.8697 25.9141 21.9197 25.9646 21.9197 26.0657V27.4809C21.9197 27.582 21.8697 27.6325 21.7697 27.6325H13.4688C13.3688 27.6325 13.3188 27.582 13.3188 27.4809V26.091C13.2937 25.9646 13.3438 25.9141 13.4688 25.9141Z" fill="white"/>
+<path d="M13.4688 22.4531H18.5443C18.6443 22.4531 18.6944 22.5037 18.6944 22.6048V24.02C18.6944 24.1211 18.6443 24.1716 18.5443 24.1716H13.4688C13.3688 24.1716 13.3188 24.1211 13.3188 24.02V22.6048C13.2937 22.5037 13.3438 22.4531 13.4688 22.4531Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2132_25392" x="2.39062" y="7.91797" width="43.2773" height="36.4121" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.180392 0 0 0 0 0.298039 0 0 0 0 0.831373 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2132_25392"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2132_25392" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_2132_25392" x1="25.7434" y1="9.92187" x2="25.7434" y2="34.3273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36FF73"/>
+<stop offset="1" stop-color="#00E271"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2132_25392" x1="20.0544" y1="15.0742" x2="20.0544" y2="31.6019" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36FF73"/>
+<stop offset="1" stop-color="#00E271"/>
+</linearGradient>
+<clipPath id="clip0_2132_25392">
+<rect width="31.2785" height="24.4125" fill="white" transform="translate(8.39062 9.91797)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/business_envmonitoring/ljcz_icon.svg

@@ -0,0 +1,20 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.703 5.16797H7.93297C6.83497 5.16797 5.78195 5.60415 5.00555 6.38055C4.22915 7.15695 3.79297 8.20997 3.79297 9.30797V32.078C3.79297 32.6216 3.90005 33.16 4.10811 33.6623C4.31616 34.1646 4.62111 34.621 5.00555 35.0054C5.38998 35.3898 5.84637 35.6948 6.34866 35.9028C6.85095 36.1109 7.3893 36.218 7.93297 36.218H30.703C31.801 36.218 32.854 35.7818 33.6304 35.0054C34.4068 34.229 34.843 33.176 34.843 32.078V9.30797C34.843 8.20997 34.4068 7.15695 33.6304 6.38055C32.854 5.60415 31.801 5.16797 30.703 5.16797Z" fill="#00D9A6"/>
+<path opacity="0.4" d="M38.5116 12.2188H15.7416C14.6436 12.2188 13.5905 12.6549 12.8141 13.4313C12.0377 14.2077 11.6016 15.2608 11.6016 16.3588V39.1287C11.6016 40.2267 12.0377 41.2798 12.8141 42.0562C13.5905 42.8326 14.6436 43.2688 15.7416 43.2688H38.5116C39.6096 43.2688 40.6626 42.8326 41.439 42.0562C42.2154 41.2798 42.6516 40.2267 42.6516 39.1287V16.3588C42.6516 15.2608 42.2154 14.2077 41.439 13.4313C40.6626 12.6549 39.6096 12.2188 38.5116 12.2188Z" fill="#82FAC6"/>
+<path opacity="0.4" d="M15.64 12.5781H38.41C39.4127 12.5781 40.3743 12.9764 41.0833 13.6854C41.7923 14.3944 42.1906 15.3561 42.1906 16.3588V39.1287C42.1906 40.1314 41.7923 41.0931 41.0833 41.8021C40.3743 42.5111 39.4127 42.9094 38.41 42.9094H15.64C14.6373 42.9094 13.6757 42.5111 12.9667 41.8021C12.2577 41.0931 11.8594 40.1314 11.8594 39.1287V16.3588C11.8594 15.3561 12.2577 14.3944 12.9667 13.6854C13.6757 12.9764 14.6373 12.5781 15.64 12.5781ZM42.9094 16.3588C42.9094 15.1654 42.4353 14.021 41.5915 13.1772C40.7477 12.3334 39.6033 11.8594 38.41 11.8594H15.64C14.4467 11.8594 13.3023 12.3334 12.4585 13.1772C11.6147 14.021 11.1406 15.1654 11.1406 16.3588V39.1287C11.1406 40.3221 11.6147 41.4665 12.4585 42.3103C13.3023 43.1541 14.4467 43.6281 15.64 43.6281H38.41C39.6033 43.6281 40.7477 43.1541 41.5915 42.3103C42.4353 41.4665 42.9094 40.3221 42.9094 39.1287V16.3588Z" fill="white"/>
+<g filter="url(#filter0_d_2132_25611)">
+<path d="M22.3176 36.05V35.1238C22.3176 34.5668 22.7691 34.1154 23.3259 34.1154H33.8316L35.87 33.2321C37.5887 32.4874 38.3783 30.4904 37.6336 28.7716C37.5663 28.6163 37.4875 28.4663 37.3978 28.3227L35.9556 26.0146L35.9737 26.0137L33.4278 18.9639C32.9383 17.6086 31.4719 16.8751 30.0939 17.2965L28.1719 17.8841C27.5118 18.0849 26.9538 18.5313 26.613 19.1313L22.1036 20.0645C21.8212 20.1226 21.5521 20.2324 21.3097 20.3885L21.2212 20.3469C20.3965 19.9591 19.4137 20.3131 19.0258 21.1377C19.0001 21.1923 18.9775 21.2483 18.9579 21.3054L17.0877 26.7658C16.8755 27.3854 17.0525 28.0526 17.5015 28.4867L17.1131 29.3269L19.6841 30.5362L20.1264 29.5794C20.3746 29.5556 20.6142 29.4759 20.8271 29.3461C21.04 29.2164 21.2207 29.0401 21.3557 28.8304L24.2129 24.3946L27.2735 23.7612L27.7524 25.091L22.0153 30.3128C20.8031 31.4161 20.5534 33.2284 21.4219 34.6184L22.2719 35.9786C22.2869 36.0026 22.3021 36.0263 22.3176 36.0499V36.05ZM31.9571 22.519C31.3208 22.506 30.6738 22.6718 30.0937 23.0342C29.9572 23.1195 29.8269 23.2145 29.7038 23.3183C29.3901 23.2197 29.1051 23.0461 28.8737 22.8124C28.6423 22.5788 28.4714 22.2922 28.3759 21.9775C28.05 20.9114 28.6429 19.7853 29.7003 19.462C30.7575 19.1387 31.8789 19.7408 32.2049 20.8069C32.2929 21.0928 32.3163 21.3947 32.2735 21.6908C32.2306 21.9869 32.1226 22.2698 31.9571 22.519ZM29.7425 30.2063C29.0055 29.0268 29.3721 27.4682 30.5613 26.7252C31.7505 25.982 33.3119 26.3359 34.049 27.5153C34.786 28.6948 34.4194 30.2534 33.2302 30.9965C32.0411 31.7396 30.4796 31.3858 29.7425 30.2063ZM19.3996 23.5165L18.5975 25.8362C18.363 26.5145 18.6791 27.2631 19.3319 27.5752C19.9894 27.8895 20.7761 27.671 21.1698 27.0647L22.5371 24.959C23.0453 24.1763 22.8168 23.1279 22.0268 22.6174C21.9608 22.5748 21.8918 22.5367 21.8206 22.5035C20.932 22.0891 19.8784 22.4677 19.4673 23.3491C19.4419 23.4036 19.4193 23.4595 19.3996 23.5165ZM19.1598 23.4331C19.1823 23.368 19.2081 23.3041 19.2372 23.2417C19.707 22.2343 20.9113 21.8016 21.927 22.2752C22.0089 22.3134 22.0881 22.3572 22.164 22.4062C23.0717 22.9928 23.3343 24.1974 22.7503 25.0968L21.3831 27.2025C20.9204 27.9149 19.9959 28.1718 19.2233 27.8023C18.4539 27.4346 18.0813 26.5523 18.3578 25.7529L19.1599 23.4331L19.1598 23.4331ZM34.267 34.6048H23.8679C23.311 34.6048 22.8595 35.0563 22.8595 35.6132V37.5331C22.8595 38.09 23.311 38.5415 23.8679 38.5415H34.267C34.824 38.5415 35.2753 38.09 35.2753 37.5331V35.6131C35.2753 35.0562 34.824 34.6047 34.267 34.6047V34.6048Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2132_25611" x="14.4" y="16.4" width="25.2" height="25.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.107341 0 0 0 0 0.826923 0 0 0 0 0.657805 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2132_25611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2132_25611" result="shape"/>
+</filter>
+</defs>
+</svg>

src/assets/business_envmonitoring/normal_icon.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4996 4.5C8.52957 4.5 4.5 8.52959 4.5 13.4996C4.5 18.4697 8.52959 22.4992 13.4996 22.4992C18.4697 22.4992 22.4992 18.4697 22.4992 13.4996C22.4992 8.52959 18.4697 4.5 13.4996 4.5ZM18.3819 11.9539L13.0789 17.257C12.7865 17.5498 12.3122 17.5502 12.0193 17.2578L12.0184 17.257L9.3673 14.6058C9.07446 14.313 9.07446 13.8382 9.3673 13.5453C9.66014 13.2525 10.1349 13.2525 10.4278 13.5453L12.5487 15.6663L17.3215 10.8935C17.6194 10.6057 18.0942 10.614 18.3819 10.9119C18.6626 11.2025 18.6626 11.6633 18.3819 11.9539Z" fill="#6FE583"/>
+</svg>

src/assets/business_envmonitoring/rzs_icon.svg

@@ -0,0 +1,5 @@
+<svg width="35" height="32" viewBox="0 0 35 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.22757 1.91992H26.0561C27.1473 1.91992 28.1938 2.32449 28.9654 3.04463C29.737 3.76477 30.1704 4.74149 30.1704 5.75992V26.2399C30.1704 27.2584 29.737 28.2351 28.9654 28.9552C28.1938 29.6754 27.1473 30.0799 26.0561 30.0799H8.22757C7.13639 30.0799 6.08991 29.6754 5.31833 28.9552C4.54675 28.2351 4.11328 27.2584 4.11328 26.2399V5.75992C4.11328 4.74149 4.54675 3.76477 5.31833 3.04463C6.08991 2.32449 7.13639 1.91992 8.22757 1.91992Z" fill="#F68827"/>
+<path d="M12.6848 23.6797H21.5991C22.2848 23.6797 22.6277 23.9997 22.6277 24.6397C22.6277 25.2797 22.2848 25.5997 21.5991 25.5997H12.6848C11.9991 25.5997 11.6562 25.2797 11.6562 24.6397C11.6562 23.9997 11.9991 23.6797 12.6848 23.6797Z" fill="white"/>
+<path d="M9.94263 19.1993H24.3426C24.6154 19.1993 24.877 19.3005 25.0699 19.4805C25.2628 19.6605 25.3712 19.9047 25.3712 20.1593C25.3712 20.4139 25.2628 20.6581 25.0699 20.8382C24.877 21.0182 24.6154 21.1193 24.3426 21.1193H9.94263C9.66984 21.1193 9.40822 21.0182 9.21532 20.8382C9.02243 20.6581 8.91406 20.4139 8.91406 20.1593C8.91406 19.9047 9.02243 19.6605 9.21532 19.4805C9.40822 19.3005 9.66984 19.1993 9.94263 19.1993ZM16.7134 16.2144L14.709 16.8307C14.5028 16.8941 14.2834 16.9109 14.0689 16.8798C13.8544 16.8486 13.6508 16.7704 13.475 16.6515C13.2992 16.5326 13.1562 16.3764 13.0577 16.1958C12.9591 16.0152 12.908 15.8154 12.9083 15.6128L12.9125 13.6089C12.9131 13.3385 12.8218 13.0747 12.6519 12.8557L11.3902 11.2288C11.2634 11.0653 11.1797 10.8762 11.1461 10.6769C11.1125 10.4776 11.1299 10.2736 11.1968 10.0818C11.2637 9.88987 11.3783 9.71548 11.5312 9.5728C11.6841 9.43012 11.871 9.32321 12.0766 9.26077L14.1015 8.64637C14.3792 8.56212 14.6209 8.39732 14.7913 8.17597L16.0283 6.56701C16.1553 6.40184 16.3226 6.26728 16.5164 6.17445C16.7102 6.08162 16.9248 6.0332 17.1426 6.0332C17.3604 6.0332 17.5751 6.08162 17.7689 6.17445C17.9627 6.26728 18.1299 6.40184 18.2569 6.56701L19.4939 8.17597C19.6644 8.39732 19.906 8.56212 20.1838 8.64637L22.2087 9.26077C22.4143 9.32321 22.6012 9.43012 22.754 9.5728C22.9069 9.71548 23.0215 9.88987 23.0884 10.0818C23.1554 10.2736 23.1727 10.4776 23.1391 10.6769C23.1055 10.8762 23.0219 11.0653 22.8951 11.2288L21.6334 12.8557C21.4634 13.0747 21.3722 13.3385 21.3728 13.6089L21.3769 15.6128C21.3773 15.8154 21.3261 16.0152 21.2276 16.1958C21.1291 16.3764 20.986 16.5326 20.8102 16.6515C20.6344 16.7704 20.4309 16.8486 20.2164 16.8798C20.0018 16.9109 19.7824 16.8941 19.5762 16.8307L17.5719 16.2144C17.2931 16.1286 16.9922 16.1286 16.7134 16.2144Z" fill="white"/>
+</svg>

src/assets/business_envmonitoring/warning_icon.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5602 22.2654C12.3876 22.2654 11.4406 21.3204 11.4406 20.1504H15.6649C15.6799 21.3204 14.7328 22.2654 13.5602 22.2654ZM7.4647 18.7659C6.95892 18.7659 6.50781 18.4959 6.50781 17.9409C6.50781 17.3859 6.9179 16.9359 7.43737 16.9359C7.43737 16.9359 8.03884 16.6959 8.12085 15.2409V11.7309C8.12085 8.86594 9.76122 6.61594 12.2764 6.10594V5.76094C12.2765 5.17594 12.8506 4.71094 13.3974 4.71094H13.7118C14.2586 4.71094 14.8327 5.17594 14.8327 5.76094V6.10594C17.3479 6.61594 18.9883 8.85094 18.9883 11.7309V15.2409C19.0567 16.7109 19.6718 16.9359 19.6718 16.9359C20.1776 16.9359 20.6013 17.3859 20.6013 17.9409C20.5877 18.4959 20.1366 18.7659 19.6308 18.7659H7.4647ZM13.5858 14.5509C13.195 14.5509 12.8793 14.8059 12.8793 15.1209V15.4059C12.8793 15.7209 13.195 15.9759 13.5858 15.9759C13.9767 15.9759 14.2924 15.7209 14.2924 15.4059V15.1209C14.2924 14.8059 13.9767 14.5509 13.5858 14.5509ZM13.5858 8.46094C13.195 8.46094 12.8793 8.77594 12.8793 9.16594V12.4959C12.8793 12.8859 13.195 13.2009 13.5858 13.2009C13.9767 13.2009 14.2924 12.8859 14.2924 12.4959V9.16594C14.2924 8.77594 13.9767 8.46094 13.5858 8.46094Z" fill="#FF8112"/>
+</svg>

src/assets/business_envmonitoring/ysz_icon.svg

@@ -0,0 +1,20 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.703 5.16797H7.93297C6.83497 5.16797 5.78195 5.60415 5.00555 6.38055C4.22915 7.15695 3.79297 8.20997 3.79297 9.30797V32.078C3.79297 32.6216 3.90005 33.16 4.10811 33.6623C4.31616 34.1646 4.62111 34.621 5.00555 35.0054C5.38998 35.3898 5.84637 35.6948 6.34866 35.9028C6.85095 36.1109 7.3893 36.218 7.93297 36.218H30.703C31.801 36.218 32.854 35.7818 33.6304 35.0054C34.4068 34.229 34.843 33.176 34.843 32.078V9.30797C34.843 8.20997 34.4068 7.15695 33.6304 6.38055C32.854 5.60415 31.801 5.16797 30.703 5.16797Z" fill="#00D9A6"/>
+<path opacity="0.4" d="M38.5116 12.2188H15.7416C14.6436 12.2188 13.5905 12.6549 12.8141 13.4313C12.0377 14.2077 11.6016 15.2608 11.6016 16.3588V39.1287C11.6016 40.2267 12.0377 41.2798 12.8141 42.0562C13.5905 42.8326 14.6436 43.2688 15.7416 43.2688H38.5116C39.6096 43.2688 40.6626 42.8326 41.439 42.0562C42.2154 41.2798 42.6516 40.2267 42.6516 39.1287V16.3588C42.6516 15.2608 42.2154 14.2077 41.439 13.4313C40.6626 12.6549 39.6096 12.2188 38.5116 12.2188Z" fill="#82FAC6"/>
+<path opacity="0.4" d="M15.64 12.5781H38.41C39.4127 12.5781 40.3743 12.9764 41.0833 13.6854C41.7923 14.3944 42.1906 15.3561 42.1906 16.3588V39.1287C42.1906 40.1314 41.7923 41.0931 41.0833 41.8021C40.3743 42.5111 39.4127 42.9094 38.41 42.9094H15.64C14.6373 42.9094 13.6757 42.5111 12.9667 41.8021C12.2577 41.0931 11.8594 40.1314 11.8594 39.1287V16.3588C11.8594 15.3561 12.2577 14.3944 12.9667 13.6854C13.6757 12.9764 14.6373 12.5781 15.64 12.5781ZM42.9094 16.3588C42.9094 15.1654 42.4353 14.021 41.5915 13.1772C40.7477 12.3334 39.6033 11.8594 38.41 11.8594H15.64C14.4467 11.8594 13.3023 12.3334 12.4585 13.1772C11.6147 14.021 11.1406 15.1654 11.1406 16.3588V39.1287C11.1406 40.3221 11.6147 41.4665 12.4585 42.3103C13.3023 43.1541 14.4467 43.6281 15.64 43.6281H38.41C39.6033 43.6281 40.7477 43.1541 41.5915 42.3103C42.4353 41.4665 42.9094 40.3221 42.9094 39.1287V16.3588Z" fill="white"/>
+<g filter="url(#filter0_d_2132_25590)">
+<path d="M30.3125 32.273H23.5602C23.5602 33.452 22.6039 34.4105 21.425 34.4105C20.2461 34.4105 19.2875 33.4543 19.2875 32.2754V32.273H18.5609C18.1672 32.273 17.8484 31.9543 17.8484 31.5605V27.077C17.8484 26.7535 17.9586 26.4371 18.1625 26.184L20.2859 23.5473C20.5555 23.2098 20.9656 23.0152 21.3969 23.0152H24.2586C24.6523 23.0152 24.9711 23.334 24.9711 23.7277V30.848H26.3961V20.8801C26.3961 20.0926 27.0336 19.4551 27.8211 19.4551H37.0789C37.8664 19.4551 38.5039 20.0926 38.5039 20.8801V30.8504C38.5039 31.6379 37.8664 32.2754 37.0789 32.2754H34.5875C34.5875 33.4543 33.6312 34.4129 32.4523 34.4129C31.2688 34.4105 30.3125 33.4543 30.3125 32.273ZM21.4109 32.9855C21.8047 32.9855 22.1234 32.6668 22.1234 32.273C22.1234 31.8793 21.8047 31.5605 21.4109 31.5605C21.0172 31.5605 20.6984 31.8793 20.6984 32.273C20.6984 32.6668 21.0172 32.9855 21.4109 32.9855ZM23.0539 25.1527C23.0539 24.9559 22.8945 24.7965 22.6977 24.7965H21.5398C21.4344 24.7965 21.3336 24.8434 21.2656 24.9254L19.85 26.627C19.7961 26.6902 19.768 26.7723 19.768 26.8543V27.2902C19.768 27.4871 19.9273 27.6465 20.1242 27.6465H22.6977C22.8945 27.6465 23.0539 27.4871 23.0539 27.2902V25.1527ZM32.4477 32.9855C32.8414 32.9855 33.1602 32.6668 33.1602 32.273C33.1602 31.8793 32.8414 31.5605 32.4477 31.5605C32.0539 31.5605 31.7352 31.8793 31.7352 32.273C31.7375 32.6668 32.0563 32.9855 32.4477 32.9855ZM18.2141 34.4082H37.4398C37.8313 34.4082 38.1523 34.7293 38.1523 35.1207V35.8332C38.1523 36.2246 37.8313 36.5457 37.4398 36.5457H18.2141C17.8227 36.5457 17.5016 36.2246 17.5016 35.8332V35.1207C17.5016 34.7293 17.8227 34.4082 18.2141 34.4082Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2132_25590" x="15.9" y="18.8551" width="24.2039" height="20.2898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.107341 0 0 0 0 0.826923 0 0 0 0 0.657805 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2132_25590"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2132_25590" result="shape"/>
+</filter>
+</defs>
+</svg>

src/assets/business_envmonitoring/zcl_icon.svg

@@ -0,0 +1,20 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.703 5.16797H7.93297C6.83497 5.16797 5.78195 5.60415 5.00555 6.38055C4.22915 7.15695 3.79297 8.20997 3.79297 9.30797V32.078C3.79297 32.6216 3.90005 33.16 4.10811 33.6623C4.31616 34.1646 4.62111 34.621 5.00555 35.0054C5.38998 35.3898 5.84637 35.6948 6.34866 35.9028C6.85095 36.1109 7.3893 36.218 7.93297 36.218H30.703C31.801 36.218 32.854 35.7818 33.6304 35.0054C34.4068 34.229 34.843 33.176 34.843 32.078V9.30797C34.843 8.20997 34.4068 7.15695 33.6304 6.38055C32.854 5.60415 31.801 5.16797 30.703 5.16797Z" fill="#00D9A6"/>
+<path opacity="0.4" d="M38.5116 12.2188H15.7416C14.6436 12.2188 13.5905 12.6549 12.8141 13.4313C12.0377 14.2077 11.6016 15.2608 11.6016 16.3588V39.1287C11.6016 40.2267 12.0377 41.2798 12.8141 42.0562C13.5905 42.8326 14.6436 43.2688 15.7416 43.2688H38.5116C39.6096 43.2688 40.6626 42.8326 41.439 42.0562C42.2154 41.2798 42.6516 40.2267 42.6516 39.1287V16.3588C42.6516 15.2608 42.2154 14.2077 41.439 13.4313C40.6626 12.6549 39.6096 12.2188 38.5116 12.2188Z" fill="#82FAC6"/>
+<path opacity="0.4" d="M15.64 12.5781H38.41C39.4127 12.5781 40.3743 12.9764 41.0833 13.6854C41.7923 14.3944 42.1906 15.3561 42.1906 16.3588V39.1287C42.1906 40.1314 41.7923 41.0931 41.0833 41.8021C40.3743 42.5111 39.4127 42.9094 38.41 42.9094H15.64C14.6373 42.9094 13.6757 42.5111 12.9667 41.8021C12.2577 41.0931 11.8594 40.1314 11.8594 39.1287V16.3588C11.8594 15.3561 12.2577 14.3944 12.9667 13.6854C13.6757 12.9764 14.6373 12.5781 15.64 12.5781ZM42.9094 16.3588C42.9094 15.1654 42.4353 14.021 41.5915 13.1772C40.7477 12.3334 39.6033 11.8594 38.41 11.8594H15.64C14.4467 11.8594 13.3023 12.3334 12.4585 13.1772C11.6147 14.021 11.1406 15.1654 11.1406 16.3588V39.1287C11.1406 40.3221 11.6147 41.4665 12.4585 42.3103C13.3023 43.1541 14.4467 43.6281 15.64 43.6281H38.41C39.6033 43.6281 40.7477 43.1541 41.5915 42.3103C42.4353 41.4665 42.9094 40.3221 42.9094 39.1287V16.3588Z" fill="white"/>
+<g filter="url(#filter0_d_2132_25574)">
+<path d="M38.3401 24.0191L28.4885 16.9707C28.2041 16.7676 27.8182 16.7676 27.5541 16.9707L17.6416 24.0191C17.3166 24.2426 17.4791 24.7504 17.8854 24.7504H19.876V37.3441C19.876 37.5676 20.0588 37.7504 20.2823 37.7504H35.7198C35.9432 37.7504 36.126 37.5676 36.126 37.3441V24.7504H38.1166C38.5026 24.7504 38.6651 24.2426 38.3401 24.0191ZM26.376 34.5004H23.126V31.2504H26.376V34.5004ZM26.376 26.3754H29.626V29.6254H26.376V26.3754ZM32.876 34.5004H29.626V31.2504H32.876V34.5004Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2132_25574" x="15.8687" y="16.2184" width="24.2469" height="24.1316" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.107341 0 0 0 0 0.826923 0 0 0 0 0.657805 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2132_25574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2132_25574" result="shape"/>
+</filter>
+</defs>
+</svg>

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 <ProductWaste />;
+            case 'general':
+                return <GeneralSolidWaste />;
+            case 'hazardou':
+                return <HazardouSolidWaste />;
+            default:
+                return <ProductWaste />;
+        }
+    };
+
     return (
         <div className={styles.container}>
-          开发中
+            {/* 左侧菜单 */}
+            <div className={styles.leftMenu}>
+                {menuItems.map(item => (
+                    <div
+                        key={item.key}
+                        className={`${styles.menuItem} ${activeMenu === item.key ? styles.active : ''}`}
+                        onClick={() => handleMenuClick(item.key)}
+                    >
+                        {activeMenu === item.key && <div className={styles.activeIndicator}></div>}
+                        <span className={styles.menuText}>{item.label}</span>
+                    </div>
+                ))}
+            </div>
+
+            {/* 右侧内容区 */}
+            <div className={styles.rightContent}>
+                {renderContent()}
+            </div>
         </div>
     );
 };

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;
+        // gap: 1px;
+        flex-shrink: 0;
+        background-color: #fff;
+
+        .menuItem {
+            width: 100px;
+            height: 50px;
+            background-color: #FFFFFF;
+            border-radius: 4px;
+            display: flex;
             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);
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            padding-left: 20px;
 
-        .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;
+            .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);
             }
-}
 
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-        transform: scale(1);
+            // 激活状态样式
+            &.active {
+                background-color: #D4FFEC;
+
+                .menuText {
+                    color: #009D6F;
+                }
+            }
+
+            // 鼠标悬停效果
+            &:hover:not(.active) {
+                background-color: #f9f9f9;
+            }
+        }
+    }
+
+    // 右侧内容区
+    .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;
         }
-    50% {
-        opacity: 0.8;
-        transform: scale(1.05);
     }
 }
+

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 <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;

src/pages/business_envmonitoring/components/secondary_menu/GeneralSolidWaste.less

@@ -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;
+}

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 (
+        <div className="productWasteDashboard">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', marginBottom: 8 }}>
+                {/* 左侧容器 */}
+                <div style={{ width: '80%', marginRight: 8 }} ref={leftRef}>
+                    <Row style={{ marginBottom: 8 }}>
+                        {/* 顶部折线图+右侧单位产废排名 */}
+                        <Col span={24}>
+                            <Card className="pw-card pw-card-top">
+                                <div className="pw-card-header">
+                                    <span className="pw-title pw-title-blue">固定产、存、处趋势分析</span>
+                                    <div className="pw-select-group">
+                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
+                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
+                                    </div>
+                                </div>
+                                <ReactECharts option={lineOption} className="pw-echarts-line" style={{ height: 200 }} />
+                            </Card>
+                        </Col>
+                    </Row>
+                    <Row gutter={[8, 16]} className="pw-row-middle">
+                        {/* 左侧危固废占比+中间饼图+右侧固废点情况 */}
+                        <Col span={8}>
+                            <Card className="pw-card pw-card-middle">
+                                <div className="pw-card-header">
+                                    <span className="pw-title pw-title-blue">危固废占比</span>
+                                    <div className="pw-select-group">
+                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
+                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
+                                    </div>
+                                </div>
+                                <div className="pw-progress-circle-wrap">
+                                    <Progress
+                                        type="circle"
+                                        percent={dangerPercent}
+                                        width={120}
+                                        strokeColor={{ '0%': '#FF6B6B', '100%': '#FFD666' }}
+                                        format={p => (
+                                            <>
+                                                <div style={{ fontSize: 18, whiteSpace: 'pre-line', lineHeight: '18px', fontWeight: 'bold' }}>{`${p}%`}</div>
+                                                <div style={{ fontSize: 12, whiteSpace: 'pre-line', lineHeight: '18px' }}>危固废</div>
+                                            </>
+
+                                        )}
+                                    />
+                                </div>
+                            </Card>
+                        </Col>
+                        <Col span={8} style={{ padding: 0 }}>
+                            <Card className="pw-card pw-card-middle">
+                                <div className="pw-card-header">
+                                    <span className="pw-title pw-title-blue">固废种类构成</span>
+                                    <div className="pw-select-group">
+                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
+                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
+                                    </div>
+                                </div>
+                                <ReactECharts option={pieOption} className="pw-echarts-pie" style={{ height: 160 }} />
+                            </Card>
+                        </Col>
+                        <Col span={8}>
+                            <Card className="pw-card pw-card-middle">
+                                <span className="pw-title pw-title-blue">贮废点情况</span>
+                                <div className="pw-point-status-new-wrap">
+                                    {/* 超限库存点 */}
+                                    <div className="pw-point-status-new pw-point-status-over">
+                                        <div className="pw-point-status-left">
+                                            <span className="pw-point-status-icon">
+                                                <img src={alarmIcon} alt="超限库存点" />
+                                            </span>
+                                            <span className="pw-point-status-type">超限库存点</span>
+                                            <span className="pw-point-status-value">8</span>
+                                        </div>
+                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-over">详情</Button>
+                                    </div>
+                                    {/* 预警库存点 */}
+                                    <div className="pw-point-status-new pw-point-status-warning">
+                                        <div className="pw-point-status-left">
+                                            <span className="pw-point-status-icon">
+                                                <img src={warningIcon} alt="预警库存点" />
+                                            </span>
+                                            <span className="pw-point-status-type">预警库存点</span>
+                                            <span className="pw-point-status-value">12</span>
+                                        </div>
+                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-warning">详情</Button>
+                                    </div>
+                                    {/* 正常库存点 */}
+                                    <div className="pw-point-status-new pw-point-status-normal">
+                                        <div className="pw-point-status-left">
+                                            <span className="pw-point-status-icon">
+                                                <img src={normalIcon} alt="正常库存点" />
+                                            </span>
+                                            <span className="pw-point-status-type">正常库存点</span>
+                                            <span className="pw-point-status-value">8</span>
+                                        </div>
+                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-normal">详情</Button>
+                                    </div>
+                                </div>
+                            </Card>
+                        </Col>
+                    </Row>
+                </div>
+                {/* 右侧容器 */}
+                <div style={{ width: '20%', overflow: 'auto' }}>
+                    <Card className="pw-card pw-card-middle">
+                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                            <span className="pw-title pw-title-blue">单位产废排名</span>
+                            <Select size="small" options={monthOptions} defaultValue={'month'} className="pw-select" style={{ width: 70}}/>
+                        </div>
+                        <div className="pw-rank-list">
+                            {rankData.map((item, idx) => (
+                                <div className="pw-rank-item" key={idx}>
+                                    <div className="pw-rank-row">
+                                        <span className="pw-rank-name">{item.name}</span>
+                                        <span className="pw-rank-value">{item.value}吨</span>
+                                    </div>
+                                    <Progress
+                                        percent={Math.round((item.value / maxValue) * 100)}
+                                        showInfo={false}
+                                        strokeColor="#5B8FF9"
+                                        trailColor="#E9EBF1"
+                                        style={{ marginBottom: 8 }}
+                                        size="small"
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </Card>
+                </div>
+
+            </div>
+            <Row className="pw-row-bottom">
+                {/* 下方左侧各类别固废量+右侧台账信息管理 */}
+                <Col span={13} style={{ paddingRight: 8 }}>
+                    <Card className="pw-card pw-card-bottom">
+                        <div className="pw-card-header">
+                            <span className="pw-title pw-title-blue">各类固废量</span>
+                            <div className="pw-select-group">
+                                <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
+                                <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
+                            </div>
+                        </div>
+                        <ReactECharts option={categoryBarOption} className="pw-echarts-bar" style={{ height: 160 }} />
+                    </Card>
+                </Col>
+                <Col span={11}>
+                    <Card className="pw-card pw-card-bottom">
+                        <span className="pw-title pw-title-blue">台账信息管理</span>
+                        <div className="pw-ledger-grid">
+                            {ledgerBtns.map((btn, idx) => (
+                                <div className="pw-ledger-item" key={idx}>
+                                    <span className="pw-ledger-icon">
+                                        <img src={ledgerIcon} style={{ width: '32px' }} alt="ledger icon" />
+                                    </span>
+                                    <span className="pw-ledger-text">{btn}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </Card>
+                </Col>
+            </Row>
+        </div>
+    );
+};
+
+export default ProductWaste;

src/pages/business_envmonitoring/components/secondary_menu/ProductWaste.less

@@ -0,0 +1,246 @@
+.productWasteDashboard {
+    background: #F6F8FB;
+}
+
+.pw-card {
+    background: #fff;
+    border-radius: 0px;
+    box-shadow: 0 2px 8px #f0f1f2;
+}
+
+.pw-card-top,
+.pw-card-middle,
+.pw-card-bottom {
+    height: 100%;
+}
+
+.pw-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.pw-title {
+    font-weight: 600;
+    font-size: 14px;
+    border-left: 4px solid #009D6F;
+    padding-left: 8px;
+    color: #333333
+}
+
+.pw-select-group {
+    display: flex;
+    align-items: center;
+}
+
+.pw-label {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #333;
+}
+
+.pw-select {
+    width: 80px;
+}
+
+.pw-echarts-line,
+.pw-echarts-bar,
+.pw-echarts-pie {
+    width: 100%;
+}
+
+.pw-progress-circle-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 120px;
+    margin-top: 20px;
+}
+
+.pw-point-status-wrap {
+    margin-top: 16px;
+}
+
+.pw-point-status-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.pw-point-status-tag {
+    font-weight: 600;
+    font-size: 14px;
+    width: 100px;
+    text-align: center;
+}
+
+.pw-point-status-value {
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0 12px;
+}
+
+.pw-ledger-btns-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 16px;
+}
+
+.pw-ledger-btn {
+    background: #E6FFFB;
+    color: #52C41A;
+    border: none;
+    box-shadow: 0 2px 8px #e6fffb;
+    margin-bottom: 8px;
+}
+
+.pw-row-middle,
+.pw-row-bottom {
+    margin-top: 0 !important;
+}
+
+.pw-point-status-new-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+.pw-point-status-new {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 4px;
+    padding: 8px;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #FFDFDF;
+    min-height: 48px;
+    transition: box-shadow 0.2s;
+}
+
+.pw-point-status-left {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.pw-point-status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+}
+
+.pw-point-status-type {
+    font-size: 12px;
+    font-weight: 500;
+    margin-right: 4px;
+}
+
+.pw-point-status-value {
+    font-size: 12px;
+    font-weight: bold;
+    margin-left: 2px;
+}
+
+.pw-point-status-btn {
+    min-width: 56px;
+    font-size: 12px !important;
+    font-weight: 500;
+    border-radius: 4px;
+    padding: 0 12px;
+    height: 32px;
+}
+
+.pw-point-status-over {
+    background: #FFF4F4;
+    border: 1px solid #FFDFDF;
+
+    .pw-point-status-btn {
+        color: #FF3B3B;
+        border-color: #FF6060;
+        background: #FFF4F4;
+    }
+}
+
+.pw-point-status-warning {
+    background: #FFF5EB;
+    border: 1px solid #FFDEBD;
+
+    .pw-point-status-btn {
+        color: #FF963B;
+        border-color: #FFAA60;
+        background: #FFF5EB;
+    }
+}
+
+.pw-point-status-normal {
+    background: #F3FFF5;
+    border: 1px solid #96FAA7;
+
+    .pw-point-status-btn {
+        color: #09D02B;
+        border-color: #20DD40;
+        background: #F3FFF5;
+    }
+}
+
+.ant-card-body {
+    padding: 16px !important;
+}
+
+.pw-ledger-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 30px;
+    grid-column-gap: 6px;
+    margin-top: 25px;
+}
+
+.pw-ledger-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background: none;
+    box-shadow: none;
+}
+
+.pw-ledger-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+}
+
+.pw-ledger-text {
+    font-size: 12px;
+    color: #333;
+    text-align: center;
+    font-weight: 500;
+    line-height: 1.2;
+    word-break: break-all;
+}
+
+.pw-rank-list {
+  margin-top: 8px;
+}
+.pw-rank-item {
+//   margin-bottom: 8px;
+}
+.pw-rank-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  margin-bottom: 2px;
+}
+.pw-rank-name {
+  color: #333;
+}
+.pw-rank-value {
+  color: #888;
+}