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.
 
 
 
 

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