spider/EasySpider
1
0
Fork 0
mirror of https://github.com/NaiboWang/EasySpider.git synced 2025-04-23 08:59:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Format Code

Browse Source
This commit is contained in:
naibo 2023-12-27 20:49:24 +08:00
parent 0ded0fb67c
commit 4e53596680
8 changed files with 459 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ElectronJS/config.json
View File

@ -1 +1 @@
{"webserver_address":"http://localhost","webserver_port":8074,"user_data_folder":"./user_data","debug":false,"copyright":1,"sys_version":"x64","mysql_config_path":"./mysql_config.json","absolute_user_data_folder":"/Users/naibo/Documents/EasySpider/ElectronJS/user_data"} {"webserver_address":"http://localhost","webserver_port":8074,"user_data_folder":"./user_data","debug":false,"copyright":1,"sys_version":"x64","mysql_config_path":"./mysql_config.json","absolute_user_data_folder":"D:\\Documents\\Projects\\EasySpider\\ElectronJS\\user_data"}

84
ElectronJS/src/index.html
View File

@ -41,14 +41,17 @@
<p><a @click="changeLang('en')" class="btn btn-outline-primary btn-lg" <p><a @click="changeLang('en')" class="btn btn-outline-primary btn-lg"
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">English</a></p> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">English</a></p>
<p style="font-size: 17px">当前版本/Current Version: <b>v0.6.0</b></p> <p style="font-size: 17px">当前版本/Current Version: <b>v0.6.0</b></p>
<p style="font-size: 17px"><a href="https://github.com/NaiboWang/EasySpider/releases" target="_blank">Github</a>最新版本/Newest Version：<b>{{newest_version}}</b></p> <p style="font-size: 17px"><a href="https://github.com/NaiboWang/EasySpider/releases"
<!-- <p>如发现新版本更新，可从以下Github仓库下载最新版本使用/If a new version is found, you can download the latest version from the following Github repository:</p>--> target="_blank">Github</a>最新版本/Newest Version：<b>{{newest_version}}</b></p>
<!-- <p></p>--> <!-- <p>如发现新版本更新，可从以下Github仓库下载最新版本使用/If a new version is found, you can download the latest version from the following Github repository:</p>-->
<!-- <p></p>-->
<div class="img-container"> <div class="img-container">
<!-- <h5>出品方/Producer</h5>--> <!-- <h5>出品方/Producer</h5>-->
<a href="https://www.zju.edu.cn" alt="浙江大学 Zhejiang University" target="_blank"><img src="img/zju.png"></a> <a href="https://www.zju.edu.cn" alt="浙江大学 Zhejiang University" target="_blank"><img src="img/zju.png"></a>
<a href="https://www.nus.edu.sg" alt="新加坡国立大学 National University of Singpaore" target="_blank"><img src="img/nuslogo.png"></a> <a href="https://www.nus.edu.sg" alt="新加坡国立大学 National University of Singpaore" target="_blank"><img
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学 Xidian University" target="_blank"><img src="img/xidian.png"></a> src="img/nuslogo.png"></a>
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学 Xidian University" target="_blank"><img
src="img/xidian.png"></a>
</div> </div>
</div> </div>
@ -58,7 +61,9 @@
<div v-if="step == -1"> <div v-if="step == -1">
<h4 style="margin-top: 20px">Copyright and Disclaimer</h4> <h4 style="margin-top: 20px">Copyright and Disclaimer</h4>
<p>Please carefully read the following instructions regarding the use of the software and commercial payments. If you agree, please accept the agreement.</p> <p>Please carefully read the following instructions regarding the use of the software and commercial payments. If you agree, please accept the agreement.</p>
<textarea class="form-control" style="margin:0 auto;width:90%; color:black; height: 450px; min-height: 200px; background: white" readonly> <textarea class="form-control"
style="margin:0 auto;width:90%; color:black; height: 450px; min-height: 200px; background: white"
readonly>
This software is intended for educational and communication purposes only. It is strictly prohibited to use the software for any illegal activities or operations, such as crawling government/military websites that are not allowed to be crawled. The user bears all consequences resulting from the use of this software and the author shall not be held responsible or liable in any way. Furthermore, the software is protected by patent rights. If you intend to use it for commercial purposes or profit-making activities, such as using the software for client orders, selling the collected data, please contact author: naibowang@foxmail.com for patent authorization and payment operations: https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统 This software is intended for educational and communication purposes only. It is strictly prohibited to use the software for any illegal activities or operations, such as crawling government/military websites that are not allowed to be crawled. The user bears all consequences resulting from the use of this software and the author shall not be held responsible or liable in any way. Furthermore, the software is protected by patent rights. If you intend to use it for commercial purposes or profit-making activities, such as using the software for client orders, selling the collected data, please contact author: naibowang@foxmail.com for patent authorization and payment operations: https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统
For individual users, EasySpider is a completely free and ad-free open-source software. The development and maintenance of the software rely solely on the author's voluntary efforts. Therefore, you can choose to support the author, allowing them to have more enthusiasm and energy to maintain this software. Alternatively, if you have profited from using this software, you are welcome to support the author through the following methods: For individual users, EasySpider is a completely free and ad-free open-source software. The development and maintenance of the software rely solely on the author's voluntary efforts. Therefore, you can choose to support the author, allowing them to have more enthusiasm and energy to maintain this software. Alternatively, if you have profited from using this software, you are welcome to support the author through the following methods:
@ -68,7 +73,8 @@ For individual users, EasySpider is a completely free and ad-free open-source so
</textarea> </textarea>
<p><a @click="acceptAgreement" class="btn btn-primary btn-lg" <p><a @click="acceptAgreement" class="btn btn-primary btn-lg"
style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">Agree and Start</a></p> style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">Agree and Start</a>
</p>
</div> </div>
<div v-if="step == 0"> <div v-if="step == 0">
<p style="margin-top: 20px">Hint: Click Button below to start.</p> <p style="margin-top: 20px">Hint: Click Button below to start.</p>
@ -83,13 +89,17 @@ For individual users, EasySpider is a completely free and ad-free open-source so
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">View/Manage/Execute style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">View/Manage/Execute
Tasks</a></p> Tasks</a></p>
<p> <p>
<a href="https://www.easyspider.cn/index_english.html" target="_blank" style="text-align: center; font-size: 18px">Browse official website to watch tutorials</a> <a href="https://www.easyspider.cn/index_english.html" target="_blank"
style="text-align: center; font-size: 18px">Browse official website to watch tutorials</a>
</p> </p>
<div class="img-container"> <div class="img-container">
<!-- <h5>Producer</h5>--> <!-- <h5>Producer</h5>-->
<a href="https://www.zju.edu.cn" alt="Zhejiang University" target="_blank"><img src="img/zju.png"></a> <a href="https://www.zju.edu.cn" alt="Zhejiang University" target="_blank"><img
<a href="https://www.nus.edu.sg" alt="National University of Singapore" target="_blank"><img src="img/nuslogo.png"></a> src="img/zju.png"></a>
<a href="https://www.xidian.edu.cn" alt="Xidian University" target="_blank"><img src="img/xidian.png"></a> <a href="https://www.nus.edu.sg" alt="National University of Singapore" target="_blank"><img
src="img/nuslogo.png"></a>
<a href="https://www.xidian.edu.cn" alt="Xidian University" target="_blank"><img
src="img/xidian.png"></a>
</div> </div>
</div> </div>
<div v-else-if="step == 1"> <div v-else-if="step == 1">
@ -113,7 +123,8 @@ For individual users, EasySpider is a completely free and ad-free open-source so
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Data Mode</a> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Data Mode</a>
</p> </p>
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a> <a @click="step = 0" class="btn btn-outline-primary btn-lg"
style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>
</div> </div>
<div v-else-if="step == 2"> <div v-else-if="step == 2">
@ -121,7 +132,11 @@ For individual users, EasySpider is a completely free and ad-free open-source so
<div style="margin: 0 auto; width:90%"> <div style="margin: 0 auto; width:90%">
<p style="margin-top: 20px; text-align: justify"> <p style="margin-top: 20px; text-align: justify">
Please specify the directory of user data below. Once set, the browser will load cookies and other contents such as user login information from this directory. The browser will load data from this directory every time it is designed and executed, as long as the directory remains the same. </p> Please specify the directory of user data below. Once set, the browser will load cookies and other contents such as user login information from this directory. The browser will load data from this directory every time it is designed and executed, as long as the directory remains the same. </p>
<p style="text-align: justify">For example, if the <b>./user_data</b> folder is set and you log in at <b>ebay.com</b> during the design process, then the previous login status will still be retained when you specify the <b>./user_data</b> folder again for the next design or task execution when you open <b>ebay.com</b>.</p> <p style="text-align: justify">For example, if the
<b>./user_data</b> folder is set and you log in at
<b>ebay.com</b> during the design process, then the previous login status will still be retained when you specify the
<b>./user_data</b> folder again for the next design or task execution when you open
<b>ebay.com</b>.</p>
<p style="text-align: justify">If there are multiple configurations, different directories can be set for each configuration. Each directory will be treated as a separate configuration set, and if a directory does not exist, it will be created automatically.</p> <p style="text-align: justify">If there are multiple configurations, different directories can be set for each configuration. Each directory will be treated as a separate configuration set, and if a directory does not exist, it will be created automatically.</p>
<p><textarea class="form-control" style="min-height: 50px;" <p><textarea class="form-control" style="min-height: 50px;"
v-model="user_data_folder"></textarea> v-model="user_data_folder"></textarea>
@ -129,13 +144,16 @@ For individual users, EasySpider is a completely free and ad-free open-source so
</div> </div>
<p><a @click="startDesign('en', true)" <p><a @click="startDesign('en', true)"
class="btn btn-primary btn-lg" class="btn btn-primary btn-lg"
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design</a></p> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design</a>
</p>
<p> <p>
<p><a @click="startDesign('en', true, true)" <p><a @click="startDesign('en', true, true)"
class="btn btn-primary btn-lg" class="btn btn-primary btn-lg"
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design (Mobile)</a></p> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design (Mobile)</a>
</p>
<p> <p>
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a> <a @click="step = 0" class="btn btn-outline-primary btn-lg"
style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>
</p> </p>
</div> </div>
</div> </div>
@ -143,7 +161,9 @@ For individual users, EasySpider is a completely free and ad-free open-source so
<div v-if="step == -1"> <div v-if="step == -1">
<h4 style="margin-top: 20px">版权声明和注意事项</h4> <h4 style="margin-top: 20px">版权声明和注意事项</h4>
<p>请接受下方使用协议以使用软件，不同意请退出。</p> <p>请接受下方使用协议以使用软件，不同意请退出。</p>
<textarea class="form-control" style="margin:0 auto;width:90%; color:black; height: 480px; min-height: 200px; background: white" readonly> <textarea class="form-control"
style="margin:0 auto;width:90%; color:black; height: 480px; min-height: 200px; background: white"
readonly>
本软件仅供学习交流使用，严禁使用软件进行任何违法违规的操作，如爬取不允许爬取的政府/军事机关网站等。使用本软件所造成的一切后果由使用者自负，与作者本人无关，作者不会承担任何责任。同时，软件受到专利权保护，如要用于商业用途，如使用软件进行盈利接单，用于公司业务，或出售采集到的数据等，请邮件联系作者：naibowang@foxmail.com进行专利授权等付费操作：https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统 本软件仅供学习交流使用，严禁使用软件进行任何违法违规的操作，如爬取不允许爬取的政府/军事机关网站等。使用本软件所造成的一切后果由使用者自负，与作者本人无关，作者不会承担任何责任。同时，软件受到专利权保护，如要用于商业用途，如使用软件进行盈利接单，用于公司业务，或出售采集到的数据等，请邮件联系作者：naibowang@foxmail.com进行专利授权等付费操作：https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统
对于个人使用者来说，易采集EasySpider是一款完全免费无广告的开源软件，软件开发和维护全靠作者用爱发电，因此您可以选择支持作者让作者有更多的热情和精力维护此软件，或者您使用了此软件进行了盈利，欢迎您通过下面的方式支持作者： 对于个人使用者来说，易采集EasySpider是一款完全免费无广告的开源软件，软件开发和维护全靠作者用爱发电，因此您可以选择支持作者让作者有更多的热情和精力维护此软件，或者您使用了此软件进行了盈利，欢迎您通过下面的方式支持作者：
@ -153,26 +173,31 @@ For individual users, EasySpider is a completely free and ad-free open-source so
3、PayPal账号：naibowang，或扫描软件包中带的二维码。 3、PayPal账号：naibowang，或扫描软件包中带的二维码。
</textarea> </textarea>
<p><a @click="acceptAgreement" class="btn btn-primary btn-lg" <p><a @click="acceptAgreement" class="btn btn-primary btn-lg"
style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">同意并开始使用</a></p> style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">同意并开始使用</a>
</p>
</div> </div>
<div v-if="step == 0"> <div v-if="step == 0">
<p style="margin-top: 20px">提示：点击下方按钮开始使用。</p> <p style="margin-top: 20px">提示：点击下方按钮开始使用。</p>
<p><a @click="step = 1" class="btn btn-primary btn-lg" <p><a @click="step = 1" class="btn btn-primary btn-lg"
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">设计/修改任务</a></p> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">设计/修改任务</a>
</p>
<p><a @click="startInvoke('zh')" <p><a @click="startInvoke('zh')"
@click class="btn btn-primary btn-lg" @click class="btn btn-primary btn-lg"
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">查看/管理/执行任务</a> style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">查看/管理/执行任务</a>
</p> </p>
<p> <p>
<a href="https://www.easyspider.cn?lang=zh" target="_blank" style="text-align: center; font-size: 18px">点此访问官网查看文档/视频教程</a> <a href="https://www.easyspider.cn?lang=zh" target="_blank"
style="text-align: center; font-size: 18px">点此访问官网查看文档/视频教程</a>
</p> </p>
<div class="img-container"> <div class="img-container">
<!-- <h5>出品方</h5>--> <!-- <h5>出品方</h5>-->
<a href="https://www.zju.edu.cn" alt="浙江大学" target="_blank"><img src="img/zju.png"></a> <a href="https://www.zju.edu.cn" alt="浙江大学" target="_blank"><img src="img/zju.png"></a>
<a href="https://www.nus.edu.sg" alt= "新加坡国立大学" target="_blank"><img src="img/nuslogo.png"></a> <a href="https://www.nus.edu.sg" alt="新加坡国立大学" target="_blank"><img
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学" target="_blank"><img src="img/xidian.png"></a> src="img/nuslogo.png"></a>
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学" target="_blank"><img
src="img/xidian.png"></a>
</div> </div>
</div> </div>
<div v-else-if="step == 1"> <div v-else-if="step == 1">
@ -194,7 +219,8 @@ For individual users, EasySpider is a completely free and ad-free open-source so
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">使用带用户信息浏览器设计</a> style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">使用带用户信息浏览器设计</a>
</p> </p>
<p> <p>
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a> <a @click="step = 0" class="btn btn-outline-primary btn-lg"
style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
</p> </p>
@ -216,9 +242,11 @@ For individual users, EasySpider is a completely free and ad-free open-source so
<p> <p>
<p><a @click="startDesign('zh', true, true)" <p><a @click="startDesign('zh', true, true)"
class="btn btn-primary btn-lg" class="btn btn-primary btn-lg"
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计（手机模式）</a></p> style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计（手机模式）</a>
</p>
<p> <p>
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a> <a @click="step = 0" class="btn btn-outline-primary btn-lg"
style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
</p> </p>
</div> </div>

13
ElectronJS/src/taskGrid/FlowChart.js
View File

@ -143,7 +143,7 @@ let app = new Vue({
methods: { methods: {
getFinalXPath: function (xpath, useLoop) { //获取最终的xpath getFinalXPath: function (xpath, useLoop) { //获取最终的xpath
// console.log(xpath, useLoop, this.parentNode); // console.log(xpath, useLoop, this.parentNode);
if(this.parentNode == null || this.parentNode.parameters == null || this.parentNode.parameters.xpath == null){ if (this.parentNode == null || this.parentNode.parameters == null || this.parentNode.parameters.xpath == null) {
return xpath; return xpath;
} else if (useLoop) { } else if (useLoop) {
let parent_xpath = this.parentNode.parameters.xpath; let parent_xpath = this.parentNode.parameters.xpath;
@ -543,8 +543,7 @@ function toolBoxKernel(e, param = null) {
// let tarrow = DeepClone(app.$data.nowArrow); // let tarrow = DeepClone(app.$data.nowArrow);
// refresh(); // refresh();
// app._data.nowArrow =tarrow; // app._data.nowArrow =tarrow;
} } else if (option == 11) { //复制操作
else if (option == 11) { //复制操作
if (nowNode == null) { if (nowNode == null) {
e.stopPropagation(); //防止冒泡 e.stopPropagation(); //防止冒泡
} else if (nowNode.getAttribute("dataType") > 0) { } else if (nowNode.getAttribute("dataType") > 0) {
@ -566,8 +565,7 @@ function toolBoxKernel(e, param = null) {
$("#" + t["id"]).click(); //复制后点击复制后的元素 $("#" + t["id"]).click(); //复制后点击复制后的元素
e.stopPropagation(); //防止冒泡 e.stopPropagation(); //防止冒泡
} }
} } else if (option == 10) { //剪切操作
else if (option == 10) { //剪切操作
if (nowNode == null) { if (nowNode == null) {
e.stopPropagation(); //防止冒泡 e.stopPropagation(); //防止冒泡
} else if ($(nowNode).is(".branch")) { } else if ($(nowNode).is(".branch")) {
@ -612,8 +610,7 @@ function toolBoxKernel(e, param = null) {
e.stopPropagation(); //防止冒泡 e.stopPropagation(); //防止冒泡
} }
} }
} } else if (option > 0) { //新增操作
else if (option > 0) { //新增操作
let l = nodeList.length; let l = nodeList.length;
let nt = null; let nt = null;
let nt2 = null; let nt2 = null;
@ -714,7 +711,7 @@ function toolBoxKernel(e, param = null) {
} else { } else {
$("#" + t["id"]).click(); $("#" + t["id"]).click();
} }
if (e != null){ if (e != null) {
e.stopPropagation(); //防止冒泡 e.stopPropagation(); //防止冒泡
} }
option = 0; option = 0;

313
ElectronJS/src/taskGrid/executeTask.html
View File

@ -31,18 +31,20 @@
.ID { .ID {
width: 10%; width: 10%;
} }
.excel th,.excel td {
.excel th, .excel td {
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
padding: 10px; padding: 10px;
max-width: 200px!important; max-width: 200px !important;
} }
.tip { .tip {
position: fixed; position: fixed;
width:100%; width: 100%;
display: none; display: none;
z-index: 1000; z-index: 1000;
top:0; top: 0;
} }
</style> </style>
</head> </head>
@ -59,27 +61,36 @@
提示：任务执行ID对应配置文件已更新，您可使用任务ID：<span id="newID_ZH"></span>来执行加载了新配置的任务。 提示：任务执行ID对应配置文件已更新，您可使用任务ID：<span id="newID_ZH"></span>来执行加载了新配置的任务。
</div> </div>
<div id="tipID_EN" class="alert alert-info alert-dismissible fade show tip"> <div id="tipID_EN" class="alert alert-info alert-dismissible fade show tip">
Hint: The task execution ID corresponds to the configuration file has been updated, you can use the task ID <span id="newID_EN"></span> to execute the task with the new configuration.</div> Hint: The task execution ID corresponds to the configuration file has been updated, you can use the task ID
<span id="newID_EN"></span> to execute the task with the new configuration.
</div> </div>
</div> </div>
</div>
<div class="row" style="margin-top: 40px;"> <div class="row" style="margin-top: 40px;">
<div class="col-md-7" id="taskInfo" style="margin:0 auto" v-if="show"> <div class="col-md-7" id="taskInfo" style="margin:0 auto" v-if="show">
<div id="tipCustom" class="alert alert-success alert-dismissible fade show" style="display: none; z-index: 1000"> <div id="tipCustom" class="alert alert-success alert-dismissible fade show"
{{tip | lang}}</div> style="display: none; z-index: 1000">
{{tip | lang}}
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{"Task Execution Instruction~执行任务说明" | lang}}</h4> <h4 class="modal-title"
id="myModalLabel">{{"Task Execution Instruction~执行任务说明" | lang}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<input onkeydown="inputDelete(event)" id="serviceId" type="hidden" name="serviceId" value="-1"></input> <input onkeydown="inputDelete(event)" id="serviceId" type="hidden" name="serviceId"
<input onkeydown="inputDelete(event)" id="url" type="hidden" name="url" value="about:blank"></input> value="-1"></input>
<label><a href="https://github.com/NaiboWang/EasySpider/wiki/Argument-Instruction" target="_blank">{{`Click Here~点击这里` | lang}}</a> {{`Here to see argument instruction.~这里查看参数配置说明。` | lang}}</label> <input onkeydown="inputDelete(event)" id="url" type="hidden" name="url"
value="about:blank"></input>
<label><a href="https://github.com/NaiboWang/EasySpider/wiki/Argument-Instruction"
target="_blank">{{`Click Here~点击这里` | lang}}</a> {{`Here to see argument instruction.~这里查看参数配置说明。` | lang}}</label>
<label v-if="OS=='darwin'">{{`对于MacOS系统，EasySpider提供了两个不同的执行程序，分别为easyspider_executestage和easyspider_executestage_full，前者执行时加载速度较快，并提供了除OCR识别和数据去重以外的全部功能；后者则提供了包括OCR识别和数据去重在内的全部功能，但运行时加载速度较慢，需要等待2-10分钟才能执行程序，请根据自己的需求选择执行哪个程序。~For MacOS system, EasySpider provides two different execution programs, 'easyspider_executestage' and 'easyspider_executestage_full', the former loads faster when executing, and provides all functions except OCR recognition and data deduplication; the latter provides all functions including OCR recognition and data deduplication, but the loading speed is slower when running, and it takes 2-10 minutes to wait for the program to execute, please choose which program to execute according to your needs.` | lang}}</label> <label v-if="OS=='darwin'">{{`对于MacOS系统，EasySpider提供了两个不同的执行程序，分别为easyspider_executestage和easyspider_executestage_full，前者执行时加载速度较快，并提供了除OCR识别和数据去重以外的全部功能；后者则提供了包括OCR识别和数据去重在内的全部功能，但运行时加载速度较慢，需要等待2-10分钟才能执行程序，请根据自己的需求选择执行哪个程序。~For MacOS system, EasySpider provides two different execution programs, 'easyspider_executestage' and 'easyspider_executestage_full', the former loads faster when executing, and provides all functions except OCR recognition and data deduplication; the latter provides all functions including OCR recognition and data deduplication, but the loading speed is slower when running, and it takes 2-10 minutes to wait for the program to execute, please choose which program to execute according to your needs.` | lang}}</label>
<label>{{ `Please open a terminal (For Windows, please use PowerShell instead of CMD), go to EasySpider's folder, and then copy (Command/Ctrl + c) the following command to run the task (EasySpider can quit when executing command for ease of timed execution, and you can set --read_type to "remote" for remote execution):~请在EasySpider目录下打开命令行工具Terminal （Windows请使用PowerShell而不是CMD），然后复制（Command/Ctrl + c）和运行以下命令以执行任务（执行命令时可以退出EasySpider以方便定时执行，如需要远程调用则需要将--read_type设置为remote并设置远程地址）：` | lang }}</label> <label>{{ `Please open a terminal (For Windows, please use PowerShell instead of CMD), go to EasySpider's folder, and then copy (Command/Ctrl + c) the following command to run the task (EasySpider can quit when executing command for ease of timed execution, and you can set --read_type to "remote" for remote execution):~请在EasySpider目录下打开命令行工具Terminal （Windows请使用PowerShell而不是CMD），然后复制（Command/Ctrl + c）和运行以下命令以执行任务（执行命令时可以退出EasySpider以方便定时执行，如需要远程调用则需要将--read_type设置为remote并设置远程地址）：` | lang }}</label>
<textarea class="form-control" style="height:150px">cd {{easyspider_location}} <textarea class="form-control" style="height:150px">cd {{easyspider_location}}
@ -94,34 +105,38 @@
</div> </div>
</div> </div>
<div class="modal fade" id="excelModal" tabindex="-1" role="dialog" aria-labelledby="excelModalLabel" aria-hidden="true"> <div class="modal fade" id="excelModal" tabindex="-1" role="dialog" aria-labelledby="excelModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="excelModalLabel">{{"Read from Excel~从Excel文件读取输入参数" | lang}}</h4> <h4 class="modal-title"
id="excelModalLabel">{{"Read from Excel~从Excel文件读取输入参数" | lang}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<!-- <form action="/upload" method="post" enctype="multipart/form-data">--> <!-- <form action="/upload" method="post" enctype="multipart/form-data">-->
<div> <div>
<div class="form-group" style="margin-bottom: 10px"> <div class="form-group" style="margin-bottom: 10px">
<label>{{"Please select an Excel file (.xlsx)~请选择一个Excel文件（.xlsx）" | lang}}</label> <label>{{"Please select an Excel file (.xlsx)~请选择一个Excel文件（.xlsx）" | lang}}</label>
<input type="file" class="form-control-file" id="excelFile" name="file"> <input type="file" class="form-control-file" id="excelFile" name="file">
<label style="display: block; margin-top:10px;margin-bottom: 0">{{fileUploadStatus | lang}}</label> <label style="display: block; margin-top:10px;margin-bottom: 0">{{fileUploadStatus | lang}}</label>
</div> </div>
<button @click="submitFile" class="btn btn-primary" style="min-width: 100px;margin-bottom:10px">{{"Upload~上传" | lang}}</button> <button @click="submitFile" class="btn btn-primary"
style="min-width: 100px;margin-bottom:10px">{{"Upload~上传" | lang}}
</button>
<!-- </form>--> <!-- </form>-->
</div> </div>
<label style="margin:10px 0">{{"Please design an Excel file (.xlsx) according to the following format and upload it above.~请按照以下格式设计一个Excel文件（.xlsx），并在上方上传：" | lang}}</label> <label style="margin:10px 0">{{"Please design an Excel file (.xlsx) according to the following format and upload it above.~请按照以下格式设计一个Excel文件（.xlsx），并在上方上传：" | lang}}</label>
<table class="table table-bordered excel" style="text-align: center; font-size: 13px"> <table class="table table-bordered excel" style="text-align: center; font-size: 13px">
<thead> <thead>
<tr> <tr>
<th scope="col">{{"Invoke Name 1~调用名称1" | lang}}</th> <th scope="col">{{"Invoke Name 1~调用名称1" | lang}}</th>
<th scope="col">{{"Invoke Name 2~调用名称2" | lang}}</th> <th scope="col">{{"Invoke Name 2~调用名称2" | lang}}</th>
<th scope="col">...</th> <th scope="col">...</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -145,15 +160,17 @@
<label>{{"You can just put part of the arguments in the Excel file, and the values of the rest of the arguments will be set to default. Example table for this task is:~您可以只在Excel文件中放入部分参数，其余参数值将被设置为默认值。一个针对此任务的表格示例为：" | lang}}</label> <label>{{"You can just put part of the arguments in the Excel file, and the values of the rest of the arguments will be set to default. Example table for this task is:~您可以只在Excel文件中放入部分参数，其余参数值将被设置为默认值。一个针对此任务的表格示例为：" | lang}}</label>
<table class="table table-bordered excel"> <table class="table table-bordered excel">
<thead> <thead>
<tr> <tr>
<th v-for="i in Math.min(3, task.inputParameters.length)" v-if="task.inputParameters.length>0"> <th v-for="i in Math.min(3, task.inputParameters.length)"
{{task.inputParameters[i-1]["name"]}} v-if="task.inputParameters.length>0">
</th> {{task.inputParameters[i-1]["name"]}}
</tr> </th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td v-for="i in Math.min(3, task.inputParameters.length)" v-if="task.inputParameters.length>0"> <td v-for="i in Math.min(3, task.inputParameters.length)"
v-if="task.inputParameters.length>0">
{{getLine(i,0)}} {{getLine(i,0)}}
</td> </td>
<tr> <tr>
@ -171,8 +188,10 @@
<tr> <tr>
</tbody> </tbody>
</table> </table>
<label v-if='lang == "zh"' style="width: 95%">对于循环输入文字的参数（loopText）需要配置索引值的情况，即输入文字操作用了相对循环内的索引值，您可以在Excel文件中写同一个参数名写多列，程序将自动合并。 例如，想要设置'loopText_1'参数值两行，分别为"A~B~C"和"D~E~F"，则Excel文件可以这样设置：</label> <label v-if='lang == "zh"'
<label v-else style="width: 95%"> For parameters that need to configure the index value of the loop text (loopText), that is, the input text operation uses the index value relative to the loop, you can write multiple columns with the same parameter name in the Excel file, and the program will automatically merge. For example, if you want to set the parameter value of 'loopText_1' to two rows, which are "A~B~C" and "D~E~F", the Excel file can be set like this:</label> style="width: 95%">对于循环输入文字的参数（loopText）需要配置索引值的情况，即输入文字操作用了相对循环内的索引值，您可以在Excel文件中写同一个参数名写多列，程序将自动合并。 例如，想要设置'loopText_1'参数值两行，分别为"A~B~C"和"D~E~F"，则Excel文件可以这样设置：</label>
<label v-else
style="width: 95%"> For parameters that need to configure the index value of the loop text (loopText), that is, the input text operation uses the index value relative to the loop, you can write multiple columns with the same parameter name in the Excel file, and the program will automatically merge. For example, if you want to set the parameter value of 'loopText_1' to two rows, which are "A~B~C" and "D~E~F", the Excel file can be set like this:</label>
<table class="table table-bordered excel" style="text-align: center; font-size: 13px"> <table class="table table-bordered excel" style="text-align: center; font-size: 13px">
<thead> <thead>
<tr> <tr>
@ -204,7 +223,8 @@
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb" style="padding-left:0;background-color: white"> <ol class="breadcrumb" style="padding-left:0;background-color: white">
<li @click="gotoHome" class="breadcrumb-item"><a href="#">{{"Home~首页" | lang}}</a></li> <li @click="gotoHome" class="breadcrumb-item"><a href="#">{{"Home~首页" | lang}}</a></li>
<li @click="gotoInfo" aria-current="page" class="breadcrumb-item" style="color: black"><a href="#">{{"Task Information~任务信息" | lang}}</a></li> <li @click="gotoInfo" aria-current="page" class="breadcrumb-item" style="color: black"><a
href="#">{{"Task Information~任务信息" | lang}}</a></li>
<li aria-current="page" class="breadcrumb-item active" style="color: black">{{"Task Execution~任务执行" <li aria-current="page" class="breadcrumb-item active" style="color: black">{{"Task Execution~任务执行"
| lang}} | lang}}
</li> </li>
@ -215,10 +235,15 @@
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"API URL (POST):~API 调用网址（POST）：" | <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"API URL (POST):~API 调用网址（POST）：" |
lang}} {{backEndAddressServiceWrapper}}/invokeTask?id={{task["id"]}}</p> lang}} {{backEndAddressServiceWrapper}}/invokeTask?id={{task["id"]}}</p>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"URL of how to invoke task by API via POST request (Postman or JavaScript): ~通过POST方式进行API调用的示例教程（Postman或JS代码）：" | lang}}<a target="_blank" href="https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example">https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example</a></p> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"URL of how to invoke task by API via POST request (Postman or JavaScript): ~通过POST方式进行API调用的示例教程（Postman或JS代码）：" | lang}}<a
<p><button class="btn btn-primary" @click="readFromExcel">{{"Read parameters from Excel file~从Excel文件读取输入参数" target="_blank"
| lang}} href="https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example">https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example</a>
</button></p> </p>
<p>
<button class="btn btn-primary" @click="readFromExcel">{{"Read parameters from Excel file~从Excel文件读取输入参数"
| lang}}
</button>
</p>
<p>{{"Please Input Parameters:~请输入参数值：" | lang}}</p> <p>{{"Please Input Parameters:~请输入参数值：" | lang}}</p>
<form id="form"> <form id="form">
<table class="table table-bordered"> <table class="table table-bordered">
@ -237,7 +262,8 @@
<td style="text-align: center; max-width: 250px;white-space: initial">{{task.inputParameters[i-1]["name"]}}</td> <td style="text-align: center; max-width: 250px;white-space: initial">{{task.inputParameters[i-1]["name"]}}</td>
<td style="max-width: 100px; text-align: center">{{task.inputParameters[i-1]["type"]}}</td> <td style="max-width: 100px; text-align: center">{{task.inputParameters[i-1]["type"]}}</td>
<td><textarea class="form-control" <td><textarea class="form-control"
style="min-height: 50px;min-width: 300px;" v-bind:name="task.inputParameters[i-1]['name']" style="min-height: 50px;min-width: 300px;"
v-bind:name="task.inputParameters[i-1]['name']"
v-model="task.inputParameters[i-1]['value']"></textarea></td> v-model="task.inputParameters[i-1]['value']"></textarea></td>
</tr> </tr>
</tbody> </tbody>
@ -255,10 +281,12 @@
</div> </div>
</form> </form>
<label style="display: block">{{"Click the button below to execute the task. Long press the pause button (default: p) on the keyboard to pause the task. Manual intervention is possible during the task execution process, ~点击以下按钮执行任务，任务执行过程中可以长按暂停键（默认：p键）暂停任务的执行以便" | lang }}<b>{{"~人工干预，" | lang}}</b>{{"such as manually input a password or captcha: ~如手动输入密码，验证码等。" | lang}}</label> <label style="display: block">{{"Click the button below to execute the task. Long press the pause button (default: p) on the keyboard to pause the task. Manual intervention is possible during the task execution process, ~点击以下按钮执行任务，任务执行过程中可以长按暂停键（默认：p键）暂停任务的执行以便" | lang }}<b>{{"~人工干预，" | lang}}</b>{{"such as manually input a password or captcha: ~如手动输入密码，验证码等。" | lang}}</label>
<button class="btn btn-primary" v-on:click="localExecuteInstant(false)">{{"Directly Run Locally (Clean Mode)~本地直接执行（纯净模式）" | <button class="btn btn-primary"
v-on:click="localExecuteInstant(false)">{{"Directly Run Locally (Clean Mode)~本地直接执行（纯净模式）" |
lang}} lang}}
</button> </button>
<button class="btn btn-primary" v-on:click="localExecuteInstant(true)">{{"Directly Run Locally (Data Mode)~本地直接执行（带用户信息模式）" | <button class="btn btn-primary"
v-on:click="localExecuteInstant(true)">{{"Directly Run Locally (Data Mode)~本地直接执行（带用户信息模式）" |
lang}} lang}}
</button> </button>
<!-- <button style="margin-left: 5px;" v-on:click="remoteExcuteInstant" class="btn btn-primary">Directly Run Remotely</button> --> <!-- <button style="margin-left: 5px;" v-on:click="remoteExcuteInstant" class="btn btn-primary">Directly Run Remotely</button> -->
@ -267,16 +295,21 @@
</label> </label>
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
<label style="margin-top: 10px;">{{"Execution ID (EID), execution files are stored in 'execution_instances' folder, you can write EID by yourself and the set the filename other than 'current_time to append content to the existing file from the EID to achieve incremental collection:~执行ID（执行文件存放在execution_instances文件夹内，提前在下方写好执行ID且文件名不为current_time时可以追加文件内容以实现增量采集）：" | lang}}</label> <label style="margin-top: 10px;">{{"Execution ID (EID), execution files are stored in 'execution_instances' folder, you can write EID by yourself and the set the filename other than 'current_time to append content to the existing file from the EID to achieve incremental collection:~执行ID（执行文件存放在execution_instances文件夹内，提前在下方写好执行ID且文件名不为current_time时可以追加文件内容以实现增量采集）：" | lang}}</label>
<input class="form-control" v-model="ID" :placeholder="LANG('如果已在此处写/生成了ID号，则点击执行或获得ID按钮后，任务ID将保持不变且原任务文件将会被新配置覆盖','If already have ID here, the task ID will remain unchanged and the original task file will be overwritten by the new configuration after click buttons')"></input> <input class="form-control" v-model="ID"
:placeholder="LANG('如果已在此处写/生成了ID号，则点击执行或获得ID按钮后，任务ID将保持不变且原任务文件将会被新配置覆盖','If already have ID here, the task ID will remain unchanged and the original task file will be overwritten by the new configuration after click buttons')"></input>
<p></p> <p></p>
<!-- <p>提示：点击下方按钮获得任务ID，然后根据此ID进行服务执行；也可自己POST调用接口得到ID，具体参照POST调用文档。</p> --> <!-- <p>提示：点击下方按钮获得任务ID，然后根据此ID进行服务执行；也可自己POST调用接口得到ID，具体参照POST调用文档。</p> -->
<p>{{"Hint: Click the \"Get Execution ID\" button at the bottom to get the task ID, and click the \"Execute task by commandline\" button at the back to get the prompt command on how to run this task using the command line.~提示：点击下方“获得任务执行ID”按钮得到任务ID，点击后面的“使用命令行执行任务”按钮获得如何使用命令行运行任务的提示命令。" | lang}}</p> <p>{{"Hint: Click the \"Get Execution ID\" button at the bottom to get the task ID, and click the \"Execute task by commandline\" button at the back to get the prompt command on how to run this task using the command line.~提示：点击下方“获得任务执行ID”按钮得到任务ID，点击后面的“使用命令行执行任务”按钮获得如何使用命令行运行任务的提示命令。" | lang}}</p>
<button class="btn btn-primary" href="javascript:void(0)" v-on:click="invokeTask">{{"Get Execution ID~获得任务执行ID" | <button class="btn btn-primary" href="javascript:void(0)"
lang}}</button> v-on:click="invokeTask">{{"Get Execution ID~获得任务执行ID" |
<button class="btn btn-primary" style="margin-left: 8px;" v-on:click="localExecute(false)">{{"Execute task by commandline (Clean Mode)~使用命令行执行任务（纯净模式）" lang}}
</button>
<button class="btn btn-primary" style="margin-left: 8px;"
v-on:click="localExecute(false)">{{"Execute task by commandline (Clean Mode)~使用命令行执行任务（纯净模式）"
| lang}} | lang}}
</button> </button>
<button class="btn btn-primary" style="margin-left: 8px;" v-on:click="localExecute(true)">{{"Execute task by commandline (Data Mode)~使用命令行执行任务（带用户信息模式）" <button class="btn btn-primary" style="margin-left: 8px;"
v-on:click="localExecute(true)">{{"Execute task by commandline (Data Mode)~使用命令行执行任务（带用户信息模式）"
| lang}} | lang}}
</button> </button>
<!-- <button v-on:click="remoteExcute" style="margin-left: 8px;" class="btn btn-primary">Run remotely</button></div> --> <!-- <button v-on:click="remoteExcute" style="margin-left: 8px;" class="btn btn-primary">Run remotely</button></div> -->
@ -290,14 +323,14 @@
</html> </html>
<style> <style>
button{ button {
margin-top: 5px; margin-top: 5px;
} }
</style> </style>
<script src="global.js"></script> <script src="global.js"></script>
<script> <script>
var sId = getUrlParam('id'); let sId = getUrlParam('id');
var app = new Vue({ let app = new Vue({
el: '#taskInfo', el: '#taskInfo',
data: { data: {
task: {}, task: {},
@ -306,8 +339,8 @@
lang: getUrlParam("lang"), lang: getUrlParam("lang"),
type: getUrlParam("type"), type: getUrlParam("type"),
tip: "The parameter values in the Excel file have been successfully imported into the corresponding field text box~Excel文件中的参数值已成功导入到对应字段文本框中", tip: "The parameter values in the Excel file have been successfully imported into the corresponding field text box~Excel文件中的参数值已成功导入到对应字段文本框中",
file:null, file: null,
user_data_folder:"", user_data_folder: "",
fileUploadStatus: "Status: Waiting for upload~状态：等待上传", fileUploadStatus: "Status: Waiting for upload~状态：等待上传",
with_user_data: true, with_user_data: true,
backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"), backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
@ -317,16 +350,16 @@
mysql_config_path: "", mysql_config_path: "",
OS: "win32", OS: "win32",
}, mounted() { }, mounted() {
$.get(this.backEndAddressServiceWrapper + "/getConfig", function (result) { $.get(this.backEndAddressServiceWrapper + "/getConfig", function (result) {
app.$data.user_data_folder = result.user_data_folder; app.$data.user_data_folder = result.user_data_folder;
try{ try {
app.$data.mysql_config_path = result.mysql_config_path; app.$data.mysql_config_path = result.mysql_config_path;
} catch (e) { } catch (e) {
app.$data.mysql_config_path = "./mysql_config.json"; app.$data.mysql_config_path = "./mysql_config.json";
} }
}); });
//TODO 翻译 写清楚readme有关浏览器版本的问题 logo更换 提示看文档来运行 //TODO 翻译 写清楚readme有关浏览器版本的问题 logo更换 提示看文档来运行
}, },
methods: { methods: {
LANG: function (zh, en) { LANG: function (zh, en) {
if (this.lang == "zh") { if (this.lang == "zh") {
@ -338,40 +371,40 @@
gotoHome: function () { gotoHome: function () {
let url = ""; let url = "";
if (getUrlParam("lang") == "zh") { if (getUrlParam("lang") == "zh") {
url = "taskList.html?lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper url = "taskList.html?lang=zh&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} else { } else {
url = "taskList.html?lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper url = "taskList.html?lang=en&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} }
window.location.href = url; window.location.href = url;
}, gotoInfo: function () { }, gotoInfo: function () {
let url = ""; let url = "";
if (getUrlParam("lang") == "zh") { if (getUrlParam("lang") == "zh") {
url = "taskInfo.html?id="+getUrlParam("id")+"&lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper url = "taskInfo.html?id=" + getUrlParam("id") + "&lang=zh&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} else { } else {
url = "taskInfo.html?id="+getUrlParam("id")+"&lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper url = "taskInfo.html?id=" + getUrlParam("id") + "&lang=en&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} }
window.location.href = url; window.location.href = url;
}, getLine: function(i, index){ }, getLine: function (i, index) {
const value = this.task.inputParameters[i-1]["value"].toString(); const value = this.task.inputParameters[i - 1]["value"].toString();
const parts = value.split("\n"); const parts = value.split("\n");
if(parts.length > index){ if (parts.length > index) {
return parts[index]; return parts[index];
} else if(this.task.inputParameters[i-1]["name"].indexOf("url") >=0){ } else if (this.task.inputParameters[i - 1]["name"].indexOf("url") >= 0) {
return parts[0]; return parts[0];
} else { } else {
return ""; return "";
} }
}, },
readFromExcel: function(){ readFromExcel: function () {
$('#excelModal').modal('show'); $('#excelModal').modal('show');
}, submitFile: function() { }, submitFile: function () {
let form_data = new FormData(); let form_data = new FormData();
this.file = $('#excelFile').prop('files')[0]; this.file = $('#excelFile').prop('files')[0];
if(this.file == null || $('#excelFile').val() == ""){ if (this.file == null || $('#excelFile').val() == "") {
this.fileUploadStatus = "Status: Please select a file~状态：请选择文件"; this.fileUploadStatus = "Status: Please select a file~状态：请选择文件";
return; return;
} }
if (this.file.name.split('.').pop() !== 'xlsx' ) { if (this.file.name.split('.').pop() !== 'xlsx') {
this.fileUploadStatus = "Status: Only xlsx files are allowed!~状态：只允许上传xlsx文件！"; this.fileUploadStatus = "Status: Only xlsx files are allowed!~状态：只允许上传xlsx文件！";
return; return;
} }
@ -379,25 +412,25 @@
form_data.append('file', $('#excelFile').prop('files')[0]); form_data.append('file', $('#excelFile').prop('files')[0]);
// console.log(app.$data.backEndAddressServiceWrapper + "/excelUpload",) // console.log(app.$data.backEndAddressServiceWrapper + "/excelUpload",)
$.ajax({ $.ajax({
url: app.$data.backEndAddressServiceWrapper.replace("8074","8075") + "/excelUpload", url: app.$data.backEndAddressServiceWrapper.replace("8074", "8075") + "/excelUpload",
type: 'POST', type: 'POST',
data: form_data, data: form_data,
processData: false, processData: false,
contentType: false, contentType: false,
success: function(response) { success: function (response) {
response = JSON.parse(response); response = JSON.parse(response);
$('#excelModal').modal('hide'); $('#excelModal').modal('hide');
app.$data.fileUploadStatus = "Status: Upload successfully~状态：上传成功"; app.$data.fileUploadStatus = "Status: Upload successfully~状态：上传成功";
$('#excelFile').val(""); $('#excelFile').val("");
let inputParameters = app.$data.task.inputParameters; let inputParameters = app.$data.task.inputParameters;
inputParameters.forEach(function (item, index) { inputParameters.forEach(function (item, index) {
if(Object.keys(response).includes(item.name)){ if (Object.keys(response).includes(item.name)) {
let temp = ""; let temp = "";
let tempArray = []; let tempArray = [];
for (let i = 0; i < response[item.name].length; i++) { for (let i = 0; i < response[item.name].length; i++) {
for(let key of Object.keys(response)){ for (let key of Object.keys(response)) {
if(key.includes(item.name)){ if (key.includes(item.name)) {
temp += response[key][i] == undefined? "": response[key][i] + "~"; temp += response[key][i] == undefined ? "" : response[key][i] + "~";
} }
} }
temp = temp.substring(0, temp.length - 1); //去掉最后一个~ temp = temp.substring(0, temp.length - 1); //去掉最后一个~
@ -408,11 +441,11 @@
} }
}); });
$("#tipCustom").slideDown(); //提示框 $("#tipCustom").slideDown(); //提示框
setTimeout(function() { setTimeout(function () {
$("#tipCustom").slideUp(); $("#tipCustom").slideUp();
}, 3000); }, 3000);
}, },
error: function(err) { error: function (err) {
app.$data.fileUploadStatus = "Status: Upload failed~状态：上传失败"; app.$data.fileUploadStatus = "Status: Upload failed~状态：上传失败";
} }
}); });
@ -436,17 +469,17 @@
params: JSON.stringify(param) params: JSON.stringify(param)
} }
$.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", message, function (result) { $.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", message, function (result) {
if(app.$data.ID == result){ if (app.$data.ID == result) {
if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") { if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
$("#tipID_EN").slideDown(); //提示框 $("#tipID_EN").slideDown(); //提示框
$("#newID_EN").text(result); $("#newID_EN").text(result);
setTimeout(function() { setTimeout(function () {
$("#tipID_EN").slideUp(); $("#tipID_EN").slideUp();
}, 5000); }, 5000);
} else { } else {
$("#tipID").slideDown(); //提示框 $("#tipID").slideDown(); //提示框
$("#newID_ZH").text(result); $("#newID_ZH").text(result);
setTimeout(function() { setTimeout(function () {
$("#tipID").slideUp(); $("#tipID").slideUp();
}, 5000); }, 5000);
} }
@ -455,16 +488,16 @@
}); });
// } // }
}, },
localExecute: function (with_user_data=false) { localExecute: function (with_user_data = false) {
if (this.ID === "") { if (this.ID === "") {
if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") { if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
$("#tipEN").slideDown(); //提示框 $("#tipEN").slideDown(); //提示框
setTimeout(function() { setTimeout(function () {
$("#tipEN").slideUp(); $("#tipEN").slideUp();
}, 3000); }, 3000);
} else { } else {
$("#tip").slideDown(); //提示框 $("#tip").slideDown(); //提示框
setTimeout(function() { setTimeout(function () {
$("#tip").slideUp(); $("#tip").slideUp();
}, 3000); }, 3000);
} }
@ -478,24 +511,24 @@
// text = "确定要在本地运行此任务吗？"; // text = "确定要在本地运行此任务吗？";
// } // }
// if (confirm(text)) { // if (confirm(text)) {
let message = { //显示flowchart let message = { //显示flowchart
type: 5, //消息类型，调用执行程序 type: 5, //消息类型，调用执行程序
message: { message: {
"id": app.$data.ID, "id": app.$data.ID,
"user_data_folder": app.$data.with_user_data ? app.$data.user_data_folder : "", "user_data_folder": app.$data.with_user_data ? app.$data.user_data_folder : "",
"mysql_config_path": app.$data.mysql_config_path, "mysql_config_path": app.$data.mysql_config_path,
"execute_type": 0, "execute_type": 0,
} }
}; };
ws.send(JSON.stringify(message)); ws.send(JSON.stringify(message));
changeCommand(); changeCommand();
$('#myModal').modal('show'); $('#myModal').modal('show');
// } // }
}, },
remoteExecute: function () { remoteExecute: function () {
}, },
localExecuteInstant: function (with_user_data=false) { localExecuteInstant: function (with_user_data = false) {
let text = ""; let text = "";
// if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") { // if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
// text = "Are you sure to run this task locally now?"; // text = "Are you sure to run this task locally now?";
@ -505,34 +538,34 @@
this.with_user_data = with_user_data; this.with_user_data = with_user_data;
// if (confirm(text)) { // if (confirm(text)) {
let param = {}; let param = {};
let t = $('#form').serializeArray(); let t = $('#form').serializeArray();
t.forEach(function (item, index) { t.forEach(function (item, index) {
param[item.name] = item.value; param[item.name] = item.value;
}); });
$.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", { $.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", {
id: this.task.id, id: this.task.id,
EID: this.ID, EID: this.ID,
params: JSON.stringify(param) params: JSON.stringify(param)
}, function (result) { }, function (result) {
let message = { //显示flowchart let message = { //显示flowchart
type: 5, //消息类型，调用执行程序 type: 5, //消息类型，调用执行程序
message: { message: {
"id": result, "id": result,
"user_data_folder": app.$data.with_user_data ? app.$data.user_data_folder : "", "user_data_folder": app.$data.with_user_data ? app.$data.user_data_folder : "",
"mysql_config_path": app.$data.mysql_config_path, "mysql_config_path": app.$data.mysql_config_path,
"execute_type": 1, "execute_type": 1,
} }
}; };
app.$data.ID = result; app.$data.ID = result;
ws.send(JSON.stringify(message)); ws.send(JSON.stringify(message));
$.get(app.$data.backEndAddressServiceWrapper + "/queryOSVersion", function (OSInfo) { $.get(app.$data.backEndAddressServiceWrapper + "/queryOSVersion", function (OSInfo) {
if(OSInfo.version == 'darwin'){ if (OSInfo.version == 'darwin') {
changeCommand(); changeCommand();
$('#myModal').modal('show'); $('#myModal').modal('show');
} }
});
}); });
});
// } // }
}, },
remoteExecuteInstant: function () { remoteExecuteInstant: function () {
@ -543,17 +576,17 @@
function changeCommand() { function changeCommand() {
$.get(app.$data.backEndAddressServiceWrapper + "/queryOSVersion", function (OSInfo) { $.get(app.$data.backEndAddressServiceWrapper + "/queryOSVersion", function (OSInfo) {
app.$data.OS = OSInfo.version; app.$data.OS = OSInfo.version;
if(OSInfo.version == 'win32' && OSInfo.bit == 'x64'){ if (OSInfo.version == 'win32' && OSInfo.bit == 'x64') {
app.$data.command = "./EasySpider/resources/app/chrome_win64/easyspider_executestage.exe --ids [" + app.$data.ID.toString() + "] --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper; app.$data.command = "./EasySpider/resources/app/chrome_win64/easyspider_executestage.exe --ids [" + app.$data.ID.toString() + "] --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper;
} else if(OSInfo.version == 'win32' && OSInfo.bit == 'ia32'){ } else if (OSInfo.version == 'win32' && OSInfo.bit == 'ia32') {
app.$data.command = "./EasySpider/resources/app/chrome_win32/easyspider_executestage.exe --ids [" + app.$data.ID.toString() + "] --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper; app.$data.command = "./EasySpider/resources/app/chrome_win32/easyspider_executestage.exe --ids [" + app.$data.ID.toString() + "] --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper;
} else if(OSInfo.version == 'linux'){ } else if (OSInfo.version == 'linux') {
app.$data.command = "./EasySpider/resources/app/chrome_linux64/easyspider_executestage --ids '[" + app.$data.ID.toString() + "]' --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper; app.$data.command = "./EasySpider/resources/app/chrome_linux64/easyspider_executestage --ids '[" + app.$data.ID.toString() + "]' --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper;
} else if(OSInfo.version == 'darwin'){ } else if (OSInfo.version == 'darwin') {
if(getUrlParam("lang") == "zh"){ if (getUrlParam("lang") == "zh") {
app.$data.easyspider_location = "你的EasySpider文件夹，如：cd /Users/"+ app.$data.config_folder.split("/")[2] + "/Downloads/EasySpider_MacOS"; app.$data.easyspider_location = "你的EasySpider文件夹，如：cd /Users/" + app.$data.config_folder.split("/")[2] + "/Downloads/EasySpider_MacOS";
} else { } else {
app.$data.easyspider_location = "Your EasySpider folder, such as: cd /Users/"+ app.$data.config_folder.split("/")[2] + "/Downloads/EasySpider_MacOS"; app.$data.easyspider_location = "Your EasySpider folder, such as: cd /Users/" + app.$data.config_folder.split("/")[2] + "/Downloads/EasySpider_MacOS";
} }
app.$data.command = "./easyspider_executestage --ids '[" + app.$data.ID.toString() + "]' --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper; app.$data.command = "./easyspider_executestage --ids '[" + app.$data.ID.toString() + "]' --user_data " + (app.$data.with_user_data ? "1" : "0") + " --server_address " + app.$data.backEndAddressServiceWrapper;
} }
@ -565,7 +598,7 @@
app.$data.show = true; app.$data.show = true;
}); });
ws = new WebSocket("ws://localhost:"+getUrlParam("wsport")); ws = new WebSocket("ws://localhost:" + getUrlParam("wsport"));
ws.onopen = function () { ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据 // Web Socket 已连接上，使用 send() 方法发送数据
console.log("Connected"); console.log("Connected");
@ -587,10 +620,10 @@
}; };
this.send(JSON.stringify(message)); this.send(JSON.stringify(message));
}; };
ws.onmessage = function(message){ ws.onmessage = function (message) {
message = JSON.parse(message.data); message = JSON.parse(message.data);
app.$data.config_folder = message.config_folder.replaceAll("\\","/"); app.$data.config_folder = message.config_folder.replaceAll("\\", "/");
app.$data.easyspider_location = message.easyspider_location.replace("/EasySpider.app/",""); app.$data.easyspider_location = message.easyspider_location.replace("/EasySpider.app/", "");
} }
ws.onclose = function () { ws.onclose = function () {
// 关闭 websocket // 关闭 websocket

14
ElectronJS/src/taskGrid/global.js
View File

@ -23,14 +23,14 @@ function DateFormat(datetime) {
function formatDateTime(date) { function formatDateTime(date) {
const addZero = (num) => (num < 10 ? `0${num}` : num); const addZero = (num) => (num < 10 ? `0${num}` : num);
let year = date.getFullYear(); let year = date.getFullYear();
let month = addZero(date.getMonth() + 1); // getMonth() 返回值范围是0-11，所以加1 let month = addZero(date.getMonth() + 1); // getMonth() 返回值范围是0-11，所以加1
let day = addZero(date.getDate()); let day = addZero(date.getDate());
let hours = addZero(date.getHours()); let hours = addZero(date.getHours());
let minutes = addZero(date.getMinutes()); let minutes = addZero(date.getMinutes());
let seconds = addZero(date.getSeconds()); let seconds = addZero(date.getSeconds());
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
@ -57,7 +57,7 @@ function detectLang(str) {
if (enCount === cnCount) { if (enCount === cnCount) {
return 2; return 2;
} else if (cnCount>=3) { } else if (cnCount >= 3) {
return 1; return 1;
} }
return 0; return 0;
@ -96,9 +96,9 @@ function isValidMySQLTableName(tableName) {
return pattern.test(tableName); return pattern.test(tableName);
} }
document.onkeydown = function(e) { document.onkeydown = function (e) {
let t = false; let t = false;
try{ try {
t = nowNode; t = nowNode;
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -117,8 +117,8 @@ document.onkeydown = function(e) {
location.reload(); location.reload();
} else if (currKey == 123) { } else if (currKey == 123) {
console.log("打开devtools") console.log("打开devtools")
let command = new WebSocket("ws://localhost:"+getUrlParam("wsport")) let command = new WebSocket("ws://localhost:" + getUrlParam("wsport"))
command.onopen = function() { command.onopen = function () {
let message = { let message = {
type: 6, //消息类型，0代表连接操作 type: 6, //消息类型，0代表连接操作
}; };

8
ElectronJS/src/taskGrid/logic.js
View File

@ -374,7 +374,7 @@ function modifyParameters(t, param) {
t["parameters"]["xpath"] = param["xpath"]; t["parameters"]["xpath"] = param["xpath"];
t["parameters"]["useLoop"] = param["useLoop"]; t["parameters"]["useLoop"] = param["useLoop"];
t["parameters"]["allXPaths"] = param["allXPaths"]; t["parameters"]["allXPaths"] = param["allXPaths"];
if(param["type"] == "loopClickEvery"){ if (param["type"] == "loopClickEvery") {
t["parameters"]["newTab"] = 1; //循环点击每个元素，新标签页打开 t["parameters"]["newTab"] = 1; //循环点击每个元素，新标签页打开
} }
} else if (t.option == 4) { //输入文字事件 } else if (t.option == 4) { //输入文字事件
@ -404,7 +404,7 @@ function modifyParameters(t, param) {
if (content.length > 15) { if (content.length > 15) {
content = content.substring(0, 15) + "..."; content = content.substring(0, 15) + "...";
content = LANG("：", ": ") + content; content = LANG("：", ": ") + content;
} else if(content.length == 0){ } else if (content.length == 0) {
content = LANG("单个元素", " Single Element"); content = LANG("单个元素", " Single Element");
} else { } else {
content = LANG("：", ": ") + content; content = LANG("：", ": ") + content;
@ -667,8 +667,8 @@ if (sId != null && sId != -1) //加载任务
if (!("cookies" in node["parameters"])) { if (!("cookies" in node["parameters"])) {
node["parameters"]["cookies"] = ""; node["parameters"]["cookies"] = "";
} }
} else if(node["option"] == 3){ //提取数据 } else if (node["option"] == 3) { //提取数据
if(node["parameters"]["paras"] != undefined && node["parameters"]["params"] == undefined){ if (node["parameters"]["paras"] != undefined && node["parameters"]["params"] == undefined) {
node["parameters"]["params"] = node["parameters"]["paras"]; node["parameters"]["params"] = node["parameters"]["paras"];
} }
} }

195
ElectronJS/src/taskGrid/taskInfo.html
View File

@ -4,7 +4,8 @@
<head> <head>
<script src="jquery-3.4.1.min.js"></script> <script src="jquery-3.4.1.min.js"></script>
<meta charset="UTF-8"> <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 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"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js"></script> <script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
@ -18,7 +19,7 @@
td, td,
th, th,
tr { tr {
border-color: black!important; border-color: black !important;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -34,84 +35,89 @@
<body> <body>
<div class="row" style="margin-top: 40px;"> <div class="row" style="margin-top: 40px;">
<div class="col-md-7" style="margin:0 auto" id="taskInfo" v-if="show"> <div class="col-md-7" style="margin:0 auto" id="taskInfo" v-if="show">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb" style="padding-left:0;background-color: white"> <ol class="breadcrumb" style="padding-left:0;background-color: white">
<li class="breadcrumb-item" @click="gotoHome"><a href="#">{{"Home~首页" | lang}}</a></li> <li class="breadcrumb-item" @click="gotoHome"><a href="#">{{"Home~首页" | lang}}</a></li>
<li class="breadcrumb-item active" aria-current="page" style="color: black">{{"Task Information~任务信息" | lang}}</li> <li class="breadcrumb-item active" aria-current="page"
</ol> style="color: black">{{"Task Information~任务信息" | lang}}
</nav> </li>
<h4 style="text-align: center;">{{"Task Information~任务信息" | lang}}</h4> </ol>
<p>{{"Task Name:~任务名称：" | lang}} {{task["name"]}}</p> </nav>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p> <h4 style="text-align: center;">{{"Task Information~任务信息" | lang}}</h4>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Example URL:~样例网址：" | lang}} {{task["url"]}}</p> <p>{{"Task Name:~任务名称：" | lang}} {{task["name"]}}</p>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Create Time:~创建时间：" | lang}} {{dateFormat(task["create_time"])}}</p> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p>
<p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Update Time:~更新时间：" | lang}} {{dateFormat(task["update_time"])}}</p> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Example URL:~样例网址：" | lang}} {{task["url"]}}</p>
<p>{{"Operations (Please close this window and select 'Design Task' button if you want to modify task with a browser)~操作（如要带浏览器修改任务流程请关闭此窗口并选择设计任务）" | lang}}</p> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Create Time:~创建时间：" | lang}} {{dateFormat(task["create_time"])}}</p>
<p><a style="margin-top: 5px" href="javascript:void(0)" v-on:click="modifyTask(task['id'],task['url'])" class="btn btn-primary">{{"Modify Task~修改任务" | lang}}</a> <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Update Time:~更新时间：" | lang}} {{dateFormat(task["update_time"])}}</p>
<a style="margin-top: 5px" href="javascript:void(0)" v-on:click="invokeTask(task['id'],task['url'])" class="btn btn-primary">{{"Execute Task~执行任务" | lang}}</a></p> <p>{{"Operations (Please close this window and select 'Design Task' button if you want to modify task with a browser)~操作（如要带浏览器修改任务流程请关闭此窗口并选择设计任务）" | lang}}</p>
<p>{{"Input Parameters~输入参数" | lang}}</p> <p><a style="margin-top: 5px" href="javascript:void(0)" v-on:click="modifyTask(task['id'],task['url'])"
<table class="table table-bordered"> class="btn btn-primary">{{"Modify Task~修改任务" | lang}}</a>
<tbody> <a style="margin-top: 5px" href="javascript:void(0)" v-on:click="invokeTask(task['id'],task['url'])"
<tr> class="btn btn-primary">{{"Execute Task~执行任务" | lang}}</a></p>
<th style="min-width: 50px; text-align: center">ID</th> <p>{{"Input Parameters~输入参数" | lang}}</p>
<th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th> <table class="table table-bordered">
<th style="text-align: center">{{"Invoke Name~调用名称" | lang}}</th> <tbody>
<th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th> <tr>
<th>{{"Example Value~示例值" | lang}}</th> <th style="min-width: 50px; text-align: center">ID</th>
<th>{{"Parameter Description~参数描述" | lang}}</th> <th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th>
</tr> <th style="text-align: center">{{"Invoke Name~调用名称" | lang}}</th>
<tr v-if="task.inputParameters.length>0" v-for="i in task.inputParameters.length"> <th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th>
<td style="min-width: 50px; text-align: center">{{i}}</td> <th>{{"Example Value~示例值" | lang}}</th>
<td style="text-align: center;white-space: initial">{{task.inputParameters[i-1]["nodeName"]}}</td> <th>{{"Parameter Description~参数描述" | lang}}</th>
<td style="text-align: center">{{task.inputParameters[i-1]["name"]}}</td> </tr>
<td style="text-align: center">{{task.inputParameters[i-1]["type"]}}</td> <tr v-if="task.inputParameters.length>0" v-for="i in task.inputParameters.length">
<td>{{task.inputParameters[i-1]["exampleValue"]}}</td> <td style="min-width: 50px; text-align: center">{{i}}</td>
<td>{{task.inputParameters[i-1]["desc"]}}</td> <td style="text-align: center;white-space: initial">{{task.inputParameters[i-1]["nodeName"]}}</td>
</tr> <td style="text-align: center">{{task.inputParameters[i-1]["name"]}}</td>
<tr v-if="task.inputParameters.length==0"> <td style="text-align: center">{{task.inputParameters[i-1]["type"]}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td>{{task.inputParameters[i-1]["exampleValue"]}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td>{{task.inputParameters[i-1]["desc"]}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> </tr>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <tr v-if="task.inputParameters.length==0">
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td style="text-align: center">{{"Empty~无" | lang}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</tr> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</tbody> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</table> <td style="text-align: center">{{"Empty~无" | lang}}</td>
<p>{{"Output Parameters~输出参数" | lang}}</p> <td style="text-align: center">{{"Empty~无" | lang}}</td>
<table class="table table-bordered"> </tr>
<tbody> </tbody>
<tr> </table>
<th style="min-width: 50px; text-align: center">ID</th> <p>{{"Output Parameters~输出参数" | lang}}</p>
<th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th> <table class="table table-bordered">
<th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th> <tbody>
<th>{{"Example Value~示例值" | lang}}</th> <tr>
<th>{{"Parameter Description~参数描述" | lang}}</th> <th style="min-width: 50px; text-align: center">ID</th>
<th style="text-align: center">{{"Record as a field~作为字段保存" | lang}}</th> <th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th>
</tr> <th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th>
<tr v-if="task.outputParameters.length>0" v-for="i in task.outputParameters.length"> <th>{{"Example Value~示例值" | lang}}</th>
<td style="min-width: 50px; text-align: center">{{i}}</td> <th>{{"Parameter Description~参数描述" | lang}}</th>
<td style="text-align: center">{{task.outputParameters[i-1]["name"]}}</td> <th style="text-align: center">{{"Record as a field~作为字段保存" | lang}}</th>
<td style="text-align: center">{{task.outputParameters[i-1]["type"]}}</td> </tr>
<td>{{task.outputParameters[i-1]["exampleValue"]}}</td> <tr v-if="task.outputParameters.length>0" v-for="i in task.outputParameters.length">
<td>{{task.outputParameters[i-1]["desc"]}}</td> <td style="min-width: 50px; text-align: center">{{i}}</td>
<td style="text-align: center">{{task.outputParameters[i-1]["recordASField"] == 1? "Yes~是": "No~否" | lang}}</td> <td style="text-align: center">{{task.outputParameters[i-1]["name"]}}</td>
</tr> <td style="text-align: center">{{task.outputParameters[i-1]["type"]}}</td>
<tr v-if="task.outputParameters.length==0"> <td>{{task.outputParameters[i-1]["exampleValue"]}}</td>
<td style="min-width: 50px;text-align: center">{{"Empty~无" | lang}}</td> <td>{{task.outputParameters[i-1]["desc"]}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td style="text-align: center">{{task.outputParameters[i-1]["recordASField"] == 1? "Yes~是": "No~否" | lang}}
<td style="text-align: center">{{"Empty~无" | lang}}</td> </td>
<td style="text-align: center">{{"Empty~无" | lang}}</td> </tr>
<td style="text-align: center">{{"Empty~无" | lang}}</td> <tr v-if="task.outputParameters.length==0">
<td style="text-align: center">{{"Empty~无" | lang}}</td> <td style="min-width: 50px;text-align: center">{{"Empty~无" | lang}}</td>
</tr> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</tbody> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</table> <td style="text-align: center">{{"Empty~无" | lang}}</td>
</div> <td style="text-align: center">{{"Empty~无" | lang}}</td>
<td style="text-align: center">{{"Empty~无" | lang}}</td>
</tr>
</tbody>
</table>
</div> </div>
</div>
</body> </body>
@ -128,16 +134,16 @@
}, },
methods: { methods: {
dateFormat: DateFormat, dateFormat: DateFormat,
gotoHome:function(){ gotoHome: function () {
let url = ""; let url = "";
if(getUrlParam("lang")=="zh"){ if (getUrlParam("lang") == "zh") {
url = "taskList.html?lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper url = "taskList.html?lang=zh&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} else{ } else {
url = "taskList.html?lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper url = "taskList.html?lang=en&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} }
window.location.href= url; window.location.href = url;
}, },
modifyTask: function(id, url) { modifyTask: function (id, url) {
let message = { //显示flowchart let message = { //显示flowchart
type: 1, //消息类型，传递链接 type: 1, //消息类型，传递链接
message: { message: {
@ -146,21 +152,20 @@
}; };
// ws.send(JSON.stringify(message)); // ws.send(JSON.stringify(message));
// window.location.href = url; //跳转链接 // window.location.href = url; //跳转链接
if(getUrlParam("lang")=="zh"){ if (getUrlParam("lang") == "zh") {
window.location.href = "FlowChart_CN.html?type="+getUrlParam("type")+"&lang="+getUrlParam("lang")+"&id=" + id + "&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper window.location.href = "FlowChart_CN.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} else{ } else {
window.location.href = "FlowChart.html?type="+getUrlParam("type")+"&lang="+getUrlParam("lang")+"&id=" + id + "&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper window.location.href = "FlowChart.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
} }
}, },
invokeTask: function(id) { invokeTask: function (id) {
window.location.href = "executeTask.html?type="+getUrlParam("type")+"&lang="+getUrlParam("lang")+"&id=" + id + "&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper; window.location.href = "executeTask.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper;
}, },
} }
}); });
$.get(app.$data.backEndAddressServiceWrapper + "/queryTask?id=" + sId, function(result) { $.get(app.$data.backEndAddressServiceWrapper + "/queryTask?id=" + sId, function (result) {
app.$data.task = result; app.$data.task = result;
app.$data.show = true; app.$data.show = true;
}); });
</script> </script>

214
ElectronJS/src/taskGrid/taskList.html
View File

@ -4,7 +4,8 @@
<head> <head>
<script src="jquery-3.4.1.min.js"></script> <script src="jquery-3.4.1.min.js"></script>
<meta charset="UTF-8"> <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 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"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js"></script> <script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
@ -13,108 +14,119 @@
<title>任务列表 | Task List</title> <title>任务列表 | Task List</title>
</head> </head>
<style> <style>
th,td{ th, td {
text-align: left; text-align: left;
vertical-align: middle!important; vertical-align: middle !important;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.tasklist{ .tasklist {
margin-left:10%!important; margin-left: 10% !important;
} }
} }
.search-header { .search-header {
display: flex; display: flex;
justify-content: flex-end; /* Right align the search box */ justify-content: flex-end; /* Right align the search box */
align-items: center; align-items: center;
} }
.search-input { .search-input {
/*margin-right: 8px; !* Optional: Adjust spacing between input and button *!*/ /*margin-right: 8px; !* Optional: Adjust spacing between input and button *!*/
} }
.task-links { .task-links {
display: flex; display: flex;
justify-content: space-between; /* Spread links evenly */ justify-content: space-between; /* Spread links evenly */
} }
</style> </style>
<body> <body>
<div class="row" style="margin-top: 40px;"> <div class="row" style="margin-top: 40px;">
<div style="margin:0 auto; min-width: 70%;" id="taskList" class="tasklist"> <div style="margin:0 auto; min-width: 70%;" id="taskList" class="tasklist">
<h4 style="text-align: center;">{{"Task List~任务列表" | lang}}</h4> <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> <h5 style="text-align: center;"
<p><a v-if="type==3" href="javascript:void(0)" v-on:click="newTask" class="btn btn-primary">{{"New Task~创建新任务" | lang}}</a></p> v-if="mobile==1">{{"View this table by direction keys on keyboard~按键盘方向键浏览此表格" | lang}}</h5>
<div v-if="type != 3" style="margin-bottom: 20px"> <p><a v-if="type==3" href="javascript:void(0)" v-on:click="newTask"
<div style="margin-bottom: 5px">{{"提示：下方的官方教程和答疑平台均在Github，可能出现访问速度慢的问题，请耐心等待。~" | lang}}</div> class="btn btn-primary">{{"New Task~创建新任务" | lang}}</a></p>
<a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/wiki" target="_blank">{{"Software Documentation~软件使用说明文档" | lang}}</a> <div v-if="type != 3" style="margin-bottom: 20px">
<a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/issues?q=is%3Aissue" target="_blank">{{"Ask questions here~官方答疑平台" | lang}}</a> <div style="margin-bottom: 5px">{{"提示：下方的官方教程和答疑平台均在Github，可能出现访问速度慢的问题，请耐心等待。~" | lang}}
<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> </div>
<el-table <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%" style="width: 100%"
:empty-text="LANG('No Task~暂无任务')" :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="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())))"
:default-sort = "{prop: 'mtime', order: 'descending'}" :default-sort="{prop: 'mtime', order: 'descending'}"
> >
<el-table-column <el-table-column
prop="id" prop="id"
:label="LANG('Task ID~任务ID')" :label="LANG('Task ID~任务ID')"
sortable sortable
width="120" width="120"
align="center" align="center"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
:label="LANG('Task Name~任务名称')" :label="LANG('Task Name~任务名称')"
sortable sortable
align="center" align="center"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="url" prop="url"
label="URL" label="URL"
sortable sortable
> >
</el-table-column> </el-table-column>
<!-- <el-table-column--> <!-- <el-table-column-->
<!-- prop="mtime"--> <!-- prop="mtime"-->
<!-- :label="LANG('Update Time~更新时间')"--> <!-- :label="LANG('Update Time~更新时间')"-->
<!-- sortable--> <!-- sortable-->
<!-- :formatter="formatDate"--> <!-- :formatter="formatDate"-->
<!-- width="170"--> <!-- width="170"-->
<!-- >--> <!-- >-->
</el-table-column> </el-table-column>
<el-table-column <el-table-column
width="350" width="350"
align="center"> align="center">
<!-- Header template for the search input --> <!-- Header template for the search input -->
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<div class="search-header"> <div class="search-header">
<!-- Search input aligned to the right --> <!-- Search input aligned to the right -->
<el-input <el-input
v-model="search" v-model="search"
class="search-input" class="search-input"
icon="el-icon-search" icon="el-icon-search"
:placeholder="LANG('Please input keywords to search~请输入关键词搜索')"> :placeholder="LANG('Please input keywords to search~请输入关键词搜索')">
</el-input> </el-input>
<!-- <el-button icon="el-icon-search"></el-button>--> <!-- <el-button icon="el-icon-search"></el-button>-->
</div> </div>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<!-- Use flex container to justify content space-around --> <!-- Use flex container to justify content space-around -->
<div class="task-links"> <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-on:click="browseTask(scope.$index, scope.row)">{{ "View~任务信息"
<a href="javascript:void(0)" v-if="type==3" v-on:click="modifyTask(scope.$index, scope.row)">{{ "Modify~修改任务" | lang }}</a> | lang }}</a>
<a href="javascript:void(0)" v-on:dblclick="deleteTask(scope.$index, scope.row)">{{ "Delete (Double Click)~删除任务（双击）" | lang }}</a> <a href="javascript:void(0)" v-if="type==3" v-on:click="modifyTask(scope.$index, scope.row)">{{
</div> "Modify~修改任务" | lang }}</a>
</template> <a href="javascript:void(0)"
</el-table-column> v-on:dblclick="deleteTask(scope.$index, scope.row)">{{ "Delete (Double Click)~删除任务（双击）" | lang }}</a>
</el-table> </div>
</div> </template>
</el-table-column>
</el-table>
</div> </div>
</div>
</body> </body>
</html> </html>
@ -130,7 +142,7 @@
backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"), backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
}, },
methods: { methods: {
formatDate: function(row, column) { formatDate: function (row, column) {
//2023-01-01 00:00:00 //2023-01-01 00:00:00
let date = row[column.property]; let date = row[column.property];
// 2023-12-26T12:44:32.599Z // 2023-12-26T12:44:32.599Z
@ -143,17 +155,17 @@
let second = original_time.substring(17, 19); let second = original_time.substring(17, 19);
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second; return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}, },
newTask: function (){ newTask: function () {
window.location.href = "newTask.html?lang="+getUrlParam("lang")+"&mobile="+getUrlParam("mobile")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper; window.location.href = "newTask.html?lang=" + getUrlParam("lang") + "&mobile=" + getUrlParam("mobile") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper;
}, },
LANG: function (text){ LANG: function (text) {
if (getUrlParam("lang") == "en"|| getUrlParam("lang")=="") { if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
return text.split("~")[0]; return text.split("~")[0];
} else if (getUrlParam("lang") == "zh") { } else if (getUrlParam("lang") == "zh") {
return text.split("~")[1]; return text.split("~")[1];
} }
}, },
modifyTask: function(index, row) { modifyTask: function (index, row) {
let id = row.id; let id = row.id;
let url = row.url; let url = row.url;
console.log(index, row) console.log(index, row)
@ -166,11 +178,11 @@
ws.send(JSON.stringify(message)); ws.send(JSON.stringify(message));
window.location.href = url; //跳转链接 window.location.href = url; //跳转链接
}, },
browseTask: function(index, row) { browseTask: function (index, row) {
let id = row.id; let id = row.id;
window.location.href = "taskInfo.html?type="+getUrlParam("type")+"&id=" + id + "&lang="+getUrlParam("lang")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper; //跳转链接 window.location.href = "taskInfo.html?type=" + getUrlParam("type") + "&id=" + id + "&lang=" + getUrlParam("lang") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper; //跳转链接
}, },
deleteTask: function(index, row) { deleteTask: function (index, row) {
let id = row.id; let id = row.id;
// let text = "Are you sure to remove the selected task?"; // let text = "Are you sure to remove the selected task?";
// if (getUrlParam("lang") == "en"|| getUrlParam("lang")=="") { // if (getUrlParam("lang") == "en"|| getUrlParam("lang")=="") {
@ -179,30 +191,30 @@
// text = "确定要删除选中的任务吗？"; // text = "确定要删除选中的任务吗？";
// } // }
// if (confirm(text)) { // if (confirm(text)) {
$.get(app.$data.backEndAddressServiceWrapper + "/deleteTask?id=" + id, function(res) { $.get(app.$data.backEndAddressServiceWrapper + "/deleteTask?id=" + id, function (res) {
$.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function(re) { $.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
result = re.sort(desc); result = re.sort(desc);
app.$data.list = result; 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.") });
// 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) { let desc = function (x, y) {
return (x["id"] < y["id"]) ? 1 : -1 return (x["id"] < y["id"]) ? 1 : -1
} }
$.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function(re) { $.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
// result = re.sort(desc); // result = re.sort(desc);
app.$data.list = re; app.$data.list = re;
if (getUrlParam("type") == "1") { if (getUrlParam("type") == "1") {
app.$data.type = 2; app.$data.type = 2;
} }
}); });
ws = new WebSocket("ws://localhost:"+getUrlParam("wsport")); ws = new WebSocket("ws://localhost:" + getUrlParam("wsport"));
ws.onopen = function() { ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据 // Web Socket 已连接上，使用 send() 方法发送数据
console.log("已连接"); console.log("已连接");
message = { message = {
@ -213,7 +225,7 @@
}; };
this.send(JSON.stringify(message)); this.send(JSON.stringify(message));
}; };
ws.onclose = function() { ws.onclose = function () {
// 关闭 websocket // 关闭 websocket
console.log("连接已关闭..."); console.log("连接已关闭...");
}; };