116 lines
4.1 KiB
HTML
116 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>设备信息</title>
|
|
<link rel="stylesheet" href="./github.css">
|
|
<link rel="stylesheet" href="./theme.css">
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="./equipment.info.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
createTable(info);
|
|
$("#keyword").attr("placeholder", "输入仪器名称或编号查询（忽略大小写）");
|
|
$("#search").click(() => {
|
|
var keyword = $("#keyword").val();
|
|
var temp = [];
|
|
info.filter(value => {
|
|
if (value.name.includes(keyword) || value.id.toLowerCase().includes(keyword.toLowerCase())) {
|
|
temp.push(value);
|
|
}
|
|
});
|
|
|
|
createTable(temp);
|
|
});
|
|
});
|
|
|
|
// 根据data创建表格
|
|
function createTable(data) {
|
|
var content = document.getElementById("content");
|
|
content.innerHTML = "";
|
|
var table = document.createElement("table");
|
|
table.setAttribute("style", "font-size: small; width: 100%;");
|
|
table.setAttribute("class", "pure-table");
|
|
|
|
// add header
|
|
var tr = document.createElement("tr");
|
|
var th_where = document.createElement("th");
|
|
var th_name = document.createElement("th");
|
|
var th_id = document.createElement("th");
|
|
var th_expir = document.createElement("th");
|
|
|
|
th_where.innerText = "位置";
|
|
th_name.innerText = "名称";
|
|
th_id.innerText = "编号";
|
|
th_expir.innerText = "有效期至";
|
|
tr.appendChild(th_where);
|
|
tr.appendChild(th_name);
|
|
tr.appendChild(th_id);
|
|
tr.appendChild(th_expir);
|
|
table.appendChild(tr);
|
|
|
|
// add contents
|
|
data.forEach(function (value) {
|
|
var tr = document.createElement("tr");
|
|
var td_where = document.createElement("td");
|
|
var td_name = document.createElement("td");
|
|
var td_id = document.createElement("td");
|
|
var td_expir = document.createElement("td");
|
|
|
|
td_where.innerText = value.where;
|
|
td_name.innerText = value.name;
|
|
td_id.innerText = value.id;
|
|
td_expir.innerHTML = expir(value.expir);
|
|
|
|
tr.appendChild(td_where);
|
|
tr.appendChild(td_name);
|
|
tr.appendChild(td_id);
|
|
tr.appendChild(td_expir);
|
|
table.appendChild(tr);
|
|
});
|
|
|
|
content.appendChild(table);
|
|
}
|
|
|
|
// 设置日期样式
|
|
function expir(value) {
|
|
var date = new Date();
|
|
var array = value.split(".");
|
|
date.setFullYear(array[0], array[1] - 1, array[2]);
|
|
|
|
var day = (date - Date.now()) / 86400000;
|
|
|
|
if (day <= 0) {
|
|
return "<span style='color: red;'><s>" + value + "</s></span><br>" + day + "天";
|
|
}
|
|
|
|
if (day <= 7) {
|
|
return "<span style='color: red;'>" + value + "</span><br>" + day + "天";
|
|
}
|
|
|
|
if (day <= 30) {
|
|
return "<span style='color: darkorange;'>" + value + "</span><br>" + day + "天";
|
|
}
|
|
|
|
return value;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<input style="width: 80%;" type="text" id="keyword" placeholder="">
|
|
<button style="width: 15%;" id="search">搜索</button>
|
|
<div id="content"></div>
|
|
<p>
|
|
过期提醒：<br>
|
|
<span style="color: darkorange;">黄色表示有效期剩余30天</span><br>
|
|
<span style="color: red;">红色表示有效期剩余7天</span><br>
|
|
<span style="color: red;"><s>红色加删除线表示已过期</s></span><br>
|
|
</p>
|
|
</body>
|
|
|
|
</html>
|