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.
 
 
 
 

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