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

1106 行
32 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. <view class="timepick">
  18. <view class="timepicktime" @click="chiocStaff(0)">
  19. <view>{{staff1.label}}</view>
  20. <view>
  21. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  22. </view>
  23. </view>
  24. <view class="timepickpick" v-if="staff1.value">
  25. <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
  26. <image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;" src="../../../static/images/xuanzhong.png" mode=""></image>
  27. </view>
  28. <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
  29. </view>
  30. <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
  31. <view>{{staff2.label}}</view>
  32. <view>
  33. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  34. </view>
  35. </view>
  36. </view>
  37. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  38. <view class="single">
  39. <view class="title">
  40. <view class="title1" style="flex: 1;">接待量</view>
  41. <view class="title3" style="flex: 1;">
  42. <view class="title3-box" @click="tabtimetap1(0)">
  43. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 0 }">排名</view>
  44. </view>
  45. <view class="title3-box" @click="tabtimetap1(1)">
  46. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 1 }">趋势</view>
  47. </view>
  48. <!-- <view class="title3-box">
  49. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 2 }">表格</view>
  50. </view> -->
  51. </view>
  52. </view>
  53. <view class="hejibox">
  54. <view class="heji">{{!staff1.value?'团队总数':staff1.label}}:{{newTeam1||0}}</view>
  55. <view class="heji">{{!staff2.value?'团队平均':staff2.label}}:{{newAvg1||0}}</view>
  56. </view>
  57. <view class="" v-if=" eharTab.active1 == 1 ">
  58. <view class="danwei">接待量</view>
  59. <view class="uchaserbox" style="height: 70vh;">
  60. <qiun-data-charts
  61. type="line"
  62. :chartData="lineOptsect1"
  63. background="none"
  64. :ontouch="true"
  65. canvasId="wangxiaohuaerlingeryilingwuyibbb"
  66. :canvas2d="true"
  67. />
  68. </view>
  69. </view>
  70. <view class="jindu" v-if=" eharTab.active1 == 0 ">
  71. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  72. <view class="jindu-boxche">
  73. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  74. <view style="width: 440rpx;margin-left: 10rpx;">
  75. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  76. </view>
  77. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  83. <view class="single">
  84. <view class="title">
  85. <view class="title1" style="flex: 1;">接待时长</view>
  86. <view class="title3" style="flex: 1;">
  87. <view class="title3-box" @click="tabtimetap2(0)">
  88. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 0 }">排名</view>
  89. </view>
  90. <view class="title3-box" @click="tabtimetap2(1)">
  91. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 1 }">趋势</view>
  92. </view>
  93. <!-- <view class="title3-box">
  94. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 2 }">表格</view>
  95. </view> -->
  96. </view>
  97. </view>
  98. <view class="hejibox">
  99. <view class="heji">{{!staff1.value?'团队总数':staff1.label}}:{{newTeam2||0}}</view>
  100. <view class="heji">{{!staff2.value?'团队平均':staff2.label}}:{{newAvg2||0}}</view>
  101. </view>
  102. <view class="" v-if=" eharTab.active2 == 1 ">
  103. <view class="danwei">录音时长</view>
  104. <view class="uchaserbox">
  105. <qiun-data-charts
  106. type="line"
  107. :chartData="lineOptsect2"
  108. background="none"
  109. :ontouch="true"
  110. canvasId="wangxiaohuaerlingeryilingwuyibb"
  111. :canvas2d="true"
  112. />
  113. </view>
  114. </view>
  115. <view class="jindu" v-if=" eharTab.active2 == 0 ">
  116. <view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
  117. <view class="jindu-boxche">
  118. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  119. <view style="width: 440rpx;margin-left: 10rpx;">
  120. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  121. </view>
  122. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  128. <view class="single">
  129. <view class="title">
  130. <view class="title1" style="flex: 1;">销讲执行率</view>
  131. <view class="title3" style="flex: 1;">
  132. <view class="title3-box" @click="tabtimetap3(0)">
  133. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 0 }">排名</view>
  134. </view>
  135. <view class="title3-box" @click="tabtimetap3(1)">
  136. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 1 }">趋势</view>
  137. </view>
  138. <!-- <view class="title3-box">
  139. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 2 }">表格</view>
  140. </view> -->
  141. </view>
  142. </view>
  143. <!-- <view class="hejibox">
  144. <view class="heji">{{!staff1.value?'团队总数':staff1.label}}:{{newTeam3||0}}</view>
  145. <view class="heji">{{!staff2.value?'团队平均':staff2.label}}:{{newAvg3||0}}</view>
  146. </view> -->
  147. <view class="" v-if=" eharTab.active3 == 1 ">
  148. <view class="danwei">执行率</view>
  149. <view class="uchaserbox">
  150. <qiun-data-charts
  151. type="line"
  152. :chartData="lineOptsect3"
  153. background="none"
  154. :ontouch="true"
  155. canvasId="wangxiaohuaerlingeryilingwuyib"
  156. :canvas2d="true"
  157. />
  158. </view>
  159. </view>
  160. <view class="jindu" v-if=" eharTab.active3 == 0 ">
  161. <view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
  162. <view class="jindu-boxche">
  163. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  164. <view style="width: 440rpx;margin-left: 10rpx;">
  165. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
  166. </view>
  167. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  168. </view>
  169. </view>
  170. </view>
  171. </view>
  172. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  173. <!-- <view class="single">
  174. <view class="title">
  175. <view class="title1" style="flex: 1;">顾问排名(TOP10)</view>
  176. <view class="title3" style="flex: 1;">
  177. <view class="title3-box">
  178. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  179. </view>
  180. <view class="title3-box">
  181. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  182. </view>
  183. </view>
  184. </view>
  185. <view class="hejibox">
  186. <view class="heji">合计:50</view>
  187. <view class="heji">均值:25</view>
  188. </view>
  189. <view class="jindu">
  190. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  191. <view class="jindu-boxche">
  192. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  193. <view style="width: 440rpx;margin-left: 10rpx;">
  194. <u-line-progress height="24" :show-percent="false" active-color="#9B6BDF" :percent="item.zxl"></u-line-progress>
  195. </view>
  196. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  197. </view>
  198. </view>
  199. </view>
  200. </view> -->
  201. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  202. <view class="single">
  203. <view class="title" style="padding-right: 30rpx;">
  204. <view class="title1" style="flex: 1;">销讲能力</view>
  205. <view class="title2" style="flex: 1;justify-content: flex-end;" @click="goTeam">
  206. <view class="title2-che">团队
  207. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  208. </view>
  209. </view>
  210. </view>
  211. <view class="uchaserbox uchaserboxs">
  212. <qiun-data-charts
  213. type="radar"
  214. :opts="opts"
  215. :chartData="chartData1"
  216. :canvas2d="true"
  217. canvasId="wangxiaohuaerlingeryilingwuyib88"
  218. background="none"
  219. />
  220. </view>
  221. </view>
  222. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  223. <!-- <view class="single">
  224. <view class="title">
  225. <view class="title1" style="flex: 1;">禁忌执行率</view>
  226. <view class="title3" style="flex: 1;">
  227. <view class="title3-box" @click="tabtimetap4(0)">
  228. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active4 == 0 }">排名</view>
  229. </view>
  230. <view class="title3-box" @click="tabtimetap4(1)">
  231. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active4 == 1 }">趋势</view>
  232. </view>
  233. <view class="title3-box">
  234. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 2 }">表格</view>
  235. </view>
  236. </view>
  237. </view>
  238. <view class="hejibox">
  239. <view class="heji">{{!staff1.value?'团队':staff1.label}}:{{newTeam4||0}}</view>
  240. <view class="heji">{{!staff2.value?'均值':staff2.label}}:{{newAvg4||0}}</view>
  241. </view>
  242. <view class="" v-if=" eharTab.active4 == 1 ">
  243. <view class="danwei">来访(人)</view>
  244. <view class="uchaserbox">
  245. <qiun-data-charts
  246. type="line"
  247. :chartData="lineOptsect4"
  248. background="none"
  249. :ontouch="true"
  250. canvasId="wangxiaohuaerlingeryilingwuyi"
  251. :canvas2d="true"
  252. />
  253. </view>
  254. </view>
  255. <view class="jindu" v-if=" eharTab.active4 == 0 ">
  256. <view class="jindu-box" v-for="(item,index) in newlisttabinfo4" :key="index">
  257. <view class="jindu-boxche">
  258. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  259. <view style="width: 440rpx;margin-left: 10rpx;">
  260. <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl"></u-line-progress>
  261. </view>
  262. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  263. </view>
  264. </view>
  265. </view>
  266. </view> -->
  267. <!-- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> -->
  268. <!-- <view class="single">
  269. <view class="title" style="padding-right: 30rpx;">
  270. <view class="title1" style="flex: 1;">违禁能力(TOP10)</view>
  271. <view class="title2" style="flex: 1;justify-content: flex-end;">
  272. <view class="title2-che">楼盘
  273. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  274. </view>
  275. </view>
  276. </view>
  277. <view class="hejibox">
  278. <view class="heji">合计:50</view>
  279. <view class="heji">均值:25</view>
  280. </view>
  281. <view class="uchaserbox">
  282. <qiun-data-charts
  283. type="radar"
  284. :chartData="chartData"
  285. :canvas2d="true"
  286. canvasId="wangxiaohuaerlingeryilingwuyib89"
  287. background="none"
  288. />
  289. </view>
  290. </view> -->
  291. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  292. <!-- 选择部门的选择框 -->
  293. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'></u-select>
  294. <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'></u-select>
  295. </view>
  296. </template>
  297. <script>
  298. var app = getApp();
  299. var util = require("../../../utils/util.js");
  300. var config = require("../../../config");
  301. export default {
  302. data() {
  303. return {
  304. activeTotal: 4,
  305. eharTab:{
  306. active1: 0,
  307. active2:0,
  308. active3:0,
  309. active4:0,
  310. },
  311. deptids:'',
  312. bocindex:0,
  313. timepickpickisshow:false,
  314. totalTimeShow: false,
  315. // 楼盘id
  316. houseId:'',
  317. staffList:[],
  318. staffList1:[],
  319. staffShow:false,
  320. staffShow1:false,
  321. staff1:{
  322. value:'',
  323. label:''
  324. },
  325. staff2:{
  326. value:'',
  327. label:'平均'
  328. },
  329. lastStartDate:'',
  330. lastEndDate :'',
  331. selindex:[0],
  332. choseStaffFlag:false,
  333. lineOptsect1:{
  334. "categories": ["2016","2017","2018","2019","2020","2021"],
  335. "series": [
  336. {
  337. "name": "成交量1",
  338. "data": [35,8,25,37,4,20]
  339. },
  340. {
  341. "name": "成交量2",
  342. "data": [40,18,45,44,10,60]
  343. }
  344. ]
  345. },
  346. lineOptsect2:{
  347. "categories": ["2016","2017","2018","2019","2020","2021"],
  348. "series": [
  349. {
  350. "name": "成交量1",
  351. "data": [35,8,25,37,4,20]
  352. },
  353. {
  354. "name": "成交量2",
  355. "data": [40,18,45,44,10,60]
  356. }
  357. ]
  358. },
  359. lineOptsect3:{
  360. "categories": ["2016","2017","2018","2019","2020","2021"],
  361. "series": [
  362. {
  363. "name": "成交量1",
  364. "data": [35,8,25,37,4,20]
  365. },
  366. {
  367. "name": "成交量2",
  368. "data": [40,18,45,44,10,60]
  369. }
  370. ]
  371. },
  372. lineOptsect4:{
  373. "categories": ["2016","2017","2018","2019","2020","2021"],
  374. "series": [
  375. {
  376. "name": "成交量1",
  377. "data": [35,8,25,37,4,20]
  378. },
  379. {
  380. "name": "成交量2",
  381. "data": [40,18,45,44,10,60]
  382. }
  383. ]
  384. },
  385. newlisttabinfo1:[
  386. {name:'接待量',zxl:'10'},
  387. {name:'平均执行率',zxl:'50'},
  388. {name:'接待客户',zxl:'80'},
  389. ],
  390. newlisttabinfo2:[
  391. {name:'接待量',zxl:'10'},
  392. {name:'平均执行率',zxl:'50'},
  393. {name:'接待客户',zxl:'80'},
  394. ],
  395. newlisttabinfo3:[
  396. {name:'接待量',zxl:'10'},
  397. {name:'平均执行率',zxl:'50'},
  398. {name:'接待客户',zxl:'80'},
  399. ],
  400. newlisttabinfo4:[
  401. {name:'接待量',zxl:'10'},
  402. {name:'平均执行率',zxl:'50'},
  403. {name:'接待客户',zxl:'80'},
  404. ],
  405. newTeam1:'',
  406. newAvg1:'',
  407. newTeam2:'',
  408. newAvg2:'',
  409. newTeam3:'',
  410. newAvg3:'',
  411. newTeam4:'',
  412. newAvg4:'',
  413. chartData1:{
  414. "categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
  415. "series": [
  416. {
  417. "name": "成交量",
  418. "data": [90,110,165,195,187,172]
  419. }
  420. ]
  421. },
  422. chartData2:{
  423. "categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
  424. "series": [
  425. {
  426. "name": "成交量",
  427. "data": [90,110,165,195,187,172]
  428. }
  429. ]
  430. },
  431. opts: {
  432. fontSize: 10,
  433. extra: {
  434. radar: {
  435. max: ''
  436. }
  437. }
  438. }
  439. };
  440. },
  441. onLoad() {
  442. let that=this
  443. uni.$on('update',function(data){
  444. // console.log(data)
  445. that.deptids=data.arr.join(',')
  446. // 获取销奖能力
  447. that.getPowerList()
  448. })
  449. // 获取楼盘id
  450. this.houseId = uni.getStorageSync('buildingID').id;
  451. // this.buildingname = uni.getStorageSync('buildingID').name;
  452. // 请求接口获取所有置业顾问员工的列表
  453. this.getSectionList()
  454. },
  455. methods: {
  456. //是否对比
  457. checkboxChange(){
  458. this.timepickpickisshow=!this.timepickpickisshow;
  459. this.staff2.label='平均'
  460. this.staff2.value=''
  461. // 团队对比接待量
  462. this.receptionCountList(this.eharTab.active1,1,'/cusLvStatistics/teamAnalysisReception')
  463. // 团队对比接待时长
  464. this.receptionCountList(this.eharTab.active2,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  465. /* 销奖执行率 */
  466. this.receptionCountList(this.eharTab.active3,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  467. // 获取销奖能力
  468. this.getPowerList()
  469. },
  470. // 获取部门列表
  471. getSectionList(){
  472. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId',{houseId:this.houseId})
  473. .then(res=>{
  474. this.staffList=[]
  475. this.staffList1=[]
  476. res.map(item=>{
  477. let obj={}
  478. obj.value=item.deptId
  479. obj.label=item.deptName
  480. this.staffList.push(obj)
  481. })
  482. this.staffList1=[...this.staffList]
  483. this.staffList.unshift({
  484. value:'',
  485. label:'全部'
  486. })
  487. this.staffList1.unshift({
  488. value:'',
  489. label:'平均'
  490. })
  491. this.staff1=this.staffList[0]
  492. // 团队对比接待量
  493. this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
  494. // 团队对比接待时长
  495. this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  496. /* 销奖执行率 */
  497. this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  498. // 获取销奖能力
  499. this.getPowerList()
  500. })
  501. },
  502. // 点击部门对比
  503. chiocStaff(idx){
  504. if(idx==0){
  505. // 当选择了第一个的时候
  506. this.choseStaffFlag=false
  507. this.staffShow=true
  508. }else{
  509. this.choseStaffFlag=true
  510. this.staffShow1=true
  511. }
  512. },
  513. //时间切换
  514. tabtimetap(index) {
  515. if (index == 3) {
  516. this.totalTimeShow = true;
  517. } else {
  518. this.activeTotal = index;
  519. this.lastEndDate=''
  520. this.lastStartDate=''
  521. // 获取数据
  522. // 团队对比接待量
  523. this.receptionCountList(this.eharTab.active1,1,'/cusLvStatistics/teamAnalysisReception')
  524. // 团队对比接待时长
  525. this.receptionCountList(this.eharTab.active2,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  526. /* 销奖执行率 */
  527. this.receptionCountList(this.eharTab.active3,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  528. // 获取销奖能力
  529. this.getPowerList()
  530. }
  531. },
  532. // 接待量
  533. tabtimetap1(idx){
  534. this.eharTab.active1=idx
  535. // 调用方法
  536. this.receptionCountList(idx,1,'/cusLvStatistics/teamAnalysisReception')
  537. },
  538. // 接待时长
  539. tabtimetap2(idx){
  540. this.eharTab.active2=idx
  541. // 调用方法
  542. this.receptionCountList(idx,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  543. },
  544. tabtimetap3(idx){
  545. this.eharTab.active3=idx
  546. // 调用方法
  547. this.receptionCountList(idx,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  548. },
  549. tabtimetap4(idx){
  550. this.eharTab.active4=idx
  551. // 调用方法
  552. // this.getRecordList()
  553. },
  554. //自定义时间
  555. totalTimeChange(e) {
  556. console.log(e.startDate, e.endDate)
  557. this.activeTotal=3;
  558. this.lastEndDate=e.endDate
  559. this.lastStartDate=e.startDate
  560. // 获取数据
  561. // 团队对比接待量
  562. this.receptionCountList(this.eharTab.active1,1,'/cusLvStatistics/teamAnalysisReception')
  563. // 团队对比接待时长
  564. this.receptionCountList(this.eharTab.active2,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  565. /* 销奖执行率 */
  566. this.receptionCountList(this.eharTab.active3,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  567. // 获取销奖能力
  568. this.getPowerList()
  569. },
  570. //指标执行率分析tab
  571. tapspagek2(index) {
  572. this.bocindex = index;
  573. },
  574. //集团对比
  575. Groupcontrast(){
  576. uni.navigateTo({
  577. url: '/pages/center/Piabodata/Groupcontrast'
  578. });
  579. },
  580. // 去选择团队
  581. goTeam(){
  582. uni.navigateTo({
  583. url:`/pages/center/Piabodata/selectTeam?ids=${this.deptids}`
  584. })
  585. },
  586. staffSelectCallback(e){
  587. if(this.choseStaffFlag){
  588. // 第二个客户
  589. // console.log(e,'第二个')
  590. this.staff2=e[0]
  591. }else{
  592. // 第一个客户
  593. // console.log(e,'第一个')
  594. // 当选择全部时
  595. if(!e.value){
  596. this.timepickpickisshow=false
  597. this.staff2.label='平均'
  598. this.staff2.value=''
  599. }
  600. this.staff1=e[0]
  601. }
  602. if(this.staff1.label==this.staff2.label){
  603. uni.showToast({
  604. title:'请勿选择重复',
  605. icon:'none'
  606. })
  607. this.staff2.label='请选择'
  608. // this.staff2.label='平均'
  609. // this.staff2.value=''
  610. return
  611. }else{
  612. // 获取数据
  613. // 团队对比接待量
  614. this.receptionCountList(this.eharTab.active1,1,'/cusLvStatistics/teamAnalysisReception')
  615. // 团队对比接待时长
  616. this.receptionCountList(this.eharTab.active2,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  617. /* 销奖执行率 */
  618. this.receptionCountList(this.eharTab.active3,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  619. // 获取销奖能力
  620. this.getPowerList()
  621. }
  622. },
  623. // 团队对比接待量
  624. // receptionCountList(idx){
  625. // this.$u.post('/cusLvStatistics/teamAnalysisReception',{
  626. // // userA:this.staff1.value,
  627. // // userB:this.staff2.value,
  628. // deptIds:[this.staff1.value,this.staff2.value].filter(item=>item).join(','),
  629. // showRank:idx,
  630. // houseId:this.houseId,
  631. // timeType:this.lastEndDate?null:this.activeTotal+'',
  632. // lastEndDate:this.lastEndDate,
  633. // lastStartDate:this.lastStartDate
  634. // })
  635. // .then(res=>{
  636. // // console.log(res)
  637. // let result=res.result
  638. // this.newTeam=res.avg[0]
  639. // this.newAvg=res.avg[1]
  640. // if(idx==0){
  641. // // 当选择的是牌名时
  642. // // 处理数据
  643. // // 先处理牌名数据,需要进行判断全部还是单个
  644. // // 当为全部时
  645. // this.newlisttabinfo=[]
  646. // // 当选择全部时
  647. // if(!this.staff1.value&&!this.staff2.value){
  648. // // console.log(1)
  649. // result[0].map(item=>{
  650. // let obj={}
  651. // obj.name=item.deptName
  652. // obj.zxl=item.receptionCount
  653. // this.newlisttabinfo.push(obj)
  654. // })
  655. // }
  656. // // 当选择只有一个时
  657. // else if(this.staff1.value&&!this.staff2.value){
  658. // // console.log(2)
  659. // result[0].map(item=>{
  660. // let obj={}
  661. // obj.name=item.deptName
  662. // obj.zxl=item.receptionCount
  663. // this.newlisttabinfo.push(obj)
  664. // })
  665. // // 判断是否显示平均
  666. // // 如果显示对比
  667. // if(this.timepickpickisshow){
  668. // result[1].map(item=>{
  669. // let obj={}
  670. // obj.name='平均'
  671. // obj.zxl=item.receptionCount
  672. // this.newlisttabinfo.push(obj)
  673. // })
  674. // }
  675. // }else{
  676. // // console.log(3)
  677. // // 当两个都选择的时候
  678. // result[0].map(item=>{
  679. // let obj={}
  680. // obj.name=item.deptName
  681. // obj.zxl=item.receptionCount
  682. // this.newlisttabinfo.push(obj)
  683. // })
  684. // result[1].map(item=>{
  685. // let obj={}
  686. // obj.name=item.deptName
  687. // obj.zxl=item.receptionCount
  688. // this.newlisttabinfo.push(obj)
  689. // })
  690. // }
  691. // }else{
  692. // // 当选择趋势时
  693. // // this.lineOptsect={
  694. // // categories:[],
  695. // // series:[]
  696. // // }
  697. // let allobj={
  698. // categories:[],
  699. // series:[]
  700. // }
  701. // // 先处理时间
  702. // // 当选择全部时
  703. // if(!this.staff1.value&&!this.staff2.value){
  704. // // console.log(1)
  705. // result.map((item,idx)=>{
  706. // let obj={}
  707. // obj.name=item[0].deptName
  708. // obj.data=[]
  709. // item.map(item1=>{
  710. // // 时间的处理
  711. // if(idx==0){
  712. // allobj.categories.push(item1.statDate.slice(5,10))
  713. // }
  714. // obj.data.push(item1.receptionCount)
  715. // })
  716. // allobj.series.push(obj)
  717. // })
  718. // }
  719. // // 当选择只有一个时
  720. // else if(this.staff1.value&&!this.staff2.value){
  721. // // console.log(2)
  722. // let obj={}
  723. // obj.data=[]
  724. // obj.name=result[0][0].deptName
  725. // result[0].map(item=>{
  726. // allobj.categories.push(item.statDate.slice(5,10))
  727. // obj.data.push(item.receptionCount)
  728. // })
  729. // allobj.series.push(obj)
  730. // // 判断是否显示平均
  731. // // 如果显示对比
  732. // if(this.timepickpickisshow){
  733. // let obj={}
  734. // obj.data=[]
  735. // obj.name='平均'
  736. // result[1].map(item=>{
  737. // obj.data.push(item.receptionCount)
  738. // })
  739. // allobj.series.push(obj)
  740. // }
  741. // }else{
  742. // // console.log(3)
  743. // // 当两个都选择的时候
  744. // let obj={}
  745. // let obj1={}
  746. // obj.data=[]
  747. // obj1.data=[]
  748. // obj.name=result[0][0].deptName
  749. // obj1.name=result[1][0].deptName
  750. // result[0].map(item=>{
  751. // allobj.categories.push(item.statDate.slice(5,10))
  752. // obj.data.push(item.receptionCount)
  753. // })
  754. // result[1].map(item=>{
  755. // obj1.data.push(item.receptionCount)
  756. // })
  757. // allobj.series.push(obj)
  758. // allobj.series.push(obj1)
  759. // }
  760. // this.lineOptsect=allobj
  761. // }
  762. // })
  763. // },
  764. // 接待时长
  765. receptionCountList(idx,index,url){
  766. this.$u.post(url,{
  767. // userA:this.staff1.value,
  768. // userB:this.staff2.value,
  769. deptIds:[this.staff1.value,this.staff2.value].filter(item=>item).join(','),
  770. showRank:idx,
  771. houseId:this.houseId,
  772. timeType:this.lastEndDate?null:this.activeTotal+'',
  773. lastEndDate:this.lastEndDate,
  774. lastStartDate:this.lastStartDate
  775. })
  776. .then(res=>{
  777. // console.log(res)
  778. let result=res.result
  779. this['newTeam'+index]=res.avg[0]
  780. this['newAvg'+index]=res.avg[1]
  781. if(idx==0){
  782. // 当选择的是牌名时
  783. // 处理数据
  784. // 先处理牌名数据,需要进行判断全部还是单个
  785. // 当为全部时
  786. this['newlisttabinfo'+index]=[]
  787. let arr=[]
  788. // 当选择全部时
  789. if(!this.staff1.value&&!this.staff2.value){
  790. // console.log(1)
  791. result[0].map(item=>{
  792. let obj={}
  793. obj.name=item.deptName
  794. obj.zxl=item.data
  795. arr.push(obj)
  796. })
  797. arr=this.dealData(arr)
  798. this['newlisttabinfo'+index]=arr
  799. }
  800. // 当选择只有一个时
  801. else if(this.staff1.value&&!this.staff2.value){
  802. // console.log(2)
  803. result[0].map(item=>{
  804. let obj={}
  805. obj.name=item.deptName
  806. obj.zxl=item.data
  807. arr.push(obj)
  808. })
  809. // 判断是否显示平均
  810. // 如果显示对比
  811. if(this.timepickpickisshow){
  812. result[1].map(item=>{
  813. let obj={}
  814. obj.name='平均'
  815. obj.zxl=item.data
  816. arr.push(obj)
  817. })
  818. }
  819. arr=this.dealData(arr)
  820. this['newlisttabinfo'+index]=arr
  821. }else{
  822. // console.log(3)
  823. // 当两个都选择的时候
  824. result[0].map(item=>{
  825. let obj={}
  826. obj.name=item.deptName
  827. obj.zxl=item.data
  828. arr.push(obj)
  829. })
  830. result[1].map(item=>{
  831. let obj={}
  832. obj.name=item.deptName
  833. obj.zxl=item.data
  834. arr.push(obj)
  835. })
  836. arr=this.dealData(arr)
  837. this['newlisttabinfo'+index]=arr
  838. }
  839. }else{
  840. // 当选择趋势时
  841. this['lineOptsect'+index]={}
  842. let allobj={
  843. categories:[],
  844. series:[]
  845. }
  846. // 先处理时间
  847. // 当选择全部时
  848. if(!this.staff1.value&&!this.staff2.value){
  849. result.map((item,idx)=>{
  850. let obj={}
  851. obj.name=item[0].deptName
  852. obj.data=[]
  853. item.map(item1=>{
  854. // 时间的处理
  855. if(idx==0){
  856. allobj.categories.push(item1.statDate.slice(5,10))
  857. }
  858. obj.data.push(item1.data)
  859. })
  860. allobj.series.push(obj)
  861. })
  862. }
  863. // 当选择只有一个时
  864. else if(this.staff1.value&&!this.staff2.value){
  865. // console.log(2)
  866. let obj={}
  867. obj.data=[]
  868. obj.name=result[0][0].deptName
  869. result[0].map(item=>{
  870. allobj.categories.push(item.statDate.slice(5,10))
  871. obj.data.push(item.data)
  872. })
  873. allobj.series.push(obj)
  874. // 判断是否显示平均
  875. // 如果显示对比
  876. if(this.timepickpickisshow){
  877. let obj={}
  878. obj.data=[]
  879. obj.name='平均'
  880. result[1].map(item=>{
  881. obj.data.push(item.data)
  882. })
  883. allobj.series.push(obj)
  884. }
  885. }else{
  886. // console.log(3)
  887. // 当两个都选择的时候
  888. let obj={}
  889. let obj1={}
  890. obj.data=[]
  891. obj1.data=[]
  892. obj.name=result[0][0].deptName
  893. obj1.name=result[1][0].deptName
  894. result[0].map(item=>{
  895. allobj.categories.push(item.statDate.slice(5,10))
  896. obj.data.push(item.data)
  897. })
  898. result[1].map(item=>{
  899. obj1.data.push(item.data)
  900. })
  901. allobj.series.push(obj)
  902. allobj.series.push(obj1)
  903. }
  904. // console.log(allobj)
  905. // return
  906. // this.lineOptsect1=allobj
  907. this['lineOptsect'+index]=allobj
  908. // this['lineOptsect'+index].series=allobj.series
  909. // this['lineOptsect'+index].categories=allobj.categories
  910. }
  911. })
  912. },
  913. // 获取销奖能力
  914. getPowerList(){
  915. this.$u.post('/cusLvStatistics/teamAnalysisMarketingAbility',{
  916. deptIds:this.deptids||[this.staff1.value,this.staff2.value].filter(item=>item).join(','),
  917. houseId:this.houseId,
  918. timeType:this.lastEndDate?null:this.activeTotal+'',
  919. lastEndDate:this.lastEndDate,
  920. lastStartDate:this.lastStartDate
  921. })
  922. .then(res=>{
  923. // console.log(res)
  924. // 处理数据
  925. this.chartData1={
  926. categories:[],
  927. series:[]
  928. }
  929. let allobj={
  930. categories:[],
  931. series:[]
  932. }
  933. let max = 0;
  934. // 当选择全部时
  935. if(!this.staff1.value&&!this.staff2.value){
  936. // let first=res.first
  937. res.first.map((item,index)=>{
  938. let obj={
  939. name:item[0].deptName,
  940. data:[]
  941. }
  942. item.map((item1)=>{
  943. if(index==0){
  944. allobj.categories.push(item1.name)
  945. }
  946. obj.data.push(item1.avgExecutionRate)
  947. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  948. })
  949. allobj.series.push(obj)
  950. })
  951. }
  952. // 当选择只有一个时
  953. else if(this.staff1.value&&!this.staff2.value){
  954. res.first.map((item,index)=>{
  955. let obj={
  956. name:item[0].deptName,
  957. data:[]
  958. }
  959. item.map((item1)=>{
  960. if(index==0){
  961. allobj.categories.push(item1.name)
  962. }
  963. obj.data.push(item1.avgExecutionRate)
  964. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  965. })
  966. allobj.series.push(obj)
  967. })
  968. // 判断是否显示平均
  969. // 如果显示对比
  970. if(this.timepickpickisshow){
  971. res.second.map((item,index)=>{
  972. let obj={
  973. name:'平均',
  974. data:[]
  975. }
  976. item.map((item1)=>{
  977. obj.data.push(item1.avgExecutionRate)
  978. })
  979. allobj.series.push(obj)
  980. })
  981. }
  982. }else{
  983. // console.log(3)
  984. // 当两个都选择的时候
  985. res.first.map((item,index)=>{
  986. let obj={
  987. name:item[0].deptName,
  988. data:[]
  989. }
  990. item.map((item1)=>{
  991. if(index==0){
  992. allobj.categories.push(item1.name)
  993. }
  994. obj.data.push(item1.avgExecutionRate)
  995. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  996. })
  997. allobj.series.push(obj)
  998. })
  999. }
  1000. this.opts.extra.radar.max = max +25
  1001. // console.log(allobj)
  1002. this.chartData1=allobj
  1003. this.$forceUpdate()
  1004. })
  1005. },
  1006. // 定义一个公共方法对数据进行处理
  1007. dealData(arr){
  1008. // 获取最大值
  1009. let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果:3
  1010. // console.log(num)
  1011. if(num>100){
  1012. // 获取最大值的下标
  1013. // let idx=arr.findIndex(item=>item.zxl==num)
  1014. // console.log(idx,123)
  1015. arr.map(item=>{
  1016. item.zxl1=Math.floor(item.zxl/num*100)
  1017. })
  1018. // console.log(arr)
  1019. return arr
  1020. }else{
  1021. arr.map(item=>{
  1022. item.zxl1=item.zxl
  1023. })
  1024. return arr
  1025. }
  1026. },
  1027. }
  1028. };
  1029. </script>
  1030. <style lang="scss" scoped>
  1031. .uchaserboxs {
  1032. width: 100%;
  1033. height: 70vh;
  1034. }
  1035. .box {
  1036. width: 100%;
  1037. height: 100%;
  1038. background: #FAFAFA;
  1039. padding-bottom: 60rpx;
  1040. }
  1041. // 对比时间切换
  1042. .timepick{
  1043. width: 100%;
  1044. height: 90rpx;
  1045. display: flex;
  1046. align-items: center;
  1047. background: #FAFAFA;
  1048. }
  1049. .timepicktime{
  1050. width: 260rpx;
  1051. height: 50rpx;
  1052. border: 1rpx solid #E0E0E0;
  1053. margin-left: 30rpx;
  1054. display: flex;
  1055. background: #FFFFFF;
  1056. }
  1057. .timepicktime>view:nth-of-type(1){
  1058. width: 210rpx;
  1059. height: 100%;
  1060. line-height: 50rpx;
  1061. font-size: 26rpx;
  1062. font-weight: 400;
  1063. text-align: center;
  1064. }
  1065. .timepicktime>view:nth-of-type(2){
  1066. width: 49rpx;
  1067. height: 100%;
  1068. // border-left: 1px solid #E0E0E0;
  1069. }
  1070. .timepickpick{
  1071. width: 110rpx;
  1072. height: 50rpx;
  1073. margin-left: 30rpx;
  1074. display: flex;
  1075. align-items: center;
  1076. }
  1077. .Underimg{
  1078. width: 50rpx;
  1079. height:50rpx;
  1080. margin-top: -2rpx;
  1081. }
  1082. </style>