mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2025-04-23 04:34:22 +08:00
205 lines
8.6 KiB
HTML
205 lines
8.6 KiB
HTML
<!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>Task 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;">Task Invocation</h4>
|
||
<p>Task Name: {{service["name"]}}</p>
|
||
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">Task 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 style="max-width: 100px;">{{service.inputParameters[i-1]["nodeName"]}}</td>
|
||
<td>{{service.inputParameters[i-1]["name"]}}</td>
|
||
<td style="max-width: 100px;">{{service.inputParameters[i-1]["type"]}}</td>
|
||
<td><textarea style="min-height: 50px;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 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;">Execution ID (EID):</label>
|
||
<input class="form-control" v-model="ID"></input>
|
||
<p></p>
|
||
<!-- <p>提示：点击下方按钮获得任务ID，然后根据此ID进行服务执行；也可自己POST调用接口得到ID，具体参照POST调用文档。</p> -->
|
||
<p>Hint: Click the following button to get the Execution ID (EID) of current running task.</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: "Empty",
|
||
backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
|
||
},
|
||
methods: {
|
||
invokeService: function() {
|
||
if (confirm("Are you sure to get the execution ID (EID)?")) {
|
||
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 == "Empty") {
|
||
alert("Please get EID first！");
|
||
return;
|
||
}
|
||
if (confirm("Are you sure to run this task locally?")) {
|
||
let message = { //显示flowchart
|
||
type: 5, //消息类型，调用执行程序
|
||
message: {
|
||
"id": app.$data.ID,
|
||
}
|
||
};
|
||
ws.send(JSON.stringify(message));
|
||
}
|
||
},
|
||
remoteExcute: function() {
|
||
if (this.ID == "Empty") {
|
||
alert("Please get EID first！");
|
||
return;
|
||
}
|
||
if (confirm("Are you sure to run this task remotely?")) {
|
||
let message = { //显示flowchart
|
||
type: 5, //消息类型，调用执行程序
|
||
message: {
|
||
"id": app.$data.ID,
|
||
}
|
||
};
|
||
ws.send(JSON.stringify(message));
|
||
}
|
||
},
|
||
localExcuteInstant: function() {
|
||
if (confirm("Are you sure to run this task locally now？")) {
|
||
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("Are you sure to run this task remotely?")) {
|
||
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("Connected");
|
||
message = {
|
||
type: 0, //消息类型，0代表链接操作
|
||
message: {
|
||
id: 1, //socket id
|
||
}
|
||
};
|
||
this.send(JSON.stringify(message));
|
||
};
|
||
ws.onclose = function() {
|
||
// 关闭 websocket
|
||
console.log("连接已关闭...");
|
||
};
|
||
</script> |