欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

费用分析功能提供了旅行花费的详细分析。用户可以查看不同时间段的花费趋势，也可以按目的地、分类等维度进行费用分析。费用分析帮助用户了解旅行的成本构成。在 Cordova 与 OpenHarmony 的混合开发框架中，费用分析需要实现费用计算和趋势分析。

🔗 完整流程

第一步：费用数据收集与计算

费用分析需要收集所有旅行的花费数据，然后按不同维度进行计算。计算包括总费用、平均费用、最高费用、最低费用等。

第二步：费用趋势分析与预测

费用分析可以展示费用的趋势，用户可以看到费用随时间的变化。费用分析还可以进行简单的预测，估计未来的费用。

第三步：原生层费用数据处理与可视化

OpenHarmony 原生层可以实现费用数据的高性能处理和图表渲染。

🔧 Web 代码实现

费用分析页面 HTML 结构

<div id="expense-analysis-page" class="page">
    <div class="page-header">
        <h1>费用分析</h1>
    </div>
    
    <div class="expense-analysis-container">
        <div class="time-range-selector">
            <label>时间范围:</label>
            <input type="date" id="startDate" onchange="updateExpenseAnalysis()">
            <span>至</span>
            <input type="date" id="endDate" onchange="updateExpenseAnalysis()">
        </div>
        
        <div class="expense-summary">
            <div class="summary-item">
                <span>总费用</span>
                <span id="totalExpense">¥0</span>
            </div>
            <div class="summary-item">
                <span>平均费用</span>
                <span id="avgExpense">¥0</span>
            </div>
            <div class="summary-item">
                <span>最高费用</span>
                <span id="maxExpense">¥0</span>
            </div>
            <div class="summary-item">
                <span>最低费用</span>
                <span id="minExpense">¥0</span>
            </div>
        </div>
        
        <div class="expense-chart" id="expenseChart">
            <!-- 费用趋势图表动态加载 -->
        </div>
        
        <div class="expense-breakdown" id="expenseBreakdown">
            <!-- 费用分解表动态加载 -->
        </div>
    </div>
</div>

HTML 结构包含时间范围选择、费用摘要和趋势图表。

更新费用分析函数

async function updateExpenseAnalysis() {
    try {
        // 获取时间范围
        const startDate = new Date(document.getElementById('startDate').value);
        const endDate = new Date(document.getElementById('endDate').value);
        
        // 获取所有旅行
        const allTrips = await db.getAllTrips();
        
        // 筛选时间范围内的旅行
        const trips = allTrips.filter(trip => {
            const tripStart = new Date(trip.startDate);
            const tripEnd = new Date(trip.endDate);
            return tripStart >= startDate && tripEnd <= endDate;
        });
        
        // 计算费用分析
        const analysis = analyzeExpenses(trips);
        
        // 更新 UI
        document.getElementById('totalExpense').textContent = `¥${analysis.totalExpense}`;
        document.getElementById('avgExpense').textContent = `¥${analysis.avgExpense}`;
        document.getElementById('maxExpense').textContent = `¥${analysis.maxExpense}`;
        document.getElementById('minExpense').textContent = `¥${analysis.minExpense}`;
        
        // 渲染费用分解
        renderExpenseBreakdown(analysis.byDestination);
    } catch (error) {
        console.error('Error updating expense analysis:', error);
        showToast('更新费用分析失败');
    }
}

更新费用分析函数计算指定时间范围内的费用。

费用分析计算函数

function analyzeExpenses(trips) {
    let totalExpense = 0;
    let maxExpense = 0;
    let minExpense = Infinity;
    const byDestination = {};
    
    trips.forEach(trip => {
        const expense = trip.expense || 0;
        
        totalExpense += expense;
        maxExpense = Math.max(maxExpense, expense);
        minExpense = Math.min(minExpense, expense);
        
        // 按目的地分组
        if (!byDestination[trip.destination]) {
            byDestination[trip.destination] = 0;
        }
        byDestination[trip.destination] += expense;
    });
    
    const avgExpense = trips.length > 0 ? Math.round(totalExpense / trips.length) : 0;
    minExpense = minExpense === Infinity ? 0 : minExpense;
    
    return {
        totalExpense,
        avgExpense,
        maxExpense,
        minExpense,
        byDestination
    };
}

费用分析计算函数计算各种费用指标。

费用分解渲染函数

function renderExpenseBreakdown(byDestination) {
    const container = document.getElementById('expenseBreakdown');
    container.innerHTML = '<h3>按目的地费用分解</h3>';
    
    const table = document.createElement('table');
    table.className = 'expense-table';
    table.innerHTML = `
        <thead>
            <tr>
                <th>目的地</th>
                <th>费用</th>
                <th>占比</th>
            </tr>
        </thead>
        <tbody>
            ${(() => {
                const total = Object.values(byDestination).reduce((a, b) => a + b, 0);
                return Object.entries(byDestination).map(([destination, expense]) => {
                    const percentage = total > 0 ? Math.round((expense / total) * 100) : 0;
                    return `
                        <tr>
                            <td>${destination}</td>
                            <td>¥${expense}</td>
                            <td>${percentage}%</td>
                        </tr>
                    `;
                }).join('');
            })()}
        </tbody>
    `;
    
    container.appendChild(table);
}

费用分解渲染函数展示按目的地的费用分解。

🔌 OpenHarmony 原生代码实现

费用分析插件

// ExpenseAnalysisPlugin.ets
import { BusinessError } from '@ohos.base';

export class ExpenseAnalysisPlugin {
    // 处理费用分析更新事件
    onExpenseAnalysisUpdated(args: any, callback: Function): void {
        try {
            const totalExpense = args[0].totalExpense;
            const avgExpense = args[0].avgExpense;
            
            console.log(`[ExpenseAnalysis] Total: ¥${totalExpense}, Avg: ¥${avgExpense}`);
            
            callback({ success: true, message: '费用分析已更新' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

费用分析插件处理费用分析更新。

📝 总结

费用分析功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个财务分析系统。Web 层负责费用计算和 UI 展示，原生层负责数据处理。通过费用分析，用户可以了解旅行的成本构成。