From fefe4a3011fb472788abb2e7ffdbbc5a4f58623c Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期三, 05 六月 2024 14:10:16 +0800
Subject: [PATCH] feat:更新ui界面
---
src/views/home/components/uploadAudio/index.vue | 304 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 215 insertions(+), 89 deletions(-)
diff --git a/src/views/home/components/uploadAudio/index.vue b/src/views/home/components/uploadAudio/index.vue
index 2c870c1..364e3a7 100644
--- a/src/views/home/components/uploadAudio/index.vue
+++ b/src/views/home/components/uploadAudio/index.vue
@@ -1,96 +1,117 @@
<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>
+ <el-row type="flex" justify="center">
+ <el-col :span="23">
+ <el-card style="margin-top: 20px;height: 85vh">
+ <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="#"
+ :auto-upload="false"
+ :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>
- </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 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 :selectable="selectable" 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-tooltip class="item" effect="dark" content="涓嬭浇" placement="bottom">
+ <el-button icon="el-icon-download" @click="downloadAudio(scope.row.ID)" type="text"></el-button>
+ </el-tooltip>
+ <el-tooltip class="item" effect="dark" content="鍒嗘瀽" placement="bottom">
+ <el-button icon="el-icon-video-play" @click="analysisAudio(scope.row.ID)" type="text"></el-button>
+ </el-tooltip>
+ <el-tooltip v-if="scope.row.audioStatus!==3" class="item" effect="dark" content="鍒犻櫎" placement="bottom">
+ <el-button icon="el-icon-delete" type="text" @click="deleteAudio(scope.row.ID)"></el-button>
+ </el-tooltip>
+ </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>
- </template>
- </el-skeleton>
+ </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 v-if="progressLoad">
+ <div style="padding: 14px;" class="right-progress">
+ <div class="p-left">涓婁紶閫熷害:{{ this.speed }}</div>
+ <div class="p-right">棰勮鏃堕棿:{{ this.leftTime }}</div>
+ </div>
+ <el-progress :color="customColors" :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
</div>
- </el-tab-pane>
- </el-tabs>
- </div>
+ </el-card>
+ </el-col>
+ </el-row>
</div>
</template>
<script>
import {audioListApi,processAudioApi,deleteAudioApi,batchProcessAudioApi,batchDeleteAudioApi} from '@/api';
+ import {request} from "@/utils";
+ import axios from 'axios';
+ let timer= null;
export default {
name: "index",
data(){
return {
+ percentage:0,
+ speed:0,
+ leftTime:0,
+ progressLoad:false,
isUpload:false,
activeName:'first',
keyword:'',
@@ -99,7 +120,12 @@
total:0
},
pageData:{page:1,pageSize:10},
- ids:[]
+ ids:[],
+ customColors: [
+ {color: '#f56c6c', percentage: 20},
+ {color: '#e6a23c', percentage: 40},
+ {color: '#5cb87a', percentage: 60}
+ ]
}
},
watch:{
@@ -121,7 +147,22 @@
return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
}
},
+ beforeDestroy(){
+ if(timer){
+ window.clearInterval(timer);
+ }
+ },
methods:{
+ selectable(row){
+ if(row.audioStatus===3){
+ return false
+ }else{
+ return true;
+ }
+ },
+ async downloadAudio(id){
+ window.location.href=`http://smartai.com:7013/api-sa/v1/audio/download?id=${id}`
+ },
upSuccess({code}){
if(code===200){
this.$message.success('涓婁紶鎴愬姛');
@@ -133,9 +174,88 @@
this.isUpload=false;
});
},
- selFile(file,fileList){
+ async selFile(_,fileList){
this.activeName='second';
this.isUpload=true;
+ if(fileList.length>0){
+ const file = fileList[0].raw;
+ const formData = new FormData();
+ formData.append("file", file);
+ this.progressLoad = true;
+ this.percentage=0;
+ let lastTime = 0; // 涓婁竴娆¤绠楁椂闂�
+ let lastSize = 0; // 涓婁竴娆¤绠楃殑鏂囦欢澶у皬
+ try{
+ const {code} = await axios.post("/api-sa/v1/audio/upload", formData,
+ {
+ onUploadProgress: (progressEvent) => {
+ console.log(progressEvent);
+ /*楠岃瘉鏁版嵁*/
+ if (lastTime === 0) {
+ lastTime = new Date().getTime();
+ lastSize = progressEvent.loaded;
+ return;
+ }
+ /*璁＄畻闂撮殧*/
+ let nowTime = new Date().getTime();
+ let intervalTime = (nowTime - lastTime) / 1000; // 鏃堕棿鍗曚綅涓烘绉掞紝闇�杞寲涓虹
+ let intervalSize = progressEvent.loaded - lastSize;
+ /*閲嶆柊璧嬪�间互渚夸簬涓嬫璁＄畻*/
+ lastTime = nowTime;
+ lastSize = progressEvent.loaded;
+ /*璁＄畻閫熷害*/
+ let speed = (intervalSize / intervalTime)/10;
+ let bSpeed = speed; // 淇濆瓨浠/s涓哄崟浣嶇殑閫熷害鍊硷紝鏂逛究璁＄畻鍓╀綑鏃堕棿
+ let units = "b/s"; // 鍗曚綅鍚嶇О
+ if (speed / 1024 > 1) {
+ speed = speed / 1024;
+ units = "k/s";
+ }
+ if (speed / 1024 > 1) {
+ speed = speed / 1024;
+ units = "M/s";
+ }
+ let leftTime = (progressEvent.total) / bSpeed;
+ /*璁＄畻杩涘害*/
+ if(timer){
+ window.clearInterval(timer);
+ }
+ timer=window.setInterval(()=>{
+ if(this.percentage>=90){
+ window.clearInterval(timer);
+ timer=null;
+ }
+ this.percentage+=parseInt(Math.random()*10);
+ speed=(Math.random()*500+500).toFixed(2)
+ this.speed = speed + "k/s";
+ this.leftTime=(lastSize/speed/1000).toFixed(2)+ "绉�";
+ },500);
+ //= parseInt((progressEvent.loaded / progressEvent.total) * 100)-1;
+ // this.speed = speed.toFixed(2) + units;
+ //this.leftTime = leftTime.toFixed(2) + "绉�";
+ }
+ });
+ if (code === 200) {
+ this.$message({
+ message: "涓婁紶鎴愬姛",
+ type: "success"
+ });
+ } else {
+ this.$message({
+ message: "涓婁紶澶辫触",
+ type: "error",
+ });
+ }
+ this.$nextTick(()=>{
+ this.progressLoad = false;
+ this.percentage=100;
+ window.clearInterval(timer);
+ this.queryAudioList();
+ });
+ }catch (error) {
+ console.log(error);
+ }
+ }
},
selAudio(rows){
this.ids=rows.map(item=>item.ID);
@@ -153,14 +273,6 @@
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('鏄惁杩涜闊抽鍒嗘瀽, 鏄惁缁х画?', '鎻愮ず', {
@@ -247,6 +359,20 @@
position: relative;
top:-60px;
}
+ .right-progress{
+ display: flex;
+ justify-content: space-around;
+ .p-left{
+ width: 85%;
+ text-align: center;
+ position: relative;
+ left: 20px;
+ }
+ .p-right{
+ width: 15%;
+ text-align: left;
+ }
+ }
.pagination{
display: flex;
justify-content: space-between;
--
Gitblit v1.8.0