<template>
|
<div class="upload-audio-container">
|
<div class="left">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="">
|
<el-input v-model.lazy="keyword" placeholder="请输入搜索内容" suffix-icon="el-icon-search" size="small"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="manyAnalysisAudio" icon="el-icon-video-play" plain size="mini">批量分析</el-button>
|
<el-button type="danger" @click="deleteManyAudio" icon="el-icon-delete" plain size="mini">批量删除</el-button>
|
<el-upload
|
style="display: inline-block;margin-left: 10px"
|
action="/api-sa/v1/audio/upload"
|
:on-change="selFile"
|
accept=".mp3,.wav"
|
:show-file-list="false"
|
:on-success="upSuccess"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="right">
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="已上传" name="first">
|
<div>
|
<el-table :data="pageInfo.audioList" border @selection-change="selAudio">
|
<el-table-column label='全选' type="selection" align="center" />
|
<el-table-column prop="name" label="文件名" min-width="200px" align="center" />
|
<el-table-column prop="size" label="大小" align="center" />
|
<el-table-column prop="occurrenceTime" label="上传时间" align="center" />
|
<el-table-column prop="audioStatus" label="处理状态" align="center" >
|
<template slot-scope="scope">
|
<span v-if="scope.row.audioStatus===0" style="color:wheat">上传中</span>
|
<span v-else-if="scope.row.audioStatus===1" style="color: blue">上传成功</span>
|
<span v-else-if="scope.row.audioStatus===2" style="color: cyan">处理中</span>
|
<span v-else-if="scope.row.audioStatus===3" style="color: green">处理完成</span>
|
<span v-else-if="scope.row.audioStatus===4" style="color: red">处理失败</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" >
|
<template slot-scope="scope">
|
<el-button icon="el-icon-video-play" @click="analysisAudio(scope.row.ID)" type="text"></el-button>
|
<el-button icon="el-icon-delete" type="text" @click="deleteAudio(scope.row.ID)"></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination">
|
<div class="total">共计{{pageInfo.total}}条记录 第{{pageData.page}}/{{lastPage}}页</div>
|
<div class="page">
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="pageData.page"
|
:page-size="pageData.pageSize"
|
layout="prev, pager, next,sizes, jumper"
|
:total="pageInfo.total">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="正在上传" name="second">
|
<!-- <el-skeleton style="width: 100%" :loading="isUpload" animated>
|
<template slot="template">
|
<div style="padding: 14px;">
|
<el-skeleton-item variant="h3" style="width: 100%;height: 40px" />
|
</div>
|
</template>
|
</el-skeleton>-->
|
<div>
|
<el-skeleton animated :loading="isUpload">
|
<template slot="template">
|
<div style="padding: 14px;">
|
<el-skeleton-item style="width: 100%;height: 40px" />
|
</div>
|
</template>
|
</el-skeleton>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {audioListApi,processAudioApi,deleteAudioApi,batchProcessAudioApi,batchDeleteAudioApi} from '@/api';
|
export default {
|
name: "index",
|
data(){
|
return {
|
isUpload:false,
|
activeName:'first',
|
keyword:'',
|
pageInfo:{
|
audioList:[],
|
total:0
|
},
|
pageData:{page:1,pageSize:10},
|
ids:[]
|
}
|
},
|
watch:{
|
pageData:{
|
handler(){
|
this.queryAudioList();
|
},
|
deep:true,
|
immediate:true
|
},
|
keyword:{
|
handler(){
|
this.queryAudioList();
|
}
|
},
|
},
|
computed:{
|
lastPage(){
|
return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
|
}
|
},
|
methods:{
|
upSuccess({code}){
|
if(code===200){
|
this.$message.success('上传成功');
|
this.queryAudioList();
|
}else{
|
this.$message.warning('上传失败');
|
}
|
this.$nextTick(()=>{
|
this.isUpload=false;
|
});
|
},
|
selFile(file,fileList){
|
this.activeName='second';
|
this.isUpload=true;
|
},
|
selAudio(rows){
|
this.ids=rows.map(item=>item.ID);
|
},
|
handleSizeChange(pageSize){
|
this.pageData.pageSize=pageSize;
|
},
|
handleCurrentChange(page){
|
this.pageData.page=page;
|
},
|
async queryAudioList(){
|
// status 0 未配置规则 1 处理中 2 处理完成
|
const {code,data,total}=await audioListApi({...this.pageData,keyword:this.keyword});
|
if(code===200){
|
this.pageInfo.audioList=data;
|
this.pageInfo.total=total;
|
}
|
/*this.pageInfo.audioList=[
|
{filename:'0_20240519_xx_01.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:0},
|
{filename:'0_20240519_xx_02.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:1},
|
{filename:'0_20240519_xx_03.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:0},
|
{filename:'0_20240519_xx_04.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:1},
|
{filename:'0_20240519_xx_05.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:2},
|
{filename:'0_20240519_xx_06.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:2},
|
]*/
|
},
|
analysisAudio(id){
|
this.$confirm('是否进行音频分析, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'success'
|
}).then(async() => {
|
const {code}=await processAudioApi(id);
|
if(code===200){
|
this.$message.success('音频分析完成');
|
this.queryAudioList();
|
}else{
|
this.$message.success('音频分析失败');
|
}
|
}).catch(() =>{});
|
},
|
deleteAudio(id){
|
this.$confirm('是否删除音频, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'success'
|
}).then(async() => {
|
const {code}=await deleteAudioApi(id);
|
if(code===200){
|
this.$message.success('音频删除成功');
|
this.queryAudioList();
|
}else{
|
this.$message.success('音频删除失败');
|
}
|
}).catch(() =>{});
|
},
|
manyAnalysisAudio(){
|
if(this.ids.length>0){
|
this.$confirm('是否进行批量分析, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'success'
|
}).then(async() => {
|
const {code}=await batchProcessAudioApi(this.ids);
|
if(code===200){
|
this.$message.success('批量分析成功');
|
this.queryAudioList();
|
}else{
|
this.$message.success('批量分析失败');
|
}
|
}).catch(() =>{});
|
}else{
|
this.$message.warning('请先选择您要分析的音频!')
|
}
|
},
|
deleteManyAudio(){
|
if(this.ids.length>0){
|
this.$confirm('是否进行批量删除, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async() => {
|
const {code}=await batchDeleteAudioApi(this.ids);
|
if(code===200){
|
this.$message.success('批量删除成功');
|
this.queryAudioList();
|
}else{
|
this.$message.success('批量删除失败');
|
}
|
}).catch(() =>{});
|
}else{
|
this.$message.warning('请先选择您要删除的音频!')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.upload-audio-container{
|
.left{
|
position: relative;
|
z-index: 100;
|
width: 80%;
|
text-align: right;
|
margin-left: 20%;
|
}
|
.right{
|
position: relative;
|
top:-60px;
|
}
|
.pagination{
|
display: flex;
|
justify-content: space-between;
|
margin-top: 50px;
|
.total{
|
color: gray;
|
}
|
}
|
}
|
::v-deep{
|
.el-tabs__nav-wrap::after{
|
display: none;
|
}
|
}
|
</style>
|
