<%@ page language="java" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>水泵数据</title>
    <link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/sweetalert.css">
    <link type="text/css" rel="stylesheet" href="css/rmc.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" style="padding: 15px 0px;">
            <div class="form-inline">
                <select id="acuList" class="form-control select-gray">
                </select>
            </div>

            <div id="treeview" style="height: 650px; overflow: auto;">
                <ul class="list-group" id="devList"></ul>
            </div>
        </div>
        <div class="col-md-9" style="padding: 15px 0px;">
            <!-- 监测点详情面板 -->
            <div class="panel panel-primary">
                <div class="panel-heading blue-light-import">资产信息</div>
                <div class="panel-body container-fluid">
                    <div class="row">
                        <span class="col-md-3">所在分区：<span id="partition"></span></span>
                        <span class="col-md-4">资产代码：<span id="assetCode"></span></span>
                        <span class="col-md-5">资产名称：<span id="assetName"></span></span>
                    </div>
                </div>
            </div>

            <!-- 最新值面板 -->
            <div class="panel panel-primary">
                <div class="panel-heading blue-light-import">当前值</div>
                <div class="panel-body container-fluid">
                    <div class="row">
                        <span class="col-md-3">
                            时间：<span id="logtime"></span>
                        </span>
                        <span class="col-md-3">
                            水泵1状态：<span id="run1"></span>
                        </span>
                        <span class="col-md-3">
                            水泵2状态：<span id="run2"></span>
                        </span>
                        <span class="col-md-3">
                            <button class="btn but-blue" id="reload">刷新</button>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 命令面板 -->
            <div class="panel panel-primary">
                <div class="panel-heading blue-light-import">远程指令</div>
                <div class="panel-body container-fluid">
                    <div class="row">
                        <span class="col-md-3"><button class="btn but-blue" id="rtStatus">查询实时状态</button></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/sweetalert.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        initACUList();

        $("#rtStatus").on("click", remoteSbStatus);
        $("#reload").on("click", reloadSbStatus);
    });

    // 初始化ACU列表
    function initACUList() {
        $.getJSON("res/acuList.js", function(list) {
            list.forEach(function(item) {
                var opt = $("<option>").attr("value", item.value).text(item.text);
                $("#acuList").append(opt);
            });
        });

        $("#acuList").on("change", function () {
            var acu = $("#acuList").val();
            initDeviceList(acu);
        });

        initDeviceList("ACU001");
    }

    // 查询设备列表
    function initDeviceList(acu) {
        $.ajax({
            url: "api/getPgDevice.action",
            data: {params: "devType=潜污泵控制箱&partition=" + acu},
            dataType: "json",
            type: "POST",
            success: function(response) {
                $("#devList").empty();
                for (var i = 0; i < response.data.length; i++) {
                    var dev = response.data[i];
                    var liItem = $("<li>").addClass("list-group-item").addClass("item-md").text(decodeURIComponent(dev.assetName));
                    liItem.attr("data-assetCode", dev.assetCode).attr("data-partition", decodeURIComponent(dev.partition));
                    $("#devList").prepend(liItem);

                    // 绑定点击事件
                    liItem.on("click", function() {
                        $(".active").removeClass("active");
                        $(this).addClass("active");

                        $("#partition").text($(this).attr("data-partition"));
                        $("#assetCode").text($(this).attr("data-assetCode"));
                        $("#assetName").text($(this).text());

                        reloadSbStatus();
                    });
                }
            }
        });
    }

    function remoteSbStatus() {
        var zcbh = $("#assetCode").text();
        if (zcbh != "") {
            $.ajax({
                url: "remote/readSbStatus.action",
                data: {zcbh: zcbh},
                type: "json",
                type: "POST",
                success: function (response) {
                    swal({
                        title: "指令已下发",
                        text: "请等待自动刷新或5秒后手动刷新",
                        type: "info",
                        showConfirmButton: false,
                        timer: 2000
                    });
                    setTimeout(reloadSbStatus, 5000);
                }
            });
        } else {
            alert("资产编号为空");
        }
    }

    // 向数据库查询最新值
    function reloadSbStatus() {
        var zcbh = $("#assetCode").text();
        if (zcbh != "") {
            $.ajax({
                url: "remote/readSbStatusFromDB.action",
                data: {zcbh: zcbh},
                type: "json",
                type: "POST",
                success: function (response) {
                    var resObj = JSON.parse(response);
                    if (resObj != null && resObj.sbStat != null) {
                        $("#run1").text(decodeURIComponent(resObj.sbStat.run1));
                        $("#run2").text(resObj.sbStat.run2 == null ? "-" : decodeURIComponent(resObj.sbStat.run2));
                        $("#logtime").text(resObj.sbStat.time);
                    } else {
                        $("#run1").text("-");
                        $("#run2").text("-");
                        $("#logtime").text("-");
                    }
                }
            });
        } else {
            alert("资产编号为空");
        }
    }
</script>
</body>
</html>
