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.
 
 
 

1031 lines
28 KiB

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