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

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:number6;准备一些初始设备数据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:stringthis.nameText.trim();constlocation:stringthis.locationText.trim();conststock:numberNumber(this.stockText);if(name.length0||location.length0||Number.isNaN(stock)||stock0){return;}constrecord:VendingRecord{id:this.nextId,name,location,stock,type:this.machineType,status:stock10?缺货:正常};this.records[record,...this.records];this.nextId1;this.nameText;this.locationText;this.stockText;}如果初始库存小于或等于 10系统会自动将设备标记为“缺货”。实现快速补货点击“补货 20”按钮后设备库存增加 20同时将状态恢复为正常privaterestock(id:number):void{this.recordsthis.records.map((item:VendingRecord){if(item.idid){return{id:item.id,name:item.name,location:item.location,stock:item.stock20,type:item.type,status:正常};}returnitem;});}这里使用map创建新数组使 ArkUI 能够自动刷新设备卡片和统计数据。上报故障和完成维修点击“上报故障”可以将设备标记为故障。维修完成后再次点击按钮即可恢复设备状态privatetoggleFault(id:number):void{this.recordsthis.records.map((item:VendingRecord){if(item.idid){conststatus:stringitem.status故障?(item.stock10?缺货:正常):故障;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.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#0891B2:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}在页面中调用Row({space:8}){this.FilterButton(全部);this.FilterButton(库存不足);this.FilterButton(设备故障);this.FilterButton(运行正常);}.width(100%);统计设备状态使用filter统计指定状态的设备数量privategetCount(status:string):number{returnthis.records.filter((item:VendingRecord)item.statusstatus).length;}页面顶部展示设备总数、库存不足和设备故障数量this.StatCard(设备总数,${this.records.length},#0891B2,#ECFEFF);this.StatCard(库存不足,${this.getCount(缺货)},#D97706,#FFF7E8);this.StatCard(设备故障,${this.getCount(故障)},#D92D20,#FEE4E2);计算设备在线率设备在线率可以根据故障设备数量动态计算constonlineRate:numberthis.records.length0?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.recordsthis.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);每个售货机使用独立卡片展示卡片中包含设备名称、位置、类型、库存、状态和操作按钮。页面设计说明应用采用青色作为主题色突出智能设备管理的感觉。页面主要分为以下区域顶部标题和在线率区域设备状态统计区域售货机登记区域状态筛选区域设备运行记录区域卡片采用白色背景页面背景使用浅灰色。正常、缺货和故障状态分别使用绿色、橙色和红色方便快速识别异常设备。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 页面布局简单的库存与设备状态管理后续还可以加入商品明细、库存消耗记录、自动补货提醒、设备地图、销售额统计和本地数据持久化等功能。