zoie
/
Cold_Api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
							<!doctype html>
<html>
<title>宝智达物联网平台</title>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="{{.OSS_Static}}/panel/jquery.min.js"></script>
    <script type="text/javascript" src="{{.OSS_Static}}/panel/layer/layer.js"></script>
    <script type="text/javascript" src="{{.OSS_Static}}/panel/context/context.js"></script>
    <script type="text/javascript" src="{{.OSS_Static}}/panel/drag.js"></script>
    <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/context/context.standalone.css">
    <!--右侧菜单-->
    <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/SlidePushMenus/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/SlidePushMenus/css/component.css"/>
    <script src="{{.OSS_Static}}/panel/SlidePushMenus/js/modernizr.custom.js"></script>
    <script src="{{.OSS_Static}}/panel/SlidePushMenus/js/classie.js"></script>
    <meta name="page-view-size" content="2920*1080" />
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/demo/csstoggle202003032356/style.css"/>

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .transparent {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            /*opacity: 0.5; // 模糊*/
        }

        .box {
            width: 200px;
            height: 100px;
            cursor: move;
            position: absolute;
            top: 30px;
            left: 30px;
            z-index: 99;
        }

        .box .bg {
            width: 100%;
            height: 100%;
            background-color: orange;
        }

        .box .coor {
            width: 10px;
            height: 10px;
            overflow: hidden;
            cursor: se-resize;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: red;
            z-index: 9999999999;
        }

        .box .content {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 99;
            text-align: center;
            font: bold 14px/1.5em simsun;
        }

        #debug {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 88;
            border: 1px solid #ccc;
            width: 100px;
            height: 100px;
            background: #fff;
        }

        #toolbar {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 88;
        }

    </style>

    <style>


        .help-left {
            width: 310px;
            font-family: 'microsoft YaHei';
            float: left;
            overflow-x: hidden;
            max-height: 100%;
            overflow-y: auto;
        }

        .menu {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            background-color:#FEFEFE;
            width:100%;
            float: left;
        }

        .menu:last-child {
            border-bottom: 1px solid #ccc;
        }


        .menu summary {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            outline: none;
            font-size: 14px;
            font-weight: 700;
            border-top: 1px solid #ddd;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
            cursor: pointer;
            width:100%;
            float: left;
            text-align: left;
        }


        .menu summary::-webkit-details-marker {
            display: none;

        }


        .menu .divul {

            padding: 10px 0;
            clear:left;
            width:100%;
            float: left;
            margin-left: 1px;
        }


        .menu .divulli {
            padding: 10px 0;
            width:97px;
            height: 100px;
            float: left;
            cursor: move;
        }
        .menu .divulli img {
            width:60px;
            height:60px;
            -webkit-user-select: none;
            cursor: default;
            pointer-events: none;
        }
        .menu .divulli div {
            width:97%;
            margin-top:-8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            display:inline-block
        }
        .menu .divulli pre {
            width:0px;
            height:0px;
            overflow: hidden;
        }
        .menu .divulli:hover {
            background-color: #ececec;
            /*text-decoration: underline;*/

        }

    </style>

    <style>

        #tab-header span {
            padding: 0px 10px ;
            height: 38px;
            font-size: 20px;
            border-radius: 5px;
            padding-bottom: 10px;
            padding-top: 4px;
        }

        #tab-content .dom {
            display: none;
        }


        .open_layer_layui-layer-input {
            /*display: block;*/
            width: 220px;
            height: 30px;
            margin: 0 auto;
            line-height: 30px;
            padding: 0 5px;
            border: 1px solid #ccc;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, .1) inset;
            color: #333;
            user-select: auto;
        }
        #open_layer_save_layer button {
            display: block;
            height: 38px;
            line-height: 38px;
            border: 1px solid transparent;
            padding: 0 18px;
            margin: 20px auto;
            background-color: #1E9FFF;;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
        }
        .layer_tool_tab{
            position: absolute;
            top: 10px;
            right: 10px;
            /*background:#FFF;*/
            width: 80px;
            height: 30px;
            z-index:999999999999999999999;
        }
        .layer_tool_tab button {
            height: 28px;
            line-height: 28px;
            float: left;
            border: 1px solid transparent;
            padding: 0 18px;
            margin: 1px;
            background-color: #1E9FFF;;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border-radius: 2px;
            cursor: pointer;
        }
        .layer_tool_tab  button:hover {
            background-color: #0092ff;;
            font-size: 12px;
        }

        .PanelCanvas_div{
            cursor: default;
            user-select: none;
            position: absolute;
            border: 2px dashed transparent;
            /*padding: 10px;*/
        }

        .PanelCanvas_rel_div{
            border: 2px dashed transparent;
        }

        .gridbackground { /*网格背景*/
            /*!*90度直线，100灰度，0.1透明度，5%宽度，0透明度背景*!*/
            /*background: linear-gradient(90deg, rgba(141, 128, 128, 0.1) 5%, transparent 0),*/
            /*    !*0度直线，100灰度，0.1透明度，5%宽度，0透明度背景*!*/
            /*linear-gradient(rgba(100, 100, 100, 0.1) 5%, transparent 0);*/
            /*!*横纵向宽距*!*/
            /*background-size: 20px 20px;*/
        }
    </style>


    <style>
        /*#open_layer_Class select {*/
        /*    margin-top: 2px;*/
        /*    appearance: none;*/
        /*    -webkit-appearance: none;*/
        /*    -moz-appearance: none;*/
        /*    border: 1px solid #e1e1e1;*/
        /*    border-radius: 4px;*/
        /*    height: 2.2em;*/
        /*    padding: 0 24px 0 8px;*/
        /*    font-family: inherit;*/
        /*    color: #666;*/
        /*    cursor: pointer;*/
        /*    position: relative;*/
        /*    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAASFBMVEUAAAD////Nzc3Nzc3V1dXNzc3MzMzMzMzMzMzNzc3Ozs7j4+PMzMzMzMzMzMzPz8/MzMzNzc3Ozs7Ozs7MzMzNzc3Nzc3Nzc1mbvnCAAAAGHRSTlMAAymOBrtVs9RlPgnPltxPlWwvRJzBt+CSuXutAAAAM0lEQVR4nGMYBbgALycjiGIUZEaTEBLl4WJgEOZgZcLQwybOLsbHj800bhEBFqo7cfACACvdARau8cpxAAAAAElFTkSuQmCC') no-repeat right center;*/
        /*}*/

        .layui-layer-iframe iframe {
            display: block;
            width: 100%;
            height: 600px;
        }
    </style>


</head>

<body>

<input hidden type="file" id="UpLoadFile"/>

<div id="PanelCanvas" class="gridbackground" draggable="false" style="user-select: none;height: 4000px;width: 4000px;position: absolute;left: 0px;top: 0px;background-color: #f0f0f0">


</div>


{{if le .admin_r.Admin_power  6}}
<div class="layer_tool_tab" >
    <button onclick="f_PaneView_E();">编辑</button>
</div>
<script>
    // 切换编辑
    function f_PaneView_E() {
        ToUrl = encodeURIComponent('../..'+window.location.pathname+'?T_viewid='+"{{.T_viewid}}")
        window.location.href='PaneView_E?T_viewid='+"{{.T_viewid}}"+"&ToUrl="+ToUrl
    }

</script>
{{end}}

<!--页面 加载完成后执行-->
<script>
    var OSS_Static = "{{.OSS_Static}}"
    var USER_UUID = "{{.USER_UUID}}"  // 全局 USER_UUID
    var PanelCanvas_lock = true; //区块锁定标识
    var PanelCanvas_mode = 0; //0 自由模式    1 瀑瀑模式

    // 页面 加载完成后执行
    window.onload = function () {
        console.log("页面 加载完成后执行")

        $('img').on('dragstart', function(event) { event.preventDefault(); });
        f_PaneView_Get()

    }

    // 调整视图 大小
    function win_show() {

        PC_width = parseFloat($("#PanelCanvas").css("width"))
        PC_height = parseFloat($("#PanelCanvas").css("height"))


        setInterval(function(){

            Width = $(window).width();
            Height = $(window).height();
            //
            // console.log("W:",Width,Height)
            // console.log("PC:",PC_width,PC_height)
            //
            // console.log("X:",Width/PC_width)
            // console.log("Y:",Height/PC_height)
            //

            $("#PanelCanvas").css({
                'transform': 'scale('+Width/PC_width+', '+Height/PC_height+')',
                'transform-origin': '0 0'
            });
        },500);


    }
</script>

<!--移动面板-->
<script>
    //创建拖拽方法
    PanelCanvas_move = true

    // $("#PanelCanvas").mousedown(function(e){
    //     if(!PanelCanvas_move){return;}
    //
    //     var canvas = $(this);
    //     var pos = $(this).position();
    //     this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
    //     $.extend(document, {'move': true, 'move_target': this, 'call_down' : function(e, posix){
    //             canvas.css({
    //                 'cursor': 'move',
    //                 'top': e.pageY - posix.y,
    //                 'left': e.pageX - posix.x
    //             });
    //         }, 'call_up' : function(){
    //             canvas.css('cursor', 'default');
    //         }});
    // })


    function f_PanelCanvas_onmouseover() {
        // console.log("进入")
        PanelCanvas_move = false
    }


    function f_PanelCanvas_onmouseout() {
        // console.log("出去")
        PanelCanvas_move = true
    }


</script>
<!--数据缓存-->
<script>
    var Public_Value_map = new Map();

    //读取 同步缓存数据
    function f_Public_Value_get(tab) {
        if(Public_Value_map.has(tab)){                 //判断映射是否存在
            return Public_Value_map.get(tab),true
        }
        return 0,false
    }
    //设置 同步缓存数据
    function f_Public_Value_set(tab,value) {
        Public_Value_map.set(tab,value);      //添加设置映射

    }

</script>

<!--画板入口-->
<script src="{{.OSS_Static}}/panel/PanelCanvas.js"></script>
<script>
    // "#canvas"
    //
    // V_PanelCanvas1 =
    // V_PanelCanvas2 = f_canvas2(500,500,"{{.OSS_Static}}/images/demo_picture.jpg")
    var V_PanelCanvas_Map = new Map();
    //
    // V_PanelCanvas = new f_canvas2(500, 500, "{{.OSS_Static}}/images/demo_picture.jpg", 1, "{\"sn_sn\":\"866222050911984\",\"tab_tab\":\"v_do_2\",\"text1_text\":\"替换的文本\"}")
    // V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)
    // //测试加载
    // var loadData = [
    //
    //     {text: "A0000001v_xx_7", rotate: 0, color: "rgb(255, 165, 0)", height: 70, width: 77, pageX: 89, pageY: 39}];
    // $.each(loadData, function (i, row) {
    //     V_PanelCanvas.F_CreateBox(row);
    // });
    //
    //
    // V_PanelCanvas = new f_canvas2(500, 500, "{{.OSS_Static}}/images/demo_picture.jpg", 1, "{\"sn_sn\":\"866222050911984\"}")
    // V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)
    // var loadData = [
    //     {text: "A0000001v_xx_1", rotate: 1, color: "rgb(255, 255, 0)", height: 70, width: 77, pageX: 29, pageY: 64}
    // ];
    // $.each(loadData, function (i, row) {
    //     V_PanelCanvas.F_CreateBox(row);
    // });
    // var V_PanelCanvas1 = new Function(f_canvas(500,500,"{{.OSS_Static}}/images/demo_picture.jpg"))
    // var V_PanelCanvas2 = new Function(f_canvas(500,500,"{{.OSS_Static}}/images/demo_picture.jpg"))


    Height = $(window).height();
    $("#PanelTool_Device_List").css("height",(Height-125)+"px")
    function f_PaneView_Get() {
        $.ajax({
            type: 'POST',
            url: '../../Panel/PaneView_Get',//发送请求
            data: {
                T_viewid: "{{.T_viewid}}",
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    T_PanelCanvas = result.Data
                    PanelCanvas_mode = T_PanelCanvas.T_mode
                    f_PanelCanvas_mode_0(result)


                    switch (PanelCanvas_mode) {
                        case 0:
                            $("#PanelCanvas_mode").html("自由模式")
                            break
                        case 1:
                            $("#PanelCanvas_mode").html("瀑瀑模式")

                            break
                        case 2:
                            $("#PanelCanvas_mode").html("满屏模式")
                            win_show() // 调整视图 大小
                            break
                    }

                    $("#PanelCanvas_wh").html("["+T_PanelCanvas.T_width+"*"+T_PanelCanvas.T_height+"]")
                } else {
                    layer.msg('视图获取错误！');
                    setTimeout(function(){
                        //要执行的代码
                        f_PaneView_Get()

                    },2000);
                }
            }
        });
    }

    // 自由模式
    function f_PanelCanvas_mode_0(result) {
        T_PanelCanvas = result.Data
        // CSS 样式
        $('#PanelCanvas').css({
            width: T_PanelCanvas.T_width + "px",
            height: T_PanelCanvas.T_height + "px"
        });

        // CSS 自定义样式
        f_Up_css(T_PanelCanvas.T_css,"PanelCanvas")

        // 加载 组件
        if(result.Data.T_text.length < 10 ){
            return;
        }
        PaneView_json = JSON.parse(result.Data.T_text)
        for(var i = 0;i < PaneView_json.length;i++){
            Layer_Mould_json = PaneView_json[i]
            console.log("创建面板 PaneView_json",Layer_Mould_json)

            V_PanelCanvas = new f_canvas2(Layer_Mould_json.PanelCanvas_top,Layer_Mould_json.PanelCanvas_left,Layer_Mould_json.PanelCanvas_width, Layer_Mould_json.PanelCanvas_height, Layer_Mould_json.PanelCanvas_z, JSON.stringify(Layer_Mould_json.PanelCanvas_map), Layer_Mould_json.PanelCanvas_css)
            V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)

            for(var row_i = 0; row_i < Layer_Mould_json.Data_list.length; row_i++){
                // rowjson = Layer_Mould_json.Data_list[i]
                console.log("row json+ ",Layer_Mould_json.Data_list[row_i])
                V_PanelCanvas.F_CreateBox(Layer_Mould_json.Data_list[row_i]);
            }

        }
    }


    // 瀑瀑模式
    function f_PanelCanvas_mode_1(result){
        T_PanelCanvas = result.Data
        // CSS 样式
        $('#PanelCanvas').css({
            width: '100%',
            height: '100%',
            overflowX: "hidden",
            overflowY: "auto",
        });
        // CSS 自定义样式
        f_Up_css(T_PanelCanvas.T_css,"PanelCanvas")

        // 加载 组件
        if(result.Data.T_text.length < 10 ){
            return;
        }
        PaneView_json = JSON.parse(result.Data.T_text)
        for(var i = 0;i < PaneView_json.length;i++){
            Layer_Mould_json = PaneView_json[i]
            console.log("创建面板 PaneView_json",Layer_Mould_json)

            V_PanelCanvas = new f_canvas2(Layer_Mould_json.PanelCanvas_top,Layer_Mould_json.PanelCanvas_left,Layer_Mould_json.PanelCanvas_width, Layer_Mould_json.PanelCanvas_height, Layer_Mould_json.PanelCanvas_z, JSON.stringify(Layer_Mould_json.PanelCanvas_map), Layer_Mould_json.PanelCanvas_css)
            V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)

            for(var row_i = 0; row_i < Layer_Mould_json.Data_list.length; row_i++){
                // rowjson = Layer_Mould_json.Data_list[i]
                console.log("row json+ ",Layer_Mould_json.Data_list[row_i])
                V_PanelCanvas.F_CreateBox(Layer_Mould_json.Data_list[row_i]);
            }

        }
    }
    function f_PaneView_Save(T_text) {
        $.ajax({
            type: 'POST',
            url: '../../Panel/PaneView_Post',//发送请求
            data: {
                T_viewid: "{{.T_viewid}}",
                T_text: T_text,
                T_mode: T_PanelCanvas.T_mode,
                T_width: T_PanelCanvas.T_width,
                T_height: T_PanelCanvas.T_height,
                T_css: T_PanelCanvas.T_css,
                T_data: T_PanelCanvas.T_data,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    layer.msg('保存成功！');
                } else {
                    layer.msg('保存失败！');
                }
            }
        });
    }


</script>

<!--发布订阅模式-->
<script>
    // 控制中心
    var pubSub = {
        list: {},
        // 订阅
        subscribe: function(key, fn) {
            console.log("加入:",key)

            Public_V = f_Public_Value_get(key)
            if (Public_V.is){
                this.publish(key,Public_V.V)
            }
            if (!this.list[key]) this.list[key] = [];
            this.list[key].push(fn);
            key_list = key.split("/")
            if(key_list[0].length > 3){
                NewSubscribe(key_list[0]) // 订阅SN
            }


        },
        //取消订阅
        unsubscribe: function(key, fn) {
            let fnList = this.list[key];
            if (!fnList) return false;
            if (!fn) { // 不传入指定的方法，清空所用 key 下的订阅
                fnList && (fnList.length = 0);
            } else {
                fnList.forEach((item, index) => {
                    item === fn && fnList.splice(index, 1);
                });
            }
        },
        // 发布
        publish: function(key, ...args) {
            if (this.list[key]){
                for (let fn of this.list[key]) fn.call(this, ...args);
            }

        }
    }

    function f_Data_Read(T_sn) {
        T_sn_list = T_sn.split("-")
        $.ajax({
            type: 'POST',
            url: '../../Data/Device_Sensor',//发送请求
            data: {
                T_sn: T_sn_list[0],
                T_id: T_sn_list[1],
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    for (const [key, value] of Object.entries(result.Data)) {
                        // console.log(key,value);
                        pubSub.publish(T_sn+"/"+key, value);
                        f_Public_Value_set(T_sn+"/"+key, value)
                    }
                }
            }
        });
    }

</script>

<!--websocket-->
<script src="{{.OSS_Static}}/js/jquery.cookie.min.js"></script>
<script>
    var websocket = null;

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

                websocket = new WebSocket("ws://" + window.location.host + "/wsPanel/join?User_tokey=" + $.cookie('User_tokey'));
            }

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

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("websocket open");
        // get_DeviceCh_List(0)

        setTimeout(function(){
            SubscribeSend()
        },2000);

        // send("{\"Sn\":\"" + getQueryString("Sn") + "\"}")
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        // console.log("websocket:",event.data)
        var obj = JSON.parse(event.data);
        console.log("websocket:",obj)
        if(obj.Code == 200){
            return
        }
        sn_id = obj.T_sn+"-"+obj.T_id

        for (const [key, value] of Object.entries(obj)) {
            // console.log(key,value);
            pubSub.publish(sn_id+"/"+key, value);
            f_Public_Value_set(sn_id+"/"+key, value)
        }

        // pubSub.publish(sn_id+'/'+obj.tab, obj.value);

        // // op:类型u8,  //操作  0-主动上传  1-读  2- 写     3-成功  4-失败
        // switch (obj.op) {
        //     case 3:
        //         Del_Mid(obj.mid)
        //         break;
        //     case 4:
        //         Err_Mid(obj.mid)
        //         break;
        // }
        // console.log(obj.sn,"进入。。  Device_Sn = ",obj.sn)
        // Pu_DeviceCh_List_g(obj.sn,obj.tab,obj.value)
        //
        // if (obj.type == 0) {
        //     // console.log("data.length:",obj.sensor.length)
        //
        //     Pu_DeviceCh_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);
    }
    var SbscribeMap = new Set();
    // 订阅 SN
    function Subscribe(SN) {
        if(!SbscribeMap.has(SN)){
            console.log("加入订阅:",SN)
            SbscribeMap.add(SN)
        }
        //
    }
    // 订阅 SN
    function NewSubscribe(SN) {
        if(!SbscribeMap.has(SN)){
            console.log("加入订阅:",SN)
            SbscribeMap.add(SN)
            send("{ \"Sn\":\""+SN+"\"}")
            f_Data_Read(SN)
        }
        //
    }
    // 订阅 SN
    function SubscribeSend() {
        for (var SN of SbscribeMap) { // 遍历Set
            send("{ \"Sn\":\""+SN+"\"}")
        }
        console.log("开始订阅:",SbscribeMap)
    }


</script>


</body>
</html>