企业官网建设流程全解析

一、功能概述

除了时间维度外，“喝水类型”也是一个非常重要的分析维度。例如，用户可能想知道最近一周喝了多少白开水、多少茶水、多少含糖饮料。本篇文章围绕“类型分布统计”页面，介绍如何在Cordova Web 层按类型进行聚合统计，并将结果同步到OpenHarmony ArkTS，为原生图表或卡片展示提供数据支持。文章依旧采用一段代码一段说明的方式，并包含 ArkTS 示例代码。

二、Web 端类型分布页面结构

<divid="type-stats-page"class="page page-type-stats"><h1>喝水类型分布</h1><tableclass="data-table"id="table-type-stats"><thead><tr><th>类型</th><th>总饮水量 (ml)</th></tr></thead><tbodyid="table-type-stats-body"></tbody></table></div>

这段 HTML 定义了类型分布统计页面的基础结构。页面标题为“喝水类型分布”，表格用于展示每种类型对应的总饮水量。与之前的列表和统计页面类似，tbody使用一个占位符table-type-stats-body，数据将由 JavaScript 动态插入。通过这种方式，随着类型集合的变化（例如新增“功能饮料”类型），页面可以自动适应，而无需修改静态 HTML。

.page-type-stats{padding:16px 24px;}#table-type-stats td:nth-child(2){text-align:right;}

CSS 部分延续了统一的布局和对齐方式。类型分布统计页面同样设置统一内边距，并将第二列（总饮水量列）右对齐，以便不同类型间的数值对比清晰易读。

三、按类型聚合统计数据

asyncfunctionloadTypeStats(){constrecords=awaitdb.getAllDrinkRecords();constgroupMap=newMap();records.forEach((r)=>{constkey=r.type||'unknown';constcurrent=groupMap.get(key)||0;groupMap.set(key,current+r.amount);});consttbody=document.getElementById('table-type-stats-body');if(!tbody)return;tbody.innerHTML='';conststatsForNative=[];groupMap.forEach((total,type)=>{consttr=document.createElement('tr');consttdType=document.createElement('td');consttdTotal=document.createElement('td');tdType.textContent=type;tdTotal.textContent=`${total}`;tr.appendChild(tdType);tr.appendChild(tdTotal);tbody.appendChild(tr);statsForNative.push({type,total});});syncTypeStatsToNative(statsForNative);}

loadTypeStats函数展示了如何按类型对所有喝水记录进行聚合统计。首先调用db.getAllDrinkRecords获取所有记录数组，然后使用Map以type为键进行累加。对于没有设置类型的记录，这里统一归类为'unknown'。聚合完成后，遍历groupMap，为每种类型创建一行表格行，填入类型名称和总饮水量，并追加到tbody。同时，将{ type, total }对象加入statsForNative数组，最后调用syncTypeStatsToNative将这份分布统计数据发送给 ArkTS 插件。

document.addEventListener('DOMContentLoaded',()=>{loadTypeStats();});

在DOMContentLoaded事件中调用loadTypeStats，让页面在加载完成后立即展示当前的类型分布情况。这样的实现方式适合数据量不大的本地应用，能够在用户打开页面时提供及时的分析结果。

四、通过 Cordova 将类型分布同步给原生

functionsyncTypeStatsToNative(items){if(!window.cordova){console.warn('[TypeStats] cordova not ready, skip native sync');return;}cordova.exec(()=>{console.info('[TypeStats] sync type stats success');},(err)=>{console.error('[TypeStats] sync type stats failed',err);},'WaterTrackerTypeStats','setTypeStats',[items]);}

syncTypeStatsToNative函数通过 Cordova 的exec接口将类型分布统计结果发送给 ArkTS 插件。参数items是一个数组，数组中的每个元素包含type和total字段。函数内部检查window.cordova是否存在，然后调用插件WaterTrackerTypeStats的setTypeStats动作，将数组打包发送。原生层可以利用这份数据在 ArkUI 中绘制饼图、条形图或其他类型分布图表。

五、OpenHarmony ArkTS 插件与类型分布存储

// entry/src/main/ets/plugins/WaterTrackerTypeStatsPlugin.etsimportcommonfrom'@ohos.app.ability.common';exportinterfaceTypeStatItem{type:string;total:number;}exportclassTypeStatsStore{privatestatic_items:TypeStatItem[]=[];staticsetItems(items:TypeStatItem[]){this._items=items;}staticgetitems(){returnthis._items;}}exportdefaultclassWaterTrackerTypeStatsPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.context=ctx;}setTypeStats(args:Array<Object>,callbackId:number){constitems=args[0]asTypeStatItem[];TypeStatsStore.setItems(items);console.info(`[TypeStatsPlugin] receive${items.length}types`);}}

这段 ArkTS 代码定义了类型分布插件和存储类。TypeStatItem接口描述了每个类型统计对象的结构，包含类型名称和总饮水量两个字段。TypeStatsStore使用静态数组_items缓存从 Web 传来的分布数据，并提供setItems与items方法供外部访问。插件类WaterTrackerTypeStatsPlugin在setTypeStats方法中接收args[0]数组，存入TypeStatsStore，并输出接收到的类型数量。这种封装模式使得 ArkUI 组件可以随时访问最新的类型分布数据，而不需要直接与 Cordova 或数据库交互。

六、ArkUI 中展示类型分布列表

// entry/src/main/ets/pages/TypeStatsPage.etsimport{TypeStatsStore}from'../plugins/WaterTrackerTypeStatsPlugin';@Componentstruct TypeStatsView{build(){Column(){Text('喝水类型分布').fontSize(18).margin({bottom:8});TypeStatsStore.items.forEach((item)=>{Row(){Text(item.type).fontSize(14);Text(`${item.total}ml`).fontSize(14).margin({left:8});}.margin({bottom:4});});}.padding(16)}}

TypeStatsViewArkUI 组件展示了如何在原生侧消费TypeStatsStore.items中的类型分布数据。组件在build方法中通过遍历数组，为每个类型构建一行Row，包含类型名称和对应总饮水量两个Text。这种列表形式虽然简单，但已经足够支持原生页面中的基本统计展示。在后续扩展中，你可以将这些数据用于绘制饼图、条形图，或者在桌面卡片上展示分布的前几名类型，从而让用户更直观地了解自己的饮水偏好。

七、小结

本篇文章以“类型分布统计”为例，展示了如何在 Cordova&openharmony 混合应用中按非时间维度进行多维分析。Web 层通过loadTypeStats函数从 IndexedDB 读取所有喝水记录，并使用Map按类型进行聚合统计，再通过syncTypeStatsToNative将分布结果发送给 ArkTS 插件；OpenHarmony 端使用TypeStatsStore和WaterTrackerTypeStatsPlugin缓存分布数据，并在 ArkUI 组件TypeStatsView中为用户提供原生侧的类型分布列表展示。

在一小段代码一小段说明的写作方式下，本文强调了“通过简单聚合就能从基础记录中挖掘出更多信息”的理念。你可以基于同样的思路，扩展对容器、时间段（例如早中晚）、喝水场景等多个维度的统计分析，从而把喝水记录应用升级为真正意义上的个人饮水行为洞察工具。