add 获取视频长度及测试用按钮与请求地址

This commit is contained in:
2023-06-30 20:49:07 +08:00
parent 768bdcc2af
commit fe815b455d
4 changed files with 185 additions and 134 deletions

View File

@@ -1,126 +1,144 @@
<template>
<div class="url">
<el-form-item label="视频地址">
<div style="display: flex;width: 100%;">
<el-input style="width: 100%;" v-model="form.name" />
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="getlist" type="primary">获取</el-button>
</div>
<div class="url">
<el-form-item label="视频地址">
<div style="display: flex;width: 100%;">
<el-input style="width: 100%;" v-model="form.name"/>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="getList" type="primary">获取</el-button>
</div>
</el-form-item>
<el-form-item label="第几集开始">
<div style="display: flex;">
<el-input v-model="form.start" />
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="setlist" type="primary">设置</el-button>
</div>
</el-form-item>
<el-form-item label="第几集开始">
<div style="display: flex;">
<el-input v-model="form.start"/>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="setList" type="primary">设置</el-button>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="test" type="primary">测试按钮</el-button>
</div>
</el-form-item>
<el-form-item label="下载保存地址">
<div style="display: flex;">
<el-input v-model="form.save" />
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="showmsg" type="primary">查看进度</el-button>
</div>
</el-form-item>
<el-form-item label="下载保存地址">
<div style="display: flex;">
<el-input v-model="form.save"/>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="showMsg" type="primary">查看进度</el-button>
</el-form-item>
<el-table ref="table" :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55" />
<el-table-column label="title" prop="title">
</el-table-column>
<el-table-column label="url" prop="url" />
</el-table>
<el-dialog :fullscreen="true" v-model="dialogVisible" title="Tips" width="30%">
<div style="width: 100%;height: 100%;overflow-y: auto;">
<div v-for="i in msg">{{ i }}</div>
</div>
</div>
</el-dialog>
</div>
</el-form-item>
<el-table ref="table" :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"/>
<el-table-column label="title" prop="title">
</el-table-column>
<el-table-column label="url" prop="url"/>
</el-table>
<el-dialog :fullscreen="true" v-model="dialogVisible" title="Tips" width="30%">
<div style="width: 100%;height: 100%;overflow-y: auto;">
<div v-for="i in msg">{{ i }}</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'
import {ref} from 'vue';
import {ElLoading, ElMessage} from 'element-plus'
import axios from 'axios';
const dialogVisible = ref(false)
const form = ref({
name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
start: 1,
save: localStorage.getItem("save")
name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
start: 1,
save: localStorage.getItem("save")
})
const tableData = ref([])
const table = ref()
function getlist() {
// let load = ElLoading.service()
// window.getlist(form.value.name).then((res) => {
// console.log(res)
// tableData.value = res
// load.close()
// })
axios.get("/getQqList", {
params: { url: form.value.name }
}).then((r) => {
tableData.value = r.data
})
function getList() {
// let load = ElLoading.service()
// window.getlist(form.value.name).then((res) => {
// console.log(res)
// tableData.value = res
// load.close()
// })
axios.get("/getQqList", {
params: {url: form.value.name}
}).then((r) => {
tableData.value = r.data
})
}
function setlist() {
table.value.clearSelection()
for (let i = form.value.start - 1; i < tableData.value.length; i++) {
console.log(i)
table.value.toggleRowSelection(tableData.value[i], undefined)
}
function setList() {
table.value.clearSelection()
for (let i = form.value.start - 1; i < tableData.value.length; i++) {
console.log(i)
table.value.toggleRowSelection(tableData.value[i], undefined)
}
}
const msg = ref([])
async function dow() {
let list = table.value.getSelectionRows()
if (list.length == 0) {
ElMessage({
showClose: true,
message: '请选择要下载的剧集',
type: 'error',
})
return
}
if (!form.value.save) {
ElMessage({
showClose: true,
message: '请填写下载位置',
type: 'error',
})
return
}
dialogVisible.value = true
localStorage.setItem("save",form.value.save)
for (let i of list) {
await axios.get("/startDown", {
params: {
...i,
save: form.value.save + "/" + i.title.split(" ")[0]
}
})
}
// dialogVisible.value = false
let list = table.value.getSelectionRows()
if (list.length === 0) {
ElMessage({
showClose: true,
message: '添加完成',
type: 'success',
showClose: true,
message: '请选择要下载的剧集',
type: 'error',
})
return
}
if (!form.value.save) {
ElMessage({
showClose: true,
message: '请填写下载位置',
type: 'error',
})
return
}
dialogVisible.value = true
localStorage.setItem("save", form.value.save)
for (let i of list) {
await axios.get("/startDown", {
params: {
...i,
save: form.value.save + "/" + i.title.split(" ")[0]
}
})
}
// dialogVisible.value = false
ElMessage({
showClose: true,
message: '添加完成',
type: 'success',
})
}
const source = new EventSource(`/msg`);
source.onmessage = event => {
// 挂到载体上面
if (msg.value.length > 200) {
msg.value.splice(200)
}
msg.value.unshift(event.data)
// 挂到载体上面
if (msg.value.length > 200) {
msg.value.splice(200)
}
msg.value.unshift(event.data)
}
function showmsg() {
dialogVisible.value = true
function showMsg() {
dialogVisible.value = true
}
function test() {
axios.get("/test", {
params: {url: form.value.name}
}).then((r) => {
console.log(r.data);
})
}
</script>
<style lang="scss" scoped>
.url {}
.url {
}
</style>