HarmonyOS ArkTS 实战：实现一个校园自动售货机库存与补货记录应用
项目效果
本文使用 HarmonyOS 和 ArkTS 实现一个校园自动售货机库存与补货记录应用。
应用可以登记校园售货机，记录设备名称、所在位置、设备类型、商品库存和运行状态，并提供库存预警、快速补货、故障上报、维修完成、状态筛选和数据统计等功能。
项目使用 DevEco Studio 开发，适配 API 23 及以上版本。
功能介绍
本项目实现了以下功能：
- 登记新的校园自动售货机
- 记录设备名称和所在位置
- 选择饮料机、零食机或综合机类型
- 设置设备初始库存
- 自动识别低库存设备
- 一键为售货机补充库存
- 上报设备故障
- 标记设备维修完成
- 按库存和运行状态筛选设备
- 统计设备总数、缺货数量和故障数量
- 删除不再使用的设备记录
定义数据结构
首先定义自动售货机的数据结构：
ts
interface VendingRecord {
id: number;
name: string;
location: string;
stock: number;
type: string;
status: string;
}字段说明如下：
id：设备记录的唯一编号name：售货机名称或编号location：设备所在位置stock：当前商品库存type：售货机类型status：设备运行状态
初始化页面状态
使用 @State 保存输入内容和筛选条件：
ts
@State private nameText: string = '';
@State private locationText: string = '';
@State private stockText: string = '';
@State private machineType: string = '饮料机';
@State private filterType: string = '全部';
@State private nextId: number = 6;准备一些初始设备数据：
ts
@State private records: 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 直接展示完整页面效果。
添加售货机
用户填写设备名称、位置和初始库存后，可以登记新的售货机：
ts
private addRecord(): void {
const name: string = this.nameText.trim();
const location: string = this.locationText.trim();
const stock: number = Number(this.stockText);
if (
name.length === 0 ||
location.length === 0 ||
Number.isNaN(stock) ||
stock < 0
) {
return;
}
const record: 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，同时将状态恢复为正常：
ts
private restock(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: '正常'
};
}
return item;
});
}这里使用 map 创建新数组，使 ArkUI 能够自动刷新设备卡片和统计数据。
上报故障和完成维修
点击"上报故障"可以将设备标记为故障。维修完成后，再次点击按钮即可恢复设备状态：
ts
private toggleFault(id: number): void {
this.records = this.records.map((item: VendingRecord) => {
if (item.id === id) {
const status: string =
item.status === '故障'
? (item.stock <= 10 ? '缺货' : '正常')
: '故障';
return {
id: item.id,
name: item.name,
location: item.location,
stock: item.stock,
type: item.type,
status
};
}
return item;
});
}维修完成后，系统还会检查库存。如果库存不足，设备恢复为缺货状态；否则恢复为正常状态。
筛选设备记录
页面可以按运行状态筛选售货机：
ts
private getFilteredRecords(): VendingRecord[] {
if (this.filterType === '库存不足') {
return this.records.filter(
(item: VendingRecord) => item.status === '缺货'
);
}
if (this.filterType === '设备故障') {
return this.records.filter(
(item: VendingRecord) => item.status === '故障'
);
}
if (this.filterType === '运行正常') {
return this.records.filter(
(item: VendingRecord) => item.status === '正常'
);
}
return this.records;
}筛选按钮封装如下：
ts
@Builder
FilterButton(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;
});
}在页面中调用：
ts
Row({ space: 8 }) {
this.FilterButton('全部');
this.FilterButton('库存不足');
this.FilterButton('设备故障');
this.FilterButton('运行正常');
}
.width('100%');统计设备状态
使用 filter 统计指定状态的设备数量：
ts
private getCount(status: string): number {
return this.records.filter(
(item: VendingRecord) => item.status === status
).length;
}页面顶部展示设备总数、库存不足和设备故障数量：
ts
this.StatCard(
'设备总数',
`${this.records.length}`,
'#0891B2',
'#ECFEFF'
);
this.StatCard(
'库存不足',
`${this.getCount('缺货')}`,
'#D97706',
'#FFF7E8'
);
this.StatCard(
'设备故障',
`${this.getCount('故障')}`,
'#D92D20',
'#FEE4E2'
);计算设备在线率
设备在线率可以根据故障设备数量动态计算：
ts
const onlineRate: number =
this.records.length === 0
? 0
: Math.round(
(this.records.length - this.getCount('故障')) /
this.records.length *
100
);在页面顶部显示在线率，可以让管理人员快速了解校园售货机的整体运行情况。
设置状态颜色
不同状态使用不同颜色进行区分：
ts
private getStatusColor(status: string): ResourceColor {
if (status === '正常') {
return '#059669';
}
if (status === '缺货') {
return '#D97706';
}
return '#D92D20';
}颜色含义如下：
- 绿色：设备运行正常
- 橙色：库存不足，需要补货
- 红色：设备发生故障
- 青色：页面主要操作和统计信息
删除设备记录
不再使用的售货机可以从列表中删除：
ts
private deleteRecord(id: number): void {
this.records = this.records.filter(
(item: VendingRecord) => item.id !== id
);
}删除后，设备列表和顶部统计数据会同时更新。
使用列表渲染设备
使用 List 和 ForEach 渲染筛选后的设备记录：
ts
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 及以上要求：
json5
{
"name": "default",
"compatibleSdkVersion": "6.1.1(24)",
"runtimeOS": "HarmonyOS",
"targetSdkVersion": "6.1.1(24)",
"compileSdkVersion": "6.1.1(24)"
}entry 模块中的 runtimeOS 也需要保持一致：
json5
{
"apiType": "stageMode",
"targets": [
{
"name": "default",
"runtimeOS": "HarmonyOS"
}
]
}运行项目
使用 DevEco Studio 打开项目，然后找到页面文件：
text
entry/src/main/ets/pages/Index.ets等待项目同步完成，点击右侧 Preview 按钮即可查看页面运行效果。
如果修改代码后预览页面没有变化，可以点击 Preview 窗口中的刷新按钮。
项目总结
本文使用 HarmonyOS 和 ArkTS 实现了一个校园自动售货机库存与补货记录应用。
项目实现了设备登记、类型选择、库存预警、快速补货、故障上报、维修完成、状态筛选、数据统计和删除等功能。
通过这个项目可以掌握：
- ArkTS 接口定义
@State状态管理TextInput输入组件List和ForEach列表渲染map和filter数组操作- 条件判断和状态切换
- 自定义
@Builder组件 - HarmonyOS 页面布局
- 简单的库存与设备状态管理
后续还可以加入商品明细、库存消耗记录、自动补货提醒、设备地图、销售额统计和本地数据持久化等功能。