Cold_Api/static/panel/PanelCanvas.js

//初始化计数器
var PanelCanvas_num = 0;

var PanelCanvas_z = 100;



var f_canvas2 = function(top,left,width,height,index_z,value_map,P_css)  {
    PanelCanvas_num += 1;
    if(value_map.length < 2){
        value_map = "{}"
    }
    var obj = {
        PanelCanvas_id : "PanelCanvas"+PanelCanvas_num,
        PanelCanvas_list : [],
        PanelCanvas_curNum : [],
        PanelCanvas_width : width,
        PanelCanvas_height : height,
        PanelCanvas_css:P_css,
        PanelCanvas_z:index_z,
        PanelCanvas_map:JSON.parse(value_map),
    }

    //初始化计数器
    var basic_num = PanelCanvas_num*1000;
    var num = 0;

    console.log("obj.PanelCanvas_id:",obj.PanelCanvas_id)

    var PanelCanvas_P = $("<div onclick=\"V_PanelCanvas_id = \'"+obj.PanelCanvas_id+"\'\" id=\""+obj.PanelCanvas_id+"\" " +
        // " ondragenter =\"f_ondragenter(\'"+obj.PanelCanvas_id+"\')\" " +
        // " ondragover =\" f_ondragover(\'"+obj.PanelCanvas_id+"\')  \" " +
        // " ondragleave =\"f_ondragleave(\'"+obj.PanelCanvas_id+"\')\" " +
        // " onmouseover =\"f_PanelCanvas_onmouseover()\" " +
        // " onmouseout =\"f_PanelCanvas_onmouseout()\" " +
        "  class='PanelCanvas_div'   style=\"left: "+left+"px;top: "+top+"px;z-index: "+obj.PanelCanvas_z+";width: "+width+"px;height: "+height+"px;" +
        " \">" +
        "</div>").appendTo("#PanelCanvas");
    console.log(PanelCanvas_P)
    // 更新 css 样式
    f_Up_css(obj.PanelCanvas_css,obj.PanelCanvas_id)


    // obj.PanelCanvas_id
    var pos = PanelCanvas_P.position();
    //加载layer拓展
    layer.config({
        extend: 'extend/layer.ext.js'
    });
    //右键菜单参数
    context.init({
        fadeSpeed: 100,
        filter: function ($obj) {},
        above: 'auto',
        preventDoubleContext: true,
        compress: false
    });
    //创建右键菜单
    if(!PanelCanvas_lock){
        context.attach('#'+obj.PanelCanvas_id, [
            {header: '操作'},
            {
                text: '数据源', action: function (e) {
                    e.preventDefault();

                    console.log("map_:",obj.PanelCanvas_id,obj.PanelCanvas_map)
                    layer.opendynamicparameter({
                        value: obj.PanelCanvas_map,
                        value_map: obj.PanelCanvas_map
                    }, function (value, index, elem) {
                        console.log(value)
                        // <!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_2","text1_text":"替换的文本"}  data-->

                        obj.PanelCanvas_map = JSON.parse(JSON.stringify(value))


                        // 替换 所有 组件
                        for (var i=0;i<obj.PanelCanvas_list.length;i++){
                            console.log("替换 所有 组件:",i,obj.PanelCanvas_list[i],obj.PanelCanvas_curNum[i])
                            sts_html = f_html_replace(obj,obj.PanelCanvas_list[i],obj.PanelCanvas_curNum[i])
                            console.log("最终 HTML：",sts_html)
                            $('.box[rel=' + obj.PanelCanvas_curNum[i] + '] .PanelCanvas_text').html(sts_html)
                        }

                        layer.close(index);
                    });

                }
            },
            {divider: true},
            {
                text: '上一层', action: function (e) {
                    e.preventDefault();
                    console.log("obj.PanelCanvas_id:",PanelCanvas_P)
                    PanelCanvas_P.css('z-index', '+=1');
                    obj.PanelCanvas_z = parseInt(PanelCanvas_P.css('z-index'));
                }
            },
            {
                text: '当前层->', action: function (e) {
                    e.preventDefault();
                    layer.prompt({
                        title: '请输入层 (数值越高在上面)',
                        formType: 0,
                        value: obj.PanelCanvas_z
                    }, function (value, index, elem) {
                        PanelCanvas_P.css('z-index', parseInt(value));
                        obj.PanelCanvas_z = parseInt(PanelCanvas_P.css('z-index'));
                        layer.close(Index);
                    });
                }
            },
            {
                text: '下一层', action: function (e) {
                    e.preventDefault();
                    console.log("obj.PanelCanvas_id:",PanelCanvas_P)
                    PanelCanvas_P.css('z-index', '-=1');
                    obj.PanelCanvas_z = parseInt(PanelCanvas_P.css('z-index'));
                }
            },
            {
                text: '更改当前层尺寸', action: function (e) {
                    e.preventDefault();
                    layer.prompt({
                        title: '请输入区域尺寸（宽,高），最小值：2',
                        formType: 0,
                        value: Math.round($('#'+obj.PanelCanvas_id).width()) + "," + Math.round($('#'+obj.PanelCanvas_id).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 = $('#'+obj.PanelCanvas_id);
                        box.css({
                            width: size[0] < 2 ? 2 : size[0],
                            height: size[1] < 2 ? 2 : size[1]
                        });
                        obj.PanelCanvas_width = size[0];
                        obj.PanelCanvas_height = size[1];
                        layer.close(Index);
                    });
                }
            },
            {
                text: '删除区域', action: function (e) {
                    e.preventDefault();
                    PanelCanvas_P.remove();
                    V_PanelCanvas_Map.delete(obj.PanelCanvas_id)
                }
            },
            {divider: true},
            {
                text: 'CSS样式', action: function (e) {
                    e.preventDefault();
                    $("#open_layer_css_layer_textarea").val(obj.PanelCanvas_css)
                    f_attribute_css_inti() // 初始化 CSS 自定义样式
                    console.log("PanelCanvas_css:",obj)
                    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) {

                            obj.PanelCanvas_css = $("#open_layer_css_layer_textarea").val()
                            // console.log("open_layer_css_layer_textarea:",obj.PanelCanvas_css)
                            // // 更新 css 样式
                            f_Up_css(obj.PanelCanvas_css,obj.PanelCanvas_id)
                            layer.close(Index);

                        }
                    });
                }
            },
            {divider: true},
            {header: '高级'},
            {
                text: '自定义组件', action: function (e) {
                    e.preventDefault();
                    layer.prompt({
                        title: '自定义 HTML',
                        formType: 2,
                        value: ""
                    }, function (value, Index, elem) {
                        value_json = {text:value, rotate: 0, color: "rgb(105,209,255)", height: 100, width: 100, pageX: 29, pageY: 64}
                        obj.F_CreateBox(value_json)
                        layer.close(Index);

                    });
                }
            },
            {
                text: '保存为面板', action: function (e) {
                    e.preventDefault();
                    f_Save_layer(obj)
                }
            },

            {
                text: '新增数据源', action: function (e) {
                    e.preventDefault();
                    layer.prompt({
                        title: '请输入 变量名',
                        formType: 0,
                        value: ""
                    }, function (value, index, elem) {
                        console.log("新增数据源:",value)
                        obj.PanelCanvas_map[value] = ""
                        layer.close(index);
                    });
                }
            },
        ]);
    }

    // 添加组件
    obj.F_CreateBox = function (data) {
        var html = data.text || '';
        var rotate = data.rotate || '';
        var color = data.color || '';
        var height = data.height || 0;
        var width = data.width || 0;
        var pageX = data.pageX || 0;
        var pageY = data.pageY || 0;
        console.log("obj.PanelCanvas_id:",obj.PanelCanvas_id)
        //更新计数器并记录当前计数
        var curNum = basic_num + num;
        //创建区域块
        console.log("box:",curNum)
        coor = ""
        if(!PanelCanvas_lock){
            coor = "<div class=\"coor transparent\"></div>"
        }
        //加入到数据缓存 列表
        obj.PanelCanvas_list.push(html)
        // 组件 内容解析 替换
        sts_html = f_html_replace(obj,html,curNum)
        obj.PanelCanvas_curNum.push(curNum)
        // 增加 组件
        var box = $('<div id="rel_' + curNum + '" class="box PanelCanvas_rel_div" rel="' + curNum + '" num="' + num + '" style="user-select: none;transform:rotate('+rotate+'deg);overflow:hidden;" >' +
            '<div class="PanelCanvas_text" style="text-align: center;position: absolute;z-index: 99;width: 100%;height: 100%"> ' + sts_html + ' </div>' +
            '<div class="bg transparent" style="background-color:' + color + '"></div> ' +
            ''+coor+'' +
            '</div>').css({
            width: width,
            height: height,
            top: pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
            left: pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
        }).appendTo("#"+obj.PanelCanvas_id);
        $("#"+obj.PanelCanvas_id).trigger("create");


        //
        // //计算文本位置
        // box.find('.content').css({
        //     marginLeft: box.find('.content').width() / 2 * -1,
        //     marginTop: box.find('.content').height() / 2 * -1
        // });

        //创建右键菜单
        if(!PanelCanvas_lock){
            context.attach('.box[rel=' + curNum + ']', [
                {header: '操作'},
                {
                    text: '数据源', action: function (e) {
                        e.preventDefault();
                        num_ = $('.box[rel=' + curNum + ']').attr("num")

                        console.log("num_:",num_,obj.PanelCanvas_list[num_])


                        sts_html = obj.PanelCanvas_list[num_]
                        if(sts_html.indexOf("<!--data") != 0){
                            return
                        }
                        str = sts_html.substring(sts_html.indexOf("<!--data") + 8,sts_html.indexOf("data-->"))
                        console.log(str)
                        str_json = JSON.parse(str)

                        opendynamicparameterID = layer.opendynamicparameter({
                            value: str_json,
                            value_map: obj.PanelCanvas_map
                        }, function (value, index, elem) {
                            console.log(value)
                            // <!--data   {"sn_sn":"866222050911984","tab_tab":"v_do_2","text1_text":"替换的文本"}  data-->

                            json_v = JSON.stringify(value)
                            json_v = "<!--data  "+json_v+"  data-->"
                            console.log(json_v)
                            num_ = $('.box[rel=' + curNum + ']').attr("num")

                            json_split = obj.PanelCanvas_list[num_].split("\n")
                            json_split[0] = json_v
                            json_str = json_split.join("\n")
                            console.log(json_str)

                            // 组件 内容解析 替换
                            obj.PanelCanvas_list[num_] = json_str
                            sts_html = f_html_replace(obj,json_str,curNum)
                            console.log(sts_html)
                            $('.box[rel=' + curNum + '] .PanelCanvas_text').html(sts_html)
                            console.log(index)
                            layer.close(index);
                        });

                        console.log("opendynamicparameterID   layer:",opendynamicparameterID)
                    }
                },
                {
                    text: '更改区域尺寸', action: function (e) {
                        e.preventDefault();
                        layer.prompt({
                            title: '请输入区域尺寸（宽,高），最小值：2',
                            formType: 0,
                            value: Math.round($('.box[rel=' + curNum + ']').width()) + "," + Math.round($('.box[rel=' + curNum + ']').height())
                        }, function (value, index, elem) {
                            var reg = /^[0-9]+,[0-9]+$/;
                            if (!reg.test(value)) {
                                alert('输入格式不正确，例：100,200');
                                return;
                            }
                            var size = value.split(',');
                            var box = $('.box[rel=' + curNum + ']');
                            box.css({
                                width: size[0] < 2 ? 2 : size[0],
                                height: size[1] < 2 ? 2 : size[1]
                            });
                            layer.close(index);
                        });
                    }
                },
                {
                    text: '当前旋转->', action: function (e) {
                        e.preventDefault();
                        var deg = $('.box[rel=' + curNum + ']').css("transform")
                        if(deg == "none"){
                            deg = 0
                        }else {
                            deg = eval(''+$('.box[rel=' + curNum + ']').css('transform')+"");//构造getmatrix函数,返回上次旋转度数
                        }
                        console.log(deg)

                        layer.prompt({
                            title: '请输入旋转角度 (单位：度)',
                            formType: 0,
                            value: deg
                        }, function (value, index, elem) {
                            $('.box[rel=' + curNum + ']').css('transform', 'rotate('+value+'deg)');

                            // layer.close(Index);
                        });
                    }
                },
                {
                    text: '删除区域', action: function (e) {
                        e.preventDefault();
                        $('.box[rel=' + curNum + ']').remove();
                    }
                },
                {divider: true},
                {header: '更改颜色'},
                {
                    text: '透明', action: function (e) {
                        e.preventDefault();
                        $('.box[rel=' + curNum + '] .bg').css('background-color', 'transparent');
                    }
                },
                {
                    text: '自定义', action: function (e) {
                        // e.preventDefault();
                        // $('.box[rel=' + curNum + '] .bg')
                        f_assembly_bcolor($('.box[rel=' + curNum + '] .bg'))
                    }
                }
            ]);
        }else {
            // context.attach('.box[rel=' + curNum + ']', [
            //     {header: '操作 '},
            //     {
            //         text: '编辑区域说明', action: function (e) {
            //             e.preventDefault();
            //             layer.prompt({
            //                 title: '请输入区域说明',
            //                 formType: 2,
            //                 value: $('.box[rel=' + curNum + '] .content').text()
            //             }, function (value, index, elem) {
            //                 layer.close(Index);
            //                 var curCont = $('.box[rel=' + curNum + '] .content');
            //                 curCont.text(value).css({
            //                     marginLeft: curCont.width() / 2 * -1,
            //                     marginTop: curCont.height() / 2 * -1
            //                 });
            //             });
            //         }
            //     },
            // ]);

        }
        num++;  // 编号 ++
    }

    //获取所有区块
    obj.F_get_box_json = function () {
        bimg = ""
        console.log($("#"+obj.PanelCanvas_id).css('background-color'))
        console.log($("#"+obj.PanelCanvas_id+"-img").attr("src"))
        if($("#"+obj.PanelCanvas_id+"-img").attr("src") != undefined){
            bimg = $("#"+obj.PanelCanvas_id+"-img").attr("src")
        }else {
            bimg = $("#"+obj.PanelCanvas_id).css('background-color')
        }

        PanelCanvas_top = $("#"+obj.PanelCanvas_id).css("top")
        PanelCanvas_left = $("#"+obj.PanelCanvas_id).css("left")


        var data = {
            PanelCanvas_top : parseInt(PanelCanvas_top.substring(0, PanelCanvas_top.length - 2)),
            PanelCanvas_left : parseInt(PanelCanvas_left.substring(0, PanelCanvas_left.length - 2)),
            PanelCanvas_width : obj.PanelCanvas_width,
            PanelCanvas_height : obj.PanelCanvas_height,
            PanelCanvas_z: obj.PanelCanvas_z,
            PanelCanvas_map: obj.PanelCanvas_map,
            PanelCanvas_css: obj.PanelCanvas_css,
            Data_list : []
        };

        console.log("obj.PanelCanvas_id:",obj.PanelCanvas_id)
        $('#'+ obj.PanelCanvas_id +' .box').each(function () {
            var box = {};
            box['rotate'] = 0;
            console.log($(this).css('transform'))
            if($(this).css('transform') != "none"){
                box['rotate'] = eval(''+$(this).css('transform'));
            }
            // box['text'] = $(this).find('.PanelCanvas_text').html();
            box['text'] = obj.PanelCanvas_list[$(this).attr("num")] ;
            box['color'] = $(this).find('.bg').css('background-color');
            box['height'] = $(this).height();
            box['width'] = $(this).width();
            box['pageX'] = parseFloat($(this).css("left")) ;
            box['pageY'] = parseFloat($(this).css("top"));
            // console.dir(box);
            data.Data_list.push(box);
        });
        return data
    }


    //创建拖拽方法
    if(!PanelCanvas_lock){
        $("#"+obj.PanelCanvas_id).mousedown(function(e){

            console.log("111")
            console.log(e)
            var canvas = $(this);
            e.preventDefault();
            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){
                    // console.log("posix:",e, posix)
                    canvas.css({
                        'cursor': 'move',
                        'top': e.pageY - posix.y,
                        'left': e.pageX - posix.x
                    });
                }, 'call_up' : function(){
                    canvas.css('cursor', 'default');
                }});
        }).on('mousedown', '.box', function(e) {
            console.log("222 .box")
            if(PanelCanvas_lock) return;
            var pos = $(this).position();

            this.posix = {'x': e.pageX - parseFloat($(this).css("left")), 'y': e.pageY - parseFloat($(this).css("top"))};
            $.extend(document, {'move': true, 'move_target': this});
            e.stopPropagation();
        }).on('mousedown', '.box .coor', function(e) {
            console.log("333 .box .coor")
            var $box = $(this).parent();
            var posix = {
                'w': $box.width(),
                'h': $box.height(),
                'x': e.pageX,
                'y': e.pageY
            };
            $.extend(document, {'move': true, 'call_down': function(e) {
                    $box.css({
                        'width': Math.max(10, e.pageX - posix.x + posix.w),
                        'height': Math.max(10, e.pageY - posix.y + posix.h)
                    });
                }});
            e.stopPropagation();
        });
    }


    return obj
};

// 替换 函数
function f_html_replace(obj,html,curNum) {
    var sts_html = html
    // 替换 全局ID
    reg = new RegExp("\\"+"[{ID}]","g");
    sts_html = sts_html.replace(reg,curNum);
    // 替换 全局 Tokey
    reg = new RegExp("\\"+"[{USER_UUID}]","g");
    sts_html = sts_html.replace(reg,USER_UUID);

    // 替换 全局 OSS 资源地址
    reg = new RegExp("\\"+"[{OSS_Static}]","g");
    sts_html = sts_html.replace(reg,OSS_Static);

    // 替换 全局变量
    for(var key in obj.PanelCanvas_map){
        console.log(key+':'+obj.PanelCanvas_map[key]);
        key_ = key
        if(key.charAt(0) == '_'){
            key_ = key_.substring(1,key.length-1)
        }
        key_list = key_.split("_");
        reg = new RegExp("\\"+"[-{"+key_list[0]+"}-]","g");
        sts_html = sts_html.replace(reg,obj.PanelCanvas_map[key]);
    }


    if(sts_html.indexOf("<!--data") == 0){
        str = sts_html.substring(sts_html.indexOf("<!--data") + 8,sts_html.indexOf("data-->"))
        console.log(str)
        str_json = JSON.parse(str)
        console.log("json:",str_json)
        for(var key in str_json){
            console.log(key+':'+str_json[key]);
            key_ = key
            if(key.charAt(0) == '_'){
                key_ = key_.substring(1,key.length-1)
            }
            key_list = key_.split("_");
            reg = new RegExp("\\"+"[{"+key_list[0]+"}]","g");
            sts_html = sts_html.replace(reg,str_json[key]);
        }
    }


    return sts_html
}

// 角度转换
function matrix(a,b,c,d,e,f){
    var aa=Math.round(180*Math.asin(a)/ Math.PI);
    var bb=Math.round(180*Math.acos(b)/ Math.PI);
    var cc=Math.round(180*Math.asin(c)/ Math.PI);
    var dd=Math.round(180*Math.acos(d)/ Math.PI);
    var deg=0;
    if(aa==bb||-aa==bb){
        deg=dd;
    }else if(-aa+bb==180){
        deg=180+cc;
    }else if(aa+bb==180){
        deg=360-cc||360-dd;
    }
    return deg>=360?0:deg;
    //return (aa+','+bb+','+cc+','+dd);
}



function f_Up_css(css_str,div_id) {
    console.log("css_:",css_str,css_str)
    if(css_str == undefined) return;
    css_str = css_str.replace(/\n/g,"");
    var css_list = css_str.split(";");
    div_obj = $("#"+div_id)
    for (var i_css = 0;i_css < css_list.length;i_css++){
        css_ = css_list[i_css].split(" : ");
        console.log("css_:",css_list[i_css])
        if(css_.length == 2){
            console.log("css_add:",css_[0], css_[1])
            div_obj.css(css_[0], css_[1]);
        }
    }
}