您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

679 行
18 KiB

  1. <template>
  2. <view class="box">
  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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  18. <view class="Piabodata-box">
  19. <view class="Piabodata" @click="toTrendAnalysis()">
  20. <view class="Piabodata-img">
  21. <image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
  22. </view>
  23. <view class="Piabodata-text">趋势分析</view>
  24. </view>
  25. <view class="Piabodata" @click="toStaffAnalysis()">
  26. <view class="Piabodata-img">
  27. <image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>
  28. </view>
  29. <view class="Piabodata-text">员工分析</view>
  30. </view>
  31. <view class="Piabodata" @click="toUserinsightinto()">
  32. <view class="Piabodata-img">
  33. <image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>
  34. </view>
  35. <view class="Piabodata-text">用户洞察</view>
  36. </view>
  37. <view class="Piabodata" @click="Theteamcompared()" v-if="Theteamcomparedisshow">
  38. <view class="Piabodata-img">
  39. <image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>
  40. </view>
  41. <view class="Piabodata-text">团队对比</view>
  42. </view>
  43. <view class="Piabodata" @click="Groupcontrast()" v-if="Groupcontrastisshow">
  44. <view class="Piabodata-img">
  45. <image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>
  46. </view>
  47. <view class="Piabodata-text">集团对比</view>
  48. </view>
  49. </view>
  50. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  51. <view class="boxzonglan">
  52. <view class="zonglantit">简报</view>
  53. <view class="zonglanbox">
  54. <view class="grid" v-for="(item,index) in numlist" :key="index">
  55. <view class="audonum">{{item.name}}</text></view>
  56. <view class="num">{{item.num}}</view>
  57. </view>
  58. </view>
  59. </view>
  60. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  61. <view class="single">
  62. <view class="title">
  63. <view class="title1">接待趋势</view>
  64. </view>
  65. <view class="swiper-box">
  66. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2()"
  67. inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
  68. </u-tabs-swiper>
  69. </view>
  70. <!-- <view class="hejibox">
  71. <view class="heji">合计:50</view>
  72. <view class="heji">均值:25</view>
  73. </view> -->
  74. <view class="danwei">来访(人)</view>
  75. <view class="uchaserbox">
  76. <qiun-data-charts
  77. type="line"
  78. :chartData="lineOptsect"
  79. background="none"
  80. :ontouch="true"
  81. canvasId="wangxiaohuaerlingilingwuyiba1"
  82. :canvas2d="true"
  83. />
  84. </view>
  85. </view>
  86. <view class="" v-if="teamFlag">
  87. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  88. <view class="single">
  89. <view class="title" @click="staffShow1=true">
  90. <view class="title1">团队接待趋势</view>
  91. <view class="title2">
  92. <view class="title2-che" style="width: 220rpx;">{{team.label}}
  93. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  94. </view>
  95. <!-- <view class="title2-che">执行率
  96. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  97. </view> -->
  98. </view>
  99. </view>
  100. <view class="hejibox">
  101. <view class="heji">合计:50</view>
  102. <view class="heji">均值:25</view>
  103. </view>
  104. <view class="danwei">来访(人)</view>
  105. <view class="uchaserbox">
  106. <qiun-data-charts
  107. type="line"
  108. :chartData="lineOptsect1"
  109. background="none"
  110. :ontouch="true"
  111. canvasId="wangxiaohuaerlineryiliwuyibao"
  112. :canvas2d="true"
  113. />
  114. </view>
  115. </view>
  116. </view>
  117. <view class="" v-if="staffFlag">
  118. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  119. <view class="single">
  120. <view class="title">
  121. <view class="title1">员工接待趋势</view>
  122. <view class="title2" @click="staffShow=true">
  123. <view class="title2-che" style="width: 220rpx;">{{staff.label}}
  124. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  125. </view>
  126. <!-- <view class="title2-che">执行率
  127. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  128. </view> -->
  129. </view>
  130. </view>
  131. <view class="hejibox">
  132. <view class="heji">合计:50</view>
  133. <view class="heji">均值:25</view>
  134. </view>
  135. <view class="danwei">来访(人)</view>
  136. <view class="uchaserbox">
  137. <qiun-data-charts
  138. type="line"
  139. :chartData="lineOptsect2"
  140. background="none"
  141. :ontouch="true"
  142. canvasId="wangxiaohuaerlingeryilingwuyibao"
  143. :canvas2d="true"
  144. />
  145. </view>
  146. </view>
  147. </view>
  148. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  149. <view class="single">
  150. <view class="title">
  151. <view class="title1">销讲维度执行率</view>
  152. <!-- <view class="title3">
  153. <view class="title3-box">
  154. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  155. </view>
  156. <view class="title3-box">
  157. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  158. </view>
  159. </view> -->
  160. </view>
  161. <!-- <view class="hejibox">
  162. <view class="heji">合计:50</view>
  163. <view class="heji">均值:25</view>
  164. </view> -->
  165. <view class="jindu">
  166. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  167. <view class="jindu-boxche">
  168. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  169. <view style="width: 440rpx;margin-left: 10rpx;">
  170. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  171. </view>
  172. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  173. </view>
  174. </view>
  175. </view>
  176. </view>
  177. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  178. <view class="single">
  179. <view class="title">
  180. <view class="title1">销讲指标执行率</view>
  181. </view>
  182. <view class="swiper-box">
  183. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1" @change="tapspagek3"
  184. inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
  185. </u-tabs-swiper>
  186. </view>
  187. <view class="jindu">
  188. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  189. <view class="jindu-boxche">
  190. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  191. <view style="width: 440rpx;margin-left: 10rpx;">
  192. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  193. </view>
  194. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  195. </view>
  196. </view>
  197. </view>
  198. </view>
  199. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  200. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)" :default-value='selindex'></u-select>
  201. <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)" :default-value='selindex'></u-select>
  202. </view>
  203. </template>
  204. <script>
  205. var app = getApp();
  206. var util = require("../../../utils/util.js");
  207. var config = require("../../../config");
  208. export default {
  209. data() {
  210. return {
  211. activeTotal: 4,
  212. activeTotal2: 0,
  213. houseId:'',
  214. timeobj:{
  215. statDateStart:'',
  216. statDateEnd:''
  217. },
  218. // 员工列表
  219. staffList:[],
  220. // 团队列表
  221. teamList:[],
  222. staffShow:false,
  223. staff:{
  224. value:'',
  225. label:''
  226. },
  227. team:{
  228. value:'',
  229. label:''
  230. },
  231. teamFlag:true,
  232. bocindex1:0,
  233. staffFlag:true,
  234. staffShow1:false,
  235. lastStartDate:'',
  236. lastEndDate :'',
  237. totalTimeShow: false,
  238. activeTab: 0,
  239. numlist:[
  240. {name:'接待量',num:'10'},
  241. {name:'接待客户',num:'10'},
  242. {name:'平均执行率',num:'10'},
  243. {name:'录音时长',num:'10'},
  244. ],
  245. lineOptsect:{
  246. "categories": ["2016","2017","2018","2019","2020","2021"],
  247. "series": [
  248. {
  249. "name": "成交量",
  250. "data": [35,8,25,37,4,20]
  251. }
  252. ]
  253. },
  254. lineOptsect1:{
  255. "categories": ["2016","2017","2018","2019","2020","2021"],
  256. "series": [
  257. {
  258. "name": "成交量",
  259. "data": [35,8,25,37,4,20]
  260. }
  261. ]
  262. },
  263. lineOptsect2:{
  264. "categories": ["2016","2017","2018","2019","2020","2021"],
  265. "series": [
  266. {
  267. "name": "成交量",
  268. "data": [35,8,25,37,4,20]
  269. }
  270. ]
  271. },
  272. newlistoj:[
  273. {name:"接待量",id:1},
  274. {name:"平均执行率",id:2},
  275. {name:"接待客户",id:3},
  276. {name:"录音时长",id:5},
  277. ],
  278. bocindex:0,
  279. newlisttabinfo:[
  280. {name:'接待量',zxl:'10'},
  281. {name:'平均执行率',zxl:'50'},
  282. {name:'接待客户',zxl:'80'},
  283. ],
  284. newlisttabinfo1:[
  285. {name:'接待量',zxl:'10'},
  286. {name:'平均执行率',zxl:'50'},
  287. {name:'接待客户',zxl:'80'},
  288. ],
  289. Theteamcomparedisshow:false,
  290. Groupcontrastisshow:false,
  291. allechar:[],
  292. allList:[]
  293. };
  294. },
  295. onShow() {
  296. // 获取楼盘id
  297. this.houseId = uni.getStorageSync('buildingID').id;
  298. // 获取数据看板
  299. // 获取员工
  300. this.getStaffList()
  301. // 获取团队
  302. this.getSectionList()
  303. // 获取团队是否显示权限
  304. this.queryHaveDept()
  305. // 获取简报
  306. this.getReport()
  307. // 获取接待趋势
  308. this.getRtrent()
  309. // 获取维度
  310. this.getindexZxl()
  311. },
  312. methods: {
  313. queryHaveDept() {
  314. return new Promise((resolve, reject) => {
  315. this.$u.get("/user/queryHaveDept?houseId="+this.houseId).then(res => {
  316. this.permissions(res)
  317. })
  318. })
  319. },
  320. permissions(res){
  321. if(res==1){
  322. this.Theteamcomparedisshow=false;
  323. this.Groupcontrastisshow=false;
  324. return
  325. }
  326. let totle=uni.getStorageSync('weapp_session_userInfo_data').total;
  327. if(totle==1){
  328. this.Theteamcomparedisshow=true;
  329. this.Groupcontrastisshow=false;
  330. }else{
  331. this.Theteamcomparedisshow=true;
  332. this.Groupcontrastisshow=true;
  333. }
  334. },
  335. // 获取员工列表
  336. getStaffList(){
  337. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})
  338. .then(res=>{
  339. // console.log(res,'123')
  340. res.map(item=>{
  341. let obj={}
  342. obj.value=item.accountId
  343. obj.label=item.name
  344. this.staffList.push(obj)
  345. })
  346. this.staff=this.staffList[0]
  347. this.getAward()
  348. })
  349. },
  350. // 获取接待趋势
  351. getRtrent(){
  352. this.$u.post('/cusLvStatistics/receptionTrend',{
  353. houseId:this.houseId,
  354. timeType:this.lastEndDate?null:this.activeTotal,
  355. lastEndDate:this.lastEndDate,
  356. lastStartDate:this.lastStartDate
  357. })
  358. .then(res=>{
  359. // console.log(res)
  360. this.allechar=res
  361. this.tapspagek2(this.bocindex)
  362. })
  363. },
  364. // 销奖维度
  365. getindexZxl(){
  366. this.$u.post('/cusLvStatistics/indexZxl',{
  367. houseId:this.houseId,
  368. timeType:this.lastEndDate?null:this.activeTotal,
  369. lastEndDate:this.lastEndDate,
  370. lastStartDate:this.lastStartDate
  371. })
  372. .then(res=>{
  373. // console.log(res)
  374. // 处理销奖维度执行率
  375. // this.newlisttabinfo
  376. let arr=[]
  377. this.newlistoj=[]
  378. res.list.map((item,index)=>{
  379. arr.push({
  380. name:item.name,
  381. zxl:item.zxl
  382. })
  383. this.newlistoj.push({
  384. name:item.name,
  385. id:index
  386. })
  387. })
  388. this.newlisttabinfo=arr
  389. this.allList=res.list
  390. this.tapspagek3(this.bocindex1)
  391. })
  392. },
  393. // 获取简报
  394. getReport(){
  395. this.$u.post('/cusLvStatistics/xiaojiangAnalysis',{
  396. houseId:this.houseId,
  397. timeType:this.lastEndDate?null:this.activeTotal,
  398. lastEndDate:this.lastEndDate,
  399. lastStartDate:this.lastStartDate
  400. })
  401. .then(res=>{
  402. // console.log(res)
  403. // 接待量
  404. this.numlist[0].num=res.receptionCount||0
  405. // 接待客户
  406. this.numlist[1].num=res.sumCustomer||0
  407. // 执行率
  408. this.numlist[2].num=(res.fraction||0)+'%'
  409. // 录音时长
  410. this.numlist[3].num=res.sumDuration||0
  411. })
  412. },
  413. // 获取团队列表
  414. getSectionList(){
  415. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId',{houseId:this.houseId})
  416. .then(res=>{
  417. this.staffList=[]
  418. this.staffList1=[]
  419. res.map(item=>{
  420. let obj={}
  421. obj.value=item.deptId
  422. obj.label=item.deptName
  423. this.teamList.push(obj)
  424. })
  425. this.team=this.teamList[0]
  426. this.receptionCountList()
  427. })
  428. },
  429. // 员工销奖趋势
  430. getAward(){
  431. if(!this.staff.value){
  432. this.staffFlag=false
  433. return
  434. }
  435. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{
  436. userA:this.staff.value,
  437. userB:'',
  438. houseId:this.houseId,
  439. timeType:this.lastEndDate?null:this.activeTotal+'',
  440. lastEndDate:this.lastEndDate,
  441. lastStartDate:this.lastStartDate
  442. })
  443. .then(res=>{
  444. this.newTeam3=res.avg[0]
  445. this.newAvg3=res.avg[1]
  446. // console.log(res)
  447. let first=res.first
  448. let second=res.second
  449. this.lineOptsect2.categories=[]
  450. this.lineOptsect2.series=[
  451. {
  452. name:first[0].accountName,
  453. data:[]
  454. }
  455. ]
  456. first.map(item=>{
  457. this.lineOptsect2.categories.push(item.statDate.slice(5,10))
  458. this.lineOptsect2.series[0].data.push(item.sumFraction)
  459. })
  460. })
  461. },
  462. // 团队接待趋势
  463. receptionCountList(){
  464. if(!this.team.value){
  465. this.teamFlag=false
  466. return
  467. }
  468. this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate',{
  469. deptIds:this.team.value,
  470. showRank:1,
  471. houseId:this.houseId,
  472. timeType:this.lastEndDate?null:this.activeTotal+'',
  473. lastEndDate:this.lastEndDate,
  474. lastStartDate:this.lastStartDate
  475. })
  476. .then(res=>{
  477. // console.log(res)
  478. let result=res.result
  479. this.newTeam=res.avg[0]
  480. this.newAvg=res.avg[1]
  481. // 当选择趋势时
  482. this.lineOptsect1={}
  483. let allobj={
  484. categories:[],
  485. series:[]
  486. }
  487. // 先处理时间
  488. // 当选择全部时
  489. // 当选择只有一个时
  490. let obj={}
  491. obj.data=[]
  492. obj.name=result[0][0].deptName
  493. result[0].map(item=>{
  494. allobj.categories.push(item.statDate.slice(5,10))
  495. obj.data.push(item.data)
  496. })
  497. allobj.series.push(obj)
  498. this.lineOptsect1=allobj
  499. })
  500. },
  501. //时间切换
  502. tabtimetap(index) {
  503. if (index == 3) {
  504. this.totalTimeShow = true;
  505. } else {
  506. this.activeTotal = index;
  507. this.lastEndDate=''
  508. this.lastStartDate=''
  509. this.getdata()
  510. }
  511. },
  512. // 获取数据
  513. getdata(){
  514. this.receptionCountList()
  515. this.getReport()
  516. this.getRtrent()
  517. this.getindexZxl()
  518. },
  519. staffSelectCallback(e,idx){
  520. if(idx==0){
  521. this.staff=e[0]
  522. this.getAward()
  523. }else{
  524. this.team=e[0]
  525. this.receptionCountList()
  526. }
  527. // console.log(e,idx)
  528. },
  529. //自定义时间
  530. totalTimeChange(e) {
  531. console.log(e.startDate, e.endDate)
  532. this.activeTotal=3;
  533. this.lastEndDate=e.endDate
  534. this.lastStartDate=e.startDate
  535. this.getdata()
  536. },
  537. //指标执行率分析tab
  538. tapspagek2(index) {
  539. // console.log(index)
  540. // 对数据进行分析和处理
  541. // 先处理日期
  542. let allobj={
  543. "categories": [],
  544. "series": [
  545. {
  546. name:'接待量',
  547. data:[]
  548. }
  549. ]
  550. }
  551. if(index==0){
  552. // 接待量
  553. this.allechar.map(item=>{
  554. allobj.categories.push(item.statDate.slice(5,10))
  555. allobj.series[0].data.push(item.receptionCount)
  556. })
  557. }else if(index==1){
  558. // 平均执行率
  559. this.allechar.map(item=>{
  560. allobj.categories.push(item.statDate.slice(5,10))
  561. allobj.series[0].data.push(item.fraction)
  562. })
  563. }else if(index==2){
  564. // 接待客户
  565. this.allechar.map(item=>{
  566. allobj.categories.push(item.statDate.slice(5,10))
  567. allobj.series[0].data.push(item.sumCustomer)
  568. })
  569. }else{
  570. // 录音时长
  571. this.allechar.map(item=>{
  572. allobj.categories.push(item.statDate.slice(5,10))
  573. allobj.series[0].data.push(item.sumDuration)
  574. })
  575. }
  576. this.bocindex = index;
  577. // console.log(allobj)
  578. // return
  579. this.lineOptsect=allobj
  580. },
  581. tapspagek3(index){
  582. let arr=[]
  583. // return
  584. // console.log(index,this.allList[index])
  585. this.allList[index].children.map(item=>{
  586. arr.push({
  587. name:item.name,
  588. zxl:item.zxl
  589. })
  590. })
  591. this.newlisttabinfo1=arr
  592. this.bocindex1 = index;
  593. },
  594. //集团对比
  595. Groupcontrast(){
  596. uni.navigateTo({
  597. url: '/pages/center/Piabodata/Groupcontrast'
  598. });
  599. },
  600. //团队对比
  601. Theteamcompared(){
  602. uni.navigateTo({
  603. url: '/pages/center/Piabodata/Theteamcompared'
  604. });
  605. },
  606. //用户洞察
  607. toUserinsightinto(){
  608. uni.navigateTo({
  609. url: '/pages/center/Piabodata/Userinsightinto'
  610. });
  611. },
  612. //趋势分析
  613. toTrendAnalysis(){
  614. uni.navigateTo({
  615. url: '/pages/center/Piabodata/TrendAnalysis'
  616. });
  617. },
  618. //员工分析
  619. toStaffAnalysis(){
  620. uni.navigateTo({
  621. url: '/pages/center/Piabodata/StaffAnalysis'
  622. });
  623. }
  624. }
  625. };
  626. </script>
  627. <style lang="scss" scoped>
  628. .box {
  629. width: 100%;
  630. height: 100%;
  631. background: #FAFAFA;
  632. padding-bottom: 60rpx;
  633. }
  634. .Piabodata-box{
  635. width: 100%;
  636. background: #FFFFFF;
  637. display: flex;
  638. flex-wrap: wrap;
  639. padding-bottom: 30rpx;
  640. .Piabodata{
  641. width: 33.3%;
  642. .Piabodata-img{
  643. width: 100%;
  644. text-align: center;
  645. .Piabodata-img1{
  646. width: 134rpx;
  647. height: 134rpx;
  648. }
  649. }
  650. .Piabodata-text{
  651. width: 100%;
  652. text-align: center;
  653. font-size: 24rpx;
  654. font-weight: 400;
  655. color: #333333;
  656. margin-top: -10rpx;
  657. }
  658. }
  659. }
  660. </style>