FCC/Applications/UniversalApi_WebConsole_App/Views/OnlineMonitor/Chart.cshtml

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@using Applications.UniversalApi_WebConsole_App.Models.OnlineMonitor
@model Applications.UniversalApi_WebConsole_App.Models.OnlineMonitor.OnlineMonitorInfo
@{
    int screenWidth = 1280;
    int mainviewHeight = 570;
    int tableMargin = 10;
    int tableWidth = screenWidth - tableMargin - 63;
    int tableHeight = mainviewHeight - tableMargin;
    int scatterOrTableImgWidth = 66;
    int scatterOrTableImgHeight = 72;
    int queryViewWidth = 207;
    int colCount = 7;
    int maximumAL = 2;//should get from configuration
    int minimumAL = 1;//shold get from configuration
    string warningPointColor = "rgba(255, 255, 0,1)";//as prs said it should be yellow
    string maximumALLineColor = "rgba(255, 0, 0, 1)";//red
    string minimumALLineColor = "rgba(0, 0, 255, 1)";//blue
    string normalPointColor = "rgba(0, 0, 255, 1)";//blue

    int headRightHeight = 44;
    int queryImgWidth = 61;
    int queryImgTop = 0;
    //int queryImgTop = headRightHeight + 10;
}
<script>
    function DisplayQueryView() {
        var queryView = document.getElementById("Query_view");
        var queryButton = document.getElementById("Query_button_chartTable");
        if (queryButton != null && queryButton.style.visibility === "visible") {
            queryButton.style.visibility = "hidden";
            queryButton.style.display = "none";
        }
        if (queryView != null && queryView.style.visibility === "hidden") {
            queryView.style.visibility = "visible";
            queryView.style.display = "";
        }
    }
    function HideQueryView() {
        var queryView = document.getElementById("Query_view");
        var queryButton = document.getElementById("Query_button_chartTable");
        if (queryButton != null && queryButton.style.visibility === "hidden") {
            queryButton.style.visibility = "visible";
            queryButton.style.display = "";
        }
        if (queryView != null && queryView.style.visibility === "visible") {
            queryView.style.visibility = "hidden";
            queryView.style.display = "none";
        }
    }
    function Pad(num, n) {
        var len = num.toString().length;
        while (len < n) {
            num = "0" + num;
            len++;
        }
        return num;
    }
    function ClearAndReSetUpTableData(datas) {
        if (datas == null) {
            console.log("response data is null for chart table");
            return;
        }
        var chartTable = document.getElementById("Chart_table");
        if (chartTable == null) {
            console.log("chart table is not created");
            return;
        }

        var originalTableRows = chartTable.rows.length;
        datas.forEach(function (d) {
            var r = chartTable.insertRow(chartTable.rows.length);
            //var c1 = r.insertCell(r.cells.length);
            //c1.innerHTML = d.DataCollectorNozzleNumber;
            var c1 = r.insertCell(r.cells.length);
            c1.innerHTML = d.SiteLevelNozzleId;
            var c2 = r.insertCell(r.cells.length);
            c2.innerHTML = d.SensorId;
            var c3 = r.insertCell(r.cells.length);
            c3.innerHTML = new Date(d.FuellingStartTime).getFullYear() + "-" + Pad(new Date(d.FuellingStartTime).getMonth() + 1, 2) + "-" + Pad(new Date(d.FuellingStartTime).getDate(), 2);
            var c4 = r.insertCell(r.cells.length);
            c4.innerHTML = (new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
            var c5 = r.insertCell(r.cells.length);
            c5.innerHTML = d.VaporLiquidRatio;
            var c6 = r.insertCell(r.cells.length);
            c6.innerHTML = d.VaporVolume;
            var c7 = r.insertCell(r.cells.length);
            c7.innerHTML = d.LiquidVolume;
        });
        //insert an empty row, otherwise the style of the table will be changed
        if (datas.length === 0) {
            var r = chartTable.insertRow(chartTable.rows.length);
            var c1 = r.insertCell(r.cells.length);
            c1.innerHTML = "";
            var c2 = r.insertCell(r.cells.length);
            c2.innerHTML = "";
            var c3 = r.insertCell(r.cells.length);
            c3.innerHTML = "";
            var c4 = r.insertCell(r.cells.length);
            c4.innerHTML = "";
            var c5 = r.insertCell(r.cells.length);
            c5.innerHTML = "";
            var c6 = r.insertCell(r.cells.length);
            c6.innerHTML = "";
            var c7 = r.insertCell(r.cells.length);
            c7.innerHTML = "";
        }
        for (var count = 1; count < originalTableRows; count++) {
            chartTable.deleteRow(1);
        };
    }
    //更新报警列表：筛选条件改变、用户初始进入该页面
    function UpdateWarningHistoryTable(datas) {
        if (datas == null) {
            console.log("Warning History response data is null");
            return;
        }
        var warningHistoryTable = document.getElementById("Chart_warning_history_table");
        if (warningHistoryTable == null) {
            console.log("Warning history table is null");
            return;
        }
        var originalTableRows = warningHistoryTable.rows.length;

        datas.forEach(function (d) {
            var r = warningHistoryTable.insertRow(warningHistoryTable.rows.length);
            var c1 = r.insertCell(r.cells.length);
            c1.style.width = '20%';
            c1.innerHTML = d.AlarmTime;
            var c2 = r.insertCell(r.cells.length);
            c2.style.width = '20%';
            c2.innerHTML = d.AlarmDescription;
            var c3 = r.insertCell(r.cells.length);
            c3.style.width = '60%';
            c3.style.textAlign = 'left';
            c3.innerHTML = d.AlarmDetails;
        });
        //insert a empty row to keep the table body style when there's no data in response message
        if (datas.length === 0) {
            var r = warningHistoryTable.insertRow(warningHistoryTable.rows.length);
            var c1 = r.insertCell(r.cells.length);
            c1.style.width = '20%';
            c1.innerHTML = "";
            var c2 = r.insertCell(r.cells.length);
            c2.style.width = '20%';
            c2.innerHTML = "";
            var c3 = r.insertCell(r.cells.length);
            c3.style.width = '60%';
            c3.style.textAlign = 'left';
            c3.innerHTML = "";
        }
        for (var count = 1; count < originalTableRows; count++) {
            warningHistoryTable.deleteRow(1);
        }
    }

    //放大镜图标及主窗口显示曲线图、表格还是报警历史的切换
    function reloadQueryImag(queryImgId) {
        document.getElementById(queryImgId).style.visibility = "hidden";
        var scatterChartDiv = document.getElementById("Chart_scatter_div");
        var tableChartDiv = document.getElementById("Chart_table_div");
        var waningTableDiv = document.getElementById("Chart_warning_div");
        if (queryImgId === "Chart_query_scatter2") {
            document.getElementById("Chart_query_warning").style.visibility = "visible";
            if (scatterChartDiv != null && scatterChartDiv.style.visibility === "hidden") {
                scatterChartDiv.style.visibility = "visible";
            }
            if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
                tableChartDiv.style.visibility = "hidden";
            }
            if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
                waningTableDiv.style.visibility = "hidden";
            }

        } else if (queryImgId === "Chart_query_scatter1") {
            document.getElementById("Chart_query_table").style.visibility = "visible";
            if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
                tableChartDiv.style.visibility = "hidden";
            }
            if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
                waningTableDiv.style.visibility = "hidden";
            }
            if (scatterChartDiv != null && scatterChartDiv.style.visibility === "hidden") {
                scatterChartDiv.style.visibility = "visible";
            }
            document.getElementById("Chart_query_table").style.visibility = "visible";
        } else if (queryImgId === "Chart_query_table") {
            document.getElementById("Chart_query_scatter2").style.visibility = "hidden";
            document.getElementById("Chart_query_scatter1").style.visibility = "visible";
            document.getElementById("Chart_query_warning").style.visibility = "visible";
            if (scatterChartDiv != null && scatterChartDiv.style.visibility === "visible") {
                scatterChartDiv.style.visibility = "hidden";
            }
            if (tableChartDiv != null && tableChartDiv.style.visibility === "hidden") {
                tableChartDiv.style.visibility = "visible";
            }
            if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
                waningTableDiv.style.visibility = "hidden";
            }
        } else if (queryImgId === "Chart_query_warning") {
            document.getElementById("Chart_query_scatter1").style.visibility = "hidden";
            document.getElementById("Chart_query_scatter2").style.visibility = "visible";
            document.getElementById("Chart_query_table").style.visibility = "visible";
            if (scatterChartDiv != null && scatterChartDiv.style.visibility === "visible") {
                scatterChartDiv.style.visibility = "hidden";
            }
            if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
                tableChartDiv.style.visibility = "hidden";
            }
            if (waningTableDiv != null && waningTableDiv.style.visibility === "hidden") {
                waningTableDiv.style.visibility = "visible";
            }
        }
    }
</script>
<div id="charts_table" style="position: relative; width: (@screenWidth)px; height: (@mainviewHeight)px">
    <style type="text/css">
        .table{
            border-collapse:collapse;
        }
        .table tr td{
            /*border-bottom: 1px solid#00bfff;
            border-left: 1px solid #00bfff;*/
            color: #000000;
            font-size: 22px;
            /*padding:5px 8px;*/
            text-align: center;
        }
        .table>tbody>tr,.table>thead{
            display: table;
            width: 100%;
            height:@(tableHeight/11)px;
            table-layout:fixed;
        }
        .table>tbody{
            height:@(tableHeight-tableHeight/11)px;
            overflow: hidden;
            display: block;
            overflow: hidden;
            overflow-y:auto;
        }

    </style>
    <div id="Chart_table_div" onclick="HideQueryView()" style="position: relative; margin-left: @(tableMargin)px; top: @(tableMargin)px;width:@(tableWidth)px; height:@(tableHeight)px;visibility:visible;">
        <table id="Chart_table" class="table" style="width: 100%;">
            @{
                int colwidth = (100 / 7) * (tableWidth);
            }
            <thead>
                <tr style="font-weight: bold">
                    <td style="width:(@colwidth)px;">油站枪号</td>
                    <td style="width:(@colwidth)px;">传感器号</td>
                    <td style="width:(@colwidth)px;">时间</td>
                    <td style="width:(@colwidth)px;">加油时间(s)</td>
                    <td style="width:(@colwidth)px;">A/L(%)</td>
                    <td style="width:(@colwidth)px;">油气流量(L)</td>
                    <td style="width:(@colwidth)px;">燃油流量(L)</td>
                </tr>
            </thead>
            <tbody>
                @*@foreach (var t in Model.Transactions)
                    {*@
                <tr>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                    <td style="width: (@colwidth)px;"></td>
                </tr>
                @*}*@
            </tbody>
        </table>
        <script>
            // ClearAndReSetUpTableData(chartTableSamleData.data);
        </script>
    </div>
    <div id="Chart_scatter_div" onclick="HideQueryView()" style="position: absolute; left: @(tableMargin)px; top: @(tableMargin)px; width: @(tableWidth)px; height: @(tableHeight)px;visibility: hidden;">
        <canvas id="Chart_scatter_canvas" style="width: 100%; height: 100%;">
            Your browser does not support the canvas element.
        </canvas>
    </div>
    <div id="Chart_warning_div" onclick="HideQueryView()" style="position: absolute; left: @(tableMargin)px; top: @(tableMargin)px; width: @(tableWidth)px; height: @(tableHeight)px; visibility: hidden;">
        <table id="Chart_warning_history_table" class="table" style="width: 100%;">
            <thead>
                <tr style="font-weight: bold">
                    <td style="width: 20%;">警报时间</td>
                    <td style="width: 20%;">警报类型</td>
                    <td style="width: 60%;">警报说明</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 20%;"></td>
                    <td style="width: 20%;"></td>
                    <td style="width: 60%; text-align: left;"></td>
                </tr>
            </tbody>

        </table>
    </div>
    <div id="Query_view" style="position: absolute; left: @(screenWidth - queryViewWidth)px; top: 0px; width:@(queryViewWidth)px; font-weight: bold; background-image: url(/images/onlineMonitor/chartView/background_query.png); height: @(mainviewHeight)px; visibility: hidden;">
        @{
            int lableFontSize = 16;
            int queryFontSize = 20;
            string defaultDate = DateTime.Now.ToString("yyyy-MM-dd");
        }
        <span style="position: relative; display: inline-block; width: 100%; padding-bottom: 5px; font-size: 24px; text-align: center;">筛选查询</span>

        <span style="position: relative; display: inline-block; text-align: left; font-size: @(lableFontSize)px;">起始日期：</span>
        <input type="date" id="StartDate" value="@defaultDate" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;" />

        <span style="position: relative; display: inline-block; text-align: left; font-size: @(lableFontSize)px;">结束日期：</span>
        <input type="date" id="EndDate" value="@defaultDate" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;" />


        <span style="position: relative; display: inline-block; margin-top: 10px; text-align: left; font-size: @(lableFontSize)px;">油枪选择：</span>
        <br />
        <select id="Chart_table_Nozzles" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;"></select>

        <br>
        <span style="position: relative; display: inline-block; margin-top: 10px; text-align: left; font-size: @(lableFontSize)px;">查询条件：</span>
        <ul id="Chart_table_Criteria">
            @foreach (var f in Model.QueryInformation.OptionalCriteria)
            {
                var backgroundImag = (f == Criteria.气液比.ToString()) ? "url(/images/onlineMonitor/chartView/select.png)" : "none";
                <li id="Chart_table_Criteria_@f" onclick="CriterialSelect(this.id)" style="font-size: @(queryFontSize)px; padding: 2px; width: 137px; height: 32px; list-style-type: none; background-position-x: 0px; background-image: @backgroundImag; background-repeat: no-repeat; text-align: center;">@f</li>
            }
        </ul>
        <img id="Chart_query_scatter1" src="/images/onlineMonitor/chartView/scatter.png" onclick="DisplayChart(this.id)" style="position: absolute; left:20px; top: @(mainviewHeight - scatterOrTableImgHeight)px;">
        <img id="Chart_query_table" src="/images/onlineMonitor/chartView/table.png" onclick="DisplayChart(this.id)" style="position: absolute; left:20px; top: @(mainviewHeight - scatterOrTableImgHeight)px; visibility: hidden;">
        <img id="Chart_query_scatter2" src="/images/onlineMonitor/chartView/scatter.png" onclick="DisplayChart(this.id)" style="position: absolute; left:@(queryViewWidth-scatterOrTableImgWidth-20*2)px; top: @(mainviewHeight - scatterOrTableImgHeight)px; visibility: hidden;">
        <img id="Chart_query_warning" src="/images/onlineMonitor/chartView/alarm.png" onclick="DisplayChart(this.id)" style="position: absolute; left:@(queryViewWidth-scatterOrTableImgWidth-20*2)px; top: @(mainviewHeight - scatterOrTableImgHeight)px;">
    </div>
</div>
<img id="Query_button_chartTable" onclick="DisplayQueryView()" style="position: absolute; margin: 0px; top:@(queryImgTop)px; left: @(screenWidth - queryImgWidth)px; visibility: visible;" src="/images/onlineMonitor/chartView/query.png" />

<script src="~/js/mqtt.min.js"></script>
<script type="text/javascript">
    var hostname = 'localhost', //'192.168.1.2',
        port = 8384,
        clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
        timeout = 5000,
        keepAlive = 100,
        cleanSession = false,
        mqttVersion = 3,
        ssl = false;
    var warningValueMin = 1;
    var warningValueMax = 2;
    //var client = new Paho.MQTT.Client(hostname, port, clientId);
    //client.onConnectionLost = onConnectionLost;//绑定连接断开事件
    //client.onMessageArrived = onMessageArrived;//

    var options = {
        //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
        clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
        //invocationContext: {
        //    host: hostname,
        //    port: port,
        //    //path: client.path,
        //    mqttVersion:mqttVersion,
        //    clientId: clientId
        //},
        //mqttVersion:mqttVersion,
        timeout: timeout,
        //keepAliveInterval: keepAlive,
        //cleanSession: cleanSession,
        useSSL: false
        //onSuccess: onConnect,
        //onFailure: onError
    }
    //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
    var client = mqtt.connect("@Model.mqttConnectionString", options); // you add a ws:// url here

    ////建立连接
    client.on('connect',
        function () {
            console.log("connected");
            client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply',
                function (err) {
                    if (!err) {
                        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt');
                    } else {
                        console.log("error exist during subscribe GetConfigAsync_reply");
                    }
                });

            client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply',
                function (err) {
                    if (!err) {
                        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData', "Hello mqtt");
                    };
                });
            //When the view was loaded, get the nozzleflow data as default information
            client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData_reply',
                function (err) {
                    if (!err) {
                        var currentDate = new Date(Date.now());
                        var startTime = currentDate.getFullYear().toString() + "/" + Pad(currentDate.getMonth() + 1, 2) + "/" + Pad(currentDate.getDate(), 2) + " 00:00:00";
                        var endTime = currentDate.getFullYear().toString() + "/" + Pad(currentDate.getMonth() + 1, 2) + "/" + Pad(currentDate.getDate(), 2) + " 23:59:59";

                        var temp = {
                            "Parameters": [
                                { "Name": "nozzleid", "Value": "1" },
                                { "Name": "starttime", "Value": startTime },
                                { "Name": "endtime", "Value": endTime }
                            ]
                        };
                        var message = JSON.stringify(temp);
                        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
                    };
                });
            client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList_reply',
                function (err) {
                    if (!err) {
                        console.log("subscribe GetAlarmList_reply successfully");
                    };
                });
        });

    //如果连接错误，打印错误
    client.on('error',
        function (err) {
            console.log("error happens, will close the client");
            client.end();
        });

    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
    client.on('message',
        function (topic, message) {
            // message is Buffer,此处就是打印消息的具体内容
            console.log('-> ' + message.toString());
            var a = document.getElementById("testmqqt");
            if (a != null) a.innerHTML = topic;
            if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply") {
                processConfigData(JSON.parse(message.toString()));
                return;
            }
            if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply") {
                processNozzlesData(JSON.parse(message.toString()));
                return;
            }
            if (topic === '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData_reply') {
                if (document.getElementById("Chart_table_div") != null && document.getElementById("Chart_table_div").style.visibility === "visible") {
                    ClearAndReSetUpTableData(JSON.parse(message.toString()));
                }
                else if (document.getElementById("Chart_scatter_div") != null && document.getElementById("Chart_scatter_div").style.visibility === "visible") {
                    UpdateALScatterChart(JSON.parse(message.toString()));
                }
                return;
            }
            if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList_reply") {
                UpdateWarningHistoryTable(JSON.parse(message.toString()));
                return;
            }
        });
    //得到最大最小警戒值，用做点状图中使用
    function processConfigData(message) {
        if (message != null && message.onlineWatchConfig != null) {
            warningValueMin = message.onlineWatchConfig.WarningValueMin;
            warningValueMax = message.onlineWatchConfig.WarningValueMax;
        }
        console.log("最小警戒值：" + warningValueMin + "最大警戒值:" + warningValueMax);
    }

    function processNozzlesData(message) {
        if (message != null && message.data != null) {
            if (document.getElementById("Chart_table_Nozzles") != null) {
                var nozzleSelect = document.getElementById("Chart_table_Nozzles");
                nozzleSelect.options.length = 0;
                message.data.forEach(function (d) {
                    nozzleSelect.options.add(new Option(d.SiteLevelNozzleId + "号枪", d.SiteLevelNozzleId));
                });
            }
        }
    }

    //// 用户程序点击事件
    function Onmqtttest() {
        message = "message from browser with websocket"; // 消息内容
        //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt ' + message);
        var a = document.getElementById("testmqqt");
        if (a != null) a.innerHTML = message;

    }
    function DisplayChart(tabId) {
        reloadQueryImag(tabId);

        var startTime = document.getElementById("StartDate").value + " 00:00:00";
        var endTime = document.getElementById("EndDate").value + " 23:59:59";
        var nozzleNumber = encodeURI(document.getElementById("Chart_table_Nozzles").value);//.slice(0, 1);

        var temp = {
            "Parameters": [
                { "Name": "nozzleid", "Value": nozzleNumber },
                { "Name": "starttime", "Value": startTime },
                { "Name": "endtime", "Value": endTime }
            ]
        };
        var message = JSON.stringify(temp);
        //曲线查询
        if (tabId === "Chart_query_scatter1" || tabId === "Chart_query_scatter2" || tabId === "Chart_query_table") {
            if (client != null) {

                client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
            }
        } else if (tabId === "Chart_query_warning") {
            if (client != null) {
                client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList', message);
            }
        }

        HideQueryView();
    }
    function CriterialSelect(id) {
        var criterialList = document.getElementById("Chart_table_Criteria");
        //alert(id);
        if (criterialList != null && criterialList.getElementsByTagName("li") != null && criterialList.getElementsByTagName("li").length > 0) {

            var children = criterialList.getElementsByTagName("li");
            //alert(children.length);
            for (var i = 0; i < children.length; i++) {
                children[i].style.backgroundImage = "none";
            }
        }
        var selectItemStr = "";
        var selectItem = document.getElementById(id);
        if (selectItem != null) {
            selectItem.style.backgroundImage = "url(/images/onlineMonitor/chartView/select.png)";
            selectItemStr = selectItem.innerHTML;
        }
        var startTime = document.getElementById("StartDate").value + " 00:00:00";
        var endTime = document.getElementById("EndDate").value + " 23:59:59";
        var nozzleNumber = encodeURI(document.getElementById("Chart_table_Nozzles").value);//.slice(0, 1)
        var temp = {
            "Parameters": [
                { "Name": "nozzleid", "Value": nozzleNumber },
                { "Name": "starttime", "Value": startTime },
                { "Name": "endtime", "Value": endTime }
            ]
        };
        var message = JSON.stringify(temp);

        if ((document.getElementById("Chart_table_div") != null && document.getElementById("Chart_table_div").style.visibility === "visible") ||
            (document.getElementById("Chart_scatter_div") != null && document.getElementById("Chart_scatter_div").style.visibility === "visible")) {
            if (client != null) {
                client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
            }

        } else if (document.getElementById("Chart_warning_div") != null && document.getElementById("Chart_warning_div").style.visibility === "visible") {
            if (client != null) {
                client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList', message);
            }

        }
        HideQueryView();
    }
</script>
<script src="~/js/jquery-3.4.1.min.js"></script>
<script src="~/js/Chart.bundle.js"></script>
<script>
    var minimumScatterChartPoint = 10;
    var config_scatterChart = {
        type: 'scatter',
        data: {
            //lablels: [0, 0, 0],
            datasets: [
                {
                    type: 'line',
                    label: 'AL最大值',
                    borderColor: '@maximumALLineColor',
                    pointRadius: 0,
                    fill: false,
                    yAxisID: 'y-axis-1',
                    borderWidth: 1
                    //data: [0, 0, 0]
                }, {
                    type: 'line',
                    label: '汽液比最小值',
                    borderColor: '@minimumALLineColor',
                    pointRadius: 0,
                    fill: false,
                    yAxisID: 'y-axis-1',
                    borderWidth: 1
                    //data: [0, 0, 0]
                }, {
                    type: 'scatter',
                    label: '单笔交易汽液比',
                    borderColor: ['rgba(255, 127, 0, 1)'],
                    pointRadius: 2,
                    //pointStyle:'crossRot',
                    borderWidth: 1,
                    fill: true,
                    yAxisID: 'y-axis-1'
                    //data: [0, 0, 0]
                }
            ]
        },
        options: {
            responsive: true,
            hoverMode: 'index',
            stacked: true,
            animation: {
                duration: 0 // general animation time
            },
            hover: {
                animationDuration: 0 // duration of animations when hovering an item
            },
            responsiveAnimationDuration: 0, // animation duration after a resize
            //title: {
            //    display: true,
            //    text: '汽液比散点图',
            //    fontSize: 35,
            //    fontColor: "#000"
            //},
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution:'linear',
                    time: {
                        //stepSize: 2,
                        displayFormats: {
                            quarter: 'YYYY MMM D h:mm:ss'
                        }
                    },
                    scaleLabel: {
                        display: true,
                        labelString: '时间'
                    },
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 20
                    }
                }],
                yAxes: [{
                    type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                    ticks: {
                        beginAtZero: true,
                        suggestedMax: 3,
                        stepSize: 0.5
                    },
                    scaleLabel: {
                        display: true,
                        labelString: '汽液比'
                    }
                }],
                elements: {
                    line: {
                        tension: 1 // disables bezier curves
                    }
                }
            },
            tooltips: {
                mode: 'index',
                intersect: true
            }
        }
    };
    var ctx = document.getElementById('Chart_scatter_canvas');
    var alScatterChart = new Chart(ctx, config_scatterChart);

    function UpdateALScatterChart(datas) {
        var alChart = window["alScatterChart"];
        if (alChart == null || datas == null) return;
        //remove the old data in the chart
        alChart.data.labels.splice(0,alChart.data.labels.length);
        alChart.data.datasets.forEach((dataset) => {
            dataset.data.splice(0,dataset.data.length);
        });
        alChart.update();

        datas.forEach((data) => {
            alChart.data.datasets[0].data.push(warningValueMax);
            alChart.data.datasets[1].data.push(warningValueMin);
            alChart.data.datasets[2].data.push(data.VaporLiquidRatio);
            alChart.data.labels.push(data.FuellingEndTime);
        });
        if (alChart.data.labels.length < minimumScatterChartPoint) {
            var startDate = document.getElementById("StartDate").value+" 00:00:00";
            var endDate = document.getElementById("EndDate").value+" 23:59:59";
            alChart.data.datasets[0].data.unshift(warningValueMax);
            alChart.data.datasets[1].data.unshift(warningValueMin);
            alChart.data.datasets[2].data.unshift(0);
            alChart.data.labels.unshift(startDate);
            alChart.data.datasets[0].data.push(warningValueMax);
            alChart.data.datasets[1].data.push(warningValueMin);
            alChart.data.datasets[2].data.push(0);
            alChart.data.labels.push(endDate);
        }
        var i = 0;
        alChart.data.datasets[2].data.forEach((data) => {
            if (data > warningValueMax || data<warningValueMin) {
                config_scatterChart.data.datasets[2].borderColor[i] = '@warningPointColor';
            } else if (data === 0) {
                config_scatterChart.data.datasets[2].borderColor[i] = 'rgba(192, 192, 192, 0)';
            } else {
                config_scatterChart.data.datasets[2].borderColor[i] = '@normalPointColor';
            }
            i++;
        });
        alChart.update();
    }
</script>