企业官网建设流程全解析

苏州游玩攻略必去的地方,龙口seo,wordpress上传源码,什么网站做软件任务挣钱一、功能概述 除了时间维度外#xff0c;“喝水类型”也是一个非常重要的分析维度。例如#xff0c;用户可能想知道最近一周喝了多少白开水、多少茶水、多少含糖饮料。本篇文章围绕“类型分布统计”页面#xff0c;介绍如何在 Cordova Web 层 按类型进行聚合统计#xff0c…一、功能概述除了时间维度外“喝水类型”也是一个非常重要的分析维度。例如用户可能想知道最近一周喝了多少白开水、多少茶水、多少含糖饮料。本篇文章围绕“类型分布统计”页面介绍如何在Cordova Web 层按类型进行聚合统计并将结果同步到OpenHarmony ArkTS为原生图表或卡片展示提供数据支持。文章依旧采用一段代码一段说明的方式并包含 ArkTS 示例代码。二、Web 端类型分布页面结构dividtype-stats-pageclasspage page-type-statsh1喝水类型分布/h1tableclassdata-tableidtable-type-statstheadtrth类型/thth总饮水量 (ml)/th/tr/theadtbodyidtable-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(){constrecordsawaitdb.getAllDrinkRecords();constgroupMapnewMap();records.forEach((r){constkeyr.type||unknown;constcurrentgroupMap.get(key)||0;groupMap.set(key,currentr.amount);});consttbodydocument.getElementById(table-type-stats-body);if(!tbody)return;tbody.innerHTML;conststatsForNative[];groupMap.forEach((total,type){consttrdocument.createElement(tr);consttdTypedocument.createElement(td);consttdTotaldocument.createElement(td);tdType.textContenttype;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.etsimportcommonfromohos.app.ability.common;exportinterfaceTypeStatItem{type:string;total:number;}exportclassTypeStatsStore{privatestatic_items:TypeStatItem[][];staticsetItems(items:TypeStatItem[]){this._itemsitems;}staticgetitems(){returnthis._items;}}exportdefaultclassWaterTrackerTypeStatsPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.contextctx;}setTypeStats(args:ArrayObject,callbackId:number){constitemsargs[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。这种列表形式虽然简单但已经足够支持原生页面中的基本统计展示。在后续扩展中你可以将这些数据用于绘制饼图、条形图或者在桌面卡片上展示分布的前几名类型从而让用户更直观地了解自己的饮水偏好。七、小结本篇文章以“类型分布统计”为例展示了如何在 Cordovaopenharmony 混合应用中按非时间维度进行多维分析。Web 层通过loadTypeStats函数从 IndexedDB 读取所有喝水记录并使用Map按类型进行聚合统计再通过syncTypeStatsToNative将分布结果发送给 ArkTS 插件OpenHarmony 端使用TypeStatsStore和WaterTrackerTypeStatsPlugin缓存分布数据并在 ArkUI 组件TypeStatsView中为用户提供原生侧的类型分布列表展示。在一小段代码一小段说明的写作方式下本文强调了“通过简单聚合就能从基础记录中挖掘出更多信息”的理念。你可以基于同样的思路扩展对容器、时间段例如早中晚、喝水场景等多个维度的统计分析从而把喝水记录应用升级为真正意义上的个人饮水行为洞察工具。