init

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

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;
 	}
 
 

vue.config.js

@@ -3,11 +3,11 @@
  * https://cli.vuejs.org/zh/config/
  */
 // const url = 'http://pigx-gateway'
-// const url = 'http://39.97.167.65:9999' //测试
+const url = 'http://39.97.167.65:9999' //测试
 // 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://zwfakg.natappfree.cc' //王笑
+// const url = 'http://zwfakg.natappfree.cc' //王笑
 
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']