278 lines
11 KiB
HTML
278 lines
11 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>仪器进样需要一定的时间，该部分时间虽然短，积累起来却不可忽视。<br>
|
||
此功能以当前运行样品的时间为起点，再向前/向后计算其他针的时间。所以，越远离当前运行的样品，则误差越大。
|
||
</p>`
|
||
$("#output").append(tip)
|
||
|
||
// 初始化当前日期和时间
|
||
$("#nowDate").val(new Date().format("yyyy-MM-dd"))
|
||
$("#nowTime").val(new Date().format("hh:mm"))
|
||
|
||
$("#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 offset = new Decimal($("#offset").val()).toNumber()
|
||
let data = []
|
||
|
||
// 生成数据
|
||
let array = genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offset)
|
||
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),
|
||
"offsetTime": value.add(time - offset, '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("")
|
||
// $("#offset").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} offset 每一针需偏移多少分钟
|
||
* @return {Array} dayjs
|
||
*/
|
||
function genData(nowDate, nowTime, allId, nowId, time, nowRunTime, offset) {
|
||
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')
|
||
}
|
||
// 计算当前这针后面的时间
|
||
for (let index = nowId; index < allId; index++) {
|
||
array[index] = array[index - 1].add(time, 'minute')
|
||
}
|
||
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")
|
||
let offset = document.createElement("th")
|
||
lineNum.innerText = "序号"
|
||
startTime.innerText = "开始时间"
|
||
endTime.innerText = "结束时间"
|
||
offset.innerText = "偏移后"
|
||
row.appendChild(lineNum)
|
||
row.appendChild(startTime)
|
||
row.appendChild(endTime)
|
||
// row.appendChild(offset)
|
||
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")
|
||
let td_offset_time = document.createElement("td")
|
||
|
||
td_id.innerText = element.id
|
||
td_start_time.innerText = element.startTime
|
||
// td_end_time.innerText = element.endTime
|
||
td_end_time.innerText = element.offsetTime
|
||
td_offset_time.innerText = element.offsetTime
|
||
|
||
if (element.id == nowId) tr.style = highlight
|
||
|
||
tr.appendChild(td_id)
|
||
tr.appendChild(td_start_time)
|
||
tr.appendChild(td_end_time)
|
||
// tr.appendChild(td_offset_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;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<h3>进样时间</h3>
|
||
<div class="input">
|
||
<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="inputbox offset">
|
||
<label for="offset">时间偏移量</label>
|
||
<div><input type="number" id="offset" inputmode="decimal" autocomplete="off" value="0"></div>
|
||
</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>
|