liumin
/
zkPCproject
0
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
122 提交
4 分支
45 MiB
 
 
 
目录树: 6ae8ec3f34
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '6ae8ec3f34'
${ noResults }
zkPCproject/src/views/Receive/index.vue

613 行
16 KiB
原始文件 Blame 文件历史 

  1. <template>

  2.   <div class="box-center">

  3.     <div class="topbox">

  4.       <div class="topzuo">

  5.           <div class="title" style="display: flex;">

  6.             <div style="flex:1;">

  7.               <span class="span1">首次到访</span>

  8.               <span class="span2">无效录音｜未标注｜反面案例</span>

  9.             </div>

  10.             <div style="width: 120px;display: flex;color:#2671E2;">

  11.                 <div>加精</div>

  12.                 <div style="margin-left: 20px;">接待标记</div>

  13.             </div>

  14.           </div>

  15.           <div class="title" style="margin-top: 6px;">

  16.             <span class="span3">宋先生</span>

  17.             <span class="span2">2021-10-01 10:00:00</span>

  18.           </div>

  19.           <div style="display: flex;width: 100%;">

  20.             <div class="aplayer" id="aplayer"></div>

  21.             <div style="margin-left: -5px; margin-top: 21px;" @click="download()">

  22.               <img style="width:12px;height:12px;"

  23.                 src="/img/xiaza1.png" alt="">

  24.             </div>

  25. 				</div>

  26.         <div class="aplayerSpeed">

  27. 					<div style="display: flex; justify-content: space-around; width: 130px;">

  28. 						<div @click="aplayerChange('del')" style="cursor:pointer">上一首</div>

  29. 						<div style="cursor:pointer">{{(aplayerId/1+1)+'/'+aplayerLength}}</div>

  30. 						<div @click="aplayerChange('add')" style="cursor:pointer">下一首</div>

  31. 					</div>

  32. 					<div  @click="aplayerSpeed(0.5)" :class="aplayerSpeedNum==0.5?'aplayerSpeedFont':''" style="cursor:pointer">0.5x</div>

  33. 					<div  @click="aplayerSpeed(1)" :class="aplayerSpeedNum==1?'aplayerSpeedFont':''" style="cursor:pointer">1.0x</div>

  34. 					<div  @click="aplayerSpeed(1.5)" :class="aplayerSpeedNum==1.5?'aplayerSpeedFont':''" style="cursor:pointer">1.5x</div>

  35. 					<div  @click="aplayerSpeed(2)" :class="aplayerSpeedNum==2?'aplayerSpeedFont':''" style="cursor:pointer">2.0x</div>

  36. 				</div>

  37.       </div>

  38.       <div class="topyou" >

  39.         <div style="font-size:16px;">

  40.           客户：<span style="color: #2671E2;">李先生</span>

  41.         </div>

  42.         <div style="display: flex;font-size:15px;margin-top: 8px;">

  43.           <div style="width:40%;">

  44.             <div style="margin-top: 6px;">负责顾问：李先生</div>

  45.             <div style="margin-top: 6px;">接待时长：155min</div>

  46.             <div style="margin-top: 6px;">客户等级：A</div>

  47.           </div>

  48.           <div style="width:60%;">

  49.               <div style="margin-top: 6px;">到访次数：3次</div>

  50.               <div style="margin-top: 6px;">最近到访：2021-10-01 14:00:00</div>

  51.               <div style="margin-top: 6px;">客户阶段：初访</div>

  52.           </div>

  53.         </div>

  54.       </div>

  55.     </div>

  56. 

  57.     <div class="topbox1">

  58.       <div class="topzuo">

  59.         <div class="topzuo-zuo">

  60.           <div class="zuo-titbox">

  61.             <div class="searchbox">

  62.               <div style="flex:1;">

  63.                 <div style="width:96%;display: flex;margin:0 auto;">

  64.                   <div class="input" >请输入关键词</div>

  65.                   <div class="input2">搜索</div>

  66.                 </div>

  67.               </div>

  68.               <div style="width:100px;display: flex; justify-content: center;align-items: center;">

  69.                 <div class="searchbutt">文本优化</div>

  70.               </div>

  71.             </div>

  72.            	  <div class="headboxbott">

  73.                 <div class="headovfu">

  74.                   <div style="width: 100%;display: flex;" class="inner-container">

  75.                     <div @click="tapspagek(index)"  :class="{ roleindexclass: roleindex == index }"  class="biaoji1"

  76.                      v-for="(item,index) in tablist" :key="index">{{item.name}}</div>

  77.                   </div>

  78.                 </div>

  79.                 <div class="headpade">

  80.                   <div class="biaoji" @click="biaoji()">标记</div>

  81.                 </div>

  82.               </div>

  83.               <div style="width: 100%">

  84.                 <div class="center2" style="width: 100%;height:410px;overflow-y: scroll;">

  85.                     <div class="text" :data-bg="item.bg" :data-ed="item.ed"

  86.                       v-for="(item,index) in list" :key="index" :data-speaker="item.speaker">

  87.                       <div class="avatar">

  88.                         <div v-if="item.speaker == 1">

  89.                           <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="">

  90.                           <div  v-else>A</div>

  91.                         </div>

  92.                       </div>

  93.                       <div class="content123"  style="cursor:pointer;">

  94.                         <div v-html="item.onebest"></div>

  95.                       </div>

  96.                     </div>

  97.                   </div>

  98.               </div>

  99. 

  100.           </div>

  101.         </div>

  102.         <div class="topzuo-you">

  103.             <div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;border-bottom: 1px solid #E0E0E0;">

  104.               <div style="flex: 1;font-size: 16px;color: #333333;text-indent:5%;">客户意向</div>

  105.               <div style="flex: 1;font-size: 16px;color: #2671E2;text-indent:70%;">校准</div>

  106.             </div>

  107.             <div class="pingfenbox" >

  108.               <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">

  109.                 系统分析

  110.               </div>

  111.               <div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">人工校准</div>

  112.             </div>

  113. 

  114.             <div>

  115.                 <div class="intentionBox">

  116.                   <div  class="intentionName">置业需求</div>

  117.                   <div class="intentionChe">

  118.                     <div>投资</div>

  119.                     <div>管家</div>

  120.                     <div>婚房</div>

  121.                     <div>山水相逢</div>

  122.                     <div>青山不改</div>

  123.                   </div>

  124.                 </div>

  125.             </div>

  126. 

  127.         </div>

  128.       </div>

  129.       <div class="topyou">

  130.           <div class="pingfenbox" >

  131.             <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">销讲总执行率10%</div>

  132.             <div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">禁忌执行</div>

  133.           </div>

  134.           <div>

  135.             <div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">

  136.               <div style="width:60%;font-size: 16px;color: #333333;text-indent:20px;">指标</div>

  137.               <div style="width:40%;flex: 1;font-size: 16px;color: #333333;">

  138.                  <div style="width:60px; text-align: center;">执行率</div>

  139. 

  140.               </div>

  141.             </div>

  142.           </div>

  143. 

  144.           <div>

  145.             <div class="zxlBox">

  146.               <div class="zxlLev1">

  147.                 <div style="width:60%;" class="zxlLev1box">超市 29%</div>

  148.                 <div style="width:40%;">

  149.                   <div style="width:60px; text-align: center;"> <i style=" font-size: 18px;" class="el-icon-arrow-down"></i> </div>

  150.                 </div>

  151.               </div>

  152.               <div class="zxlLev2">

  153.                 <div style="width:60%;" class="zxlLev2tit">蔬菜</div>

  154.                 <div style="width:40%;display: flex;align-items: center;">

  155.                   <div class="zxlzx">执行</div>

  156.                 </div>

  157.               </div>

  158.             </div>

  159.           </div>

  160. 

  161.       </div>

  162.     </div>

  163. 

  164.   </div>

  165. </template>

  166. 

  167. <script>

  168. import "aplayer/dist/APlayer.min.css";

  169. import APlayer from "aplayer";

  170. export default {

  171.   data() {

  172.     return {

  173.       aplayer: null,

  174.       aplayerSpeedNum: "1", //点击字体更换

  175.       arr: [],

  176.       aplayerId: 0,

  177.       aplayerLength: 0,

  178.       audioList: [

  179.         {

  180.           name: "音频1",

  181.           url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",

  182.         },

  183.         {

  184.           name: "音频2",

  185.           url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3",

  186.         },

  187.       ],

  188.       tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},{name:'c',},{name:'c',},{name:'c',},],

  189.       roleindex:0,

  190.       zhixingcenterindex:0,

  191.       list:[]

  192. 

  193.     };

  194.   },

  195.   mounted() {

  196.     this.bofangchushihua();

  197.     this.init()

  198.   },

  199.   methods: {

  200.     init(){

  201.          this.$api.http.findByCusIdcusId({cusId:'e9d0e3b6a34f41abb3691d89b83fe9e5'}).then((res) => {

  202.            this.list=JSON.parse(res.data[0].audioContent)

  203.            console.log(this.list)

  204.          })

  205.     },

  206. 

  207. 

  208. 

  209.     recordclick(i){

  210.       this.zhixingcenterindex=i;

  211.     },

  212.     tapspagek(i){

  213.       this.roleindex=i;

  214.     },

  215.     bofangchushihua() {

  216.       var that = this;

  217.       this.$nextTick(() => {

  218.         this.aplayer = new APlayer({

  219.           container: document.getElementById("aplayer"),

  220.           theme: "#2671E2",

  221.           audio: [

  222.             {

  223.               url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",

  224.               cover:"https://qufang.oss-cn-beijing.aliyuncs.com/recording/1626251359408.png",

  225.             }

  226.           ],

  227.         });

  228.         //结束的回调

  229.         this.aplayer.on("ended", function () {

  230.           console.log("player ended");

  231.         });

  232.         this.aplayer.on("timeupdate", function () {

  233.           // that.drawActive(that.aplayer.audio.currentTime * 1000);

  234.         });

  235.       });

  236.     },

  237.   },

  238. };

  239. </script>

  240. 

  241. <!-- Add "scoped" attribute to limit CSS to this component only -->

  242. <style scoped  lang="scss" >

  243. .box-center {

  244.   width: 100%;

  245.   padding: 15px;

  246.   min-width: 1200px;

  247.   padding-bottom: 100px;

  248.   background: #FFFFFF;

  249. }

  250. 

  251. 

  252. // 播放

  253. .center2{

  254.   padding-left: 10px;

  255.   padding-right: 10px;

  256. }

  257. .text {

  258. 			 width: 100%;

  259. 			 font-size: 12px;

  260. 			 line-height: 20px;

  261. 			 display: flex;

  262. 			 align-items: center;

  263. 			 margin:18px 0px;

  264. 			 position: relative;

  265. 		}

  266. 

  267. 		.text[data-speaker="2"],

  268. 		.text[data-speaker="4"],

  269. 		.text[data-speaker="6"] {

  270. 			flex-direction: row-reverse;

  271. 			text-align: left;

  272. 		}

  273. 		.content123 div{

  274. 			color:#ffffff;

  275. 			font-size:14px;

  276. 			padding:5px 14px;

  277. 			background:#3ca953;

  278. 			/*background: rgb(79,194,103);*/

  279. 			border-radius:8px;

  280. 			margin: 0 12px;

  281. 			line-height: 1.5;

  282. 			max-width: 365px;

  283. 		}

  284. 

  285. 

  286. 

  287. 		 .center2 .text .avatar{

  288. 			 width: 34px;

  289. 			 height:34px;

  290. 			 background-color: #ccc;

  291. 			 border-radius: 50%;

  292. 			//  margin-left: 15px;

  293. 			 display: flex;

  294. 			 justify-content: center;

  295. 			 align-items: center;

  296. 		 }

  297. 		 .center2 .text .avatar img{

  298. 			 width: 28px;

  299. 			 height:28px;

  300. 			 display: block;

  301. 		 }

  302. 		 .center2 .text .avatar div{

  303. 			 width: 100%;

  304. 			 height: 100%;

  305. 			 text-align: center;

  306. 			 line-height: 38px;

  307. 			 color: #ffffff;

  308. 			 font-size: 24px;

  309. 		 }

  310. 

  311. 

  312. 

  313. //指标执行率

  314. .zxlBox{

  315.   width: 100%;

  316.   .zxlLev1{

  317.     width: 100%;

  318.     height: 40px;

  319.     line-height: 40px;

  320.     display: flex;

  321.     align-items: center;

  322.     background: #F8F8F8;

  323.     font-size: 15px;

  324.   }

  325.   .zxlLev1box{

  326.     text-indent: 20px;

  327. 

  328.   }

  329.    .zxlLev2{

  330.     width: 100%;

  331.     height: 40px;

  332.     line-height: 40px;

  333.     display: flex;

  334.     border-bottom: 1px solid #F8F8F8;

  335.     font-size: 14px;

  336.     .zxlzx{

  337.      width: 60px;

  338.      height: 24px;

  339.      line-height: 24px;

  340.       background: #2671E2;

  341.       text-align: center;

  342.       color: #FFFFFF;

  343.       border-radius:4px ;

  344.     }

  345.   }

  346.   .zxlLev2tit{

  347.     line-height: 40px;

  348.     text-indent: 20px;

  349.   }

  350. }

  351. 

  352. //客户意向

  353. .intentionBox{

  354.   width: 94%;

  355.   margin: 0 auto;

  356.   padding-bottom: 12px;

  357.   border-bottom: 1px solid #E0E0E0;

  358. }

  359. .intentionChe{

  360.   width: 100%;

  361.   display: flex;

  362.   flex-wrap: wrap;

  363. }

  364. .intentionName{

  365.   font-size: 16px;;

  366.    margin-top: 10px;

  367. }

  368. .intentionChe div{

  369.   padding: 4px  10px;

  370.   background: #F4F8FD;

  371.   margin-left: 6px;

  372.   border-radius:6px ;

  373.   color: #2671E2;

  374.   font-size: 14px;

  375.   margin-top: 10px;

  376. }

  377. 

  378. 

  379. .topbox{

  380.   width: 100%;

  381.   display: flex;

  382.   .topzuo{

  383.     width:75% ;

  384.     min-width: 800px;

  385.     height: 140px;

  386.     background: #FFFFFF;

  387.     border: 1px solid #E0E0E0;

  388.     padding: 10px;

  389.     position: relative;

  390. 

  391.     .title{

  392.       color: #32363D;

  393.       .span1{

  394.         font-size: 16px;

  395.         font-weight: 600;

  396.         margin-left: 2px;

  397.       }

  398.       .span2{

  399.         font-size: 14px;

  400.         margin-left: 10px;

  401.       }

  402.       .span3{

  403.         font-size: 16px;

  404.         margin-left: 2px;

  405.       }

  406.     }

  407.   }

  408.   .topyou{

  409.     width:24% ;

  410.     min-width: 380px;

  411.     height: 140px;

  412.     padding: 10px;

  413.     background: #FFFFFF;

  414.     border: 1px solid #E0E0E0;

  415.     margin-left: 20px;

  416.   }

  417. }

  418. .input{

  419.   width: 94%;

  420.   height: 32px;

  421.   line-height: 32px;

  422.   background: #FFFFFF;

  423.   border-radius: 2px 0px 0px 2px;

  424.   text-indent: 6px;

  425.   border: 1px solid #E0E0E0;

  426. }

  427. .input2{

  428.   width: 70px;

  429.   height: 32px;

  430.   line-height: 32px;

  431.   background: #2671E2;

  432.   border-radius:0px 2px 2px 0px;

  433.   color: #FFFFFF;

  434.   text-align: center;

  435. }

  436. .topbox1{

  437.   width: 100%;

  438.   display: flex;

  439.   margin-top: 18px;

  440.   height: calc(80vh - 150px);

  441.   .topzuo{

  442.     width:75% ;

  443.     min-width: 800px;

  444.     height: 100%;

  445.     display: flex;

  446.     .topzuo-zuo{

  447.       width: 60%;

  448.       height: 100%;

  449.       background: #FFFFFF;

  450.       border: 1px solid #E0E0E0;

  451.       .zuo-titbox{

  452.         width: 100%;

  453.         height: 100px;

  454.         border-bottom:  1px solid #E0E0E0;

  455.         .searchbox{

  456.           width: 100%;

  457.           height: 50px;

  458.           display: flex;

  459.           margin-top: 6px;

  460.           justify-content: center;

  461.           align-items: center;

  462. 

  463.           .searchbutt{

  464.             width: 80px;

  465.             height: 32px;

  466.             line-height: 32px;

  467.             background: #2671E2;

  468.             border-radius: 2px;

  469.             color: #FFFFFF;

  470.             // margin-left: 20px;

  471.             text-align: center;

  472.           }

  473.         }

  474.       }

  475.     }

  476.     .topzuo-you{

  477.       width: 39%;

  478.       height: 100%;

  479.       margin-left: 18px;

  480.        background: #FFFFFF;

  481.       border: 1px solid #E0E0E0;

  482.     }

  483.   }

  484.   .topyou{

  485.     width:24% ;

  486.     min-width: 380px;

  487.     height: 100%;

  488.     background: #FFFFFF;

  489.     border: 1px solid #E0E0E0;

  490.     margin-left: 20px;

  491.   }

  492. }

  493. 

  494. .roleindexclass{

  495. 			 background: #2671E2;

  496.        color: #FFFFFF;

  497. 		 }

  498.  .headboxbott{

  499. 			 width: 100%;

  500. 			 height:50px;

  501. 			 display: flex;

  502. 			 align-items: center;

  503. 		 }

  504. 		 .headovfu{

  505. 			 flex: 1;

  506. 			 height: 40px;

  507. 			 overflow: hidden;

  508. 			 margin-top: 10px;

  509. 		 }

  510. 		 .headpade{

  511. 			 width: 100px;

  512. 			 height: 40px;

  513. 			 display: flex;

  514. 			 justify-content: center;

  515. 			 align-items: center;

  516. 		 }

  517. 		 .biaoji{

  518. 			 width: 70px;

  519. 			 height: 30px;

  520. 			 background: #E6625B;

  521. 			 border-radius: 24px;

  522. 			 text-align: center;

  523. 			 line-height: 30px;

  524. 			 color: #FFFFFF;

  525. 		 }

  526. 		 .biaoji1{

  527. 			 width: 70px;

  528. 			 height: 30px;

  529. 			 text-align: center;

  530. 			 line-height: 30px;

  531. 			 margin-left: 10px;

  532. 			 flex-shrink: 0;

  533.        border-radius: 4px;

  534. 		 }

  535. 		 .inner-container{

  536. 			 overflow-x: scroll;

  537. 			 height: 40px;

  538. 		 }

  539. 		 /*滚动条样式*/

  540. 		 .inner-container::-webkit-scrollbar {

  541. 			 height: 4px;

  542. 		 }

  543. 		 .inner-container::-webkit-scrollbar-thumb {

  544. 			 border-radius: 10px;

  545. 			 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

  546. 			 background: rgba(0,0,0,0.2);

  547. 		 }

  548. 		 .inner-container::-webkit-scrollbar-track {

  549. 			 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

  550. 			 border-radius: 0;

  551. 			 background: rgba(0,0,0,0.1);

  552. 		 }

  553.      .aplayer{

  554. 			box-shadow:none;

  555. 			/*width: 80%;*/

  556. 			width: 95.3%;

  557. 		}

  558.     .aplayer-author{

  559. 			display: none;

  560. 		}

  561. 

  562. 

  563. 		.aplayerSpeed{

  564. 			display: flex;

  565. 			/*justify-content: space-around;*/

  566. 			justify-content: space-between;

  567. 			padding: 0 10px;

  568. 			font-size: 14px;

  569. 			color: #999;

  570. 			/*width: 616px;*/

  571. 			width: 86.5%;

  572. 			margin: 0 auto;

  573. 			position: absolute;

  574. 			left: 78px;

  575. 		  bottom: 12px;

  576. 		}

  577.     /deep/.aplayer-pic{

  578. 			width: 60px !important;

  579. 			height: 60px !important;

  580. 		}

  581. 		/deep/.aplayer-music{

  582. 			display: none !important;

  583. 		}

  584. 		.aplayer-controller{

  585. 			margin-top: 15px;

  586. 		}

  587. 

  588. 		.aplayerSpeedFont{

  589. 			color: #2671E2;

  590. 		}

  591.     /deep/.aplayer-info{

  592.       padding: 22px 7px 0px 10px;;

  593.     }

  594.   .pingfenbox{

  595. 		width: 100%;

  596. 		height: 46px;

  597. 		line-height: 46px;

  598. 		border-bottom: 1px solid #E0E0E0;

  599. 		display: flex;

  600. 	}

  601. 	.pingfenbox div{

  602. 		flex: 1;

  603. 		text-align: center;

  604. 		font-size: 16px;

  605. 	}

  606. 	.activecllasscet{

  607. 		color: #2671E2;

  608.     border-bottom: 2px solid #2671E2;

  609. 	}

  610. 

  611. 

  612. </style>