2022-02-23 22:44:50 +08:00
|
|
|
|
<!DOCTYPE html>
|
2022-11-20 00:19:56 +08:00
|
|
|
|
<html lang="zh-cmn-Hans">
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-02-23 22:44:50 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
2022-07-16 00:43:41 +08:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
2023-01-02 20:52:03 +08:00
|
|
|
|
<title>进样时间</title>
|
2023-01-14 22:48:02 +08:00
|
|
|
|
<link rel="stylesheet" href="../statics/github.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../statics/theme.css">
|
|
|
|
|
|
<script src="../statics/modules/dayjs.min.js"></script>
|
2023-03-18 21:32:59 +08:00
|
|
|
|
<script src="../statics/modules/jquery.min.js"></script>
|
2023-01-02 20:52:03 +08:00
|
|
|
|
<script type="module">
|
2023-01-14 22:48:02 +08:00
|
|
|
|
import { Decimal } from "../statics/modules/decimal.mjs"
|
2023-01-02 20:52:03 +08:00
|
|
|
|
|
|
|
|
|
|
const decimal = Decimal.set({
|
2022-11-20 00:19:56 +08:00
|
|
|
|
rounding: Decimal.ROUND_HALF_EVEN,
|
|
|
|
|
|
precision: 12
|
|
|
|
|
|
})
|
2023-01-02 20:52:03 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$(document).ready(() => {
|
|
|
|
|
|
let tip = `
|
2023-01-02 20:52:03 +08:00
|
|
|
|
<p>此功能用于计算批处理中每一针样品运行的时间。</p>
|
2025-04-12 20:19:39 +08:00
|
|
|
|
<p>仪器进样需要一定的时间，该部分时间虽然短，积累起来却不可忽视。</p>
|
|
|
|
|
|
<p>此功能以当前运行样品的时间为起点，再向前或向后计算其他针的时间。所以，越远离当前运行的样品，则误差越大。</p>
|
|
|
|
|
|
<p>误差不可避免，但勾选<span style="background-color: black;color: white">时间补偿</span>可尽量校正该误差。</p>
|
|
|
|
|
|
`
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#output").append(tip)
|
|
|
|
|
|
|
2025-04-11 00:42:18 +08:00
|
|
|
|
// 初始化当前日期和时间
|
|
|
|
|
|
$("#nowDate").val(new Date().format("yyyy-MM-dd"))
|
|
|
|
|
|
$("#nowTime").val(new Date().format("hh:mm"))
|
|
|
|
|
|
|
2025-04-12 20:19:39 +08:00
|
|
|
|
// 默认选中时间补偿
|
|
|
|
|
|
let offset = true
|
|
|
|
|
|
// 注册时间补偿的事件监听器
|
|
|
|
|
|
$("#offset").on("change", function () {
|
|
|
|
|
|
offset = $(this).is(":checked")
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#ok").click(() => {
|
2025-04-11 00:42:18 +08:00
|
|
|
|
let nowDate = $("#nowDate").val()
|
|
|
|
|
|
let nowTime = $("#nowTime").val()
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let allId = new Decimal($("#allId").val()).toNumber()
|
|
|
|
|
|
let nowId = new Decimal($("#nowId").val()).toNumber()
|
|
|
|
|
|
let time = new Decimal($("#time").val()).toNumber()
|
2025-04-11 00:42:18 +08:00
|
|
|
|
let nowRunTime = new Decimal($("#nowRunTime").val()).toNumber()
|
2025-04-12 20:19:39 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
let data = []
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-07-06 00:14:10 +08:00
|
|
|
|
// 生成数据
|
2025-04-12 20:19:39 +08:00
|
|
|
|
let array = genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offset ? 30 : 1)
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let formatString = 'YYYY-MM-DD HH:mm'
|
|
|
|
|
|
array.forEach((value, index) => {
|
2022-07-06 00:14:10 +08:00
|
|
|
|
data.push({
|
2023-01-02 20:52:03 +08:00
|
|
|
|
"id": index + 1,
|
|
|
|
|
|
"startTime": value.format(formatString),
|
|
|
|
|
|
"endTime": value.add(time, 'minute').format(formatString),
|
2022-11-20 00:19:56 +08:00
|
|
|
|
})
|
2023-01-02 20:52:03 +08:00
|
|
|
|
})
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
// 未生成数据，不进行结果展示
|
|
|
|
|
|
if (data.length == 0) return
|
2023-01-02 20:52:03 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#output").empty()
|
|
|
|
|
|
$("#output").append(createTable(data))
|
|
|
|
|
|
})
|
2022-02-23 22:44:50 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#clear").click(() => {
|
2025-04-11 00:42:18 +08:00
|
|
|
|
$("#nowDate").val(new Date().format("yyyy-MM-dd"))
|
|
|
|
|
|
$("#nowTime").val(new Date().format("hh:mm"))
|
2023-01-02 20:52:03 +08:00
|
|
|
|
$("#allId").val("")
|
|
|
|
|
|
$("#nowId").val("")
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#time").val("")
|
2025-04-11 00:42:18 +08:00
|
|
|
|
$("#nowRunTime").val("")
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#output").empty()
|
|
|
|
|
|
$("#output").append(tip)
|
|
|
|
|
|
})
|
2022-02-23 22:44:50 +08:00
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
$("#new_page").click(() => {
|
|
|
|
|
|
window.open(window.location.href, "_blank")
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
2022-02-23 22:44:50 +08:00
|
|
|
|
|
2022-07-06 00:14:10 +08:00
|
|
|
|
/**
|
2023-01-02 20:52:03 +08:00
|
|
|
|
* 生成数据
|
|
|
|
|
|
* @author <a href="mailto:3243430237@qq.com" target="_blank">hbk01</a>
|
2025-04-11 00:42:18 +08:00
|
|
|
|
* @param {String} nowDate 当前日期，yyyy-MM-dd
|
|
|
|
|
|
* @param {String} nowTime 当前时间，hh:mm:ss
|
2023-01-02 20:52:03 +08:00
|
|
|
|
* @param {Number} allId 总针数（即需要计算多少条数据）
|
|
|
|
|
|
* @param {Number} nowId 当前针数（当前仪器运行到第几针）
|
|
|
|
|
|
* @param {Number} time 一针有多少分钟（包括后运行）
|
2025-04-11 00:42:18 +08:00
|
|
|
|
* @param {Number} nowRunTime 当前这针已经运行了多少分钟
|
2025-04-12 20:19:39 +08:00
|
|
|
|
* @param {Number} offset 每一针需偏移多少秒（默认 30 秒）
|
|
|
|
|
|
* @return {Array} 保存了 dayjs 对象的数组，每一个元素代表一针的开始时间
|
2022-07-06 00:14:10 +08:00
|
|
|
|
*/
|
2025-04-11 00:42:18 +08:00
|
|
|
|
function genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offset) {
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let array = new Array(allId)
|
2025-04-11 00:42:18 +08:00
|
|
|
|
let now = new dayjs(`${nowDate} ${nowTime}`)
|
|
|
|
|
|
|
2023-01-02 20:52:03 +08:00
|
|
|
|
// 将当前这针的开始时间先设置好
|
2025-04-11 00:42:18 +08:00
|
|
|
|
array[nowId - 1] = now.subtract(nowRunTime, 'minute')
|
2023-01-02 20:52:03 +08:00
|
|
|
|
// 计算当前这针前面的时间
|
|
|
|
|
|
for (let index = nowId - 2; index >= 0; index--) {
|
2025-04-12 20:19:39 +08:00
|
|
|
|
array[index] = array[index + 1].subtract(time, 'minute').subtract(offset, 'second')
|
2023-01-02 20:52:03 +08:00
|
|
|
|
}
|
|
|
|
|
|
// 计算当前这针后面的时间
|
|
|
|
|
|
for (let index = nowId; index < allId; index++) {
|
2025-04-12 20:19:39 +08:00
|
|
|
|
array[index] = array[index - 1].add(time, 'minute').add(offset, 'second')
|
2023-01-02 20:52:03 +08:00
|
|
|
|
}
|
|
|
|
|
|
return array
|
2022-07-06 00:14:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 创建表格元素并将数据填入其中。
|
|
|
|
|
|
*/
|
|
|
|
|
|
function createTable(data) {
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let nowId = new Decimal($("#nowId").val()).toNumber()
|
|
|
|
|
|
|
2022-11-20 00:19:56 +08:00
|
|
|
|
let table = document.createElement("table")
|
2023-01-02 20:52:03 +08:00
|
|
|
|
table.setAttribute("style", "width: 100%; text-align: center; font-size: smaller;")
|
2022-11-20 00:19:56 +08:00
|
|
|
|
table.setAttribute("class", "pure-table")
|
|
|
|
|
|
|
|
|
|
|
|
let row = document.createElement("tr")
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let lineNum = document.createElement("th")
|
|
|
|
|
|
let startTime = document.createElement("th")
|
|
|
|
|
|
let endTime = document.createElement("th")
|
|
|
|
|
|
lineNum.innerText = "序号"
|
|
|
|
|
|
startTime.innerText = "开始时间"
|
|
|
|
|
|
endTime.innerText = "结束时间"
|
|
|
|
|
|
row.appendChild(lineNum)
|
|
|
|
|
|
row.appendChild(startTime)
|
|
|
|
|
|
row.appendChild(endTime)
|
2022-11-20 00:19:56 +08:00
|
|
|
|
table.appendChild(row)
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let highlight = 'background-color: #ffffcc;'
|
2022-07-06 00:14:10 +08:00
|
|
|
|
data.forEach(element => {
|
2022-11-20 00:19:56 +08:00
|
|
|
|
let tr = document.createElement("tr")
|
|
|
|
|
|
let td_id = document.createElement("td")
|
2023-01-02 20:52:03 +08:00
|
|
|
|
let td_start_time = document.createElement("td")
|
|
|
|
|
|
let td_end_time = document.createElement("td")
|
2022-11-20 00:19:56 +08:00
|
|
|
|
|
|
|
|
|
|
td_id.innerText = element.id
|
2023-01-02 20:52:03 +08:00
|
|
|
|
td_start_time.innerText = element.startTime
|
2025-04-12 20:19:39 +08:00
|
|
|
|
td_end_time.innerText = element.endTime
|
2023-01-02 20:52:03 +08:00
|
|
|
|
|
|
|
|
|
|
if (element.id == nowId) tr.style = highlight
|
2022-11-20 00:19:56 +08:00
|
|
|
|
|
|
|
|
|
|
tr.appendChild(td_id)
|
2023-01-02 20:52:03 +08:00
|
|
|
|
tr.appendChild(td_start_time)
|
|
|
|
|
|
tr.appendChild(td_end_time)
|
2022-11-20 00:19:56 +08:00
|
|
|
|
table.appendChild(tr)
|
|
|
|
|
|
})
|
|
|
|
|
|
return table
|
2022-07-06 00:14:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2022-04-10 23:25:26 +08:00
|
|
|
|
// 为 Date 创建日期格式化方法
|
|
|
|
|
|
Date.prototype.format = function (fmt) {
|
2022-11-20 00:19:56 +08:00
|
|
|
|
let o = {
|
|
|
|
|
|
"M+": this.getMonth() + 1, //月份
|
|
|
|
|
|
"d+": this.getDate(), //日
|
|
|
|
|
|
"h+": this.getHours(), //小时
|
|
|
|
|
|
"m+": this.getMinutes(), //分
|
|
|
|
|
|
"s+": this.getSeconds(), //秒
|
2022-04-10 23:25:26 +08:00
|
|
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
2022-11-20 00:19:56 +08:00
|
|
|
|
"S": this.getMilliseconds() //毫秒
|
|
|
|
|
|
}
|
2022-04-10 23:25:26 +08:00
|
|
|
|
if (/(y+)/.test(fmt)) {
|
2022-11-20 00:19:56 +08:00
|
|
|
|
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
|
2022-04-10 23:25:26 +08:00
|
|
|
|
}
|
2022-11-20 00:19:56 +08:00
|
|
|
|
for (let k in o) {
|
2022-04-10 23:25:26 +08:00
|
|
|
|
if (new RegExp("(" + k + ")").test(fmt)) {
|
2022-11-20 00:19:56 +08:00
|
|
|
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
|
2022-04-10 23:25:26 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-11-20 00:19:56 +08:00
|
|
|
|
return fmt
|
2022-02-23 22:44:50 +08:00
|
|
|
|
}
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</script>
|
2023-06-07 22:59:41 +08:00
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.inputbox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.inputbox label {
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
font-size: small;
|
|
|
|
|
|
color: #777;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.inputbox div {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.inputbox input {
|
|
|
|
|
|
/* 需设置宽度，否则 iOS 端的 Safari 无法正确显示 div.inputbox 的右边框 */
|
|
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
|
|
/* 取消边框 */
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
/* 取消选中时的边框高亮 */
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
font-size: medium;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
}
|
2025-04-12 20:19:39 +08:00
|
|
|
|
|
|
|
|
|
|
.offset {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.offset label {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#offset {
|
|
|
|
|
|
width: 20px;
|
|
|
|
|
|
}
|
2023-06-07 22:59:41 +08:00
|
|
|
|
</style>
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</head>
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-02-23 22:44:50 +08:00
|
|
|
|
<body>
|
2023-01-02 20:52:03 +08:00
|
|
|
|
<h3>进样时间</h3>
|
2022-02-23 22:44:50 +08:00
|
|
|
|
<div class="input">
|
2023-06-07 22:59:41 +08:00
|
|
|
|
<div>
|
2025-04-11 00:42:18 +08:00
|
|
|
|
<div class="inputbox nowDate">
|
|
|
|
|
|
<label for="nowDate">当前日期</label>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<input type="date" id="nowDate">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inputbox nowTime">
|
|
|
|
|
|
<label for="nowTime">当前时间</label>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<input type="time" id="nowTime">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-06-07 22:59:41 +08:00
|
|
|
|
<div class="inputbox allId">
|
|
|
|
|
|
<label for="allId">样品总数</label>
|
|
|
|
|
|
<!-- 此处的 div 为解决 Safari 浏览器 align-items: baseline; 不对齐的问题 -->
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<input type="number" id="allId" inputmode="decimal" autocomplete="off">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="inputbox time">
|
|
|
|
|
|
<label for="time">运行时间</label>
|
|
|
|
|
|
<div><input type="number" id="time" inputmode="decimal" autocomplete="off"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="inputbox nowId">
|
|
|
|
|
|
<label for="nowId">运行到第几针</label>
|
|
|
|
|
|
<div><input type="number" id="nowId" inputmode="decimal" autocomplete="off"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-04-11 00:42:18 +08:00
|
|
|
|
<div class="inputbox nowRunTime">
|
|
|
|
|
|
<label for="nowRunTime">当前运行时间</label>
|
|
|
|
|
|
<div><input type="number" id="nowRunTime" inputmode="decimal" autocomplete="off"></div>
|
2023-06-07 22:59:41 +08:00
|
|
|
|
</div>
|
2025-04-12 20:19:39 +08:00
|
|
|
|
<div class="offset">
|
|
|
|
|
|
<input type="checkbox" id="offset" checked>
|
|
|
|
|
|
<label for="offset">时间补偿</label>
|
2023-06-07 22:59:41 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</div>
|
2022-04-10 23:25:26 +08:00
|
|
|
|
<br>
|
2022-02-23 22:44:50 +08:00
|
|
|
|
<div class="buttons">
|
|
|
|
|
|
<button id="new_page">新开标签页</button>
|
|
|
|
|
|
<button id="clear">清除内容</button>
|
|
|
|
|
|
<button id="ok">计算</button>
|
|
|
|
|
|
</div>
|
2022-05-10 23:20:18 +08:00
|
|
|
|
<br>
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</div>
|
2022-07-15 23:49:11 +08:00
|
|
|
|
<div id="output"></div>
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</body>
|
2022-04-10 23:25:26 +08:00
|
|
|
|
|
2022-02-23 22:44:50 +08:00
|
|
|
|
</html>
|
