mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2025-04-22 21:10:28 +08:00
233 lines
10 KiB
HTML
233 lines
10 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>
|
||
<link rel="stylesheet" href="element-ui/index.css"></link>
|
||
<script src="element-ui/index.js"></script>
|
||
<title>任务列表 | Task List</title>
|
||
</head>
|
||
<style>
|
||
th, td {
|
||
text-align: left;
|
||
vertical-align: middle !important;
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.tasklist {
|
||
margin-left: 10% !important;
|
||
|
||
}
|
||
}
|
||
|
||
.search-header {
|
||
display: flex;
|
||
justify-content: flex-end; /* Right align the search box */
|
||
align-items: center;
|
||
}
|
||
|
||
.search-input {
|
||
/*margin-right: 8px; !* Optional: Adjust spacing between input and button *!*/
|
||
}
|
||
|
||
.task-links {
|
||
display: flex;
|
||
justify-content: space-between; /* Spread links evenly */
|
||
}
|
||
</style>
|
||
<body>
|
||
<div class="row" style="margin-top: 40px;">
|
||
<div style="margin:0 auto; min-width: 70%;" id="taskList" class="tasklist">
|
||
<h4 style="text-align: center;">{{"Task List~任务列表" | lang}}</h4>
|
||
<h5 style="text-align: center;"
|
||
v-if="mobile==1">{{"View this table by direction keys on keyboard~按键盘方向键浏览此表格" | lang}}</h5>
|
||
<p><a v-if="type==3" href="javascript:void(0)" v-on:click="newTask"
|
||
class="btn btn-primary">{{"New Task~创建新任务" | lang}}</a></p>
|
||
<div v-if="type != 3" style="margin-bottom: 20px">
|
||
<div style="margin-bottom: 5px">{{"提示：下方的官方教程和答疑平台均在Github，可能出现访问速度慢的问题，请耐心等待。~" | lang}}
|
||
</div>
|
||
<a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/wiki"
|
||
target="_blank">{{"Software Documentation~软件使用说明文档" | lang}}</a>
|
||
<a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/issues?q=is%3Aissue"
|
||
target="_blank">{{"Ask questions here~官方答疑平台" | lang}}</a>
|
||
<a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/issues/22"
|
||
target="_blank">{{"See how to run task by schedule~定时执行任务教程" | lang}}</a>
|
||
<!-- <a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/wiki/Run-multiple-tasks-in-parallel" target="_blank">{{"See how to run multiple tasks in parallel~同时执行多个任务教程" | lang}}</a>-->
|
||
</div>
|
||
<el-table
|
||
style="width: 100%"
|
||
:empty-text="LANG('No Task~暂无任务')"
|
||
:data="list.filter(data => !search || (data.name.toLowerCase().includes(search.toLowerCase())) || (data.url.toLowerCase().includes(search.toLowerCase())) || (data.links.includes(search.toLowerCase())) || (data.desc.includes(search.toLowerCase())) || (data.id.toString().includes(search.toLowerCase())))"
|
||
:default-sort="{prop: 'mtime', order: 'descending'}"
|
||
>
|
||
|
||
<el-table-column
|
||
prop="id"
|
||
:label="LANG('Task ID~任务ID')"
|
||
sortable
|
||
width="120"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
:label="LANG('Task Name~任务名称')"
|
||
sortable
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="url"
|
||
label="URL"
|
||
sortable
|
||
>
|
||
</el-table-column>
|
||
<!-- <el-table-column-->
|
||
<!-- prop="mtime"-->
|
||
<!-- :label="LANG('Update Time~更新时间')"-->
|
||
<!-- sortable-->
|
||
<!-- :formatter="formatDate"-->
|
||
<!-- width="170"-->
|
||
<!-- >-->
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="350"
|
||
align="center">
|
||
<!-- Header template for the search input -->
|
||
<template slot="header" slot-scope="scope">
|
||
<div class="search-header">
|
||
<!-- Search input aligned to the right -->
|
||
<el-input
|
||
v-model="search"
|
||
class="search-input"
|
||
prefix-icon="el-icon-search"
|
||
:placeholder="LANG('Please input keywords to search~请输入关键词搜索')">
|
||
</el-input>
|
||
<!-- <el-button icon="el-icon-search"></el-button>-->
|
||
</div>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<!-- Use flex container to justify content space-around -->
|
||
<div class="task-links">
|
||
<a href="javascript:void(0)" v-on:click="browseTask(scope.$index, scope.row)">{{ "View~任务信息"
|
||
| lang }}</a>
|
||
<a href="javascript:void(0)" v-if="type==3" v-on:click="modifyTask(scope.$index, scope.row)">{{
|
||
"Modify~修改任务" | lang }}</a>
|
||
<a href="javascript:void(0)"
|
||
v-on:dblclick="deleteTask(scope.$index, scope.row)">{{ "Delete (Double Click)~删除任务（双击）" | lang }}</a>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
<script src="global.js"></script>
|
||
<script>
|
||
let app = new Vue({
|
||
el: '#taskList',
|
||
data: {
|
||
search: '',
|
||
list: [],
|
||
type: 3, //记录服务行为
|
||
mobile: getUrlParam("mobile"),
|
||
backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
|
||
},
|
||
methods: {
|
||
formatDate: function (row, column) {
|
||
//2023-01-01 00:00:00
|
||
let date = row[column.property];
|
||
// 2023-12-26T12:44:32.599Z
|
||
let original_time = row.mtime;
|
||
let year = original_time.substring(0, 4);
|
||
let month = original_time.substring(5, 7);
|
||
let day = original_time.substring(8, 10);
|
||
let hour = original_time.substring(11, 13);
|
||
let minute = original_time.substring(14, 16);
|
||
let second = original_time.substring(17, 19);
|
||
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
|
||
},
|
||
newTask: function () {
|
||
window.location.href = "newTask.html?lang=" + getUrlParam("lang") + "&mobile=" + getUrlParam("mobile") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper;
|
||
},
|
||
LANG: function (text) {
|
||
if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
|
||
return text.split("~")[0];
|
||
} else if (getUrlParam("lang") == "zh") {
|
||
return text.split("~")[1];
|
||
}
|
||
},
|
||
modifyTask: function (index, row) {
|
||
let id = row.id;
|
||
let url = row.links.split("\n")[0];
|
||
console.log(index, row)
|
||
let message = { //显示flowchart
|
||
type: 1, //消息类型，传递链接
|
||
message: {
|
||
"id": id,
|
||
}
|
||
};
|
||
ws.send(JSON.stringify(message));
|
||
window.location.href = url; //跳转链接
|
||
},
|
||
browseTask: function (index, row) {
|
||
let id = row.id;
|
||
window.location.href = "taskInfo.html?type=" + getUrlParam("type") + "&id=" + id + "&lang=" + getUrlParam("lang") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper; //跳转链接
|
||
},
|
||
deleteTask: function (index, row) {
|
||
let id = row.id;
|
||
// let text = "Are you sure to remove the selected task?";
|
||
// if (getUrlParam("lang") == "en"|| getUrlParam("lang")=="") {
|
||
// text = "Are you sure to remove the selected task?";
|
||
// } else if (getUrlParam("lang") == "zh") {
|
||
// text = "确定要删除选中的任务吗？";
|
||
// }
|
||
// if (confirm(text)) {
|
||
$.get(app.$data.backEndAddressServiceWrapper + "/deleteTask?id=" + id, function (res) {
|
||
$.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
|
||
result = re.sort(desc);
|
||
app.$data.list = result;
|
||
});
|
||
});
|
||
// alert("Sorry, the task cannot be deleted since the system is a demo system for paper reviewers, please contact the author (naibowang@u.nus.edu) to remove it.")
|
||
// }
|
||
},
|
||
}
|
||
});
|
||
|
||
let desc = function (x, y) {
|
||
return (x["id"] < y["id"]) ? 1 : -1
|
||
}
|
||
$.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
|
||
// result = re.sort(desc);
|
||
app.$data.list = re;
|
||
if (getUrlParam("type") == "1") {
|
||
app.$data.type = 2;
|
||
}
|
||
});
|
||
ws = new WebSocket("ws://localhost:" + getUrlParam("wsport"));
|
||
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> |