public/images/login/login.pngBinary files differ
public/images/login/login2.pngBinary files differ
src/api/index.js
@@ -1,5 +1,4 @@ export * from './modules/text'; export * from './modules/audio'; export * from './modules/train'; export * from "./modules/login";
File was deleted src/assets/font/demo.css
File was deleted src/assets/font/demo_index.html
File was deleted src/assets/font/fonts/DIN.css
File was deleted src/assets/font/fonts/DIN_Alternate.ttfBinary files differ
src/assets/font/iconfont.css
File was deleted src/assets/font/iconfont.js
File was deleted src/assets/font/iconfont.json
File was deleted src/assets/font/iconfont.svg
File was deleted src/assets/font/iconfont.ttfBinary files differ
src/assets/font/iconfont.woffBinary files differ
src/assets/font/iconfont.woff2Binary files differ
src/assets/style/animate/vue-transition.scss
File was deleted src/assets/style/fixed/base.scss
File was deleted src/assets/style/fixed/element.scss
File was deleted src/assets/style/fixed/markdown.scss
File was deleted src/assets/style/fixed/n-progress.scss
File was deleted src/assets/style/fixed/tree-view.scss
File was deleted src/assets/style/fixed/vue-grid-layout.scss
File was deleted src/assets/style/fixed/vue-splitpane.scss
File was deleted src/assets/style/index.scss
File was deleted src/assets/style/public-class.scss
File was deleted src/assets/style/public.scss
File was deleted src/assets/style/theme/chester/index.scss
File was deleted src/assets/style/theme/chester/setting.scss
File was deleted src/assets/style/theme/d2/index.scss
File was deleted src/assets/style/theme/d2/setting.scss
File was deleted src/assets/style/theme/element/index.scss
File was deleted src/assets/style/theme/element/setting.scss
File was deleted src/assets/style/theme/line/index.scss
File was deleted src/assets/style/theme/line/setting.scss
File was deleted src/assets/style/theme/register.scss
File was deleted src/assets/style/theme/star/index.scss
File was deleted src/assets/style/theme/star/setting.scss
File was deleted src/assets/style/theme/theme-base.scss
File was deleted src/assets/style/theme/theme.scss
File was deleted src/assets/style/theme/tomorrow-night-blue/index.scss
File was deleted src/assets/style/theme/tomorrow-night-blue/setting.scss
File was deleted src/assets/style/theme/violet/index.scss
File was deleted src/assets/style/theme/violet/setting.scss
File was deleted src/assets/style/unit/color.scss
File was deleted src/views/home/components/audioAnalysis/components/Analysis.vue
@@ -89,7 +89,7 @@ { title: '天空之城', artist: '黄叶', //url: `${publicPath}audio/test.mp3`, url: `${publicPath}audio/test.mp3`, pic: `${publicPath}images/audio/u230.png`, lrc: '[00:12.09]作词：林夕[00:12.33]作曲：徐伟贤[00:14.40]对我好对我好' } src/views/home/components/audioAnalysis/index.vue
@@ -1,6 +1,242 @@ <template> <div> <el-card class="top-container"> <div class="search"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label=""> <el-date-picker v-model="searchDateTime" type="daterange" size="small" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"> </el-date-picker> </el-form-item> <el-form-item label=""> <el-input v-model="whereTrain.keyword" size="small" placeholder="请输入司机，车次，车号等关键字进行搜索" style="width: 340px;position: relative;top:5px"> <el-button slot="append" @click="searchCar" icon="el-icon-search" type="primary"></el-button> </el-input> </el-form-item> </el-form> </div> <div class="show-sel-tag"> <div> <span style="font-size: 14px">已筛选条件:</span> <span v-if="tagList.length>0"> <el-tag class="tag-cla" effect="plain" closable v-for="(tag,index) in tagList" @close="closeTag(index)"> <span>{{tag.label}}:</span> <span style="color: red">{{tag.value}}</span> </el-tag> </span> <span v-else style="color: lightgray;font-size: 12px">还未选择筛选条件</span> </div> <div> <el-button size="mini" @click="cancelSel">取消选择</el-button> </div> </div> <div class="sel-filter-body1"> <div class="sel-filter"> <div class="item-car-no"> <div> <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px"> <span class="title"> 机车号:</span> </div> <div class="list"> <div class="default"> <div @click="selTrain(carNo)" v-for="(carNo,index) in carNoList" v-if="index<=(carNoBtn.moreStatus?carNoList.length-1:9)"> <el-checkbox v-show="carNoBtn.manySel" checked/>{{carNo.name}} </div> <div style="width: 100%;text-align: center" v-show="carNoBtn.manySel"> <el-button type="primary" size="mini">确定</el-button> <el-button size="mini" @click="cancelManySel">取消</el-button> </div> </div> <div class="btn"> <el-button size="mini" :disabled="carNoList.length<=10" @click="carNoBtn.moreStatus=!carNoBtn.moreStatus">更多<i :class="carNoBtn.moreStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> <!-- <el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>--> </div> </div> </div> </div> <div class="sel-filter"> <div class="item-car-no"> <div class="title"> <div> <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px"> <span class="title"> 车次:</span> </div> </div> <div class="list" style="border-top: none"> <div class="default"> <div @click="selTrain(carTime)" v-for="(carTime,index) in carTimeList" v-if="index<=(carTimeBtn?carTimeList.length-1:9)"> {{carTime.name}} </div> </div> <div class="btn"> <el-button size="mini" :disabled="carTimeList.length<=10" @click="carTimeBtn=!carTimeBtn">更多<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> </div> </div> </div> </div> <div class="sel-filter"> <div class="item-car-no"> <div class="title"> <div> <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px"> <span class="title"> 车站号:</span> </div> </div> <div class="list" style="border-top: none"> <div class="default"> <div @click="selTrain(carState)" v-for="(carState,index) in carStateList" v-if="index<=(carStateBtn?carStateList.length-1:9)">{{carState.name}}</div> </div> <div class="btn"> <el-button size="mini" :disabled="carStateList.length<=10" @click="carStateBtn=!carStateBtn">更多<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> </div> </div> </div> </div> <!-- <div class="item-car-no"> <div class="title">车次:</div> <div class="list" style="border-top: none"> <div class="default"> <div @click="selTrain(carTime)" v-for="(carTime,index) in carTimeList" v-if="index<=(carTimeBtn?carTimeList.length-1:9)"> {{carTime.name}} </div> </div> <div class="btn"> <el-button size="mini" :disabled="carTimeList.length<=10" @click="carTimeBtn=!carTimeBtn">更多<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> </div> </div> </div>--> <!-- <div class="item-car-no"> <div class="title">车站号:</div> <div class="list" style="border-top: none"> <div class="default"> <div @click="selTrain(carState)" v-for="(carState,index) in carStateList" v-if="index<=(carStateBtn?carStateList.length-1:9)">{{carState.name}}</div> </div> <div class="btn"> <el-button size="mini" :disabled="carStateList.length<=10" @click="carStateBtn=!carStateBtn">更多<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> </div> </div> </div>--> </div> </el-card> <el-card class="bottom-container"> <div class="audio-filter"> <div> <el-select size="mini" v-model="whereTrain.isFollowed"> <el-option :value="0" label="全部"></el-option> <el-option :value="1" label="已关注"></el-option> <el-option :value="2" label="未关注"></el-option> </el-select> <!-- <el-select size="mini" style="margin-left: 10px" v-model="whereTrain.audioStatus"> <el-option :value="0" label="全部"></el-option> <el-option :value="1" label="正常"></el-option> <el-option :value="4" label="异常"></el-option> </el-select>--> </div> <div class="icon"> <div @click="audioListType='table'" :class="{'border-cla':audioListType==='table'}"> <img :src="`${publicPath}images/audio/u167.png`" width="13px"/> </div> <div @click="audioListType='menu'" :class="{'border-cla':audioListType==='menu'}"> <img :src="`${publicPath}images/audio/u168.png`" /> </div> </div> </div> <div v-if="audioListType=='table'" class="audio-list-table"> <div class="item" v-for="audio in pageInfo.audioList" :key="audio.ID"> <div class="head" @click="processAudio(audio)"> <img :src="`${publicPath}images/audio/u230.png`"/> <!-- <img :src="`${publicPath}images/audio/u231.png`" class="player"/>--> <!-- <div class="time">06:20</div>--> </div> <div class="body"> <div class="carNo"> <div class="carNo-body"> <div><span class="carNo-sty1">车号:</span><span class="carNo-sty2">{{audio.locomotiveNumber}}</span></div> <div><span class="carNo-sty1">车次:</span><span class="carNo-sty2">{{audio.trainNumber}}</span></div> <div><span class="carNo-sty1">时间:</span><span class="carNo-sty2">{{audio.occurrenceTime}}</span></div> <div><span class="carNo-sty1">司机:</span><span class="carNo-sty2">{{audio.driverNumber}}</span></div> </div> <!-- <div> 车号：{{audio.locomotiveNumber}}<br/> 车次：{{audio.trainNumber}}<br> 时间：{{audio.occurrenceTime}}<br/> 司机：{{audio.driverNumber}}<br> </div>--> <!-- <div class="status"> <span>{{audio.score}}</span> <span v-if="audio.audioStatus===0">上传中</span> <span v-else-if="audio.audioStatus===1" style="color: green">正常</span> <span v-else-if="audio.audioStatus===2">处理中</span> <span v-else-if="audio.audioStatus===3">异常</span> </div>--> </div> <div style="text-align: right;margin-right: 10px;"> <el-rate :max="1" :value="audio.IsFollowed===1?1:0" @change="isFollowChange(audio)"></el-rate> </div> <div class="tag" v-if="Array.isArray(audio.words)"> <div v-for="item in audio.words">{{item}}</div> </div> <div class="tag-no" v-else> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> <div v-else class="audio-list-menu"> <el-table :data="pageInfo.audioList"> <el-table-column prop="name" label="名称" align="center" min-width="220px"></el-table-column> <el-table-column prop="size" label="大小" align="center" width="100px"></el-table-column> <el-table-column prop="tag" label="标签" align="center"> <template slot-scope="scope"> <span v-if="scope.row.words">{{scope.row.words.join(',')}}</span> <span v-else>暂无标签</span> </template> </el-table-column> <el-table-column prop="UpdatedAt" label="修改时间" align="center"> <template slot-scope="scope"> {{$moment(scope.row.UpdateAt).format('YYYY-MM-DD HH:mm:ss')}} </template> </el-table-column> <el-table-column prop="CreatedAt" label="创建时间" align="center"> <template slot-scope="scope"> {{$moment(scope.row.CreateAt).format('YYYY-MM-DD HH:mm:ss')}} </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-rate :max="1" :value="scope.row.IsFollowed===1?1:0" @change="isFollowChange(scope.row)"></el-rate> </template> </el-table-column> </el-table> </div> <div class="audio-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> <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis> </el-card> <!-- <div class="search"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label=""> <el-date-picker @@ -22,6 +258,7 @@ </el-form-item> </el-form> </div> <div class="show-sel-tag"> <div> 已选条件: @@ -36,6 +273,7 @@ <el-button size="mini" @click="cancelSel">取消选择</el-button> </div> </div> <div class="sel-filter"> <div class="item-car-no"> <div class="title">车号:</div> @@ -51,7 +289,7 @@ </div> <div class="btn"> <el-button size="mini" :disabled="carNoList.length<=10" @click="carNoBtn.moreStatus=!carNoBtn.moreStatus">更多<i :class="carNoBtn.moreStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button> <!--<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>--> <!–<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>–> </div> </div> </div> @@ -81,18 +319,19 @@ </div> </div> <div class="audio-filter"> --> <!-- <div class="audio-filter"> <div> <el-select size="mini" v-model="whereTrain.isFollowed"> <el-option :value="0" label="全部"></el-option> <el-option :value="1" label="已关注"></el-option> <el-option :value="2" label="未关注"></el-option> </el-select> <!-- <el-select size="mini" style="margin-left: 10px" v-model="whereTrain.audioStatus"> <!– <el-select size="mini" style="margin-left: 10px" v-model="whereTrain.audioStatus"> <el-option :value="0" label="全部"></el-option> <el-option :value="1" label="正常"></el-option> <el-option :value="4" label="异常"></el-option> </el-select>--> </el-select>–> </div> <div class="icon"> <div @click="audioListType='table'" :class="{'border-cla':audioListType==='table'}"> @@ -120,10 +359,10 @@ </div> <div class="status"> <span>{{audio.score}}</span> <!--<span v-if="audio.audioStatus===0">上传中</span> <!–<span v-if="audio.audioStatus===0">上传中</span> <span v-else-if="audio.audioStatus===1" style="color: green">正常</span> <span v-else-if="audio.audioStatus===2">处理中</span> <span v-else-if="audio.audioStatus===3">异常</span>--> <span v-else-if="audio.audioStatus===3">异常</span>–> </div> </div> <div style="text-align: right;margin-right: 10px;"> @@ -181,7 +420,7 @@ </el-pagination> </div> </div> <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis> <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>--> </div> </template> @@ -306,12 +545,14 @@ }else{ this.tagList.splice(searchIndex,1,obj); } this.searchCar(); }, async processAudio(audio){ const {code,data} =await audioInfoApi(audio.ID); if(code===200){ this.$refs.analysis.audio[0].title=data.name; this.$refs.analysis.audio[0].artist=data.driverNumber; this.$refs.analysis.audio[0].url=`http://smartai.com:7013/api-sa/v1/audio/download?id=${audio.ID}`; this.modalAudio=true; this.lookAudio={...data}; }else{ @@ -380,15 +621,50 @@ }, cancelSel(){ this.tagList=[]; this.searchCar(); }, closeTag(index){ this.tagList.splice(index,1); this.searchCar(); } } } </script> <style scoped lang="scss"> .top-container { margin: 20px; min-height: 30vh } .search{ ::v-deep .el-input-group__append button.el-button { background-color: #2d52d7; height: 34px; } } .bottom-container{ margin: 20px; min-height: 40vh; } .carNo-body{ margin-top: 10px; } .carNo-body div{ margin-top: 3px; } .carNo-sty1{ color:#95a0b9; } .carNo-sty2{ color: #425277; font-weight: bold; padding-left: 6px; } /* */ .show-sel-tag{ display: flex; justify-content: space-between; @@ -397,20 +673,24 @@ } } .sel-filter{ border-bottom: 1px solid lightgray; padding-bottom: 10px; margin-top: 20px; .item-car-no{ display: flex; justify-content: space-between; line-height: 40px; .title{ padding-left: 20px; //padding-left: 5px; width: 10%; background-color: lightgray; color: #2d52d7; font-weight: bold; //background-color: lightgray; } .list{ display: flex; width: 90%; border:1px solid lightgray ; //border:1px solid lightgray ; .default{ width: 80%; display: flex; src/views/home/components/leftNav.vue
@@ -1,18 +1,44 @@ <template> <div class="left-nav"> <h1> <div class="left-nav-title"> <img src="@/assets/logo2.svg" /> <div>语音智能分析应用</div> </div> <div style="margin: 20px 0"></div> <div class="left-nav-body"> <img class="icon" :src="`${publicPath}images/audio/railroad.png`" style="height: 30px" class="icon" :src="`${publicPath}images/audio/u606.png`" /> <div v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/uploadAudio','span-sty':true}" @click="$router.push('/home/uploadAudio',()=>{})">音频上传</div> </div> <div class="left-nav-body"> <img class="icon" :src="`${publicPath}images/audio/u819.png`" /> <span v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/audioAnalysis','span-sty':true}" @click="$router.push('/home/audioAnalysis',()=>{})">音频分析检索</span> </div> <div class="left-nav-body"> <img class="icon" :src="`${publicPath}images/audio/u=1143771061,298321605&fm=253&fmt=auto&app=138&f=JPEG.webp`" /> <span v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/textManager','span-sty':true}" @click="$router.push('/home/textManager',()=>{})">文字库管理</span> </div> <!-- <h1> <img class="icon" :src="`${publicPath}images/audio/railroad.png`" style="height: 30px" /> <span v-show="!isCollapse" style="display:inline-block;width:180px;padding-left: 6px">语音智能分析应用</span> </h1> <div class="menu-btn" v-show="!isCollapse"> </h1>--> <!-- <div class="menu-btn" v-show="!isCollapse"> <div :class="{item:true,'is-active':$route.path==='/home/uploadAudio'}" @click="$router.push('/home/uploadAudio',()=>{})">音频上传</div> <div :class="{item:true,'is-active':$route.path==='/home/audioAnalysis'}" @click="$router.push('/home/audioAnalysis',()=>{})">音频分析检索</div> <div :class="{item:true,'is-active':$route.path==='/home/textManager'}" @click="$router.push('/home/textManager',()=>{})">文字库管理</div> </div> </div>--> </div> </template> @@ -27,8 +53,8 @@ computed: { isAdmin() { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" ) { let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; return loginName === "admin" || loginName === "basic"; @@ -59,9 +85,42 @@ </script> <style scoped lang="scss"> .left-nav-title{ text-align: center; font-weight: bold; font-size: 16px; color: white; padding-top: 80px; } .left-nav-body{ display: flex; align-items: center; height: 50px; //padding: 0 20px; font-size: 12px; padding-left: 60px; //border-bottom: 1px solid #eee; color:white; //border: 1px solid burlywood; } .left-nav-body:hover{ background-color: rgba(255, 255, 255, 0.2);} .icon{ background-color: white; width:20px; height:20px; } .span-sty{ display:inline-block; width:180px; padding-left: 10px; cursor: pointer; } /**/ .left-nav { background: #fff; background: #03347a; height: 100vh; //width: 280px; h1 { display: flex; align-items: center; src/views/home/components/textManager/index.vue
@@ -22,49 +22,61 @@ <el-button type="primary" @click="addText">确 定</el-button> </span> </el-dialog> <div class="search"> <el-row type="flex" justify="center"> <el-col :span="18"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="文字内容/车号："> <el-input v-model="keyword" size="small" placeholder="请输入"></el-input> </el-form-item> <el-form-item> <el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">查询</el-button> </el-form-item> </el-form> </el-col> <el-col :span="6" style="text-align: right"> <el-button size="mini" @click="addModal=true" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">添加</el-button> </el-col> </el-row> </div> <div> <el-table :data="pageInfo.textList" > <el-table-column prop="ID" label="序号" align="center" /> <el-table-column prop="content" label="文字内容" align="center" /> <el-table-column prop="locomotiveNumber" label="车号" align="center" /> <el-table-column prop="CreatedAt" label="添加时间" align="center" > <template slot-scope="scope"> {{$moment(scope.row.CreatedAt).format('YYYY-MM-DD HH:mm:ss')}} </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-row type="flex" justify="center"> <el-col :span="23"> <el-card style="margin-top: 20px;height: 85vh"> <div class="search"> <el-row type="flex" justify="center"> <el-col :span="18"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="文字内容/车号："> <el-input v-model="keyword" size="small" placeholder="请输入"></el-input> </el-form-item> <el-form-item> <el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">查询</el-button> </el-form-item> </el-form> </el-col> <el-col :span="6" style="text-align: right"> <el-button size="mini" @click="addModal=true" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">添加</el-button> </el-col> </el-row> </div> <div> <el-table :data="pageInfo.textList" border> <el-table-column prop="ID" label="序号" align="center" /> <el-table-column prop="content" width="340px" label="文字内容" align="center"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="bottom"> <div class="content-warp">{{scope.row.content}}</div> </el-tooltip> </template> </el-table-column> <el-table-column prop="locomotiveNumber" label="车号" align="center" /> <el-table-column prop="CreatedAt" label="添加时间" align="center" > <template slot-scope="scope"> {{$moment(scope.row.CreatedAt).format('YYYY-MM-DD HH:mm:ss')}} </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-card> </el-col> </el-row> </div> </template> @@ -149,4 +161,11 @@ color: gray; } } .content-warp{ margin: 0px auto; width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> src/views/home/components/topNav.vue
@@ -7,8 +7,13 @@ <i class="el-icon-bell"></i> </div> <div class="user-area" > <el-avatar size="small" :src="pic"></el-avatar> <span class="name">张三</span> <el-dropdown placement="bottom" @command="clickItem"> <el-avatar size="small" :src="pic"></el-avatar> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span class="name">admin</span> </div> </div> </template> @@ -18,9 +23,18 @@ export default { data(){ return { } }, methods:{ clickItem(item){ if(item==='logout'){ this.$message.success('退出系统成功'); setTimeout(()=>{ this.$router.push('/login'); },1000); } } }, computed:{ pic(){ return `${publicPath}images/audio/u73.jpg` 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; // 保存以b/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; src/views/home/index.vue
@@ -5,15 +5,15 @@ </div> <div class="right"> <div class="top"> <div class="collapse-trigger" @click="toggleCollapse"> <!--<div class="collapse-trigger" @click="toggleCollapse"> <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i> </div> </div>--> <top-nav></top-nav> </div> <div class="body"> <el-card style="margin: 20px 0px 0px 20px;min-height: 90vh"> <!-- <el-card style="margin: 20px 0px 0px 20px;min-height: 90vh">--> <router-view></router-view> </el-card> <!-- </el-card>--> </div> </div> </div> src/views/login/Login.vue
@@ -81,8 +81,8 @@ if(this.user.name==="admin" && this.user.password==="admin"){ this.$message.success("登录成功"); setTimeout(()=>{ this.$router.push('/home/audioAnalysis',()=>{}) },500); this.$router.push('/home/uploadAudio',()=>{}) },1000); }else{ this.$message.error("用户名或者密码错误,请重新输入!"); } vue.config.js
@@ -22,15 +22,12 @@ } }, proxy:{ // "/api/base": { // target: 'http://aps.fai365.com:9080', // //注： 暂时使用====用戶权限，角色暂时用的环境 // // target: "http://192.168.20.119:8011", // changeOrigin: true, // }, [process.env.VUE_APP_BASE_API]:{ target: process.env.VUE_APP_BASE_URL, changeOrigin: true, // pathRewrite: { // ['^'+process.env.VUE_APP_BASE_API]: '' // } } } }
