Apq
/
EasySpider
镜像自地址 https://github.com/NaiboWang/EasySpider.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!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="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <title>Service Invoke</title>
    <style>
        table {
            table-layout: auto;
        }
        
        table,
        td,
        th,
        tr {
            border-color: black!important;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 400px;
            min-width: 150px;
        }
        
        .ID {
            width: 10%;
        }
    </style>
</head>

<body>
    <div class="row" style="margin-top: 40px;">
        <div class="col-md-6" style="margin:0 auto" id="serviceList" v-if="show">
            <h4 style="text-align: center;">Service Information</h4>
            <p>Service Name: {{service["name"]}}</p>
            <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">Service Description: {{service["desc"]}}</p>
            <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">URL: {{backEndAddressServiceWrapper}}/backEnd/invokeService?id={{service["id"]}}</p>
            <p>Please Input Parameters: </p>
            <form id="form">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th style="min-width: 50px;">ID</th>
                            <th>Parameter Name</th>
                            <th>Invoke Name</th>
                            <th>Parameter Type</th>
                            <th>Parameter Value</th>
                        </tr>

                        <tr v-if="service.inputParameters.length>0" v-for="i in service.inputParameters.length">
                            <td style="min-width: 50px;">{{i}}</td>
                            <td>{{service.inputParameters[i-1]["nodeName"]}}</td>
                            <td>{{service.inputParameters[i-1]["name"]}}</td>
                            <td>{{service.inputParameters[i-1]["type"]}}</td>
                            <td><textarea style="min-height: 100px;min-width: 300px;" v-bind:name="service.inputParameters[i-1]['name']" class="form-control" v-model="service.inputParameters[i-1]['value']"></textarea></td>
                        </tr>
                    </tbody>
                </table>
            </form>

            <button style="margin-left: 5px;" v-on:click="localExcuteInstant" class="btn btn-primary">Directly Run locally</button>
            <button style="margin-left: 5px;" v-on:click="remoteExcuteInstant" class="btn btn-primary">Directly Run Remotely</button>
            <div style="margin-bottom: 10px;">
                <label style="margin-top: 10px;">Task ID:</label>
                <input class="form-control" v-model="ID"></input>
                <p></p>
                <p>提示：点击下方按钮获得任务ID，然后根据此ID进行服务执行；也可自己POST调用接口得到ID，具体参照POST调用文档。</p>
                <a href="javascript:void(0)" v-on:click="invokeService" class="btn btn-primary">Get Task ID</a>
                <button v-on:click="localExcute" style="margin-left: 8px;" class="btn btn-primary">Run locally</button>
                <button v-on:click="remoteExcute" style="margin-left: 8px;" class="btn btn-primary">Run remotely</button></div>
        </div>

    </div>
    </div>

</body>

</html>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return ""; //返回参数值,默认后台地址
    }

    var sId = getUrlParam('id');
    var app = new Vue({
        el: '#serviceList',
        data: {
            service: {},
            show: false, //是否渲染
            ID: "暂无",
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
        },
        methods: {
            invokeService: function() {
                if (confirm("确定要获得任务ID吗？")) {
                    var para = {};
                    var t = $('#form').serializeArray();
                    t.forEach(function(item, index) {
                        para[item.name] = item.value;
                    });
                    $.post(app.$data.backEndAddressServiceWrapper + "/backEnd/invokeService?id=" + sId, {
                        id: this.service.id,
                        paras: JSON.stringify(para)
                    }, function(result) {
                        app.$data.ID = result; //得到返回的ID
                    });
                }
            },
            localExcute: function() {
                if (this.ID == "暂无") {
                    alert("请先获得任务ID！");
                    return;
                }
                if (confirm("确定要本地执行任务吗？")) {
                    let message = { //显示flowchart
                        type: 5, //消息类型，调用执行程序
                        message: {
                            "id": app.$data.ID,
                        }
                    };
                    ws.send(JSON.stringify(message));
                }
            },
            remoteExcute: function() {
                if (this.ID == "暂无") {
                    alert("请先获得任务ID！");
                    return;
                }
                if (confirm("确定要远程执行任务吗？")) {
                    let message = { //显示flowchart
                        type: 5, //消息类型，调用执行程序
                        message: {
                            "id": app.$data.ID,
                        }
                    };
                    ws.send(JSON.stringify(message));
                }
            },
            localExcuteInstant: function() {
                if (confirm("确定要直接本地执行任务吗？")) {
                    var para = {};
                    var t = $('#form').serializeArray();
                    t.forEach(function(item, index) {
                        para[item.name] = item.value;
                    });
                    $.post(app.$data.backEndAddressServiceWrapper + "/backEnd/invokeService?id=" + sId, {
                        id: this.service.id,
                        paras: JSON.stringify(para)
                    }, function(result) {
                        let message = { //显示flowchart
                            type: 5, //消息类型，调用执行程序
                            message: {
                                "id": result,
                            }
                        };
                        ws.send(JSON.stringify(message));
                    });
                }
            },
            remoteExcuteInstant: function() {
                if (confirm("确定要直接远程执行任务吗？")) {
                    var para = {};
                    var t = $('#form').serializeArray();
                    t.forEach(function(item, index) {
                        para[item.name] = item.value;
                    });
                    $.post(app.$data.backEndAddressServiceWrapper + "/backEnd/invokeService?id=" + sId, {
                        id: this.service.id,
                        paras: JSON.stringify(para)
                    }, function(result) {
                        //待实现
                    });
                }
            },
        }
    });
    $.get(app.$data.backEndAddressServiceWrapper + "/backEnd/queryService?id=" + sId, function(result) {
        app.$data.service = result;
        app.$data.show = true;
    });
    ws = new WebSocket("ws://localhost:8084");
    ws.onopen = function() {
        // Web Socket 已连接上，使用 send() 方法发送数据
        console.log("已连接");
        message = {
            type: 0, //消息类型，0代表链接操作
            message: {
                id: 1, //socket id
            }
        };
        this.send(JSON.stringify(message));
    };
    ws.onclose = function() {
        // 关闭 websocket
        console.log("连接已关闭...");
    };
</script>