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.
 
 
 

721 lines
19 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" style="min-height: 400rpx;">
  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="newlistoj1" :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">{{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">合计:{{allnum||0}}</view>
  102. <view class="heji">均值:{{allavg||0}}</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">合计:{{allnum1||0}}</view>
  133. <view class="heji">均值:{{allavg1||0}}</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" style="margin-top: 20rpx;">
  166. <scroll-view style="height: 300rpx;" scroll-y="true" >
  167. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  168. <view class="jindu-boxche">
  169. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  170. <view style="width: 440rpx;margin-left: 10rpx;">
  171. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  172. </view>
  173. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  174. </view>
  175. </view>
  176. </scroll-view>
  177. </view>
  178. </view>
  179. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  180. <view class="single">
  181. <view class="title">
  182. <view class="title1">销讲指标执行率</view>
  183. </view>
  184. <view class="swiper-box">
  185. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1" @change="tapspagek3"
  186. inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
  187. </u-tabs-swiper>
  188. </view>
  189. <view class="jindu">
  190. <scroll-view style="height: 300rpx;" scroll-y="true" >
  191. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  192. <view class="jindu-boxche">
  193. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  194. <view style="width: 440rpx;margin-left: 10rpx;">
  195. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  196. </view>
  197. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  198. </view>
  199. </view>
  200. </scroll-view>
  201. </view>
  202. </view>
  203. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  204. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)" :default-value='selindex'></u-select>
  205. <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)" :default-value='selindex'></u-select>
  206. </view>
  207. </template>
  208. <script>
  209. var app = getApp();
  210. // var util = require("../../../utils/util.js");
  211. var config = require("../../../config");
  212. export default {
  213. data() {
  214. return {
  215. activeTotal: 4,
  216. activeTotal2: 0,
  217. houseId:'',
  218. timeobj:{
  219. statDateStart:'',
  220. statDateEnd:''
  221. },
  222. // 员工列表
  223. staffList:[],
  224. // 团队列表
  225. teamList:[],
  226. staffShow:false,
  227. staff:{
  228. value:'',
  229. label:''
  230. },
  231. team:{
  232. value:'',
  233. label:''
  234. },
  235. teamFlag:true,
  236. bocindex1:0,
  237. staffFlag:true,
  238. staffShow1:false,
  239. lastStartDate:'',
  240. lastEndDate :'',
  241. allnum:'',
  242. allavg:'',
  243. allnum1:'',
  244. allavg1:'',
  245. danwei:'单位(次)',
  246. totalTimeShow: false,
  247. activeTab: 0,
  248. numlist:[
  249. {name:'接待量',num:'10'},
  250. {name:'接待客户',num:'10'},
  251. {name:'平均执行率',num:'10'},
  252. {name:'接待时长',num:'10'},
  253. ],
  254. lineOptsect:{
  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. lineOptsect1:{
  264. "categories": [],
  265. "series": []
  266. },
  267. lineOptsect2:{
  268. "categories": ["2016","2017","2018","2019","2020","2021"],
  269. "series": [
  270. {
  271. "name": "成交量",
  272. "data": [35,8,25,37,4,20]
  273. }
  274. ]
  275. },
  276. newlistoj:[],
  277. newlistoj1:[
  278. {name:"接待量",id:1},
  279. {name:"平均执行率",id:2},
  280. {name:"接待客户",id:3},
  281. {name:"录音时长",id:5},
  282. ],
  283. bocindex:0,
  284. newlisttabinfo:[
  285. {name:'接待量',zxl:'10'},
  286. {name:'平均执行率',zxl:'50'},
  287. {name:'接待客户',zxl:'80'},
  288. ],
  289. newlisttabinfo1:[
  290. {name:'接待量',zxl:'10'},
  291. {name:'平均执行率',zxl:'50'},
  292. {name:'接待客户',zxl:'80'},
  293. ],
  294. Theteamcomparedisshow:false,
  295. Groupcontrastisshow:false,
  296. allechar:[],
  297. allList:[]
  298. };
  299. },
  300. onShow() {
  301. // 获取楼盘id
  302. this.houseId = uni.getStorageSync('buildingID').id;
  303. // 获取数据看板
  304. // 获取员工
  305. this.getStaffList()
  306. // 获取团队
  307. this.getSectionList()
  308. // 获取团队是否显示权限
  309. this.queryHaveDept()
  310. // 获取简报
  311. this.getReport()
  312. // 获取接待趋势
  313. this.getRtrent()
  314. // 获取维度
  315. this.getindexZxl()
  316. },
  317. methods: {
  318. queryHaveDept() {
  319. return new Promise((resolve, reject) => {
  320. this.$u.get("/user/queryHaveDept?houseId="+this.houseId).then(res => {
  321. this.permissions(res)
  322. })
  323. })
  324. },
  325. permissions(res){
  326. if(res==1){
  327. this.Theteamcomparedisshow=false;
  328. this.Groupcontrastisshow=false;
  329. return
  330. }
  331. let totle=uni.getStorageSync('weapp_session_userInfo_data').total;
  332. if(totle==1){
  333. this.Theteamcomparedisshow=true;
  334. this.Groupcontrastisshow=false;
  335. }else{
  336. this.Theteamcomparedisshow=true;
  337. this.Groupcontrastisshow=true;
  338. }
  339. },
  340. // 获取员工列表
  341. getStaffList(){
  342. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})
  343. .then(res=>{
  344. // console.log(res,'123')
  345. this.staffList=[]
  346. res.map(item=>{
  347. let obj={}
  348. obj.value=item.accountId
  349. obj.label=item.name
  350. this.staffList.push(obj)
  351. })
  352. this.staff=this.staffList[0]
  353. this.getAward()
  354. })
  355. },
  356. // 获取接待趋势
  357. getRtrent(){
  358. this.$u.post('/cusLvStatistics/receptionTrend',{
  359. houseId:this.houseId,
  360. timeType:this.lastEndDate?null:this.activeTotal,
  361. lastEndDate:this.lastEndDate,
  362. lastStartDate:this.lastStartDate
  363. })
  364. .then(res=>{
  365. // console.log(res)
  366. this.allechar=res
  367. this.tapspagek2(this.bocindex)
  368. })
  369. },
  370. // 销奖维度
  371. getindexZxl(){
  372. this.$u.post('/cusLvStatistics/indexZxl',{
  373. houseId:this.houseId,
  374. timeType:this.lastEndDate?null:this.activeTotal,
  375. lastEndDate:this.lastEndDate,
  376. lastStartDate:this.lastStartDate
  377. })
  378. .then(res=>{
  379. // console.log(res)
  380. // 处理销奖维度执行率
  381. // this.newlisttabinfo
  382. let arr=[]
  383. this.newlistoj=[]
  384. res.list.map((item,index)=>{
  385. arr.push({
  386. name:item.name,
  387. zxl:item.zxl
  388. })
  389. this.newlistoj.push({
  390. name:item.name,
  391. id:index
  392. })
  393. })
  394. this.newlisttabinfo=arr
  395. this.allList=res.list
  396. this.tapspagek3(this.bocindex1)
  397. })
  398. },
  399. // 获取简报
  400. getReport(){
  401. this.$u.post('/cusLvStatistics/xiaojiangAnalysis',{
  402. houseId:this.houseId,
  403. timeType:this.lastEndDate?null:this.activeTotal,
  404. lastEndDate:this.lastEndDate,
  405. lastStartDate:this.lastStartDate
  406. })
  407. .then(res=>{
  408. // 接待量
  409. this.numlist[0].num=res.receptionCount||0
  410. // 接待客户
  411. this.numlist[1].num=res.sumCustomer||0
  412. // 执行率
  413. this.numlist[2].num=(res.fraction||0)+'%'
  414. // 录音时长
  415. this.numlist[3].num=Math.floor(res.sumDuration/60) ||0
  416. // util.formatSecond()||0
  417. })
  418. },
  419. // 获取团队列表
  420. getSectionList(){
  421. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId',{houseId:this.houseId})
  422. .then(res=>{
  423. this.teamList=[]
  424. res.map(item=>{
  425. let obj={}
  426. obj.value=item.deptId
  427. obj.label=item.deptName
  428. this.teamList.push(obj)
  429. })
  430. this.team=this.teamList[0]
  431. this.receptionCountList()
  432. })
  433. },
  434. // 员工销奖趋势
  435. getAward(){
  436. if(this.staffList.length==0){
  437. this.staffFlag=false
  438. this.$forceUpdate()
  439. return
  440. }
  441. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{
  442. userA:this.staff.value,
  443. userB:'',
  444. houseId:this.houseId,
  445. timeType:this.lastEndDate?null:this.activeTotal+'',
  446. lastEndDate:this.lastEndDate,
  447. lastStartDate:this.lastStartDate
  448. })
  449. .then(res=>{
  450. this.allnum1=res.avg[0]
  451. this.allavg1=res.avg[1]
  452. // console.log(res)
  453. let first=res.first
  454. let second=res.second
  455. this.lineOptsect2.categories=[]
  456. this.lineOptsect2.series=[
  457. {
  458. name:first[0].accountName,
  459. data:[]
  460. }
  461. ]
  462. first.map(item=>{
  463. this.lineOptsect2.categories.push(item.statDate.slice(5,10))
  464. this.lineOptsect2.series[0].data.push(item.sumFraction)
  465. })
  466. })
  467. },
  468. // 团队接待趋势
  469. receptionCountList(){
  470. if(this.teamList.length==0){
  471. this.teamFlag=false
  472. this.$forceUpdate()
  473. return
  474. }
  475. this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate',{
  476. deptIds:this.team.value,
  477. showRank:1,
  478. houseId:this.houseId,
  479. timeType:this.lastEndDate?null:this.activeTotal+'',
  480. lastEndDate:this.lastEndDate,
  481. lastStartDate:this.lastStartDate
  482. })
  483. .then(res=>{
  484. // console.log(res)
  485. let result=res.result
  486. this.allnum=res.avg[0]
  487. this.allavg=res.avg[1]
  488. // 当选择趋势时
  489. this.lineOptsect1={}
  490. let allobj={
  491. categories:[],
  492. series:[]
  493. }
  494. // 先处理时间
  495. // 当选择全部时
  496. // 当选择只有一个时
  497. let obj={}
  498. obj.data=[]
  499. obj.name=result[0][0].deptName
  500. result[0].map(item=>{
  501. allobj.categories.push(item.statDate.slice(5,10))
  502. obj.data.push(item.data)
  503. })
  504. allobj.series.push(obj)
  505. this.lineOptsect1=allobj
  506. })
  507. },
  508. //时间切换
  509. tabtimetap(index) {
  510. if (index == 3) {
  511. this.totalTimeShow = true;
  512. } else {
  513. this.activeTotal = index;
  514. this.lastEndDate=''
  515. this.lastStartDate=''
  516. this.getdata()
  517. }
  518. },
  519. // 获取数据
  520. getdata(){
  521. this.receptionCountList()
  522. this.getReport()
  523. this.getRtrent()
  524. this.getindexZxl()
  525. this.getAward()
  526. },
  527. staffSelectCallback(e,idx){
  528. if(idx==0){
  529. this.staff=e[0]
  530. this.getAward()
  531. }else{
  532. this.team=e[0]
  533. this.receptionCountList()
  534. }
  535. // console.log(e,idx)
  536. },
  537. //自定义时间
  538. totalTimeChange(e) {
  539. console.log(e.startDate, e.endDate)
  540. this.activeTotal=3;
  541. this.lastEndDate=e.endDate
  542. this.lastStartDate=e.startDate
  543. this.getdata()
  544. },
  545. //指标执行率分析tab
  546. tapspagek2(index) {
  547. // console.log(index)
  548. // 对数据进行分析和处理
  549. // 先处理日期
  550. let allobj={
  551. "categories": [],
  552. "series": [
  553. {
  554. name:'接待量',
  555. data:[]
  556. }
  557. ]
  558. }
  559. if(index==0){
  560. // 接待量
  561. this.danwei='单位(次)'
  562. allobj.series[0].name='接待量'
  563. this.allechar.map(item=>{
  564. allobj.categories.push(item.statDate.slice(5,10))
  565. allobj.series[0].data.push(item.receptionCount)
  566. })
  567. }else if(index==1){
  568. // 平均执行率
  569. this.danwei='单位(%)'
  570. allobj.series[0].name='平均执行率'
  571. this.allechar.map(item=>{
  572. allobj.categories.push(item.statDate.slice(5,10))
  573. allobj.series[0].data.push(item.fraction)
  574. })
  575. }else if(index==2){
  576. // 接待客户
  577. this.danwei='单位(个)'
  578. allobj.series[0].name='接待客户'
  579. this.allechar.map(item=>{
  580. allobj.categories.push(item.statDate.slice(5,10))
  581. allobj.series[0].data.push(item.sumCustomer)
  582. })
  583. }else{
  584. // 录音时长
  585. this.danwei='单位(min)'
  586. allobj.series[0].name='录音时长'
  587. this.allechar.map(item=>{
  588. allobj.categories.push(item.statDate.slice(5,10))
  589. allobj.series[0].data.push(item.sumDuration)
  590. })
  591. }
  592. this.bocindex = index;
  593. // console.log(allobj)
  594. // return
  595. this.lineOptsect=allobj
  596. },
  597. tapspagek3(index){
  598. let arr=[]
  599. // return
  600. // console.log(index,this.allList[index])
  601. this.allList[index].children.map(item=>{
  602. arr.push({
  603. name:item.name,
  604. zxl:item.zxl
  605. })
  606. })
  607. this.newlisttabinfo1=arr
  608. this.bocindex1 = index;
  609. },
  610. //集团对比
  611. Groupcontrast(){
  612. uni.navigateTo({
  613. url: '/pages/center/Piabodata/Groupcontrast'
  614. });
  615. },
  616. //团队对比
  617. Theteamcompared(){
  618. if(this.teamList.length==0){
  619. uni.showToast({
  620. title:'没有团队呢',
  621. icon:'none'
  622. })
  623. return
  624. }
  625. uni.navigateTo({
  626. url: '/pages/center/Piabodata/Theteamcompared'
  627. });
  628. },
  629. //用户洞察
  630. toUserinsightinto(){
  631. uni.navigateTo({
  632. url: '/pages/center/Piabodata/Userinsightinto'
  633. });
  634. },
  635. //趋势分析
  636. toTrendAnalysis(){
  637. uni.navigateTo({
  638. url: '/pages/center/Piabodata/TrendAnalysis'
  639. });
  640. },
  641. //员工分析
  642. toStaffAnalysis(){
  643. if(this.staffList.length==0){
  644. uni.showToast({
  645. title:'没有团队呢',
  646. icon:'none'
  647. })
  648. return
  649. }
  650. uni.navigateTo({
  651. url: '/pages/center/Piabodata/StaffAnalysis'
  652. });
  653. }
  654. }
  655. };
  656. </script>
  657. <style lang="scss" scoped>
  658. .box {
  659. width: 100%;
  660. height: 100%;
  661. background: #FAFAFA;
  662. padding-bottom: 60rpx;
  663. }
  664. .Piabodata-box{
  665. width: 100%;
  666. background: #FFFFFF;
  667. display: flex;
  668. flex-wrap: wrap;
  669. padding-bottom: 30rpx;
  670. .Piabodata{
  671. width: 33.3%;
  672. .Piabodata-img{
  673. width: 100%;
  674. text-align: center;
  675. .Piabodata-img1{
  676. width: 134rpx;
  677. height: 134rpx;
  678. }
  679. }
  680. .Piabodata-text{
  681. width: 100%;
  682. text-align: center;
  683. font-size: 24rpx;
  684. font-weight: 400;
  685. color: #333333;
  686. margin-top: -10rpx;
  687. }
  688. }
  689. }
  690. .grid:nth-child(1){
  691. border-right:none ;
  692. border-bottom:none ;
  693. }
  694. .grid:nth-child(2){
  695. border-bottom:none ;
  696. }
  697. .grid:nth-child(3){
  698. border-right:none ;
  699. }
  700. </style>