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.
 
 
 

1030 lines
28 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittabs">
  4. <div class="items" @tap="screenShow = true">{{ showTimeText }}</div>
  5. <div class="items" @tap="showTemplate = true">{{ showBeText }}</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="top">
  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. } else {
  516. this.screenShow = false
  517. this.showTimeText = text
  518. this.activeTotal = index;
  519. this.lastEndDate = ''
  520. this.lastStartDate = ''
  521. // 获取数据
  522. // 团队对比接待量
  523. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  524. // 团队对比接待时长
  525. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  526. /* 销奖执行率 */
  527. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  528. // 获取销奖能力
  529. this.getPowerList()
  530. }
  531. },
  532. // 接待量
  533. tabtimetap1(idx) {
  534. this.eharTab.active1 = idx
  535. // 调用方法
  536. this.receptionCountList(idx, 1, '/cusLvStatistics/teamAnalysisReception')
  537. },
  538. // 接待时长
  539. tabtimetap2(idx) {
  540. this.eharTab.active2 = idx
  541. // 调用方法
  542. this.receptionCountList(idx, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  543. },
  544. tabtimetap3(idx) {
  545. this.eharTab.active3 = idx
  546. // 调用方法
  547. this.receptionCountList(idx, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  548. },
  549. tabtimetap4(idx) {
  550. this.eharTab.active4 = idx
  551. // 调用方法
  552. // this.getRecordList()
  553. },
  554. //自定义时间
  555. totalTimeChange(e) {
  556. this.screenShow = false
  557. this.showTimeText = `${e.startDate}-${e.endDate}`
  558. this.activeTotal = 3;
  559. this.lastEndDate = e.endDate
  560. this.lastStartDate = e.startDate
  561. // 获取数据
  562. // 团队对比接待量
  563. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  564. // 团队对比接待时长
  565. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  566. /* 销奖执行率 */
  567. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  568. // 获取销奖能力
  569. this.getPowerList()
  570. },
  571. //指标执行率分析tab
  572. tapspagek2(index) {
  573. this.bocindex = index;
  574. },
  575. //集团对比
  576. Groupcontrast() {
  577. uni.navigateTo({
  578. url: '/pages/center/Piabodata/Groupcontrast'
  579. });
  580. },
  581. // 去选择团队
  582. goTeam() {
  583. uni.navigateTo({
  584. url: `/pages/center/Piabodata/selectTeam?ids=${this.deptids}`
  585. })
  586. },
  587. staffSelectCallback(e) {
  588. if (this.choseStaffFlag) {
  589. // 第二个客户
  590. // console.log(e,'第二个')
  591. this.staff2 = e[0]
  592. } else {
  593. // 第一个客户
  594. // console.log(e,'第一个')
  595. // 当选择全部时
  596. if (!e.value) {
  597. this.timepickpickisshow = false
  598. this.staff2.label = '平均'
  599. this.staff2.value = ''
  600. }
  601. this.staff1 = e[0]
  602. }
  603. if (this.staff1.label == this.staff2.label) {
  604. uni.showToast({
  605. title: '请勿选择重复',
  606. icon: 'none'
  607. })
  608. this.staff2.label = '请选择'
  609. // this.staff2.label='平均'
  610. // this.staff2.value=''
  611. return
  612. } else {
  613. // 获取数据
  614. // 团队对比接待量
  615. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  616. // 团队对比接待时长
  617. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  618. /* 销奖执行率 */
  619. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  620. // 获取销奖能力
  621. this.getPowerList()
  622. }
  623. },
  624. // 接待时长
  625. receptionCountList(idx, index, url) {
  626. this.$u.post(url, {
  627. // userA:this.staff1.value,
  628. // userB:this.staff2.value,
  629. deptIds: [this.staff1.value, this.staff2.value].filter(item => item).join(','),
  630. showRank: idx,
  631. houseId: this.houseId,
  632. timeType: this.lastEndDate ? null : this.activeTotal + '',
  633. lastEndDate: this.lastEndDate,
  634. lastStartDate: this.lastStartDate,
  635. marketingBusiness: this.marketingBusiness,
  636. })
  637. .then(res => {
  638. // console.log(res)
  639. let result = res.result
  640. this['newTeam' + index] = res.avg[0]
  641. this['newAvg' + index] = res.avg[1]
  642. if (idx == 0) {
  643. // 当选择的是牌名时
  644. // 处理数据
  645. // 先处理牌名数据,需要进行判断全部还是单个
  646. // 当为全部时
  647. this['newlisttabinfo' + index] = []
  648. let arr = []
  649. // 当选择全部时
  650. if (!this.staff1.value && !this.staff2.value) {
  651. // console.log(1)
  652. result[0].map(item => {
  653. let obj = {}
  654. obj.name = item.deptName
  655. obj.zxl = item.data
  656. arr.push(obj)
  657. })
  658. arr = this.dealData(arr)
  659. this['newlisttabinfo' + index] = arr
  660. }
  661. // 当选择只有一个时
  662. else if (this.staff1.value && !this.staff2.value) {
  663. // console.log(2)
  664. result[0].map(item => {
  665. let obj = {}
  666. obj.name = item.deptName
  667. obj.zxl = item.data
  668. arr.push(obj)
  669. })
  670. // 判断是否显示平均
  671. // 如果显示对比
  672. if (this.timepickpickisshow) {
  673. result[1].map(item => {
  674. let obj = {}
  675. obj.name = '平均'
  676. obj.zxl = item.data
  677. arr.push(obj)
  678. })
  679. }
  680. arr = this.dealData(arr)
  681. this['newlisttabinfo' + index] = arr
  682. } else {
  683. // console.log(3)
  684. // 当两个都选择的时候
  685. result[0].map(item => {
  686. let obj = {}
  687. obj.name = item.deptName
  688. obj.zxl = item.data
  689. arr.push(obj)
  690. })
  691. result[1].map(item => {
  692. let obj = {}
  693. obj.name = item.deptName
  694. obj.zxl = item.data
  695. arr.push(obj)
  696. })
  697. arr = this.dealData(arr)
  698. this['newlisttabinfo' + index] = arr
  699. }
  700. } else {
  701. // 当选择趋势时
  702. this['lineOptsect' + index] = {}
  703. let allobj = {
  704. categories: [],
  705. series: []
  706. }
  707. // 先处理时间
  708. // 当选择全部时
  709. if (!this.staff1.value && !this.staff2.value) {
  710. result.map((item, idx) => {
  711. let obj = {}
  712. obj.name = item[0].deptName
  713. obj.data = []
  714. item.map(item1 => {
  715. // 时间的处理
  716. if (idx == 0) {
  717. allobj.categories.push(item1.statDate.slice(5, 10))
  718. }
  719. obj.data.push(item1.data)
  720. })
  721. allobj.series.push(obj)
  722. })
  723. }
  724. // 当选择只有一个时
  725. else if (this.staff1.value && !this.staff2.value) {
  726. // console.log(2)
  727. let obj = {}
  728. obj.data = []
  729. obj.name = result[0][0].deptName
  730. result[0].map(item => {
  731. allobj.categories.push(item.statDate.slice(5, 10))
  732. obj.data.push(item.data)
  733. })
  734. allobj.series.push(obj)
  735. // 判断是否显示平均
  736. // 如果显示对比
  737. if (this.timepickpickisshow) {
  738. let obj = {}
  739. obj.data = []
  740. obj.name = '平均'
  741. result[1].map(item => {
  742. obj.data.push(item.data)
  743. })
  744. allobj.series.push(obj)
  745. }
  746. } else {
  747. // console.log(3)
  748. // 当两个都选择的时候
  749. let obj = {}
  750. let obj1 = {}
  751. obj.data = []
  752. obj1.data = []
  753. obj.name = result[0][0].deptName
  754. obj1.name = result[1][0].deptName
  755. result[0].map(item => {
  756. allobj.categories.push(item.statDate.slice(5, 10))
  757. obj.data.push(item.data)
  758. })
  759. result[1].map(item => {
  760. obj1.data.push(item.data)
  761. })
  762. allobj.series.push(obj)
  763. allobj.series.push(obj1)
  764. }
  765. // console.log(allobj)
  766. // return
  767. // this.lineOptsect1=allobj
  768. this['lineOptsect' + index] = allobj
  769. // this['lineOptsect'+index].series=allobj.series
  770. // this['lineOptsect'+index].categories=allobj.categories
  771. }
  772. })
  773. },
  774. // 获取销奖能力
  775. getPowerList() {
  776. this.$u.post('/cusLvStatistics/teamAnalysisMarketingAbility', {
  777. deptIds: this.deptids || [this.staff1.value, this.staff2.value].filter(item => item).join(','),
  778. houseId: this.houseId,
  779. timeType: this.lastEndDate ? null : this.activeTotal + '',
  780. lastEndDate: this.lastEndDate,
  781. lastStartDate: this.lastStartDate,
  782. marketingBusiness: this.marketingBusiness,
  783. })
  784. .then(res => {
  785. this.LOADING = false
  786. // console.log(res)
  787. // 处理数据
  788. this.chartData1 = {
  789. categories: [],
  790. series: []
  791. }
  792. let allobj = {
  793. categories: [],
  794. series: []
  795. }
  796. let max = 0;
  797. // 当选择全部时
  798. if (!this.staff1.value && !this.staff2.value) {
  799. // let first=res.first
  800. res.first.map((item, index) => {
  801. let obj = {
  802. name: item[0].deptName,
  803. data: []
  804. }
  805. item.map((item1) => {
  806. if (index == 0) {
  807. allobj.categories.push(item1.name)
  808. }
  809. obj.data.push(item1.avgExecutionRate)
  810. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  811. })
  812. allobj.series.push(obj)
  813. })
  814. }
  815. // 当选择只有一个时
  816. else if (this.staff1.value && !this.staff2.value) {
  817. res.first.map((item, index) => {
  818. let obj = {
  819. name: item[0].deptName,
  820. data: []
  821. }
  822. item.map((item1) => {
  823. if (index == 0) {
  824. allobj.categories.push(item1.name)
  825. }
  826. obj.data.push(item1.avgExecutionRate)
  827. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  828. })
  829. allobj.series.push(obj)
  830. })
  831. // 判断是否显示平均
  832. // 如果显示对比
  833. if (this.timepickpickisshow) {
  834. res.second.map((item, index) => {
  835. let obj = {
  836. name: '平均',
  837. data: []
  838. }
  839. item.map((item1) => {
  840. obj.data.push(item1.avgExecutionRate)
  841. })
  842. allobj.series.push(obj)
  843. })
  844. }
  845. } else {
  846. // console.log(3)
  847. // 当两个都选择的时候
  848. res.first.map((item, index) => {
  849. let obj = {
  850. name: item[0].deptName,
  851. data: []
  852. }
  853. item.map((item1) => {
  854. if (index == 0) {
  855. allobj.categories.push(item1.name)
  856. }
  857. obj.data.push(item1.avgExecutionRate)
  858. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  859. })
  860. allobj.series.push(obj)
  861. })
  862. }
  863. this.opts.extra.radar.max = max + 25
  864. // console.log(allobj)
  865. this.chartData1 = allobj
  866. this.$forceUpdate()
  867. }).catch(e => {
  868. this.LOADING = false
  869. })
  870. },
  871. // 定义一个公共方法对数据进行处理
  872. dealData(arr) {
  873. // 获取最大值
  874. let num = Math.max.apply(Math, arr.map(function(o) {
  875. return o.zxl
  876. })) //结果:3
  877. // console.log(num)
  878. if (num > 100) {
  879. // 获取最大值的下标
  880. // let idx=arr.findIndex(item=>item.zxl==num)
  881. // console.log(idx,123)
  882. arr.map(item => {
  883. item.zxl1 = Math.floor(item.zxl / num * 100)
  884. })
  885. // console.log(arr)
  886. return arr
  887. } else {
  888. arr.map(item => {
  889. item.zxl1 = item.zxl
  890. })
  891. return arr
  892. }
  893. },
  894. }
  895. };
  896. </script>
  897. <style lang="scss" scoped>
  898. .boxtittabs {
  899. width: 100%;
  900. height: 92rpx;
  901. background: #FFFFFF;
  902. display: flex;
  903. align-items: center;
  904. .items {
  905. padding: 0 24rpx;
  906. width: 50%;
  907. height: 100%;
  908. display: flex;
  909. align-items: center;
  910. justify-content: center;
  911. overflow: hidden;
  912. white-space: nowrap;
  913. text-overflow: ellipsis;
  914. }
  915. }
  916. .screen {
  917. width: 100%;
  918. .boxtittab {
  919. width: 100%;
  920. flex-direction: column;
  921. .tabbox {
  922. width: 100%;
  923. }
  924. }
  925. }
  926. .uchaserboxs {
  927. width: 100%;
  928. height: 70vh;
  929. }
  930. .box {
  931. width: 100%;
  932. height: 100%;
  933. background: #FAFAFA;
  934. padding-bottom: 60rpx;
  935. }
  936. // 对比时间切换
  937. .timepick {
  938. width: 100%;
  939. height: 90rpx;
  940. display: flex;
  941. align-items: center;
  942. background: #FAFAFA;
  943. }
  944. .timepicktime {
  945. width: 260rpx;
  946. height: 50rpx;
  947. border: 1rpx solid #E0E0E0;
  948. margin-left: 30rpx;
  949. display: flex;
  950. background: #FFFFFF;
  951. }
  952. .timepicktime>view:nth-of-type(1) {
  953. width: 210rpx;
  954. height: 100%;
  955. line-height: 50rpx;
  956. font-size: 26rpx;
  957. font-weight: 400;
  958. text-align: center;
  959. }
  960. .timepicktime>view:nth-of-type(2) {
  961. width: 49rpx;
  962. height: 100%;
  963. // border-left: 1px solid #E0E0E0;
  964. }
  965. .timepickpick {
  966. width: 110rpx;
  967. height: 50rpx;
  968. margin-left: 30rpx;
  969. display: flex;
  970. align-items: center;
  971. }
  972. .Underimg {
  973. width: 50rpx;
  974. height: 50rpx;
  975. margin-top: -2rpx;
  976. }
  977. .heji {
  978. overflow: hidden;
  979. text-overflow: ellipsis;
  980. white-space: nowrap;
  981. }
  982. </style>