zoie
/
Cold_Api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493
							<!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>
    <!--    <script src="{{.OSS_Static}}/panel/toggle/togglestyle.css"></script>-->
    <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_mode_tab{
            position: absolute;
            bottom: 0px;
            right: 300px;
            background-color: #9AD4FF69;
            color: #0093FF;
            padding: 6px;
            height: 23px;
            z-index:999999999999999999999;
            border-radius: 5px;
        }
        .layer_tool_tab{
            position: absolute;
            top: 0;
            left: 10px;
            /*background:#FFF;*/
            width: 100%;
            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 rgb(204, 204, 204);
            /*padding: 10px;*/
        }

        .PanelCanvas_rel_div{
            border: 2px dashed rgb(204, 204, 204);
        }

        .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>
</head>

<div id="open_layer_Data_List" hidden style="">


</div>

<div id="open_layer_save_layer" hidden style="padding:20px">
    <div style="">面板名称:</div>
    <input id='open_layer_save_layer_name' ondblclick='f_attribute_Device(this)' type="'text'" class="open_layer_layui-layer-input" value="">
    <div style="margin-top: 20px;">面板图片:</div>
    <input id='open_layer_save_layer_img' ondblclick='f_attribute_img(this)' type="'text'" class="open_layer_layui-layer-input" value="">
    <button onclick="f_Save_layer_choice()">保存为面板</button>
</div>
<!--瀑瀑模式 - 数据来源-->
<div id="open_layer_data_layer" hidden style="padding:20px;">
    <div style="width: 100%;float: left;margin-top: 0px;margin-bottom: 10px">数据来源:</div>
    <textarea id="open_layer_data_layer_textarea" class="layui-layer-prompt layui-layer-input"
              style="width: 99%;height: 400px;user-select: auto;"></textarea>
    <!--    <div style="float: left">-->
    <!--        方式一：-->
    <!--            插入SN,以换行符结束-->
    <!--    </div>-->

    <!--    <div style="float: left">-->
    <!--        方式二：-->
    <!--    </div>-->
</div>

<!--自定义 CSS-->
<div id="open_layer_css_layer" hidden style="padding:20px;">
    <!--    背景图片-->
    <div style="width: 100%;float: left;margin: 10px 0px;">
        <div style="width: 80px;float: left">
            背景图片：
        </div>
        <div style="width: 170px;float: left">
            <input id='S_open_layer_css_layer_background_img' ondblclick='f_attribute_libimg(this)' style="user-select: auto;" type='text'  class="layui-layer-input" value="">
        </div>
        <div style="width: 80px;float: left">
            背景拉伸：
        </div>
        <div style="width: 100px;float: left">
            <select id="S_open_layer_css_layer_background_select">
                <option value=" no-repeat center center/100%;">缩放背景</option>
                <option value=" no-repeat 100% 100%;">铺满背景</option>
                <option value="  no-repeat;height:100%;width:100%;overflow: hidden;background-size:cover;">拉伸铺满</option>
                <option value=" repeat;">重复背景</option>

            </select>
        </div>
        <div style="width: 20px;float: left;margin-left: 10px;" onclick="S_open_layer_css_layer_background_on()">
            +
        </div>
        <script>
            function S_open_layer_css_layer_background_on() {
                text = "background : url('"+$("#S_open_layer_css_layer_background_img").val()+"') "+$("#S_open_layer_css_layer_background_select").val()
                $("#open_layer_css_layer_textarea").val($("#open_layer_css_layer_textarea").val()+"\n"+text)
            }
        </script>
    </div>
    <!--    背景颜色-->
    <div style="width: 100%;float: left;margin: 10px 0px;">
        <div style="width: 80px;float: left">
            背景颜色：
        </div>
        <div style="width: 65px;float: left">
            <input id='S_open_layer_css_layer_backgroundcolour_colour1' ondblclick='f_attribute_color(this)' style="width: 55px;" type='text' class="layui-layer-input">
        </div>
        <div style="width: 20px;float: left;margin-left: 10px;" onclick="S_open_layer_css_layer_backgroundcolour_colour1_on()">
            +
        </div>

        <script>
            function S_open_layer_css_layer_backgroundcolour_colour1_on() {
                text = "background-color : "+$("#S_open_layer_css_layer_backgroundcolour_colour1").val()+";"
                $("#open_layer_css_layer_textarea").val($("#open_layer_css_layer_textarea").val()+"\n"+text)
            }
        </script>
        <div style="width: 80px;float: left">
            颜色渐变：
        </div>
        <div style="width: 65px;float: left">
            <input id='S_open_layer_css_layer_backgroundcolour_colour2' ondblclick='f_attribute_color(this)' style="width: 55px;" type='text' class="layui-layer-input">
        </div>
        <div style="width: 65px;float: left">
            <input id='S_open_layer_css_layer_backgroundcolour_colour3' ondblclick='f_attribute_color(this)' style="width: 55px;" type='text' class="layui-layer-input">
        </div>
        <div style="width: 100px;float: left">
            <select id="S_open_layer_css_layer_backgroundcolour_select" style="width: 90px;">
                <option value="">从上到下</option>
                <option value=" to right,">从左到右</option>
                <option value=" to bottom right,">对角线</option>
            </select>
        </div>
        <div style="width: 40px;float: left;margin-left: 10px;" onclick="S_open_layer_css_layer_backgroundcolour_colourgradient_on()">
            +
        </div>
        <script>
            function S_open_layer_css_layer_backgroundcolour_colourgradient_on() {
                text = "background-image : linear-gradient("+$("#S_open_layer_css_layer_backgroundcolour_select").val()+""+$("#S_open_layer_css_layer_backgroundcolour_colour2").val()+", "+$("#S_open_layer_css_layer_backgroundcolour_colour3").val()+")"+";"
                $("#open_layer_css_layer_textarea").val($("#open_layer_css_layer_textarea").val()+"\n"+text)
            }
        </script>
    </div>


    <div style="width: 100%;float: left;margin-top: 20px;margin-bottom: 10px">样式文本:</div>
    <textarea id="open_layer_css_layer_textarea" class="layui-layer-prompt layui-layer-input"
              style="width: 99%;height: 400px;user-select: auto;"></textarea>

</div>

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

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

    <!--    <div id="PanelCanvas1" >-->
    <!--        <img src="{{.OSS_Static}}/images/demo_picture.jpg" />-->
    <!--    </div>-->
</div>

<!--左側工具欄-->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="menuRight">
        <!--        <div onclick="f_on_menuLeft()" style="position: relative;left: -55px;width: 80px;height: 0px;color: #FFFFFF;font-size: 20px">-->
        <!--            <span style="background-color: #47a3da;padding: 0px 6px"> ^ </span>-->
        <!--        </div>-->
        <h3>宝智达冷链科技</h3>


        <!-- 选项卡部分 -->
        <div id="tab">
            <!-- 头部区域 -->
            <div id="tab-header" style="background:#e5e5e5;height: 30px;padding-top: 10px;overflow-y: hidden;">

                <span ondblclick="f_PanelTool_Device_List()">设备</span>
                <span >基础</span>

                <span >资源</span>
                <!--                <span >模块</span>-->
                <span >面板</span>
                <!--                <span >高级</span>-->
            </div>
            <!-- 身体部分 -->
            <div id="tab-content">
                <!--                设备-->
                <div class="dom" style="background-color: #FEFEFE;display:block  ">

                    <div id="PanelTool_Device_List" style="padding-top: 10px;padding-bottom: 10px;overflow-x: hidden;overflow-y: auto;">


                    </div>

                </div>
                <!--                基础-->
                <div class="dom" style="display: block;">
                    <section class="help-left">
                        <details class="menu" open>
                            <summary>基本组件</summary>
                            <p draggable="true">这是一个可拖动的段落。</p>
                            <div id="PanelTool_1" class="divul">
                            </div>

                        </details>
                        <details class="menu" open>
                            <summary>数据组件</summary>
                            <div id="PanelTool_2" class="divul">
                            </div>
                        </details>
                        <details class="menu" open>
                            <summary>图表组件</summary>
                            <div id="PanelTool_3" class="divul">
                            </div>
                        </details>
                        <details class="menu" open>
                            <summary>高级组件</summary>
                            <div id="PanelTool_4" class="divul">
                            </div>
                        </details>

                    </section>

                </div>

                <!--                资源-->
                <div class="dom">
                    <section class="help-left">
                        <details class="menu" open>
                            <summary>图标资源</summary>
                            <div id="PanelSource_1" class="divul">
                            </div>
                        </details>

                    </section>

                </div>
                <!-- 第二部分 -->
                <!--                <div class="dom">-->
                <!--                    222222222-->
                <!--                </div>-->
                <!-- 第二部分 -->
                <div class="dom">

                    <section class="help-left">
                        <details class="menu" open>
                            <summary>产品面板</summary>

                            <div id="LayerMould_1" class="divul">
                                <!--                        <div class="divulli" draggable="true" data-PanelToolId="1"  ondragleave="v_ondragleave(1)">-->
                                <!--                            <img src="{{.OSS_Static}}/images/仪器控制.png">-->
                                <!--                            <div>设备管理</div>-->
                                <!--                        </div>-->


                            </div>

                        </details>
                        <!--                            <details class="menu" open>-->
                        <!--                                <summary>设备组件</summary>-->
                        <!--                                <div id="LayerMould_2" class="divul">-->
                        <!--                                    &lt;!&ndash;                        <div class="divulli" draggable="true" data-PanelToolId="1"  ondragleave="v_ondragleave(1)">&ndash;&gt;-->
                        <!--                                    &lt;!&ndash;                            <img src="{{.OSS_Static}}/images/仪器控制.png">&ndash;&gt;-->
                        <!--                                    &lt;!&ndash;                            <div>设备管理</div>&ndash;&gt;-->
                        <!--                                    &lt;!&ndash;                        </div>&ndash;&gt;-->

                        <!--                                </div>-->

                        <!--                            </details>-->

                    </section>

                </div>
                <!-- 第二部分 -->
                <!--                <div class="dom">-->
                <!--                    222222222-->
                <!--                </div>-->


            </div>
        </div>


    </nav>

</div>

<!--工程管理-->
<div class="layer_tool_tab" >
    <button onclick="f_Save()">保存</button>
    <button onclick="f_PaneView_V();">返回视图</button>
    <button onclick="T_viewid_setItem();">复制底板</button>
    <button onclick="T_viewid_getItem();">粘贴底板</button>
</div>
<script>
    function T_viewid_setItem()
    {
        localStorage.setItem("T_viewid",T_viewid);
        console.log(localStorage.getItem("T_viewid")," OK!")

    }
    function T_viewid_getItem()
    {
        console.log("T_viewid:",localStorage.getItem("T_viewid"))
        $.ajax({
            type: 'POST',
            url: '../../Panel/PaneView_Get',//发送请求
            data: {
                T_viewid: localStorage.getItem("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("满屏模式")

                            break
                    }

                    $("#PanelCanvas_wh").html("["+T_PanelCanvas.T_width+"*"+T_PanelCanvas.T_height+"]")
                }
            }
        });
    }

</script>


<!--面板模式-->
<div class="layer_mode_tab" >
    <span id="PanelCanvas_mode">自由模式</span>
    <span id="PanelCanvas_wh">[1233*3222]</span>
</div>

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

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


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

        // 资源
        f_ConfigImg_List()
        f_Device_List("")

        f_PaneView_Get()

    }

    // 切换试图
    function f_PaneView_V() {
        ToUrl = decodeURIComponent("{{.ToUrl}}")
        console.log("跳转：",ToUrl)
        window.location.href=ToUrl
    }

    keyCode_70 = {}
    keyCode_17 = false
    // 按键 功能
    function f_keydown() {

        $(document).keydown(function(event){
            console.log("keyCode keydown:"+event.keyCode)
            if(event.keyCode == 70){
                console.log("keyCode_70:",keyCode_70)
                keyCode_70()
                return false
            }
            if(event.keyCode == 17){
                keyCode_17 = true
                $("#PanelCanvas").css('cursor', 'move');
                return false
            }
            //
            // if (event.ctrlKey && event.keyCode == 70) {
            //     alert("‘Ctrl+Enter’");
            // };
            // switch (event.keyCode) {
            //
            // }
            return true

        });

        $(document).keyup(function(event){
            console.log("keyCode keyup:"+event.keyCode)
            if(event.keyCode == 17){
                keyCode_17 = false
                $("#PanelCanvas").css('cursor', 'default');
                return false
            }
            //
            // if (event.ctrlKey && event.keyCode == 70) {
            //     alert("‘Ctrl+Enter’");
            // };
            // switch (event.keyCode) {
            //
            // }
            return true

        });

    }


</script>
<script>
    var mousemove_x = 0
    var mousemove_y = 0
    addEventListener("mousemove", function (a) {


        if (keyCode_17){
            // console.log('top',mousemove_y - a.y,'left',mousemove_x - a.x)
            $("#PanelCanvas").css({
                'top': mousemove_y - a.y,
                'left': mousemove_x - a.x,
            });
        }else {

            mousemove_x = a.x + parseInt($("#PanelCanvas").css("left"))
            mousemove_y = a.y + parseInt($("#PanelCanvas").css("top"))
        }
    });
</script>
<!--移动面板-->
<script>
    // //创建拖拽方法
    // PanelCanvas_move = true
    //
    // $("#PanelCanvas").mousedown(function(e){
    //     if(!PanelCanvas_move){return;}
    //     if(!keyCode_17){return;}
    //     console.log(e)
    //     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 {V:Public_Value_map.get(tab),is:true}
        }
        return {V:0,is: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("满屏模式")

                            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>

<!--/// ----------------------------- 编辑 -------------------------------------- -->

<!--鼠标拖拽-->
<script>
    var isDown = false   //鼠标释放
    var V_PanelTool_id = 0   //工具 ID
    var V_PanelTool_class = 0   //  1 基础  2 层模型
    var V_PanelCanvas_id = 0

    function v_ondragleave(class_id,id) {
        console.log("离开工具栏")
        console.log(id)
        V_PanelTool_id = id
        V_PanelTool_class = class_id


        setTimeout(function(){
            //要执行的代码

            console.log("释放层 id",V_PanelCanvas_id)

            switch (V_PanelTool_class) {
                case 1:
                    console.log("加入 基础组件",PanelTool_List[V_PanelTool_id].T_text)

                    V_PanelCanvas_Map.get(V_PanelCanvas_id).F_CreateBox({
                        text: PanelTool_List[V_PanelTool_id].T_text,
                        rotate: 0,
                        color: PanelTool_List[V_PanelTool_id].T_color,
                        height: PanelTool_List[V_PanelTool_id].T_height,
                        width: PanelTool_List[V_PanelTool_id].T_width,
                        pageX: 20, pageY: 20
                    });
                    break;
                case 2:  // 弃用
                    console.log("释放 层 模型",Layer_Mould_List[V_PanelTool_id])


                    break;
            }

        },200);

    }
    // $( ".divulli" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
    // 进入
    function f_ondragenter(id) {
        console.log("进入",id)
        // document.getElementById("example").style.cursor = "move";  canvas.css('cursor', 'default');
        $(document).css('cursor', 'move');
    }
    //另一对象
    function f_ondragover(id) {
        console.log("另一对象",id)
        isDown = false
        $(document).css('cursor', 'move');
    }
    //离开
    function f_ondragleave(id) {
        console.log("离开",id)
        isDown = true
        setTimeout(function(){
            //要执行的代码
            console.log(isDown)
            if(isDown){
                console.log("释放层 id",id)

                switch (V_PanelTool_class) {
                    case 1:
                        console.log("释放 基础组件",PanelTool_List[V_PanelTool_id].T_text)

                        V_PanelCanvas_Map.get(id).F_CreateBox({
                            text: PanelTool_List[V_PanelTool_id].T_text,
                            rotate: 0,
                            color: PanelTool_List[V_PanelTool_id].T_color,
                            height: PanelTool_List[V_PanelTool_id].T_height,
                            width: PanelTool_List[V_PanelTool_id].T_width,
                            pageX: 20, pageY: 20
                        });
                        break;
                    case 2:  // 弃用
                        console.log("释放 层 模型",Layer_Mould_List[V_PanelTool_id])


                        break;
                }


            }
        },200);
    }

</script>

<!--底层-->
<script>

    T_PanelCanvas = {}
    //加载layer拓展
    layer.config({
        extend: 'extend/layer.ext.js'
    });
    //右键菜单参数
    context.init({
        fadeSpeed: 100,
        above: 'auto',
        preventDoubleContext: true,
        compress: false
    });

    context.attach('#PanelCanvas', [
        {header: '面板模式'},
        {
            text: '自由模式', action: function (e) {
                e.preventDefault();
                T_PanelCanvas.T_mode = 0
                $("#PanelCanvas_mode").html("自由模式")

            }
        },
        {
            text: '瀑瀑模式(一层)', action: function (e) {
                e.preventDefault();
                T_PanelCanvas.T_mode = 1
                $("#PanelCanvas_mode").html("瀑瀑模式")


                $("#open_layer_data_layer_textarea").val(T_PanelCanvas.T_data)
                layer.open({
                    title: '瀑瀑数据来源',
                    type: 1,
                    area: ['577px','690px'],
                    fix: true, //不固定
                    maxmin: false,
                    content: $('#open_layer_data_layer'),
                    shadeClose: true,
                    anim: 1,
                    shade: 0.4,
                    isOutAnim: false,
                    scrollbar: false,
                    btn:["确定"],
                    yes:function (Index) {

                        T_PanelCanvas.T_data = $("#open_layer_data_layer_textarea").val()

                        layer.close(Index);
                    }
                });

                // var box = $('#PanelCanvas');
                // box.css({
                //     width: '100%',
                //     height: '100%',
                //     overflowX: "hidden",
                //     overflowY: "auto",
                // });
                // T_PanelCanvas.T_width = 0;
                // T_PanelCanvas.T_height = 0;
                // PanelCanvas_mode = 1


            }
        },
        {
            text: '满屏模式', action: function (e) {
                e.preventDefault();
                T_PanelCanvas.T_mode = 2
                $("#PanelCanvas_mode").html("满屏模式")

            }
        },
        {header: '自定义尺寸'},
        {
            text: '1920x1080 (2K)', action: function (e) {
                e.preventDefault();
                var box = $('#PanelCanvas');
                box.css({
                    width: 1920,
                    height: 1080
                });
                T_PanelCanvas.T_width = 1920;
                T_PanelCanvas.T_height = 1080;
                $("#PanelCanvas_wh").html("["+T_PanelCanvas.T_width+"*"+T_PanelCanvas.T_height+"]")

            }
        },
        {
            text: '3840x2160 (4K)', action: function (e) {
                e.preventDefault();
                var box = $('#PanelCanvas');
                box.css({
                    width: 3840,
                    height: 2160
                });
                T_PanelCanvas.T_width = 3840;
                T_PanelCanvas.T_height = 2160;
                $("#PanelCanvas_wh").html("["+T_PanelCanvas.T_width+"*"+T_PanelCanvas.T_height+"]")

            }
        },
        {
            text: '自定义尺寸', action: function (e) {
                e.preventDefault();
                layer.prompt({
                    title: '请输入区域尺寸（宽,高），最小值：30 \n4K=3840*2160\n2K= 2560*1440',
                    formType: 0,
                    value: Math.round(T_PanelCanvas.T_width) + "," + Math.round(T_PanelCanvas.T_height)
                }, function (value, index, elem) {
                    var reg = /^[0-9]+,[0-9]+$/;
                    if (!reg.test(value)) {
                        alert('输入格式不正确，请输入整数  如：100,100');
                        return;
                    }
                    var size = value.split(',');
                    var box = $('#PanelCanvas');
                    box.css({
                        width: size[0] < 30 ? 30 : size[0],
                        height: size[1] < 30 ? 30 : size[1]
                    });
                    T_PanelCanvas.T_width = size[0];
                    T_PanelCanvas.T_height = size[1];

                    $("#PanelCanvas_wh").html("["+T_PanelCanvas.T_width+"*"+T_PanelCanvas.T_height+"]")

                    layer.close(index);
                });
            }
        },
        {divider: true},
        {header: '更改样式'},
        {
            text: 'CSS样式', action: function (e) {
                e.preventDefault();
                $("#open_layer_css_layer_textarea").val(T_PanelCanvas.T_css)
                f_attribute_css_inti() // 初始化 CSS 自定义样式
                layer.open({
                    title: '自定义 CSS样式',
                    type: 1,
                    area: ['577px','690px'],
                    fix: true, //不固定
                    maxmin: false,
                    content: $('#open_layer_css_layer'),
                    shadeClose: true,
                    anim: 1,
                    shade: 0.4,
                    isOutAnim: false,
                    scrollbar: false,
                    btn:["确定"],
                    yes:function (Index) {

                        T_PanelCanvas.T_css = $("#open_layer_css_layer_textarea").val()
                        f_Up_css(T_PanelCanvas.T_css,"PanelCanvas")

                        layer.close(Index);
                    }
                });


            }
        },
    ]);

</script>

<!--保存为面板-->
<script>
    var Save_layer_obj = {}
    function f_Save_layer(obj) {
        Save_layer_obj = obj
        Attribute_layer_id = layer.open({
            title: '保存为面板',
            type: 1,
            area: ['277px','290px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_save_layer'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: false,
        });
    }
    function f_Save_layer_choice() {
        box_json = Save_layer_obj.F_get_box_json()
        layer_name = $("#open_layer_save_layer_name").val()
        layer_img = $("#open_layer_save_layer_img").val()
        console.log("F_get_box_json:",box_json)
        console.log("open_layer_save_layer_name:",layer_name)
        console.log("open_layer_save_layer_img:",layer_img)

        f_Save_Layer(layer_name,layer_img,JSON.stringify(box_json))
        layer.close(Attribute_layer_id);
    }


    function f_Save_Layer(name,img,text) {
        $.ajax({
            type: 'POST',
            url: '../../Panel/Layer_Mould_Save',//发送请求
            data: {
                layer_name: name,
                layer_img: img,
                layer_json: text,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    layer.msg('上传成功！');
                }
            }
        });
    }

    // 保存工程
    function f_Save() {
        o_PanelCanvas_List = []
        for(let [key,v] of V_PanelCanvas_Map) {
            console.log("V_PanelCanvas_Map  key:", key);
            box_json = v.F_get_box_json()
            o_PanelCanvas_List.push(box_json)
        }
        //
        console.log("o_PanelCanvas_List:",o_PanelCanvas_List)
        // console.log(JSON.stringify(o_PanelCanvas_List))
        f_PaneView_Save(JSON.stringify(o_PanelCanvas_List))
    }


</script>

<!--// 左侧 工具-->
<script>
    var menuRight = document.getElementById('menuRight')
    var body = document.body;

    classie.toggle(body, 'cbp-spmenu-push-toright');
    classie.toggle(body, 'cbp-spmenu-push-toright_bady');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    console.log("menuRight.height",menuRight.clientHeight)
    $(".help-left").css("max-height",menuRight.clientHeight - 64 + "px")

    // 基础工具
    var PanelTool_List = []
    function f_PanelTool_List() {
        $.ajax({
            type: 'POST',
            url: '../../Panel/PanelTool_List',//发送请求
            data: {
                page: 1,
                page_z: 990,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {


                    PanelTool_List = result.Data.List
                    Show_PanelTool_List(PanelTool_List) // 列表

                    // if(result.Data.Page_size > result.Data.Page ){
                    //     f_PanelTool_List(result.Data.Page+1)
                    // }

                } else {

                }
            }
        });
    }

    function Show_PanelTool_List(data) {
        $('#PanelTool_1').append("" +
            "<div class=\"divulli\" onmousedown='f_Add_NewLayer()' >\n" +
            "    <img src=\"https://standardoss.baozhida.cn/UpImage/57f8984e-7327-49d3-8bc9-00719f02d61e.png\">\n" +
            "    <div>添加层</div>\n" +
            "</div>")
        for (let i = 0; i < data.length; i++) {
            switch (data[i].T_class) {
                case 1:
                    $('#PanelTool_1').append("" +
                        "<div class=\"divulli\"  onmousedown='v_ondragleave(1,"+ i +")' >\n" +
                        "    <img src=\""+data[i].T_img+"\">\n" +
                        "    <div>"+data[i].T_name+"</div>\n" +
                        "</div>")
                    break
                case 2:
                    $('#PanelTool_2').append("" +
                        "<div class=\"divulli\"  onmousedown='v_ondragleave(1,"+ i +")' >\n" +
                        "    <img src=\""+data[i].T_img+"\">\n" +
                        "    <div>"+data[i].T_name+"</div>\n" +
                        "</div>")
                    break
                case 3:
                    $('#PanelTool_3').append("" +
                        "<div class=\"divulli\" onmousedown='v_ondragleave(1,"+ i +")' >\n" +
                        "    <img src=\""+data[i].T_img+"\">\n" +
                        "    <div>"+data[i].T_name+"</div>\n" +
                        "</div>")
                    break

            }


            // Pu_DeviceCh_View(data[i].T_sn+data[i].T_tab+"_"+data[i].T_ch,data[i].T_value)
        }
    }

    ///////////------------   模板
    Layer_Mould_List = []
    function f_Layer_Mould_List() {
        $.ajax({
            type: 'POST',
            url: '../../Panel/Layer_Mould_List',//发送请求
            data: {
                page: 1,
                page_z: 990,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {


                    Layer_Mould_List = result.Data.List
                    Show_Layer_Mould_List(Layer_Mould_List) // 列表

                    // if(result.Data.Page_size > result.Data.Page ){
                    //     f_PanelTool_List(result.Data.Page+1)
                    // }

                } else {

                }
            }
        });
    }

    function Show_Layer_Mould_List(data) {


        for (let i = 0; i < data.length; i++) {
            switch (data[i].T_class) {
                case 1:
                    $('#LayerMould_1').append("" +
                        "<div class=\"divulli\"  ondblclick='f_Add_Layer_Mould("+ i +")' >\n" +
                        "    <img src=\""+data[i].T_img+"\">\n" +
                        "    <div>"+data[i].T_name+"</div>\n" +
                        "</div>")
                    break
                case 2:
                    $('#LayerMould_2').append("" +
                        "<div class=\"divulli\" ondblclick='f_Add_Layer_Mould("+ i +")' >\n" +
                        "    <img src=\""+data[i].T_img+"\">\n" +
                        "    <div>"+data[i].T_name+"</div>\n" +
                        "</div>")
                    break
            }


            // Pu_DeviceCh_View(data[i].T_sn+data[i].T_tab+"_"+data[i].T_ch,data[i].T_value)
        }
    }

    // - 添加面板
    function f_Add_Layer_Mould(i_id) {
        console.log("V_PanelCanvas_Map:",V_PanelCanvas_Map.size)
        if(PanelCanvas_mode == 1 && V_PanelCanvas_Map.size != 0){
            layer.msg('只允许一个层！');
            return
        }
        Layer_Mould_json = JSON.parse(Layer_Mould_List[i_id].T_text)

        console.log("释放 层 模型",Layer_Mould_json)
        V_PanelCanvas = new f_canvas2(0,0,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)

        //测试加载
        // var loadData = [
        //                 {text: "A0000001v_xx_7", rotate: 0, color: "rgb(255, 165, 0)", height: 70, width: 77, pageX: 89, pageY: 39}
        // ];
        for(var i = 0; i < Layer_Mould_json.Data_list.length; i++){
            // rowjson = Layer_Mould_json.Data_list[i]
            console.log("rowjson",Layer_Mould_json.Data_list[i])
            V_PanelCanvas.F_CreateBox(Layer_Mould_json.Data_list[i]);
        }
        // $.each(, function (i, row) {
        //
        //     //
        // });


    }

    // - 添加面板
    function f_Add_NewLayer() {


        V_PanelCanvas = new f_canvas2(0,0,600, 600, 0, "{ \"sn_sn\": \"\" }","")
        V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)


    }


    ///////////------------
    //获得元素
    var lis = document.querySelectorAll('#tab-header span');
    var content = document.querySelectorAll('#tab-content .dom');

    // 遍历1级菜单里的li元素
    for (var i = 0; i < lis.length; i++) {

        // onmouseenter、onmousemove与mousemove的区别：
        // 其支持冒泡，所以当鼠标移入或鼠标移入其子元素的时候都会触发相关事件
        // 其不支持冒泡，所以当鼠标移入这个元素本身的时候会触发相关事件
        // 不支持冒泡事件，当鼠标在元素上移动的时候会触发相关事件
        lis[i].onclick = ( function (i) {
            return function () {
                for (var j = 0; j < lis.length; j++) {
                    content[j].style.display = 'none';
                    lis[j].style.color = '';
                    lis[j].style.border = '1px solid #e5e5e5';
                }
                content[i].style.display = 'block';
                lis[i].style.color = '#69d1ff';
                lis[i].style.border = '2px solid #69d1ff';
            }
        })(i)
    }
    lis[0].onclick()

</script>
<!--// 左侧 工具 - 设备 -->
<script>
    // 更新列表
    function f_PanelTool_Device_List() {
        $('#PanelTool_Device_List').html("")
        for (let i = 0; i < Device_List.length; i++) {
            $('#PanelTool_Device_List').append("" +
                "<div style='padding: 4px;margin: 5px;border:1px solid #ececec;' > " +
                "<div>SN:"+Device_List[i].T_sn+"</div>"+
                Device_List[i].T_name+"["+Device_List[i].T_id+"]" +
                "</div>")
        }
    }
    function open_menu(Id) {
        layer.open({
            title: "设备参数配置 ",
            type: 2,
            area: ['500px', '630px'],
            fix: false, //不固定
            maxmin: false,
            content: "../../DeviceCh/DeviceChParameter_Id_Html?Id="+Id,
            shadeClose:true,
            anim: 1,
            isOutAnim: false,

        });

    }

</script>


<!--文件上传-->
<script src="https://cdn.staticfile.org/qiniu-js/3.4.0/qiniu.min.js"></script>
<script>
    var F_c=function(up_url) {}
    // F_c = function(up_url) {
    //     if (H_img_id.length > 1) {
    //         $("#" + H_img_id).attr("src", up_url)
    //     }
    // }
    $("#UpLoadFile").change(function () {
        let file = this.files[0];
        console.log(file)
        filesplit = file.type.split("/")
        console.log("filesplit:",filesplit[filesplit.length-1])
        $.ajax({
            type: 'POST',
            url: '../../Config/UpFileToken',//发送请求
            data: {
                T_suffix: filesplit[filesplit.length-1],
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    f_upload(file, result.Data)
                }
            }
        });
    })

    function f_upload(file, token) {
        // let file = this.files[0];
        let config = {
            useCdnDomain: true,
            region: qiniu.region.z2,
            debugLogLevel: 'INFO',
            useCdnDomain: true, // 表示是否使用 cdn 加速域名
        };
        let putExtra = {
            fname: "",
            params: {},
            mimeType: null
        };
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        var error = function (err) {
            console.log(err);
            alert("上传出错")
        };
        var complete = function (res) {
            console.log(res)
            if (res.key) {
                console.log("url:", res.key)
                F_c(res.key)
                // if (H_img_id.length > 1) {
                //     $("#" + H_img_id).attr("src", res.key)
                //     H_img_id = ""
                // }
            }
        };
        var next = function (response) {
            console.log(response)
        };
        var subObject = {
            next: next,
            error: error,
            complete: complete
        };
        let subscription;
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, "key", token, putExtra, config);
        subscription = observable.subscribe(subObject);
    }
</script>


<!-- 资源库 -->
<script>
    var ConfigImg_List = []
    var Device_List = []
    var Device_List_map = new Map();
    var ConfiglibImg_T_str = "";
    var ConfiglibImg_page = 1;

    function f_PaneView_Post(my) {
        Attribute_my = my
        $.ajax({
            type: 'POST',
            url: '../../Panel/PaneView_Post',//发送请求
            data: {
                T_text: "",
                T_width: 1920,
                T_height: 1080,
                T_css: "",
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    $(Attribute_my).val(result.Data)
                } else {
                    layer.msg('新建面板失败！');

                }
            }
        });
    }
    function f_ConfigImg_List() {
        $.ajax({
            type: 'POST',
            url: '../../Config/ConfigImg_List',//发送请求
            data: {
                page: 1,
                page_z: 9999,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    ConfigImg_List = result.Data.List

                } else {
                    layer.msg('获取图片失败！');
                }
            }
        });
    }

    var ConfiglibImg_List = []
    var ConfiglibImg_page = 0;
    var ConfiglibImg_T_str = ""
    function f_ConfiglibImg_List_inti(T_str0) {

        ConfiglibImg_List = []
        ConfiglibImg_page = 0;
        ConfiglibImg_T_str = T_str0

        // 更新列表
        $('#open_layer_Data_List').html("")
        $('#open_layer_Data_List').append("<div style='width: 100px;height: 120px;float: left;margin: 6px;text-align: center;'> " +
            "<img onclick='f_attribute_Configlibimg_UpLoadFile();keyCode_70 = {}' style='padding: 4px;margin: 5px;border:1px solid #ececec;' src=\"https://standardoss.baozhida.cn/UpImage/2ac296ef-6a6f-4bfe-a5dc-79f4a565962d.png\" width=\"70\" height=\"70\"> " +
            "<span>上传图片</span>"+
            "</div>")

        return

    }
    function f_ConfiglibImg_List() {
        ConfiglibImg_page += 1;
        $.ajax({
            type: 'POST',
            url: '../../Config/ConfiglibImg_List',//发送请求
            data: {
                T_str0: ConfiglibImg_T_str,
                page: ConfiglibImg_page,
                page_z: 200,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    for (let i = 0; i < result.Data.List.length; i++) {
                        ConfiglibImg_List.push(result.Data.List[i])
                        $('#open_layer_Data_List').append("<div style='width: 100px;height: 120px;float: left;margin: 6px;text-align: center;'> " +
                            "<img onclick='f_attribute_Configlibimg_choice(" + (ConfiglibImg_List.length - 1) + ");keyCode_70 = {}' style='padding: 4px;margin: 5px;border:1px solid #ececec;' src=\"" + result.Data.List[i].T_img0 + "\" width=\"70\" height=\"70\"> " +
                            "<span>"+ result.Data.List[i].T_str0+"</span>"+
                            "</div>")

                    }

                } else {
                    layer.msg('获取图片失败！');
                }
            }
        });
    }

    function f_Device_List(T_name) {

        $.ajax({
            type: 'POST',
            url: '../../../Data/Device_Sensor_List',//发送请求
            data: {
                // T_sn: T_sn,
                T_name: T_name,
                // T_class_id: parseInt(T_class_id),
                page: 1,
                page_z: 30,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    Device_List_r = result.Data.DeviceSensor_lite
                    for (let i = 0; i < Device_List_r.length; i++) {
                        Device_List_map.set(Device_List_r[i].T_sn,Device_List_r[i]);
                        Device_List.push(Device_List_r[i])
                    }
                    f_PanelTool_Device_List()
                } else {
                    layer.msg('获取主设备失败！');
                }
            }
        });
    }

</script>


<!--图片组选择-->
<script>
    var Attribute_my = {}
    var Attribute_layer_id = 0
    function f_attribute_imggroup(my) {
        Attribute_my = my
        Attribute_layer_id = layer.open({
            title: '请选择 图标',
            type: 1,
            area: [($(window).width() * 0.9) + 'px', ($(window).height() - 50) + 'px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_Data_List'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: false,
        });
        // 更新列表
        $('#open_layer_Data_List').html("")
        for (let i = 0; i < ConfigImg_List.length; i++) {
            $('#open_layer_Data_List').append("<img onclick='f_attribute_ConfigImg_choice(" + i + ")' style='padding: 4px;margin: 5px;border:1px solid #ececec;' src=\"" + ConfigImg_List[i].T_img1 + "\" width=\"70\" height=\"70\">")
        }
    }


    function f_attribute_ConfigImg_choice(id) {
        img_str = ConfigImg_List[id].T_img0 +"|"+ ConfigImg_List[id].T_img1+"|"+ ConfigImg_List[id].T_img2+"|"+ ConfigImg_List[id].T_img3+"|"+ ConfigImg_List[id].T_img4+"|"+ ConfigImg_List[id].T_img5
        console.log($(Attribute_my))
        $(Attribute_my).val(img_str)

        //关闭当前frame
        console.log(Attribute_layer_id)
        layer.close(Attribute_layer_id);
    }


</script>

<!--CSS 自定义样式-->
<script>
    // 初始化 CSS 自定义样式
    function f_attribute_css_inti() {
        // $("#S_open_layer_css_layer_background_img").val("")
        // $("#S_open_layer_css_layer_backgroundcolour_colour1").val("")
    }
    function f_attribute_libimg(my) {
        Attribute_my = my
        Attribute_layer_id = layer.open({
            title: '请选择 图片(按 f 搜索关键字)',
            type: 1,
            area: [($(window).width() * 0.9) + 'px', ($(window).height() - 50) + 'px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_Data_List'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: false,
            end:function () {
                keyCode_70 = {}
            }
        });
        console.log("Attribute_layer_id   layer:",Attribute_layer_id)


        //
        //
        // layer.open($.extend({
        //     btn: ["&#x786E;&#x5B9A;", "&#x53D6;&#x6D88;"],
        //     content: "e",
        //     skin: "layui-layer-prompt" + b("prompt"),
        //     success: function (a) {
        //         d = a.find(".layui-layer-input"), d.focus()
        //     },
        //     yes: function (b) {
        //         var e = d.val();
        //         "" === e ? d.focus() : 0 > (a.maxlength || 500) ? layer.tips("&#x6700;&#x591A;&#x8F93;&#x5165;" + (a.maxlength || 500) + "&#x4E2A;&#x5B57;&#x6570;", d, {tips: 1}) : c && c(e, b, d)
        //     }
        // }, a))


        //
        keyCode_70 = function () {
            AAAA = layer.prompt({
                type:1,
                title: '请输 搜索关键字',
                formType: 0,
                value: ""
            }, function (value, index, elem) {
                //
                console.log(value)
                console.log(index)
                layer.close(index);
                f_ConfiglibImg_List_inti(value)
                f_ConfiglibImg_List()
            });
            console.log("搜索关键字 layer:",AAAA)
        }
        f_ConfiglibImg_List_inti("")
        f_ConfiglibImg_List()
        // 滚轮 触发
        $(".layui-layer-content").scroll(function () {
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if(nScrollTop + $(".layui-layer-content").height() >= nScrollHight)   {
                //加载loadHotService();

                console.log("n")
                f_ConfiglibImg_List()
            }

        });


    }

    function f_attribute_Configlibimg_UpLoadFile() {
        $('#UpLoadFile').click();
        F_c = function(up_url) {
            $(Attribute_my).val(up_url)
            //关闭当前frame
            layer.close(Attribute_layer_id);
        }
    }
    function f_attribute_Configlibimg_choice(id) {
        img_str = ConfiglibImg_List[id].T_img0
        console.log($(Attribute_my))
        $(Attribute_my).val(img_str)

        //关闭当前frame
        console.log(Attribute_layer_id)
        layer.close(Attribute_layer_id);
    }
</script>

<!--文字组选择-->
<script>

    function f_attribute_Textgroup(my) {
        Attribute_my = my
        Attribute_layer_id = layer.open({
            title: '请选择 图标',
            type: 1,
            area: [($(window).width() * 0.9) + 'px', ($(window).height() - 50) + 'px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_Data_List'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: false,
        });
        // 更新列表
        $('#open_layer_Data_List').html("")
        for (let i = 0; i < ConfigImg_List.length; i++) {
            $('#open_layer_Data_List').append("<img onclick='f_attribute_ConfigText_choice(" + i + ")' style='padding: 4px;margin: 5px;border:1px solid #ececec;' src=\"" + ConfigImg_List[i].T_img1 + "\" width=\"70\" height=\"70\">")
        }
    }
    function f_attribute_ConfigText_choice(id) {
        img_str = ConfigImg_List[id].T_str0 +"|"+ ConfigImg_List[id].T_str1+"|"+ ConfigImg_List[id].T_str2+"|"+ ConfigImg_List[id].T_str3+"|"+ ConfigImg_List[id].T_str4+"|"+ ConfigImg_List[id].T_str5
        console.log($(Attribute_my))
        $(Attribute_my).val(img_str)

        //关闭当前frame
        console.log(Attribute_layer_id)
        layer.close(Attribute_layer_id);
    }

</script>


<!--主设备选择-->
<script>

    f_attribute_Device_List_page = 1
    f_attribute_Device_List_name = ""
    function f_attribute_Device_List(page) {
        f_attribute_Device_List_page = page

        console.log("f_attribute_Device_List_name:",f_attribute_Device_List_name)
        $.ajax({
            type: 'POST',
            url: '../../../Data/Device_Sensor_List',//发送请求
            data: {
                // T_sn: T_sn,
                T_name: f_attribute_Device_List_name,
                // T_class_id: parseInt(T_class_id),
                page: f_attribute_Device_List_page,
                page_z: 30,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    Device_List_r = result.Data.DeviceSensor_lite
                    for (let i = 0; i < Device_List_r.length; i++) {
                        $('#open_layer_Data_List').append("<div onclick=\"f_attribute__Device_choice(\'" + Device_List_r[i].T_sn + "\',\'" + Device_List_r[i].T_id + "\',\'\')\" style='padding: 4px;margin: 5px;border:1px solid #ececec;height: 40px' > " +
                            "<div>SN:"+Device_List_r[i].T_sn+"["+Device_List_r[i].T_id+"]" +"</div>"+
                            Device_List_r[i].T_name+
                            "</div>")
                    }
                } else {
                    layer.msg('获取主设备失败！');
                }
            }
        });
    }

    function f_attribute_Device(my,duo) {
        Attribute_my = my
        Attribute_layer_id = layer.open({
            title: '请选择 设备',
            type: 1,
            area: ['385px', ($(window).height() - 150) + 'px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_Data_List'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: true
        });

        $(".layui-layer-content").scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $("#open_layer_Data_List").height();
            var windowHeight = $(this).height();
            // console.log("scrollTop:",scrollTop,"      scrollHeight:",scrollHeight,"       windowHeight:",windowHeight)

            if (scrollTop + windowHeight > scrollHeight) {
                f_attribute_Device_List_page += 1
                f_attribute_Device_List(1)
                // alert('滑动到底部了')
            }
        });


        // $('#open_layer_Data_List').css("height",($(window).height() - 150) + 'px')

        f_attribute_Device_list_init()

    }
    function f_attribute_Device_list_init() {
        f_attribute_Device_List_name = $("#D_Name").val()
        // 更新列表
        $('#open_layer_Data_List').html("    " +
            "<div style='user-select: auto;' class=\"layui-input-block\">\n" +
            "  <input id='D_Name' type=\"text\" name=\"title\" required  placeholder=\"请输入 名称\" autocomplete=\"off\" class=\"layui-input\">  " +
            "   <button class=\"layui-btn\" onclick='f_attribute_Device_list_init()'>搜索</button> \n" +
            "</div>")

        f_attribute_Device_List(1)
    }


    function f_attribute__Device_choice(sn,id,duo) {
        console.log($(Attribute_my))
        if(duo.length > 0){
            $(Attribute_my).val($(Attribute_my).val() + sn + "-" + id+ ""  + duo )
        }else {
            $(Attribute_my).val(sn + "-" + id )
        }


        //关闭当前frame
        console.log(Attribute_layer_id)
        layer.close(Attribute_layer_id);
    }

</script>

<!--主设备 通道 选择-->
<script>
    function f_attribute_DeviceCh(my,value_map) {
        // S_sn = $("#S_sn_sn").val()
        // console.log("S_sn:",S_sn)
        // if(S_sn == "[-{sn}-]"){
        //     console.log("value_map:",value_map)
        //     S_sn = value_map
        // }
        //
        // if(S_sn == undefined){
        //     alert("主设备(SN)参数异常，如果是全局SN，请先配置 层 SN参数！")
        //     return
        // }
        //
        // if(!Device_List_map.has(S_sn)){                 //判断映射是否存在
        //     alert("没有找到 主设备(SN) "+S_sn)
        // }

        Attribute_my = my
        // console.log("S_sn:",S_sn)
        Attribute_layer_id = layer.open({
            title: '请选择 设备',
            type: 1,
            area: ['315px', ($(window).height() - 150) + 'px'],
            fix: false, //不固定
            maxmin: false,
            content: $('#open_layer_Data_List'),
            shadeClose: true,
            anim: 1,
            shade: 0.4,
            isOutAnim: false,
            scrollbar: false,
        });
        // 更新列表
        $('#open_layer_Data_List').html("")

        $('#open_layer_Data_List').append("<div id='attribute_ProductValue_List' style='padding: 4px;margin: 5px;border:1px solid #ececec;' > </div>")
        f_attribute_DeviceCh_ProductValue_List()

    }

    function f_attribute_DeviceCh_ProductValue_List() {
        // $.ajax({
        //     type: 'POST',
        //     url: '../../DeviceCh/DeviceCh_List',//发送请求
        //     data: {
        //         T_sn: T_sn,
        //         page: 1,
        //         page_z: 9999,
        //     },
        //     success: function (result) {
        //         console.log(result)
        //         if (result.Code == 200) {
        //
        //         } else {
        //             layer.msg('获取主设备失败！');
        //         }
        //     }
        // });

        T_tab_list = []
        T_tab_list.push({
            T_tab:"T_sn",
            T_name:"设备SN"
        })
        T_tab_list.push({
            T_tab:"T_id",
            T_name:"传感器ID"
        })
        T_tab_list.push({
            T_tab:"T_name",
            T_name:"设备名称"
        })
        T_tab_list.push({
            T_tab:"T_t",
            T_name:"温度"
        })
        T_tab_list.push({
            T_tab:"T_rh",
            T_name:"湿度"
        })
        T_tab_list.push({
            T_tab:"T_Tlower",
            T_name:"最低温度"
        })
        T_tab_list.push({
            T_tab:"T_Tupper",
            T_name:"最高温度"
        })
        T_tab_list.push({
            T_tab:"T_RHlower",
            T_name:"最低湿度"
        })
        T_tab_list.push({
            T_tab:"T_RHupper",
            T_name:"最高湿度"
        })
        T_tab_list.push({
            T_tab:"T_Site",
            T_name:"经纬度"
        })
        T_tab_list.push({
            T_tab:"T_Dattery",
            T_name:"电量"
        })
        T_tab_list.push({
            T_tab:"T_monitor",
            T_name:"监控状态"
        })
        T_tab_list.push({
            T_tab:"T_time",
            T_name:"时间"
        })


        for (let i = 0; i < T_tab_list.length; i++) {
            $('#attribute_ProductValue_List').append("<div style='padding: 4px;margin: 5px;border:1px solid #ececec;' > " +
                "<span onclick='f_attribute_DeviceCh_Tab_choice(\"" + T_tab_list[i].T_tab + "\")' >"+T_tab_list[i].T_tab+" -> "+T_tab_list[i].T_name+"</span>"+
                // "<span onclick='f_attribute_DeviceCh_Tab_choice(" + result.Data[i].T_tab+"_"+ch_i + ")' style='float: right;color: #ff0300' >"+">>属性 </span>"+
                "</div>")

        }
    }

    function f_attribute_DeviceCh_Tab_choice(tab) {
        console.log($(Attribute_my))
        $(Attribute_my).val(tab )

        //关闭当前frame
        console.log(Attribute_layer_id)
        layer.close(Attribute_layer_id);
    }

</script>

<!--颜色选择-->
<script src="{{.OSS_Static}}/panel/colorpicker.js"></script>
<script type="text/javascript">
    // 编辑框
    function f_attribute_color(my) {
        Attribute_my = my
        console.log("Attribute_my:",Attribute_my)
        Colorpicker.create({
            el: Attribute_my.id, //元素id
            color: $(Attribute_my).val(), //默认颜色
            change: function (elem, hex) {
                console.log(hex)
                //选中颜色发生改变时事件
                // elem.style.backgroundColor = hex;
                $(Attribute_my).val(hex)
                $(Attribute_my).css("backgroundColor",hex)

            }
        })
    }
    // 组件背景
    function f_assembly_bcolor(curNum) {


        layer.open({
            title:"调色板",
            type: 1,
            content: '<div id=\'f_assembly_bcolor\' style="width: 200px;height: 40px;background-color: '+curNum.css('background-color')+'" >   </div>' //这里content是一个普通的String
        });

        Attribute_my = document.getElementById("f_assembly_bcolor")
        console.log("Attribute_my:",Attribute_my)
        Colorpicker.create({
            el: Attribute_my.id, //元素id
            color: curNum.css('background-color'), //默认颜色
            change: function (elem, hex) {
                console.log(hex)
                //选中颜色发生改变时事件
                elem.style.backgroundColor = hex;
                // $(Attribute_my).val(hex)
                curNum.css('background-color', hex);
            }
        })
    }
</script>
<!--图片选择-->
<script type="text/javascript">
    // 图片 回调函数
    function f_attribute_img(my) {
        $('#UpLoadFile').click();
        F_c = function(up_url) {
            $(my).val(up_url)
        }
    }

</script>

<!--远程执行-->
<script>
    // var Data_Write_Map = new Map();
    // // 执行  V_id 标识出发位置，用来 反馈执行结果
    // 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 BrowserType()
    {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
        var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
        var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
        var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
        var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器

        if (isIE)
        {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            return {name:"IE",num: fIEVersion};
        }//isIE end

        if (isFF) { return {name:"FF",num: "FF"};}
        if (isOpera) { return {name:"Opera",num: "Opera"};}
        if (isSafari) { return {name:"Safari",num: "Safari"};}
        if (isChrome) { return {name:"Chrome",num: "Chrome"};}
        if (isEdge) { return {name:"Edge",num: "Edge"};}
    }
    Browser = BrowserType();


</script>
</body>
</html>

<!-- 通讯协议标准
    头：sn+ch      如： A0000001v_xx_1

    v_xx_1 : 值
    v_xx_1-img : 对应图片
    v_xx_1-color : 对应颜色
    v_xx_1-bimg : 对应图片
    v_xx_1-bcolor : 对应颜色

-->