forked from NaiboWang/EasySpider
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FlowChart_CN.html
593 lines (547 loc) · 48.8 KB
/
FlowChart_CN.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
<!doctype html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="FlowChart.css"></link>
<title>设计流程</title>
</head>
<body>
<div id="tip" class="alert alert-success alert-dismissible fade show" style="position: fixed; width:100%;display: none;">
<button type="button" class="close" data-dismiss="alert">×</button> 提示：保存成功!
</div>
<div id="tip2" class="alert alert-danger alert-dismissible fade show" style="position: fixed; width:100%;display: none;">
<button type="button" class="close" data-dismiss="alert">×</button> 提示：保存失败，如果有多个自定义操作，则他们的选项名称必须设置成不同名称!
</div>
<div id="navigator">
<nav aria-label="breadcrumb" v-if="type==1">
<ol class="breadcrumb" style="padding-left:23px;padding-bottom: 0;margin-bottom:0;background-color: white">
<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 aria-current="page" class="breadcrumb-item active" style="color: black">{{"Task Modification~任务流程修改"
| lang}}
</li>
</ol>
</nav>
</div>
<div style="display:flex">
<div style="width: 200px;float:left;overflow: auto">
<div class="toolbox" style="text-align:center;margin: 20px;border-radius:10px;border:navy solid;background-color:rgb(242,243,245);z-index: 9999;">
<div style="padding: 10px;border-radius:10px;font-size: 20px;">工具箱</div>
<!-- window.resizeTo( screen.availWidth, screen.availHeight );-->
<button type="button" id="save" data-toggle="modal" data-target="#myModal" onmousedown="$('#myModal').modal('show');" class="btn btn-primary">保存任务</button>
<button type="button" data=1 class="btn btn-outline-primary options">打开网页</button>
<button type="button" data=2 class="btn btn-outline-primary options">点击元素</button>
<button type="button" data=3 class="btn btn-outline-primary options">提取数据</button>
<button type="button" data=4 class="btn btn-outline-primary options">输入文字</button>
<button type="button" data=5 class="btn btn-outline-primary options" style="font-weight: bold">自定义操作</button>
<button type="button" data=6 style="font-size: 14px!important;" class="btn btn-outline-primary options">切换下拉选项</button>
<button type="button" data=7 class="btn btn-outline-primary options">移动到元素</button>
<button type="button" data=8 class="btn btn-outline-primary options" style="font-weight: bold">循环</button>
<button type="button" data=9 class="btn btn-outline-primary options" style="font-weight: bold">判断条件</button>
<div>-----------------</div>
<button type="button" data=13 class="btn btn-outline-primary options" title="调整下一个要插入的节点的位置">调整锚点</button>
<button type="button" data=10 class="btn btn-outline-primary options">剪切元素</button>
<button type="button" data=11 class="btn btn-outline-primary options">复制元素</button>
<button type="button" data=12 class="btn btn-outline-primary options">删除元素</button>
<button type="button" data=0 class="btn btn-outline-primary2 options">取消操作</button>
<div style="text-align: left;margin: 10px;font-size:15px!important">提示：点击上方操作按钮后点击要放置元素的位置处的箭头，可按取消操作按钮取消。</div>
</div>
</div>
<div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right">
<div id="0" class="clk" data="0">
</div>
<div style="border-radius: 50%;width: 40px;height: 40px;border:solid black;margin: 5px auto;background-color:lightcyan">
<p style="font-size: 22px!important;text-align: center;margin-left: 1px;">■</p>
</div>
</div>
<div style="margin-top:20px;border: solid navy;height:850px;overflow: auto;margin-left:10px;margin-right:10px;width:30%;float:right;min-width:300px">
<!-- <div style="display: inline-block;border-bottom:solid 2px;width:100%">
<input style="float:left;margin-left:10px;margin-top:10px;margin-bottom:10px" type="button" class="btn-primary" value="保存任务"></input>
</div> -->
<div class="Modify" id="app">
<div class="modal fade" id="myModal_XPath" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">等价XPath</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<label>以下提供除默认生成的XPath外其余等价的XPath，都能定位到同一个元素（但不完全准确，可能可以定位到除该元素外的其他元素，因此只是提供在这里作为参考）。 </label>
<label>每行一个XPath（可使用预装的XPath Helper扩展调试）：</label>
<textarea id="otherXPaths" onkeydown="inputDelete(event)" class="form-control" rows="4">{{XPaths}}</textarea>
<div>
<img src="../img/XPather_helper.png" style="width:50%;height:50%; margin: 10px auto"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<div>
<label>选项名称（鼠标移到笑脸可查看提示）<span style="font-size: 30px!important;" title="修改名称后点击下方“确定”按钮刷新流程图">☺</span>：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model='list.nl[index.nowNodeIndex]["title"]'></input>
</div>
<!-- 下面是10种不同类型操作选项的不同的配置页面 -->
<div class="elements" v-if="nodeType==1">
<div v-if="nowNode['isInLoop']">
<!-- 如果在循环内且循环内是固定文本才显示此行元素 -->
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的链接</p>
</div>
<div v-if='!useLoop'>
<!-- <label>url:</label>-->
<!-- <input onkeydown="inputDelete(event)" class="form-control" v-model='nowNode["parameters"]["url"]'></input>-->
<label>链接池（每行一个链接，有多少行链接整个任务流程就会被执行多少次）：</label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["links"]'></textarea>
</div>
<label>页面加载最长等待时间（秒）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['maxWaitTime']" type="number" required></input>
<label>打开网页后是否向下滚动：</label>
<select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
<option value = 0>不滚动</option>
<option value = 1>向下滚动一屏</option>
<option value = 2>滚动到底部</option>
</select>
<label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
<label>滚动后等待时间（秒）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
<p style="margin-top: 10px">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseOpenPage" role="button" aria-expanded="false" aria-controls="collapseExample">
点此展开/折叠高级操作
</a>
</p>
<div :class="{collapse: true, 'show': nowNode['parameters']['cookies'].length!=0}" id="collapseOpenPage">
<div>
<label>加载后设置Cookies： </label>
<p style="margin-bottom: 20px;color:white"><a class="btn btn-primary" @click="getCookies">
点击获取当前页面Cookie
</a></p>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='key=value形式，每行一个键值对' v-model='nowNode["parameters"]["cookies"]' id="pageCookies" style="font-size: 14px!important;"></textarea>
</div>
</div>
</div>
<div class="elements" v-if="nodeType==2">
<div v-if="nowNode['isInLoop']">
<!-- 如果在循环内才显示此行元素 -->
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的元素</p>
</div>
<p v-if="!useLoop"><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>元素在iframe内</p>
<div v-if='!useLoop'>
<label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法:以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
</div>
<label>点击后页面加载最长等待时间（秒）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['maxWaitTime']" type="number" required></input>
<label>点击类型：</label>
<select v-model='nowNode["parameters"]["clickWay"]' class="form-control">
<option :value = 0>Selenium点击</option>
<option :value = 1>JavaScript点击</option>
</select>
<label>点击后是否向下滚动页面：</label>
<select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
<option value = 0>不滚动</option>
<option value = 1>向下滚动一屏</option>
<option value = 2>滚动到底部</option>
</select>
<label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
<label>滚动后等待时间（秒）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
<p style="margin-top: 10px">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
点此展开/折叠高级操作
</a>
</p>
<div :class="{collapse: true, 'show': nowNode['parameters']['beforeJS'].length!=0 || nowNode['parameters']['afterJS'].length!=0}" id="collapseExample">
<div>
<label>点击该元素<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='nowNode["parameters"]["beforeJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["beforeJSWaitTime"]'></input>
<label>点击该元素<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='nowNode["parameters"]["afterJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["afterJSWaitTime"]'></input>
</div>
</div>
</div>
<div class="elements" v-if="nodeType==3">
<p>
<button class="btn btn-primary" v-on:mousedown= 'addPara'>新增字段</button>
</p>
<div class="toolkitcontain">
<table class="toolkittb2" cellspacing="0">
<tbody>
<th>字段名</th>
<th style="width:200px">示例值</th>
<th>操作</th>
</tbody>
</table>
<table class="toolkittb4" cellspacing="0">
<tbody>
<tr v-for="i in paras.parameters.length">
<td style="padding-left:0px"><input onkeydown="inputDelete(event)" style='padding-left:2px;font-size:13px!important;height:100%' v-model='paras.parameters[i-1]["name"]'></input>
</td>
<td style="width:200px">{{paras.parameters[i-1]["exampleValues"][0]["value"]}}</td>
<td>
<a v-on:mousedown="modifyParas(i-1)">修改</a>
<a v-on:mousedown="deleteParas(i-1)">删除</a>
<a v-on:mousedown="upParas(i-1)">上移</a>
<a v-on:mousedown="downParas(i-1)">下移</a>
</td>
</tr>
</table>
</div>
<div style="font-size: 13px;" v-if="paraIndex<paras.parameters.length">
<p>当前编辑字段参数名（点击字段的“修改”选项切换参数）： </p>
<label><strong>{{paras.parameters[paraIndex]["name"]}}</strong></label>
<p v-if="nowNode['isInLoop']"><input onkeydown="inputDelete(event)" type="checkbox" v-model='paras.parameters[paraIndex]["relative"]'></input>使用相对循环内的XPATH</p>
<p v-if='!paras.parameters[paraIndex]["relative"]'><input onkeydown="inputDelete(event)" type="checkbox" v-model='paras.parameters[paraIndex]["iframe"]'></input>元素在iframe内</p>
<p>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法:以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></p>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='paras.parameters[paraIndex]["relativeXPath"]' placeholder="如果要写相对循环内的xpath，可以写如*../div[1]即匹配当前循环元素的父元素的第一个div子元素"></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(paras.parameters[paraIndex]['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
<p style="margin-top: 10px">
<a class="btn btn-primary" data-toggle="collapse" href="#elementAdvanced" role="button" aria-expanded="false" aria-controls="collapseExample">
点此展开/折叠高级操作
</a>
</p>
<div :class="{collapse: true, 'show': paras.parameters[paraIndex]['beforeJS'].length!=0 || paras.parameters[paraIndex]['afterJS'].length!=0}" id="elementAdvanced">
<div>
<label>提取该元素数据<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='paras.parameters[paraIndex]["beforeJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["beforeJSWaitTime"]'></input>
<label>提取该元素数据<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='paras.parameters[paraIndex]["afterJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["afterJSWaitTime"]'></input>
</div>
</div>
<label>采集内容类型</label>
<select v-model='paras.parameters[paraIndex]["contentType"]' class="form-control">
<option :value = 0>文本（包括子元素）</option>
<option :value = 1>文本（不包括子元素）</option>
<option :value = 2>innerHTML</option>
<option :value = 3>outerHTML</option>
<option :value = 4>背景图片地址</option>
<option :value = 5>页面网址</option>
<option :value = 6>页面标题</option>
<option :value = 7>元素截图</option>
<option :value = 8>OCR识别文字</option>
<option :value = 9>针对该元素的JavaScript代码返回值（需以return 开头）</option>
<option :value = 10>当前选择框选中的选项值</option>
<option :value = 11>当前选择框选中的选项文本</option>
</select>
<div v-if='paras.parameters[paraIndex]["contentType"] == 9'>
<label>JavaScript代码：</label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='该元素用arguments[0]来表示，示例：return arguments[0].innerText + "美元"，即实现了提取该元素innerText并后面加“美元”的功能。' v-model='paras.parameters[paraIndex]["JS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["JSWaitTime"]'></input>
</div>
<label>节点类型</label>
<select v-model='paras.parameters[paraIndex]["nodeType"]' class="form-control">
<option :value = 0>普通节点</option>
<option :value = 1>链接文本</option>
<option :value = 2>链接地址</option>
<option :value = 3>表单值</option>
<option :value = 4>图片地址</option>
</select>
<div v-if='paras.parameters[paraIndex]["nodeType"] == 4'>
<label>提取图片地址后是否同时<b>下载图片</b>：</label>
<select v-model='paras.parameters[paraIndex]["downloadPic"]' class="form-control">
<option :value = 0>否</option>
<option :value = 1>是</option>
</select>
</div>
<!-- <label>提取方式</label>-->
<!-- <select v-model='paras.parameters[paraIndex]["extractType"]' class="form-control">-->
<!-- <option :value = 0>普通提取</option>-->
<!-- <option :value = 1>OCR提取</option>-->
<!-- </select>-->
<label>参数描述：</label>
<textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 60px" v-model='paras.parameters[paraIndex]["desc"]'></textarea>
<label>元素找不到时的值：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model='paras.parameters[paraIndex]["default"]'></textarea>
</div>
</div>
<div class="elements" v-if="nodeType==4">
<div v-if="nowNode['isInLoop']">
<!-- 如果在循环内且循环内是固定文本才显示此行元素 -->
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的文本（不勾选则每次输入的文本为下方“输入值”文本框内的文本，勾选后会使用所在循环内设置的文本）</p>
</div>
<p v-if='!useLoop'><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>元素在iframe内</p>
<div v-if='!useLoop'>
<label>输入值（用Field["字段名"]来输入某字段提取到的最新值，用<enter>或<ENTER>表示模拟按下回车键）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model='nowNode["parameters"]["value"]'></input>
</div>
<label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode.parameters['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
<p style="margin-top: 10px">
<a class="btn btn-primary" data-toggle="collapse" href="#inputAdvanced" role="button" aria-expanded="false" aria-controls="collapseExample">
点此展开/折叠高级操作
</a>
</p>
<div :class="{collapse: true, 'show': nowNode['parameters']['beforeJS'].length!=0 || nowNode['parameters']['afterJS'].length!=0}" id="inputAdvanced">
<div>
<label>对该元素输入文字<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='nowNode["parameters"]["beforeJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["beforeJSWaitTime"]'></input>
<label>对该元素输入文字<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='nowNode["parameters"]["afterJS"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["afterJSWaitTime"]'></input>
</div>
</div>
</div>
<div class="elements" v-if="nodeType==5">
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>操作在iframe内</p>
<label>自定义执行模式</label>
<select v-model='nowNode["parameters"]["codeMode"]' class="form-control">
<option value = 0>执行一段JavaScript脚本</option>
<option value = 1>执行一段操作系统级别命令</option>
<option v-if="nowNode['isInLoop']" value = 2>针对当前循环项的JavaScript脚本</option>
</select>
<div>
<label>代码/脚本内容（用Field["字段名"]来输入某字段提取到的最新值）： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["code"]' placeholder="输入JS或系统命令，如：document.body.innerText = '1' 或 python D:/test.py，分别为JS命令和系统命令示例。如选择针对当前循环项的JS脚本，则循环项元素用arguments[0]表示，如arguments[0].style.color = 'blue'"></textarea>
<p style="margin-top: 15px">是否将执行后的输出/返回值作为字段记录：</p>
<p><select v-model='nowNode["parameters"]["recordASField"]' class="form-control">
<option value = 0>否</option>
<option value = 1>是（JavaScript脚本需要以return 开头）</option>
</select></p>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
</div>
</div>
<div class="elements" v-if="nodeType==6">
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>元素在iframe内</p>
<label>XPath： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
<p>切换模式</p>
<select class="form-control" v-model='nowNode["parameters"]["optionMode"]'>
<option value=0>切换到下一个选项</option>
<option value=1>按索引值切换选项</option>
<option value=2>按选项值切换选项</option>
<option value=3>按选项文本切换选项</option>
</select>
<p>设定值（不适用于切换到下一个选项模式）</p>
<input class="form-control" id="selectValue" v-model='nowNode["parameters"]["optionValue"]' autoFocus="autofocus" type="text"></input>
</div>
<div class="elements" v-if="nodeType==7">
<div v-if="nowNode['isInLoop']">
<!-- 如果在循环内才显示此行元素 -->
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的元素</p>
</div>
<p v-if='!useLoop'><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>元素在iframe内</p>
<div v-if='!useLoop'>
<label>XPath： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
</div>
</div>
<div class="elements" v-if="nodeType==8">
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>在iframe内操作</p>
<!-- 循环选项 -->
<label>循环类型：</label>
<select v-model='loopType' class="form-control">
<option value = 0>单个元素（多用于循环点击下一页）</option>
<option value = 1>不固定元素列表</option>
<option value = 2>固定元素列表</option>
<option value = 3>文本列表（多用于循环在文本框输入文本）</option>
<option value = 4>网址列表（多用于循环打开网页）</option>
<option value = 5>JavaScript命令返回值（需以return 开头）</option>
<option value = 6>系统命令返回值</option>
</select>
<div v-if='parseInt(loopType) < 2'>
<label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
<p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode.parameters['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">（测试功能）点此查看其他可能的XPath写法</button></p>
</div>
<div v-else-if='parseInt(loopType) == 2'>
<label>XPath列表：</label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="3" placeholder="每行一个XPath" v-model='nowNode["parameters"]["pathList"]'></textarea>
</div>
<div v-else-if='parseInt(loopType) < 5'>
<label>内容列表（用Field["字段名"]来输入某字段提取到的最新值）：</label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="3" placeholder="每行一个文本/网址" v-model='nowNode["parameters"]["textList"]'></textarea>
</div>
<div v-else-if='parseInt(loopType) < 7'>
<label>代码/脚本内容（用Field["字段名"]来输入某字段提取到的最新值）： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="命令返回值大于0或为真则继续循环，否则停止循环。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。"></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
</div>
<!-- 这里添加退出循环条件,找不到元素肯定退出循环 -->
<label v-if='parseInt(loopType) == 0'>最多执行循环次数（0代表无限循环直到找不到元素为止）：</label>
<input onkeydown="inputDelete(event)" required v-if='parseInt(loopType) == 0' class="form-control" type="number" v-model.number='nowNode["parameters"]["exitCount"]'></input>
<label><b>历史记录回退后</b>等待秒数：</label>
<input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["historyWait"]'></input>
<label>执行完是否向下滚动：</label>
<select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
<option value = 0>不滚动</option>
<option value = 1>向下滚动一屏</option>
<option value = 2>滚动到底部</option>
</select>
<label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
<label>滚动后等待时间（秒）：</label>
<input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
<div id="breakAdvanced" v-if='nowNode["parameters"]["loopType"] < 5'>
<div>
<p><label>（高级操作）使用代码/脚本定义循环退出条件： </label></p>
<select v-model='nowNode["parameters"]["breakMode"]' class="form-control" style="font-weight: bold">
<option value = 0>不设置脚本（选择这个下面写了脚本也不会执行）</option>
<option value = 1>JavaScript脚本返回值（需以return 开头）</option>
<option value = 2>操作系统级别命令</option>
</select>
<div>
<textarea style="margin-top: 10px" onkeydown="inputDelete(event)" class="form-control" rows="2"
placeholder='命令返回值小于等于0或为假时则直接退出循环，不管其他条件如何。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。' v-model='nowNode["parameters"]["breakCode"]'></textarea>
<label>最长等待脚本执行时间（0代表无限等待）：</label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["breakCodeWaitTime"]'></input>
</div>
</div>
</div>
</div>
<div class="elements" v-if="nodeType==9">
<label>判断条件是从左往右判断的，即如果最左边的条件分支的判断条件满足，则执行最左边分支内的操作，否则判断从左向右第二个分支的条件是否满足，依此类推。</label>
</div>
<div class="elements" v-if="nodeType==10">
<label>判断条件是从左往右判断的，即如果最左边的条件分支的判断条件满足，则执行最左边分支内的操作，否则判断从左向右第二个分支的条件是否满足，依此类推。</label>
<p><input onkeydown="inputDelete(event)" type="checkbox" v-model='nowNode["parameters"]["iframe"]'></input>在iframe内操作</p>
<label>条件类型：</label>
<select v-model='TClass' class="form-control">
<option value = 0>无条件</option>
<option value = 1>当前页面包括文本</option>
<option value = 2>当前页面包括元素</option>
<option v-if="nowNode['isInLoop']" value = 3>当前循环项包括文本</option>
<option v-if="nowNode['isInLoop']" value = 4>当前循环项包括元素</option>
<option value = 5>JavaScript命令返回值（需以return 开头）</option>
<option value = 6>系统命令返回值</option>
<option v-if="nowNode['isInLoop']" value = 7>针对当前循环项的JavaScript命令返回值（需以return 开头）</option>
</select>
<div v-if='TClass>0 && TClass <5'>
<label>包含的文字/元素XPATH： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
<textarea onkeydown="inputDelete(event)" required placeholder="如果是当前循环包含元素，则输入相对元素的xpath（如/div[2]/div[1]/img，如果写相对路径，需要写成/*//img，即检测当前循环项所有的子孙元素是否存在img标签）。" class="form-control" rows="3" v-model='nowNode["parameters"]["value"]'></textarea>
</div>
<div v-else-if='TClass > 0 && TClass < 7'>
<label>代码/脚本内容（用Field["字段名"]来输入某字段提取到的最新值）： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="命令返回值大于0或为真则执行此分支内操作，否则不执行。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。"></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
</div>
<div v-else-if='TClass == 7'>
<label>代码/脚本内容（<a href="https://github.com/NaiboWang/EasySpider/wiki/Example-of-JavaScript-instruction-for-the-current-iteration-in-a-conditional-statement" target="_blank">点击此处</a>查看更多示例）： </label>
<textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="输入针对该循环项的JS命令，该循环项用arguments[0]表示，返回值大于0或为真则执行此分支内操作，否则不执行。如：return arguments[0].innerText.length >=5 即判断当前循环项的文本长度是否大于5，注意要配合循环类型为元素相关（如不固定元素列表）使用。"></textarea>
<label>最长等待脚本执行时间（0代表无限等待）： </label>
<input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
</div>
</div>
<div style="margin-top:5px">
<label><b>执行后</b>等待秒数（所有等待时间均可设置为小数，如0.5）：</label>
<input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["wait"]'></input>
<label>等待类型</label>
<select v-model='list.nl[index.nowNodeIndex]["parameters"]["waitType"]' class="form-control">
<option value = 0>固定等待（设置等10秒就等10秒）</option>
<option value = 1>随机等待（设置等10秒会随机等10×0.5 - 10 × 1.5 秒）</option>
</select>
</div>
<button class="btn btn-outline-primary" style="margin-top: 20px;" id="confirm">确定</button>
</div>
</div>
</div>
<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-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">保存任务</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" style="height:400px;overflow: auto">
<input onkeydown="inputDelete(event)" id="serviceId" type="hidden" name="serviceId" value="-1"></input>
<input onkeydown="inputDelete(event)" id="url" type="hidden" name="url" value="about:blank"></input>
<label>任务名称：</label>
<input onkeydown="inputDelete(event)" required name="serviceName" value="新web采集任务" id="serviceName" class="form-control"></input>
<label>任务描述：</label>
<input onkeydown="inputDelete(event)" id="serviceDescription" name="serviceDescription" class="form-control"></input>
<label>导出数据格式：</label>
<select id="outputFormat" class="form-control">
<option value = "csv">CSV</option>
<option value = "xlsx">XLSX（EXCEL）</option>
<option value = "mysql">MySQL数据库</option>
</select>
<label>导出文件名/数据库表格名称（如果值为“Time”则名称为执行任务时的时间）：</label>
<input onkeydown="inputDelete(event)" value="Time" id="saveName" class="form-control"></input>
<label>浏览器模拟类型：</label>
<select id="environment" name="environment" class="form-control">
<option value = 0>电脑端</option>
<option value = 1>手机端（Cloudflare模式下不支持）</option>
</select>
<label>是否为cloudflare等极端反爬网站：</label>
<select id="cloudflare" name="cloudflare" class="form-control">
<option value = 0>否</option>
<option value = 1>是</option>
</select>
<label>每采集多少条数据保存一次（值越大采集速度越快，但如果意外退出则有数据丢失风险）：</label>
<input onkeydown="inputDelete(event)" type="number" value="10" id="saveThreshold" name="saveThreshold" class="form-control"></input>
<label>控制台预览时数据最大显示长度：</label>
<input onkeydown="inputDelete(event)" type="number" value="15" id="maxViewLength" class="form-control"></input>
</div>
<div class="modal-footer">
<button type="button" id="saveAsButton" class="btn btn-outline-primary">另存为</button>
<button type="button" id="saveButton" class="btn btn-primary">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
<script src="FlowChart_CN.js"></script>
<script src="logic_CN.js"></script>
<script src="global.js"></script>
<script>
var navigator = new Vue({
el: '#navigator',
data: {
type: getUrlParam("type"),
backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
},
methods:{
gotoHome: function () {
let url = "";
if (getUrlParam("lang") == "zh") {
url = "taskList.html?lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
} else {
url = "taskList.html?lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
}
window.location.href = url;
}, gotoInfo: function () {
let url = "";
if (getUrlParam("lang") == "zh") {
url = "taskInfo.html?id="+getUrlParam("id")+"&lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
} else {
url = "taskInfo.html?id="+getUrlParam("id")+"&lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
}
window.location.href = url;
}
}
});
</script>
</html>