From ae2c723468063e96d431a47fc02a5d04e48390c4 Mon Sep 17 00:00:00 2001
From: hbk01 <3243430237@qq.com>
Date: Mon, 13 Mar 2023 21:36:28 +0800
Subject: [PATCH] =?UTF-8?q?+=20=E6=B7=BB=E5=8A=A0=E5=B8=B8=E7=94=A8?=
 =?UTF-8?q?=E6=A0=87=E5=93=81=E4=BF=A1=E6=81=AF=E5=8A=9F=E8=83=BD=20+=20?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E6=95=B0=E9=87=8F=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E7=A7=BB=E8=87=B3=E8=A1=A8=E6=A0=BC=E5=A4=B4=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                     |   4 +
 views/common-standards.html    | 142 +++++++++++++++++++++++++++++++++
 views/common-standards.info.js |  51 ++++++++++++
 views/equipment.html           |  48 ++++++++---
 4 files changed, 233 insertions(+), 12 deletions(-)
 create mode 100644 views/common-standards.html
 create mode 100644 views/common-standards.info.js
diff --git a/index.html b/index.html
index 2f2b8a9..1901b39 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,10 @@
                 "name": "设备信息",
                 "location": "./views/equipment.html"
             },
+            {
+                "name": "常用标品信息",
+                "location": "./views/common-standards.html"
+            }
             // {
             //     "name": "L414-5KR 相关物质",
             //     "location": "./views/L414-5KR-impurities.html"
diff --git a/views/common-standards.html b/views/common-standards.html
new file mode 100644
index 0000000..b68f01d
--- /dev/null
+++ b/views/common-standards.html
@@ -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>
diff --git a/views/common-standards.info.js b/views/common-standards.info.js
new file mode 100644
index 0000000..3ede936
--- /dev/null
+++ b/views/common-standards.info.js
@@ -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%"
+    }
+]
diff --git a/views/equipment.html b/views/equipment.html
index d6044c0..9c71637 100644
--- a/views/equipment.html
+++ b/views/equipment.html
@@ -8,12 +8,36 @@
     <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="./equipment.info.js"></script>
     <script>
         $(document).ready(() => {
             createTable(info)
-            $("#keyword").attr("placeholder", "输入查询关键字（忽略大小写）")
+
             $("#search").click(() => {
                 let keyword = $("#keyword").val()
                 if (keyword == "") {
@@ -39,9 +63,12 @@
             let content = document.getElementById("content")
             content.innerHTML = ""
             let table = document.createElement("table")
-            table.setAttribute("style", "font-size: small; width: 100%;")
             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")
@@ -80,9 +107,6 @@
             })
 
             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
 
             if (day <= 0) {
-                return `<span style='color: red;'><s>${value}</s></span>`
+                return `<span class='expired'>${value}</span>`
             }
 
             if (day <= 7) {
-                return `<span style='color: red;'>${value}</span>`
+                return `<span class='expir7'>${value}</span>`
             }
 
             if (day <= 30) {
-                return `<span style='color: darkorange;'>${value}</span>`
+                return `<span class='expir30'>${value}</span>`
             }
 
             return value
@@ -112,15 +136,15 @@
 
 <body>
     <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>
     </div>
     <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>
+        <span class="expir30">黄色表示有效期剩余30天</span><br>
+        <span class="expir7">红色表示有效期剩余7天</span><br>
+        <span class="expired">红色加删除线表示已过期</span><br>
     </p>
 </body>
 
