<template>
|
<div>
|
<el-dialog
|
:close-on-click-modal="false"
|
title="播放音频"
|
:visible.sync="modalAudio"
|
width="60%"
|
:destroy-on-close="true"
|
@close="$emit('update:modalAudio',false)"
|
>
|
<div>
|
<el-card height="400px">
|
<a-player
|
:music="audio[0]"
|
:list="audio"
|
/>
|
</el-card>
|
</div>
|
<div class="body" style="margin-top: 30px">
|
<div class="left">
|
<el-card height="420px">
|
<h3>语音识别</h3>
|
<div class="status">
|
<span>{{lookAudio.score}}</span>
|
<!--<span v-if="lookAudio.audioStatus===0">上传中</span>-->
|
<!--<span v-else-if="lookAudio.audioStatus===1" style="color: green">正常</span>-->
|
<!--<span v-else-if="lookAudio.audioStatus===2">处理中</span>-->
|
<!--<span v-else-if="lookAudio.audioStatus===3">异常</span>-->
|
</div>
|
<!--<div class="title">
|
<div>时间</div>
|
<div>语音</div>
|
</div>-->
|
<div class="timeline-container">
|
<div v-if="lookAudio.audioText==''">
|
<el-empty description="暂无数据"></el-empty>
|
</div>
|
<div v-else>
|
{{lookAudio.audioText}}
|
</div>
|
<!--<el-timeline style="margin-top: 20px">-->
|
<!--<el-timeline-item v-for="i in 10" placement="top">-->
|
<!--<div class="time-line">-->
|
<!--<div class="time">-->
|
<!--<div>2018/4/12 20:46</div>-->
|
<!--<div>2018/4/12 20:46</div>-->
|
<!--</div>-->
|
<!--<div class="description">车辆启动了</div>-->
|
<!--</div>-->
|
<!--</el-timeline-item>-->
|
<!--</el-timeline>-->
|
</div>
|
</el-card>
|
</div>
|
<div class="right">
|
<el-card style="height: 420px">
|
<h3>音频详情</h3>
|
<div>
|
车号：{{lookAudio.locomotiveNumber}}<br/>
|
车次：{{lookAudio.trainNumber}}<br>
|
时间：{{lookAudio.occurrenceTime}}<br/>
|
司机：{{lookAudio.driverNumber}}<br>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import APlayer from 'vue-aplayer'
|
const publicPath= process.env.BASE_URL;
|
export default {
|
name: "analysis",
|
components:{
|
APlayer
|
},
|
props:{
|
modalAudio:{type:Boolean,default:false},
|
lookAudio:{
|
type:Object,
|
default:()=>({})
|
}
|
},
|
data(){
|
return {
|
audio: [
|
{
|
title: '天空之城',
|
artist: '黄叶',
|
url: `${publicPath}audio/test.mp3`,
|
pic: `${publicPath}images/audio/u230.png`,
|
lrc: '[00:12.09]作词：林夕[00:12.33]作曲：徐伟贤[00:14.40]对我好对我好'
|
}
|
]
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.timeline-container {
|
height: 280px; /* 设置你想要的高度 */
|
overflow-y: auto; /* 添加垂直滚动条 */
|
overflow-x: hidden; /* 隐藏水平滚动条 */
|
}
|
.body{
|
display: flex;
|
justify-content: start;
|
.left{
|
width: 70%;
|
.status{
|
text-align: right;
|
span{
|
display: inline-block;
|
width: 50px;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
// border: 1px solid red;
|
color: red;
|
// border-radius: 10px;
|
}
|
}
|
.title{
|
display: flex;
|
justify-content: start;
|
div{
|
width: 30%;
|
text-align: right;
|
}
|
div:nth-child(1){
|
text-align: center;
|
}
|
}
|
}
|
.right{
|
width: 20%;
|
margin-left: 20px;
|
}
|
}
|
.time-line{
|
position: relative;
|
top:-20px;
|
display: flex;
|
justify-content: start;
|
font-size: 12px;
|
.time{
|
color: gray;
|
}
|
.description{
|
box-sizing: border-box;
|
margin-left: 15px;
|
padding: 10px 0px 0px 10px;
|
width: 60%;
|
background-color: lightgray;
|
}
|
}
|
</style>
|
