AI销管
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

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