Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

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