播放器

src/api/modules/api.js

@@ -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
+  })
+}

src/main.js

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

src/views/File/index.vue

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