|
|
@@ -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> |