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

1116 lines
30 KiB

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