Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 

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