JingYun
/
ATY_LIB


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
							<!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="电源：关闭&#10;&#10;点击开机"
            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>