25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 

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