Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

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