@@ -33,6 +33,7 @@ | |||
font-size: 14px !important; | |||
} | |||
</style> | |||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> | |||
</head> | |||
<body> | |||
@@ -665,3 +665,13 @@ export function findByCusIdcusId(query) { | |||
} | |||
export function filefindByPage(obj) { | |||
return request({ | |||
url: 'autoSR/zk/file/findByPage', | |||
method: 'post', | |||
data: obj | |||
}) | |||
} | |||
@@ -22,7 +22,12 @@ export default [{ | |||
import(/* webpackChunkName: "page" */ '@/views/Template/Pinspeakwords'), | |||
name: '销讲模板', | |||
}, | |||
{ | |||
path: '/Receive/index', | |||
component: () => | |||
import(/* webpackChunkName: "page" */ '@/views/Receive/index'), | |||
name: '接待详情', | |||
}, | |||
] | |||
}, { | |||
@@ -266,11 +266,11 @@ | |||
</el-table-column> | |||
<el-table-column label="操作" align="center" width="250" fixed="right"> | |||
<template slot-scope="{row}"> | |||
<el-button type="text" v-if="cus_index_detail">客户详情</el-button> | |||
<el-button type="text" v-if="cus_index_visit">接待详情</el-button> | |||
<!-- <el-button type="text" v-if="cus_index_detail">客户详情</el-button> --> | |||
<el-button type="text" @click="Receivedetailsabout(row)" v-if="cus_index_visit">接待详情</el-button> | |||
<!-- <el-button type="text">更多</el-button> --> | |||
<el-button type="text" @click="tranfser(row)" v-if="cus_index_take">转交</el-button> | |||
<el-button type="text" v-if="cus_index_del">删除</el-button> | |||
<!-- <el-button type="text" v-if="cus_index_del">删除</el-button> --> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
@@ -421,6 +421,22 @@ export default { | |||
this.zkhousePage(); | |||
}, | |||
methods: { | |||
// 跳转接待详情 | |||
Receivedetailsabout(row){ | |||
this.$api.http.findByCusIdcusId({cusId:row.id}).then((res) => { | |||
if(res.data.length==0){ | |||
this.$message({ | |||
message: '无录音', | |||
type: 'warning' | |||
}); | |||
}else{ | |||
this.$router.push({ | |||
path: "/Receive/index", | |||
query: { flag: row.id }, | |||
}); | |||
} | |||
}) | |||
}, | |||
// 转交 | |||
tranfser(row){ | |||
console.log(row); | |||
@@ -6,15 +6,15 @@ | |||
<div class="app-titel" style="margin-top: 5px"> | |||
<div class="label">用户名:</div> | |||
<div> | |||
<el-input v-model="value"></el-input> | |||
<el-input v-model="username"></el-input> | |||
</div> | |||
<div class="label">设备编号:</div> | |||
<div> | |||
<el-input v-model="value"></el-input> | |||
<el-input v-model="imei"></el-input> | |||
</div> | |||
<div class="label">录音来源:</div> | |||
<div> | |||
<el-select v-model="value" placeholder="请选择"> | |||
<el-select v-model="sourceCode" placeholder="请选择"> | |||
<el-option | |||
v-for="item in options" | |||
:key="item.value" | |||
@@ -27,17 +27,10 @@ | |||
<div class="app-titel" style="margin-top: 15px"> | |||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||
<div style="margin-left: 20px"> | |||
<el-button style="background: #2671e2; color: #ffffff" | |||
>筛选</el-button | |||
> | |||
<el-button style="background: #2671e2; color: #ffffff" @click="noempty()">筛选</el-button> | |||
</div> | |||
<div style="margin-left: 20px"> | |||
<el-button>清空筛选条件</el-button> | |||
</div> | |||
<div style="margin-left: 20px"> | |||
<el-button v-if="file_index_upload" style="background: #2671e2; color: #ffffff" | |||
>上传</el-button | |||
> | |||
<el-button @click="empty()">清空筛选条件</el-button> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -47,77 +40,67 @@ | |||
<el-table | |||
:data="tableData" | |||
stripe | |||
height="400" | |||
@selection-change="handleSelectionChange" | |||
:height="tableHeight" | |||
style="width: 100%"> | |||
<el-table-column | |||
type="selection" | |||
width="55"> | |||
</el-table-column> | |||
<el-table-column | |||
prop="date" | |||
prop="username" | |||
label="用户名" | |||
align="center" | |||
> | |||
</el-table-column> | |||
<el-table-column | |||
prop="name" | |||
prop="sourceCode" | |||
label="录音来源" | |||
align="center" | |||
> | |||
<template slot-scope="scope"> | |||
<span v-if="scope.row.sourceCode==2">SIM设备</span> | |||
<span v-if="scope.row.sourceCode==6">wifi设备</span> | |||
</template> | |||
</el-table-column> | |||
<el-table-column | |||
prop="address" | |||
prop="imei" | |||
label="设备编号" | |||
align="center"> | |||
</el-table-column> | |||
<el-table-column | |||
prop="date" | |||
prop="recordDuration" | |||
label="录音时长" | |||
align="center" | |||
> | |||
align="center"> | |||
</el-table-column> | |||
<el-table-column | |||
prop="date" | |||
prop="recordEndTime" | |||
label="录音结束时间" | |||
align="center" | |||
> | |||
</el-table-column> | |||
<el-table-column | |||
prop="date" | |||
prop="receptionTime" | |||
label="文件上传时间" | |||
align="center" | |||
> | |||
</el-table-column> | |||
<!-- scope --> | |||
<el-table-column label="操作" align="center"> | |||
<template slot-scope=""> | |||
<span style="color: #2671E2;" v-if="file_index_edit">编辑</span> | |||
<span style="color: #2671E2;margin-left: 10px;" v-if="file_index_start">播放</span> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||
<el-pagination | |||
@size-change="handleSizeChange" | |||
@current-change="handleCurrentChange" | |||
:current-page="currentPage4" | |||
:page-sizes="[100, 200, 300, 400]" | |||
:page-size="100" | |||
:page-sizes="[10, 20, 30]" | |||
:page-size="10" | |||
layout="total, sizes, prev, pager, next, jumper" | |||
:total="400"> | |||
:total="total"> | |||
</el-pagination> | |||
</div> | |||
</div> | |||
<el-dialog title="绑定" :visible.sync="dialogVisible" > | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button @click="dialogVisible = false">取 消</el-button> | |||
<el-button type="primary" @click="editor()">保存</el-button> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
@@ -126,65 +109,19 @@ import { mapGetters } from "vuex"; | |||
export default { | |||
data() { | |||
return { | |||
currentPage4:4, | |||
value: "", | |||
input: "", | |||
tableData: [ | |||
{ | |||
date: "2016-05-03", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-02", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-04", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-01", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-08", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-06", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-07", | |||
name: "王小虎", | |||
address: " 1518 弄", | |||
}, | |||
], | |||
multipleSelection:[], | |||
dialogVisible:false, | |||
options: [{ | |||
value: '选项1', | |||
label: '黄金糕' | |||
}, { | |||
value: '选项2', | |||
label: '双皮奶' | |||
}, { | |||
value: '选项3', | |||
label: '蚵仔煎' | |||
}, { | |||
value: '选项4', | |||
label: '龙须面' | |||
}, { | |||
value: '选项5', | |||
label: '北京烤鸭' | |||
}], | |||
value: '' | |||
tableHeight: window.innerHeight * 0.58, | |||
currentPage4:1, | |||
tableData: [], | |||
options: [ | |||
{value: '2',label: 'SIM设备'}, | |||
{value: '6',label: 'wifi设备'} | |||
], | |||
username:'', | |||
imei:'', | |||
sourceCode:'', | |||
size:10, | |||
current:1, | |||
total:0 | |||
}; | |||
}, | |||
computed: { | |||
@@ -195,33 +132,61 @@ export default { | |||
this.file_index_edit = this.permissions["file_index_edit"]; | |||
this.file_index_start = this.permissions["file_index_start"]; | |||
}, | |||
mounted() {}, | |||
mounted() { | |||
this.filefindByPage() | |||
}, | |||
methods: { | |||
editorinfo(){ | |||
this.dialogVisible=true; | |||
noempty(){ | |||
this.current=1; | |||
this.filefindByPage() | |||
}, | |||
editor(){ | |||
this.dialogVisible=false; | |||
empty(){ | |||
this.username=''; | |||
this.imei=''; | |||
this.sourceCode=''; | |||
this.current=1; | |||
this.filefindByPage() | |||
}, | |||
filefindByPage(){ | |||
this.tableData=[]; | |||
this.$api.http.filefindByPage({ | |||
username:this.username, | |||
imei:this.imei, | |||
sourceCode:Number(this.sourceCode), | |||
size:this.size, | |||
current:this.current | |||
}).then((res) => { | |||
res.data.records.map(item=>{ | |||
item.recordDuration=Math.floor(item.recordDuration/60) | |||
}) | |||
this.tableData=res.data.records; | |||
this.total=res.data.total | |||
}) | |||
}, | |||
handleSelectionChange(val) { | |||
this.multipleSelection = val; | |||
}, | |||
handleSizeChange(val) { | |||
console.log(`每页 ${val} 条`); | |||
this.size=val; | |||
this.filefindByPage() | |||
}, | |||
handleCurrentChange(val) { | |||
console.log(`当前页: ${val}`); | |||
this.current=val; | |||
this.filefindByPage() | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped="scoped" lang="scss" > | |||
#avue-view{ | |||
overflow: hidden; | |||
} | |||
.box-center { | |||
width: 100%; | |||
height: 100%; | |||
padding: 15px; | |||
min-width: 1200px; | |||
padding-bottom: 100px; | |||
padding-bottom: 20px; | |||
} | |||
.cen-tab{ | |||
width: 100%; | |||
@@ -9,7 +9,7 @@ | |||
</div> | |||
<div style="width: 120px;display: flex;color:#2671E2;"> | |||
<div>加精</div> | |||
<div style="margin-left: 20px;">接待标记</div> | |||
<div style="margin-left: 20px;" @click="dialogFormVisible13=true">接待标记</div> | |||
</div> | |||
</div> | |||
<div class="title" style="margin-top: 6px;"> | |||
@@ -83,7 +83,7 @@ | |||
<div style="width: 100%"> | |||
<div class="center2" style="width: 100%;height:410px;overflow-y: scroll;"> | |||
<div class="text" :data-bg="item.bg" :data-ed="item.ed" | |||
v-for="(item,index) in list" :key="index" :data-speaker="item.speaker"> | |||
v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker"> | |||
<div class="avatar"> | |||
<div v-if="item.speaker == 1"> | |||
<img style="margin: 0 auto;" v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt=""> | |||
@@ -102,7 +102,7 @@ | |||
<div class="topzuo-you"> | |||
<div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;border-bottom: 1px solid #E0E0E0;"> | |||
<div style="flex: 1;font-size: 16px;color: #333333;text-indent:5%;">客户意向</div> | |||
<div style="flex: 1;font-size: 16px;color: #2671E2;text-indent:70%;">校准</div> | |||
<div style="flex: 1;font-size: 16px;color: #2671E2;text-indent:70%;" @click="dialogFormVisible12=true">校准</div> | |||
</div> | |||
<div class="pingfenbox" > | |||
<div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)"> | |||
@@ -160,7 +160,73 @@ | |||
</div> | |||
</div> | |||
<el-dialog title="加入常错词" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal="false" @close="$refs.form.resetFields();"> | |||
<el-form :model="form" ref="form" label-width="80px" :rules="rules" > | |||
<div style="text-indent: 20px;"> | |||
<span>常错词:</span> | |||
<span v-html="form.wrongWord"></span> | |||
</div> | |||
<el-form-item label="正确词" prop="correctWord"> | |||
<el-input v-model="form.correctWord" autocomplete="off"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button @click="dialogFormVisible = false">取 消</el-button> | |||
<el-button type="primary" @click="subMsg">确 定</el-button> | |||
</div> | |||
</el-dialog> | |||
<el-dialog title="标记顾问" :visible.sync="dialogFormVisible11" center width="500px" :close-on-click-modal="false"> | |||
<div style="width: 95%;display: flex;flex-wrap: wrap;margin: 0 auto;padding-top: 30px;padding-bottom: 30px;"> | |||
<div class="viewclace" :class="roleindexbiaoji == index ? 'bosdttom' : ''" | |||
@click="biaojixuanze(index)" v-for="(item,index) in tablist.slice(1,tablist.length)" :key="index"> | |||
<div>{{item.name}}</div> | |||
</div> | |||
</div> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button @click="dialogFormVisible11=false">取 消</el-button> | |||
<el-button type="primary" @click="subMsg11">确 定</el-button> | |||
</div> | |||
</el-dialog> | |||
<el-dialog title="校准" :visible.sync="dialogFormVisible12" center width="500px" :close-on-click-modal="false"> | |||
<div> | |||
<div class="intentionBox"> | |||
<div class="intentionName">置业需求</div> | |||
<div class="intentionChe"> | |||
<div>投资</div> | |||
<div>管家</div> | |||
<div>婚房</div> | |||
<div>山水相逢</div> | |||
<div>青山不改</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button @click="dialogFormVisible12=false">取 消</el-button> | |||
<el-button type="primary">确 定</el-button> | |||
</div> | |||
</el-dialog> | |||
<el-dialog title="接待标记" :visible.sync="dialogFormVisible13" center width="500px" :close-on-click-modal="false"> | |||
<div style="width:80%;margin:0 auto;font-size: 30px;"> | |||
<div> | |||
<el-radio v-model="radio" label="1">没电指派无录音</el-radio> | |||
<el-radio v-model="radio" label="2">离线指派无录音</el-radio> | |||
</div> | |||
<div> | |||
<el-radio v-model="radio" label="3">系统测试误操作</el-radio> | |||
<el-radio v-model="radio" label="4">非接访场景录音</el-radio> | |||
</div> | |||
<div > | |||
<el-radio v-model="radio" label="5">其他</el-radio> | |||
</div> | |||
<div v-if="radio==5"> | |||
<textarea style="width:100%;margin-top: 6px;border: 1px solid #e0e0e0;height: 100px;padding: 10px;font-size: 16px;" name="" placeholder="备注" cols="30" rows="10"></textarea> | |||
</div> | |||
</div> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button @click="dialogFormVisible13=false">取 消</el-button> | |||
<el-button type="primary">确 定</el-button> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
@@ -170,37 +236,69 @@ import APlayer from "aplayer"; | |||
export default { | |||
data() { | |||
return { | |||
dialogFormVisible:false, | |||
dialogFormVisible11:false, | |||
dialogFormVisible12:false, | |||
dialogFormVisible13:false, | |||
roleindexbiaoji:0, | |||
radio:1, | |||
form:{ | |||
correctWord: '',//正确词 | |||
cupid: '', | |||
translateHtmlContent: '', | |||
wrongWord: '', // 错词 | |||
customerId:'', | |||
}, | |||
rules: { | |||
correctWord: [ | |||
{ required: true, message: '请输入正确词', trigger: 'blur' }, | |||
], | |||
wrongWord: [ | |||
{ required: true, message: '请输入错词', trigger: 'blur' }, | |||
], | |||
}, | |||
aplayer: null, | |||
aplayerSpeedNum: "1", //点击字体更换 | |||
arr: [], | |||
aplayerId: 0, | |||
aplayerLength: 0, | |||
audioList: [ | |||
{ | |||
name: "音频1", | |||
url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3", | |||
}, | |||
{ | |||
name: "音频2", | |||
url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3", | |||
}, | |||
], | |||
tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},{name:'c',},{name:'c',},{name:'c',},], | |||
roleindex:0, | |||
zhixingcenterindex:0, | |||
list:[] | |||
fileId:'',//录音文件id | |||
recordPath:'',//播放src | |||
transcriptionlist:[],//转写内容 | |||
playNow:0, | |||
}; | |||
}, | |||
mounted() { | |||
this.bofangchushihua(); | |||
this.fileId=this.$route.query.flag; | |||
// this.bofangchushihua(); | |||
this.init() | |||
}, | |||
methods: { | |||
//常错词确认 | |||
subMsg(){ | |||
}, | |||
//标记 | |||
biaoji(){ | |||
this.dialogFormVisible11=true | |||
}, | |||
//确认标记 | |||
subMsg11(){ | |||
}, | |||
init(){ | |||
this.$api.http.findByCusIdcusId({cusId:'e9d0e3b6a34f41abb3691d89b83fe9e5'}).then((res) => { | |||
this.list=JSON.parse(res.data[0].audioContent) | |||
console.log(this.list) | |||
this.$api.http.findByCusIdcusId({cusId:this.fileId}).then((res) => { | |||
let audopbj=res.data; | |||
this.recordPath=audopbj[0].recordPath; | |||
this.transcriptionlist=JSON.parse(audopbj[0].audioContent) | |||
this.bofangchushihua() | |||
}) | |||
}, | |||
@@ -212,6 +310,7 @@ export default { | |||
tapspagek(i){ | |||
this.roleindex=i; | |||
}, | |||
//播放实例 | |||
bofangchushihua() { | |||
var that = this; | |||
this.$nextTick(() => { | |||
@@ -220,7 +319,7 @@ export default { | |||
theme: "#2671E2", | |||
audio: [ | |||
{ | |||
url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3", | |||
url:this.recordPath, | |||
cover:"https://qufang.oss-cn-beijing.aliyuncs.com/recording/1626251359408.png", | |||
} | |||
], | |||
@@ -230,10 +329,26 @@ export default { | |||
console.log("player ended"); | |||
}); | |||
this.aplayer.on("timeupdate", function () { | |||
// that.drawActive(that.aplayer.audio.currentTime * 1000); | |||
that.drawActive(that.aplayer.audio.currentTime * 1000); | |||
}); | |||
}); | |||
}, | |||
//音频播放中 | |||
drawActive(playTime){ | |||
var that=this; | |||
that.playNow=playTime; | |||
$(".center2 .text").each(function(index){ | |||
if(this.dataset.bg<playTime && playTime<this.dataset.ed){ | |||
$(this).addClass("activecoloc"); | |||
that.$nextTick(() => { | |||
document.querySelector(".center2").scrollTop=$(".center2 .activecoloc")[0].offsetTop - 340 | |||
}) | |||
}else{ | |||
$(this).removeClass("activecoloc") | |||
} | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -283,6 +398,16 @@ export default { | |||
} | |||
.text .activecoloc .content123 div{ | |||
color:#38FFF1 ; | |||
} | |||
.text[data-speaker="2"].activecoloc .content123 div, | |||
.text[data-speaker="4"].activecoloc .content123 div, | |||
.text[data-speaker="6"].activecoloc .content123 div{ | |||
color: #FF7538; | |||
} | |||
.center2 .text .avatar{ | |||
width: 34px; | |||
@@ -607,6 +732,20 @@ export default { | |||
color: #2671E2; | |||
border-bottom: 2px solid #2671E2; | |||
} | |||
.viewclace{ | |||
height: 30px; | |||
text-align: center; | |||
line-height: 30px; | |||
border-radius: 14px; | |||
margin-right: 34px; | |||
margin-top: 16px; | |||
font-size: 16px; | |||
border: 1px solid; | |||
padding-left: 18px; | |||
padding-right: 18px; | |||
} | |||
.bosdttom{ | |||
color: #FFFFFF; | |||
background-color: #2671E2; | |||
} | |||
</style> |