Browse Source

播放器

newStyle
J_yt 2 years ago
parent
commit
5aa8c861fb
3 changed files with 131 additions and 2 deletions
  1. +8
    -0
      src/api/modules/api.js
  2. +4
    -0
      src/main.js
  3. +119
    -2
      src/views/File/index.vue

+ 8
- 0
src/api/modules/api.js View File

@@ -1174,3 +1174,11 @@ export function sensitivewordsList(data) {
params: data
})
}
//录音文件
export function audioFile(data) {
return request({
url: '/autoSR/zk/file/listOrderPage',
method: 'post',
params: data
})
}

+ 4
- 0
src/main.js View File

@@ -63,7 +63,11 @@ iconfontVersion.forEach(ele => {
})

Vue.config.productionTip = false
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer, {
productionTip: true,
});
new Vue({
router,
store,


+ 119
- 2
src/views/File/index.vue View File

@@ -87,6 +87,14 @@
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<i class="el-icon-video-play" @click="openPlayer(scope.row)" style="font-size:20px;cursor: pointer;"></i>
</template>
</el-table-column>
</el-table>
<div style="display: flex;justify-content:flex-end;margin-top: 10px;">
<el-pagination
@@ -100,14 +108,35 @@
</el-pagination>
</div>
</div>

<el-dialog title="播放文件" :visible.sync="playerShow" @close="closeAudio">
<aplayer :audio="audio" ref="aplayer" :key="audio.url" :autoplay="true" @timeupdate="handleEvent"></aplayer>
<div class="handly">
<div class="audioHanly" @click="backOff" >
<i class="el-icon-d-arrow-left" style="font-size:15px;color:#FFFFFF"></i>
</div>
<div class="audioHanly" @click="fastForward">
<i class="el-icon-d-arrow-right" style="font-size:15px;color:#FFFFFF"></i>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancleAudio">取 消</el-button>
</div>
</el-dialog>
</div>
</template>

<script>
import { mapGetters } from "vuex";
// import APlayer from '@moefe/vue-aplayer';
export default {
data() {
return {
hackReset:true,
audioPath:"",
playerShow:false,
audio: {},
currentPage4:1,
tableData: [],
options: [
@@ -119,10 +148,15 @@ export default {
sourceCode:'',
size:10,
current:1,
total:0
total:0,
initAudioTime:0,
totalAudioTime:0
};
},
computed: {
components:{
// APlayer
},
computed: {
...mapGetters(["permissions"]),
},
created() {
@@ -131,9 +165,62 @@ export default {
this.file_index_start = this.permissions["file_index_start"];
},
mounted() {
this.audio = {}
this.filefindByPage()
},
methods: {
openPlayer(e){
this.initAudioTime = 0
this.audio.url = e.recordPath
this.audio.name = "设备编号: "+e.imei
this.audio.artist = ""
this.totalAudioTime = e.recordDuration*60
this.playerShow = true
// this.$refs.aplayer.seek(0)
},
cancleAudio(){
this.totalAudioTime = 0
this.playerShow = false
this.$refs.aplayer.pause();

this.hackReset = false;//销毁组件
this.$nextTick(() => {
this.audio={}
this.hackReset = true;//重建组件
});
},
handleEvent(e){
this.initAudioTime = e.path[0].currentTime
},
fastForward() {
if(this.initAudioTime>=this.totalAudioTime){
this.initAudioTime = this.totalAudioTime
}else{
this.initAudioTime+=10
}
console.log("totol:"+this.totalAudioTime)
console.log("init:"+this.initAudioTime)
this.$refs.aplayer.seek(this.initAudioTime);;
},
backOff(){
if(this.initAudioTime<=0){
this.initAudioTime = 0
}else{
this.initAudioTime-=10
}
this.$refs.aplayer.seek(this.initAudioTime);;
},
closeAudio(){
this.playerShow = false
this.hackReset = false;//销毁组件
this.$nextTick(() => {
this.audio={}
this.hackReset = true;//重建组件
});
},
noempty(){
this.current=1;
this.filefindByPage()
@@ -232,4 +319,34 @@ export default {
}
}
}
/deep/ .aplayer-list{
height: auto !important;
}
/deep/ .aplayer-pic{
background-color: rgb(183, 218, 255) !important;
background-image: none !important;
}

.handly{
margin: 10px auto;
width: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.audioHanly{
background: #7bb3ef;
width: 30px;
height: 30px;
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
cursor: pointer;
transition: all 0.5s linear 0.05s;
&:hover{
background:#6e8dad;
box-shadow: 2px 2px 12px 4px #d5d5d5;
}
}
</style>

Loading…
Cancel
Save