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: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);每个售货机使用独立卡片展示，卡片中包含设备名称、位置、类型、库存、状态和操作按钮。
页面设计说明
应用采用青色作为主题色，突出智能设备管理的感觉。
页面主要分为以下区域：
- 顶部标题和在线率区域
- 设备状态统计区域
- 售货机登记区域
- 状态筛选区域
- 设备运行记录区域
卡片采用白色背景，页面背景使用浅灰色。正常、缺货和故障状态分别使用绿色、橙色和红色，方便快速识别异常设备。
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 页面布局
- 简单的库存与设备状态管理
后续还可以加入商品明细、库存消耗记录、自动补货提醒、设备地图、销售额统计和本地数据持久化等功能。