zoie
/
Cold_Api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
							<!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 T_viewid = "{{.T_viewid}}"
    console.log("T_viewid:",T_viewid)
    var PanelCanvas_lock = true; //区块锁定标识

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

        $('img').on('dragstart', function(event) { event.preventDefault(); });
        if(T_viewid.length > 0){
            f_PaneView_Get()
        }

    }
    // 切换试图
    function f_PaneView_V() {
        window.location.href='../..'+window.location.pathname+'?T_viewid='+T_viewid
    }
    // 调整视图 大小
    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>
    var V_PanelCanvas_Map = new Map();
    // 层背景图片 回调函数
    function f_Layer_background_picture(H_img_id) {
        $('#UpLoadFile').click();
        F_c = function(up_url) {
            if (H_img_id.length > 1) {
                $("#" + H_img_id).attr("src", up_url)
            }
        }
    }
    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
                    console.log("PanelCanvas_mode:",PanelCanvas_mode)
                    switch (PanelCanvas_mode) {
                        case 0:
                            f_PanelCanvas_mode_0(result)
                            break
                        case 1:
                            f_PanelCanvas_mode_1(result)

                            break
                        case 2:
                            f_PanelCanvas_mode_0(result)
                            win_show() // 调整视图 大小
                            break
                    }

                } else {
                    layer.msg('视图获取错误！');
                }
            }
        });
    }

    // 自由模式
    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;
        }

        // 获取数据源
        T_PanelCanvas_T_data_list = []
        if(T_PanelCanvas.T_data.search('http') >= 0){
            // 接口

        }else {
            T_PanelCanvas_T_data_list = T_PanelCanvas.T_data.split("\n")

        }
        if(T_PanelCanvas_T_data_list.length == 0){
            layer.msg('没有数据');
            return;
        }
        console.log("T_PanelCanvas_T_data_list:",T_PanelCanvas_T_data_list)


        PaneView_json = JSON.parse(T_PanelCanvas.T_text)
        if(PaneView_json.length == 0){
            layer.msg('没有面板');
            return;
        }
        Layer_Mould_json = PaneView_json[0]
        console.log("创建面板 PaneView_json",Layer_Mould_json)
        //
        console.log("PanelCanvas 宽度：",$("#PanelCanvas").width())
        console.log("组件 高度：",Layer_Mould_json.PanelCanvas_height)

        width_num = Math.floor($("#PanelCanvas").width()/Layer_Mould_json.PanelCanvas_width)
        width_num_left = Math.floor(($("#PanelCanvas").width() - (width_num * Layer_Mould_json.PanelCanvas_width)) / width_num)
        console.log("宽度数量：",width_num,"  每个左边距：",width_num_left)


        P_top = 70  // 初始化 顶高度
        P_top -= Number(Layer_Mould_json.PanelCanvas_height)  //
        P_top -= Number(width_num_left)  //
        P_left = 0
        P_map = JSON.stringify(Layer_Mould_json.PanelCanvas_map)
        P_map = JSON.parse(P_map)
        console.log("P_map:",P_map)
        for(var i = 0;i < T_PanelCanvas_T_data_list.length;i++){
            P_map.sn_sn = T_PanelCanvas_T_data_list[i]
            if(i % width_num == 0){

                P_top += Number(Layer_Mould_json.PanelCanvas_height)
                P_top += width_num_left

                P_left = 0
            }

            P_left += Math.floor(width_num_left / 2)

            V_PanelCanvas = new f_canvas2(P_top,P_left,Layer_Mould_json.PanelCanvas_width, Layer_Mould_json.PanelCanvas_height, Layer_Mould_json.PanelCanvas_z, JSON.stringify(P_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]);
            }

            P_left += Number(Layer_Mould_json.PanelCanvas_width) + Math.floor(width_num_left / 2)
        }

    }

</script>

<!--发布订阅模式-->
<script>
    // 控制中心
    var pubSub = {
        list: {},
        // 订阅
        subscribe: function(key, fn) {
            console.log("加入:",key)
            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
                f_Data_Read(key_list[0],key_list[1])
            }
        },
        //取消订阅
        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_tab) {
        $.ajax({
            type: 'POST',
            url: '../../Device/Data_Read',//发送请求
            data: {
                T_sn: T_sn,
                T_tab: T_tab,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    pubSub.publish(T_sn+'/'+T_tab, result.Data.T_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("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("websocket open");
        // get_DeviceCh_List(0)

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

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

    //接收到消息的回调方法
    websocket.onmessage = function (event) {

        var obj = JSON.parse(event.data);
        // console.log(obj.type)
        if(!SbscribeMap.has(obj.sn)){
            console.log(obj.sn,"跳过。。  Device_Sn = ",obj.sn)
            return
        }
        console.log("websocket:",event.data)
        pubSub.publish(obj.sn+'/'+obj.tab, obj.value);
        f_Public_Value_set(obj.sn+'/'+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+"\"}")
        }
        //
    }
    // 订阅 SN
    function SubscribeSend() {
        for (var SN of SbscribeMap) { // 遍历Set
            send("{ \"Sn\":\""+SN+"\"}")
        }
        console.log("开始订阅:",SbscribeMap)
    }


</script>

<!--远程执行-->
<script>
    var Data_Write_Map = new Map();
    // 执行
    function f_Data_Write(V_id,T_sn,T_tab,T_value) {
        $.ajax({
            type: 'POST',
            url: '../../Device/Data_Write',//发送请求
            async: false,
            data: {
                T_sn:T_sn,
                T_tab:T_tab,
                T_value:T_value,
            },
            success: function(result) {
                console.log(result)
                pubSub.publish(T_sn+'/'+T_tab, T_value);
                f_Public_Value_set(T_sn+'/'+T_tab, T_value)  //同步缓存数据

                Data_Write_Map.set(result.Data,{V_id:V_id,Munm:1});

            }
        });
    }

    setInterval(function(){
        // 遍历
        $(".Mid").remove() //  清空
        for(let [Mid,v] of Data_Write_Map) {
            console.log("Mid:", Mid,v);
            Data_Write_Map.set(Mid,{V_id:v.V_id,Munm:v.Munm + 1});
            if(v.Munm > 3 && v.Munm < 20 && v.Munm % 2 == 0){
                $("body").append('<div class="Mid" style="user-select: none;position: absolute;left: '+$("#"+v.V_id).offset().left+'px;top: '+$("#"+v.V_id).offset().top+'px;z-index: 999999999999999;width: 20px;height: 20px;background-color:rgb(255, 0, 0);border-radius: 25px;"></div>')
            }

            if(v.Munm > 10){
                Del_Mid(Mid)
            }
        }
    },1000);

    
    function Del_Mid(Mid) {
        if(Data_Write_Map.has(Mid)){                 //判断映射是否存在
            // console.log("delete:",Data_Write_Map.get(Data_Write_Map))
            Data_Write_Map.delete(Mid);
        }
    }

    function Err_Mid(Mid) {
        // if(Data_Write_Map.has(Mid)){                 //判断映射是否存在
        //     console.log(Data_Write_Map.get(Data_Write_Map))
        // }
    }

</script>

<script>
    function detectZoom (){
        var ratio = 0,
            screen = window.screen,
            ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
            ratio = window.devicePixelRatio;
        }
        else if (~ua.indexOf('msie')) {
            if (screen.deviceXDPI && screen.logicalXDPI) {
                ratio = screen.deviceXDPI / screen.logicalXDPI;
            }
        }
        else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
            ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio){
            ratio = Math.round(ratio * 100);
        }

        return ratio;
    };

</script>


</body>
</html>