AI销管
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

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