AI销管
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.
 
 
 
 

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