进度跟踪模块 Cordova 与 OpenHarmony 混合开发实战

📌 概述

进度跟踪模块允许用户跟踪目标的完成进度。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的进度更新和可视化展示。用户可以查看目标的当前进度、剩余时间和完成预测。模块支持进度的快速更新和历史记录查看。

🔗 完整流程

第一步：进度数据加载

当用户进入进度跟踪页面时，应用会从数据库中加载目标信息和进度数据。应用会计算目标的完成百分比、剩余时间等信息。

第二步：进度展示与更新

应用会以进度条、卡片等形式展示目标进度。用户可以快速更新目标的当前值。应用会实时计算完成百分比和预计完成时间。

第三步：进度历史与分析

应用会记录进度的历史数据，用户可以查看进度的变化趋势。应用会根据当前进度预测目标是否能按时完成。

🔧 Web 代码实现

HTML 进度跟踪页面

<div id="progress-tracking-page" class="page">
    <div class="page-header">
        <h1>进度跟踪</h1>
    </div>
    
    <div id="goals-progress" class="goals-progress">
        <!-- 目标进度卡片动态生成 -->
    </div>
</div>

进度跟踪页面显示所有目标的进度信息。

进度跟踪逻辑

async function renderProgressTracking() {
    try {
        const goals = await db.getActiveGoals();
        const container = document.getElementById('goals-progress');
        container.innerHTML = '';
        
        if (goals.length === 0) {
            container.innerHTML = '<div class="no-data"><p>暂无进行中的目标</p></div>';
            return;
        }
        
        goals.forEach(goal => {
            const progressCard = createProgressCard(goal);
            container.appendChild(progressCard);
        });
        
    } catch (error) {
        console.error('Failed to render progress:', error);
        showToast('加载进度失败', 'error');
    }
}

function createProgressCard(goal) {
    const card = document.createElement('div');
    card.className = 'progress-card';
    card.dataset.goalId = goal.id;
    
    const progress = (goal.currentValue / goal.targetValue * 100).toFixed(0);
    const deadline = new Date(goal.deadline);
    const now = new Date();
    const daysLeft = Math.ceil((deadline - now) / (1000 * 60 * 60 * 24));
    const progressPerDay = daysLeft > 0 ? (goal.targetValue - goal.currentValue) / daysLeft : 0;
    
    const status = progress >= 100 ? '已完成' : daysLeft <= 0 ? '已过期' : '进行中';
    const statusClass = progress >= 100 ? 'completed' : daysLeft <= 0 ? 'expired' : 'active';
    
    card.innerHTML = `
        <div class="progress-header">
            <div class="progress-title">${goal.name}</div>
            <div class="progress-status ${statusClass}">${status}</div>
        </div>
        
        <div class="progress-info">
            <div class="progress-value">${goal.currentValue} / ${goal.targetValue}</div>
            <div class="progress-deadline">截止: ${deadline.toLocaleDateString('zh-CN')}</div>
            <div class="progress-days-left">剩余: ${daysLeft} 天</div>
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: ${progress}%"></div>
        </div>
        
        <div class="progress-percentage">${progress}%</div>
        
        <div class="progress-prediction">
            <span>每日需要: ${progressPerDay.toFixed(2)}</span>
        </div>
        
        <div class="progress-actions">
            <button class="btn btn-sm" onclick="updateProgress(${goal.id})">更新进度</button>
            <button class="btn btn-sm" onclick="viewGoalHistory(${goal.id})">查看历史</button>
        </div>
    `;
    
    return card;
}

async function updateProgress(goalId) {
    const newValue = prompt('输入新的进度值:');
    
    if (newValue === null) {
        return;
    }
    
    const value = parseFloat(newValue);
    if (isNaN(value) || value < 0) {
        showToast('请输入有效的数值', 'warning');
        return;
    }
    
    try {
        await db.updateGoalProgress(goalId, value);
        
        if (window.cordova) {
            cordova.exec(
                null, null,
                'TeaLogger',
                'logEvent',
                ['progress_updated', { goalId: goalId, value: value }]
            );
        }
        
        showToast('进度已更新', 'success');
        renderProgressTracking();
    } catch (error) {
        console.error('Failed to update progress:', error);
        showToast('更新失败', 'error');
    }
}

async function viewGoalHistory(goalId) {
    // 显示目标的进度历史
    const history = await db.getGoalProgressHistory(goalId);
    // 显示历史数据的模态框
    showHistoryModal(history);
}

这段代码实现了进度跟踪功能。renderProgressTracking() 加载并渲染进度信息。createProgressCard() 创建进度卡片。updateProgress() 更新目标进度。

🔌 OpenHarmony 原生代码

进度预测算法

// entry/src/main/ets/plugins/ProgressPredictor.ets
export class ProgressPredictor {
    static predictCompletion(goal: Goal, currentDate: Date): PredictionResult {
        const deadline = new Date(goal.deadline);
        const daysLeft = Math.ceil((deadline.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24));
        const remainingValue = goal.targetValue - goal.currentValue;
        
        if (daysLeft <= 0) {
            return {
                willComplete: goal.currentValue >= goal.targetValue,
                daysLeft: 0,
                requiredPerDay: 0,
                completionDate: deadline
            };
        }
        
        const requiredPerDay = remainingValue / daysLeft;
        
        return {
            willComplete: true,
            daysLeft: daysLeft,
            requiredPerDay: requiredPerDay,
            completionDate: deadline
        };
    }
    
    static calculateTrend(progressHistory: ProgressRecord[]): Trend {
        if (progressHistory.length < 2) {
            return { direction: 'stable', rate: 0 };
        }
        
        const recent = progressHistory.slice(-7);
        const avgDaily = recent.reduce((sum, p) => sum + p.value, 0) / recent.length;
        
        return {
            direction: avgDaily > 0 ? 'up' : 'down',
            rate: avgDaily
        };
    }
}

interface Goal {
    currentValue: number;
    targetValue: number;
    deadline: Date;
}

interface PredictionResult {
    willComplete: boolean;
    daysLeft: number;
    requiredPerDay: number;
    completionDate: Date;
}

interface ProgressRecord {
    value: number;
    date: Date;
}

interface Trend {
    direction: 'up' | 'down' | 'stable';
    rate: number;
}

这个类提供了进度预测功能。predictCompletion() 预测目标是否能按时完成。calculateTrend() 计算进度趋势。

📝 总结

进度跟踪模块展示了如何在 Cordova 框架中实现进度管理功能。通过 Web 层的进度展示和更新，结合原生层的预测算法，为用户提供了完整的目标进度跟踪体验。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net