shuochen
/
apacsys-vaporrecoverymonitor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
							<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <style>
        #tb {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #tb td,
        #tb th {
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }

        #tb th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        #tb tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }

        #tb tr.undefined td {
            color: #000000;
            background-color: rgb(187, 187, 187);
        }

        #tb tr.exceed td {
            color: #000000;
            background-color: rgb(255, 226, 209);
        }
    </style>

    <style>


    </style>

    <link href="mystyle.css" rel="stylesheet" type="text/css" />

    <style>


        #mycanvas{
            position: absolute;
            display:none;
            width:400px;
            height:300px;
            left:20%;
            z-index:20;
        }
        
        #popBox{
            position: absolute;
            display:none;
            width:400px;
            height:300px;
            left:15%;
            top:5%;
            z-index:11;
            background:rgb(255, 255, 255); 
        }
        
        #popLayer{
            width:100%;
            height:100%;
            position: absolute;
            display:none;
            left:0;
            top:0;
            z-index:10;
            background:#DCDBDC;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
            line-height:56px;

            
        }

        #si,#sn
        {
            margin-left: 12%;
        }

        #ok
        {
            margin-left: 30%;
        }

        #cancel
        {
            margin-left: 10%;
        }
        
        </style>

</head>

<body style="background-color: rgb(255, 255, 255)" onload="get_()">
    <form method="POST">
        油站标识:
        <input type="text" name="stationid" id="stationid">
        油站名称:
        <input type="text" name="stationname" id="stationname">
        <input type="button" class="query" id="query" value="查询" onclick="get_()">
        <input type="button" class="add" id="add" value="新增" onclick="add_box('/api/addstation')">
        <input type="button" class="update" id="update" value="更新" onclick="update_('/dbinterface/stationinfo')">
        <input type="button" class="delete" id="delete" value="删除" onclick="delete_('/dbinterface/stationinfo')">
    </form>


    <table>
        <tr>
            <td style="background-color:#ffffff;height:200px;width:3000px;" valign="top">
                <table class="table" id="tb" border="1">
                    <thead>
                        <tr>
                            <th>index</th>
                            <th>油站名称</th>
                            <th>油站id</th>
                        </tr>
                    </thead>

                    <tbody id="tbMain"></tbody>
                </table>

            </td>
        </tr>

    </table>


    <div id="popLayer">

    </div>
    <div id="popBox">
        <div style="text-align:center; color: slateblue">新增站点</div>
        <br>
        <br>


        <!--<form method="POST" class="add">-->
        <p name="si" id="si">油站标识: <input type="text" name="stationid_a" id="stationid_a"></p>
        <p name="sn" id="sn">油站名称: <input type="text" name="stationname_a" id="stationname_a"></p>
        <br>
        <br>
        <input input type="submit" class="ok" id="ok" value="确定" onclick="add_('/api/addstation')">
        <input type="button" class="cancel" id="cancel" value="取消" onclick="closeBox()">
        <!--</form>-->

        <!--
        <div  style="text-align:right"><a href="javascript:void(0)" onclick="closeBox()">关闭</a></div>
 -->

    </div>

    <div>
        <canvas id='mycanvas'></canvas>


    </div>

    <div id='waiting'>
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>

    <script>
        function check() {
            // var va =document.getElementById("stationid_a");
            // va.setCustomValidity("油站标识不能为空！");
            // va =document.getElementById("stationname_a");
            // va.setCustomValidity("用户名不能为空！");

            var Control = document.querySelector("#stationid_a");
            Control.setCustomValidity("油站标识不能为空！");
            Control = document.querySelector("#stationname_a");
            Control.setCustomValidity("用户名不能为空！");
        }
    </script>

    <script>
        function ftest() {
            // document.getElementById("update").type = "hidden";

            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var user = xmlhttp.responseText;
                    if (user != "admin") {
                        document.getElementById("add").type = "hidden";
                        document.getElementById("update").type = "hidden";
                        document.getElementById("delete").type = "hidden";
                    }
                    //var data = JSON.parse(xmlhttp.responseText);


                }
            }
            xmlhttp.open("POST", "/getuser", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xmlhttp.send('');


        }
    </script>

    <script>
        // if (window.showModalDialog == undefined) {
        //     //alert("初始化的时候,判断window.showModalDialog是否存在")
        //     window.showModalDialog = function (url, mixedVar, features) {
        //         window.hasOpenWindow = true;
        //         if (mixedVar) var mixedVar = mixedVar;
        //         if (features) var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\:/g, "=");
        //         window.myNewWindow = window.open(url, "_blank", features);
        //     }
        // }

    </script>

    <script type="text/javascript">
        function popBox() {
            var popBox = document.getElementById('popBox');
            var popLayer = document.getElementById('popLayer');

            //popLayer.style.width = document.body.scrollWidth + "px";
            //popLayer.style.height = document.body.scrollHeight + "px";

            popLayer.style.display = "block";
            popBox.style.display = "block";
        }//end func popBox()

        function closeBox() {
            var popBox = document.getElementById('popBox');
            var popLayer = document.getElementById('popLayer');

            popLayer.style.display = "none";
            popBox.style.display = "none";

        }//end func closeBox()

    </script>


    <script>
        function get_() {
            // document.getElementById("update").type = "hidden";

            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var rtn = xmlhttp.responseText;

                    var json = JSON.parse(xmlhttp.responseText);

                    var data = json.data;
                    var s = '';
                    for (var i = 0; i < data.length; i++) {
                        s += '<td>' + (i + 1) + '</td>'
                            + '<td>' + data[i]['name'] + '</td>'
                            + '<td>' + data[i]['id'] + '</td>'
                            + '</tr>'
                    }
                    var t = document.getElementById("tbMain");
                    t.innerHTML = s;

                    var w = document.getElementById('waiting');
                    w.style.display = "none";
                    //w = document.getElementById('mycanvas');
                    //w.style.display = "none";
                    // $(waiting)
                }
            }


            // alert(document.getElementById('stationid').innerHTML)

            var Control = document.querySelector("#stationid");
            var id = Control.value;

            var url;
            if (id == '') {
                url = '/api/getallstation';
            }
            else {
                url = '/api/getstation/' + id;
            }

            xmlhttp.open("POST", url, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //xmlhttp.setRequestHeader("Content-Type","application/json");

            var json = {};

            var data = JSON.stringify(json);
            xmlhttp.send(data);

            var t = document.getElementById("tbMain");
            t.innerHTML = '';
            
            var w = document.getElementById('waiting');
            w.style.display = "block";

            // w = document.getElementById('mycanvas');
            // w.style.display = "block";

        }


        function AddIfNotExisted(id, pxmlhttp, pjson) {
            // document.getElementById("update").type = "hidden";

            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var rtn = xmlhttp.responseText;

                    // alert(xmlhttp.responseText);
                    var json = JSON.parse(xmlhttp.responseText);

                    var len = json.data.length;
                    if (len >= 1) {
                        alert("用户标识已存在！")
                    } else {

                        pxmlhttp.send(pjson);
                    }

                }
            }

            url = '/api/getstation/' + id;

            xmlhttp.open("POST", url, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            var json = {};
            var data = JSON.stringify(json);
            xmlhttp.send(data);
        }


        function add_box(url) {
            popBox();
        }

        function add_(url) {
            // document.getElementById("update").type = "hidden";

            //check();

            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var rtn = xmlhttp.responseText;
                    if (JSON.parse(rtn).success == 'true') {
                        alert('添加用户成功！')
                    }

                    //var data = JSON.parse(xmlhttp.responseText);

                }
            }
            xmlhttp.open("POST", url, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //xmlhttp.setRequestHeader("Content-Type","application/json");


            var Control = document.querySelector("#stationid_a");
            var id = Control.value.trim();
            if (id == '') {
                alert("油站标识不能为空！")
                return false;
            }

            Control = document.querySelector("#stationname_a");
            var name = Control.value.trim();
            if (name == '') {
                alert("油站名称不能为空！")
                return false;
            }


            var json = {};

            var data = {};
            data['name'] = name
            data['id'] = id;

            json['data'] = data;

            json = JSON.stringify(json);
            //xmlhttp.send(json);


            AddIfNotExisted(id, xmlhttp, json);


        }

    </script>


    <script>
        var $ = {};

        $.Particle = function (opt) {
            this.radius = 7;
            this.x = opt.x;
            this.y = opt.y;
            this.angle = opt.angle;
            this.speed = opt.speed;
            this.accel = opt.accel;
            this.decay = 0.01;
            this.life = 1;
        };

        $.Particle.prototype.step = function (i) {
            this.speed += this.accel;
            this.x += Math.cos(this.angle) * this.speed;
            this.y += Math.sin(this.angle) * this.speed;
            this.angle += $.PI / 64;
            this.accel *= 1.01;
            this.life -= this.decay;

            if (this.life <= 0) {
                $.particles.splice(i, 1);
            }
        };

        $.Particle.prototype.draw = function (i) {
            $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ($.tick + (this.life * 120)) + ', 100%, 60%, ' + this.life + ')';
            $.ctx.beginPath();
            if ($.particles[i - 1]) {
                $.ctx.moveTo(this.x, this.y);
                $.ctx.lineTo($.particles[i - 1].x, $.particles[i - 1].y);
            }
            $.ctx.stroke();

            $.ctx.beginPath();
            $.ctx.arc(this.x, this.y, Math.max(0.001, this.life * this.radius), 0, $.TWO_PI);
            $.ctx.fill();

            var size = Math.random() * 1.25;
            $.ctx.fillRect(~~(this.x + ((Math.random() - 0.5) * 35) * this.life), ~~(this.y + ((Math.random() - 0.5) * 35) * this.life), size, size);
        }

        $.step = function () {
            $.particles.push(new $.Particle({
                x: $.width / 2 + Math.cos($.tick / 20) * $.min / 2,
                y: $.height / 2 + Math.sin($.tick / 20) * $.min / 2,
                angle: $.globalRotation + $.globalAngle,
                speed: 0,
                accel: 0.01
            }));

            $.particles.forEach(function (elem, index) {
                elem.step(index);
            });

            $.globalRotation += $.PI / 6;
            $.globalAngle += $.PI / 6;
        };

        $.draw = function () {
            $.ctx.clearRect(0, 0, $.width, $.height);

            $.particles.forEach(function (elem, index) {
                elem.draw(index);
            });
        };

        $.init = function () {
            //var Control = document.querySelector("#canvas");
            $.canvas = document.getElementById('mycanvas');
            // $.canvas.style.zIndex = 20;
            //$.canvas.style.position = 'absolute';
            //$.canvas = document.createElement('canvas');
            //document.createAttribute("id:'waiting");
            // $.canvas.setAttribute("id","waiting");
            // $.canvas = document.getElementById('canvas');
            // $.canvas.id = 'waiting';

            //$.canvas.style = '{ position: absolute; display:none; width:400px;height:300px;left:20%; z-index:20;}';
            $.ctx = $.canvas.getContext('2d');
            $.ctx.globalCompositeOperation = 'source-over';

            $.width = 200;
            $.height = 200;
            $.canvas.width = $.width * window.devicePixelRatio;
            $.canvas.height = $.height * window.devicePixelRatio;
            $.canvas.style.width = $.width + 'px';
            $.canvas.style.height = $.height + 'px';
            $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
            $.min = $.width * 0.5;
            $.particles = [];
            $.globalAngle = 0;
            $.globalRotation = 0;
            $.tick = 0;
            $.PI = Math.PI;
            $.TWO_PI = $.PI * 2;
            $.ctx.globalCompositeOperation = 'lighter';
            document.body.appendChild($.canvas);
            $.loop();
        };

        $.loop = function () {
            requestAnimationFrame($.loop);
            $.step();
            $.draw();
            $.tick++;
        };

        $.init();
    </script>
</body>

</html>