每日统计模块 Cordova 与 OpenHarmony 混合开发实战-编程实验室

📌 概述

每日统计模块提供了每日喝茶数据的统计分析功能。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，实现了高效的数据统计和可视化展示。用户可以查看特定日期的喝茶记录总数、消费金额、平均评分等统计数据。模块支持日期范围选择和数据导出。

🔗 完整流程

第一步：日期选择与数据加载

用户在每日统计页面选择要查看的日期。应用会从数据库中加载该日期的所有喝茶记录。应用会计算该日期的各项统计数据，包括记录数、消费金额、平均评分等。

第二步：统计数据计算

应用会对加载的数据进行聚合和计算。计算包括总记录数、总消费金额、平均消费金额、平均评分、最高评分和最低评分等。这些计算在原生层进行，确保性能。

第三步：统计结果展示

统计完成后，应用会将结果以卡片和图表的形式展示。用户可以查看详细的统计信息和记录列表。

🔧 Web 代码实现

HTML 每日统计页面

<divid="daily-stats-page"class="page"><divclass="page-header"><h1>每日统计</h1></div><divclass="stats-date-selector"><inputtype="date"id="stats-date"onchange="loadDailyStats()"><buttonclass="btn btn-primary"onclick="loadDailyStats()">查询</button></div><divclass="stats-cards"><divclass="stat-card"><divclass="stat-label">喝茶次数</div><divclass="stat-value"id="daily-count">0</div></div><divclass="stat-card"><divclass="stat-label">消费金额</div><divclass="stat-value"id="daily-expense">¥0</div></div><divclass="stat-card"><divclass="stat-label">平均消费</div><divclass="stat-value"id="daily-avg-price">¥0</div></div><divclass="stat-card"><divclass="stat-label">平均评分</div><divclass="stat-value"id="daily-avg-rating">0</div></div></div><divclass="stats-details"><h2>详细记录</h2><divid="daily-records-list"class="records-list"><!-- 记录列表动态生成 --></div></div></div>

每日统计页面包含日期选择器和统计卡片。统计卡片显示关键的统计指标。详细记录部分显示该日期的所有记录。

每日统计逻辑

asyncfunctionloadDailyStats(){constselectedDate=document.getElementById('stats-date').value;if(!selectedDate){showToast('请选择日期','warning');return;}try{// 获取该日期的所有记录constrecords=awaitdb.getRecordsByDate(selectedDate);// 计算统计数据conststats=calculateDailyStats(records);// 更新统计卡片document.getElementById('daily-count').textContent=stats.count;document.getElementById('daily-expense').textContent='¥'+stats.totalExpense.toFixed(2);document.getElementById('daily-avg-price').textContent='¥'+stats.avgPrice.toFixed(2);document.getElementById('daily-avg-rating').textContent=stats.avgRating.toFixed(1);// 显示记录列表renderDailyRecords(records);// 记录事件if(window.cordova){cordova.exec(null,null,'TeaLogger','logEvent',['daily_stats_loaded',{date:selectedDate,recordCount:records.length}]);}}catch(error){console.error('Failed to load daily stats:',error);showToast('加载统计数据失败','error');}}functioncalculateDailyStats(records){if(records.length===0){return{count:0,totalExpense:0,avgPrice:0,avgRating:0};}consttotalExpense=records.reduce((sum,r)=>sum+(r.price||0),0);consttotalRating=records.reduce((sum,r)=>sum+(r.rating||0),0);return{count:records.length,totalExpense:totalExpense,avgPrice:totalExpense/records.length,avgRating:totalRating/records.length};}functionrenderDailyRecords(records){constlistContainer=document.getElementById('daily-records-list');listContainer.innerHTML='';if(records.length===0){listContainer.innerHTML='<div class="no-data"><p>该日期暂无记录</p></div>';return;}records.forEach(record=>{constrecordEl=document.createElement('div');recordEl.className='record-item';conststars='★'.repeat(record.rating)+'☆'.repeat(5-record.rating);recordEl.innerHTML=`<div class="record-main"> <div class="record-info"> <div class="record-title">${record.teaType}</div> <div class="record-meta"> <span>${record.origin}</span> </div> </div> <div class="record-price">¥${record.price.toFixed(2)}</div> </div> <div class="record-rating">${stars}</div>`;listContainer.appendChild(recordEl);});}// 初始化日期为今天document.addEventListener('DOMContentLoaded',function(){consttoday=newDate().toISOString().split('T')[0];constdateInput=document.getElementById('stats-date');if(dateInput){dateInput.value=today;}});

这段代码实现了每日统计功能。loadDailyStats()加载指定日期的统计数据。calculateDailyStats()计算统计指标。renderDailyRecords()显示该日期的记录列表。

🔌 OpenHarmony 原生代码

日期范围查询

// entry/src/main/ets/plugins/DateRangeQuery.etsimport{relationalStore}from'@kit.ArkData';exportclassDateRangeQuery{privatestore:relationalStore.RdbStore;asyncgetRecordsByDate(date:string):Promise<TeaRecord[]>{conststartOfDay=`${date}00:00:00`;constendOfDay=`${date}23:59:59`;constpredicates=newrelationalStore.RdbPredicates('tea_records');predicates.between('created_at',startOfDay,endOfDay);predicates.orderByDesc('created_at');constresultSet=awaitthis.store.query(predicates);constrecords:TeaRecord[]=[];while(resultSet.goToNextRow()){records.push(this.parseRecord(resultSet));}resultSet.close();returnrecords;}asyncgetRecordsByDateRange(startDate:string,endDate:string):Promise<TeaRecord[]>{constpredicates=newrelationalStore.RdbPredicates('tea_records');predicates.between('created_at',startDate,endDate);predicates.orderByDesc('created_at');constresultSet=awaitthis.store.query(predicates);constrecords:TeaRecord[]=[];while(resultSet.goToNextRow()){records.push(this.parseRecord(resultSet));}resultSet.close();returnrecords;}privateparseRecord(resultSet:relationalStore.ResultSet):TeaRecord{return{id:resultSet.getColumnValue(resultSet.getColumnIndex('id'))asnumber,teaType:resultSet.getColumnValue(resultSet.getColumnIndex('tea_type'))asstring,origin:resultSet.getColumnValue(resultSet.getColumnIndex('origin'))asstring,price:resultSet.getColumnValue(resultSet.getColumnIndex('price'))asnumber,rating:resultSet.getColumnValue(resultSet.getColumnIndex('rating'))asnumber,createdAt:resultSet.getColumnValue(resultSet.getColumnIndex('created_at'))asstring};}}interfaceTeaRecord{id:number;teaType:string;origin:string;price:number;rating:number;createdAt:string;}