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

📌 概述

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

🔗 完整流程

第一步：进度数据加载

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

第二步：进度展示与更新

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

第三步：进度历史与分析

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

🔧 Web 代码实现

HTML 进度跟踪页面

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

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

进度跟踪逻辑

asyncfunctionrenderProgressTracking(){try{constgoals=awaitdb.getActiveGoals();constcontainer=document.getElementById('goals-progress');container.innerHTML='';if(goals.length===0){container.innerHTML='<div class="no-data"><p>暂无进行中的目标</p></div>';return;}goals.forEach(goal=>{constprogressCard=createProgressCard(goal);container.appendChild(progressCard);});}catch(error){console.error('Failed to render progress:',error);showToast('加载进度失败','error');}}functioncreateProgressCard(goal){constcard=document.createElement('div');card.className='progress-card';card.dataset.goalId=goal.id;constprogress=(goal.currentValue/goal.targetValue*100).toFixed(0);constdeadline=newDate(goal.deadline);constnow=newDate();constdaysLeft=Math.ceil((deadline-now)/(1000*60*60*24));constprogressPerDay=daysLeft>0?(goal.targetValue-goal.currentValue)/daysLeft:0;conststatus=progress>=100?'已完成':daysLeft<=0?'已过期':'进行中';conststatusClass=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>`;returncard;}asyncfunctionupdateProgress(goalId){constnewValue=prompt('输入新的进度值:');if(newValue===null){return;}constvalue=parseFloat(newValue);if(isNaN(value)||value<0){showToast('请输入有效的数值','warning');return;}try{awaitdb.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');}}asyncfunctionviewGoalHistory(goalId){// 显示目标的进度历史consthistory=awaitdb.getGoalProgressHistory(goalId);// 显示历史数据的模态框showHistoryModal(history);}

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

🔌 OpenHarmony 原生代码

进度预测算法

// entry/src/main/ets/plugins/ProgressPredictor.etsexportclassProgressPredictor{staticpredictCompletion(goal:Goal,currentDate:Date):PredictionResult{constdeadline=newDate(goal.deadline);constdaysLeft=Math.ceil((deadline.getTime()-currentDate.getTime())/(1000*60*60*24));constremainingValue=goal.targetValue-goal.currentValue;if(daysLeft<=0){return{willComplete:goal.currentValue>=goal.targetValue,daysLeft:0,requiredPerDay:0,completionDate:deadline};}constrequiredPerDay=remainingValue/daysLeft;return{willComplete:true,daysLeft:daysLeft,requiredPerDay:requiredPerDay,completionDate:deadline};}staticcalculateTrend(progressHistory:ProgressRecord[]):Trend{if(progressHistory.length<2){return{direction:'stable',rate:0};}constrecent=progressHistory.slice(-7);constavgDaily=recent.reduce((sum,p)=>sum+p.value,0)/recent.length;return{direction:avgDaily>0?'up':'down',rate:avgDaily};}}interfaceGoal{currentValue:number;targetValue:number;deadline:Date;}interfacePredictionResult{willComplete:boolean;daysLeft:number;requiredPerDay:number;completionDate:Date;}interfaceProgressRecord{value:number;date:Date;}interfaceTrend{direction:'up'|'down'|'stable';rate:number;}