+ L414-5KR 相关物质修改提示信息

+ 目录结构调整
2023-01-14 22:48:02 +08:00
parent e1e206d066
commit b0521ece6b
19 changed files with 77 additions and 4992 deletions
--- a/views/equipment.html
+++ b/views/equipment.html
@@ -0,0 +1,127 @@
+<!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">
+    <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 == "") {
+                    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("style", "font-size: small; width: 100%;")
+            table.setAttribute("class", "pure-table")
+
+            // 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)
+            let num = document.createElement("span")
+            num.innerText = `共 ${data.length} 条记录`
+            content.appendChild(num)
+        }
+
+        // 设置日期样式
+        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 style='color: red;'><s>${value}</s></span>`
+            }
+
+            if (day <= 7) {
+                return `<span style='color: red;'>${value}</span>`
+            }
+
+            if (day <= 30) {
+                return `<span style='color: darkorange;'>${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 style="color: darkorange;">黄色表示有效期剩余30天</span><br>
+        <span style="color: red;">红色表示有效期剩余7天</span><br>
+        <span style="color: red;"><s>红色加删除线表示已过期</s></span><br>
+    </p>
+</body>
+
+</html>