HarmonyOS ArkTS 实战：实现一个校园门禁与访客预约应用

Helen_cai

183人浏览 · 2026-07-19 00:01:26

Helen_cai · 2026-07-19 00:01:26 发布

HarmonyOS ArkTS 实战：实现一个校园门禁与访客预约应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园门禁与访客预约应用。

应用可以生成校园通行码，预约访客入校，查看门禁通行记录，申请晚归权限，并提供访客审批、出入统计和二维码通行等功能。

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

运行效果

23-校园门禁与访客预约应用

功能介绍

本项目实现了以下功能：

校园通行码生成
访客预约登记
访客审批
二维码通行
门禁记录查询
晚归申请
出入统计
通行权限管理
访客二维码
异常记录提醒

定义数据结构

interface AccessRecord {
  id: number;
  personName: string;
  gateName: string;
  direction: string;
  time: string;
  type: string;
  status: string;
}

interface Visitor {
  id: number;
  name: string;
  phone: string;
  idCard: string;
  visitReason: string;
  visitTime: string;
  hostName: string;
  hostDept: string;
  status: string;
  qrCode: string;
  applyTime: string;
}

字段说明：

AccessRecord：门禁记录（id/姓名/门禁点/方向/时间/类型/状态）
Visitor：访客（id/姓名/电话/身份证/事由/访问时间/被访人/被访部门/状态/二维码/申请时间）

初始化页面状态

@State private visitorNameText: string = '';
@State private visitorPhoneText: string = '';
@State private visitReasonText: string = '';
@State private visitTimeText: string = '';
@State private nextVisitorId: number = 5;
@State private currentUserName: string = '王同学';

初始数据：

@State private visitors: Visitor[] = [
  { id: 1, name: '张家长', phone: '138****1234', idCard: '310***********1234', visitReason: '探望学生', visitTime: '2026-07-20 14:00', hostName: '王同学', hostDept: '计算机学院', status: '已通过', qrCode: 'V20260720001', applyTime: '2026-07-18' }
];

@State private accessRecords: AccessRecord[] = [
  { id: 1, personName: '王同学', gateName: '正门', direction: '进入', time: '2026-07-18 08:30', type: '学生', status: '正常' },
  { id: 2, personName: '王同学', gateName: '图书馆闸机', direction: '进入', time: '2026-07-18 09:15', type: '学生', status: '正常' }
];

预约访客

private applyVisitor(): void {
  const name = this.visitorNameText.trim();
  const phone = this.visitorPhoneText.trim();
  const reason = this.visitReasonText.trim();
  const time = this.visitTimeText.trim();
  if (name.length === 0 || phone.length === 0) return;

  const qrCode = 'V' + new Date().toISOString().slice(0,10).replace(/-/g,'') + String(this.nextVisitorId).padStart(3,'0');
  const visitor: Visitor = {
    id: this.nextVisitorId, name, phone, idCard: '', visitReason: reason,
    visitTime: time, hostName: this.currentUserName, hostDept: '计算机学院',
    status: '待审批', qrCode, applyTime: new Date().toISOString().split('T')[0]
  };
  this.visitors = [visitor, ...this.visitors];
  this.nextVisitorId++;
  this.visitorNameText = ''; this.visitorPhoneText = ''; this.visitReasonText = ''; this.visitTimeText = '';
}

审批访客

private approveVisitor(visitorId: number, approved: boolean): void {
  this.visitors = this.visitors.map((v: Visitor) => {
    if (v.id === visitorId && v.status === '待审批') {
      return { ...v, status: approved ? '已通过' : '已拒绝' };
    }
    return v;
  });
}

统计数据

private getTodayInCount(): number {
  return this.accessRecords.filter(r => r.direction === '进入' && r.time.includes('2026-07-18')).length;
}
private getPendingVisitorCount(): number {
  return this.visitors.filter(v => v.status === '待审批').length;
}
private getApprovedVisitorCount(): number {
  return this.visitors.filter(v => v.status === '已通过').length;
}

设置状态颜色

private getVisitorStatusColor(status: string): ResourceColor {
  if (status === '已通过') return '#059669';
  if (status === '待审批') return '#F59E0B';
  if (status === '已拒绝') return '#DC2626';
  return '#6B7280';
}