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.
 
 
 
 

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