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

457 行
13 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: 35%;">
  25. <view class="text1-1">合计</view>
  26. <view class="text1-2">{{newlisttabinfo1.total}}</view>
  27. </view>
  28. <view class="sanbox1" style="width: 40%;">
  29. <view class="text1-1">顾问</view>
  30. <view class="text1-2">{{newlisttabinfo1.count}}</view>
  31. </view>
  32. <view class="sanbox1" style="width: 25%;">
  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: 40%;">
  62. <view class="text1-1">顾问</view>
  63. <view class="text1-2">{{newlisttabinfo3.count}}</view>
  64. </view>
  65. <view class="sanbox1" style="width: 25%;">
  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: 35%;">
  95. <view class="text1-1">合计</view>
  96. <view class="text1-2">{{newlisttabinfo2.total}}</view>
  97. </view>
  98. <view class="sanbox1" style="width: 40%;">
  99. <view class="text1-1">顾问</view>
  100. <view class="text1-2">{{newlisttabinfo2.count}}</view>
  101. </view>
  102. <view class="sanbox1" style="width: 25%;">
  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: 35%;">
  132. <view class="text1-1">合计</view>
  133. <view class="text1-2">{{newlisttabinfo4.total}}</view>
  134. </view>
  135. <view class="sanbox1" style="width: 40%;">
  136. <view class="text1-1">顾问</view>
  137. <view class="text1-2">{{newlisttabinfo4.count}}</view>
  138. </view>
  139. <view class="sanbox1" style="width: 25%;">
  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: 35%;">
  169. <view class="text1-1">合计</view>
  170. <view class="text1-2">{{newlisttabinfo5.total}}</view>
  171. </view>
  172. <view class="sanbox1" style="width: 40%;">
  173. <view class="text1-1">顾问</view>
  174. <view class="text1-2">{{newlisttabinfo5.count}}</view>
  175. </view>
  176. <view class="sanbox1" style="width: 25%;">
  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. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  199. </view>
  200. </template>
  201. <script>
  202. var app = getApp();
  203. var util = require("../../../utils/util.js");
  204. var config = require("../../../config");
  205. export default {
  206. data() {
  207. return {
  208. activeTotal: 4,
  209. totalTimeShow: false,
  210. // 项目id
  211. houseId: '',
  212. lastEndDate: '',
  213. lastStartDate: '',
  214. newlisttabinfo1: {
  215. avg: '',
  216. count: '',
  217. total: '',
  218. result: [],
  219. },
  220. newlisttabinfo2: {
  221. avg: '',
  222. count: '',
  223. total: '',
  224. result: [],
  225. },
  226. newlisttabinfo3: {
  227. avg: '',
  228. count: '',
  229. total: '',
  230. result: [],
  231. },
  232. newlisttabinfo4: {
  233. avg: '',
  234. count: '',
  235. total: '',
  236. result: [],
  237. },
  238. newlisttabinfo5: {
  239. avg: '',
  240. count: '',
  241. total: '',
  242. result: [],
  243. },
  244. };
  245. },
  246. onLoad(option) {
  247. // 获取项目id
  248. this.houseId = uni.getStorageSync('buildingID').id;
  249. this.init()
  250. if (option.type == 1) {
  251. this.totalTimeChange({startDate: option.staTime, endDate: option.endtime})
  252. }
  253. },
  254. onPullDownRefresh() {
  255. this.init()
  256. setTimeout(function() {
  257. uni.stopPullDownRefresh();
  258. }, 1000);
  259. },
  260. methods: {
  261. init() {
  262. this.newlisttabinfo1 = {
  263. avg: '',
  264. count: '',
  265. total: '',
  266. result: [],
  267. }
  268. this.newlisttabinfo2 = {
  269. avg: '',
  270. count: '',
  271. total: '',
  272. result: [],
  273. }
  274. this.newlisttabinfo3 = {
  275. avg: '',
  276. count: '',
  277. total: '',
  278. result: [],
  279. }
  280. this.newlisttabinfo4 = {
  281. avg: '',
  282. count: '',
  283. total: '',
  284. result: [],
  285. }
  286. var activeTotal = 0;
  287. if (this.activeTotal == 3) {
  288. activeTotal = null;
  289. } else {
  290. activeTotal = this.activeTotal;
  291. this.lastEndDate = '';
  292. this.lastStartDate = '';
  293. }
  294. var promse = {
  295. timeType: activeTotal,
  296. lastStartDate: this.lastStartDate,
  297. lastEndDate: this.lastEndDate,
  298. houseId: this.houseId
  299. }
  300. this.staffStatisticsReceptionTop10(promse)
  301. this.staffStatisticsRecordingTimTop10(promse)
  302. this.staffStatisticsExecutionRateTop10(promse)
  303. this.staffStatisticsProhibitedTop10(promse)
  304. this.staffStatisticsUnlabeledTop10(promse)
  305. },
  306. //接待量排名
  307. staffStatisticsReceptionTop10(promse) {
  308. this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10', promse).then(res => {
  309. res.result.forEach(item => {
  310. item.zxl = item.data
  311. item.name = item.accountName
  312. })
  313. res.result = this.dealData(res.result)
  314. this.newlisttabinfo1 = res;
  315. })
  316. },
  317. //录音时长
  318. staffStatisticsRecordingTimTop10(promse) {
  319. this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10', promse).then(res => {
  320. res.result.forEach(item => {
  321. item.zxl = item.data
  322. item.name = item.accountName
  323. })
  324. res.result = this.dealData(res.result)
  325. this.newlisttabinfo2 = res;
  326. })
  327. },
  328. //销讲
  329. staffStatisticsExecutionRateTop10(promse) {
  330. this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10', promse).then(res => {
  331. res.result.forEach(item => {
  332. item.zxl = item.data;
  333. item.zxl1 = item.data;
  334. item.name = item.accountName
  335. })
  336. this.newlisttabinfo3 = res;
  337. })
  338. },
  339. // j禁忌
  340. staffStatisticsProhibitedTop10(promse) {
  341. this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10', promse).then(res => {
  342. res.result.forEach(item => {
  343. item.zxl = item.data
  344. item.name = item.accountName
  345. })
  346. res.result = this.dealData(res.result)
  347. this.newlisttabinfo4 = res;
  348. })
  349. },
  350. // 未标记客户数量排名
  351. staffStatisticsUnlabeledTop10(promse) {
  352. this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
  353. res.result.forEach(item => {
  354. item.zxl = item.tagCustomer
  355. item.name = item.accountName
  356. })
  357. res.result = this.dealData(res.result)
  358. this.newlisttabinfo5 = res;
  359. })
  360. },
  361. //自定义时间
  362. totalTimeChange(e) {
  363. console.log(e.startDate, e.endDate)
  364. this.activeTotal = 3;
  365. this.lastEndDate = e.endDate
  366. this.lastStartDate = e.startDate
  367. this.init()
  368. },
  369. //时间切换
  370. tabtimetap(index) {
  371. if (index == 3) {
  372. this.totalTimeShow = true;
  373. } else {
  374. this.activeTotal = index;
  375. this.lastEndDate = '';
  376. this.lastStartDate = '';
  377. this.init()
  378. }
  379. },
  380. // 定义一个公共方法对数据进行处理
  381. dealData(arr) {
  382. // 获取最大值
  383. let num = Math.max.apply(Math, arr.map(function(o) {
  384. return o.zxl
  385. })) //结果:3
  386. // console.log(num)
  387. // if(num>100){
  388. // // 获取最大值的下标
  389. // // let idx=arr.findIndex(item=>item.zxl==num)
  390. // // console.log(idx,123)
  391. // arr.map(item=>{
  392. // item.zxl1=Math.floor(item.zxl/num*100)
  393. // })
  394. // // console.log(arr)
  395. // return arr
  396. // }else{
  397. // arr.map(item=>{
  398. // item.zxl1=item.zxl
  399. // })
  400. // return arr
  401. // }
  402. arr.map(item => {
  403. item.zxl1 = Math.floor(item.zxl / num * 100)
  404. })
  405. return arr
  406. },
  407. }
  408. };
  409. </script>
  410. <style lang="scss" scoped>
  411. .box {
  412. width: 100%;
  413. height: 100%;
  414. background: #FAFAFA;
  415. padding-bottom: 60rpx;
  416. }
  417. .single {
  418. min-height: 500rpx;
  419. .jindu {
  420. height: auto;
  421. min-height: 360rpx;
  422. }
  423. }
  424. .hejisan {
  425. width: 92%;
  426. margin: 0 auto;
  427. display: flex;
  428. padding-top: 20rpx;
  429. padding-bottom: 20rpx;
  430. .text1-1 {
  431. color: #666666;
  432. }
  433. .text1-2 {
  434. color: #333333;
  435. margin-top: 10rpx;
  436. }
  437. }
  438. </style>