選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

Employeesstatistics.vue 11 KiB

3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
2年前
3年前
3年前
3年前
3年前
3年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  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. onPullDownRefresh() {
  197. this.init()
  198. setTimeout(function () {
  199. uni.stopPullDownRefresh();
  200. }, 1000);
  201. },
  202. methods: {
  203. init(){
  204. this.newlisttabinfo1={
  205. avg:'',
  206. count:'',
  207. total:'',
  208. result:[],
  209. },
  210. this.newlisttabinfo2={
  211. avg:'',
  212. count:'',
  213. total:'',
  214. result:[],
  215. },
  216. this.newlisttabinfo3={
  217. avg:'',
  218. count:'',
  219. total:'',
  220. result:[],
  221. },
  222. this.newlisttabinfo4={
  223. avg:'',
  224. count:'',
  225. total:'',
  226. result:[],
  227. }
  228. var activeTotal=0;
  229. if(this.activeTotal==3){
  230. activeTotal=null;
  231. }else{
  232. activeTotal=this.activeTotal;
  233. this.lastEndDate='';
  234. this.lastStartDate='';
  235. }
  236. var promse={
  237. timeType:activeTotal,
  238. lastStartDate:this.lastStartDate,
  239. lastEndDate:this.lastEndDate,
  240. houseId:this.houseId
  241. }
  242. this.staffStatisticsReceptionTop10(promse)
  243. this.staffStatisticsRecordingTimTop10(promse)
  244. this.staffStatisticsExecutionRateTop10(promse)
  245. this.staffStatisticsProhibitedTop10(promse)
  246. },
  247. //接待量排名
  248. staffStatisticsReceptionTop10(promse){
  249. this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10',promse).then(res=>{
  250. res.result.forEach(item=>{
  251. item.zxl=item.data
  252. item.name=item.accountName
  253. })
  254. res.result=this.dealData(res.result)
  255. this.newlisttabinfo1=res;
  256. })
  257. },
  258. //录音时长
  259. staffStatisticsRecordingTimTop10(promse){
  260. this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10',promse).then(res=>{
  261. res.result.forEach(item=>{
  262. item.zxl=item.data
  263. item.name=item.accountName
  264. })
  265. res.result=this.dealData(res.result)
  266. this.newlisttabinfo2=res;
  267. })
  268. },
  269. //销讲
  270. staffStatisticsExecutionRateTop10(promse){
  271. this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10',promse).then(res=>{
  272. res.result.forEach(item=>{
  273. item.zxl=item.data;
  274. item.zxl1=item.data;
  275. item.name=item.accountName
  276. })
  277. this.newlisttabinfo3=res;
  278. })
  279. },
  280. //j禁忌
  281. staffStatisticsProhibitedTop10(promse){
  282. this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10',promse).then(res=>{
  283. res.result.forEach(item=>{
  284. item.zxl=item.data
  285. item.name=item.accountName
  286. })
  287. res.result=this.dealData(res.result)
  288. this.newlisttabinfo4=res;
  289. })
  290. },
  291. //自定义时间
  292. totalTimeChange(e) {
  293. console.log(e.startDate, e.endDate)
  294. this.activeTotal=3;
  295. this.lastEndDate=e.endDate
  296. this.lastStartDate=e.startDate
  297. this.init()
  298. },
  299. //时间切换
  300. tabtimetap(index) {
  301. if (index == 3) {
  302. this.totalTimeShow = true;
  303. } else {
  304. this.activeTotal = index;
  305. this.lastEndDate='';
  306. this.lastStartDate='';
  307. this.init()
  308. }
  309. },
  310. // 定义一个公共方法对数据进行处理
  311. dealData(arr){
  312. // 获取最大值
  313. let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果:3
  314. // console.log(num)
  315. // if(num>100){
  316. // // 获取最大值的下标
  317. // // let idx=arr.findIndex(item=>item.zxl==num)
  318. // // console.log(idx,123)
  319. // arr.map(item=>{
  320. // item.zxl1=Math.floor(item.zxl/num*100)
  321. // })
  322. // // console.log(arr)
  323. // return arr
  324. // }else{
  325. // arr.map(item=>{
  326. // item.zxl1=item.zxl
  327. // })
  328. // return arr
  329. // }
  330. arr.map(item=>{
  331. item.zxl1=Math.floor(item.zxl/num*100)
  332. })
  333. return arr
  334. },
  335. }
  336. };
  337. </script>
  338. <style lang="scss" scoped>
  339. .box {
  340. width: 100%;
  341. height: 100%;
  342. background: #FAFAFA;
  343. padding-bottom: 60rpx;
  344. }
  345. .hejisan{
  346. width: 92%;
  347. margin: 0 auto;
  348. display: flex;
  349. padding-top: 20rpx;
  350. padding-bottom:20rpx;
  351. .text1-1{
  352. color: #666666;
  353. }
  354. .text1-2{
  355. color: #333333;
  356. margin-top: 10rpx;
  357. }
  358. }
  359. </style>