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.
 
 
 
 

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