+ 添加常用标品信息功能
+ 设备信息数量提示移至表格头部
This commit is contained in:
@@ -32,6 +32,10 @@
|
|||||||
"name": "设备信息",
|
"name": "设备信息",
|
||||||
"location": "./views/equipment.html"
|
"location": "./views/equipment.html"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "常用标品信息",
|
||||||
|
"location": "./views/common-standards.html"
|
||||||
|
}
|
||||||
// {
|
// {
|
||||||
// "name": "L414-5KR 相关物质",
|
// "name": "L414-5KR 相关物质",
|
||||||
// "location": "./views/L414-5KR-impurities.html"
|
// "location": "./views/L414-5KR-impurities.html"
|
||||||
|
|||||||
142
views/common-standards.html
Normal file
142
views/common-standards.html
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-cmn-Hans">
|
||||||
|
|
||||||
|
<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="../statics/github.css">
|
||||||
|
<link rel="stylesheet" href="../statics/theme.css">
|
||||||
|
<style>
|
||||||
|
.expir30 {
|
||||||
|
color: darkorange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expir7 {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expired {
|
||||||
|
color: red;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-table caption {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||||
|
<script src="./common-standards.info.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
$(() => {
|
||||||
|
createTable(info)
|
||||||
|
|
||||||
|
$("#search").click(() => {
|
||||||
|
let keyword = $("#keyword").val()
|
||||||
|
if (keyword.trim() == "") {
|
||||||
|
createTable(info)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let temp = []
|
||||||
|
info.filter(value => {
|
||||||
|
if (value.batch.toLowerCase().includes(keyword.toLowerCase())) {
|
||||||
|
temp.push(value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
createTable(temp)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function createTable(data) {
|
||||||
|
let content = document.getElementById("content")
|
||||||
|
content.innerHTML = ""
|
||||||
|
let table = document.createElement("table")
|
||||||
|
table.setAttribute("class", "pure-table")
|
||||||
|
|
||||||
|
// 添加
|
||||||
|
let caption = document.createElement("caption")
|
||||||
|
caption.innerText = `共找到 ${data.length} 条记录`
|
||||||
|
table.appendChild(caption)
|
||||||
|
|
||||||
|
// 添加表头
|
||||||
|
let tr = document.createElement("tr")
|
||||||
|
let th_batch = document.createElement("th")
|
||||||
|
let th_expir = document.createElement("th")
|
||||||
|
let th_contont = document.createElement("th")
|
||||||
|
th_batch.innerText = "批号"
|
||||||
|
th_expir.innerText = "有效期至"
|
||||||
|
th_contont.innerText = "含量丨纯度"
|
||||||
|
tr.appendChild(th_batch)
|
||||||
|
tr.appendChild(th_expir)
|
||||||
|
tr.appendChild(th_contont)
|
||||||
|
table.appendChild(tr)
|
||||||
|
|
||||||
|
// 向表格添加内容
|
||||||
|
data.forEach((value) => {
|
||||||
|
let tr = document.createElement("tr")
|
||||||
|
let td_batch = document.createElement("td")
|
||||||
|
let td_expir = document.createElement("td")
|
||||||
|
let td_content = document.createElement("td")
|
||||||
|
|
||||||
|
td_batch.innerHTML = value.batch
|
||||||
|
td_expir.innerHTML = expir(value.expir)
|
||||||
|
td_content.innerHTML = value.content
|
||||||
|
|
||||||
|
tr.appendChild(td_batch)
|
||||||
|
tr.appendChild(td_expir)
|
||||||
|
tr.appendChild(td_content)
|
||||||
|
table.appendChild(tr)
|
||||||
|
})
|
||||||
|
|
||||||
|
content.appendChild(table)
|
||||||
|
}
|
||||||
|
|
||||||
|
function expir(value) {
|
||||||
|
let date = new Date()
|
||||||
|
let array = value.split(".")
|
||||||
|
date.setFullYear(array[0], array[1] - 1, array[2])
|
||||||
|
|
||||||
|
let day = (date - Date.now()) / 86400000
|
||||||
|
|
||||||
|
if (day <= 0) {
|
||||||
|
return `<span class='expired'>${value}</span>`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day <= 7) {
|
||||||
|
return `<span class='expir7'>${value}</span>`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day <= 30) {
|
||||||
|
return `<span class='expir30'>${value}</span>`
|
||||||
|
}
|
||||||
|
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="width: 100%; white-space: nowrap;">
|
||||||
|
<input style="width: 80%;" type="text" id="keyword" placeholder="输入批号进行搜索（忽略大小写）">
|
||||||
|
<button style="width: 15%;" id="search" type="submit">搜索</button>
|
||||||
|
</div>
|
||||||
|
<div id="content"></div>
|
||||||
|
<p>
|
||||||
|
过期提醒：<br>
|
||||||
|
<span class="expir30">黄色表示有效期剩余30天</span><br>
|
||||||
|
<span class="expir7">红色表示有效期剩余7天</span><br>
|
||||||
|
<span class="expired">红色加删除线表示已过期</span><br>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
51
views/common-standards.info.js
Normal file
51
views/common-standards.info.js
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
let info = [
|
||||||
|
// L018 系列
|
||||||
|
{
|
||||||
|
"kind": "L018-1",
|
||||||
|
"batch": "S018-1-21037023",
|
||||||
|
"expir": "2023.05.18",
|
||||||
|
"content": "99.4%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-4",
|
||||||
|
"batch": "S018-2-21029065",
|
||||||
|
"expir": "2026.11.04",
|
||||||
|
"content": "99.9%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-4",
|
||||||
|
"batch": "S018-3-21037001",
|
||||||
|
"expir": "2026.11.04",
|
||||||
|
"content": "99.1%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-4",
|
||||||
|
"batch": "L018-4-211101",
|
||||||
|
"expir": "2023.05.06",
|
||||||
|
"content": "99.8%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-5",
|
||||||
|
"batch": "L018-5S-210801",
|
||||||
|
"expir": "2026.08.16",
|
||||||
|
"content": "99.6%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-5",
|
||||||
|
"batch": "L018-5(TP6)-220901",
|
||||||
|
"expir": "2027.08.31",
|
||||||
|
"content": "100.0%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-6",
|
||||||
|
"batch": "L018-6-210101",
|
||||||
|
"expir": "2026.01.01",
|
||||||
|
"content": "100.0%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "L018-6",
|
||||||
|
"batch": "L018-6S-2021017081",
|
||||||
|
"expir": "2026.08.20",
|
||||||
|
"content": "99.8%"
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -8,12 +8,36 @@
|
|||||||
<title>设备信息</title>
|
<title>设备信息</title>
|
||||||
<link rel="stylesheet" href="../statics/github.css">
|
<link rel="stylesheet" href="../statics/github.css">
|
||||||
<link rel="stylesheet" href="../statics/theme.css">
|
<link rel="stylesheet" href="../statics/theme.css">
|
||||||
|
<style>
|
||||||
|
.expir30 {
|
||||||
|
color: darkorange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expir7 {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expired {
|
||||||
|
color: red;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-table caption {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||||
<script src="./equipment.info.js"></script>
|
<script src="./equipment.info.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(() => {
|
$(document).ready(() => {
|
||||||
createTable(info)
|
createTable(info)
|
||||||
$("#keyword").attr("placeholder", "输入查询关键字（忽略大小写）")
|
|
||||||
$("#search").click(() => {
|
$("#search").click(() => {
|
||||||
let keyword = $("#keyword").val()
|
let keyword = $("#keyword").val()
|
||||||
if (keyword == "") {
|
if (keyword == "") {
|
||||||
@@ -39,9 +63,12 @@
|
|||||||
let content = document.getElementById("content")
|
let content = document.getElementById("content")
|
||||||
content.innerHTML = ""
|
content.innerHTML = ""
|
||||||
let table = document.createElement("table")
|
let table = document.createElement("table")
|
||||||
table.setAttribute("style", "font-size: small; width: 100%;")
|
|
||||||
table.setAttribute("class", "pure-table")
|
table.setAttribute("class", "pure-table")
|
||||||
|
|
||||||
|
let caption = document.createElement("caption")
|
||||||
|
caption.innerText = `共找到 ${data.length} 条记录`
|
||||||
|
table.appendChild(caption)
|
||||||
|
|
||||||
// add header
|
// add header
|
||||||
let tr = document.createElement("tr")
|
let tr = document.createElement("tr")
|
||||||
let th_where = document.createElement("th")
|
let th_where = document.createElement("th")
|
||||||
@@ -80,9 +107,6 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
content.appendChild(table)
|
content.appendChild(table)
|
||||||
let num = document.createElement("span")
|
|
||||||
num.innerText = `共 ${data.length} 条记录`
|
|
||||||
content.appendChild(num)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置日期样式
|
// 设置日期样式
|
||||||
@@ -94,15 +118,15 @@
|
|||||||
let day = (date - Date.now()) / 86400000
|
let day = (date - Date.now()) / 86400000
|
||||||
|
|
||||||
if (day <= 0) {
|
if (day <= 0) {
|
||||||
return `<span style='color: red;'><s>${value}</s></span>`
|
return `<span class='expired'>${value}</span>`
|
||||||
}
|
}
|
||||||
|
|
||||||
if (day <= 7) {
|
if (day <= 7) {
|
||||||
return `<span style='color: red;'>${value}</span>`
|
return `<span class='expir7'>${value}</span>`
|
||||||
}
|
}
|
||||||
|
|
||||||
if (day <= 30) {
|
if (day <= 30) {
|
||||||
return `<span style='color: darkorange;'>${value}</span>`
|
return `<span class='expir30'>${value}</span>`
|
||||||
}
|
}
|
||||||
|
|
||||||
return value
|
return value
|
||||||
@@ -112,15 +136,15 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div style="width: 100%; white-space: nowrap;">
|
<div style="width: 100%; white-space: nowrap;">
|
||||||
<input style="width: 80%;" type="text" id="keyword" placeholder="">
|
<input style="width: 80%;" type="text" id="keyword" placeholder="输入查询关键字（忽略大小写）">
|
||||||
<button style="width: 15%;" id="search" type="submit">搜索</button>
|
<button style="width: 15%;" id="search" type="submit">搜索</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="content"></div>
|
<div id="content"></div>
|
||||||
<p>
|
<p>
|
||||||
过期提醒：<br>
|
过期提醒：<br>
|
||||||
<span style="color: darkorange;">黄色表示有效期剩余30天</span><br>
|
<span class="expir30">黄色表示有效期剩余30天</span><br>
|
||||||
<span style="color: red;">红色表示有效期剩余7天</span><br>
|
<span class="expir7">红色表示有效期剩余7天</span><br>
|
||||||
<span style="color: red;"><s>红色加删除线表示已过期</s></span><br>
|
<span class="expired">红色加删除线表示已过期</span><br>
|
||||||
</p>
|
</p>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user