|
|
@@ -0,0 +1,583 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Document</title>
|
|
|
+
|
|
|
+
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-flex;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Consolas, Monaco, monospace;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableStyle {
|
|
|
+ border-collapse: collapse;
|
|
|
+ width: 96%;
|
|
|
+ margin: 0 2%;
|
|
|
+ text-align: center;
|
|
|
+ table-layout: fixed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableStyle td,
|
|
|
+ .tableStyle tr,
|
|
|
+ .tableStyle th {
|
|
|
+ border: 1px solid #cad9ea;
|
|
|
+ color: #666;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableStyle th {
|
|
|
+ background-color: #CCE8EB;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableStyle tr:nth-child(odd) {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableStyle tr:nth-child(even) {
|
|
|
+ background: #F5FAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ input,
|
|
|
+ select {
|
|
|
+ /* border: none; */
|
|
|
+ width: 100%;
|
|
|
+ height: 6%;
|
|
|
+ background-color: white;
|
|
|
+ outline: none;
|
|
|
+ border-width: 2px;
|
|
|
+ border-color: black;
|
|
|
+ border-style: solid;
|
|
|
+ border-right-style: none;
|
|
|
+ border-top-style: none;
|
|
|
+ border-bottom-style: none;
|
|
|
+ border-left-style: none;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:hover {
|
|
|
+ text-shadow: 0 0 1px black, 0 0 0px black, 0 0 0px black, 0 0 0px black;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <dialog id="powerDialog"
|
|
|
+ style="width: 100%; height: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.7);">
|
|
|
+ <input type="button" id="powerOnBtn" onclick="PowerOn()" value="电源:关闭 点击开机"
|
|
|
+ style="width: 100%; height: 100%; font-size: x-large; font-weight: bold; background: rgba(255, 255, 255, 0);">
|
|
|
+ </dialog>
|
|
|
+
|
|
|
+ <div style="width: 49%; float: left;">
|
|
|
+ <h2>原始数据</h2>
|
|
|
+ <table id="dataTable" class="tableStyle">
|
|
|
+ <tr>
|
|
|
+ <td>探头阻值</td>
|
|
|
+ <td id="probeRes">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>粗算温度</td>
|
|
|
+ <td id="fastTemp">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>零上温度</td>
|
|
|
+ <td id="aboveTemp">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>零下温度</td>
|
|
|
+ <td id="belowTemp">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>低通滤波一</td>
|
|
|
+ <td id="rcBelowTemp1">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>低通滤波二</td>
|
|
|
+ <td id="rcBelowTemp2">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>卡尔曼滤波一</td>
|
|
|
+ <td id="kalmanBelowTemp1">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>卡尔曼滤波二</td>
|
|
|
+ <td id="kalmanBelowTemp2">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>芯片温度</td>
|
|
|
+ <td id="McuTemp">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>NTC1</td>
|
|
|
+ <td id="NtcTemp1">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>NTC2</td>
|
|
|
+ <td id="NtcTemp2">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>NTC3</td>
|
|
|
+ <td id="NtcTemp3">0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>NTC4</td>
|
|
|
+ <td id="NtcTemp4">0</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <br>
|
|
|
+ <hr align=center width=96% color=#987cb9 SIZE=1>
|
|
|
+
|
|
|
+ <div style="display: inline-flex; width: 96%; align-items: center;">
|
|
|
+ <input type="button" value="关机" id="btnPowerOff" onclick="PowerSet(id)"></input>
|
|
|
+ <div style="border: 1px solid black; width: 0px; height: 20px;"></div>
|
|
|
+ <select name="" id="refreshSelect" onchange="AutoRefresh()" style="width: 60%;>
|
|
|
+ <option value=" 100">100ms</option>
|
|
|
+ <option value="200">200ms</option>
|
|
|
+ <option value="500">500ms</option>
|
|
|
+ <option value="1000" selected>1s</option>
|
|
|
+ <option value="2000">2s</option>
|
|
|
+ <option value="10000">10s</option>
|
|
|
+ </select>
|
|
|
+ <div style="border: 1px solid black; width: 0px; height: 20px;"></div>
|
|
|
+ <div style="width: 80%;">图表容积
|
|
|
+ <input type="number" value="9999" id="dataCount"
|
|
|
+ onchange="DataCountChange(value)"></input>
|
|
|
+ </div>
|
|
|
+ <div style="border: 1px solid black; width: 0px; height: 20px;"></div>
|
|
|
+ <input type="button" value="引晶" id="btnFreeze" onclick="BtnFreeze()"></input>
|
|
|
+ <div style="border: 1px solid black; width: 0px; height: 20px;"></div>
|
|
|
+ <input type="button" value="记录" id="btnSave" onclick="DetectDataSave()"></input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr align=center width=96% color=#987cb9 SIZE=1>
|
|
|
+
|
|
|
+ <h2>历史记录</h2>
|
|
|
+ <div style="display: inline-flex; width: 96%;">
|
|
|
+ <input type="button" id="startTableRefresh" value="刷新" onclick="TableProcess(id)">
|
|
|
+ <div style="border: 1px solid black; width: 0px;"></div>
|
|
|
+ <input type="button" id="startTableImport" value="导入" onclick="TableProcess(id)">
|
|
|
+ <div style="border: 1px solid black; width: 0px;"></div>
|
|
|
+ <input type="button" id="startTableExport" value="导出" onclick="TableProcess(id)">
|
|
|
+ <div style="border: 1px solid black; width: 0px;"></div>
|
|
|
+ <input type="button" id="startTableClear" value="清空" onclick="TableProcess(id)">
|
|
|
+ </div>
|
|
|
+ <table id="historyTable" class="tableStyle">
|
|
|
+ <tr>
|
|
|
+ <th>编号</th>
|
|
|
+ <th>时间</th>
|
|
|
+ <th>物质</th>
|
|
|
+ <th>冰点</th>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="width: 49%; height: 100%; float: right;">
|
|
|
+ <h2>温度曲线</h2>
|
|
|
+ <div id="temperatureLine" style="height: 90%;"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="./ATY_LIB/Web/PROG_Base.js"></script>
|
|
|
+ <script src="./ATY_LIB/Web/HW_WebSerial.js"></script>
|
|
|
+ <script src="./ATY_LIB/Web/dexie.js"></script>
|
|
|
+ <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
|
|
|
+ <script src="https://code.hcharts.cn/10.3.2/modules/exporting.js"></script>
|
|
|
+ <script src="https://code.hcharts.cn/10.3.2/modules/export-data.js"></script>
|
|
|
+ <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
|
|
|
+ <script>
|
|
|
+ /* Serial Process *****************************************************/
|
|
|
+ var powerOnFlag = 0;
|
|
|
+ document.getElementById("powerDialog").showModal();
|
|
|
+
|
|
|
+ function PowerOnDetectTimer() {
|
|
|
+ if (powerOnFlag == 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ SerialSendWithCrc(new Uint8Array([0x01, 0x03, 0x00, 0x00, 0x00, 0x32, 0xC4, 0x1F]));
|
|
|
+ PowerOnDetectTimer();
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ document.getElementById("powerDialog").close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var debugPowerOnCount = 0;
|
|
|
+ async function PowerOn() {
|
|
|
+ debugPowerOnCount++;
|
|
|
+ if (debugPowerOnCount > 6) {
|
|
|
+ debugPowerOnCount = 0;
|
|
|
+ document.getElementById("powerDialog").close();
|
|
|
+ powerOnFlag = 1;
|
|
|
+ }
|
|
|
+ if (serialPort == null)
|
|
|
+ await SerialConnect();
|
|
|
+ PowerOnDetectTimer();
|
|
|
+ // powerOnFlag = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ var WaitSerialConnect = setInterval(() => {
|
|
|
+ if (serialPort != null) {
|
|
|
+ clearInterval(WaitSerialConnect);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // console.log(serialPort);
|
|
|
+ HintWindow("Serial Not Connected", 1000);
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ function PowerSet(id) {
|
|
|
+ if (id == "btnPowerOff") {
|
|
|
+ location.reload(true);
|
|
|
+
|
|
|
+ document.getElementById("powerDialog").showModal();
|
|
|
+ SerialSendClear();
|
|
|
+ powerOnFlag = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var mbStartAddr = 0;
|
|
|
+ var mbRegCount = 0;
|
|
|
+ var startSaveFlag = 0;
|
|
|
+ var dataSaveGroup = new Uint16Array(259 + 5);
|
|
|
+ var paramSave = new Float32Array(60);
|
|
|
+
|
|
|
+ function DataCountChange(value) {
|
|
|
+ maxDataCount = Number(value);
|
|
|
+ console.log(maxDataCount);
|
|
|
+ }
|
|
|
+
|
|
|
+ function SerialSendClear() {
|
|
|
+ mbStartAddr = 0;
|
|
|
+ mbRegCount = 0;
|
|
|
+ startSaveFlag = 0;
|
|
|
+ dataSaveGroup = new Uint16Array(259 + 5);
|
|
|
+ // paramSave = new Float32Array(60);
|
|
|
+ }
|
|
|
+ function SerialSendWithCrc(e) {
|
|
|
+ // console.log("e", e);
|
|
|
+ mbStartAddr = e[3];
|
|
|
+
|
|
|
+ SerialSendClear();
|
|
|
+ e[e.length - 1] = GenCrc16ModbusHL(e, e.length - 2, 0);
|
|
|
+ e[e.length - 2] = GenCrc16ModbusHL(e, e.length - 2, 1);
|
|
|
+ SerialSend(e);
|
|
|
+ }
|
|
|
+
|
|
|
+ function UserDataProcess(uint8Byte) {
|
|
|
+ if (startSaveFlag >= 259 + 5 - 1)
|
|
|
+ startSaveFlag = 0;
|
|
|
+ dataSaveGroup[startSaveFlag++] = uint8Byte;
|
|
|
+ // console.log("Receive:", startSaveFlag - 1, dataSaveGroup[startSaveFlag - 1]);
|
|
|
+
|
|
|
+ if (dataSaveGroup[0] == 0x01) {
|
|
|
+ if (dataSaveGroup[1] == 0x03) {
|
|
|
+ if (dataSaveGroup[2] != 0) {
|
|
|
+ if (CheckCrc16Modbus(dataSaveGroup, dataSaveGroup[2] + 5) == 0) {
|
|
|
+ HintWindow("Success 3!", 2000);
|
|
|
+ // console.log("Success 3!");
|
|
|
+ // console.log("#GetData G", dataSaveGroup.toString());
|
|
|
+
|
|
|
+ powerOnFlag = 1;
|
|
|
+
|
|
|
+ try {
|
|
|
+ for (let i in paramSave) {
|
|
|
+ paramSave[Number(i) + mbStartAddr] = hex2float(
|
|
|
+ (dataSaveGroup[2 + (Number(i) * 4) + 1] << 24)
|
|
|
+ + (dataSaveGroup[2 + (Number(i) * 4) + 2] << 16)
|
|
|
+ + (dataSaveGroup[2 + (Number(i) * 4) + 3] << 8)
|
|
|
+ + (dataSaveGroup[2 + (Number(i) * 4) + 4] << 0));
|
|
|
+ // console.log(paramSave[i]);
|
|
|
+ }
|
|
|
+ } catch (error) { }
|
|
|
+
|
|
|
+ SerialSendClear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (dataSaveGroup[1] == 0x06) {
|
|
|
+ if (CheckCrc16Modbus(dataSaveGroup, 10) == 0) {
|
|
|
+ let dtS = new Date;
|
|
|
+ HintWindow("Success 6! " + dataSaveGroup[3] + "-" + dtS.getSeconds(), 2000);
|
|
|
+ // console.log("Success 6! " + dataSaveGroup[3] + "-" + dtS.getSeconds());
|
|
|
+ // console.log("#GetData S", dataSaveGroup.toString());
|
|
|
+ SerialSendClear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (dataSaveGroup[1] == 0x10) {
|
|
|
+ if (CheckCrc16Modbus(dataSaveGroup, 8) == 0) {
|
|
|
+ HintWindow("Success 16!", 2000);
|
|
|
+ // console.log("Success 16!");
|
|
|
+ // console.log("#GetData SM", dataSaveGroup.toString());
|
|
|
+ SerialSendClear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var saveTempValue = [[(new Date()).getTime(), 0]];
|
|
|
+ var maxDataCount = 9999;
|
|
|
+
|
|
|
+ var freshTimer = null;
|
|
|
+ var btnFreezeFlag = 0;
|
|
|
+ async function AutoRefresh(id) {
|
|
|
+ if (freshTimer)
|
|
|
+ clearInterval(freshTimer);
|
|
|
+ freshTimer = setInterval(function () {
|
|
|
+ SerialSendWithCrc(new Uint8Array([0x01, 0x03, 0x00, 0, 0x00, 50, 0, 0]));
|
|
|
+
|
|
|
+ // update data
|
|
|
+ document.getElementById("probeRes").innerHTML = roundFun(paramSave[20], 8);
|
|
|
+ document.getElementById("fastTemp").innerHTML = roundFun(paramSave[21], 8);
|
|
|
+ document.getElementById("aboveTemp").innerHTML = roundFun(paramSave[22], 8);
|
|
|
+ document.getElementById("belowTemp").innerHTML = roundFun(paramSave[23], 8);
|
|
|
+ document.getElementById("rcBelowTemp1").innerHTML = roundFun(paramSave[24], 8);
|
|
|
+ document.getElementById("rcBelowTemp2").innerHTML = roundFun(paramSave[25], 8);
|
|
|
+ document.getElementById("kalmanBelowTemp1").innerHTML = roundFun(paramSave[26], 8);
|
|
|
+ document.getElementById("kalmanBelowTemp2").innerHTML = roundFun(paramSave[27], 8);
|
|
|
+ document.getElementById("McuTemp").innerHTML = roundFun(paramSave[31], 8);
|
|
|
+ document.getElementById("NtcTemp1").innerHTML = roundFun(paramSave[36], 8);
|
|
|
+ document.getElementById("NtcTemp2").innerHTML = roundFun(paramSave[37], 8);
|
|
|
+ document.getElementById("NtcTemp3").innerHTML = roundFun(paramSave[38], 8);
|
|
|
+ document.getElementById("NtcTemp4").innerHTML = roundFun(paramSave[39], 8);
|
|
|
+ console.log(Number(roundFun(paramSave[12], 0)));
|
|
|
+ if (Number(roundFun(paramSave[12], 0)) == 1) {
|
|
|
+ btnFreezeFlag = 0;
|
|
|
+ document.getElementById("btnFreeze").style.backgroundColor = "#caffca";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ btnFreezeFlag++;
|
|
|
+ }
|
|
|
+ if (btnFreezeFlag > 1) {
|
|
|
+ btnFreezeFlag = 0;
|
|
|
+ document.getElementById("btnFreeze").style.backgroundColor = "white";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (powerOnFlag == 1) {
|
|
|
+ var x = (new Date()).getTime();
|
|
|
+ var y = paramSave[25];
|
|
|
+ // var y = paramSave[27];
|
|
|
+ // console.log(x, y);
|
|
|
+
|
|
|
+ if (saveTempValue.length > 1) {
|
|
|
+ // if (Math.abs(y - saveTempValue[saveTempValue.length - 1][1]) < 0.1)
|
|
|
+ {
|
|
|
+ chart.series[0].addPoint([x, y]);
|
|
|
+ activeLastPointToolip(chart);
|
|
|
+ }
|
|
|
+ if (saveTempValue[0][1] == 0)
|
|
|
+ chart.series[0].removePoint(0);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ chart.series[0].addPoint([x, y]);
|
|
|
+ activeLastPointToolip(chart);
|
|
|
+ }
|
|
|
+ if (saveTempValue.length > maxDataCount) {
|
|
|
+ chart.series[0].removePoint(0);
|
|
|
+ }
|
|
|
+ console.log(saveTempValue.length);
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(paramSave[30]);
|
|
|
+ // console.log(paramSave[31]);
|
|
|
+ // console.log(paramSave[32]);
|
|
|
+ // console.log(paramSave[33]);
|
|
|
+ // console.log(paramSave[34]);
|
|
|
+
|
|
|
+
|
|
|
+ }, document.getElementById("refreshSelect").value);
|
|
|
+ }
|
|
|
+ AutoRefresh("");
|
|
|
+
|
|
|
+
|
|
|
+ /* DataDB Process *****************************************************/
|
|
|
+ var detectTableGroup = new Array(4);
|
|
|
+ detectTableGroup[0] = 0;
|
|
|
+
|
|
|
+ async function DetectDataSave() {
|
|
|
+ if (Number(detectTableGroup[0]) == 0)
|
|
|
+ detectTableGroup[0] = 1;
|
|
|
+ else
|
|
|
+ detectTableGroup[0]++;
|
|
|
+ detectTableGroup[1] = new Date().toLocaleString();
|
|
|
+ detectTableGroup[2] = "MILK";
|
|
|
+ detectTableGroup[3] = roundFun(paramSave[25], 8);
|
|
|
+
|
|
|
+ var db = new Dexie("DIPM_Data");
|
|
|
+ db.version(1).stores({
|
|
|
+ DIPM_DetectData: "&d_order,\
|
|
|
+ d_time,\
|
|
|
+ d_content,\
|
|
|
+ d_icePoint"
|
|
|
+ });
|
|
|
+ db.DIPM_DetectData.add({
|
|
|
+ d_order: detectTableGroup[0],
|
|
|
+ d_time: detectTableGroup[1],
|
|
|
+ d_content: detectTableGroup[2],
|
|
|
+ d_icePoint: detectTableGroup[3],
|
|
|
+ });
|
|
|
+ document.getElementById("historyTable").insertRow(1);
|
|
|
+ for (let j = 0; j < document.getElementById("historyTable").rows[0].cells.length; j++)
|
|
|
+ document.getElementById("historyTable").rows[1].insertCell(j);
|
|
|
+ document.getElementById("historyTable").rows[1].cells[0].innerHTML = detectTableGroup[0];
|
|
|
+ document.getElementById("historyTable").rows[1].cells[1].innerHTML = detectTableGroup[1];
|
|
|
+ document.getElementById("historyTable").rows[1].cells[2].innerHTML = detectTableGroup[2];
|
|
|
+ document.getElementById("historyTable").rows[1].cells[3].innerHTML = detectTableGroup[3];
|
|
|
+ }
|
|
|
+ async function DetectDataRead() {
|
|
|
+ var db = new Dexie("DIPM_Data");
|
|
|
+ db.version(1).stores({
|
|
|
+ DIPM_DetectData: "&d_order,\
|
|
|
+ d_time,\
|
|
|
+ d_content,\
|
|
|
+ d_icePoint"
|
|
|
+ });
|
|
|
+
|
|
|
+ const getAll = await db.DIPM_DetectData.where("d_order").above(-1);
|
|
|
+ getAll.toArray().then(r => {
|
|
|
+ console.log(r);
|
|
|
+ detectTableGroup[0] = Number(r.length);
|
|
|
+ for (i = document.getElementById("historyTable").rows.length - 1;
|
|
|
+ i < detectTableGroup[0]; i++) {
|
|
|
+ if (i >= Number(r.length))
|
|
|
+ break;
|
|
|
+ document.getElementById("historyTable").insertRow(1);
|
|
|
+ for (let j = 0; j < document.getElementById("historyTable").rows[0].cells.length; j++)
|
|
|
+ document.getElementById("historyTable").rows[1].insertCell(j);
|
|
|
+ document.getElementById("historyTable").rows[1].cells[0].innerHTML = r[i].d_order;
|
|
|
+ document.getElementById("historyTable").rows[1].cells[1].innerHTML = r[i].d_time;
|
|
|
+ document.getElementById("historyTable").rows[1].cells[2].innerHTML = r[i].d_content;
|
|
|
+ document.getElementById("historyTable").rows[1].cells[3].innerHTML = r[i].d_icePoint;
|
|
|
+ }
|
|
|
+ for (let i = 1; i < document.getElementById("historyTable").rows.length; i++) {
|
|
|
+ for (let j = 0; j < document.getElementById("historyTable").rows[0].cells.length; j++)
|
|
|
+ if (document.getElementById("historyTable").rows[i].cells[j].innerHTML == "NaN") {
|
|
|
+ document.getElementById("historyTable").rows[i].style.backgroundColor = "#fff3f3";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ DetectDataRead();
|
|
|
+
|
|
|
+ /* Table Process ******************************************************/
|
|
|
+ function TableProcess(id) {
|
|
|
+ if (id == "startTableClear") {
|
|
|
+
|
|
|
+ }
|
|
|
+ else if (id == "startTableExport") {
|
|
|
+ let str = "";
|
|
|
+ for (let i = 0; i < document.getElementById("historyTable").rows.length; i++) {
|
|
|
+ for (let j = 0; j < document.getElementById("historyTable").rows[i].cells.length; j++) {
|
|
|
+ str += document.getElementById("historyTable").rows[i].cells[j].innerHTML + ",";
|
|
|
+ }
|
|
|
+ str += "\r\n";
|
|
|
+ }
|
|
|
+ console.log(str);
|
|
|
+ let csv = "data:text/csv;charset=utf-8,\ufeff" + str;
|
|
|
+ let link = document.createElement("a");
|
|
|
+ link.setAttribute("href", csv);
|
|
|
+ link.setAttribute("download", "DIPM_N1_" + new Date().toLocaleString() + ".csv");
|
|
|
+ link.click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* Draw Process *******************************************************/
|
|
|
+ Highcharts.setOptions({
|
|
|
+ global: {
|
|
|
+ useUTC: false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ function activeLastPointToolip(chart) {
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ chart.tooltip.refresh(points[points.length - 1]);
|
|
|
+ }
|
|
|
+ var chart = Highcharts.chart('temperatureLine', {
|
|
|
+ plotOptions: {
|
|
|
+ series: {
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ 'click': function () {
|
|
|
+ if (this.series.data.length > 1) {
|
|
|
+ this.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ accessibility: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ chart: {
|
|
|
+ type: 'spline',
|
|
|
+ marginRight: 10,
|
|
|
+ events: {
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
+ activeLastPointToolip(chart);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'datetime',
|
|
|
+ tickPixelInterval: 150,
|
|
|
+ title: {
|
|
|
+ text: 'Time'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: {
|
|
|
+ text: 'Temp'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function () {
|
|
|
+ return '<b>' + this.series.name + '</b><br/>' +
|
|
|
+ Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
|
|
|
+ Highcharts.numberFormat(this.y, 8);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: 'Temp',
|
|
|
+ data: saveTempValue
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ function BtnFreeze() {
|
|
|
+ btnFreezeFlag = 0;
|
|
|
+ document.getElementById("btnFreeze").style.backgroundColor = "#caffca";
|
|
|
+ SerialSendWithCrc(new Uint8Array([0x01, 0x06, 0x00, 0x0C, 0x3F, 0x80, 0x00, 0x00, 0xFA, 0x3A]));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|