From 9fb4dc42af85dceaeaa340df64f1540b34cc15c4 Mon Sep 17 00:00:00 2001
From: hbk01 <3243430237@qq.com>
Date: Sun, 2 Apr 2023 20:54:33 +0800
Subject: [PATCH] =?UTF-8?q?+=20=E5=B0=86=E6=A0=87=E5=93=81=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=92=8C=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=BA=E6=95=88=E6=9C=9F=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   8 +-
 .../info/device.json                          |  19 +-
 .../info/standard.json                        |   8 +-
 views/common-standards.html                   | 142 ------------
 views/equipment.html                          | 151 -------------
 views/expir-info.html                         | 203 ++++++++++++++++++
 6 files changed, 209 insertions(+), 322 deletions(-)
 rename views/equipment.info.js => statics/info/device.json (97%)
 rename views/common-standards.info.js => statics/info/standard.json (97%)
 delete mode 100644 views/common-standards.html
 delete mode 100644 views/equipment.html
 create mode 100644 views/expir-info.html

diff --git a/index.html b/index.html
index 33bfb9b..9db5f9d 100644
--- a/index.html
+++ b/index.html
@@ -29,12 +29,8 @@
                 "location": "./views/injection-sequence.html"
             },
             {
-                "name": "设备信息",
-                "location": "./views/equipment.html"
-            },
-            {
-                "name": "常用标品信息",
-                "location": "./views/common-standards.html"
+                "name": "效期查询",
+                "location": "./views/expir-info.html"
             },
             {
                 "name": "常用操作规程",
diff --git a/views/equipment.info.js b/statics/info/device.json
similarity index 97%
rename from views/equipment.info.js
rename to statics/info/device.json
index 6529d9a..f326d6d 100644
--- a/views/equipment.info.js
+++ b/statics/info/device.json
@@ -1,5 +1,4 @@
-let info = [
-    // 天平室
+[
     {
         "where": "天平室",
         "name": "天平",
@@ -30,8 +29,6 @@ let info = [
         "id": "CAQ-14-009",
         "expir": "2023.12.06"
     },
-
-    // 水分室
     {
         "where": "水分室",
         "name": "水分仪",
@@ -56,8 +53,6 @@ let info = [
         "id": "CAS-14-008",
         "expir": "2023.07.10"
     },
-
-    // 高温室
     {
         "where": "高温室",
         "name": "鼓风干燥箱",
@@ -94,8 +89,6 @@ let info = [
         "id": "CBC-14-003",
         "expir": "2023.04.17"
     },
-
-    // 液相室一
     {
         "where": "液相室一",
         "name": "液相色谱仪",
@@ -192,8 +185,6 @@ let info = [
         "id": "CAA-14-037",
         "expir": "2024.09.21"
     },
-
-    // 液相室二
     {
         "where": "液相室二",
         "name": "液相色谱仪",
@@ -242,8 +233,6 @@ let info = [
         "id": "CAA-14-033",
         "expir": "2023.12.01"
     },
-
-    // 气相室
     {
         "where": "气相室",
         "name": "气相色谱仪",
@@ -298,8 +287,6 @@ let info = [
         "id": "CAB-14-012",
         "expir": "2024.09.22"
     },
-
-    // 综合仪器室二
     {
         "where": "仪器室二",
         "name": "质谱仪",
@@ -360,8 +347,6 @@ let info = [
         "id": "XRD-14-001",
         "expir": "2024.07.31"
     },
-
-    // 综合仪器室三
     {
         "where": "仪器室三",
         "name": "电位滴定仪",
@@ -374,4 +359,4 @@ let info = [
         "id": "CAF-14-005",
         "expir": "2023.07.10"
     }
-];
+]
diff --git a/views/common-standards.info.js b/statics/info/standard.json
similarity index 97%
rename from views/common-standards.info.js
rename to statics/info/standard.json
index 34322ef..847bed0 100644
--- a/views/common-standards.info.js
+++ b/statics/info/standard.json
@@ -1,5 +1,4 @@
-let info = [
-    // L014 系列
+[
     {
         "kind": "L014-1",
         "batch": "S014-1-21029069",
@@ -18,7 +17,6 @@ let info = [
         "expir": "2024.02.12",
         "content": "99.7%"
     },
-    // L018 系列
     {
         "kind": "L018-1",
         "batch": "S018-1-21037023",
@@ -67,8 +65,6 @@ let info = [
         "expir": "2026.08.20",
         "content": "99.8%"
     },
-
-    // L414 系列
     {
         "kind": "L414-1",
         "batch": "L414-1-20220051-11",
@@ -140,5 +136,5 @@ let info = [
         "batch": "TEMPO<br>M02-108-210601",
         "expir": "2023.05.15",
         "content": "99.6%"
-    },
+    }
 ]
diff --git a/views/common-standards.html b/views/common-standards.html
deleted file mode 100644
index ecdde4a..0000000
--- a/views/common-standards.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!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="../statics/modules/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>
diff --git a/views/equipment.html b/views/equipment.html
deleted file mode 100644
index 6d7126a..0000000
--- a/views/equipment.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<!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="../statics/modules/jquery.min.js"></script>
-    <script src="./equipment.info.js"></script>
-    <script>
-        $(document).ready(() => {
-            createTable(info)
-
-            $("#search").click(() => {
-                let keyword = $("#keyword").val()
-                if (keyword == "") {
-                    createTable(info)
-                    return
-                }
-                let temp = []
-                info.filter(value => {
-                    if (value.id.toLowerCase().includes(keyword.toLowerCase()) ||
-                        value.name.includes(keyword) ||
-                        value.where.includes(keyword) ||
-                        value.expir.includes(keyword)) {
-                        temp.push(value)
-                    }
-                })
-
-                createTable(temp)
-            })
-        })
-
-        // 根据data创建表格
-        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)
-
-            // add header
-            let tr = document.createElement("tr")
-            let th_where = document.createElement("th")
-            let th_name = document.createElement("th")
-            let th_id = document.createElement("th")
-            let 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((value) => {
-                let tr = document.createElement("tr")
-                let td_where = document.createElement("td")
-                let td_name = document.createElement("td")
-                let td_id = document.createElement("td")
-                let 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) {
-            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>
diff --git a/views/expir-info.html b/views/expir-info.html
new file mode 100644
index 0000000..f67504c
--- /dev/null
+++ b/views/expir-info.html
@@ -0,0 +1,203 @@
+<!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>
+        .searchbox {
+            width: 100%;
+            white-space: nowrap;
+        }
+
+        #keyword {
+            width: 80%;
+        }
+
+        #search {
+            width: 15%;
+        }
+
+        .pure-table {
+            width: 100%;
+            font-size: small;
+        }
+
+        .pure-table caption {
+            font-style: normal;
+        }
+
+        .expir30 {
+            color: orange;
+
+        }
+
+        .expir7 {
+            color: red;
+        }
+
+        .expired {
+            color: red;
+            text-decoration: line-through;
+        }
+
+    </style>
+    <script src="../statics/modules/jquery.min.js"></script>
+    <script>
+        // 可用于查询的数据
+        const databases = [
+            {
+                "name": "device",
+                "path": "../statics/info/device.json"
+            },
+            {
+                "name": "standard",
+                "path": "../statics/info/standard.json"
+            }
+        ]
+
+        $(() => {
+            let info = {}
+            let count = databases.length
+            let interval = setInterval(() => {
+                if (count == 0) {
+                    $("#content").append("已加载所有数据")
+                    clearInterval(interval)
+                }
+            }, 100)
+
+            // 加载所有数据
+            for (const database of databases) {
+                $.getJSON(database.path, (data) => {
+                    info[database.name] = data
+                    count = --count
+                    switch (database.name) {
+                        case "device":
+                            $("#content").append(`已加载设备数据，共 ${data.length} 条<br>`)
+                            break
+                        case "standard":
+                            $("#content").append(`已加载对照品数据，共 ${data.length} 条<br>`)
+                            break
+                        default:
+                            break
+                    }
+                })
+            }
+
+            $("#search").click(() => {
+                let keyword = $("#keyword").val().toLowerCase()
+                $("#content").empty()
+                searchDevice(keyword)
+                searchStandard(keyword)
+            })
+
+            function searchDevice(keyword) {
+                let device = info.device.filter((value) => {
+                    return value.id.toLowerCase().includes(keyword)
+                })
+                if (device.length > 0) {
+                    let table_device = createDeviceTable(device)
+                    $("#content").append(table_device)
+                }
+            }
+
+            function searchStandard(keyword) {
+                let standard = info.standard.filter((value) => {
+                    return value.batch.toLowerCase().includes(keyword)
+                })
+                if (standard.length > 0) {
+                    let table_standard = createStandardTable(standard)
+                    $("#content").append(table_standard)
+                }
+            }
+
+            function createDeviceTable(data) {
+                return createTable(data, `设备信息（${data.length}条）`, ["名称", "编号", "有效期至"], hidden = ["where"])
+            }
+
+            function createStandardTable(data) {
+                return createTable(data, `对照品信息（${data.length}条）`, ["批号", "有效期至", "含量丨纯度"], hidden = ["kind"])
+            }
+
+            function createTable(data, captionText, header, hidden = []) {
+                let table = document.createElement("table")
+                table.setAttribute("class", "pure-table")
+
+                let caption = document.createElement("caption")
+                caption.innerText = captionText
+                table.appendChild(caption)
+
+                let tr = document.createElement("tr")
+                for (const headerText of header) {
+                    let th = document.createElement("th")
+                    th.innerText = headerText
+                    tr.appendChild(th)
+                }
+                table.appendChild(tr)
+
+                data.forEach(element => {
+                    let tr = document.createElement("tr")
+                    for (const key in element) {
+                        if (Object.hasOwnProperty.call(element, key)) {
+                            if (hidden.includes(key)) {
+                                continue
+                            }
+                            const value = element[key]
+                            let td = document.createElement("td")
+                            td.innerHTML = (key == "expir") ? checkExpir(value) : value
+                            tr.appendChild(td)
+                        }
+                    }
+                    table.appendChild(tr)
+                })
+
+                return table
+            }
+
+            function checkExpir(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 class="searchbox">
+        <input type="text" name="keyword" id="keyword" placeholder="输入查询关键字（忽略大小写）">
+        <button type="submit" id="search">搜索</button>
+    </div>
+
+    <div id="content"></div>
+    <div>
+        <p>
+            过期提醒：<br>
+            <span class="expir30">黄色表示有效期剩余 30 天</span><br>
+            <span class="expir7">红色表示有效期剩余 7 天</span><br>
+            <span class="expired">红色加删除线表示已过期</span><br>
+        </p>
+    </div>
+</body>
+
+</html>