Apq
/
EasySpider
mirror of https://github.com/NaiboWang/EasySpider.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
							<!doctype html>
<html lang="en">
<head>
    <script src="jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <title>设计流程</title>
    <style>
        @font-face {
  font-family: 'Glyphicons Halflings';
  src: url('bootstrap/fonts/glyphicons-halflings-regular.eot');
  src: url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
        * {
            margin: 0;
            padding: 0;
            font-size: 17px!important;
        }
 
        div.node {
            height: 45px;
            width: 120px;
            border-radius: 7px;
            border:skyblue solid;
            background: rgb(73, 156, 189);
            color:white;
            text-align: center;
            padding: 5px;
            margin: 10px auto;
        }
        .arrow
        {
            margin: 10px auto;
            text-align: center;
            font-size: 23px!important;
            color:black;
        }
        .arrow:hover
        {
            background-color: deepskyblue;
            cursor: pointer;
            color:white;
        }
        .branchAdd
        {
            margin: 10px auto;
            text-align: center;
            font-size: 18px!important;
            color:black;
        }
        .branchAdd:hover
        {
            background-color: deepskyblue;
            cursor: pointer;
            color:white;
        }
        div.node:hover {
            cursor: pointer;
            background:navy;
        }
 
        .loop
        {
            border:skyblue solid;
            text-align: center;
            padding: 5px;
            width:80%;
            margin: 10px auto;
            border-radius: 7px;
        }
        .judge
        {
            display:flex;
            text-align: center;
            padding: 5px;
            width:100%;
            margin: 10px auto;
            justify-content: center; 
            border-radius: 7px;
        }
        .branch
        {
            margin: 5px;
            border:skyblue solid;
            text-align: center;
            padding: 5px;
            width:200px;
            min-width: 100px;
            margin: 10px;
            border-radius: 7px;
        }
        .sequence
        {
            display: block;
        }
        .toolbox button{
            margin-top: 5px;
            margin-left: 3px;
            margin-bottom: 5px;
            width:80%;
            font-size:15px!important;
        }
        .cancel:focus
        {
            box-shadow: none;
        }
    </style>

</head>
<body>
    <div style="display:flex">
<div style="width: 200px;float:left">
<div class="toolbox"  style="text-align:center;margin: 20px;border-radius:10px;border:navy solid;background-color:rgb(242,243,245);z-index: 9999;">
    <div style="padding: 10px;border-radius:10px;font-size: 20px;">工具箱</div>

    <button type="button" data = 1 class="btn btn-xs btn-outline-primary openPage">打开网页</button>
    <button type="button" data = 2 class="btn btn btn-outline-primary openPage">点击元素</button>
    <button type="button" data = 3 class="btn btn btn-outline-primary openPage">提取数据</button>
    <button type="button" data = 4 class="btn btn btn-outline-primary openPage">输入文字</button>
    <button type="button" data = 5 class="btn btn btn-outline-primary openPage">识别验证码</button>
    <button type="button" data = 6 class="btn btn btn-outline-primary openPage">切换下拉选项</button>
    <button type="button" data = 7 class="btn btn btn-outline-primary openPage">移动到元素</button>
    <button type="button" data = 8 class="btn btn btn-outline-primary openPage">循环</button>
    <button type="button" data = 9 class="btn btn btn-outline-primary openPage">判断条件</button>
    <div>-----------------</div>
    <button type="button" data = 10 class="btn btn btn-outline-primary openPage">剪切当前元素</button>
    <button type="button" data = 11 class="btn btn btn-outline-primary openPage">复制当前元素</button>
    <button type="button" data = 12 class="btn btn btn-outline-primary openPage">删除当前元素</button>
    <button type="button" data = 0 class="btn btn btn-outline-primary openPage cancel">取消操作</button>
    <div>-----------------</div>
    <div style="text-align: left;margin: 10px;font-size:15px!important">提示：点击上方操作按钮后点击要添加/剪切/复制的位置处的箭头，可按取消操作按钮取消。</div>
</div>
</div>
<div  style="margin-top:20px;border: solid;height:850px;overflow: auto;width:85%;float:right;min-width:800px">
<div id="0" >
</div>
<div style="border-radius: 50%;width: 40px;height: 40px;border:solid black;margin: 5px auto;background-color:lightcyan">
    <p style="font-size: 29px!important;text-align: center;margin-left: 1px;margin-top: -6px;">■</p>
</div>
</div>
</div>
</body>
</html>
<script>

    var first = {
        id:0,
        parentId:0,
        type:0,
        title:"打开网页1",
        sequence:[]
    };
    var second = {
        id:0,
        parentId:0,
        type:0,
        title:"点击元素2",
        sequence:[]
    };

    var fourth = {
        id:0,
        parentId:0,
        type:0,
        title:"关闭网页4",
        sequence:[]
    };
    var fifth = {
        id:0,
        parentId:0,
        type:0,
        title:"提取数据5",
        sequence:[]
    };
    var seventh = {
        id:0,
        parentId:0,
        type:0,
        title:"提取数据7",
        sequence:[]
    };
    var sixth = {
        id:0,
        parentId:0,
        type:1,
        title:"循环操作6",
        sequence:[seventh]
    };
    var n1 = {
        id:0,
        parentId:0,
        type:1,
        title:"循环操作",
        sequence:[fifth]
    };
    var n2 = {
        id:0,
        parentId:0,
        type:0,
        title:"node5",
        sequence:[]
    };
    var n3 = {
        id:0,
        parentId:0,
        type:3, //判断分支
        title:"判断分支1",
        sequence:[]
    };
    var n4 = {
        id:0,
        parentId:0,
        type:3,
        title:"判断分支2",
        sequence:[]
    };
    var n6 = {
        id:0,
        parentId:0,
        type:0,
        title:"正常操作",
        sequence:[]
    };

    var n5 = {
        id:0,
        parentId:0,
        type:3,
        title:"判断分支3",
        parameters:{
            "pdtype":0,//判断的5种类型
            "value":"",
        },//所有操作的参数都放在这里，这个参数是顺序执行的条件
        sequence:[n6]
    };
    var pd = {
        id:0,
        parentId:0,
        type:2,
        title:"判断操作",
        parameters:{},
        sequence:[n3,n4,n5]//执行的时候按照顺序检测一遍第一个满足条件的语句然后压栈执行
    };
    var third = {
        id:0,
        parentId:0,
        type:1,
        title:"循环操作3",
        sequence:[n2,n1,pd]
    };

    var root = {
        id:0,
        parentId:0,
        type:-1,
        title:"root",
        sequence:[second,sixth,fourth,third,first]
    };
	var queue = new Array();
    var actionSequence = new Array();
    var nowNode = null;//存储现在所在的节点
    var lastNode = null;
    // 根据元素类型返回不同元素的样式
    function newNode(node)
    {
        id = node["id"];
        title = node["title"];
        type = node["type"];
        if(type==0) //顺序
        {
                return `<div class="sequence"><div class="node clk" data="${id}" id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
                <div >
                    <p>${title}</p>
                </div>
            </div>
            <p class="arrow" position=${node["position"]} data = "${id}" pId=${node["parentId"]}>↓</p></div>`;
        }
        else if(type==1) //循环
        {
            return `<div class="loop clk" data="${id}" id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
             <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                <p class="arrow" position=-1 data = "${id}" pId=${id}>↓</p>
            </div>
            <p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`;
        }
        else if(type==2) //判断
        {
            return `<div class="loop clk" data="${id}" position=${node["position"]} pId=${node["parentId"]}>
                    <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                    <p class="branchAdd" data="${id}">点击此处在最左边增加条件分支</p>
                    <div class="judge" id = "${id}">
                    </div></div>
                    <p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`;
        }
        else //判断分支
        {
            return `<div class="branch clk" data="${id}" position=${node["position"]} pId=${node["parentId"]}>
                    <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                    <p data = "${id}" class="arrow" position=-1 pId=${id}>↓</p>
                    <div id = "${id}">
                    </div></div>`;
        }
    }
    //增加分支点击事件
    function branchClick(e)
    {
        let judgeId = this.getAttribute('data');
        var t = {
                id:0,
                parentId:0,
                type:3,
                option:12,
                title:"条件分支",
                sequence:[]
            };
        actionSequence[judgeId]["sequence"].splice(0,0,t);
        refresh();
        e.stopPropagation();//防止冒泡
    }
    //元素点击事件
    function elementClick(e)
    {
        let title = this.getAttribute('data');
        if(nowNode != null)
        {
            nowNode.style.borderColor="skyblue";
        }
        nowNode = this;
        this.style.borderColor="blue";
        e.stopPropagation();//防止冒泡
    }
    var option = 0;//选择要增加的内容
    var title = "";
    //箭头点击事件
    function arrowClick(e)
    {
        if(option==10)
        {
            console.log(nowNode);
            if(nowNode==null)
            {
                e.stopPropagation();//防止冒泡
            }
            else if($(nowNode).is(".branch"))
            {
                alert("判断分支不可移动！");
                e.stopPropagation();//防止冒泡
            }
            else
            {
                let position = parseInt(nowNode.getAttribute('position'));
                let pId = nowNode.getAttribute('pId');
                var position2 = parseInt(this.getAttribute('position'));
                var pId2 = this.getAttribute('pId');
                var id = nowNode.getAttribute('data');
                var pidt = pId2;
                var move = true;
                console.log(pidt,id);
                while(pidt!=0)
                {
                    if(pidt==id)
                    {
                        move=false;
                        break;
                    }
                    pidt = actionSequence[pidt]["parentId"];
                }
                if(move) //如果自己要移动到自己节点里就不允许移动
                {
                    let element = actionSequence[pId]["sequence"].splice(position,1);//在相应位置删除元素
                    if(pId==pId2 && position<position2) //如果要移动的位置属于同一层并且是从前往后移动，注意需要控制数组插入位置向前错位
                    {
                        position2--;
                    }
                    console.log(element);
                    actionSequence[pId2]["sequence"].splice(position2+1,0,element[0]);//在相应位置添加新元素
                    refresh();//重新渲染页面
                }
                else
                {
                    alert("自己不能移动到自己的节点里！");
                }
                e.stopPropagation();//防止冒泡
            }
        }
        else if(option>0)
        {
            var t = {
                id:0,
                parentId:0,
                type:0,
                option:option,
                title:title,
                sequence:[]
            };
            if(option == 8)//循环
            {
                t["type"]=1;
            }
            else if(option==9)//判断
            {
                t["type"]=2;
                // 增加两个分支
                var nt=
                {
                    id:0,
                    parentId:0,
                    type:3,
                    option:option,
                    title:"条件分支",
                    sequence:[]
                };
                var nt2=
                {
                    id:0,
                    parentId:0,
                    type:3,
                    option:option,
                    title:"条件分支",
                    sequence:[]
                };
                t["sequence"].push(nt);
                t["sequence"].push(nt2);
            }
            let position = parseInt(this.getAttribute('position'));
            let pId = this.getAttribute('pId');
            actionSequence[pId]["sequence"].splice(position+1,0,t);//在相应位置添加新元素
            refresh();//重新渲染页面
            e.stopPropagation();//防止冒泡
        }
        option = 0;
    }
    $(".openPage").click(function(){
        option = this.getAttribute("data");
        title = this.innerHTML;
        if(option>=10 && nowNode==null)
        {
            alert("目前未选中元素");
        }
        else if(option==12)
        {
            deleteElement();
        }
            
    });

    function bindEvents() 
    {
        // 清空原来的listener然后再添加新的listener
        let rect = document.getElementsByClassName('clk');
        for (let i = 0, rule; rule = rect[i++];) {
            rule.removeEventListener('click',elementClick);
            rule.addEventListener('click',elementClick);
        }
        let arr = document.getElementsByClassName('arrow');
        for (let i = 0, rule; rule = arr[i++];) {
            rule.removeEventListener('click',arrowClick);
            rule.addEventListener('click',arrowClick);
        }
        let branch = document.getElementsByClassName('branchAdd');
        for (let i = 0, rule; rule = branch[i++];) {
            rule.removeEventListener('click',branchClick);
            rule.addEventListener('click',branchClick);
        }
    }
	//重新画图
    function refresh()
    {
        $("#0").empty();
        $("#0").append(`<div style="border-radius: 50%;width: 40px;height: 40px;border:solid;border-color:seagreen;margin:5px auto;background-color:lightcyan;margin-top:20px">
                        <p style="font-size: 24px!important;text-align: center;margin-left: 6px;font-family:'Times New Roman'">▶</p>
                        </div>
                        <p id="testAdd" class="arrow" position=-1 pId=0>↓</p>`);
        actionSequence.splice(0);
        queue.splice(0);
        var idd = 1;
        queue.push(root);
        actionSequence.push(root);
        while(queue.length!=0)
        {
            var nd = queue.shift();
            for(i = 0;i<nd.sequence.length;i++)
            {
                nd.sequence[i].parentId = nd.id;
                nd.sequence[i]["position"] = i;
                nd.sequence[i].id = idd++;
                queue.push(nd.sequence[i]);
                actionSequence.push(nd.sequence[i]);
            }
        }
        console.log(actionSequence);
        //第一个元素不渲染
        for(i=1;i<actionSequence.length;i++)
        {
            parentId = actionSequence[i]["parentId"];
            $("#"+parentId).append(newNode(actionSequence[i]));
        }
        bindEvents();
    }
    function deleteElement()
    {
        let position = parseInt(nowNode.getAttribute('position'));
        let pId = nowNode.getAttribute('pId');
        actionSequence[pId]["sequence"].splice(position,1);//在相应位置删除元素
        refresh();//重新渲染页面
        e.stopPropagation();//防止冒泡
    }
    document.oncontextmenu=function(){return false;}//屏蔽右键菜单
    //删除元素
    document.onkeydown = function (e)
    {
        if(nowNode!=null && e.keyCode == 46)
        {
            if(confirm("确定要删除元素吗？"))
            {
                deleteElement();
            }
        }
    }
    refresh();
</script>