bcoh
/
index2.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>基于区块链的个人健康跟踪应用</title>

    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.ico">

    <!-- Core Stylesheet -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/static-style.css" rel="stylesheet">

    <!-- Responsive CSS -->
    <link href="/css/details/responsive.css" rel="stylesheet">

    <!-- Tips.css -->
    <link href="/css/others/tips.css" rel="stylesheet">
</head>

<body>
    <!-- Preloader Start -->
    <div id="preloader">
        <div class="loader">
            <span class="inner1"></span>
            <span class="inner2"></span>
            <span class="inner3"></span>
        </div>
    </div>

    <div class="default-load" id="user"></div>

    <div class="default-load" id="header"></div>

    <div class="default-load" id="breadcumb">
        <h2>信息查询与录入</h2>
        <nav>
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item" id="MSPID"></li>
            </ol>
        </nav>
    </div>

    <br>
    <p style="word-break:break-all;" id="hight">正在获取节点高度</p>
    <br>

    <div class="row" style="width: 100%;">
        <div class="navbar-nav col-12 col-sm-4 col-md-3">
            <div class="btn-group dropright" style="margin-left: 20px; margin-bottom: 10px;">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="btn-1">
                    查询全部
                </button>
            </div>
            <div class="btn-group dropright" style="margin-left: 20px; margin-bottom: 10px;">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="btn-2">
                    查询个人
                </button>
            </div>
            <div class="btn-group dropright" style="margin-left: 20px; margin-bottom: 10px;">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="btn-3">
                    查询个人历史记录
                </button>
            </div>
            <div class="btn-group dropright" style="margin-left: 20px; margin-bottom: 10px;">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="btn-4">
                    添加个人信息
                </button>
            </div>
            <div class="btn-group dropright" style="margin-left: 20px; margin-bottom: 10px;">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="btn-5">
                    修改个人信息
                </button>
            </div>
        </div>

        <div id="bg" class="radio col-12 col-sm-8 col-md-9" style="border:1pt dashed #c3c3c3; float: left; ">
            <p style="font-size:24px">操作面板</p>
            </br>
            <label id="text1" for="name" style="display: none;"></label>
            <input type="text" class="form-control" name="args" id="arg1" style="display: none;" placeholder="123">
            </br>
            <label id="text2" for="name" style="display: none;"></label>
            <input type="text" class="form-control" name="args" id="arg2" style="display: none;" placeholder="">
            <br><br><br>
            <button type="submit" id="submit" class="btn fancy-btn fancy-active">查询全部</button>
            <br><br><br><br>
        </div>
    </div>
    <p style="font-size:24px; margin-top: 50px; margin-left: 50px; margin-right: 50px;">结果显示：</p><br>
    <div style="word-break:break-all; margin-left: 50px; margin-right: 50px; margin-bottom: 50px;" id="resule"></div>

    <div class="default-load" id="footer"></div>
    <div class="tips"></div>

    <!-- jQuery-3.3.1 js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <!-- jQuery-cookie-1.4.1 js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <!-- Popper-1.14.3 js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.3/esm/popper.js" type="module"></script>
    <!-- Bootstrap-4.1.3 js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
    <!-- WOW-1.1.2 js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
    <!-- All Plugins js -->
    <script src="/js/others/plugins.js"></script>
    <!-- Active JS -->
    <script src="/js/active.js"></script>
    <!-- USER JS -->
    <script src="/js/user.js"></script>
    <!-- MD5 JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <!-- Tips JS -->
    <script src="/js/others/tips.js"></script>

    <script>
        $(".dropdown-toggle").click(function () {
            $(".dropdown-toggle").animate({left:'0px'}, "fast");
            $(this).animate({left:'20px'});
        });

        function display(num, text1, text2) {
            if (num == 0) {
                $("#text1").css("display", "none")
                $("#arg1").css("display", "none")
                $("#text2").css("display", "none")
                $("#arg2").css("display", "none")
            }

            if (num == 1) {
                $("#text1").css("display", "")
                $("#arg1").css("display", "")
                $("#text2").css("display", "none")
                $("#arg2").css("display", "none")

                $("#arg1").attr("placeholder", "请输入 " + text1)
                $("#text1").text(text1)
            }

            if (num == 2) {
                $("#text1").css("display", "")
                $("#arg1").css("display", "")
                $("#text2").css("display", "")
                $("#arg2").css("display", "")

                $("#arg1").attr("placeholder", "请输入 " + text1)
                $("#arg2").attr("placeholder", "请输入 " + text2)
                $("#text1").text(text1)
                $("#text2").text(text2)
            }
        }
        $(".dropdown-toggle").on("click", function (a) {
            $("#submit").text($(this).text().trim())

            switch ($(this).text().trim()) {
                case ("查询全部"):
                    display(0)
                    break;
                case ("查询个人"):
                    display(1, "姓名")
                    break;
                case ("查询个人历史记录"):
                    display(1, "姓名")
                    break;
                case ("添加个人信息"):
                    display(2, "姓名", "数值")
                    break;
                case ("修改个人信息"):
                    display(2, "姓名", "数值")
                    break;
            }
        })

        var xmlHttp = GetXmlHttpObject()

        var source = new EventSource("/action/chain/chainIF.php");

        source.onmessage = function (event) {
            try {
                var ret = event.data

                var data = eval('(' + ret.substring(ret.indexOf("info:") + 5) + ')');
                $("#hight").html("区块高度: " + data.height);
            } catch (e) {
                $("#hight").html(event.data);
            }
        };

        function clock() {
            if ($("#MSPID").html() == "") {
                xmlHttp.onreadystatechange = MSPIDReader;
                xmlHttp.open("GET", "/action/chain/MSPIDReader.php", true);
                xmlHttp.send(null);
            }
        }

        var table_title
        var int_id = window.setInterval("clock()", 500)
        clock()

        $("#submit").click(function () {
            var tag = ($("#submit").text().indexOf("查询") >= 0) ? "query" : "invoke"
            var args = "";

            switch ($("#submit").text()) {
                case ("查询全部"):
                    table_title = "姓名"
                    args = '"QueryAllStates"'
                    break;
                case ("查询个人"):
                    args = '"QueryState","' + $("#arg1").val() + '"'
                    break;
                case ("查询个人历史记录"):
                    table_title = "修改时间"
                    args = '"QueryHistory","' + $("#arg1").val() + '"'
                    break;
                case ("添加个人信息"):
                    args = '"CreatePerson","' + $("#arg1").val() + '","' + $("#arg2").val() + '"';
                    break;
                case ("修改个人信息"):
                    args = '"ChangePersonState","' + $("#arg1").val() + '","' + $("#arg2").val() + '"';
                    break;
            }

            var url = "/action/chain/handler.php";
            url += "?tag=" + tag;
            url += "&args=" + args;
            url += "&sid=" + Math
                .random();

            xmlHttp.onreadystatechange = stateChanged;
            xmlHttp.open("GET", url, true);
            xmlHttp.send(null);
        });

        function stateChanged() {
            if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                try {
                    var ret = eval('(' + xmlHttp.responseText + ")")
                    try {
                        if (xmlHttp.responseText == "[]") {
                            $('.tips').initTips({
                                title: '警告',
                                message: "<p>暂无数据</p>",
                                space: 10,
                                firstSpace: 8,
                                margin: 15,
                                toastType: 'error',
                                width: 400,
                            });

                            return
                        }

                        var html =
                            '<table class="table"><thead><tr><th>' + table_title +
                            '</th><th>数值</th><th>操作者</th></tr></thead><tbody>'
                        for (var i in ret)
                            html = html + "<tr><td>" + ret[i].Key + "</td><td>" + ret[i]
                            .Record.state + "</td><td>" + ret[i].Record.orgid + "</td></tr>";
                        $("#resule").html(html + "</tbody></table>");
                    } catch (e) {
                        try {
                            $("#resule").html(ret.state);
                        } catch (e) {
                            $("#resule").html(xmlHttp.responseText);
                        }
                    }
                } catch (e) {
                    $('.tips').initTips({
                        title: xmlHttp.responseText.indexOf("invoke successful") >= 0 ? '提示' : '警告',
                        message: "<p>" + ((xmlHttp.responseText.indexOf("invoke successful") >= 0) ?
                            ('<p>success</p>') : (xmlHttp.responseText.slice(xmlHttp.responseText
                                .indexOf(
                                    '"') + 1,
                                xmlHttp.responseText
                                .lastIndexOf('"')))) + "</p>",
                        space: 10,
                        firstSpace: 8,
                        margin: 15,
                        toastType: xmlHttp.responseText.indexOf("invoke successful") >= 0 ? 'success' : 'error',
                        width: 400,
                    });
                }
            }
        }

        function MSPIDReader() {
            if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                var ret = xmlHttp.responseText
                $("#MSPID").html("当前分级： " + ret);
                clearInterval(int_id);
            }
        }
    </script>

</body>