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.
 
 
 
 

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