2753 字

14 分钟

【简单小项目】JavaScript实现停车场管理系统

2023-06-26

学习笔记/项目

JavaScript

/

项目

前言#

最近，帮一个同学编写了一个可视化的停车场管理系统程序，用于辅助他们的管理学的 pre。所以这个小项目也非常的简单，刚好运用了之前算法设计与分析与 WEB 技术的结合。既然是可视化程序，第一反应可以使用 C++，但是恰好上学期学习了 JavaScript，于是就用 JavaScript 编写这个程序。

项目在线 demo 地址：https://park.hoyue.eu.org/

信息描述#

对于一个有限的停车场空间内，有一个固定的入口和出口。例子中设置为 4 列车位，除了最左侧的一列有 8 个车位外，每一列有 7 个车位。 入口和出口在同一个位置(1,0) ，每一列从左往右依次以 A0/B1/C2/D3 开头命名车位。根据纵坐标，也依次从 0 开始向上递增。概念图如下：

我们抽象成表格，就是如下的情况：

y \ x	A0	B1	C2	D3
8
7
6
5
4
3
2
1
0		Entrance

这是按照坐标轴的表格，其中如果这个位置是可用的，那么它的背景颜色就是 绿色(green)。如果这个位置是无效的，那么它的背景颜色就是 海蓝宝石色(aquamarine)。如果它的背景颜色是 红色(red) 的，那么表示该位置已经被占用，存在车辆了。

现在需要实现如下功能：

车辆停入：输入入场时间和车牌号，将车辆停入距离入口最近的且未被占用的车位，并显示停入信息。
车辆驶离：输入出场时间和车牌号，释放被占用的车位，并输出驶离信息。
费用计算：输出停车产生的费用，该例子中为比较简单的 (t-1)×1。
表格显示：在表格上可视化展示停车位情况，在被占用的停车位中需要写入车牌号。

问题分析#

距离最短问题#

对于这个问题，还是比较简单解决的。首先是解决距离问题。

因为要求中，每个格子距离起点的距离是固定的，我们不必每次停入的时候都重新计算找最小值，只需要一直维护一个容易保持有最小值的数据结构就可以了。于是很容易想到使用一个最小堆去存储这些距离。

对于在 JavaScript 中实现堆，只需要稍微根据《Introduction to Algorithm》中的伪代码进行修改即可。

信息存储#

这个问题中有很多信息，该如何存储呢？我想到的是使用两个类。

一个类是 Heap，用于维护堆数组。它有属性 x 和 y 可以用于定位单元格，有一个属性 distance 用于记录距离，这是堆数组的排列依据。
另一个类 Position 是用来维护车位（单元格），有属性 status 用于记录当前单元格的状态，分为 “occupied”（已占用）、“available”（可用）和 “null”（无效），一个属性 name 用于记录车辆信息，若车位非占用状态则为空，一个属性 t 用来记录车辆的入场时间。

初始情况下，定义一个一维数组 heap 作为 Heap 类的变量，定义一个二维数组 pos 作为 Position 类的变量。根据表格现有信息，初始化这两个数组即可。

入场问题#

当车入场时，要做的事很简单。首先就是取到最短可用的车位的坐标，通过获取堆首的信息中 x, y 属性就可以知道它的坐标。然后在单元格数组 pos 中，标记指定位置，填入特定信息即可。

出场问题#

当车出场时，若输入的车牌在停车场中，那么就恢复指定单元格位置，并且输出指定信息。我们可以在每次删去堆的时候，将其放到数组的末尾，这样出场的时候只需要匹配 heapSize + 1 到 SIZE 即可。

代码#

代码按照部分展示在本文中，全文代码请看：https://github.com/Aki-Hoyue/parking_system

初始化#

堆实现#

这里是参考《Introduction to Algorithm》的堆实现部分的 JavaScript 代码。

伪代码部分以及分析请见：

https://hoyue.fun/algorithm_4.html

首先是基本堆函数：

1
function heapParent(i) {
2
    return Math.floor(i / 2);
3
}
4

5
function left(i) {
6
    return i * 2;
7
}
8

9
function right(i) {
10
    return i * 2 + 1;
11
}

维护最小堆：

1
function minHeapify(A, i) {
2
    var l = left(i);
3
    var r = right(i);
4
    var smallest = i;
5

6
    if (l <= heapSize && A[l].distance < A[i].distance)
7
        smallest = l;
8

9
    if (r <= heapSize && A[r].distance < A[smallest].distance)
10
        smallest = r;
11

12
    if (smallest !== i) {
13
        var temp = A[i];
14
        A[i] = A[smallest];
15
        A[smallest] = temp;
16
        minHeapify(A, smallest);
17
    }
18
}

建堆：

1
function buildMinHeap(A, n) {
2
    for (var i = Math.floor(n / 2); i >= 1; i--) {
3
        minHeapify(A, i);
4
    }
5
}

删除堆首并放到堆后：

1
function extractMinFromHeap(A) {
2
    if (heapSize < 1)
3
        throw new Error("heap underflow");
4

5
    const minElement = A[[1]](file://pointer_c3.xml);
6
    A[[1]](file://pointer_c3.xml) = A[heapSize];
7
    A[heapSize] = minElement;
8
    heapSize --;
9
    minHeapify(A, 1);
10
    return minElement;
11
}

插入进堆：

1
function insertHeap(A,index){
2
    if (heapSize == SIZE)
3
        throw new Error("heap overflow");
4
    const element = A[heapSize + 1];
5
    A[++heapSize] = A[index];
6
    A[index] = element;
7
    for (var i = Math.floor(heapSize / 2); i >= 1; i--) {
8
        minHeapify(A, i);
9
    }
10
}

这是一个非常经典的算法导论的 JavaScript 实现，接下来就是把堆当做数据结构去使用堆。

堆初始化#

1
var heapSize = 0;
2
class Heap{
3
    constructor(x,y)
4
    {
5
        this.x = x;
6
        this.y = y;
7
        this.distance = Math.sqrt((x-1)*(x-1) + y * y);
8
    }
9
}
10

11
var heap = new Array(4 * 9);
12
heap[0] = -1;
13
var index = 1;
14
heap[index++] = new Heap(0, 1);
15
for (var x = 0; x < 4; x++) {
16
    for (var y = 2; y < 9; y++) {
17
        heap[index++] = new Heap(x, y);
18
    }
19
}
20
heapSize = index - 1;
21
const SIZE = heapSize;
22
buildMinHeap(heap,heapSize);

设置 Heap 类的三个属性 x, y 和 distance，distance 会根据 x, y 的值自动计算，初始化 0 位置为一个非常小的值（这里因为距离是正数就设置为 -1）。index 作为堆数组的索引，创建每个位置上的 Heap 类元素。

设置一个常量 SIZE，作为最大的情况，之后检测的时候用到。

单元格初始化#

单元格就简单很多，根据之前的表格初始化即可：

y \ x	A0	B1	C2	D3
8
7
6
5
4
3
2
1
0		Entrance

1
class Position {
2
    constructor(status, name, t) {
3
        this.status = status;
4
        this.name = name;
5
        this.t = t;
6
    }
7
}
8

9
var pos = new Array(4);
10
for (var x = 0; x < 4; x++) {
11
    pos[x] = new Array(9);
12
    for (var y = 0; y < 9; y++) {
13
        if (!y || (y == 1 && x)) {
14
            pos[x][y] = new Position("null", "", "");
15
            continue;
16
        }
17
        pos[x][y] = new Position("available", "", "");
18
    }
19
}

当页面被加载的时候，还需要初始化单元格的背景颜色：

1
function loding(){
2
    var table = document.getElementById("ParkingArea");
3
    for(var i = 0; i < 9; i++)  // y
4
        for(var j = 0; j < 4; j++)  // x
5
        {
6
            var cell = table.rows9-i].cells+1];
7
            if(cell.innerHTML == "Entrance") continue;
8
            if(pos[j][i].status == "null")
9
                cell.style.backgroundColor = "aquamarine";
10
            else cell.style.backgroundColor = "green";
11
        }
12
}

入场#

我们需要考虑一些意外条件，先行判断：

堆（停车场）是否已满。
输入的入场时间是否符合标准。
车牌是否为空或者已经停入。

我们需要先特判这些问题：

对于堆是否已满，只需要检查 heapSize 的大小（heapSize < 1 则已满）即可。
对于时间的格式，我们提示用户应该输入格式为 “yyyy/mm/dd hh:mm”，并且使用正则表达式来检查用户的输入。
对于车牌，首先先判断是否为空，再在 heap 数组中 heapSize + 1 到 SIZE 之间（这之间的是已经入场的位置）查找是否有相同的车牌。

于是代码为：

1
function input()
2
{
3
    if (heapSize < 1)
4
    {
5
        window.alert("The parking area is full!");
6
        throw new Error("heap overflow.");
7
    }
8
    var entranceTime = document.getElementById("entrance_time");
9
    var entranceName = document.getElementById("entrance_name");
10
    var acTest = /^([0-9]{4})\/([0-1][0-9])\/([0-3][0-9]) ([0-2][0-9]):([0-5][0-9]):([0-5][0-9])$/;
11
    if(!acTest.test(entranceTime.value))
12
    {
13
        window.alert("The time is not formatted correctly!");
14
        throw new Error("Time format error.");
15
    }
16
    if(!entranceName.value)
17
    {
18
        window.alert("The name of license could not be empty!");
19
        throw new Error("name error.");
20
    }
21

22
    for(var i = heapSize + 1; i <= SIZE; i++)
23
    {
24
        var temp = heap[i];
25
        if(pos[temp.x][temp.y].name == entranceName.value)
26
        {
27
            window.alert("The car has already been parked!");
28
            throw new Error("repark error.");
29
        }
30
    }
31

32
    var parkArea = extractMinFromHeap(heap);
33
    pos[parkArea.x][parkArea.y].status = 'occupied';
34
    pos[parkArea.x][parkArea.y].name = entranceName.value;
35
    pos[parkArea.x][parkArea.y].t = entranceTime.value;
36

37
    var table = document.getElementById("ParkingArea");
38
    var cell = table.rows[9-parkArea.y].cells[parkArea.x+1];
39
    cell.style.backgroundColor = "red";
40
    cell.innerHTML = entranceName.value;
41
    cell.style.color = "green";
42

43
    var info = document.getElementById("info_box");
44
    info.innerHTML = "<b>" + entranceName.value + "</b> parks at <b>" +
45
        String.fromCharCode(parkArea.x + 65) + parkArea.x + parkArea.y + "</b>";
46
}

这个代码会检查停车场是否已满；检查时间、车牌格式；判重后取出最近的可用车位，标记为占用，并更新视图与信息面板。

出场#

对于出场，我们同样考虑如下特殊情况：

堆（停车场）是否已满。
输入的出场时间是否符合标准、是否晚于入场时间。
车牌是否为空以及是否存在。

解决方法与入场类似，时间差用于计算费用（要求出场时间必须晚于入场时间）。

1
function output()
2
{
3
    var time = document.getElementById("out_time");
4
    var acTest = /^([0-9]{4})\/([0-1][0-9])\/([0-3][0-9]) ([0-2][0-9]):([0-5][0-9]):([0-5][0-9])$/;
5
    if(!acTest.test(time.value))
6
    {
7
        window.alert("The time is not formatted correctly!");
8
        throw new Error("Time format error.");
9
    }
10
    var outTime = new Date(time.value);
11
    var outName = document.getElementById("out_name");
12
    if(!outName.value)
13
    {
14
        window.alert("The name of license could not be empty!");
15
        throw new Error("name error.");
16
    }
17

18
    var flag = 0;
19
    for(var i = heapSize + 1; i <= SIZE; i++)
20
    {
21
        var temp = heap[i];
22
        if(pos[temp.x][temp.y].status == 'occupied' && pos[temp.x][temp.y].name == outName.value)
23
        {
24
            flag = 1;
25
            var inTime = new Date(pos[temp.x][temp.y].t);
26
            var diff = (outTime.getTime() - inTime.getTime()) / (1000 * 60 * 60);
27
            if(diff < 0)
28
            {
29
                window.alert("The exit time must not be less than the entry time!");
30
                throw new Error("Time error.");
31
            }
32
            var fee = wealth(Math.ceil(diff));
33

34
            var table = document.getElementById("ParkingArea");
35
            var cell = table.rows9-temp.y].cells.x+1];
36
            cell.style.backgroundColor = "green";
37
            cell.innerHTML = "";
38
            var info = document.getElementById("info_box");
39
            info.innerHTML = "<b>" + outName.value + "</b> was parked for <b>" + Math.floor(diff) +
40
                "hours and " + Math.round((diff - Math.floor(diff)) * 60) + "minutes</b> from " +
41
                 pos[temp.x][temp.y].t + " to " + time.value + "<br>Fee: <b>" + fee + "</b> yuan";
42

43
            pos[temp.x][temp.y].name = "";
44
            pos[temp.x][temp.y].t = "";
45
            pos[temp.x][temp.y].status = "available";
46
            insertHeap(heap,i);
47
        }
48
    }
49
    if(!flag)
50
    {
51
        window.alert("License mismatch!");
52
        throw new Error("No parking.");
53
    }
54
}

费用结算#

费用计算就比较简单了，计算公式就是 1 小时免费，超过一小时收费 (t-1) 元。代码如下：

1
function wealth(t) {
2
    return (t > 0)? (t - 1) : 0;
3
}

HTML#

最后在 HTML 页面中，我设计了左右结构的视图，如下图所示：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>Parking System</title>
5
  <link rel="stylesheet" href="style.css">
6
  <script src="parking.js" async></script>
7
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
8
</head>
9

10
<body onload="loding()">
11
  <table>
12
      <tr>
13
      <td width="50%">
14
      <table id="ParkingArea">
15
          <caption>Parking Area</caption>
16
          <tr>
17
              <th></th>
18
              <th>A / 0</th>
19
              <th>B / 1</th>
20
              <th>C / 2</th>
21
              <th>D / 3</th>
22
              </tr>
23
          <tr>
24
              <th>8</th>
25
              <td></td>
26
              <td></td>
27
              <td></td>
28
              <td></td>
29
          </tr>
30
          <tr>
31
              <th>7</th>
32
              <td></td>
33
              <td></td>
34
              <td></td>
35
              <td></td>
36
          </tr>
37
          <tr>
38
              <th>6</th>
39
              <td></td>
40
              <td></td>
41
              <td></td>
42
              <td></td>
43
          </tr>
44
          <tr>
45
              <th>5</th>
46
              <td></td>
47
              <td></td>
48
              <td></td>
49
              <td></td>
50
          </tr>
51
          <tr>
52
              <th>4</th>
53
              <td></td>
54
              <td></td>
55
              <td></td>
56
              <td></td>
57
          </tr>
58
          <tr>
59
              <th>3</th>
60
              <td></td>
61
              <td></td>
62
              <td></td>
63
              <td></td>
64
          </tr>
65
          <tr>
66
              <th>2</th>
67
              <td></td>
68
              <td></td>
69
              <td></td>
70
              <td></td>
71
          </tr>
72
          <tr>
73
              <th>1</th>
74
              <td></td>
75
              <td></td>
76
              <td></td>
77
              <td></td>
78
          </tr>
79
          <tr>
80
              <th>0</th>
81
              <td></td>
82
              <td id="entrance_point">Entrance</td>
83
              <td></td>
84
              <td></td>
85
          </tr>
86
      </table>
87
      </td>
88
      <td width="50%">
89
      <h2>Dashboard</h2>
90
          <form id="parking_form">
91
          <fieldset>
92
              <legend>Enter</legend>
93
              <label for="entrance_time">Entrance Time:</label>
94
              <input type="text" id="entrance_time" name="entrance_time" maxlength="80" placeholder="yyyy/mm/dd hh:mm:ss" size="30" required><br>
95
              <label for="entrance_name" >License:</label>
96
              <input type="text" id="entrance_name" name="entrance_name" maxlength="30" size="30" required><br>
97
              <input type="button" value="Park" onclick="input()">
98
          </fieldset>
99
          <fieldset>
100
              <legend>Exit</legend>
101
              <label for="out_time">Exit Time:</label>
102
              <input type="text" id="out_time" name="out_time" maxlength="80" placeholder="yyyy/mm/dd hh:mm:ss" size="30" required><br>
103
              <label for="out_name">License:</label>
104
              <input type="text" id="out_name" name="out_name" maxlength="30" size="30" required><br>
105
              <input type="button" value="Check Out" onclick="output()">
106
          </fieldset>
107
          <fieldset>
108
              <legend>Output</legend>
109
              <label id="info_box">Information here...</label><br><br>
110
              <label>Notice: The format of the time must be "<em>yyyy/mm/dd hh:mm:ss</em>"</label><br>
111
              <label>Comment: a cell in <span style="color: aquamarine;">aquamarine</span> is <em>unavailable</em>, and that in <span style="color: green;">green</span> is <em>available</em>, in <span style="color: red;">red</span> is <em>occupied</em>.</label><br>
112
              <input type="reset" value="Clear">
113
          </fieldset>
114
          </form>
115
      </td>
116
      </tr>
117
  </table>
118
</body>
119
</html>

CSS#

这个 CSS 设计得就比较简单了，如下：

1
#ParkingArea{
2
    width: 100%;
3
    border-collapse: collapse;
4
    float: left;
5
}
6

7
table caption{
8
    font-size: 2em;
9
    font-weight: bold;
10
    margin: 1em 0;
11
}
12

13
#ParkingArea th,#ParkingArea td{
14
    border: 1px solid black;
15
    text-align: center;
16
    padding: 14px 0;
17
}
18

19
#ParkingArea tbody tr{
20
    background-color: #eee;
21
}
22

23
#ParkingArea th{
24
    background-color:cadetblue;
25
    color:whitesmoke;
26
}
27

28
#entrance_point{
29
    background-color: goldenrod;
30
    color: purple;
31
}
32

33
h2{
34
    font-size: 2em;
35
    font-weight: bold;
36
    text-align: center;
37
}
38

39
form{
40
    font-size: 14pt;
41
}