HarmonyOS ArkTS 实战：实现一个校园自动售货机库存与补货记录应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园自动售货机库存与补货记录应用。

应用可以登记校园售货机，记录设备名称、所在位置、设备类型、商品库存和运行状态，并提供库存预警、快速补货、故障上报、维修完成、状态筛选和数据统计等功能。

项目使用 DevEco Studio 开发，适配 API 23 及以上版本。

功能介绍

本项目实现了以下功能：

• 登记新的校园自动售货机
• 记录设备名称和所在位置
• 选择饮料机、零食机或综合机类型
• 设置设备初始库存
• 自动识别低库存设备
• 一键为售货机补充库存
• 上报设备故障
• 标记设备维修完成
• 按库存和运行状态筛选设备
• 统计设备总数、缺货数量和故障数量
• 删除不再使用的设备记录

定义数据结构

首先定义自动售货机的数据结构：

interfaceVendingRecord{id:number;name:string;location:string;stock:number;type:string;status:string;}

字段说明如下：

• id：设备记录的唯一编号
• name：售货机名称或编号
• location：设备所在位置
• stock：当前商品库存
• type：售货机类型
• status：设备运行状态

初始化页面状态

使用@State保存输入内容和筛选条件：

@StateprivatenameText:string='';@StateprivatelocationText:string='';@StateprivatestockText:string='';@StateprivatemachineType:string='饮料机';@StateprivatefilterType:string='全部';@StateprivatenextId:number=6;

准备一些初始设备数据：

@Stateprivaterecords:VendingRecord[]=[{id:1,name:'A-01 售货机',location:'图书馆一楼',stock:42,type:'饮料机',status:'正常'},{id:2,name:'B-03 售货机',location:'第二教学楼',stock:8,type:'综合机',status:'缺货'},{id:3,name:'C-02 售货机',location:'南区宿舍大厅',stock:25,type:'零食机',status:'正常'},{id:4,name:'D-01 售货机',location:'东区体育馆',stock:16,type:'饮料机',status:'故障'}];

初始数据包含正常、缺货和故障三种状态，可以让 Preview 直接展示完整页面效果。

添加售货机

用户填写设备名称、位置和初始库存后，可以登记新的售货机：

privateaddRecord():void{constname:string=this.nameText.trim();constlocation:string=this.locationText.trim();conststock:number=Number(this.stockText);if(name.length===0||location.length===0||Number.isNaN(stock)||stock<0){return;}constrecord:VendingRecord={id:this.nextId,name,location,stock,type:this.machineType,status:stock<=10?'缺货':'正常'};this.records=[record,...this.records];this.nextId+=1;this.nameText='';this.locationText='';this.stockText='';}

如果初始库存小于或等于 10，系统会自动将设备标记为“缺货”。

实现快速补货

点击“补货 +20”按钮后，设备库存增加 20，同时将状态恢复为正常：

privaterestock(id:number):void{this.records=this.records.map((item:VendingRecord)=>{if(item.id===id){return{id:item.id,name:item.name,location:item.location,stock:item.stock+20,type:item.type,status:'正常'};}returnitem;});}

这里使用map创建新数组，使 ArkUI 能够自动刷新设备卡片和统计数据。

上报故障和完成维修

点击“上报故障”可以将设备标记为故障。维修完成后，再次点击按钮即可恢复设备状态：

privatetoggleFault(id:number):void{this.records=this.records.map((item:VendingRecord)=>{if(item.id===id){conststatus:string=item.status==='故障'?(item.stock<=10?'缺货':'正常'):'故障';return{id:item.id,name:item.name,location:item.location,stock:item.stock,type:item.type,status};}returnitem;});}

维修完成后，系统还会检查库存。如果库存不足，设备恢复为缺货状态；否则恢复为正常状态。

筛选设备记录

页面可以按运行状态筛选售货机：

privategetFilteredRecords():VendingRecord[]{if(this.filterType==='库存不足'){returnthis.records.filter((item:VendingRecord)=>item.status==='缺货');}if(this.filterType==='设备故障'){returnthis.records.filter((item:VendingRecord)=>item.status==='故障');}if(this.filterType==='运行正常'){returnthis.records.filter((item:VendingRecord)=>item.status==='正常');}returnthis.records;}

筛选按钮封装如下：

@BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterType===text?Color.White:'#344054').backgroundColor(this.filterType===text?'#0891B2':'#E8EEF7').borderRadius(8).onClick(()=>{this.filterType=text;});}

在页面中调用：

Row({space:8}){this.FilterButton('全部');this.FilterButton('库存不足');this.FilterButton('设备故障');this.FilterButton('运行正常');}.width('100%');

统计设备状态

使用filter统计指定状态的设备数量：

privategetCount(status:string):number{returnthis.records.filter((item:VendingRecord)=>item.status===status).length;}

页面顶部展示设备总数、库存不足和设备故障数量：

this.StatCard('设备总数',`${this.records.length}`,'#0891B2','#ECFEFF');this.StatCard('库存不足',`${this.getCount('缺货')}`,'#D97706','#FFF7E8');this.StatCard('设备故障',`${this.getCount('故障')}`,'#D92D20','#FEE4E2');

计算设备在线率

设备在线率可以根据故障设备数量动态计算：

constonlineRate:number=this.records.length===0?0:Math.round((this.records.length-this.getCount('故障'))/this.records.length*100);

在页面顶部显示在线率，可以让管理人员快速了解校园售货机的整体运行情况。

设置状态颜色

不同状态使用不同颜色进行区分：

privategetStatusColor(status:string):ResourceColor{if(status==='正常'){return'#059669';}if(status==='缺货'){return'#D97706';}return'#D92D20';}

颜色含义如下：

• 绿色：设备运行正常
• 橙色：库存不足，需要补货
• 红色：设备发生故障
• 青色：页面主要操作和统计信息

删除设备记录

不再使用的售货机可以从列表中删除：

privatedeleteRecord(id:number):void{this.records=this.records.filter((item:VendingRecord)=>item.id!==id);}

删除后，设备列表和顶部统计数据会同时更新。

使用列表渲染设备

使用List和ForEach渲染筛选后的设备记录：

List({space:10}){ForEach(this.getFilteredRecords(),(item:VendingRecord)=>{ListItem(){this.MachineCard(item)}},(item:VendingRecord)=>item.id.toString());}.width('100%').layoutWeight(1).scrollBar(BarState.Off);

每个售货机使用独立卡片展示，卡片中包含设备名称、位置、类型、库存、状态和操作按钮。

页面设计说明

应用采用青色作为主题色，突出智能设备管理的感觉。

页面主要分为以下区域：

1. 顶部标题和在线率区域
2. 设备状态统计区域
3. 售货机登记区域
4. 状态筛选区域
5. 设备运行记录区域

卡片采用白色背景，页面背景使用浅灰色。正常、缺货和故障状态分别使用绿色、橙色和红色，方便快速识别异常设备。

SDK 配置

本项目使用 HarmonyOS API 24，满足 API 23 及以上要求：

{ "name": "default", "compatibleSdkVersion": "6.1.1(24)", "runtimeOS": "HarmonyOS", "targetSdkVersion": "6.1.1(24)", "compileSdkVersion": "6.1.1(24)" }

entry 模块中的runtimeOS也需要保持一致：

{ "apiType": "stageMode", "targets": [ { "name": "default", "runtimeOS": "HarmonyOS" } ] }

运行项目

使用 DevEco Studio 打开项目，然后找到页面文件：

entry/src/main/ets/pages/Index.ets

等待项目同步完成，点击右侧Preview按钮即可查看页面运行效果。

如果修改代码后预览页面没有变化，可以点击 Preview 窗口中的刷新按钮。

项目总结

本文使用 HarmonyOS 和 ArkTS 实现了一个校园自动售货机库存与补货记录应用。

项目实现了设备登记、类型选择、库存预警、快速补货、故障上报、维修完成、状态筛选、数据统计和删除等功能。

通过这个项目可以掌握：

• ArkTS 接口定义
• @State状态管理
• TextInput输入组件
• List和ForEach列表渲染
• map和filter数组操作
• 条件判断和状态切换
• 自定义@Builder组件
• HarmonyOS 页面布局
• 简单的库存与设备状态管理

后续还可以加入商品明细、库存消耗记录、自动补货提醒、设备地图、销售额统计和本地数据持久化等功能。