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.
 
 
 
 

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