You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

619 line
18 KiB

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