AI销管
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Theteamcompared.vue 32 KiB

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