AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

660 行
18 KiB

  1. <template>
  2. <view>
  3. <view class="boxtittab">
  4. <view class="tabbox">
  5. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
  6. </view>
  7. <view class="tabbox">
  8. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
  9. </view>
  10. <view class="tabbox">
  11. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
  12. </view>
  13. <view class="tabbox">
  14. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  15. </view>
  16. </view>
  17. <view class="timepick">
  18. <view class="timepicktime" @click="chiocStaff(0)">
  19. <view>{{staff1.label}}
  20. <image class="Underimg" src="../../../static/images/down.png" mode=""></image>
  21. </view>
  22. </view>
  23. <view class="timepickpick" @click="checkboxChange">
  24. <image v-if="timepickpickisshow" style="width: 30rpx;height: 30rpx;"
  25. src="../../../static/images/xuanzhong.png" mode=""></image>
  26. <view v-else style="width: 30rpx;height:30rpx;border: 1rpx solid #E0E0E0;"></view>
  27. <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
  28. </view>
  29. <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
  30. <view>{{staff2.label}}
  31. <image class="Underimg" src="../../../static/images/down.png" mode=""></image>
  32. </view>
  33. </view>
  34. </view>
  35. <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
  36. <view class="single">
  37. <view class="title">
  38. <view class="title1" style="flex: 1;">接待量</view>
  39. </view>
  40. <view class="hejisan">
  41. <view class="sanbox1" >
  42. <view class="text1-2">{{newTeam1||0}}</view>
  43. <view class="text1-1">{{staff1.label}}</view>
  44. </view>
  45. <view class="sanbox1" v-if="timepickpickisshow">
  46. <view class="text1-2">{{newAvg1||0}}</view>
  47. <view class="text1-1">{{staff2.label}}</view>
  48. </view>
  49. </view>
  50. <view class="danwei">来访(人)</view>
  51. <view class="uchaserbox">
  52. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect" background="none" :ontouch="true"
  53. canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
  54. </view>
  55. </view>
  56. <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
  57. <view class="single">
  58. <view class="title">
  59. <view class="title1" style="flex: 1;">录音时长</view>
  60. <view class="title3" style="flex: 1;">
  61. <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
  62. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
  63. </view>
  64. <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
  65. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
  66. </view> -->
  67. </view>
  68. </view>
  69. <view class="hejisan">
  70. <view class="sanbox1" >
  71. <view class="text1-2">{{newTeam2||0}}</view>
  72. <view class="text1-1">{{staff1.label}}</view>
  73. </view>
  74. <view class="sanbox1" v-if="timepickpickisshow">
  75. <view class="text1-2">{{newAvg2||0}}</view>
  76. <view class="text1-1">{{staff2.label}}</view>
  77. </view>
  78. </view>
  79. <view class="danwei">录音时长</view>
  80. <view class="uchaserbox">
  81. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
  82. canvasId="wangxiaouaerlingeryilingwuyibhh" :canvas2d="true" />
  83. </view>
  84. </view>
  85. <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
  86. <view class="single">
  87. <view class="title">
  88. <view class="title1" style="flex: 1;">销讲执行率</view>
  89. <view class="title3" style="flex: 1;">
  90. <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
  91. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
  92. </view>
  93. <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
  94. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
  95. </view> -->
  96. </view>
  97. </view>
  98. <view class="hejisan">
  99. <view class="sanbox1" >
  100. <view class="text1-2">{{newTeam3||0}}</view>
  101. <view class="text1-1">{{staff1.label}}</view>
  102. </view>
  103. <view class="sanbox1" v-if="timepickpickisshow">
  104. <view class="text1-2">{{newAvg3||0}}</view>
  105. <view class="text1-1">{{staff2.label}}</view>
  106. </view>
  107. </view>
  108. <view class="uchaserbox">
  109. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
  110. canvasId="wangxiaohuaerlingryilingwuyibhh" :canvas2d="true" :opts="lineOpts" />
  111. </view>
  112. </view>
  113. <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
  114. <view class="single">
  115. <view class="title" style="padding-right: 30rpx;">
  116. <view class="title1" style="flex: 1;">销讲能力</view>
  117. </view>
  118. <view class="uchaserbox">
  119. <qiun-data-charts v-if="isShow" type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
  120. canvasId="wangxiaohuaerlingeryilinwuycsdx" background="none" :loadingType="0" />
  121. </view>
  122. </view>
  123. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  124. <!-- 选择客户的选择框 -->
  125. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
  126. </u-select>
  127. <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
  128. </u-select>
  129. <!-- 加载组件 -->
  130. <u-loadings v-model="LOADING"></u-loadings>
  131. </view>
  132. </template>
  133. <script>
  134. export default {
  135. data() {
  136. return {
  137. timepickpickisshow: true,
  138. totalTimeShow: false,
  139. activeTotal: 4,
  140. activeTotal2: 1,
  141. // 项目id
  142. houseId: '',
  143. staffList: [],
  144. staffList1: [],
  145. staffShow: false,
  146. staffShow1: false,
  147. newTeam1: '',
  148. newAvg1: '',
  149. newTeam2: '',
  150. newAvg2: '',
  151. newTeam3: '',
  152. newAvg3: '',
  153. staff1: {
  154. value: '',
  155. label: ''
  156. },
  157. staff2: {
  158. value: '',
  159. label: '平均'
  160. },
  161. lastStartDate: '',
  162. lastEndDate: '',
  163. selindex: [0],
  164. choseStaffFlag: false,
  165. lineOptsect: {
  166. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  167. "series": [{
  168. "name": "成交量1",
  169. "data": [35, 8, 25, 37, 4, 20]
  170. },
  171. {
  172. "name": "成交量2",
  173. "data": [40, 18, 45, 44, 10, 60]
  174. }
  175. ]
  176. },
  177. lineOptsect1: {
  178. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  179. "series": [{
  180. "name": "成交量1",
  181. "data": [35, 8, 25, 37, 4, 20]
  182. },
  183. {
  184. "name": "成交量2",
  185. "data": [40, 18, 45, 44, 10, 60]
  186. }
  187. ]
  188. },
  189. lineOptsect2: {
  190. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  191. "series": [{
  192. "name": "成交量1",
  193. "data": [35, 8, 25, 37, 4, 20]
  194. },
  195. {
  196. "name": "成交量2",
  197. "data": [40, 18, 45, 44, 10, 60]
  198. }
  199. ]
  200. },
  201. chartData: {
  202. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  203. "series": [{
  204. "name": "成交量",
  205. "data": [90, 110, 165, 195, 187, 172]
  206. }]
  207. },
  208. opts: {
  209. fontSize: 10,
  210. extra: {
  211. radar: {
  212. max: 100
  213. }
  214. }
  215. },
  216. lineOpts: {
  217. yAxis: {
  218. data: [{
  219. max: 100,
  220. min: 0,
  221. }]
  222. }
  223. },
  224. isShow: true, // 默认都展示
  225. };
  226. },
  227. onLoad(options) {
  228. this.LOADING = true
  229. // 获取项目id
  230. this.houseId = uni.getStorageSync('buildingID').id;
  231. // this.buildingname = uni.getStorageSync('buildingID').name;
  232. // 请求接口获取所有置业顾问员工的列表
  233. this.getStaffList()
  234. },
  235. onPullDownRefresh() {
  236. this.getStaffList()
  237. setTimeout(function() {
  238. uni.stopPullDownRefresh();
  239. }, 1000);
  240. },
  241. methods: {
  242. //是否对比
  243. checkboxChange() {
  244. this.isShow = false
  245. this.timepickpickisshow = !this.timepickpickisshow;
  246. this.staff2.value = ''
  247. this.staff2.label = '平均'
  248. // this.getreception()
  249. // this.getRecordList()
  250. // this.getAwardList()
  251. // this.getAward()
  252. setTimeout(() => {
  253. this.isShow = true
  254. }, 10)
  255. this.getdata()
  256. },
  257. // 点击员工对比
  258. chiocStaff(idx) {
  259. if (idx == 0) {
  260. // 当选择了第一个的时候
  261. this.choseStaffFlag = false
  262. this.staffShow = true
  263. } else {
  264. this.choseStaffFlag = true
  265. this.staffShow1 = true
  266. }
  267. },
  268. // 获取员工列表
  269. getStaffList() {
  270. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  271. houseId: this.houseId
  272. })
  273. .then(res => {
  274. // console.log(res,'123')
  275. this.staffList = []
  276. this.staffList1 = []
  277. res.map(item => {
  278. let obj = {}
  279. obj.value = item.accountId
  280. obj.label = item.name
  281. this.staffList.push(obj)
  282. })
  283. this.staffList1 = [...this.staffList]
  284. this.staffList1.unshift({
  285. value: '',
  286. label: '平均'
  287. })
  288. this.staff1 = this.staffList[0]
  289. // this.getreception()
  290. // this.getRecordList()
  291. // this.getAwardList()
  292. // this.getAward()
  293. this.getdata()
  294. })
  295. },
  296. getdata() {
  297. this.getreception()
  298. this.getRecordList()
  299. this.getAward()
  300. this.getAwardList()
  301. },
  302. // 获取接待量数据
  303. getreception() {
  304. this.$u.post('/cusLvStatistics/employeeAnalysisReception', {
  305. userA: this.staff1.value,
  306. userB: this.staff2.value,
  307. houseId: this.houseId,
  308. timeType: this.lastEndDate ? null : this.activeTotal + '',
  309. lastEndDate: this.lastEndDate,
  310. lastStartDate: this.lastStartDate
  311. })
  312. .then(res => {
  313. this.newTeam1 = res.avg[0]
  314. this.newAvg1 = res.avg[1]
  315. // console.log(res)
  316. let first = res.first
  317. let second = res.second
  318. this.lineOptsect.categories = []
  319. if (!this.timepickpickisshow) {
  320. this.lineOptsect.series = [{
  321. name: first[0].accountName,
  322. data: []
  323. }]
  324. first.map(item => {
  325. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  326. this.lineOptsect.series[0].data.push(item.receptionCount || 0)
  327. })
  328. } else {
  329. this.lineOptsect.series = [{
  330. name: first[0].accountName,
  331. data: []
  332. },
  333. {
  334. "name": second[0].accountName,
  335. "data": []
  336. }
  337. ]
  338. first.map(item => {
  339. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  340. this.lineOptsect.series[0].data.push(item.receptionCount)
  341. })
  342. second.map(item => {
  343. this.lineOptsect.series[1].data.push(item.receptionCount)
  344. })
  345. }
  346. // console.log(this.lineOptsect,'1')
  347. })
  348. },
  349. // 销奖趋势
  350. getAward() {
  351. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  352. userA: this.staff1.value,
  353. userB: this.staff2.value,
  354. houseId: this.houseId,
  355. timeType: this.lastEndDate ? null : this.activeTotal + '',
  356. lastEndDate: this.lastEndDate,
  357. lastStartDate: this.lastStartDate
  358. })
  359. .then(res => {
  360. this.newTeam3 = res.avg[0]
  361. this.newAvg3 = res.avg[1]
  362. // console.log(res)
  363. let first = res.first
  364. let second = res.second
  365. this.lineOptsect2.categories = []
  366. if (!this.timepickpickisshow) {
  367. this.lineOptsect2.series = [{
  368. name: first[0].accountName,
  369. data: []
  370. }]
  371. first.map(item => {
  372. // console.log(item)
  373. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  374. this.lineOptsect2.series[0].data.push(item.sumFraction)
  375. })
  376. } else {
  377. this.lineOptsect2.series = [{
  378. name: first[0].accountName,
  379. data: []
  380. },
  381. {
  382. "name": second[0].accountName,
  383. "data": []
  384. }
  385. ]
  386. first.map(item => {
  387. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  388. this.lineOptsect2.series[0].data.push(item.sumFraction)
  389. })
  390. second.map(item => {
  391. this.lineOptsect2.series[1].data.push(item.sumFraction)
  392. })
  393. }
  394. // console.log(this.lineOptsect2,'3')
  395. })
  396. },
  397. // 获取有效录音
  398. async getRecordList() {
  399. // 当选择有效录音时
  400. let res = null
  401. if (this.activeTotal2 == 0) {
  402. res = await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording', {
  403. userA: this.staff1.value,
  404. userB: this.staff2.value,
  405. houseId: this.houseId,
  406. timeType: this.lastEndDate ? null : this.activeTotal + '',
  407. lastEndDate: this.lastEndDate,
  408. lastStartDate: this.lastStartDate
  409. })
  410. } else {
  411. res = await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime', {
  412. userA: this.staff1.value,
  413. userB: this.staff2.value,
  414. houseId: this.houseId,
  415. timeType: this.lastEndDate ? null : this.activeTotal + '',
  416. lastEndDate: this.lastEndDate,
  417. lastStartDate: this.lastStartDate
  418. })
  419. }
  420. // console.log(res)
  421. this.newTeam2 = res.avg[0]
  422. this.newAvg2 = res.avg[1]
  423. let first = res.first
  424. let second = res.second
  425. this.lineOptsect1.categories = []
  426. if (!this.timepickpickisshow) {
  427. this.lineOptsect1.series = [{
  428. name: first[0].accountName,
  429. data: []
  430. }]
  431. first.map(item => {
  432. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  433. this.lineOptsect1.series[0].data.push(item.sumDuration)
  434. })
  435. } else {
  436. this.lineOptsect1.series = [{
  437. name: first[0].accountName,
  438. data: []
  439. },
  440. {
  441. "name": second[0].accountName,
  442. "data": []
  443. }
  444. ]
  445. first.map(item => {
  446. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  447. this.lineOptsect1.series[0].data.push(item.sumDuration)
  448. })
  449. second.map(item => {
  450. this.lineOptsect1.series[1].data.push(item.sumDuration)
  451. })
  452. }
  453. // console.log(this.lineOptsect1,'2')
  454. },
  455. // 获取销奖能力
  456. getAwardList() {
  457. this.chartData = {
  458. categories: [],
  459. series: []
  460. }
  461. this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction', {
  462. userA: this.staff1.value,
  463. userB: this.staff2.value,
  464. houseId: this.houseId,
  465. timeType: this.lastEndDate ? null : this.activeTotal + '',
  466. lastEndDate: this.lastEndDate,
  467. lastStartDate: this.lastStartDate
  468. })
  469. .then(res => {
  470. this.LOADING = false
  471. // console.log(res)
  472. let first = res.first
  473. let second = res.second
  474. this.chartData.categories = []
  475. if (!this.timepickpickisshow) {
  476. this.chartData.series = [{
  477. name: first[0].accountName,
  478. data: []
  479. }]
  480. first.map(item => {
  481. this.chartData.categories.push(item.name)
  482. this.chartData.series[0].data.push(item.avgExecutionRate)
  483. })
  484. } else {
  485. this.chartData.series = [{
  486. name: first[0].accountName,
  487. data: []
  488. },
  489. {
  490. "name": second[0].accountName,
  491. "data": []
  492. }
  493. ]
  494. first.map(item => {
  495. this.chartData.categories.push(item.name)
  496. this.chartData.series[0].data.push(item.avgExecutionRate)
  497. })
  498. second.map(item => {
  499. this.chartData.series[1].data.push(item.avgExecutionRate)
  500. })
  501. }
  502. }).catch(e => {
  503. this.LOADING = false
  504. })
  505. },
  506. tabtimetap(index) {
  507. this.activeTotal = index;
  508. if (index == 3) {
  509. this.totalTimeShow = true;
  510. } else {
  511. this.lastEndDate = ''
  512. this.lastStartDate = ''
  513. // 获取数据
  514. // this.getreception()
  515. // this.getRecordList()
  516. // this.getAwardList()
  517. this.getdata()
  518. }
  519. },
  520. tabtimetap1(index) {
  521. this.activeTotal2 = index;
  522. // 调用方法
  523. this.getRecordList()
  524. },
  525. //自定义时间
  526. totalTimeChange(e) {
  527. console.log(e.startDate, e.endDate)
  528. this.activeTotal = 3;
  529. this.lastEndDate = e.endDate
  530. this.lastStartDate = e.startDate
  531. // 获取数据
  532. // this.getreception()
  533. // this.getRecordList()
  534. // this.getAwardList()
  535. this.getdata()
  536. },
  537. staffSelectCallback(e) {
  538. if (this.choseStaffFlag) {
  539. // 第二个客户
  540. this.staff2 = e[0]
  541. } else {
  542. // 第一个客户
  543. this.staff1 = e[0]
  544. }
  545. if (this.staff1.label == this.staff2.label) {
  546. uni.showToast({
  547. title: '请勿选择重复',
  548. icon: 'none'
  549. })
  550. this.staff2.label = '请选择'
  551. return
  552. } else {
  553. // 获取数据
  554. // this.getreception()
  555. // this.getRecordList()
  556. // this.getAwardList()
  557. this.getdata()
  558. }
  559. },
  560. },
  561. }
  562. </script>
  563. <style lang="scss" scoped>
  564. .boxtittab {
  565. position: sticky;
  566. top: var(--window-top);
  567. z-index: 999;
  568. }
  569. .hejisan{
  570. width: 92%;
  571. margin: 0 auto;
  572. display: flex;
  573. padding-bottom:20rpx;
  574. .sanbox1{
  575. flex: 1;
  576. display: flex;
  577. flex-direction: column;
  578. justify-content: center;
  579. align-items: center;
  580. position: relative;
  581. &::after{
  582. position: absolute;
  583. content: '';
  584. width: 1rpx;
  585. height: 86rpx;
  586. background: #E0E0E0;
  587. right: 0;
  588. top: 0;
  589. }
  590. &:last-child::after {
  591. position: absolute;
  592. content: '';
  593. width: 1rpx;
  594. height: 86rpx;
  595. right: 0;
  596. top: 0;
  597. background: #fff;
  598. }
  599. }
  600. .text1-1{
  601. font-size: 24rpx;
  602. font-family: PingFangSC-Regular, PingFang SC;
  603. font-weight: 400;
  604. color: #333333;
  605. line-height: 32rpx;
  606. }
  607. .text1-2{
  608. color: #333333;
  609. font-size: 40rpx;
  610. line-height: 46rpx;
  611. font-family: PingFangSC-Regular, PingFang SC;
  612. margin-bottom: 10rpx;
  613. }
  614. }
  615. // 对比时间切换
  616. .timepick {
  617. width: 100%;
  618. height: 90rpx;
  619. display: flex;
  620. align-items: center;
  621. }
  622. .timepicktime {
  623. width: 260rpx;
  624. height: 50rpx;
  625. margin-left: 30rpx;
  626. display: flex;
  627. align-items: center;
  628. background: #FFFFFF;
  629. }
  630. .timepickpick {
  631. width: 110rpx;
  632. height: 50rpx;
  633. line-height: 50rpx;
  634. margin-left: 30rpx;
  635. display: flex;
  636. align-items: center;
  637. }
  638. .Underimg {
  639. width: 28rpx;
  640. height: 14rpx;
  641. margin-left: 15rpx;
  642. }
  643. </style>