zoie
/
Cold_Api


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420
							<!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" draggable="true" 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 = {}
    // 按键 功能
    function f_keydown() {

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

        });

    }


</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 {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_PanelTool_class = 0   //  1 基础  2 层模型

    function v_ondragleave(class_id,id) {
        console.log("离开工具栏")
        console.log(id)
        V_PanelTool_id = id
        V_PanelTool_class = class_id
    }
    // $( ".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\" draggable=\"true\" 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\" draggable=\"true\" 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\" draggable=\"true\" 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\" draggable=\"true\" 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\" draggable=\"false\" 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\" draggable=\"false\" 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 : 对应颜色

-->