给pyspider的任务加了一个分组
（发文章不让发，发到这里吧，有需要的拿去。）
效果如图，视图层面通过js实现的简单分组。任务太多，方便管理。
（代码比较渣，凑合看看吧。）
以下是直接覆盖的文件，谢了一份具体的操作步骤，在这里jianshu.com/p/79de51e8113d
方法：
打开目录，pyspider/webui/templates
用代码覆盖index.html文件。
请注意备份文件！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard - pyspider</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="description" content="pyspider dashboard">
<meta name="author" content="binux">
<!--link href="{{ url_for('cdn', path='twitter-bootstrap/3.1.1/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('cdn', path='x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css') }}" rel="stylesheet">
<link href="{{ url_for('cdn', path='sortable/0.6.0/css/sortable-theme-bootstrap.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='index.min.css') }}" rel="stylesheet">
<script src="{{ url_for('cdn', path='jquery/1.11.0/jquery.min.js') }}"></script-->
<link href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/x-editable/1.5.1/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/sortable/0.6.0/css/sortable-theme-bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='index.min.css') }}" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<header>
<div id="need-set-status-alert" class="alert alert-danger alert-dismissible" style="display:none;" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Project is not started, please set status to RUNNING or DEBUG.
</div>
<h1>pyspider dashboard</h1>
<table class="table queue-info">
<tr>
<th>scheduler</th>
<td class="queue_value" title="scheduler2fetcher">???</td>
<th>fetcher</th>
<td class="queue_value" title="fetcher2processor">???</td>
<th>processor</th>
<td class="queue_value" title="processor2result">???</td>
<th>result_worker</th>
</tr>
<tr>
<td style="border-width: 0px 1px;"></td>
<td colspan=3></td>
<td style="border-width: 0px 1px;"></td>
<td colspan=2 style="border-width: 0px;"></td>
</tr>
<tr>
<td style="border-width: 0px 0px 1px 1px"></td>
<td colspan=3 style="border-width: 1px 0px;">
<span class="queue_value" title="newtask_queue">???</span>
+ <span class="queue_value" title="status_queue">???</span>
</td>
<td style="border-width: 0px 1px 1px 0px;"></td>
<td colspan=2 style="border-width: 0px;"></td>
</tr>
</table>
</header>
<section>
<div class="global-btn clearfix">
<div class="create-btn-div">
<button class="project-create btn btn-default btn-primary" data-toggle="modal" data-target="#create-project-modal">Create</button>
</div>
<div class="active-btn-div">
{% if config.scheduler_rpc is not none %}
<a class="btn btn-default btn-info" href='/tasks' target=_blank>Recent Active Tasks</a>
{% endif %}
</div>
<style>
.top_group{ width: auto; height: 36px; overflow:hidden}
.top_group button{height:34px;margin-left:10px; background: #428bca;border-radius:5px;border: none; color: #fff; padding: 0 6px}
</style>
<div class="top_group"></div>
<div class="modal fade" id="create-project-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Create New Project</h4>
</div>
<form class="form-horizontal" method="POST">
<div class="modal-body">
<div class="form-group">
<label class="col-sm-3 control-label" for="project-name">Project Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="project-name" autocomplete="off">
<span class="help-block" style="display: none;">[a-zA-Z0-9_]+</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="start-urls">Start URL(s)</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="start-urls">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="script-mode">Mode</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="script-mode" id="mode-script" autocomplete="off" value="script" checked> Script
</label>
<label class="btn btn-default">
<input type="radio" name="script-mode" id="mode-slime" autocomplete="off" value="slime"> Slime
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
<table class="table sortable-theme-bootstrap projects" style="position: relative; overflow: visible">
<thead>
<tr>
<th>group</th>
<th>project name</th>
<th>status</th>
<th data-type="num">rate/burst</th>
<th data-type="num">avg time</th>
<th class="project-progress" data-type="num"> <span>progress</span></th>
<th data-type="num"> </th>
<th data-type="num"> </th>
<th data-type="num"> </th>
<th data-type="num">actions</th>
</tr>
</thead>
<tbody>
{% raw %}
<tr class="the_group group_{{ project.group?project.group:null }}" style="display: none" v-cloak v-for="project in projects" data-name="{{* project.name }}">
<td class="project-group"><span>{{ project.group }}</span></td>
<td class="project-name"><a href="/debug/{{* project.name }}">{{* project.name }}</a></td>
<td class="project-status">
<span class="status-{{ project.paused ? 'PAUSED' : project.status }}" :data-value="project.paused ? 'PAUSED' : project.status">
{{ project.paused ? 'PAUSED' : project.status }}
</span>
</td>
<td class="project-rate" :data-value="project.rate"><span>{{ project.rate }}/{{ project.burst }}</span></td>
<td class="project-time" :data-value="project.time.fetch_time + project.time.process_time">
<span v-show="project.time.fetch_time">{{ (project.time.fetch_time * 1000).toFixed(1) }}+{{ (project.time.process_time * 1000).toFixed(2) }}</span>
</td>
<td v-for="type in '5m,1h,1d,all'.split(',')"
class="project-progress progress-{{* type }}"
:title="project.progress[type].title"
:data-value="project.progress[type].task">
<div class="progress">
<div class="progress-text">{{* type }}<span v-show="project.progress[type].task">: {{ project.progress[type].task }}</span></div>
<div class="progress-bar progress-pending"
:style="{ width: project.progress[type].pending/project.progress[type].task*100 + '%' }"></div>
<div class="progress-bar progress-bar-success progress-success"
:style="{ width: project.progress[type].success/project.progress[type].task*100 + '%' }"></div>
<div class="progress-bar progress-bar-warning progress-retry"
:style="{ width: project.progress[type].retry/project.progress[type].task*100 + '%' }"></div>
<div class="progress-bar progress-bar-danger progress-failed"
:style="{ width: project.progress[type].failed/project.progress[type].task*100 + '%' }"
></div>
</div>
</td>
{% endraw %}
{% raw %}
<td class="project-actions" data-value="{{ project.updatetime }}">
{% endraw %}
# if config.scheduler_rpc is not none:
{% raw %}
<button class="project-run btn btn-default btn-xs" @click="project_run(project, $event)">Run</button>
<a class="btn btn-default btn-xs" href="/tasks?project={{ project.name }}" target=_blank>Active Tasks</a>
{% endraw %}
# endif
# if config.resultdb:
{% raw %}
<a class="btn btn-default btn-xs" href="/results?project={{ project.name }}" target=_blank>Results</a>
{% endraw %}
# endif
</td>
</tr>
</tbody>
</table>
</section>
<script>
// json projects data for vue
var projects = {{ projects | tojson | safe }};
</script>
<!--script src="{{ url_for('cdn', path='twitter-bootstrap/3.1.1/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('cdn', path='x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>
<script src="{{ url_for('cdn', path='sortable/0.6.0/js/sortable.min.js') }}"></script>
<script src="{{ url_for('cdn', path='vue/1.0.26/vue.min.js') }}"></script>
<script src="{{ url_for('static', filename='index.min.js') }}"></script---->
<script src="https://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://cdn.bootcss.com/sortable/0.6.0/js/sortable.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="{{ url_for('static', filename='index.min.js') }}"></script>
<script>
Vue.prototype.groupBtn = function (a) {
$('.the_group').hide();
$('.group_' + a).show();
}
</script>
<script>
var new_group = []
var group_html =''
projects.forEach(function(value, index, array) {
var group = value['group']
if(new_group.indexOf(group)<0 && group!=null && group!=''){
new_group.push(group)
group_html = group_html + '<button group="'+group+'">'+ group +'</button>'
}
});
group_html = group_html +'<button group="null">未分组</button>'
document.getElementsByClassName('top_group')[0].innerHTML=group_html
$(".top_group button").click(function(){
var group = $(this).attr('group')
$('.the_group').hide();
$('.group_' + group).show();
});
$(function(){
$(".group_"+new_group[0]).show()
if(new_group.length<1)$('.the_group').show();
});
</script>
</body>
</html>
<!-- vim: set et sw=2 ts=2 sts=2 ff=unix fenc=utf8 syntax=htmldjango: -->
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论