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.
 
 
 

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