mirror of
https://github.com/ngfchl/ptools
synced 2023-07-10 13:41:22 +08:00
428 lines
20 KiB
HTML
428 lines
20 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>任务管理</title>
|
|
{% include 'admin/includes/css-part.html' %}
|
|
<link rel="stylesheet" href="https://unpkg.com/umy-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
/* 用来设置当前页面element全局table 选中某行时的背景色*/
|
|
.el-table__body tr.current-row > td {
|
|
background-color: #69A8EA !important;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 用来设置当前页面element全局table 鼠标滑过某行时的背景色*/
|
|
.el-table__body .el-table__row.hover-row td {
|
|
background-color: #aaaaaa !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<el-tabs type="border-card" @tab-click="handleTabClick">
|
|
<el-tab-pane
|
|
v-for="downloader in downloaders"
|
|
:label="downloader.name"
|
|
{# :name="downloader.id"#}
|
|
:id="downloader.id">
|
|
<div>
|
|
<el-dropdown split-button type="primary" size="mini">
|
|
查看
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>继续</el-dropdown-item>
|
|
<el-dropdown-item>暂停</el-dropdown-item>
|
|
<el-dropdown-item>强制继续</el-dropdown-item>
|
|
<el-dropdown-item>删除</el-dropdown-item>
|
|
<el-dropdown-item>限速</el-dropdown-item>
|
|
<el-dropdown-item>分类</el-dropdown-item>
|
|
<el-dropdown-item>更改路径</el-dropdown-item>
|
|
<el-dropdown-item>自动管理</el-dropdown-item>
|
|
<el-dropdown-item>重新校验</el-dropdown-item>
|
|
<el-dropdown-item>复制链接</el-dropdown-item>
|
|
<el-dropdown-item>复制HASH</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-button size="mini" type="warning" @click="clearTimer" v-if="refresh"> 暂停刷新</el-button>
|
|
{# <el-button size="mini" type="success" @click="handleRefresh" v-else="refresh"> 开始刷新</el-button>#}
|
|
<el-dropdown split-button type="success" size="mini" v-else="refresh" @click="handleRefresh(10)"
|
|
@command="handleRefresh">
|
|
开始刷新
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item icon="el-icon-loading" command="5">5S</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-loading" command="15">15S</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-loading" command="30">30S</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-loading" command="60">60S</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<hr/>
|
|
<u-table
|
|
ref="plTable"
|
|
row-height="55"
|
|
use-virtual
|
|
showBodyOverflow="title"
|
|
showHeaderOverflow="title"
|
|
@row-dblclick="handleRow"
|
|
@row-contextmenu="rtClick"
|
|
:data="torrents"
|
|
height="740"
|
|
size="mini"
|
|
border
|
|
stripe
|
|
highlight-current-row
|
|
{# show-summary#}
|
|
style="width: 100%">
|
|
<u-table-column
|
|
fixed
|
|
type="selection">
|
|
</u-table-column>
|
|
<u-table-column type="index" fixed></u-table-column>
|
|
{# <u-table-column#}
|
|
{# prop="name"#}
|
|
{# fixed#}
|
|
{# sortable#}
|
|
{# show-overflow-tooltip="true"#}
|
|
{# label="种子名称" max-width="380"#}
|
|
{# min-width="220">#}
|
|
{# </u-table-column>#}
|
|
{# <u-table-column prop="size"#}
|
|
{# sortable#}
|
|
{# width="75"#}
|
|
{# :formatter="handleSize"#}
|
|
{# label="大小">#}
|
|
{# </u-table-column>#}
|
|
{# <u-table-column prop="downloaded" :formatter="handleSize"#}
|
|
{# label="已下载"></u-table-column>#}
|
|
{# <u-table-column prop="uploaded"#}
|
|
{# :formatter="handleSize"#}
|
|
{# sortable#}
|
|
{# width="85"#}
|
|
{# label="上传"></u-table-column>#}
|
|
{# <u-table-column prop="dlspeed"#}
|
|
{# sortable#}
|
|
{# width="95"#}
|
|
{# label="下载速度"></u-table-column>#}
|
|
{# <u-table-column prop="upspeed"#}
|
|
{# sortable#}
|
|
{# width="95"#}
|
|
{# label="上传速度"></u-table-column>#}
|
|
{# <u-table-column#}
|
|
{# prop="progress"#}
|
|
{# sortable#}
|
|
{# width="90"#}
|
|
{# label="进度">#}
|
|
{# <template slot-scope="scope">#}
|
|
{# <el-progress#}
|
|
{# v-if="scope.row.progress==1"#}
|
|
{# status="success"#}
|
|
{# type="circle"#}
|
|
{# width="20"#}
|
|
{# :text-inside="true"#}
|
|
{# :stroke-width="20"#}
|
|
{# stroke-linecap="butt"#}
|
|
{# :percentage="scope.row.progress * 100">#}
|
|
{# </el-progress>#}
|
|
{# <el-progress#}
|
|
{# v-else="scope.row.progress==1"#}
|
|
{# :text-inside="true"#}
|
|
{# type="circle"#}
|
|
{# width="20"#}
|
|
{# :color="customColors"#}
|
|
{# :stroke-width="18"#}
|
|
{# :percentage="scope.row.progress * 100">#}
|
|
{# </el-progress>#}
|
|
{##}
|
|
{# </template>#}
|
|
{# </u-table-column>#}
|
|
{# <u-table-column prop="save_path"#}
|
|
{# label="保存路径"></u-table-column>#}
|
|
{# <u-table-column prop="ratio"#}
|
|
{# sortable#}
|
|
{# width="85"#}
|
|
{# :formatter="handlePercent"#}
|
|
{# label="分享率"></u-table-column>#}
|
|
{# <u-table-column prop="seeding_time"#}
|
|
{# label="做种时间"></u-table-column>#}
|
|
{# <u-table-column prop="state"#}
|
|
{# sortable#}
|
|
{# width="75"#}
|
|
{# label="状态"></u-table-column>#}
|
|
{# <u-table-column prop="last_activity"#}
|
|
{# sortable#}
|
|
{# width="105"#}
|
|
{# show-overflow-tooltip#}
|
|
{# label="最后活动"></u-table-column>#}
|
|
{# <u-table-column prop="added_on"#}
|
|
{# label="添加时间"></u-table-column>#}
|
|
{# <u-table-column prop="category"#}
|
|
{# sortable#}
|
|
{# width="85"#}
|
|
{# label="分类"></u-table-column>#}
|
|
{# <u-table-column prop="tracker"#}
|
|
{# label="Tracker"></u-table-column>#}
|
|
{# <u-table-column#}
|
|
{# width="120"#}
|
|
{# fixed="right"#}
|
|
{# label="操作">#}
|
|
{# #}
|
|
{# </u-table-column>#}
|
|
</u-table>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
{# <el-dialog title="任务详情" :visible.sync="dialogFormVisible">#}
|
|
{# <el-form :model="torrent">#}
|
|
{# <el-form-item label="种子名称">#}
|
|
{# <el-input v-model="torrent.name"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="大小">#}
|
|
{# <el-input v-model="torrent.size"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="已下载">#}
|
|
{# <el-input v-model="torrent.downloaded"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="已上传">#}
|
|
{# <el-input v-model="torrent.uploaded"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="下载速度">#}
|
|
{# <el-input v-model="torrent.dlspeed"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="上传速度">#}
|
|
{# <el-input v-model="torrent.upspeed"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="下载进度">#}
|
|
{# <el-input v-model="torrent.progress"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item#}
|
|
{# :formatter="handleRatio"#}
|
|
{# label="分享率">#}
|
|
{# <el-input v-model="torrent.ratio"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="做种时间">#}
|
|
{# <el-input v-model="torrent.seeding_time"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="当前状态">#}
|
|
{# <el-input v-model="torrent.state"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="最后活动">#}
|
|
{# <el-input v-model="torrent.last_activity"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="添加时间">#}
|
|
{# <el-input v-model="torrent.added_on"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="分类">#}
|
|
{# <el-input v-model="torrent.added_on"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{# <el-form-item label="Tracker">#}
|
|
{# <el-input v-model="torrent.tracker"></el-input>#}
|
|
{# </el-form-item>#}
|
|
{##}
|
|
{# </el-form>#}
|
|
{# <div slot="footer" class="dialog-footer">#}
|
|
{# <el-button @click="dialogFormVisible = false">取 消</el-button>#}
|
|
{# <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>#}
|
|
{# </div>#}
|
|
{# </el-dialog>#}
|
|
</div>
|
|
|
|
{% include 'admin/includes/js-part.html' %}
|
|
<script src="https://unpkg.com/umy-ui@1.1.6/lib/index.js"></script>
|
|
|
|
<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>
|
|
<script>
|
|
const vm = new Vue({
|
|
// 配置选项(option)
|
|
// element: 指定用vue来管理页面中的哪个标签区域
|
|
el: '#app',
|
|
data: {
|
|
{#downloaders: '',#}
|
|
{#loading: false,#}
|
|
torrents: [],
|
|
{#dialogFormVisible: false,#}
|
|
{#timer: {},#}
|
|
{#interval: 5000,#}
|
|
{#refresh: false,#}
|
|
{#downloader_id: 0,#}
|
|
{#torrent: {#}
|
|
{# name: '',#}
|
|
{# category: '',#}
|
|
{# size: '',#}
|
|
{# downloaded: '',#}
|
|
{# uploaded: '',#}
|
|
{# dlspeed: '',#}
|
|
{# upspeed: '',#}
|
|
{# progress: '',#}
|
|
{# ratio: '',#}
|
|
{# seeding_time: '',#}
|
|
{# state: '',#}
|
|
{# last_activity: '',#}
|
|
{# added_on: '',#}
|
|
{# tracker: '', },#}
|
|
{#customColors: [#}
|
|
{# {color: '#f56c6c', percentage: 20},#}
|
|
{# {color: '#e6a23c', percentage: 40},#}
|
|
{# {color: '#5cb87a', percentage: 60},#}
|
|
{# {color: '#1989fa', percentage: 80},#}
|
|
{# {color: '#6f7ad3', percentage: 100}#}
|
|
{#]#}
|
|
},
|
|
beforeMount() {
|
|
},
|
|
mounted() {
|
|
this.get_torrent_info_list()
|
|
},
|
|
// 清除定时器，不然页面会卡死
|
|
beforeDestroy() {
|
|
this.$once('hook:beforeDestroy',
|
|
() => {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
)
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
get_torrent_info_list() {
|
|
axios.get(
|
|
"{% url "get_torrent_info_list" %}"
|
|
).then(res => {
|
|
|
|
})
|
|
},
|
|
get_downloader() {
|
|
axios.get(
|
|
"{% url "get_downloader" %}"
|
|
).then(res => {
|
|
this.loading = true
|
|
console.log('获取下载器列表成功', res.data)
|
|
if (res.data.code === 0) {
|
|
this.downloaders = res.data.data
|
|
this.downloader_id = this.downloaders[0].id
|
|
this.get_downloading(this.downloader_id)
|
|
console.log(this.torrents)
|
|
this.loading = false
|
|
} else {
|
|
this.loading = false
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '获取下载器列表失败！'
|
|
});
|
|
}
|
|
}).catch(res => {
|
|
console.log('获取下载器列表失败', res)
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '获取下载器列表失败！' + res
|
|
});
|
|
})
|
|
},
|
|
handleTabClick(tab, event) {
|
|
const loading = this.$loading({
|
|
lock: true,//lock的修改符--默认是false
|
|
text: 'Loading',//显示在加载图标下方的加载文案
|
|
spinner: 'el-icon-loading',//自定义加载图标类名
|
|
background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
|
|
target: document.querySelector('#table')//loadin覆盖的dom元素节点
|
|
});
|
|
{#console.log(tab)#}
|
|
console.log(tab.$attrs.id)
|
|
this.loading = true
|
|
{#this.torrents = []#}
|
|
this.downloader_id = tab.$attrs.id
|
|
this.get_downloading(this.downloader_id)
|
|
loading.close()
|
|
},
|
|
get_downloading(downloader_id) {
|
|
axios.get(
|
|
"{% url "downloading" %}",
|
|
{
|
|
params: {
|
|
id: downloader_id
|
|
}
|
|
}
|
|
).then(res => {
|
|
|
|
if (res.data.code === 0) {
|
|
console.log(res.data.data)
|
|
this.torrents = res.data.data
|
|
}
|
|
})
|
|
},
|
|
// 执行格式化文件大小
|
|
handleSize(row, column, cellValue, index) {
|
|
return this.renderSize(cellValue)
|
|
}
|
|
,
|
|
// 格式化文件大小
|
|
renderSize(value) {
|
|
if (null == value || value == '') {
|
|
return "0";
|
|
}
|
|
var unitArr = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
var index = 0;
|
|
var srcsize = parseFloat(value);
|
|
index = Math.floor(Math.log(srcsize) / Math.log(1024));
|
|
var size = srcsize / Math.pow(1024, index);
|
|
size = size.toFixed(2);//保留的小数位数
|
|
return size + unitArr[index];
|
|
}
|
|
,
|
|
// 格式化进度
|
|
handlePercent(row, column, cellValue, index) {
|
|
return (cellValue * 100).toFixed(2) + '%'
|
|
}
|
|
,
|
|
// 格式化分享率
|
|
handleRatio(row, column, cellValue, index) {
|
|
return cellValue.toFixed(4)
|
|
}
|
|
,
|
|
// 双击任务事件
|
|
handleRow(row, column, event) {
|
|
console.log(row)
|
|
this.torrent = row
|
|
console.log(this.torrent)
|
|
this.dialogFormVisible = true
|
|
console.log(row.name)
|
|
console.log(column)
|
|
console.log(event)
|
|
}
|
|
,
|
|
// 阻止默认右键菜单弹出
|
|
rtClick(row, column, event) {
|
|
// 阻止默认右键菜单弹出
|
|
event.preventDefault()
|
|
}
|
|
,
|
|
handleRefresh(command) {
|
|
console.log(this.refresh)
|
|
this.refresh = true
|
|
this.interval = command * 1000
|
|
this.$message({
|
|
type: 'success',
|
|
message: '下载任务将每' + command + '秒刷新一次，如需暂停，请点击按钮！'
|
|
});
|
|
this.timer = setInterval(() => {
|
|
this.get_downloading(this.downloader_id)
|
|
}, this.interval)
|
|
|
|
}
|
|
,
|
|
clearTimer() {
|
|
this.refresh = false
|
|
console.log(this.refresh)
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '任务刷新已暂停！'
|
|
});
|
|
window.clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |