Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 

779 rader
19 KiB

  1. <template>
  2. <view class="pages">
  3. <!-- 日报内容部分 -->
  4. <view class="container" ref="lists">
  5. <!-- 头部日报卡 -->
  6. <view class="c-head-card">
  7. <view class="c-title-text">
  8. {{ projectName }}数智工牌日报
  9. </view>
  10. <text class="date">{{ weekObj.createTime | fomatDate }}</text>
  11. <view class="creative-time">
  12. 生成时间:{{ weekObj.createTime || '--' }}
  13. </view>
  14. </view>
  15. <view class="nodata-box" v-if="nodata">
  16. <image class="img" src="/static/images/nodata.png" mode="" />
  17. <view class="text">此项目今日还没有接待量哦~</view>
  18. </view>
  19. <view v-if="!nodata">
  20. <!-- 循环渲染的数据 -->
  21. <view class="dateList">
  22. <view class="arrs">
  23. <view class="arrs-items index1">
  24. <view class="left">
  25. 1
  26. </view>
  27. <view class="right">
  28. <view class="r-title">
  29. <text>接待量:</text>
  30. </view>
  31. <view class="r-box">
  32. <view class="r-box-item">
  33. <text>接待量</text><text class="value">{{ weekObj.receptionCount || 0 }}</text>
  34. </view>
  35. <view class="r-box-item">
  36. <text>有效接待</text><text class="value">{{ weekObj.activeCustomer || 0 }}</text>
  37. </view>
  38. <view class="r-box-item-lang">
  39. <view>有效接待率<text class="value">{{ weekObj.validReceptionRate || 0 }}%</text></view>
  40. <view class="contrast">对比昨天<text class="value"
  41. :class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="arrs-items index2">
  48. <view class="left">
  49. 2
  50. </view>
  51. <view class="right">
  52. <view class="r-title">
  53. <text>平均执行率:</text>
  54. </view>
  55. <view class="r-box">
  56. <view class="r-box-item-lang">
  57. <view>平均执行率<text class="value">{{ weekObj.fraction || 0 }}%</text></view>
  58. <view class="contrast">对比昨天<text class="value"
  59. :class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. <view class="arrs-items index3">
  66. <view class="left">
  67. 3
  68. </view>
  69. <view class="right">
  70. <view class="r-title">
  71. <text>平均接待时长:</text>
  72. </view>
  73. <view class="r-box">
  74. <view class="r-box-item-lang">
  75. <view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view>
  76. <view class="contrast">对比昨天<text class="value"
  77. :class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. <view class="arrs-items index4">
  84. <view class="left">
  85. 4
  86. </view>
  87. <view class="right">
  88. <view class="r-title">
  89. <text>销讲维度执行前三:</text>
  90. </view>
  91. <view class="ranking">
  92. <block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex">
  93. <view class="ranking-item">
  94. <view class="serial">
  95. {{ rankIndex+1 }}
  96. </view>
  97. <view class="lside">
  98. {{ rank.title || '--' }}
  99. </view>
  100. <view class="rside">
  101. ({{ rank.value || 0 }}%)
  102. </view>
  103. </view>
  104. </block>
  105. <template v-if="carryOutTop.length == 0">
  106. <view class="empty">
  107. 暂无数据
  108. </view>
  109. </template>
  110. </view>
  111. </view>
  112. </view>
  113. <view class="arrs-items index5">
  114. <view class="left">
  115. 5
  116. </view>
  117. <view class="right">
  118. <view class="r-title">
  119. <text>销讲维度执行弱项前三:</text>
  120. </view>
  121. <view class="ranking">
  122. <block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex">
  123. <view class="ranking-item">
  124. <view class="serial">
  125. {{ rankIndex+1 }}
  126. </view>
  127. <view class="lside">
  128. {{ rank.title || '--' }}
  129. </view>
  130. <view class="rside">
  131. ({{ rank.value || 0 }}%)
  132. </view>
  133. </view>
  134. </block>
  135. <template v-if="carryOutLast.length == 0">
  136. <view class="empty">
  137. 暂无数据
  138. </view>
  139. </template>
  140. </view>
  141. </view>
  142. </view>
  143. <view class="arrs-items index6">
  144. <view class="left">
  145. 6
  146. </view>
  147. <view class="right">
  148. <view class="r-title">
  149. <text>置业顾问平均执行率排名:</text>
  150. </view>
  151. <view class="ranking">
  152. <block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
  153. <view class="ranking-item">
  154. <view class="serial">
  155. {{ rankIndex+1 }}
  156. </view>
  157. <view class="lside">
  158. {{ rank.title || '--' }}
  159. </view>
  160. <view class="rside">
  161. ({{ rank.value || 0 }}%)
  162. </view>
  163. </view>
  164. </block>
  165. <template v-if="consultant.length == 0">
  166. <view class="empty">
  167. 暂无数据
  168. </view>
  169. </template>
  170. </view>
  171. </view>
  172. </view>
  173. <view class="arrs-items index7">
  174. <view class="left">
  175. 7
  176. </view>
  177. <view class="right">
  178. <view class="r-title">
  179. <text>置业顾问平均接访时长排名:</text>
  180. </view>
  181. <view class="ranking">
  182. <block v-for="(rank, rankIndex) in recording" :key="rankIndex">
  183. <view class="ranking-item">
  184. <view class="serial">
  185. {{ rankIndex+1 }}
  186. </view>
  187. <view class="lside">
  188. {{ rank.title || '--' }}
  189. </view>
  190. <view class="rside">
  191. ({{ rank.value || 0 }}min)
  192. </view>
  193. </view>
  194. </block>
  195. <template v-if="recording.length == 0">
  196. <view class="empty">
  197. 暂无数据
  198. </view>
  199. </template>
  200. </view>
  201. </view>
  202. </view>
  203. <view class="arrs-items index8">
  204. <view class="left">
  205. 8
  206. </view>
  207. <view class="right">
  208. <view class="r-title">
  209. <text>平均执行率最低的顾问:</text>
  210. </view>
  211. <view class="ranking">
  212. <block v-for="(rank, rankIndex) in lowest" :key="rankIndex">
  213. <view class="ranking-item">
  214. <view class="lside">
  215. {{ rank.title || '--' }}
  216. </view>
  217. <view class="rside value">
  218. {{ rank.value || 0 }}%
  219. </view>
  220. </view>
  221. </block>
  222. <template v-if="lowest.length == 0">
  223. <view class="empty">
  224. 暂无数据
  225. </view>
  226. </template>
  227. </view>
  228. </view>
  229. </view>
  230. <view class="arrs-items index9">
  231. <view class="left">
  232. 9
  233. </view>
  234. <view class="right">
  235. <view class="r-title">
  236. <text>客户画像触达:</text>
  237. <text class="num value">{{ weekObj.reachSum || 0 }}次</text>
  238. </view>
  239. </view>
  240. </view>
  241. <view class="arrs-items index10">
  242. <view class="left">
  243. 10
  244. </view>
  245. <view class="right">
  246. <view class="r-title">
  247. <text>未标记接待数:</text>
  248. <text class="num value down"
  249. style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text>
  250. <text class="down value">条</text>
  251. </view>
  252. </view>
  253. </view>
  254. <view class="arrs-items index11">
  255. <view class="left">
  256. 11
  257. </view>
  258. <view class="right">
  259. <view class="r-title">
  260. <text>设备情况:</text>
  261. </view>
  262. <view class="r-box">
  263. <view class="r-box-item-lang">
  264. <view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text></view>
  265. <view style="margin-left: 24rpx;">
  266. 离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text></view>
  267. </view>
  268. </view>
  269. </view>
  270. </view>
  271. </view>
  272. </view>
  273. </view>
  274. </view>
  275. <!-- 底部按钮 -->
  276. <view class="nav-footer" v-if="!nodata">
  277. <view class="footer-item" @click="toHome">
  278. 回到管理端
  279. </view>
  280. <view class="footer-item" @click="copy" style="margin-left: 24rpx;">
  281. 复制内容
  282. </view>
  283. <view class="footer-item full" style="margin-left: 24rpx;">
  284. <button open-type="share" class="fulls">
  285. 一键转发
  286. </button>
  287. </view>
  288. </view>
  289. </view>
  290. </template>
  291. <script>
  292. export default {
  293. data() {
  294. return {
  295. needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容
  296. carryOutTop: [], //
  297. carryOutLast: [], //
  298. consultant: [], // 置业顾问排名
  299. recording: [], // 录音排名
  300. lowest: [], // 执行率最低的顾问
  301. building: uni.getStorageSync('buildingID'),
  302. id: '', // 消息id
  303. projectName: '', // 项目名称
  304. weekObj: {}, // 日报详情
  305. nodata: false//有无数据
  306. }
  307. },
  308. onLoad(option) {
  309. if (option.id) this.id = option.id
  310. this.getMessage()
  311. },
  312. onShareAppMessage() {
  313. return {
  314. title: `${this.projectName}数智工牌日报`,
  315. path: `/pages/reportExcel/dayReport?id=${this.id}`
  316. }
  317. },
  318. methods: {
  319. // 跳转首页
  320. toHome() {
  321. uni.navigateTo({
  322. url: '/pages/index/guide'
  323. })
  324. },
  325. // 获取日报详情
  326. getMessage() {
  327. this.$u.get('/zkMessage/findByProjectId', {
  328. id: this.id
  329. }).then(res => {
  330. let data = {}
  331. if(res.zkMessage.content){
  332. data = JSON.parse(res.zkMessage.content)
  333. this.weekObj = {
  334. ...res.zkMessage,
  335. ...data
  336. }
  337. this.nodata = false
  338. }else{
  339. this.nodata = true
  340. this.weekObj = {
  341. ...res.zkMessage
  342. }
  343. }
  344. this.projectName = res.projectName
  345. console.log(this.weekObj)
  346. this.init()
  347. }).catch(e => {
  348. console.log(e)
  349. })
  350. },
  351. copy() {
  352. let str = `
  353. ${this.projectName}数智工牌日报
  354. 生成时间:${this.weekObj.createTime || '--'}
  355. 1、接待量:${this.weekObj.receptionCount || 0 }
  356. 有效接待:${this.weekObj.activeCustomer || 0}
  357. 有效接待率:${this.weekObj.validReceptionRate || 0}%
  358. 对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
  359. 2、平均执行率:${ this.weekObj.fraction || 0 }%
  360. 对比昨天:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
  361. 3、平均接待时长:${ this.weekObj.avgDuration || 0 }min
  362. 对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
  363. if (this.carryOutTop.length > 0) {
  364. str += `
  365. 4、销讲维度执行前三:`
  366. this.carryOutTop.map((item, index) => {
  367. str += `
  368. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  369. })
  370. }
  371. if (this.carryOutLast.length > 0) {
  372. str += `
  373. 5、销讲维度执行弱项前三:`
  374. this.carryOutLast.map((item, index) => {
  375. str += `
  376. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  377. })
  378. }
  379. if (this.consultant.length > 0) {
  380. str += `
  381. 6、置业顾问平均执行率排名:`
  382. this.consultant.map((item, index) => {
  383. str += `
  384. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  385. })
  386. }
  387. if (this.recording.length > 0) {
  388. str += `
  389. 7、置业顾问平均接访时长排名:`
  390. this.recording.map((item, index) => {
  391. str += `
  392. top${index+1}.${item.title || '--'}${item.value||'0'}min`
  393. })
  394. }
  395. if (this.lowest.length > 0) {
  396. str += `
  397. 8、平均执行率最低的顾问:`
  398. this.lowest.map((item, index) => {
  399. str += `
  400. ${item.title || '--'}${item.value||'0'}%`
  401. })
  402. }
  403. str += `
  404. 9、客户画像触达:${this.weekObj.reachSum || 0}次
  405. 10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条
  406. 11、设备情况:
  407. 在线:${this.weekObj.equipmentInfo.onlineNum || 0}
  408. 离线:${this.weekObj.equipmentInfo.offlineNum || 0}`
  409. uni.setClipboardData({
  410. data: str
  411. })
  412. },
  413. // 分割数组排名前三,倒三
  414. getTopThree() {
  415. if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) {
  416. let arr = this.weekObj.XJTopList.slice(0, 3)
  417. arr.forEach(item => {
  418. if (item.value != 100) {
  419. this.carryOutLast.push(item)
  420. }
  421. })
  422. this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3)
  423. console.log(this.weekObj.XJTopList)
  424. }
  425. if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) {
  426. this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3)
  427. if (this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1].value != 100) {
  428. this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1])
  429. }
  430. }
  431. if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) {
  432. this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3)
  433. }
  434. },
  435. init() {
  436. // 把对象转成数组并在后续的步骤方便处理
  437. this.needList.forEach(item => {
  438. if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
  439. this.weekObj[item + 'List'] = [] // 销讲执行
  440. for (let i in this.weekObj[item]) {
  441. this.weekObj[item + 'List'].push({
  442. title: i,
  443. value: this.weekObj[item][i]
  444. })
  445. }
  446. }
  447. })
  448. this.sortInitArr()
  449. },
  450. // 排序对象转换后的数组
  451. sortInitArr() {
  452. this.needList.forEach(item => {
  453. if (this.weekObj[item + 'List']) {
  454. this.bubbleSort(this.weekObj[item + 'List'])
  455. }
  456. })
  457. this.getTopThree()
  458. },
  459. // 冒泡排序
  460. bubbleSort(arr) {
  461. for (let i = 0; i < arr.length - 1; i += 1) {
  462. //通过 arr.length 次把第一位放到最后,完成排序
  463. //-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位
  464. for (let j = 0; j < arr.length - 1 - i; j += 1) {
  465. if (arr[j].value > arr[j + 1].value) {
  466. const temp = arr[j];
  467. arr[j] = arr[j + 1];
  468. arr[j + 1] = temp;
  469. }
  470. }
  471. }
  472. },
  473. },
  474. filters: {
  475. fomatDate(date) {
  476. if (!date) return '--'
  477. let arr = date.split(' ')
  478. let str = arr[0]
  479. let result = str.split('-')
  480. return `${result[1]}-${result[2]}`
  481. }
  482. }
  483. }
  484. </script>
  485. <style lang="scss" scoped>
  486. .pages {
  487. width: 100vw;
  488. min-height: 100vh;
  489. display: flex;
  490. flex-direction: column;
  491. .nav-header {
  492. flex-shrink: 0;
  493. }
  494. .container {
  495. padding: 30rpx 30rpx 0;
  496. flex-grow: 1;
  497. display: flex;
  498. flex-direction: column;
  499. .c-head-card {
  500. padding: 30rpx;
  501. width: 100%;
  502. min-height: 252rpx;
  503. border: 2rpx solid #000000;
  504. border-radius: 12rpx;
  505. box-shadow: 10rpx 10rpx #2671E2;
  506. display: flex;
  507. flex-direction: column;
  508. .c-title-text {
  509. // position: relative;
  510. flex-grow: 1;
  511. font-size: 48rpx;
  512. font-weight: bold;
  513. color: #303030;
  514. }
  515. .date {
  516. // position: absolute;
  517. // right: 0;
  518. // bottom: 6rpx;
  519. font-size: 30rpx;
  520. color: #303030;
  521. }
  522. .creative-time {
  523. margin: 20rpx 0 0 0;
  524. flex-shrink: 0;
  525. }
  526. }
  527. .dateList {
  528. width: 100%;
  529. .arrs {
  530. width: 100%;
  531. .arrs-items {
  532. margin: 40rpx 0 0 0;
  533. display: flex;
  534. min-height: 100rpx;
  535. .left {
  536. flex-shrink: 0;
  537. margin-right: 12rpx;
  538. width: 48rpx;
  539. height: 44rpx;
  540. display: flex;
  541. justify-content: center;
  542. align-items: center;
  543. border-radius: 8rpx;
  544. border: 1rpx solid #999999;
  545. font-size: 32rpx;
  546. }
  547. .right {
  548. flex-grow: 1;
  549. .r-title {
  550. font-size: 32rpx;
  551. height: 44rpx;
  552. display: flex;
  553. align-items: center;
  554. .num {
  555. font-size: 34rpx;
  556. }
  557. }
  558. .r-box {
  559. padding: 21rpx 0 0 0;
  560. display: flex;
  561. flex-wrap: wrap;
  562. .r-box-item {
  563. margin-right: 24rpx;
  564. }
  565. .r-box-item-lang {
  566. margin-top: 19rpx;
  567. width: 100%;
  568. display: flex;
  569. align-items: center;
  570. .contrast {
  571. margin: 0 0 0 24rpx;
  572. display: flex;
  573. align-items: center;
  574. }
  575. .down {
  576. color: #43CD80;
  577. font-size: 34rpx;
  578. }
  579. .up {
  580. font-size: 34rpx;
  581. color: #E7483C;
  582. }
  583. }
  584. }
  585. .ranking {
  586. padding: 21rpx 0 0 0;
  587. display: flex;
  588. flex-direction: column;
  589. .ranking-item {
  590. margin-bottom: 22rpx;
  591. display: flex;
  592. align-items: center;
  593. font-size: 30rpx;
  594. .serial {
  595. flex-shrink: 0;
  596. width: 42rpx;
  597. height: 42rpx;
  598. background: #2671E2;
  599. border-radius: 50%;
  600. display: flex;
  601. justify-content: center;
  602. align-items: center;
  603. color: #fff;
  604. }
  605. .lside {
  606. margin: 0 20rpx;
  607. color: #505050;
  608. }
  609. .rside {
  610. flex-shrink: 0;
  611. font-size: 32rpx;
  612. }
  613. }
  614. }
  615. }
  616. }
  617. }
  618. }
  619. }
  620. .nav-footer {
  621. position: sticky;
  622. bottom: 0;
  623. padding: 32rpx;
  624. width: 100%;
  625. display: flex;
  626. justify-content: center;
  627. background: #fff;
  628. .footer-item {
  629. flex: 1;
  630. height: 88rpx;
  631. display: flex;
  632. justify-content: center;
  633. align-items: center;
  634. color: #2671E2;
  635. border: 2rpx solid #2671E2;
  636. border-radius: 8rpx;
  637. overflow: hidden;
  638. font-size: 32rpx;
  639. &.full {
  640. background: #2671E2;
  641. color: #fff;
  642. .fulls {
  643. box-sizing: border-box;
  644. width: 100%;
  645. height: 100%;
  646. background: transparent;
  647. color: #fff;
  648. font-size: 32rpx;
  649. font-weight: normal;
  650. line-height: 88rpx;
  651. }
  652. }
  653. }
  654. }
  655. .up {
  656. color: #43CD80 !important;
  657. }
  658. .down {
  659. color: #E6273A !important;
  660. }
  661. .empty {
  662. width: 100%;
  663. line-height: 48rpx;
  664. }
  665. .value {
  666. margin-left: 5rpx;
  667. font-size: 30rpx !important;
  668. font-weight: bold !important;
  669. }
  670. .nodata-box{
  671. width: 750rpx;
  672. margin: 20rpx auto 0;
  673. display: flex;
  674. justify-content: center;
  675. align-items: center;
  676. flex-direction: column;
  677. background-color: #fff;
  678. .img{
  679. width: 400rpx;
  680. height: 400rpx;
  681. }
  682. .text{
  683. text-align: center;
  684. font-size: 28rpx;
  685. font-family: PingFangSC-Regular, PingFang SC;
  686. font-weight: 400;
  687. color: #666666;
  688. line-height: 40rpx;
  689. // margin-top: -40rpx;
  690. }
  691. }
  692. }
  693. </style>