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

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