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>