-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (192 loc) · 7.82 KB
/
index.html
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备状态管理</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
h1 {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
button {
background-color: #007BFF;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.status-free {
color: green;
}
.status-in-use {
color: red;
}
.status-maintenance {
color: yellow;
}
</style>
</head>
<body>
<div id="device" class="content">
<h1>设备状态管理</h1>
<button onclick="addDevice()">新增设备</button>
<table id="device-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>
</tr>
</thead>
<tbody id="device-body">
<!-- 设备信息将在这里动态生成 -->
</tbody>
</table>
</div>
<script>
const repoOwner = "zwj625"; // GitHub 用户名
const repoName = "zwj"; // 仓库名
const filePath = "devices.json"; // 文件路径
const githubToken = ""; // 如果没有令牌，请保持为空
// 初始化设备信息
async function loadDevices() {
const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`);
if (response.ok) {
const data = await response.json();
const content = atob(data.content); // 解码内容
window.devices = JSON.parse(content) || [];
renderDevices();
} else {
console.error("无法加载设备信息", response.statusText);
}
}
// 渲染设备信息
function renderDevices() {
const deviceBody = document.getElementById('device-body');
deviceBody.innerHTML = '';
devices.forEach((device, index) => {
const statusClass = getStatusClass(device.status);
const row = `<tr>
<td onclick="editCell(this, ${index}, 'lab')">${device.lab}</td>
<td onclick="editCell(this, ${index}, 'category')">${device.category}</td>
<td onclick="editCell(this, ${index}, 'name')">${device.name}</td>
<td onclick="editCell(this, ${index}, 'model')">${device.model}</td>
<td onclick="editCell(this, ${index}, 'source')">${device.source}</td>
<td onclick="editCell(this, ${index}, 'manufacturer')">${device.manufacturer}</td>
<td onclick="editCell(this, ${index}, 'purchaseDate')">${device.purchaseDate}</td>
<td class="status ${statusClass}" onclick="editCell(this, ${index}, 'status')">${device.status}</td>
<td onclick="editCell(this, ${index}, 'user')">${device.user}</td>
<td onclick="editCell(this, ${index}, 'usageTime')">${device.usageTime}</td>
<td><button onclick="removeDevice(${index})">删除</button></td>
</tr>`;
deviceBody.innerHTML += row;
});
}
// 获取状态类
function getStatusClass(status) {
switch (status) {
case "空闲":
return "status-free";
case "使用中":
return "status-in-use";
case "维护":
return "status-maintenance";
default:
return "";
}
}
// 编辑单元格
async function editCell(cell, index, field) {
const currentValue = cell.textContent;
const newValue = prompt(`请输入新的${field}：`, currentValue);
if (newValue !== null && newValue.trim() !== "") {
devices[index][field] = newValue.trim();
cell.textContent = newValue.trim();
await updateGitHub(); // 保存到 GitHub
}
}
// 新增设备
async function addDevice() {
const lab = prompt("请输入所属实验室：");
const category = prompt("请输入分类：");
const name = prompt("请输入设备名称：");
const model = prompt("请输入型号：");
const source = prompt("请输入采购渠道：");
const manufacturer = prompt("请输入维修厂家：");
const purchaseDate = prompt("请输入采购时间：");
const status = prompt("请输入状态（空闲、使用中、维护）：");
const user = prompt("请输入使用人：");
const usageTime = prompt("请输入使用时间（小时）：");
devices.push({ lab, category, name, model, source, manufacturer, purchaseDate, status, user, usageTime: parseFloat(usageTime) });
await updateGitHub(); // 保存到 GitHub
renderDevices(); // 重新加载设备列表
}
// 删除设备
async function removeDevice(index) {
if (confirm("确定要删除此设备吗？")) {
devices.splice(index, 1);
await updateGitHub(); // 保存到 GitHub
renderDevices(); // 重新加载设备列表
}
}
// 更新 GitHub
async function updateGitHub() {
const content = btoa(JSON.stringify(devices, null, 2)); // 编码内容
const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`, {
method: 'PUT',
headers: {
'Authorization': `token ${githubToken}`, // 如果有令牌，请提供
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: '更新设备信息',
content: content,
sha: await getFileSha() // 获取文件的 SHA
})
});
if (!response.ok) {
console.error("更新失败", response.statusText);
}
}
// 获取文件的 SHA
async function getFileSha() {
const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`);
const data = await response.json();
return data.sha;
}
// 页面加载时初始化设备信息
window.onload = loadDevices;
</script>
</body>
</html>