405 lines
14 KiB
HTML
405 lines
14 KiB
HTML
<!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="../statics/modules/dayjs.min.js"></script>
|
||
<script src="../statics/modules/jquery.min.js"></script>
|
||
<script type="module">
|
||
import { Decimal } from "../statics/modules/decimal.mjs"
|
||
|
||
const decimal = Decimal.set({
|
||
rounding: Decimal.ROUND_HALF_EVEN,
|
||
precision: 12
|
||
})
|
||
|
||
$(document).ready(() => {
|
||
let tip = `
|
||
<p>此功能用于计算批处理中每一针样品运行的时间。</p>
|
||
<p>此功能以当前运行样品的时间为起点，再向前或向后计算其他针的时间。</p>
|
||
<p>仪器进样需要时间，而仪器不同，进样所需时间也不同，因此该部分时间无法准确计算。
|
||
且该部分时间会随样品总数增多而积累，按此功能的算法，越远离当前运行的样品，则误差越大。</p>
|
||
<p>误差不可避免，但勾选<span style="background-color: black;color: white">时间补偿</span>可尽量校正该误差。</p>
|
||
`
|
||
$("#output").append(tip)
|
||
|
||
// 默认选中时间补偿
|
||
let offset = true
|
||
// 默认岛津的时间补偿为 24 秒
|
||
let offsetSecond = 24
|
||
// 默认使用系统时间
|
||
let useSystemClock = true
|
||
|
||
// 默认使用系统时间，隐藏当前时间和日期的输入框
|
||
$(".nowDate").hide()
|
||
$(".nowTime").hide()
|
||
|
||
// 注册使用系统时间的事件监听器
|
||
$("#useSystemClock").on("change", function () {
|
||
useSystemClock = $(this).is(":checked")
|
||
if (useSystemClock) {
|
||
$(".nowDate").hide()
|
||
$(".nowTime").hide()
|
||
} else {
|
||
$(".nowDate").show()
|
||
$(".nowTime").show()
|
||
$("#nowDate").val(new Date().format("yyyy-MM-dd"))
|
||
$("#nowTime").val(new Date().format("hh:mm:ss"))
|
||
}
|
||
})
|
||
|
||
// 注册时间补偿的事件监听器
|
||
$("#offset").on("change", function () {
|
||
offset = $(this).is(":checked")
|
||
if (offset) {
|
||
$(".offset_type").show()
|
||
offsetSecond = $("input[name='offset_type']:checked").val()
|
||
} else {
|
||
$(".offset_type").hide()
|
||
offsetSecond = 0
|
||
}
|
||
})
|
||
|
||
// 注册仪器类型的事件监听器，选择不同的仪器，时间补偿也会不同
|
||
$(".offset_type").on("change", function () {
|
||
offsetSecond = $("input[name='offset_type']:checked").val()
|
||
})
|
||
|
||
$("#ok").click(() => {
|
||
let nowDate = $("#nowDate").val()
|
||
let nowTime = $("#nowTime").val()
|
||
let allId = new Decimal($("#allId").val()).toNumber()
|
||
let nowId = new Decimal($("#nowId").val()).toNumber()
|
||
let time = new Decimal($("#time").val()).toNumber()
|
||
let nowRunTime = new Decimal($("#nowRunTime").val()).toNumber()
|
||
|
||
let data = []
|
||
|
||
if ($("#useSystemClock").is(":checked")) {
|
||
nowDate = new Date().format("yyyy-MM-dd")
|
||
nowTime = new Date().format("hh:mm:ss")
|
||
}
|
||
|
||
// 生成数据
|
||
let array = genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offsetSecond)
|
||
let formatString = 'YYYY-MM-DD HH:mm'
|
||
array.forEach((value, index) => {
|
||
data.push({
|
||
"id": index + 1,
|
||
"startTime": value.format(formatString),
|
||
"endTime": value.add(time, 'minute').format(formatString),
|
||
})
|
||
})
|
||
|
||
// 未生成数据，不进行结果展示
|
||
if (data.length == 0) return
|
||
|
||
$("#output").empty()
|
||
$("#output").append(createTable(data))
|
||
})
|
||
|
||
$("#clear").click(() => {
|
||
$("#nowDate").val(new Date().format("yyyy-MM-dd"))
|
||
$("#nowTime").val(new Date().format("hh:mm"))
|
||
$("#allId").val("")
|
||
$("#nowId").val("")
|
||
$("#time").val("")
|
||
$("#nowRunTime").val("")
|
||
$("#output").empty()
|
||
$("#output").append(tip)
|
||
})
|
||
|
||
$("#new_page").click(() => {
|
||
window.open(window.location.href, "_blank")
|
||
})
|
||
})
|
||
|
||
/**
|
||
* 生成数据
|
||
* @author <a href="mailto:3243430237@qq.com" target="_blank">hbk01</a>
|
||
* @param {String} nowDate 当前日期，yyyy-MM-dd
|
||
* @param {String} nowTime 当前时间，hh:mm:ss
|
||
* @param {Number} allId 总针数（即需要计算多少条数据）
|
||
* @param {Number} nowId 当前针数（当前仪器运行到第几针）
|
||
* @param {Number} time 一针有多少分钟（包括后运行）
|
||
* @param {Number} nowRunTime 当前这针已经运行了多少分钟
|
||
* @param {Number} offsetSecond 每一针需偏移多少秒，不同的仪器会有不同偏移量，默认为岛津的 24 秒，
|
||
* @return {Array} 保存了 dayjs 对象的数组，每一个元素代表一针的开始时间
|
||
*/
|
||
function genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offsetSecond) {
|
||
let array = new Array(allId)
|
||
let now = new dayjs(`${nowDate} ${nowTime}`)
|
||
|
||
// 将当前这针的开始时间先设置好
|
||
array[nowId - 1] = now.subtract(nowRunTime, 'minute')
|
||
// 计算当前这针前面的时间
|
||
for (let index = nowId - 2; index >= 0; index--) {
|
||
array[index] = array[index + 1].subtract(time, 'minute').subtract(offsetSecond, 'second')
|
||
}
|
||
// 计算当前这针后面的时间
|
||
for (let index = nowId; index < allId; index++) {
|
||
array[index] = array[index - 1].add(time, 'minute').add(offsetSecond, 'second')
|
||
}
|
||
return array
|
||
}
|
||
|
||
/**
|
||
* 创建表格元素并将数据填入其中。
|
||
*/
|
||
function createTable(data) {
|
||
let nowId = new Decimal($("#nowId").val()).toNumber()
|
||
|
||
let table = document.createElement("table")
|
||
table.setAttribute("style", "width: 100%; text-align: center; font-size: smaller;")
|
||
table.setAttribute("class", "pure-table")
|
||
|
||
let row = document.createElement("tr")
|
||
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)
|
||
table.appendChild(row)
|
||
let highlight = 'background-color: #ffffcc;'
|
||
data.forEach(element => {
|
||
let tr = document.createElement("tr")
|
||
let td_id = document.createElement("td")
|
||
let td_start_time = document.createElement("td")
|
||
let td_end_time = document.createElement("td")
|
||
|
||
td_id.innerText = element.id
|
||
td_start_time.innerText = element.startTime
|
||
td_end_time.innerText = element.endTime
|
||
|
||
if (element.id == nowId) tr.style = highlight
|
||
|
||
tr.appendChild(td_id)
|
||
tr.appendChild(td_start_time)
|
||
tr.appendChild(td_end_time)
|
||
table.appendChild(tr)
|
||
})
|
||
return table
|
||
}
|
||
|
||
// 为 Date 创建日期格式化方法
|
||
Date.prototype.format = function (fmt) {
|
||
let o = {
|
||
"M+": this.getMonth() + 1, //月份
|
||
"d+": this.getDate(), //日
|
||
"h+": this.getHours(), //小时
|
||
"m+": this.getMinutes(), //分
|
||
"s+": this.getSeconds(), //秒
|
||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||
"S": this.getMilliseconds() //毫秒
|
||
}
|
||
if (/(y+)/.test(fmt)) {
|
||
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
|
||
}
|
||
for (let k in o) {
|
||
if (new RegExp("(" + k + ")").test(fmt)) {
|
||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
|
||
}
|
||
}
|
||
return fmt
|
||
}
|
||
|
||
</script>
|
||
|
||
<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;
|
||
}
|
||
|
||
.offset {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
margin-bottom: 5px;
|
||
align-items: center;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.offset label {
|
||
width: 100%;
|
||
line-height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
#offset {
|
||
width: 20px;
|
||
}
|
||
|
||
fieldset {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
line-height: 32px;
|
||
}
|
||
|
||
legend {
|
||
font-size: small;
|
||
color: #777;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
fieldset div {
|
||
width: 100%;
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
align-items: center;
|
||
line-height: 32px;
|
||
}
|
||
|
||
input[type="radio"] {
|
||
width: 20px;
|
||
margin-left: 20%;
|
||
}
|
||
|
||
fieldset label {
|
||
line-height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.useSystemClock {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
margin-bottom: 5px;
|
||
align-items: center;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.useSystemClock label {
|
||
width: 100%;
|
||
line-height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
#useSystemClock {
|
||
width: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<h3>进样时间</h3>
|
||
<div class="input">
|
||
<div>
|
||
|
||
<div class="useSystemClock">
|
||
<input type="checkbox" id="useSystemClock" checked>
|
||
<label for="useSystemClock">使用系统时间</label>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<div class="inputbox nowRunTime">
|
||
<label for="nowRunTime">当前运行时间</label>
|
||
<div><input type="number" id="nowRunTime" inputmode="decimal" autocomplete="off"></div>
|
||
</div>
|
||
|
||
<div class="offset">
|
||
<input type="checkbox" id="offset" checked>
|
||
<label for="offset">时间补偿</label>
|
||
</div>
|
||
|
||
<div>
|
||
<fieldset class="offset_type">
|
||
<legend>时间补偿 - 选择仪器</legend>
|
||
|
||
<span style="font-size: small;">选择你使用的仪器，以确定时间补偿的力度。</span>
|
||
|
||
<div>
|
||
<input type="radio" value="24" name="offset_type" id="shimadzu" checked>
|
||
<label for="shimadzu">岛津</label>
|
||
|
||
<input type="radio" value="84" name="offset_type" id="agilent">
|
||
<label for="agilent">安捷伦</label>
|
||
</div>
|
||
|
||
</fieldset>
|
||
</div>
|
||
|
||
</div>
|
||
<br>
|
||
<div class="buttons">
|
||
<button id="new_page">新开标签页</button>
|
||
<button id="clear">清除内容</button>
|
||
<button id="ok">计算</button>
|
||
</div>
|
||
<br>
|
||
</div>
|
||
<div id="output"></div>
|
||
</body>
|
||
|
||
</html>
|