mirror of
https://github.com/ngfchl/ptools
synced 2023-07-10 13:41:22 +08:00
1. 优化页面数据显示格式
2. 添加页面刷新数据间隔功能，可根据需要调整，也可以停止刷新
This commit is contained in:
ngfchl
@@ -6,10 +6,21 @@
|
||||
<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
|
||||
@@ -34,10 +45,18 @@
|
||||
<el-dropdown-item>复制HASH</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button size="mini" type="warning"> 暂停刷新</el-button>
|
||||
<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" @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"
|
||||
@@ -48,7 +67,7 @@
|
||||
@row-dblclick="handleRow"
|
||||
@row-contextmenu="rtClick"
|
||||
:data="torrents"
|
||||
height="760"
|
||||
height="740"
|
||||
size="mini"
|
||||
border
|
||||
stripe
|
||||
@@ -69,6 +88,7 @@
|
||||
</u-table-column>
|
||||
<u-table-column prop="size"
|
||||
sortable
|
||||
width="75"
|
||||
:formatter="handleSize"
|
||||
label="大小">
|
||||
</u-table-column>
|
||||
@@ -77,36 +97,67 @@
|
||||
<u-table-column prop="uploaded"
|
||||
:formatter="handleSize"
|
||||
sortable
|
||||
label="已上传"></u-table-column>
|
||||
width="75"
|
||||
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
|
||||
:formatter="handlePercent"
|
||||
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="95"
|
||||
label="当前状态"></u-table-column>
|
||||
<u-table-column prop="last_activity"
|
||||
sortable
|
||||
width="95"
|
||||
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>#}
|
||||
@@ -120,7 +171,7 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-dialog title="任务详情" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="torrent">
|
||||
<el-form-item label="种子名称">
|
||||
<el-input v-model="torrent.name"></el-input>
|
||||
@@ -190,6 +241,8 @@
|
||||
torrents: [],
|
||||
dialogFormVisible: false,
|
||||
timer: {},
|
||||
interval: 5000,
|
||||
refresh: false,
|
||||
downloader_id: 0,
|
||||
torrent: {
|
||||
name: '',
|
||||
@@ -206,17 +259,31 @@
|
||||
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() {
|
||||
this.get_downloader()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.get_downloader()
|
||||
console.log("下载器：", this.downloaders)
|
||||
this.timer = setInterval(() => {
|
||||
this.get_downloading(this.downloader_id)
|
||||
}, 5000)
|
||||
|
||||
},
|
||||
// 清除定时器，不然页面会卡死
|
||||
beforeDestroy() {
|
||||
this.$once('hook:beforeDestroy',
|
||||
() => {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
)
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
@@ -248,13 +315,20 @@
|
||||
})
|
||||
},
|
||||
handleTabClick(tab, event) {
|
||||
console.log(tab)
|
||||
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)
|
||||
this.loading = false
|
||||
loading.close()
|
||||
},
|
||||
get_downloading(downloader_id) {
|
||||
axios.get(
|
||||
@@ -265,15 +339,19 @@
|
||||
}
|
||||
}
|
||||
).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";
|
||||
@@ -285,13 +363,19 @@
|
||||
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
|
||||
@@ -300,12 +384,38 @@
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user