AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

598 行
18 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittab">
  4. <view class="tabbox">
  5. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
  6. </view>
  7. <view class="tabbox">
  8. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
  9. </view>
  10. <view class="tabbox">
  11. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
  12. </view>
  13. <view class="tabbox">
  14. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  15. </view>
  16. </view>
  17. <view class="single">
  18. <view class="title">
  19. <view class="title1" style="flex: 1;">接待量排名(TOP10)</view>
  20. </view>
  21. <view class="hejisan">
  22. <view class="sanbox1" >
  23. <view class="text1-2">{{newlisttabinfo1.total}}</view>
  24. <view class="text1-1">合计接待次数</view>
  25. </view>
  26. <view class="sanbox1" >
  27. <view class="text1-2">{{newlisttabinfo1.count}}</view>
  28. <view class="text1-1">顾问人数</view>
  29. </view>
  30. <view class="sanbox1">
  31. <view class="text1-2">{{newlisttabinfo1.avg}}</view>
  32. <view class="text1-1">人均接待次数</view>
  33. </view>
  34. </view>
  35. <view class="jindu" style="margin-top: 20rpx;">
  36. <view v-if="newlisttabinfo1.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo1.result" :key="index">
  37. <view class="jindu-boxche">
  38. <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
  39. <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
  40. <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
  41. <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
  42. <view class="sort-number" v-if="index>2">{{index+1}}</view>
  43. {{item.name.substring(0,4)}}</view>
  44. <view class="progress-cus">
  45. <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
  46. <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
  47. <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
  48. <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
  49. </view>
  50. <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
  51. </view>
  52. </view>
  53. <view v-if="newlisttabinfo1.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  54. 暂无数据
  55. </view>
  56. </view>
  57. </view>
  58. <view class="single">
  59. <view class="title">
  60. <view class="title1" style="flex: 1;">平均执行率排行(TOP10)</view>
  61. </view>
  62. <view class="hejisan">
  63. <view class="sanbox1" style="width: 40%;">
  64. <view class="text1-2">{{newlisttabinfo3.count}}</view>
  65. <view class="text1-1">顾问人数</view>
  66. </view>
  67. <view class="sanbox1" style="width: 25%;">
  68. <view class="text1-2">{{newlisttabinfo3.avg}}%</view>
  69. <view class="text1-1">人均执行率</view>
  70. </view>
  71. </view>
  72. <view class="jindu" style="margin-top: 20rpx;">
  73. <view v-if="newlisttabinfo3.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo3.result" :key="index">
  74. <view class="jindu-boxche">
  75. <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
  76. <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
  77. <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
  78. <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
  79. <view class="sort-number" v-if="index>2">{{index+1}}</view>
  80. {{item.name.substring(0,4)}}</view>
  81. <!-- <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view> -->
  82. <!-- <view class="progress-cus">
  83. <view class="color" :style="'width:'+ item.zxl||0 + '%'" ></view>
  84. </view> -->
  85. <view class="progress-cus">
  86. <view class="color1" v-if="index==0" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
  87. <view class="color2" v-if="index==1" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
  88. <view class="color3" v-if="index==2" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
  89. <view class="color4" v-if="index>2" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
  90. </view>
  91. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  92. </view>
  93. </view>
  94. <view v-if="newlisttabinfo3.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  95. 暂无数据
  96. </view>
  97. </view>
  98. </view>
  99. <view class="single">
  100. <view class="title">
  101. <view class="title1" style="flex: 1;">录音时长(TOP10)</view>
  102. </view>
  103. <view class="hejisan">
  104. <view class="sanbox1" >
  105. <view class="text1-2">{{newlisttabinfo2.total}}</view>
  106. <view class="text1-1">合计时长/分钟</view>
  107. </view>
  108. <view class="sanbox1">
  109. <view class="text1-2">{{newlisttabinfo2.count}}</view>
  110. <view class="text1-1">顾问人数</view>
  111. </view>
  112. <view class="sanbox1" >
  113. <view class="text1-2">{{newlisttabinfo2.avg}}</view>
  114. <view class="text1-1">人均录音时长/分钟</view>
  115. </view>
  116. </view>
  117. <view class="jindu" style="margin-top: 20rpx;">
  118. <view v-if="newlisttabinfo2.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo2.result" :key="index">
  119. <view class="jindu-boxche">
  120. <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
  121. <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
  122. <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
  123. <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
  124. <view class="sort-number" v-if="index>2">{{index+1}}</view>
  125. {{item.name.substring(0,4)}}</view>
  126. <view class="progress-cus">
  127. <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
  128. <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
  129. <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
  130. <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
  131. </view>
  132. <view class="jindu-zxl u-line-1">{{item.zxl==null?0:item.zxl}}分钟</view>
  133. </view>
  134. </view>
  135. <view v-if="newlisttabinfo2.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  136. 暂无数据
  137. </view>
  138. </view>
  139. </view>
  140. <view class="single">
  141. <view class="title">
  142. <view class="title1" style="flex: 1;">违禁次数排名(TOP10)</view>
  143. </view>
  144. <view class="hejisan">
  145. <view class="sanbox1">
  146. <view class="text1-2">{{newlisttabinfo4.total}}</view>
  147. <view class="text1-1">合计次数</view>
  148. </view>
  149. <view class="sanbox1">
  150. <view class="text1-2">{{newlisttabinfo4.count}}人</view>
  151. <view class="text1-1">顾问人数</view>
  152. </view>
  153. <view class="sanbox1">
  154. <view class="text1-2">{{newlisttabinfo4.avg}}</view>
  155. <view class="text1-1">人均违禁次数</view>
  156. </view>
  157. </view>
  158. <view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
  159. <view v-if="newlisttabinfo4.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo4.result" :key="index">
  160. <view class="jindu-boxche">
  161. <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
  162. <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
  163. <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
  164. <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
  165. <view class="sort-number" v-if="index>2">{{index+1}}</view>
  166. {{item.name.substring(0,4)}}</view>
  167. <view class="progress-cus">
  168. <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
  169. <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,4)+ '%'" ></view>
  170. <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,4) + '%'" ></view>
  171. <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,4)+ '%'" ></view>
  172. </view>
  173. <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
  174. </view>
  175. </view>
  176. <view v-if="newlisttabinfo4.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  177. 暂无数据
  178. </view>
  179. </view>
  180. </view>
  181. <view class="single">
  182. <view class="title">
  183. <view class="title1" style="flex: 1;">接待未标顾问排名(TOP10)</view>
  184. </view>
  185. <view class="hejisan">
  186. <view class="sanbox1">
  187. <view class="text1-2">{{newlisttabinfo5.total||0}}</view>
  188. <view class="text1-1">合计</view>
  189. </view>
  190. <view class="sanbox1">
  191. <view class="text1-2">{{newlisttabinfo5.count||0}}人</view>
  192. <view class="text1-1">顾问</view>
  193. </view>
  194. <view class="sanbox1">
  195. <view class="text1-2">{{newlisttabinfo5.avg||0}}</view>
  196. <view class="text1-1">均值</view>
  197. </view>
  198. </view>
  199. <view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
  200. <view v-if="newlisttabinfo5.result.length!=0" class="jindu-box"
  201. v-for="(item,index) in newlisttabinfo5.result" :key="index">
  202. <view class="jindu-boxche" >
  203. <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
  204. <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
  205. <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
  206. <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
  207. <view class="sort-number" v-if="index>2">{{index+1}}</view>
  208. {{item.name.substring(0,4)}}</view>
  209. <view class="progress-cus">
  210. <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
  211. <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,5)+ '%'" ></view>
  212. <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,5) + '%'" ></view>
  213. <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,5)+ '%'" ></view>
  214. </view>
  215. <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
  216. </view>
  217. </view>
  218. <view v-if="newlisttabinfo5.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  219. 暂无数据
  220. </view>
  221. </view>
  222. </view>
  223. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  224. <!-- 加载组件 -->
  225. <u-loadings v-model="LOADING"></u-loadings>
  226. </view>
  227. </template>
  228. <script>
  229. var app = getApp();
  230. var util = require("../../../utils/util.js");
  231. var config = require("../../../config");
  232. export default {
  233. data() {
  234. return {
  235. activeTotal: 4,
  236. totalTimeShow: false,
  237. // 项目id
  238. houseId: '',
  239. lastEndDate: '',
  240. lastStartDate: '',
  241. newlisttabinfo1: {
  242. avg: '',
  243. count: '',
  244. total: '',
  245. result: [],
  246. },
  247. newlisttabinfo2: {
  248. avg: '',
  249. count: '',
  250. total: '',
  251. result: [],
  252. },
  253. newlisttabinfo3: {
  254. avg: '',
  255. count: '',
  256. total: '',
  257. result: [],
  258. },
  259. newlisttabinfo4: {
  260. avg: '',
  261. count: '',
  262. total: '',
  263. result: [],
  264. },
  265. newlisttabinfo5: {
  266. avg: '',
  267. count: '',
  268. total: '',
  269. result: [],
  270. },
  271. };
  272. },
  273. onLoad() {
  274. this.LOADING = true
  275. // 获取项目id
  276. this.houseId = uni.getStorageSync('buildingID').id;
  277. this.init()
  278. },
  279. computed: {
  280. },
  281. onPullDownRefresh(){
  282. this.init()
  283. setTimeout(function() {
  284. uni.stopPullDownRefresh();
  285. }, 1000);
  286. },
  287. methods: {
  288. getPercent(num,type) {
  289. if(this.newlisttabinfo1.result&&this.newlisttabinfo1.result.length&&type==1){
  290. console.log(this.newlisttabinfo1.result)
  291. let index0 = this.newlisttabinfo1.result[0]
  292. let percent = num/(index0.zxl) * 100
  293. // console.log(index0.zxl)
  294. // console.log(index0)
  295. // console.log('num',num)
  296. // console.log(percent)
  297. // console.log(percent.toFixed(2))
  298. return percent.toFixed(2)
  299. }else if(this.newlisttabinfo2.result&&this.newlisttabinfo2.result.length&&type==2){
  300. let index0 = this.newlisttabinfo2.result[0]
  301. let percent = num/(index0.zxl) * 100
  302. return percent.toFixed(2)
  303. }else if(this.newlisttabinfo4.result&&this.newlisttabinfo4.result.length&&type==4){
  304. let index0 = this.newlisttabinfo4.result[0]
  305. let percent = num/(index0.zxl) * 100
  306. return percent.toFixed(2)
  307. }else if(this.newlisttabinfo5.result&&this.newlisttabinfo5.result.length&&type==5){
  308. let index0 = this.newlisttabinfo5.result[0]
  309. let percent = num/(index0.zxl) * 100
  310. return percent.toFixed(2)
  311. }else{
  312. return 0
  313. }
  314. },
  315. getPercent1(num){
  316. console.log(num)
  317. return num||0
  318. },
  319. init(){
  320. this.newlisttabinfo1={
  321. avg:'',
  322. count:'',
  323. total:'',
  324. result:[],
  325. },
  326. this.newlisttabinfo2={
  327. avg:'',
  328. count:'',
  329. total:'',
  330. result:[],
  331. },
  332. this.newlisttabinfo3={
  333. avg:'',
  334. count:'',
  335. total:'',
  336. result:[],
  337. },
  338. this.newlisttabinfo4={
  339. avg:'',
  340. count:'',
  341. total:'',
  342. result:[],
  343. }
  344. this.newlisttabinfo2 = {
  345. avg: '',
  346. count: '',
  347. total: '',
  348. result: [],
  349. }
  350. this.newlisttabinfo3 = {
  351. avg: '',
  352. count: '',
  353. total: '',
  354. result: [],
  355. }
  356. this.newlisttabinfo4 = {
  357. avg: '',
  358. count: '',
  359. total: '',
  360. result: [],
  361. }
  362. this.newlisttabinfo5 = {
  363. avg: '',
  364. count: '',
  365. total: '',
  366. result: [],
  367. }
  368. var activeTotal = 0;
  369. if (this.activeTotal == 3) {
  370. activeTotal = null;
  371. } else {
  372. activeTotal = this.activeTotal;
  373. this.lastEndDate = '';
  374. this.lastStartDate = '';
  375. }
  376. var promse = {
  377. timeType: activeTotal,
  378. lastStartDate: this.lastStartDate,
  379. lastEndDate: this.lastEndDate,
  380. houseId: this.houseId
  381. }
  382. this.staffStatisticsReceptionTop10(promse)
  383. this.staffStatisticsRecordingTimTop10(promse)
  384. this.staffStatisticsExecutionRateTop10(promse)
  385. this.staffStatisticsProhibitedTop10(promse)
  386. this.staffStatisticsUnlabeledTop10(promse)
  387. },
  388. //接待量排名
  389. staffStatisticsReceptionTop10(promse) {
  390. this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10', promse).then(res => {
  391. res.result.forEach(item => {
  392. item.zxl = item.data
  393. item.name = item.accountName
  394. })
  395. res.result = this.dealData(res.result)
  396. this.newlisttabinfo1 = res;
  397. })
  398. },
  399. //录音时长
  400. staffStatisticsRecordingTimTop10(promse) {
  401. this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10', promse).then(res => {
  402. res.result.forEach(item => {
  403. item.zxl = item.data
  404. item.name = item.accountName
  405. })
  406. res.result = this.dealData(res.result)
  407. this.newlisttabinfo2 = res;
  408. })
  409. },
  410. //销讲
  411. staffStatisticsExecutionRateTop10(promse) {
  412. this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10', promse).then(res => {
  413. res.result.forEach(item => {
  414. item.zxl = item.data;
  415. item.zxl1 = item.data;
  416. item.name = item.accountName
  417. })
  418. this.newlisttabinfo3 = res;
  419. })
  420. },
  421. //j禁忌
  422. staffStatisticsProhibitedTop10(promse) {
  423. this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10', promse).then(res => {
  424. res.result.forEach(item => {
  425. item.zxl = item.data
  426. item.name = item.accountName
  427. })
  428. res.result = this.dealData(res.result)
  429. this.newlisttabinfo4 = res;
  430. })
  431. },
  432. //未标记客户数量排名,
  433. staffStatisticsUnlabeledTop10(promse) {
  434. this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
  435. this.LOADING = false
  436. res.result.forEach(item => {
  437. item.zxl = item.tagCustomer
  438. item.name = item.accountName
  439. })
  440. res.result = this.dealData(res.result)
  441. this.newlisttabinfo5 = res;
  442. }).catch(e => {
  443. this.LOADING = false
  444. })
  445. },
  446. //自定义时间
  447. totalTimeChange(e) {
  448. console.log(e.startDate, e.endDate)
  449. this.activeTotal = 3;
  450. this.lastEndDate = e.endDate
  451. this.lastStartDate = e.startDate
  452. this.init()
  453. },
  454. //时间切换
  455. tabtimetap(index) {
  456. this.activeTotal = index;
  457. if (index == 3) {
  458. this.totalTimeShow = true;
  459. } else {
  460. this.lastEndDate='';
  461. this.lastStartDate='';
  462. this.init()
  463. }
  464. },
  465. // 定义一个公共方法对数据进行处理
  466. dealData(arr) {
  467. // 获取最大值
  468. let num = Math.max.apply(Math, arr.map(function(o) {
  469. return o.zxl
  470. })) //结果:3
  471. // console.log(num)
  472. // if(num>100){
  473. // // 获取最大值的下标
  474. // // let idx=arr.findIndex(item=>item.zxl==num)
  475. // // console.log(idx,123)
  476. // arr.map(item=>{
  477. // item.zxl1=Math.floor(item.zxl/num*100)
  478. // })
  479. // // console.log(arr)
  480. // return arr
  481. // }else{
  482. // arr.map(item=>{
  483. // item.zxl1=item.zxl
  484. // })
  485. // return arr
  486. // }
  487. arr.map(item => {
  488. item.zxl1 = Math.floor(item.zxl / num * 100)
  489. })
  490. return arr
  491. },
  492. }
  493. };
  494. </script>
  495. <style lang="scss" scoped>
  496. .box {
  497. width: 100%;
  498. height: 100%;
  499. background: #FAFAFA;
  500. }
  501. .single{
  502. padding-bottom: 20rpx;
  503. margin-top: 20rpx;
  504. }
  505. .boxtittab {
  506. position: sticky;
  507. top: var(--window-top);
  508. z-index: 999;
  509. }
  510. .hejisan {
  511. width: 92%;
  512. margin: 0 auto;
  513. display: flex;
  514. padding-top: 20rpx;
  515. padding-bottom:20rpx;
  516. .sanbox1{
  517. flex: 1;
  518. display: flex;
  519. flex-direction: column;
  520. justify-content: center;
  521. align-items: center;
  522. position: relative;
  523. &::after{
  524. position: absolute;
  525. content: '';
  526. width: 1rpx;
  527. height: 86rpx;
  528. background: #E0E0E0;
  529. right: 0;
  530. top: 0;
  531. }
  532. &:last-child::after {
  533. position: absolute;
  534. content: '';
  535. width: 1rpx;
  536. height: 86rpx;
  537. right: 0;
  538. top: 0;
  539. background: #fff;
  540. }
  541. }
  542. .text1-1{
  543. font-size: 24rpx;
  544. font-family: PingFangSC-Regular, PingFang SC;
  545. font-weight: 400;
  546. color: #333333;
  547. line-height: 32rpx;
  548. }
  549. .text1-2 {
  550. color: #333333;
  551. font-size: 40rpx;
  552. line-height: 46rpx;
  553. font-family: PingFangSC-Regular, PingFang SC;
  554. margin-bottom: 10rpx;
  555. }
  556. }
  557. .jindu-name{
  558. width: 180rpx;
  559. margin-left: 15rpx;
  560. }
  561. .sort-img{
  562. width: 44rpx;
  563. height: 44rpx;
  564. margin-right: 15rpx;
  565. }
  566. .sort-number{
  567. width: 40rpx;
  568. height: 40rpx;
  569. background: #E5F0FF;
  570. border-radius: 50%;
  571. font-size: 24rpx;
  572. font-family: PingFangSC-Regular, PingFang SC;
  573. font-weight: 400;
  574. color: #333333;
  575. text-align: center;
  576. line-height: 40rpx;
  577. margin-right: 15rpx;
  578. }
  579. </style>