Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

Employeesstatistics.vue 11 KiB

před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
před 3 roky
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  18. <view class="single">
  19. <view class="title">
  20. <view class="title1" style="flex: 1;">接待量排名(TOP10)</view>
  21. </view>
  22. <view class="hejisan">
  23. <view class="sanbox1" style="width: 35%;">
  24. <view class="text1-1">合计</view>
  25. <view class="text1-2">{{newlisttabinfo1.total}}</view>
  26. </view>
  27. <view class="sanbox1" style="width: 40%;">
  28. <view class="text1-1">顾问</view>
  29. <view class="text1-2">{{newlisttabinfo1.count}}</view>
  30. </view>
  31. <view class="sanbox1" style="width: 25%;">
  32. <view class="text1-1">人均接待量</view>
  33. <view class="text1-2">{{newlisttabinfo1.avg}}</view>
  34. </view>
  35. </view>
  36. <view class="jindu" style="height: 360rpx;overflow: auto;">
  37. <view v-if="newlisttabinfo1.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo1.result" :key="index">
  38. <view class="jindu-boxche">
  39. <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view>
  40. <view style="width: 440rpx;margin-left: 10rpx;">
  41. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  42. </view>
  43. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  44. </view>
  45. </view>
  46. <view v-if="newlisttabinfo1.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  47. 暂无数据
  48. </view>
  49. </view>
  50. </view>
  51. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  52. <view class="single">
  53. <view class="title">
  54. <view class="title1" style="flex: 1;">销讲执行率排行(TOP10)</view>
  55. </view>
  56. <view class="hejisan">
  57. <view class="sanbox1" style="width: 40%;">
  58. <view class="text1-1">顾问</view>
  59. <view class="text1-2">{{newlisttabinfo3.count}}</view>
  60. </view>
  61. <view class="sanbox1" style="width: 25%;">
  62. <view class="text1-1">人均执行率</view>
  63. <view class="text1-2">{{newlisttabinfo3.avg}}</view>
  64. </view>
  65. </view>
  66. <view class="jindu" style="height: 360rpx;overflow: auto;">
  67. <view v-if="newlisttabinfo3.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo3.result" :key="index">
  68. <view class="jindu-boxche">
  69. <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view>
  70. <view style="width: 440rpx;margin-left: 10rpx;">
  71. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  72. </view>
  73. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  74. </view>
  75. </view>
  76. <view v-if="newlisttabinfo3.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  77. 暂无数据
  78. </view>
  79. </view>
  80. </view>
  81. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  82. <view class="single">
  83. <view class="title">
  84. <view class="title1" style="flex: 1;">录音时长(TOP10)</view>
  85. </view>
  86. <view class="hejisan">
  87. <view class="sanbox1" style="width: 35%;">
  88. <view class="text1-1">合计</view>
  89. <view class="text1-2">{{newlisttabinfo2.total}}</view>
  90. </view>
  91. <view class="sanbox1" style="width: 40%;">
  92. <view class="text1-1">顾问</view>
  93. <view class="text1-2">{{newlisttabinfo2.count}}</view>
  94. </view>
  95. <view class="sanbox1" style="width: 25%;">
  96. <view class="text1-1">人均录音时长</view>
  97. <view class="text1-2">{{newlisttabinfo2.avg}}</view>
  98. </view>
  99. </view>
  100. <view class="jindu" style="height: 360rpx;overflow: auto;">
  101. <view v-if="newlisttabinfo2.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo2.result" :key="index">
  102. <view class="jindu-boxche">
  103. <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view>
  104. <view style="width: 440rpx;margin-left: 10rpx;">
  105. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  106. </view>
  107. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  108. </view>
  109. </view>
  110. <view v-if="newlisttabinfo2.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  111. 暂无数据
  112. </view>
  113. </view>
  114. </view>
  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: 35%;">
  122. <view class="text1-1">合计</view>
  123. <view class="text1-2">{{newlisttabinfo4.total}}</view>
  124. </view>
  125. <view class="sanbox1" style="width: 40%;">
  126. <view class="text1-1">顾问</view>
  127. <view class="text1-2">{{newlisttabinfo4.count}}</view>
  128. </view>
  129. <view class="sanbox1" style="width: 25%;">
  130. <view class="text1-1">人均违禁次数</view>
  131. <view class="text1-2">{{newlisttabinfo4.avg}}</view>
  132. </view>
  133. </view>
  134. <view class="jindu" style="height: 360rpx;overflow: auto;">
  135. <view v-if="newlisttabinfo4.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo4.result" :key="index">
  136. <view class="jindu-boxche">
  137. <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view>
  138. <view style="width: 440rpx;margin-left: 10rpx;">
  139. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  140. </view>
  141. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  142. </view>
  143. </view>
  144. <view v-if="newlisttabinfo4.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
  145. 暂无数据
  146. </view>
  147. </view>
  148. </view>
  149. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  150. </view>
  151. </template>
  152. <script>
  153. var app = getApp();
  154. var util = require("../../../utils/util.js");
  155. var config = require("../../../config");
  156. export default {
  157. data() {
  158. return {
  159. activeTotal: 4,
  160. totalTimeShow: false,
  161. // 楼盘id
  162. houseId:'',
  163. lastEndDate:'',
  164. lastStartDate:'',
  165. newlisttabinfo1:{
  166. avg:'',
  167. count:'',
  168. total:'',
  169. result:[],
  170. },
  171. newlisttabinfo2:{
  172. avg:'',
  173. count:'',
  174. total:'',
  175. result:[],
  176. },
  177. newlisttabinfo3:{
  178. avg:'',
  179. count:'',
  180. total:'',
  181. result:[],
  182. },
  183. newlisttabinfo4:{
  184. avg:'',
  185. count:'',
  186. total:'',
  187. result:[],
  188. },
  189. };
  190. },
  191. onLoad() {
  192. // 获取楼盘id
  193. this.houseId = uni.getStorageSync('buildingID').id;
  194. this.init()
  195. },
  196. methods: {
  197. init(){
  198. this.newlisttabinfo1={
  199. avg:'',
  200. count:'',
  201. total:'',
  202. result:[],
  203. },
  204. this.newlisttabinfo2={
  205. avg:'',
  206. count:'',
  207. total:'',
  208. result:[],
  209. },
  210. this.newlisttabinfo3={
  211. avg:'',
  212. count:'',
  213. total:'',
  214. result:[],
  215. },
  216. this.newlisttabinfo4={
  217. avg:'',
  218. count:'',
  219. total:'',
  220. result:[],
  221. }
  222. var activeTotal=0;
  223. if(this.activeTotal==3){
  224. activeTotal=null;
  225. }else{
  226. activeTotal=this.activeTotal;
  227. this.lastEndDate='';
  228. this.lastStartDate='';
  229. }
  230. var promse={
  231. timeType:activeTotal,
  232. lastStartDate:this.lastStartDate,
  233. lastEndDate:this.lastEndDate,
  234. houseId:this.houseId
  235. }
  236. this.staffStatisticsReceptionTop10(promse)
  237. this.staffStatisticsRecordingTimTop10(promse)
  238. this.staffStatisticsExecutionRateTop10(promse)
  239. this.staffStatisticsProhibitedTop10(promse)
  240. },
  241. //接待量排名
  242. staffStatisticsReceptionTop10(promse){
  243. this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10',promse).then(res=>{
  244. res.result.forEach(item=>{
  245. item.zxl=item.data
  246. item.name=item.accountName
  247. })
  248. res.result=this.dealData(res.result)
  249. this.newlisttabinfo1=res;
  250. })
  251. },
  252. //录音时长
  253. staffStatisticsRecordingTimTop10(promse){
  254. this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10',promse).then(res=>{
  255. res.result.forEach(item=>{
  256. item.zxl=item.data
  257. item.name=item.accountName
  258. })
  259. res.result=this.dealData(res.result)
  260. this.newlisttabinfo2=res;
  261. })
  262. },
  263. //销讲
  264. staffStatisticsExecutionRateTop10(promse){
  265. this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10',promse).then(res=>{
  266. res.result.forEach(item=>{
  267. item.zxl=item.data;
  268. item.zxl1=item.data;
  269. item.name=item.accountName
  270. })
  271. this.newlisttabinfo3=res;
  272. })
  273. },
  274. //j禁忌
  275. staffStatisticsProhibitedTop10(promse){
  276. this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10',promse).then(res=>{
  277. res.result.forEach(item=>{
  278. item.zxl=item.data
  279. item.name=item.accountName
  280. })
  281. res.result=this.dealData(res.result)
  282. this.newlisttabinfo4=res;
  283. })
  284. },
  285. //自定义时间
  286. totalTimeChange(e) {
  287. console.log(e.startDate, e.endDate)
  288. this.activeTotal=3;
  289. this.lastEndDate=e.endDate
  290. this.lastStartDate=e.startDate
  291. this.init()
  292. },
  293. //时间切换
  294. tabtimetap(index) {
  295. if (index == 3) {
  296. this.totalTimeShow = true;
  297. } else {
  298. this.activeTotal = index;
  299. this.lastEndDate='';
  300. this.lastStartDate='';
  301. this.init()
  302. }
  303. },
  304. // 定义一个公共方法对数据进行处理
  305. dealData(arr){
  306. // 获取最大值
  307. let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果:3
  308. // console.log(num)
  309. // if(num>100){
  310. // // 获取最大值的下标
  311. // // let idx=arr.findIndex(item=>item.zxl==num)
  312. // // console.log(idx,123)
  313. // arr.map(item=>{
  314. // item.zxl1=Math.floor(item.zxl/num*100)
  315. // })
  316. // // console.log(arr)
  317. // return arr
  318. // }else{
  319. // arr.map(item=>{
  320. // item.zxl1=item.zxl
  321. // })
  322. // return arr
  323. // }
  324. arr.map(item=>{
  325. item.zxl1=Math.floor(item.zxl/num*100)
  326. })
  327. return arr
  328. },
  329. }
  330. };
  331. </script>
  332. <style lang="scss" scoped>
  333. .box {
  334. width: 100%;
  335. height: 100%;
  336. background: #FAFAFA;
  337. padding-bottom: 60rpx;
  338. }
  339. .hejisan{
  340. width: 92%;
  341. margin: 0 auto;
  342. display: flex;
  343. padding-top: 20rpx;
  344. padding-bottom:20rpx;
  345. .text1-1{
  346. color: #666666;
  347. }
  348. .text1-2{
  349. color: #333333;
  350. margin-top: 10rpx;
  351. }
  352. }
  353. </style>