Cold_Api/views/Panel/说明.html

<!--<script src="http://192.168.1.70:8500/static/panel/jquery.min.js" type="text/javascript"></script>-->
<!-- 通讯协议标准
    头：sn+ch      如： A0000001v_xx_1

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

-->

<!--    自动表单
数据类型:
sn: 选择设备
snlist: 选择设备(多选) |分割
tab:基于 sn 通道选择
text:文字（多行）
str:文本
int:整数
folat:小数
img:图片
font:字体
imglist:图片列表   .png|.png|.png|.png|.png|.png|
color:颜色
pane:面板

定义变量：
!命名规则: 只准许 【小写字母 数值】 不能出现 任何特殊符号，
!隐藏表单: 在动态变量名 前面加_    如：  _sn_sn
!提示标题: 在动态变量名 后面加_提示内容    如：  w_int_宽度
sn_sn  (动态变量名)_(数据类型)
sn_sn="xxx"  //设备 SN
tab_tab="xxx"
text1_text="xxx"
img1_img="xxx"
img1_imglist=".png|.png|.png|.png|.png|.png|"
text1_textlist="text1|text2|text3|text4|text5|text6|"

{"sn_sn":"866222050911984","tab_tab":"v_do_2","text1_text":"替换的文本"}

变量：
[{动态变量名}]  如：[{tab}]

层全局变量：
[-{sn}-]

公共变量：
[{ID}]
[{USER_UUID}]   当期用户 UUID




订阅：
sn/tab  如:866222050911984/v_do


 -->



<!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_1","text1_text":"替换的文本"}  data-->
<div >
    <span>这里是 [{text1}]<span id="xxxxx[{ID}]">xxx</span></span>
    <script>
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到2：${T_value}`);
                $("#xxxxx[{ID}]").html(T_value)
            })
        },2000);
    </script>
</div>


<!--文字-->
<!--data   {"text_text_替换内容":"替换的文本","color_color_字体颜色":"","size_int_字体大小":"20","font_font":"123"}  data-->
<div >
    <style> @font-face{ font-family:font_[{ID}];  src: url('123') }</style>
    <span id="text[{ID}]" style="font-family: font_[{ID}];font-size: [{size}]px;color: [{color}];">[{text}]</span>
</div>



<!--图片-->
<!--data   {"url_img":"https://standardoss.baozhida.cn/UpImage/76d52805-4540-4589-9f60-ece1cfd51a41.png"}  data-->
<div>
    <img src="[{url}]" width="100%" height="100%">
</div>



<!--背景图片-->
<!--data   {"url_img":"https://standardoss.baozhida.cn/UpImage/1652941123f122d0c4-8bd9-476c-a110-425e882a64d4.svg"}  data-->
<div  style="background: rgba(0, 0, 0, 0) url('[{url}]') repeat scroll 0% 0%;width: 100%;height: 100%">
    <div></div>
</div>

<!--data  {}  data-->
<div >
</div>

<!--面板页面-->
<!--data   {"pane_pane":"","url_img":"https://standardoss.baozhida.cn/UpImage/1655261167cba53203-8326-49ea-82d7-5563ead17bc0.png"}  data-->
<div>
    <img src="[{url}]" onclick="window.location.href="../../Panel/Index?T_viewid=[{pane}]';"  width="100%" height="100%">
</div>

<!--图片组[数据]-->
<!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_1","img1_imglist":"https://standardoss.baozhida.cn/UpImage/93784cea-5cc7-433f-849d-991a6e56e979.png|"}  data-->
<div >
    <img id="img[{ID}]" src="https://standardoss.baozhida.cn/UpImage/76d52805-4540-4589-9f60-ece1cfd51a41.png" width="100%" height="100%">
    <script>
        v[{ID}]img_str = "[{img1}]"
        v[{ID}]img_list = v[{ID}]img_str.split("|")
        $("#img[{ID}]").attr("src",v[{ID}]img_list[0])
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#img[{ID}]").attr("src",v[{ID}]img_list[parseInt(T_value)])
            })
        },2000);
    </script>
</div>


<!--文字组[数据]-->
<!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_1","text1_textlist":"等待|"}  data-->
<div >
    <span id="text[{ID}]">xxx</span>
    <script>
        v[{ID}]text_str = "[{text1}]"
        v[{ID}]text_list = v[{ID}]text_str.split("|")
        $("#text[{ID}]").html(v[{ID}]text_list[0])
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#text[{ID}]").html(v[{ID}]text_list[parseInt(T_value)])
            })
        },2000);
    </script>
</div>

<!--文字[获取设备名称]-->
<!--data   {"sn_sn":"[-{sn}-]","color_color_字体颜色":"","size_int_字体大小":"20","font_font":""}  data-->
<div style="padding-top: 4px;">
    <style> @font-face{ font-family:font_[{ID}];  src: url('[{font}]') }</style>

    <span id="text[{ID}]" style="font-family: font_[{ID}];font-size: [{size}]px;color: [{color}];">设备名称</span>
    <script>

        $("#text[{ID}]").html("")
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/Device_name', T_value => {
                console.log(`收到：${T_value}`);
                $("#text[{ID}]").html(T_value)
            })
        },2000);
    </script>
</div>


<!--数值[数据]-->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"n_temp_2","color_color_字体颜色":"","size_int_字体大小":"20","font_font":"https://standardoss.baozhida.cn/shumaguan.ttf"}  data-->
<div style="padding-top: 4px;">
    <style> @font-face{ font-family:font_[{ID}];  src: url('[{font}]') }</style>

    <span id="text[{ID}]" style="font-family: font_[{ID}];font-size: [{size}]px;color: [{color}];">xxx</span>
    <script>

        $("#text[{ID}]").html("")
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#text[{ID}]").html(T_value)
            })
        },2000);
    </script>
</div>


<!--触发开关[数据]-->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","img1_imglist":"https://standardoss.baozhida.cn/UpImage/300f1259-e12f-46a9-b9df-4021104e29ea.png|https://standardoss.baozhida.cn/UpImage/f52edbf2-7f87-4340-a6b8-e280bc7aae06.png|"}  data-->
<div >
    <img id="switch[{ID}]" onclick="f_switch[{ID}]_on()" style="user-select: auto;" src="https://standardoss.baozhida.cn/UpImage/f52edbf2-7f87-4340-a6b8-e280bc7aae06.png" width="100%" height="100%">
    <script>
        v[{ID}]img_str = "[{img1}]"
        v[{ID}]img_list = v[{ID}]img_str.split("|")
        v[{ID}]value = 1

        $("#img[{ID}]").attr("src",v[{ID}]img_list[0])
        if(Public_Value_map.has('[{sn}]/[{tab}]')){                 //判断映射是否存在
            v[{ID}]value = parseInt(Public_Value_map.get('[{sn}]/[{tab}]'))
            f_switch[{ID}]_show()
        }
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                v[{ID}]value = parseInt(T_value)
                f_switch[{ID}]_show()
            })
        },2000);

        function f_switch[{ID}]_on() {
            console.log("v[{ID}]value:",v[{ID}]value)
            if(v[{ID}]value == 0){
                v[{ID}]value = 1
                f_Data_Write("switch[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
            }else{
                v[{ID}]value = 0
                f_Data_Write("switch[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
            }
        }
        function f_switch[{ID}]_show() {

            $("#switch[{ID}]").attr("src",v[{ID}]img_list[v[{ID}]value])
        }

    </script>
</div>

<!--触发开关(提示版)[数据]-->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","img1_imglist":"https://standardoss.baozhida.cn/UpImage/300f1259-e12f-46a9-b9df-4021104e29ea.png|https://standardoss.baozhida.cn/UpImage/f52edbf2-7f87-4340-a6b8-e280bc7aae06.png|"}  data-->
<div >
    <img id="switch[{ID}]" onclick="f_switch[{ID}]_on()" style="user-select: auto;" src="https://standardoss.baozhida.cn/UpImage/f52edbf2-7f87-4340-a6b8-e280bc7aae06.png" width="100%" height="100%">
    <div style=""> </div>


    <script>
        v[{ID}]img_str = "[{img1}]"
        v[{ID}]img_list = v[{ID}]img_str.split("|")
        v[{ID}]value = 1

        $("#img[{ID}]").attr("src",v[{ID}]img_list[0])
        if(Public_Value_map.has('[{sn}]/[{tab}]')){                 //判断映射是否存在
            v[{ID}]value = parseInt(Public_Value_map.get('[{sn}]/[{tab}]'))
            f_switch[{ID}]_show()
        }
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                v[{ID}]value = parseInt(T_value)
                f_switch[{ID}]_show()
            })
        },2000);

        function f_switch[{ID}]_on() {

            $("body").append('<div id="switch[{ID}]_Tips" style="padding: 10px;text-align: center;user-select: none;position: absolute;left: '+$("#switch[{ID}]").offset().left+'px;top: '+$("#switch[{ID}]").offset().top+'px;z-index: 999999999999999;width: 142px;height: 100px;background-color:rgba(238,238,238,0.62);border-radius: 5px;">' +
                '<h3>确定操作</h3>' +
                '<button style="border-color: #1E9FFF;background-color: #1E9FFF;color: #fff;height: 28px;line-height: 28px;margin: 0 6px;padding: 0 15px;border: 1px solid #dedede;" ' +
                '   onclick="f_switch[{ID}]_yes()">确定</button>' +
                '<button style="border-color: #FF1E1E;background-color: #FF1E1E;color: #fff;height: 28px;line-height: 28px;margin: 0 6px;padding: 0 15px;border: 1px solid #dedede;"' +
                ' onclick="f_switch[{ID}]_no()">取消</button>' +
                '</div>')

        }
        function f_switch[{ID}]_yes() {
            console.log("v[{ID}]value:",v[{ID}]value)
            if(v[{ID}]value == 0){
                v[{ID}]value = 1
                f_Data_Write("switch[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
            }else{
                v[{ID}]value = 0
                f_Data_Write("switch[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
            }
            $("#switch[{ID}]_Tips").remove()
        }
        function f_switch[{ID}]_no() {
            $("#switch[{ID}]_Tips").remove()
        }
        function f_switch[{ID}]_show() {

            $("#switch[{ID}]").attr("src",v[{ID}]img_list[v[{ID}]value])
        }

    </script>
</div>



<!--触发模式[数据]-->
<!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_1","img1_imglist":"https://standardoss.baozhida.cn/UpImage/c14655ce-e357-44c0-b1a7-8d57df82593a.png|"}  data-->
<div >
    <img id="mode[{ID}]" onclick="f_mode[{ID}]_on()" style="user-select: auto;" src="https://standardoss.baozhida.cn/UpImage/c14655ce-e357-44c0-b1a7-8d57df82593a.png" width="100%" height="100%">
    <script>
        v[{ID}]img_str = "[{img1}]"
        v[{ID}]img_list = v[{ID}]img_str.split("|")
        v[{ID}]value = 0

        $("#img[{ID}]").attr("src",v[{ID}]img_list[0])
        if(Public_Value_map.has('[{sn}]/[{tab}]')){                 //判断映射是否存在
            v[{ID}]value = parseInt(Public_Value_map.get('[{sn}]/[{tab}]'))
            f_mode[{ID}]_show()
        }
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                v[{ID}]value = parseInt(T_value)
                f_mode[{ID}]_show()
            })
        },2000);

        function f_mode[{ID}]_on() {

            console.log("v[{ID}]value:",v[{ID}]value)
            console.log("v[{ID}]img_list.length:",v[{ID}]img_list.length)

            if(v[{ID}]img_list.length < v[{ID}]value+1){
                v[{ID}]value = 0
                f_Data_Write("mode[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
                return;
            }
            if(v[{ID}]img_list[v[{ID}]value+1].length <= 3){
                v[{ID}]value = 0
                f_Data_Write("mode[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)
                return;
            }
            v[{ID}]value += 1
            f_Data_Write("mode[{ID}]","[{sn}]","[{tab}]",v[{ID}]value)

        }
        function f_mode[{ID}]_show() {

            $("#mode[{ID}]").attr("src",v[{ID}]img_list[v[{ID}]value])
        }

    </script>
</div>




<!-- 数值加减 -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","max_int":"100","min_int":"0"}  data-->
<div >
    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/NumBox/Panel_number-box.css">


    <div id="Panel_on_number_[{ID}]" class="Panel_number-box">
        <input type="button" class="Panel_on-number" onclick="Panel_number[{ID}]_on(this)" value="-" data-v="-1">
        <input id="Panel_on_number_[{ID}]_v" type="text" value="0" >
        <input type="button" class="Panel_on-number" onclick="Panel_number[{ID}]_on(this)" value="+" data-v="1">
    </div>

    <script>
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#Panel_on_number_[{ID}]_v").val(parseInt(T_value))
            })
        },2000);

        function Panel_number[{ID}]_on(this_) {
            var $val = $(this_).siblings("input[type='text']"),val = parseInt($val.val(), 10) + parseInt($(this_).data("v"));
            V_num = isNaN(val) ? 0 : val

            if([{max}] < V_num ){
                V_num = [{max}]
            }
            if([{min}] > V_num ){
                V_num = [{min}]
            }
            $val.val(V_num);
            f_Data_Write("Panel_on_number_[{ID}]","[{sn}]","[{tab}]",V_num)
        };
    </script>
</div>



<!--数值[数据]-->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"n_temp_2","color_color_字体颜色":"","size_int_字体大小":"20","font_font":"https://standardoss.baozhida.cn/shumaguan.ttf"}  data-->
<div style="padding-top: 4px;">

</div>


<!-- 弹窗-数值加减 -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","max_int_最高温度":"100","min_int_最低温度":"0","color_color_字体颜色":"","size_int_字体大小":"20","font_font":"https://standardoss.baozhida.cn/shumaguan.ttf"}  data-->
<div >
    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/NumBox/Panel_number-box.css">

    <style> @font-face{ font-family:font_[{ID}];  src: url('[{font}]') }</style>

    <span id="text[{ID}]" style="font-family: font_[{ID}];font-size: [{size}]px;color: [{color}];"  onclick="f_open_control_[{ID}]_on()">xxx</span>
    <script>

        $("#text[{ID}]").html("")

        var T_value_[{ID}]_v = 0
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#text[{ID}]").html(T_value)
                T_value_[{ID}]_v = parseInt(T_value)

            })
        },2000);

        function Panel_number[{ID}]_on(this_) {
            var $val = $(this_).siblings("input[type='text']"),val = parseInt($val.val(), 10) + parseInt($(this_).data("v"));
            V_num = isNaN(val) ? 0 : val

            if([{max}] < V_num ){
                V_num = [{max}]
            }
            if([{min}] > V_num ){
                V_num = [{min}]
            }
            $val.val(V_num);
        };

        function f_button_[{ID}]_on() {
            f_Data_Write("Panel_on_number_[{ID}]_v","[{sn}]","[{tab}]",$("#Panel_on_number_[{ID}]_v").val())
            layer.close(layer_[{ID}]_id)
        }
        var layer_[{ID}]_id

        layer_[{ID}]_html = "<div id=\"open_control_[{ID}]\" style=\"width: 200px;height: 150px;text-align: center\">\n" +
            "        <div class=\"Panel_number-box\" style=\"width: 132px;margin-top: 30px\">\n" +
            "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"-\" data-v=\"-1\">\n" +
            "            <input id=\"Panel_on_number_[{ID}]_v\" type=\"text\" value=\""+T_value_[{ID}]_v+"\" >\n" +
            "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"+\" data-v=\"1\">\n" +
            "        </div>\n" +
            "        <div style=\"width: 132px;margin-top: 30px;margin: 10px auto\">\n" +
            "            <button onclick=\"f_button_[{ID}]_on()\" style=\"height: 28px;margin-top: 10px;line-height: 28px;border: 1px solid transparent;padding: 0 18px;background-color: #1E9FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 12px;border-radius: 2px;cursor: pointer;\">确定</button>\n" +
            "        </div>\n" +
            "    </div> <script>\n" +
        "        $(\"#Panel_on_number_[{ID}]_v\").val(parseInt(T_value_[{ID}]_v))\n" +"  <\/script>"
        function f_open_control_[{ID}]_on() {
            layer_[{ID}]_id = layer.open({
                title: '设置',
                type: 1,
                fix: false, //不固定
                maxmin: false,
                content: layer_[{ID}]_html,
                shadeClose:true,
                anim: 1,
                isOutAnim: false,
                Boolean:false,
                success: function (layero, index) {
                },
                end: function () {
                }
            });
        }

    </script>



</div>


<!-- 设备设置 -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","url_img":"https://standardoss.baozhida.cn/UpImage/d78f68bf-a06c-45ce-9eab-a45b1ce3dec7.png"}  data-->
<div>
    <img src="[{url}]" width="100%" height="100%" onclick="f_open_control_[{ID}]_on()">
    <script>
        function f_open_control_[{ID}]_on() {
            tab = "[{tab}]".split("_")
            layer.open({
                title: "设备参数配置",
                type: 2,
                area: ['500px', '630px'],
                fix: false, //不固定
                maxmin: false,
                content: "../../DeviceCh/DeviceChParameter_Html?T_sn=[{sn}]&T_tab="+tab[0]+"_"+tab[1]+"&T_ch="+tab[2],
                shadeClose:true,
                anim: 1,
                isOutAnim: false,
            });
        }
    </script>
</div>

<!-- 折线图-牵引格栅  -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_temp_1","max_int_最大值":"0","min_int_最小值":"0"}  data-->
<div>
    <div style="width: 100%">
        <svg id="chart-[{ID}]" viewBox="0 0 80 40">
        </svg>
    </div>

    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/modernizr/css/drawGridStyle.css" media="screen" type="text/css" />
    <script src='[{OSS_Static}]/panel/jquery.min.js'></script>
    <script src='[{OSS_Static}]/panel/lib/modernizr/js/snap.svg-min.js'></script>
    <script src="[{OSS_Static}]/panel/lib/modernizr/js/drawGrid.js"></script>
    <script>
        var chart_[{ID}]_list = [
            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0,0,0,0,1,
        ];
        $.ajax({
            type: 'POST',
            url: '../../Data/Data_List',//发送请求
            data: {
                T_sn: '[{sn}]',
                T_tab: "[{tab}]",
                page: 1,
                page_z: chart_[{ID}]_list.length,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    if(result.Data.List == null){
                        return
                    }
                    for (var i = 0; i < result.Data.List.length; i++){
                        T_value = parseFloat(result.Data.List[i].T_value)
                        chart_[{ID}]_list.shift();
                        chart_[{ID}]_list.push(T_value)
                    }
                }
            }
        });

        drawGrid('#chart-[{ID}]');
        drawLineGraph('#chart-[{ID}]', chart_[{ID}]_list,  1);
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                chart_[{ID}]_list.shift();
                chart_[{ID}]_list.push(parseFloat(T_value))
                if(Math.abs(Math.max.apply(Math,chart_[{ID}]_list) - Math.min.apply(Math,chart_[{ID}]_list)) > 0 ){
                    drawGrid('#chart-[{ID}]');
                    drawLineGraph('#chart-[{ID}]', chart_[{ID}]_list,  1,[{max}],[{min}]);
                }
            })
        },2000);
    </script>
</div>

<!-- 折线图-牵引格栅-时间  -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_temp_1","time_int_间隔时间s":"2","max_int_最大值":"0","min_int_最小值":"0"}  data-->
<div>
    <div style="width: 100%">
        <svg id="chart-[{ID}]" viewBox="0 0 80 40">
        </svg>
    </div>

    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/modernizr/css/drawGridStyle.css" media="screen" type="text/css" />
    <script src='[{OSS_Static}]/panel/jquery.min.js'></script>
    <script src='[{OSS_Static}]/panel/lib/modernizr/js/snap.svg-min.js'></script>
    <script src="[{OSS_Static}]/panel/lib/modernizr/js/drawGrid.js"></script>
    <script>

        var chart_[{ID}]_list = [
            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0,0,0,0,1,
        ];
        var chart_[{ID}]_v = 0
        $.ajax({
            type: 'POST',
            url: '../../Data/Data_List',//发送请求
            data: {
                T_sn: '[{sn}]',
                T_tab: "[{tab}]",
                page: 1,
                page_z: chart_[{ID}]_list.length,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    if(result.Data.List == null){
                        return
                    }
                    for (var i = 0; i < result.Data.List.length; i++){
                        T_value = parseFloat(result.Data.List[i].T_value)
                        chart_[{ID}]_list.shift();
                        chart_[{ID}]_list.push(T_value)
                        chart_[{ID}]_v = T_value
                    }
                }
            }
        });


        drawGrid('#chart-[{ID}]');
        drawLineGraph('#chart-[{ID}]', chart_[{ID}]_list,  1);
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                chart_[{ID}]_v = T_value
            })
        },2000);

        setInterval(function(){
            chart_[{ID}]_list.shift();
            chart_[{ID}]_list.push(parseFloat(chart_[{ID}]_v))
            if(Math.abs(Math.max.apply(Math,chart_[{ID}]_list) - Math.min.apply(Math,chart_[{ID}]_list)) > 0 ){
                drawGrid('#chart-[{ID}]');
                drawLineGraph('#chart-[{ID}]', chart_[{ID}]_list,  1,[{max}],[{min}]);
            }
        },[{time}] * 1000);
    </script>
</div>


<!-- 柱状图-水位 -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"n_temp_2","width_int_宽度":"200","height_int_高度":"300","color_color":"skyblue","formula_str_公式":"T_value"}  data-->
<div>
    <div class="tank waterTankHere[{ID}]"></div>

    <script src="[{OSS_Static}]/panel/jquery.min.js" type="text/javascript"></script>
    <script src="[{OSS_Static}]/panel/lib/Poolhistogram/js/waterTank.js"></script>
    <script>
        $('.waterTankHere[{ID}]').waterTank({
            width: [{width}],
            height: [{height}],
            color: '[{color}]',
            level: 100
        })
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                T_value = parseInt(T_value)
                $('.waterTankHere[{ID}]').waterTank([{formula}]);
            })
        },2000);

    </script>
</div>



<!-- 弹窗-数值加减 -->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","max_int":"100","min_int":"0","url_img":"https://standardoss.baozhida.cn/UpImage/54353e11-37e4-4b15-84f5-4e91b4c1282e.png"}  data-->
<div >
    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/NumBox/Panel_number-box.css">

    <img src="[{url}]" width="100%" height="100%" onclick="f_open_control_[{ID}]_on()">

    <script>
        var T_value_[{ID}]_v = 0
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                T_value_[{ID}]_v = parseInt(T_value)
                $("#Panel_on_number_[{ID}]_v").val(parseInt(T_value))
            })
        },2000);

        function Panel_number[{ID}]_on(this_) {
            var $val = $(this_).siblings("input[type='text']"),val = parseInt($val.val(), 10) + parseInt($(this_).data("v"));
            V_num = isNaN(val) ? 0 : val

            if([{max}] < V_num ){
                V_num = [{max}]
            }
            if([{min}] > V_num ){
                V_num = [{min}]
            }
            $val.val(V_num);
        };

        function f_button_[{ID}]_on() {
            f_Data_Write("open_control_[{ID}]","[{sn}]","[{tab}]",$("#Panel_on_number_[{ID}]_v").val())
            layer.close(layer_[{ID}]_id)
        }
        var layer_[{ID}]_id

        layer_[{ID}]_html = "<div id=\"open_control_[{ID}]\" style=\"width: 200px;height: 150px;text-align: center\">\n" +
            "        <div class=\"Panel_number-box\" style=\"width: 132px;margin-top: 30px\">\n" +
            "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"-\" data-v=\"-1\">\n" +
            "            <input id=\"Panel_on_number_[{ID}]_v\" type=\"text\" value=\""+T_value_[{ID}]_v+"\" >\n" +
        "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"+\" data-v=\"1\">\n" +
        "        </div>\n" +
        "        <div style=\"width: 132px;margin-top: 30px;margin: 10px auto\">\n" +
        "            <button onclick=\"f_button_[{ID}]_on()\" style=\"height: 28px;margin-top: 10px;line-height: 28px;border: 1px solid transparent;padding: 0 18px;background-color: #1E9FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 12px;border-radius: 2px;cursor: pointer;\">确定</button>\n" +
        "        </div>\n" +
        "    </div> <script>\n" +
        "        $(\"#Panel_on_number_[{ID}]_v\").val(parseInt(T_value_[{ID}]_v))\n" +"  <\/script>"
        function f_open_control_[{ID}]_on() {
            layer_[{ID}]_id = layer.open({
                title: '设置',
                type: 1,
                fix: false, //不固定
                maxmin: false,
                content: layer_[{ID}]_html,
                shadeClose:true,
                anim: 1,
                isOutAnim: false,
                Boolean:false,
                success: function (layero, index) {
                },
                end: function () {
                }
            });
        }

    </script>



</div>


<!--数值-可设定-->
<!--data   {"sn_sn":"[-{sn}-]","tab_tab":"v_do_1","max_int_最高温度":"100","min_int_最低温度":"0","color_color_字体颜色":"","size_int_字体大小":"20","font_font":"https://standardoss.baozhida.cn/shumaguan.ttf"}  data-->
<div >
    <link rel="stylesheet" href="[{OSS_Static}]/panel/lib/NumBox/Panel_number-box.css">

    <style> @font-face{ font-family:font_[{ID}];  src: url('[{font}]') }</style>

    <span id="text[{ID}]" style="font-family: font_[{ID}];font-size: [{size}]px;color: [{color}];"  onclick="f_open_control_[{ID}]_on()">xxx</span>
    <script>

        $("#text[{ID}]").html("")

        var T_value_[{ID}]_v = 0
        // 这里要加延时
        setTimeout(function(){
            // 订阅
            pubSub.subscribe('[{sn}]/[{tab}]', T_value => {
                console.log(`收到：${T_value}`);
                $("#text[{ID}]").html(T_value)
                T_value_[{ID}]_v = parseInt(T_value)

            })
        },2000);

        function Panel_number[{ID}]_on(this_) {
            var $val = $(this_).siblings("input[type='text']"),val = parseInt($val.val(), 10) + parseInt($(this_).data("v"));
            V_num = isNaN(val) ? 0 : val

            if([{max}] < V_num ){
                V_num = [{max}]
            }
            if([{min}] > V_num ){
                V_num = [{min}]
            }
            $val.val(V_num);
        };

        function f_button_[{ID}]_on() {
            f_Data_Write("text[{ID}]","[{sn}]","[{tab}]",$("#Panel_on_number_[{ID}]_v").val())
            layer.close(layer_[{ID}]_id)
        }
        var layer_[{ID}]_id

        layer_[{ID}]_html = "<div id=\"open_control_[{ID}]\" style=\"width: 200px;height: 150px;text-align: center\">\n" +
            "        <div class=\"Panel_number-box\" style=\"width: 132px;margin-top: 30px\">\n" +
            "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"-\" data-v=\"-1\">\n" +
            "            <input id=\"Panel_on_number_[{ID}]_v\" type=\"text\" value=\""+T_value_[{ID}]_v+"\" >\n" +
        "            <input type=\"button\" class=\"Panel_on-number\" onclick=\"Panel_number[{ID}]_on(this)\" value=\"+\" data-v=\"1\">\n" +
        "        </div>\n" +
        "        <div style=\"width: 132px;margin-top: 30px;margin: 10px auto\">\n" +
        "            <button onclick=\"f_button_[{ID}]_on()\" style=\"height: 28px;margin-top: 10px;line-height: 28px;border: 1px solid transparent;padding: 0 18px;background-color: #1E9FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 12px;border-radius: 2px;cursor: pointer;\">确定</button>\n" +
        "        </div>\n" +
        "    </div> <script>\n" +
        "        $(\"#Panel_on_number_[{ID}]_v\").val(parseInt(T_value_[{ID}]_v))\n" +"  <\/script>"
        function f_open_control_[{ID}]_on() {
            layer_[{ID}]_id = layer.open({
                title: '设置',
                type: 1,
                fix: false, //不固定
                maxmin: false,
                content: layer_[{ID}]_html,
                shadeClose:true,
                anim: 1,
                isOutAnim: false,
                Boolean:false,
                success: function (layero, index) {
                },
                end: function () {
                }
            });
        }

    </script>



</div>



<script>

    $("body").append('<div style="user-select: none;position: absolute;left: 539px;top: 223px;z-index: 999999999999999;width: 20px;height: 20px;background-color: rgba(231,0,62,0.97);">1</div>')

</script>



<!-- 发布订阅模式


pubSub.publish('866222050911984/v_do_4', '06:00:00');




-->





<!--data   {"pane_pane":"","url_img":"https://standardoss.baozhida.cn/UpImage/1655261167cba53203-8326-49ea-82d7-5563ead17bc0.png"}  data-->
<div>
    <img src="[{url}]" onclick="window.location.href='../../Panel/Index_plan?T_viewid=[{pane}]';"  width="100%" height="100%">
</div>