zjk
2026-07-31 8665daa7aa863f96d0d8f27c167edae1efc38022
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>访客登记记录 - 访客机自助登记管理平台</title>
  <link rel="stylesheet" href="../css/dashboard.css">
  <link rel="stylesheet" href="../css/components.css">
  <link rel="stylesheet" href="../css/visitor-record.css">
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand">
        <img src="../assets/login-avatar.svg" alt="">
        <strong>访客机自助登记管理平台</strong>
      </div>
      <nav class="menu" aria-label="主菜单">
        <a class="menu-item" href="./dashboard.html"><span class="menu-icon home"></span><span>首页</span></a>
        <section class="menu-group open">
          <button class="menu-title" type="button"><span class="menu-icon screen"></span><span>系统</span><span class="chevron"></span></button>
          <a href="./system-config.html">系统配置</a>
          <a href="./protocol-config.html">入园承诺</a>
          <a href="./version-update.html">访客机版本更新</a>
        </section>
        <section class="menu-group open">
          <button class="menu-title" type="button"><span class="menu-icon device"></span><span>设备管理</span><span class="chevron"></span></button>
          <a href="./visitor-machine.html">访客机管理</a>
          <a href="./door-management.html">门禁管理</a>
        </section>
        <section class="menu-group open">
          <button class="menu-title" type="button"><span class="menu-icon people"></span><span>人员管理</span><span class="chevron"></span></button>
          <a href="./department-management.html">部门</a>
          <a href="./employee-management.html">员工管理</a>
        </section>
        <a class="menu-item" href="./area-management.html"><span class="menu-icon map"></span><span>区域管理</span></a>
        <section class="menu-group open">
          <button class="menu-title" type="button"><span class="menu-icon log"></span><span>记录与日志</span><span class="chevron"></span></button>
          <a class="active" href="./visitor-record.html">访客登记记录</a>
          <a href="./operation-log.html">操作日志</a>
        </section>
        <section class="menu-group open">
          <button class="menu-title" type="button"><span class="menu-icon account"></span><span>账号管理</span><span class="chevron"></span></button>
          <a href="./platform-admin.html">平台管理员</a>
          <a href="./role-management.html">角色</a>
        </section>
      </nav>
    </aside>
 
    <section class="main">
      <header class="topbar">
        <div></div>
        <div class="top-actions">
          <button class="icon-button" type="button" title="全屏"><span class="expand-icon"></span></button>
          <span class="user-avatar">用</span>
          <div class="user-menu">
            <button id="userMenuButton" class="user-name" type="button" aria-haspopup="true" aria-expanded="false">
              <span id="userDisplayName">用户</span><span class="user-caret"></span>
            </button>
            <div id="userDropdown" class="user-dropdown" hidden>
              <button type="button" data-action="home">返回首页</button>
              <button type="button" data-action="logout">退出登录</button>
            </div>
          </div>
        </div>
      </header>
 
      <div class="tabs">
        <span class="home-tab"></span>
        <span class="tab-divider"></span>
        <span class="tab active">访客登记记录</span>
      </div>
 
      <main class="record-page">
        <section class="record-card">
          <h1>预约记录</h1>
          <form id="queryForm" class="record-query">
            <label><span>被访人:</span><input id="queryInterviewee" type="text" placeholder="请输入"></label>
            <label><span>被访人部门:</span><input id="queryDept" type="text" placeholder="请输入部门"></label>
            <label class="area-select-label">
              <span>访问区域:</span>
              <div id="areaCascader" class="area-cascader">
                <input id="queryArea" type="hidden">
                <button id="areaCascaderTrigger" class="area-cascader-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                  <span id="areaCascaderText">下拉菜单</span>
                  <span class="area-cascader-arrow"></span>
                </button>
                <div id="areaCascaderPanel" class="area-cascader-panel" role="listbox" hidden></div>
              </div>
            </label>
            <label class="date-label"><span>有效期</span><input id="queryStartTime" type="datetime-local"><input id="queryEndTime" type="datetime-local"></label>
            <label><span>状态:</span><select id="queryStatus">
              <option value="">请选择</option>
              <option value="VISITING">来访中</option>
              <option value="PENDING_CONFIRM">逾期滞留</option>
              <option value="SIGNED_OUT">已签离</option>
              <option value="OVERDUE_AUTO_SIGNED_OUT">超期自动签离</option>
              <option value="CANCELLED">已取消</option>
            </select></label>
            <label><span>访客:</span><input id="queryVisitor" type="text" placeholder="请输入"></label>
            <label><span>来访事由:</span><select id="queryReason">
              <option value="">请选择</option>
              <option value="业务访谈">业务访谈</option>
              <option value="拜访">拜访</option>
              <option value="会议">会议</option>
              <option value="其他">其他</option>
            </select></label>
            <button id="resetButton" class="query-reset" type="button">重置</button>
            <button class="query-search" type="submit">搜索</button>
          </form>
 
          <div class="record-toolbar">
            <button id="exportButton" type="button">导出</button>
          </div>
 
          <table class="record-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>访客</th>
                <th>身份证</th>
                <th>登记类型</th>
                <th>被访人</th>
                <th>被访人部门</th>
                <th>访问区域</th>
                <th>车牌号</th>
                <th>来访事由</th>
                <th>有效期</th>
                <th>状态</th>
                <th>登记时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="recordTableBody"></tbody>
          </table>
          <div id="recordEmpty" class="record-empty" hidden>暂无访客登记记录</div>
          <div id="pagination" class="record-pagination"></div>
        </section>
      </main>
    </section>
  </div>
 
  <script src="../js/components.js"></script>
  <script src="../js/config.js"></script>
  <script src="../js/visitor-record.js"></script>
</body>
</html>