Files
qctool/views/injection-sequence.html

409 lines
14 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
2022-04-10 23:25:26 +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">
<title>进样时间</title>
<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>
<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 = []
2022-04-10 23:25:26 +08:00
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),
})
})
2022-04-10 23:25:26 +08:00
// 未生成数据,不进行结果展示
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
}
2022-04-10 23:25:26 +08:00
// 为 Date 创建日期格式化方法
Date.prototype.format = function (fmt) {
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), //季度
"S": this.getMilliseconds() //毫秒
}
2022-04-10 23:25:26 +08:00
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
2022-04-10 23:25:26 +08:00
}
for (let k in o) {
2022-04-10 23:25:26 +08:00
if (new RegExp("(" + k + ")").test(fmt)) {
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
}
}
return fmt
}
2022-04-10 23:25:26 +08:00
</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>
2022-04-10 23:25:26 +08:00
<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>
2022-04-10 23:25:26 +08:00
<br>
<div class="buttons">
<button id="new_page">新开标签页</button>
<button id="clear">清除内容</button>
<button id="ok">计算</button>
</div>
<br>
</div>
2022-07-15 23:49:11 +08:00
<div id="output"></div>
</body>
2022-04-10 23:25:26 +08:00
2025-07-27 20:38:50 +08:00
<footer>
<p><a href="https://beian.miit.gov.cn" target="_blank">赣ICP备2025067425号</a></p>
</footer>
</html>