AISln/Platform/AI.Platform.Page/Pages/Report/RevenueReport.razor

@page "/report/revenueReport"
@attribute [ReuseTabsPage(Title = "营收报表")]

<style>
    .revenue-report-container {
        padding: 16px;
        background-color: #f5f7fa;
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }

    .filter-section {
        margin-bottom: 16px;
        padding: 16px !important;
        background: white;
        border: 1px solid #ebeef5;
        border-radius: 4px;
    }

    .filter-content .filter-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

        .filter-content .filter-row .filter-item {
            display: flex;
            align-items: center;
        }

            .filter-content .filter-row .filter-item .filter-label {
                margin-right: 8px;
                font-size: 14px;
                color: #606266;
                min-width: 32px;
            }

        .filter-content .filter-row .filter-actions {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }

    .report-section {
        margin-bottom: 16px;
        padding: 16px;
        background: white;
        border: 1px solid #ebeef5;
        border-radius: 4px;
    }

        .report-section:last-child {
            margin-bottom: 0;
        }

    .section-header {
        margin-bottom: 16px;
        padding: 0 16px;
    }

        .section-header h3 {
            color: #303133;
            font-size: 16px;
            border-left: 4px solid #1890ff;
            padding-left: 10px;
            margin: 0;
        }

    .summary-section {
        padding: 16px;
    }

        .summary-section h3 {
            color: #303133;
            font-size: 16px;
            margin-bottom: 16px;
            border-left: 4px solid #1890ff;
            padding-left: 10px;
        }

    .summary-content {
        display: flex;
        justify-content: space-around;
    }

    .summary-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .summary-value {
        font-size: 24px;
        font-weight: 600;
        color: #1890ff;
        margin-bottom: 8px;
    }

    .summary-label {
        font-size: 14px;
        color: #909399;
    }

    .table-container {
        padding: 0 16px 16px;
    }

    /* Div表格样式 */
    .div-table {
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        font-size: 14px;
    }

    .div-table-header {
        display: flex;
        background-color: #f5f7fa;
        font-weight: 600;
        color: #606266;
        border-bottom: 1px solid #ebeef5;
    }

    .div-table-row {
        display: flex;
        border-bottom: 1px solid #ebeef5;
    }

        .div-table-row:last-child {
            border-bottom: none;
        }

        .div-table-row.total-row {
            font-weight: 600;
            background-color: #f0f9ff;
        }

        .div-table-row:nth-child(even) {
            background-color: #fafafa;
        }

    .div-table-cell {
        padding: 12px 8px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cell-left-align {
        justify-content: flex-start;
        text-align: left;
    }

    .cell-right-align {
        justify-content: flex-end;
        text-align: right;
    }

    .highlight-cell {
        color: #1890ff !important;
        font-weight: 500;
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .revenue-report-container {
            padding: 12px;
        }

        .filter-section {
            padding: 12px !important;
        }

        .filter-content .filter-row {
            flex-direction: column;
            align-items: flex-start;
        }

            .filter-content .filter-row .filter-actions {
                margin-left: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 8px;
            }

        .summary-content {
            flex-wrap: wrap;
        }

        .summary-item {
            width: 50%;
            margin-bottom: 16px;
        }

        .div-table {
            overflow-x: auto;
        }

        .div-table-header,
        .div-table-row {
            min-width: 800px;
        }

        .div-table-cell {
            padding: 8px 4px;
            font-size: 12px;
        }
    }
</style>

<div class="revenue-report-container">
    <!-- 筛选条件 -->
    <div class="filter-section">
        <div class="filter-content">
            <div class="filter-row">
                <div class="filter-item">
                    <span class="filter-label">日期</span>
                    <DatePicker @bind-Value="ViewModel.Filter.Date"
                                Format="yyyy-MM-dd"
                                Style="width: 150px" />
                </div>
                <div class="filter-item">
                    <span class="filter-label">日期</span>
                    <DatePicker @bind-Value="ViewModel.Filter.EDate"
                                Format="yyyy-MM-dd"
                                Style="width: 150px" />
                </div>
                <div class="filter-item">
                    <span class="filter-label">设备编号</span>
                    <Input @bind-Value="ViewModel.Filter.CarNumber"
                           Placeholder="请输入车编号"
                           Style="width: 150px" />
                </div>
                <div class="filter-item">
                    <span class="filter-label">车牌号</span>
                    <Input @bind-Value="ViewModel.Filter.PlateNumber"
                           Placeholder="请输入车牌号"
                           Style="width: 150px" />
                </div>
                <div class="filter-actions">
                    <Button Icon="search" OnClick="HandleQuery">查询</Button>
                    <Button Icon="reload" OnClick="HandleReset">重置</Button>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计摘要 -->
    <div class="report-section">
        <div class="summary-section">
            <h3>统计摘要</h3>
            <div class="summary-content">
                <div class="summary-item">
                    <div class="summary-value">@ViewModel.Summary.TotalOrders</div>
                    <div class="summary-label">总订单量</div>
                </div>
                <div class="summary-item">
                    <div class="summary-value">@FormatCurrency(ViewModel.Summary.TotalReceivable)</div>
                    <div class="summary-label">总应收金额</div>
                </div>
                <div class="summary-item">
                    <div class="summary-value">@FormatCurrency(ViewModel.Summary.TotalActual)</div>
                    <div class="summary-label">总实收金额</div>
                </div>
                <div class="summary-item">
                    <div class="summary-value">@FormatCurrency(ViewModel.Summary.TotalRecharge)</div>
                    <div class="summary-label">总充值金额</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 营业收入（车） -->
    <div class="report-section">
        <div class="section-header">
            <h3>营业收入（车）</h3>
        </div>
        <div class="table-container">
            <div class="div-table">
                <!-- 表头 -->
                <div class="div-table-header">
                    <div class="div-table-cell cell-left-align" style="width: 15%;">车牌号</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">单价(元)</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">订单量</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">销售升数</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">应收金额</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 15%;">实收金额</div>
                    <div class="div-table-cell cell-left-align" style="width: 20%;">油品</div>
                </div>

                <!-- 表格内容 -->
                @foreach (var item in ViewModel.CarRevenue)
                {
                    <div class="div-table-row">
                        <div class="div-table-cell cell-left-align" style="width: 15%;">@item.CarNumber</div>
                        <div class="div-table-cell cell-right-align" style="width: 10%;">@FormatCurrency(item.UnitPrice, true)</div>
                        <div class="div-table-cell cell-right-align" style="width: 10%;">@item.OrderCount</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(item.SalesLiters)</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(item.ReceivableAmount)</div>
                        <div class="div-table-cell cell-right-align highlight-cell" style="width: 15%;">@FormatCurrency(item.ActualAmount)</div>
                        <div class="div-table-cell cell-left-align" style="width: 20%;">@item.OilType</div>
                    </div>
                }

                <!-- 合计行 -->
                <div class="div-table-row total-row">
                    <div class="div-table-cell cell-left-align" style="width: 25%;">合计</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">@ViewModel.CarRevenueTotalResult.OrderCount</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(ViewModel.CarRevenueTotalResult.SalesLiters)</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(ViewModel.CarRevenueTotalResult.ReceivableAmount)</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 15%;">@FormatCurrency(ViewModel.CarRevenueTotalResult.ActualAmount)</div>
                    <div class="div-table-cell cell-left-align" style="width: 20%;">-</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 营业收入（油品） -->
    <div class="report-section">
        <div class="section-header">
            <h3>营业收入（油品）</h3>
        </div>
        <div class="table-container">
            <div class="div-table">
                <!-- 表头 -->
                <div class="div-table-header">
                    <div class="div-table-cell cell-left-align" style="width: 15%;">油品</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">单价(元)</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">订单量</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">销售升数</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">应收金额</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">实收金额</div>
                </div>

                <!-- 表格内容 -->
                @foreach (var item in ViewModel.OilRevenue)
                {
                    <div class="div-table-row">
                        <div class="div-table-cell cell-left-align" style="width: 15%;">@item.OilType</div>
                        <div class="div-table-cell cell-right-align" style="width: 10%;">@FormatCurrency(item.UnitPrice, true)</div>
                        <div class="div-table-cell cell-right-align" style="width: 10%;">@item.OrderCount</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(item.SalesLiters)</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(item.ReceivableAmount)</div>
                        <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">@FormatCurrency(item.ActualAmount)</div>
                    </div>
                }

                <!-- 合计行 -->
                <div class="div-table-row total-row">
                    <div class="div-table-cell cell-left-align" style="width: 15%;">合计</div>
                    <div class="div-table-cell" style="width: 10%;">-</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">@ViewModel.OilRevenueTotalResult.OrderCount</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(ViewModel.OilRevenueTotalResult.SalesLiters)</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(ViewModel.OilRevenueTotalResult.ReceivableAmount)</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">@FormatCurrency(ViewModel.OilRevenueTotalResult.ActualAmount)</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 营业收入（充值） -->
    <div class="report-section">
        <div class="section-header">
            <h3>营业收入（充值）</h3>
        </div>
        <div class="table-container">
            <div class="div-table">
                <!-- 表头 -->
                <div class="div-table-header">
                    <div class="div-table-cell cell-left-align" style="width: 45%;">充值类型</div>
                    <div class="div-table-cell cell-right-align" style="width: 20%;">充值次数</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">充值金额</div>
                </div>

                <!-- 表格内容 -->
                @foreach (var item in ViewModel.RechargeRevenue)
                {
                    <div class="div-table-row">
                        <div class="div-table-cell cell-left-align" style="width: 45%;">@item.RechargeType</div>
                        <div class="div-table-cell cell-right-align" style="width: 20%;">@item.RechargeCount</div>
                        <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">@FormatCurrency(item.RechargeAmount)</div>
                    </div>
                }

                <!-- 合计行 -->
                <div class="div-table-row total-row">
                    <div class="div-table-cell cell-left-align" style="width: 45%;">合计</div>
                    <div class="div-table-cell cell-right-align" style="width: 20%;">@ViewModel.RechargeRevenueTotalResult.RechargeCount</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 35%;">@FormatCurrency(ViewModel.RechargeRevenueTotalResult.RechargeAmount)</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 营业收支款项明细 -->
    <div class="report-section">
        <div class="section-header">
            <h3>营业收支款项明细</h3>
        </div>
        <div class="table-container">
            <div class="div-table">
                <!-- 表头 -->
                <div class="div-table-header">
                    <div class="div-table-cell cell-left-align" style="width: 20%;">支付方式</div>
                    <div class="div-table-cell cell-left-align" style="width: 15%;">品类</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">订单量</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">销售升数</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">应收金额</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 25%;">实收金额</div>
                </div>

                <!-- 表格内容 -->
                @foreach (var item in ViewModel.PaymentDetails)
                {
                    <div class="div-table-row">
                        <div class="div-table-cell cell-left-align" style="width: 20%;">@item.PaymentMethod</div>
                        <div class="div-table-cell cell-left-align" style="width: 15%;">@item.Category</div>
                        <div class="div-table-cell cell-right-align" style="width: 10%;">@item.OrderCount</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(item.SalesLiters)</div>
                        <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(item.ReceivableAmount)</div>
                        <div class="div-table-cell cell-right-align highlight-cell" style="width: 25%;">@FormatCurrency(item.ActualAmount)</div>
                    </div>
                }

                <!-- 合计行 -->
                <div class="div-table-row total-row">
                    <div class="div-table-cell cell-left-align" style="width: 35%;">合计</div>
                    <div class="div-table-cell cell-right-align" style="width: 10%;">@ViewModel.PaymentDetailsTotalResult.OrderCount</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatNumber(ViewModel.PaymentDetailsTotalResult.SalesLiters)</div>
                    <div class="div-table-cell cell-right-align" style="width: 15%;">@FormatCurrency(ViewModel.PaymentDetailsTotalResult.ReceivableAmount)</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 25%;">@FormatCurrency(ViewModel.PaymentDetailsTotalResult.ActualAmount)</div>
                </div>
            </div>
        </div>
    </div>
</div>