SystemDev
/
FCC


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
							@*

    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

*@

@{

    ViewData["Title"] = "Auto Tank Gauge System";

    Layout = null;

}


<script src="~/js/mqtt.min.js"></script>

<script src="~/js/Chart.bundle.js"></script>

<script src="~/js/jquery-3.4.1.min.js"></script>

<body id="Page_Body" style="height:700px;width:1280px;background-image:url(/images/device/background/background.png);background-repeat:no-repeat">

    <div style="display:flex;height:5%;width:50%">

        <div style="position:absolute;float:right;left:1081px;height:10%;width:0%;z-index:0;top:0px">

            <img id="testimage" src="~/images/device/title/505455.png" style="z-index: 2; position: absolute; float: left">

            <p style="z-index:4; left:30px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="white"> 03/31/2020  </font></p>

            <canvas></canvas>

        </div>

        <div style="position:absolute;float:left;height:10%;width:1280px;z-index:0;left:0px;top:0px">

            <img id="testimage" src="~/images/device/title/ff1d1c.png" style="z-index:1;position:absolute;float:left;left:0px">

            <img id="testimage" src="~/images/device/title/0182d6.png" style="z-index:1;position:absolute;float:left;left:0px">

            <img id="testimage" src="~/images/device/title/f8cd1c.png" style="z-index:1;position:absolute;float:left;left:0px">

            <p style="z-index: 1; left: 30px; height: 7%; position: absolute; float: left"><font size="6" color="white"> X号油罐 : 高油位警报, </font></p>

            <p style="z-index:1; left:550px;height:7%;position:absolute;float:left"><font size="6" color="white"> 活跃预警:  </font></p>

            <p style="z-index:1; left:850px;height:7%;position:absolute;float:left"><font size="6" color="white"> 活跃报警:  </font></p>

            <canvas></canvas>

        </div>

    </div>

    <div id="Page_MainBody_Table_WarningList" style="position:absolute;top:100px;height:600px">

        <div id="Table_WarningList" style="position:absolute;float:left;height:600px;width:950px" onclick="PageMainBodyClickEvent()">

            <table border="0" cellpadding="1" cellspacing="10" width="950px" style="position:absolute;left:20px">

                <thead style="font-size:large">

                    <tr>

                        <th> 油罐 </th>

                        <th> 油品 </th>

                        <th> 警报描述 </th>

                        <th> 发生时间 </th>

                        <th> 接触时间 </th>

                    </tr>

                </thead>

                <tbody style="font-size:large">

                    @for (int i = 0; i <= 1; i++)

                    {

                        <tr>

                            <th> teble1 </th>

                            <th> teble1 </th>

                            <th> teble1 </th>

                            <th> teble1 </th>

                            <th> teble1 </th>

                        </tr>

                    }

                </tbody>

            </table>

        </div>

        <div style="display:flex;margin-left:1120px">

            <div id="FilterList_HiddenPicture" style="margin-left:70px;margin-top:-40px;visibility:visible">

                <a><img src="~/images/device/fairbanks/筛选图标.png" style="" onclick="FilterListPictureClickEvent()"></a>

            </div>

            <div id="FilterList_ShowTable" style="position:absolute;background-image:url('/images/device/fairbanks/筛选背景.jpg');background-size:contain;height:400px;width:150px;margin-top:-40px;margin-left:-20px;visibility:hidden">

                <table style="width:180px;text-align:left">

                    <caption style="font-size:xx-large;font-weight:bolder;widows:initial;text-align:left"> 筛选查询 </caption>

                    <tr style="height:10px">

                        <th>  </th>

                    </tr>

                    <tbody>

                        <tr>

                            <th> 起始时间:  </th>

                        </tr>

                        <tr>

                            <th> temp </th>

                        </tr>

                        <tr>

                            <th> 结束日期： </th>

                        </tr>

                        <tr>

                            <th> temp </th>

                        </tr>

                        <tr>

                            <th> 油罐选择： </th>

                        </tr>

                        <tr>

                            <th> temp </th>

                        </tr>

                        <tr style="height:10px">

                            <th>  </th>

                        </tr>

                        <tr>

                            <th> 查询条件： </th>

                        </tr>

                    </tbody>

                </table>

                <div style="position:absolute;margin-top:20px;margin-left:15px">

                    <div id="FilterList_ActiveWarning" style="display:flex">

                        <a href="ActiveAlarm">

                            <img src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left">

                            <p style="z-index:1;float:left;position:absolute;width:110px;top:-11px;left:25px"><font size="5" color="white" style="font-weight:bold"> 活跃报警 </font></p>

                        </a>

                    </div>

                    <div id="FilterList_WarningHistory" style="display:flex;margin-top:50px">

                        <a href="AlarmHistory">

                            <img src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">

                            <p style="z-index:1;float:left;position:absolute;width:110px;top:39px;left:25px"><font size="5" color="black" style="font-weight:bold"> 历史记录 </font></p>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <div style="position:absolute;top:500px">

        <div style="height:40px">

            <p style="z-index:1; height:10%;position:absolute;float:left"></p>

        </div>

        <div style="display:flex;height:5%;width:50%">

            <div style="position:absolute;float:left;height:10%;width:1280px;z-index:0;left:50px">

                <a href="TankDevicesOverview">

                    <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:1;position:absolute;float:left;visibility:hidden">

                    @*<asp:ImageButton ImageUrl="~/image/device/pages/3fa0df.png" href="/_Layout_TankDetail.cshtml" ></asp:ImageButton>*@

                    <p style="z-index:1; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 油罐总览  </font></p>

                    <canvas></canvas>

                </a>

            </div>

            <div style="position:absolute;float:right;left:200px;height:10%;width:1000px;z-index:0">

                <a href="TankDeviceDetails">

                    <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">

                    <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 油罐详情 </font></p>

                    <canvas></canvas>

                </a>

            </div>

            <div style="position:absolute;float:right;left:350px;height:10%;width:1000px;z-index:0">

                <a href="AlarmHistory">

                    <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left" onclick="">

                    <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="white" style="font-weight:bold"> 报警查询 </font></p>

                    <canvas></canvas>

                </a>

            </div>

            <div style="position:absolute;float:right;left:500px;height:10%;width:1000px;z-index:0">

                <a href="FuelInventoryList">

                    <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">

                    <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 进油库存 </font></p>

                    <canvas></canvas>

                </a>

            </div>

            @*<div>

                    <div style="position:absolute;float:right;left:860px;height:10%;width:50px;z-index:0;margin-top:10px">

                        <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">

                        <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">

                    </div>

                    <div style="position:absolute;float:right;left:940px;height:10%;width:50px;z-index:0;margin-top:10px">

                        <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">

                        <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">

                    </div>

                    <div style="position:absolute;float:right;left:1020px;height:10%;width:50px;z-index:0;margin-top:10px">

                        <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">

                        <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">

                    </div>

                    <div style="position:absolute;float:right;left:1100px;height:10%;width:50px;z-index:0;margin-top:10px">

                        <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">

                        <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">

                    </div>

                    <div style="position:absolute;float:right;left:1180px;height:10%;width:50px;z-index:0;margin-top:10px">

                        <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">

                        <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">

                    </div>

                </div>*@

        </div>

    </div>

</body>


<script>

    var FilterList_Pciture = document.getElementById("FilterList_HiddenPicture");

    var FilterList_Table = document.getElementById("FilterList_ShowTable");

    function FilterList_ShowHide(DivID) {

        if (DivID == "PageMainBody" || DivID == "PageBody") {

            if (FilterList_Table.style.visibility == "visible") {

                FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "hidden") ? "visible" : "hidden";

                FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "visible") ? "hidden" : "visible";

            }

        }

        else if (DivID == "FilterListPicture") {

            FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "visible") ? "hidden" : "visible";;

            FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "hidden") ? "visible" : "hidden";


        }

    }

    function PageMainBodyClickEvent() {

        FilterList_ShowHide("PageMainBody");

    }

    function FilterListPictureClickEvent() {

        FilterList_ShowHide("FilterListPicture");

    }


    //$(document).ready(function () {

    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 options = {

        //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档

        clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),

        timeout: timeout,

        useSSL: false

    }

    //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt

    var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here

    ////建立连接

    client.on('connect',

        function () {

            var a = document.getElementById("testmqqt");

            if (a != null) a.innerHTML = "connected";

            //订阅主题 presence

            client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply',

                function (err) {

                    if (!err) {

                        //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');

                    } else {

                        //打印错误

                        if (a != null) a.innerHTML = err;

                    }

                });

        });

    client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync', 'Mqtt Hello');

    //如果连接错误，打印错误

    client.on('error',

        function (err) {

            var a = document.getElementById("testmqqt");

            if (a != null) a.innerHTML = err;

            client.end();

        });


    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑

    client.on('message',

        function (topic, message) {

            var a = document.getElementById("testmqqt");

            //if (a != null) a.innerHTML = message.toString();

            if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply") {

                TableRowADD(JSON.parse(message.toString()));

            }

        });


    //// 用户程序点击事件

    //function Onmqtttest() {

    //    message = "message from browser with websocket"; // 消息内容

    //    //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收

    //    client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankDeliveryAsync', 'Hello mqtt ' + message);

    //    var a = document.getElementById("testmqqt");

    //    if (a != null) a.innerHTML = message;


    //}


    function TableRowADD(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;

        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 = new Date().getFullYear() + "-" + (new Date().getMonth() + 1, 2) + "-" + (new Date().getDate(), 2);

        var c2 = r.insertCell(r.cells.length);

        c2.innerHTML = datas.Volume;

        var c3 = r.insertCell(r.cells.length);

        c3.innerHTML = datas.TcVolume;

        var c4 = r.insertCell(r.cells.length);

        c4.innerHTML = datas.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;

        var c5 = r.insertCell(r.cells.length);

        c5.innerHTML = datas.WaterVolume;

        var c6 = r.insertCell(r.cells.length);

        c6.innerHTML = datas.Temperature;

        //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 = new Date(d.FuellingStartTime).getFullYear() + "-" + Pad(new Date(d.FuellingStartTime).getMonth() + 1, 2) + "-" + Pad(new Date(d.FuellingStartTime).getDate(), 2);

        //    var c2 = r.insertCell(r.cells.length);

        //    c2.innerHTML = d.Volume;

        //    var c3 = r.insertCell(r.cells.length);

        //    c3.innerHTML = d.TcVolume;

        //    var c4 = r.insertCell(r.cells.length);

        //    c4.innerHTML = d.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;

        //    var c5 = r.insertCell(r.cells.length);

        //    c5.innerHTML = d.WaterVolume;

        //    var c6 = r.insertCell(r.cells.length);

        //    c6.innerHTML = d.Temperature;

        //});

        //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 = "";

        }

    }

    //})

</script>