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

概述

加油记录用于跟踪车辆的燃油消耗情况。通过记录每次加油的时间、金额、油量和油价，用户可以分析车辆的油耗情况。本文将详细讲解如何在Cordova&OpenHarmony框架中实现一个完整的加油记录系统。

加油记录数据结构

加油记录包含日期、油量、油价、费用等信息。

const fuelRecord = {
    id: 1,
    vehicleId: 1,
    date: '2024-02-15',
    mileage: 55000,
    amount: 50,
    price: 8.5,
    totalCost: 425,
    location: '中国石油加油站'
};

这个数据结构定义了加油记录的基本属性。vehicleId用于关联到特定的车辆，date记录加油日期，mileage记录加油时的里程数，amount记录加油量（升），price记录油价（元/升），totalCost记录总费用，location记录加油地点。这样的结构设计使得我们可以完整地记录每次加油的所有相关信息。

加油记录列表展示

加油记录页面需要展示所有的加油记录，并提供统计信息。

async renderFuel() {
    const fuelRecords = await db.getAll('fuel_records');
    const totalAmount = Utils.sum(fuelRecords, 'amount');
    const totalCost = Utils.sum(fuelRecords, 'price');
    
    return `
        <div class="fuel-container">
            <div class="page-header">
                <h2 class="page-title">加油记录</h2>
                <button class="btn btn-primary" onclick="app.showAddFuelModal()">+ 添加记录</button>
            </div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-label">总加油量</div>
                    <div class="stat-value">\${totalAmount.toFixed(1)}<span class="stat-unit">L</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">总加油费</div>
                    <div class="stat-value">¥\${totalCost.toFixed(0)}</div>
                </div>
            </div>
        </div>
    `;
}

这段代码展示了如何从数据库中获取所有加油记录并计算统计数据。我们首先获取所有加油记录，然后计算总加油量和总加油费。在Cordova框架中，这种统计处理是标准做法。

加油统计信息

系统需要展示加油的各种统计信息。

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">平均油价</div>
        <div class="stat-value">¥\${fuelRecords.length > 0 ? (totalCost / totalAmount).toFixed(2) : 0}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">加油次数</div>
        <div class="stat-value">\${fuelRecords.length}</div>
    </div>
</div>

这段代码展示了如何计算加油的统计信息。我们计算平均油价（总费用除以总油量）和加油次数。这种统计信息在Cordova应用中非常常见，它帮助用户了解加油的整体情况。

加油记录详情

每个加油记录需要展示详细信息。

<div class="card">
    <div class="card-header">
        <h3 class="card-title">加油记录列表</h3>
    </div>
    <div class="card-body">
        \${fuelRecords.map(record => \`
            <div class="list-item">
                <div class="list-item-content">
                    <div class="list-item-title">\${Utils.formatDate(record.date)}</div>
                    <div class="list-item-subtitle">\${record.amount || 0}L @ ¥\${record.price || 0}/L</div>
                </div>
                <div class="list-item-action">
                    <span>¥\${(((record.amount || 0) * (record.price || 0))).toFixed(0)}</span>
                    <button class="btn btn-text btn-danger btn-sm" onclick="app.deleteFuel(\${record.id})">删除</button>
                </div>
            </div>
        \`).join('') || '<p class="text-center">暂无加油记录</p>'}
    </div>
</div>

这段代码展示了如何展示加油记录的详细信息。每个记录显示加油日期、油量、油价和总费用。用户可以通过删除按钮删除不需要的记录。这种设计模式在Cordova应用中非常常见。

添加加油记录

用户需要能够添加新的加油记录。

showAddFuelModal() {
    const modalHTML = `
        <div class="modal">
            <div class="modal-content">
                <h3>添加加油记录</h3>
                <form id="addFuelForm">
                    <input type="date" id="date" required>
                    <input type="number" placeholder="里程(km)" id="mileage" required>
                    <input type="number" placeholder="加油量(L)" id="amount" step="0.1" required>
                    <input type="number" placeholder="油价(¥/L)" id="price" step="0.01" required>
                    <input type="text" placeholder="加油地点" id="location">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" onclick="app.closeModal()">取消</button>
                </form>
            </div>
        </div>
    `;
    document.getElementById('modalContainer').innerHTML = modalHTML;
}

这段代码展示了如何创建一个添加加油记录的模态框。模态框包含了所有必要的输入字段，包括日期、里程、加油量、油价和加油地点。通过form元素，我们可以方便地收集用户输入的数据。在Cordova应用中，这种模态框设计是标准做法。

加油记录数据保存

当用户提交表单后，我们需要将加油记录保存到数据库中。

async saveFuelRecord(formData) {
    const record = {
        vehicleId: this.currentVehicleId,
        date: formData.date,
        mileage: parseInt(formData.mileage),
        amount: parseFloat(formData.amount),
        price: parseFloat(formData.price),
        totalCost: parseFloat(formData.amount) * parseFloat(formData.price),
        location: formData.location
    };
    
    await db.add('fuel_records', record);
    this.renderPage('fuel');
}

这段代码展示了如何将用户输入的加油记录保存到数据库。首先，我们从表单数据中提取各个字段，然后创建一个加油记录对象。接着，我们计算总费用（油量乘以油价）。最后，我们使用db.add方法将记录添加到数据库中。这种处理流程在Cordova应用中非常常见。

油耗分析

系统需要分析车辆的油耗情况。

async calculateFuelConsumption() {
    const fuelRecords = await db.getAll('fuel_records');
    
    if (fuelRecords.length < 2) {
        return null;
    }
    
    const sorted = fuelRecords.sort((a, b) => new Date(a.date) - new Date(b.date));
    const consumption = [];
    
    for (let i = 1; i < sorted.length; i++) {
        const current = sorted[i];
        const previous = sorted[i - 1];
        
        const mileageDiff = current.mileage - previous.mileage;
        const fuelUsed = current.amount;
        const consumption100km = (fuelUsed / mileageDiff * 100).toFixed(2);
        
        consumption.push({
            date: current.date,
            consumption100km: consumption100km
        });
    }
    
    return consumption;
}

这段代码展示了如何计算车辆的油耗。我们首先对加油记录按日期进行排序，然后计算相邻两次加油之间的油耗。油耗的计算方式是：（加油量 / 里程差 * 100）。这种油耗分析在Cordova应用中非常常见，它帮助用户了解车辆的燃油效率。

油价趋势

系统需要展示油价的变化趋势。

async renderFuelPriceTrends() {
    const fuelRecords = await db.getAll('fuel_records');
    const sorted = fuelRecords.sort((a, b) => new Date(a.date) - new Date(b.date));
    
    return `
        <div class="trends-container">
            <div class="page-header"><h2 class="page-title">油价趋势</h2></div>
            <div class="card">
                <div class="card-header"><h3 class="card-title">油价变化</h3></div>
                <div class="card-body">
                    \${sorted.map(record => \`
                        <div class="list-item">
                            <div class="list-item-content">
                                <div class="list-item-title">\${Utils.formatDate(record.date)}</div>
                                <div class="list-item-subtitle">\${record.location || '未记录'}</div>
                            </div>
                            <div class="list-item-action">¥\${record.price.toFixed(2)}/L</div>
                        </div>
                    \`).join('') || '<p class="text-center">暂无数据</p>'}
                </div>
            </div>
        </div>
    `;
}

这段代码展示了如何展示油价的变化趋势。我们首先对加油记录按日期进行排序，然后为每条记录显示日期、加油地点和油价。这种趋势展示在Cordova应用中非常常见，它帮助用户了解油价的变化规律。

OpenHarmony中的加油记录管理

在OpenHarmony系统中，加油记录的管理需要通过Cordova插件与原生系统进行交互。

export function pagePushNotify(data:Record<string, Object>|undefined) {
  if(data) {
    if (data["ohos.aafwk.param.callerBundleName"] == "com.huawei.hms.pushservice") {
      let result: ArkTsAttribute = { content: "receiveMessage", result: ["notification", JSON.stringify(data)] };
      cordova.onArkTsResult(JSON.stringify(result), "HuaweiPushPlugin", "");
    }
  }
}

这段ArkTS代码展示了如何在OpenHarmony系统中处理推送通知。通过pagePushNotify函数，我们可以接收来自华为推送服务的通知，并将其传递给Cordova框架。这种推送机制在OpenHarmony系统中非常重要，它使得应用能够及时通知用户重要信息。

总结

加油记录功能是Cordova&OpenHarmony应用的重要组成部分。通过合理的数据结构设计、统计分析和油耗计算，我们可以创建一个功能完整、用户体验良好的加油记录系统。在OpenHarmony系统中，通过Cordova框架的集成，我们可以充分利用原生系统的特性。