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.
 
 
 

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