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.
 
 
 

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