bzdadmin
/
ColdP_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
							<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
    <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
    <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
    <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
               <a><cite>宝智达</cite></a>
            </span>
    <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row">
        <!-- // 传感器 选择-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" οnsubmit="return false;">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input value="" type="text" id="D_T_sn" name="D_T_sn" placeholder="请输入 SN"
                                   autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input value="" type="text" id="D_Name" name="D_Name" placeholder="请输入 传感器名称"
                                   autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select id="Class_1" name="Class_1">
                                <option value=0>所有分类</option>
                                {{range $index, $elem := .Class_List}}
                                <option value={{$elem.Id}}>{{$elem.T_name}}
                                </option>

                                {{end}}


                            </select>
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <div class="layui-btn layui-btn-normal"
                                 onclick="get_DeviceSensor_list(0)">
                                <i class="layui-icon">&#xe615;</i></div>
                        </div>
                    </form>
                    <hr>
                </div>
                <div class="layui-card-body " style="margin-top: -20px">
                    <div id="DeviceSensor_list" style="width: 98%; overflow: hidden;">
                        <div style="color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px">加载中...</div>
                        <!--                        <div class="layui-col"-->
                        <!--                             style="height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;">-->
                        <!--                            <img style="float: left;width: 50px;margin: 0px 10px" src="https://osscold.baozhida.cn/images/温湿度传感器-1.png"-->
                        <!--                                 height="50"-->
                        <!--                                 width="40"/>-->
                        <!--                            <div style="float: left;">-->
                        <!--                                <div style="margin-top: 4px;font-size: 14px">士大夫撒地方递四方速递</div>-->
                        <!--                                <div style="margin-top: -3px;font-size: 12px">SN：KF20210510143443 [1]</div>-->
                        <!--                            </div>-->
                        <!--                            <div class="layui-card-header"-->
                        <!--                                 style="float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF">-->
                        <!--                                》-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>
                <div class="layui-card-body " >
                    <div style="height: 100px">

                        <div >
                            <span id="T_time" style="font-size: 14px">更新时间：等待同步中.....</span><img style="margin-left: 2px"
                                                                                                 src="https://osscold.baozhida.cn/images/等待.gif" height="20"
                                                                                                 width="20"/>
                        </div>
                        <div class="layui-card-body ">
                            <div class="page">
                                <div id="DeviceSensor_list_Pages">


                                    <!--                                    <a class="prev" href="">&lt;&lt;</a>-->

                                    <!--                                    <a class="num" href="">1222</a>-->

                                    <!--                                    <span class="current">111</span>-->

                                    <!--                                    <a class="num" href="">444</a>-->
                                    <!--                                    <a class="next" href="">&gt;&gt;</a>-->

                                </div>

                            </div>
                            <div style="color: #1E9FFF;text-align: center" id="DeviceSensor_list_Pages_x"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


</div>

</div>
</body>
<script>
    //获取GET
    function getPar(par) {
        //获取当前URL
        var local_url = document.location.href;
        //获取要取得的get参数位置
        var get = local_url.indexOf(par + "=")
        ;
        if (get == -1) {
            return false;
        }
        //截取字符串
        //截取字符串
        var get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        var nextPar = get_par.indexOf("&")
        ;
        if (nextPar != -1) {
            get_par = get_par.slice(0, nextPar);
        }
        return get_par;
    }

    function timestampToTime(timestamp) {
        if(timestamp == undefined){
            return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
        }
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }
    function dateChangeFormat(format, date) {
        date = new Date(date);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
            'H+': date.getHours().toString(),
            'M+': date.getMinutes().toString(),
            'S+': date.getSeconds().toString(),
        };
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format;
    }
    function dateChangeFormat_x(format, date) {
        date = new Date(date*1000);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
            'H+': date.getHours().toString(),
            'M+': date.getMinutes().toString(),
            'S+': date.getSeconds().toString(),
        };
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format;
    }
    // 时间比较
    function dateChangeFormat_xiangcha( date) {
        console.log("===========")
        a_t = (new Date(dateChangeFormat('YYYY-mm-dd HH:MM:SS', date)).getTime()/1000)
        b_t = ((new Date()) / 1000)

        console.log("a_t:",a_t,"b_t:",b_t,">",b_t - a_t)
        return  parseInt(b_t - a_t) ;
    }

    function To_str(data) {
        if(data == undefined){
            return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
        }
        if(data+"".length > 5){
            return data+"".slice(0,5);
        }
        return data;
    }
    function To_unm(data) {
        if(data == undefined){
            return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
        }

        return data.toFixed(1);
    }

    function To_time(data) {
        xx = dateChangeFormat_xiangcha(data)
        if(xx > Out_time){
            return "N";
        }
        return xx;
    }
    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;


        });

    var T_name = ""
    var T_sn = ""
    var T_class_id = 0

    var T_id = 0
    var T_sn_T_id = ""
    var Time_start = ""
    var Time_end = ""

    var T_sn_list = []
    var DeviceSensor_lite = []
    var DeviceSensor_data  = []
    var timestamp_V = (new Date()) / 1000;
    var Out_time = 999;

    /// ---------------   传感器列表
    // 页面 加载完成后执行
    window.onload = function () {
        console.log("页面 加载完成后执行")
        setInterval(function(){
            //要执行的代码
            // console.log("setInterval=====  1S")
            xx = $("span[name='time_x']")
            for (let i = 0; i < xx.length; i++) {
                if(xx[i].innerHTML == "N"){
                    continue;
                }
                if(xx[i].innerHTML > Out_time ){
                    xx[i].innerHTML = "N"
                }

                xx[i].innerHTML = parseInt(xx[i].innerHTML) + 1

            }

        },1000);
    }


    function get_DeviceSensor_list(page) {
        T_sn = $("#D_T_sn").val();
        T_name = $("#D_Name").val();
        T_class_id = $("#Class_1").val();
        $.ajax({
            type: 'POST',
            url: 'Device_Sensor_List',//发送请求
            data: {
                User_tokey: $.cookie("User_tokey"),
                T_sn: T_sn,
                T_name: T_name,
                T_class_id: parseInt(T_class_id),
                page: page,
                page_z: 30,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    $('#DeviceSensor_list').html("")
                    $('#DeviceSensor_list_Pages').html("")
                    $('#DeviceSensor_list_Pages_x').html("")
                    DeviceSensor_lite = result.Data.DeviceSensor_lite
                    if (DeviceSensor_lite.length == 0) {
                        $('#DeviceSensor_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有设备</div>")
                        return
                    }
                    Add_DeviceSensor_list(result.Data.DeviceSensor_lite) // 列表
                    Add_DeviceSensor_list_Pages(result.Data.Pages) // 分页
                    $('#DeviceSensor_list_Pages_x').append("页数:" + result.Data.Page + "/" + result.Data.Page_size + "  总数：" + result.Data.Num);

                } else {

                }
            }
        });
        return false
    }
    function Add_DeviceSensor_list(data) {
        $('#DeviceSensor_list').html("")
        for (let i = 0; i < data.length; i++) {

            if(T_sn_list.indexOf(data[i].T_sn) == -1 ){
                websocket.send("{\"Sn\":\"" + data[i].T_sn + "\"}");
                T_sn_list.push(data[i].T_sn)
            }
            src_img = "温湿度传感器-1.png"
            Ds = data[i]
            x_ = dateChangeFormat_xiangcha(Ds.T_time)
            outtime = 60 * 5

            if(( 0 ==  Ds.T_Tlower && 0 == Ds.T_RHlower) && ( 0 ==  Ds.T_Tupper && 0 == Ds.T_RHupper) ){
                if(x_ < outtime)  {
                    // 传感器正常
                    src_img = "温湿度传感器-1.png"
                }else {
                    // 传感器超时
                    src_img = "温湿度传感器-2.png"
                }
            }else if (x_ < outtime) {
                if(Ds.T_t <  Ds.T_Tlower || Ds.T_rh < Ds.T_RHlower || Ds.T_t >  Ds.T_Tupper || Ds.T_rh > Ds.T_RHupper ){
                    // 传感器 超标
                    src_img = "温湿度传感器-3.png"
                }else {
                    // 传感器正常
                    src_img = "温湿度传感器-1.png"
                }
            }else {
                // 传感器超时
                src_img = "温湿度传感器-2.png"
            }

            $('#DeviceSensor_list').append("" +
                "<div name='"+data[i].T_sn+"' class=\"layui-col-xs5 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"height: 104px; \" >\n" +
                "    <div  name='"+data[i].T_id+"' style=\"margin: 4px;height: 96px; border-radius:5px;background-color:#f1f1f1;\"\n" +
                "         >\n" +
                "        <div class=\"layui-row\" style=\"text-align: center;font-size: 15px;background-color: #8ecbff;border-radius:5px;\">\n" +
                "            <span style=\"float: right;background-color: #AFFF005E;padding: 0px 2px;border-radius:5px;\" name='time_x' >"+To_time(data[i].T_time)+"</span>"+To_str(data[i].T_name)+"\n" +
                "        </div>\n" +
                "        <div class=\"layui-row\" >\n" +
                "            <div class=\" layui-col-md4 \">\n" +
                "                <img  name='T_img' src=\"https://osscold.baozhida.cn/images/"+src_img+"\" height=\"50\" width=\"50\"/>\n" +
                "            </div>\n" +
                "            <div class=\"layui-col-md8\" style=\"margin-top: 3px;white-space:nowrap\">\n" +
                "                <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
                "                    <span name='T_t' style=\"width: 48px;float: left\">"+To_unm(data[i].T_t)+"℃</span>\n" +
                "                    <span name='T_T' style=\"font-size: 10px;float: left;margin-top: 1px;\">"+data[i].T_Tlower+"~"+data[i].T_Tupper+"</span>\n" +
                "                </div>\n" +
                "                <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
                "                    <span name='T_rh' style=\"width: 48px;float: left\">"+To_unm(data[i].T_rh)+"%</span>\n" +
                "                    <span name='T_RH' style=\"font-size: 10px;float: left;margin-top: 1px;\">"+data[i].T_RHlower+"~"+data[i].T_RHupper+"</span>\n" +
                "                </div>\n" +
                "            </div>\n" +
                "            <div  class=\" layui-col-md12 \" style=\"padding-top: -2px;font-size: 16px;text-align: center;margin-top: -2px;border-top:1px solid  #000\">\n" +
                "              <span name='T_time'>"+dateChangeFormat('YYYY-mm-dd HH:MM:SS', data[i].T_time)+"</span>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "</div>")
        }

    }
    function Add_DeviceSensor_list_Pages(Pages) {
        for (let i = 0; i < Pages.length; i++) {
            elem = Pages[i]
            switch (elem.A) {
                case 1:
                    $('#DeviceSensor_list_Pages').append("<a class=\"prev\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&lt;&lt;</a>\n");
                    break;
                case 2:
                    $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
                    break;
                case 3:
                    $('#DeviceSensor_list_Pages').append("<span class=\"current\">" + elem.V + "</span>\n");
                    break;
                case 4:
                    $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
                    break;
                case 5:
                    $('#DeviceSensor_list_Pages').append("<a class=\"next\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&gt;&gt;</a>\n");
                    break;
            }
        }
    }
    function Pu_DeviceSensor_list_g(sn,data) {

        for (let i = 0; i < data.length; i++) {
            // console.log(i," "+data[i].name)
            sn_ = $("div[name='"+sn+"']")
            // console.log("sn_:",sn_.length)
            if(sn_.length > 0){
                id_ = sn_.find("div[name='"+data[i].id+"']")
                // console.log("id_:",sn_.length)
                if(id_.length > 0){
                    src_img = "温湿度传感器-1.png"
                    Ds = data[i]
                    x_ = dateChangeFormat_xiangcha(dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', data[i].UT))
                    outtime = 60 * 5

                    if(( 0 ==  Ds.Tlower && 0 == Ds.RHlower) && ( 0 ==  Ds.Tupper && 0 == Ds.RHupper) ){
                        if(x_ < outtime)  {
                            // 传感器正常
                            src_img = "温湿度传感器-1.png"
                        }else {
                            // 传感器超时
                            src_img = "温湿度传感器-2.png"
                        }
                    }else if (x_ < outtime) {
                        if(Ds.T <  Ds.Tlower || Ds.RH < Ds.RHlower || Ds.T >  Ds.Tupper || Ds.RH > Ds.RHupper ){
                            // 传感器 超标
                            src_img = "温湿度传感器-3.png"
                        }else {
                            // 传感器正常
                            src_img = "温湿度传感器-1.png"
                        }
                    }else {
                        // 传感器超时
                        src_img = "温湿度传感器-2.png"
                    }

                    id_.find("img")[0].src = "https://osscold.baozhida.cn/images/"+src_img


                    id_.find("span")[0].innerHTML = "0"
                    id_.find("span")[1].innerHTML = To_unm(data[i].T)+"℃"
                    id_.find("span")[2].innerHTML = data[i].Tlower+"~"+data[i].Tupper
                    id_.find("span")[3].innerHTML = To_unm(data[i].RH)+"%"
                    id_.find("span")[4].innerHTML = data[i].RHlower+"~"+data[i].RHupper
                    id_.find("span")[5].innerHTML = dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', data[i].UT)

                    console.log("更新："+sn+">"+data[i].id)
                }


            }


        }

    }


    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    run_WebSocket()
    function run_WebSocket() {
        console.log("run_WebSocket");
        if ('WebSocket' in window) {
            url = window.location.host
            if(url.indexOf("127.0.0.1") != -1){
                websocket = new WebSocket("ws://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
            }else {
                websocket = new WebSocket("wss://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
            }

        } else {
            alert('Dont support websocket')
        }
    }


    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("open");
        get_DeviceSensor_list(0)
        // send("{\"Sn\":\"" + getQueryString("Sn") + "\"}")
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data)
        var obj = JSON.parse(event.data);
        // console.log(obj.type)
        // if(obj.sn != Device_Sn){
        //     console.log(obj.sn,"跳过。。  Device_Sn = ",Device_Sn)
        //     return
        // }
        // console.log(obj.sn,"进入。。  Device_Sn = ",Device_Sn)
        if (obj.type == 0 ) {
            // console.log("data.length:",obj.sensor.length)

            Pu_DeviceSensor_list_g(obj.sn,obj.sensor)

            if(obj.type == 0 ){
                $("#T_time").html("刷新时间：" + dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', obj.sensor[0].UT) + "   上传刷新间隔：" + Math.abs(timestamp_V - obj.sensor[0].UT).toFixed(0) + "s")

                // console.log(timestamp_V, obj.sensor[0].UT, "   刷新间隔：" + (timestamp_V - obj.sensor[0].UT) + "s")
                timestamp_V = obj.sensor[0].UT

            }


        }


    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("close");
        setTimeout(function(){
            //要执行的代码
            run_WebSocket();
        },2000);


    };

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("error");
        setTimeout(function(){
            //要执行的代码
            run_WebSocket();
        },2000);
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
        console.log("窗口关闭事件");
    };

    //关闭连接
    function closeWebSocket() {
        websocket.close();
        console.log("onbeforeunload");
        window.clearInterval(intervalId);
    }

    //发送消息
    function send(message) {
        websocket.send(message);
    }
</script>

</html>