From ecd3818151477de4942f2071d082da0ea2e3bf7f Mon Sep 17 00:00:00 2001 From: wangxiaohua <1214073490@qq.com> Date: Mon, 8 Nov 2021 18:14:52 +0800 Subject: [PATCH] init --- src/api/modules/http.js | 11 ++ src/views/Receive/index.vue | 245 ++++++++++++++++++++++++++++++++---- vue.config.js | 2 +- 3 files changed, 234 insertions(+), 24 deletions(-) diff --git a/src/api/modules/http.js b/src/api/modules/http.js index 905cac3..432f8bc 100644 --- a/src/api/modules/http.js +++ b/src/api/modules/http.js @@ -654,3 +654,14 @@ export function accountData(query) { } + +// 获取转写内容 +export function findByCusIdcusId(query) { + return request({ + url: 'autoSR/customer/findByCusId', + method:'get', + params:query + }) +} + + diff --git a/src/views/Receive/index.vue b/src/views/Receive/index.vue index 431e532..d676d73 100644 --- a/src/views/Receive/index.vue +++ b/src/views/Receive/index.vue @@ -53,8 +53,13 @@ <div class="topzuo-zuo"> <div class="zuo-titbox"> <div class="searchbox"> - <input class="input" placeholder="请输入关键词" type="text"> - <div class="searchbutt">搜索</div> + <div style="flex:1;display: flex; justify-content: center;"> + <input class="input" placeholder="请输入关键词" type="text"> + </div> + + <div style="width:100px;display: flex; justify-content: center;align-items: center;"> + <div class="searchbutt">搜索</div> + </div> </div> <div class="headboxbott"> <div class="headovfu"> @@ -67,17 +72,50 @@ <div class="biaoji" @click="biaoji()">标记</div> </div> </div> + <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"> + <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=""> + <div v-else>A</div> + </div> + </div> + <div class="content123" style="cursor:pointer;"> + <div v-html="item.onebest"></div> + </div> + </div> + </div> + </div> + </div> </div> <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: 15px;color: #333333;text-indent:5%;">客户意向</div> - <div style="flex: 1;font-size: 15px;color: #2671E2;text-indent:70%;">校准</div> + <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> <div class="pingfenbox" > - <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">系统分析</div> + <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)"> + 系统分析 + </div> <div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">人工校准</div> </div> + + <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> </div> <div class="topyou"> @@ -87,10 +125,31 @@ </div> <div> <div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;"> - <div style="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">指标</div> - <div style="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">执行率</div> + <div style="width:60%;font-size: 16px;color: #333333;text-indent:20px;">指标</div> + <div style="width:40%;flex: 1;font-size: 16px;color: #333333;"> + <div style="width:60px; text-align: center;">执行率</div> + + </div> + </div> + </div> + + <div> + <div class="zxlBox"> + <div class="zxlLev1"> + <div style="width:60%;" class="zxlLev1box">超市 29%</div> + <div style="width:40%;"> + <div style="width:60px; text-align: center;"> <i style=" font-size: 18px;" class="el-icon-arrow-down"></i> </div> + </div> + </div> + <div class="zxlLev2"> + <div style="width:60%;" class="zxlLev2tit">蔬菜</div> + <div style="width:40%;display: flex;align-items: center;"> + <div class="zxlzx">执行</div> + </div> + </div> </div> </div> + </div> </div> @@ -118,17 +177,27 @@ export default { url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3", }, ], - tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},], + tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},{name:'c',},{name:'c',},{name:'c',},], roleindex:0, zhixingcenterindex:0, - + list:[] }; }, mounted() { this.bofangchushihua(); + this.init() }, methods: { + init(){ + this.$api.http.findByCusIdcusId({cusId:'e9d0e3b6a34f41abb3691d89b83fe9e5'}).then((res) => { + this.list=JSON.parse(res.data[0].audioContent) + console.log(this.list) + }) + }, + + + recordclick(i){ this.zhixingcenterindex=i; }, @@ -170,6 +239,135 @@ export default { padding-bottom: 100px; background: #FFFFFF; } + + +// 播放 +.center2{ + padding-left: 10px; + padding-right: 10px; +} +.text { + width: 100%; + font-size: 12px; + line-height: 20px; + display: flex; + align-items: center; + margin:18px 0px; + position: relative; + } + + .text[data-speaker="2"], + .text[data-speaker="4"], + .text[data-speaker="6"] { + flex-direction: row-reverse; + text-align: left; + } + .content123 div{ + color:#ffffff; + font-size:14px; + padding:5px 14px; + background:#3ca953; + /*background: rgb(79,194,103);*/ + border-radius:8px; + margin: 0 12px; + line-height: 1.5; + max-width: 365px; + } + + + + .center2 .text .avatar{ + width: 34px; + height:34px; + background-color: #ccc; + border-radius: 50%; + // margin-left: 15px; + display: flex; + justify-content: center; + align-items: center; + } + .center2 .text .avatar img{ + width: 28px; + height:28px; + display: block; + } + .center2 .text .avatar div{ + width: 100%; + height: 100%; + text-align: center; + line-height: 38px; + color: #ffffff; + font-size: 24px; + } + + + +//指标执行率 +.zxlBox{ + width: 100%; + .zxlLev1{ + width: 100%; + height: 40px; + line-height: 40px; + display: flex; + align-items: center; + background: #F8F8F8; + font-size: 15px; + } + .zxlLev1box{ + text-indent: 20px; + + } + .zxlLev2{ + width: 100%; + height: 40px; + line-height: 40px; + display: flex; + border-bottom: 1px solid #F8F8F8; + font-size: 14px; + .zxlzx{ + width: 60px; + height: 24px; + line-height: 24px; + background: #2671E2; + text-align: center; + color: #FFFFFF; + border-radius:4px ; + } + } + .zxlLev2tit{ + line-height: 40px; + text-indent: 20px; + } +} + +//客户意向 +.intentionBox{ + width: 94%; + margin: 0 auto; + padding-bottom: 12px; + border-bottom: 1px solid #E0E0E0; +} +.intentionChe{ + width: 100%; + display: flex; + flex-wrap: wrap; +} +.intentionName{ + font-size: 16px;; + margin-top: 10px; +} +.intentionChe div{ + padding: 4px 10px; + background: #F4F8FD; + margin-left: 6px; + border-radius:6px ; + color: #2671E2; + font-size: 14px; + margin-top: 10px; +} + + .topbox{ width: 100%; display: flex; @@ -209,6 +407,15 @@ export default { margin-left: 20px; } } +.input{ + width: 94%; + height: 32px; + line-height: 32px; + background: #FFFFFF; + border-radius: 2px; + text-indent: 6px; + border: 1px solid #E0E0E0; +} .topbox1{ width: 100%; display: flex; @@ -235,23 +442,15 @@ export default { margin-top: 6px; justify-content: center; align-items: center; - .input{ - width: 80%; - height: 32px; - line-height: 32px; - background: #FFFFFF; - border-radius: 2px; - text-indent: 6px; - border: 1px solid #E0E0E0; - } + .searchbutt{ - width: 68px; - height: 32px; - line-height: 32px; + width: 70px; + height: 30px; + line-height: 30px; background: #2671E2; border-radius: 2px; color: #FFFFFF; - margin-left: 20px; + // margin-left: 20px; text-align: center; } } @@ -386,10 +585,10 @@ export default { flex: 1; text-align: center; font-size: 16px; - text-indent: 20px; } .activecllasscet{ color: #2671E2; + border-bottom: 2px solid #2671E2; } diff --git a/vue.config.js b/vue.config.js index 8b317ad..3c0b902 100644 --- a/vue.config.js +++ b/vue.config.js @@ -7,7 +7,7 @@ // const url = 'http://192.168.31.169:9999' //长龙 const url = 'http://192.168.31.134:9999' //嘉豪 // const url = 'http://192.168.31.100:9999' //王笑 -const url = 'http://pmsa8v.natappfree.cc' //王笑 +// const url = 'http://pmsa8v.natappfree.cc' //王笑 const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css']