Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

517 Zeilen
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;" v-if="wajue"></view>
  200. <view class="single" v-if="wajue">
  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. wajue: false,
  242. activeTotal: 4,
  243. totalTimeShow: false,
  244. // 项目id
  245. houseId: '',
  246. lastEndDate: '',
  247. lastStartDate: '',
  248. newlisttabinfo1: {
  249. avg: '',
  250. count: '',
  251. total: '',
  252. result: [],
  253. },
  254. newlisttabinfo2: {
  255. avg: '',
  256. count: '',
  257. total: '',
  258. result: [],
  259. },
  260. newlisttabinfo3: {
  261. avg: '',
  262. count: '',
  263. total: '',
  264. result: [],
  265. },
  266. newlisttabinfo4: {
  267. avg: '',
  268. count: '',
  269. total: '',
  270. result: [],
  271. },
  272. newlisttabinfo5: {
  273. avg: '',
  274. count: '',
  275. total: '',
  276. result: [],
  277. },
  278. newlisttabinfo6: {
  279. avg: '',
  280. count: '',
  281. total: '',
  282. result: [],
  283. },
  284. };
  285. },
  286. onLoad(option) {
  287. // 获取项目id
  288. this.houseId = uni.getStorageSync('buildingID').id;
  289. this.init()
  290. if (option.type == 1) {
  291. this.totalTimeChange({startDate: option.staTime, endDate: option.endtime})
  292. }
  293. },
  294. onPullDownRefresh() {
  295. this.init()
  296. setTimeout(function() {
  297. uni.stopPullDownRefresh();
  298. }, 1000);
  299. },
  300. methods: {
  301. init() {
  302. this.newlisttabinfo1 = {
  303. avg: '',
  304. count: '',
  305. total: '',
  306. result: [],
  307. }
  308. this.newlisttabinfo2 = {
  309. avg: '',
  310. count: '',
  311. total: '',
  312. result: [],
  313. }
  314. this.newlisttabinfo3 = {
  315. avg: '',
  316. count: '',
  317. total: '',
  318. result: [],
  319. }
  320. this.newlisttabinfo4 = {
  321. avg: '',
  322. count: '',
  323. total: '',
  324. result: [],
  325. }
  326. this.newlisttabinfo4 = {
  327. avg: '',
  328. count: '',
  329. total: '',
  330. result: [],
  331. }
  332. var activeTotal = 0;
  333. if (this.activeTotal == 3) {
  334. activeTotal = null;
  335. } else {
  336. activeTotal = this.activeTotal;
  337. this.lastEndDate = '';
  338. this.lastStartDate = '';
  339. }
  340. var promse = {
  341. timeType: activeTotal,
  342. lastStartDate: this.lastStartDate,
  343. lastEndDate: this.lastEndDate,
  344. houseId: this.houseId
  345. }
  346. this.staffStatisticsReceptionTop10(promse)
  347. this.staffStatisticsRecordingTimTop10(promse)
  348. this.staffStatisticsExecutionRateTop10(promse)
  349. this.staffStatisticsProhibitedTop10(promse)
  350. this.staffStatisticsUnlabeledTop10(promse)
  351. this.wordlevelTop10(promse)
  352. },
  353. //接待量排名
  354. staffStatisticsReceptionTop10(promse) {
  355. this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10', promse).then(res => {
  356. res.result.forEach(item => {
  357. item.zxl = item.data
  358. item.name = item.accountName
  359. })
  360. res.result = this.dealData(res.result)
  361. this.newlisttabinfo1 = res;
  362. })
  363. },
  364. //录音时长
  365. staffStatisticsRecordingTimTop10(promse) {
  366. this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10', promse).then(res => {
  367. res.result.forEach(item => {
  368. item.zxl = item.data
  369. item.name = item.accountName
  370. })
  371. res.result = this.dealData(res.result)
  372. this.newlisttabinfo2 = res;
  373. })
  374. },
  375. //销讲
  376. staffStatisticsExecutionRateTop10(promse) {
  377. this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10', promse).then(res => {
  378. res.result.forEach(item => {
  379. item.zxl = item.data;
  380. item.zxl1 = item.data;
  381. item.name = item.accountName
  382. })
  383. this.newlisttabinfo3 = res;
  384. })
  385. },
  386. // j禁忌
  387. staffStatisticsProhibitedTop10(promse) {
  388. this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10', promse).then(res => {
  389. res.result.forEach(item => {
  390. item.zxl = item.data
  391. item.name = item.accountName
  392. })
  393. res.result = this.dealData(res.result)
  394. this.newlisttabinfo4 = res;
  395. })
  396. },
  397. // 未标记客户数量排名
  398. staffStatisticsUnlabeledTop10(promse) {
  399. this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
  400. res.result.forEach(item => {
  401. item.zxl = item.tagCustomer
  402. item.name = item.accountName
  403. })
  404. res.result = this.dealData(res.result)
  405. this.newlisttabinfo5 = res;
  406. })
  407. },
  408. // 平均需求挖掘率排名
  409. wordlevelTop10(promse) {
  410. this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
  411. res.result.forEach(item => {
  412. item.zxl = item.tagCustomer
  413. item.name = item.accountName
  414. })
  415. res.result = this.dealData(res.result)
  416. this.newlisttabinfo6 = res;
  417. })
  418. },
  419. //自定义时间
  420. totalTimeChange(e) {
  421. console.log(e.startDate, e.endDate)
  422. this.activeTotal = 3;
  423. this.lastEndDate = e.endDate
  424. this.lastStartDate = e.startDate
  425. this.init()
  426. },
  427. //时间切换
  428. tabtimetap(index) {
  429. if (index == 3) {
  430. this.totalTimeShow = true;
  431. } else {
  432. this.activeTotal = index;
  433. this.lastEndDate = '';
  434. this.lastStartDate = '';
  435. this.init()
  436. }
  437. },
  438. // 定义一个公共方法对数据进行处理
  439. dealData(arr) {
  440. // 获取最大值
  441. let num = Math.max.apply(Math, arr.map(function(o) {
  442. return o.zxl
  443. })) //结果:3
  444. // console.log(num)
  445. // if(num>100){
  446. // // 获取最大值的下标
  447. // // let idx=arr.findIndex(item=>item.zxl==num)
  448. // // console.log(idx,123)
  449. // arr.map(item=>{
  450. // item.zxl1=Math.floor(item.zxl/num*100)
  451. // })
  452. // // console.log(arr)
  453. // return arr
  454. // }else{
  455. // arr.map(item=>{
  456. // item.zxl1=item.zxl
  457. // })
  458. // return arr
  459. // }
  460. arr.map(item => {
  461. item.zxl1 = Math.floor(item.zxl / num * 100)
  462. })
  463. return arr
  464. },
  465. }
  466. };
  467. </script>
  468. <style lang="scss" scoped>
  469. .box {
  470. width: 100%;
  471. height: 100%;
  472. background: #FAFAFA;
  473. }
  474. .single {
  475. min-height: 500rpx;
  476. .jindu {
  477. height: auto;
  478. min-height: 360rpx;
  479. }
  480. }
  481. .hejisan {
  482. width: 92%;
  483. margin: 0 auto;
  484. display: flex;
  485. padding-top: 20rpx;
  486. padding-bottom: 20rpx;
  487. .sanbox1{
  488. text-align: center;
  489. }
  490. .text1-1 {
  491. color: #666666;
  492. }
  493. .text1-2 {
  494. color: #333333;
  495. margin-top: 10rpx;
  496. }
  497. }
  498. </style>