Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

1055 linhas
26 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>
  40. </view>
  41. <view class="contrast">对比昨天<text class="value"
  42. :class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="arrs-items index2">
  49. <view class="left">
  50. 2
  51. </view>
  52. <view class="right">
  53. <view class="r-title">
  54. <text v-if="!weekObj.orgCode">平均执行率:</text>
  55. <text v-else>销讲执行率:</text>
  56. </view>
  57. <view class="r-box">
  58. <view class="r-box-item-lang">
  59. <view>
  60. <text v-if="!weekObj.orgCode">平均执行率:</text>
  61. <text v-else>销讲执行率:</text>
  62. <text class="value">{{ weekObj.fraction || 0 }}%</text>
  63. </view>
  64. <view class="contrast">对比昨天<text class="value"
  65. :class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="arrs-items index3">
  72. <view class="left">
  73. 3
  74. </view>
  75. <view class="right">
  76. <view class="r-title">
  77. <text>平均接待时长:</text>
  78. </view>
  79. <view class="r-box">
  80. <view class="r-box-item-lang">
  81. <view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view>
  82. <view class="contrast">对比昨天<text class="value"
  83. :class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="arrs-items index4">
  90. <view class="left">
  91. 4
  92. </view>
  93. <view class="right">
  94. <view class="r-title">
  95. <text v-if="!weekObj.orgCode">销讲维度执行前三:</text>
  96. <text v-else>项目平均执行率排名:</text>
  97. </view>
  98. <template v-if="!weekObj.orgCode">
  99. <view class="ranking">
  100. <block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex">
  101. <view class="ranking-item">
  102. <view class="serial">
  103. {{ rankIndex+1 }}
  104. </view>
  105. <view class="lside">
  106. {{ rank.title || '--' }}
  107. </view>
  108. <view class="rside">
  109. ({{ rank.value || 0 }}%)
  110. </view>
  111. </view>
  112. </block>
  113. <template v-if="carryOutTop.length == 0">
  114. <view class="empty">
  115. 暂无数据
  116. </view>
  117. </template>
  118. </view>
  119. </template>
  120. <template v-else>
  121. <!-- consultant -->
  122. <view class="ranking">
  123. <block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
  124. <view class="ranking-item">
  125. <view class="serial">
  126. {{ rankIndex+1 }}
  127. </view>
  128. <view class="lside">
  129. {{ rank.title || '--' }}
  130. </view>
  131. <view class="rside">
  132. ({{ rank.value || 0 }}%)
  133. </view>
  134. </view>
  135. </block>
  136. <template v-if="consultant.length == 0">
  137. <view class="empty">
  138. 暂无数据
  139. </view>
  140. </template>
  141. </view>
  142. </template>
  143. </view>
  144. </view>
  145. <view class="arrs-items index5">
  146. <view class="left">
  147. 5
  148. </view>
  149. <view class="right">
  150. <view class="r-title">
  151. <text v-if="!weekObj.orgCode">销讲维度执行弱项前三:</text>
  152. <text v-else>项目平均接访时长排名:</text>
  153. </view>
  154. <template v-if="!weekObj.orgCode">
  155. <view class="ranking">
  156. <block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex">
  157. <view class="ranking-item">
  158. <view class="serial">
  159. {{ rankIndex+1 }}
  160. </view>
  161. <view class="lside">
  162. {{ rank.title || '--' }}
  163. </view>
  164. <view class="rside">
  165. ({{ rank.value || 0 }}%)
  166. </view>
  167. </view>
  168. </block>
  169. <template v-if="carryOutLast.length == 0">
  170. <view class="empty">
  171. 暂无数据
  172. </view>
  173. </template>
  174. </view>
  175. </template>
  176. <template v-else>
  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. ({{ tofixed2(rank.value/60) || 0 }}m)
  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. </template>
  198. </view>
  199. </view>
  200. <view class="arrs-items index6" v-if="!weekObj.orgCode">
  201. <view class="left">
  202. 6
  203. </view>
  204. <view class="right">
  205. <view class="r-title">
  206. <text>置业顾问平均执行率排名:</text>
  207. </view>
  208. <view class="ranking">
  209. <block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
  210. <view class="ranking-item">
  211. <view class="serial">
  212. {{ rankIndex+1 }}
  213. </view>
  214. <view class="lside">
  215. {{ rank.title || '--' }}
  216. </view>
  217. <view class="rside">
  218. ({{ rank.value || 0 }}%)
  219. </view>
  220. </view>
  221. </block>
  222. <template v-if="consultant.length == 0">
  223. <view class="empty">
  224. 暂无数据
  225. </view>
  226. </template>
  227. </view>
  228. </view>
  229. </view>
  230. <view class="arrs-items index7" v-if="!weekObj.orgCode">
  231. <view class="left">
  232. 7
  233. </view>
  234. <view class="right">
  235. <view class="r-title">
  236. <text>置业顾问平均接访时长排名:</text>
  237. </view>
  238. <view class="ranking">
  239. <block v-for="(rank, rankIndex) in recording" :key="rankIndex">
  240. <view class="ranking-item">
  241. <view class="serial">
  242. {{ rankIndex+1 }}
  243. </view>
  244. <view class="lside">
  245. {{ rank.title || '--' }}
  246. </view>
  247. <view class="rside">
  248. ({{ rank.value || 0 }}min)
  249. </view>
  250. </view>
  251. </block>
  252. <template v-if="recording.length == 0">
  253. <view class="empty">
  254. 暂无数据
  255. </view>
  256. </template>
  257. </view>
  258. </view>
  259. </view>
  260. <view class="arrs-items index8">
  261. <view class="left">
  262. <template v-if="!weekObj.orgCode">
  263. 8
  264. </template>
  265. <template v-else>
  266. 6
  267. </template>
  268. </view>
  269. <view class="right">
  270. <view class="r-title">
  271. <text v-if="!weekObj.orgCode">平均执行率最低的顾问:</text>
  272. <text v-else>执行率最低的项目:</text>
  273. </view>
  274. <template v-if="!weekObj.orgCode">
  275. <view class="ranking">
  276. <block v-for="(rank, rankIndex) in lowest" :key="rankIndex">
  277. <view class="ranking-item">
  278. <view class="lside">
  279. {{ rank.title || '--' }}
  280. </view>
  281. <view class="rside value">
  282. {{ rank.value || 0 }}%
  283. </view>
  284. </view>
  285. </block>
  286. <template v-if="lowest.length == 0">
  287. <view class="empty">
  288. 暂无数据
  289. </view>
  290. </template>
  291. </view>
  292. </template>
  293. <template v-else>
  294. <view class="ranking">
  295. <block v-for="(rank, rankIndex) in weekObj.minFraction" :key="rankIndex">
  296. <view class="ranking-item">
  297. <view class="lside">
  298. {{ rankIndex || '--' }}
  299. </view>
  300. <view class="rside value">
  301. {{ rank || 0 }}%
  302. </view>
  303. </view>
  304. </block>
  305. <template v-if="!weekObj.minFraction">
  306. <view class="empty">
  307. 暂无数据
  308. </view>
  309. </template>
  310. </view>
  311. </template>
  312. </view>
  313. </view>
  314. <view class="arrs-items index9">
  315. <view class="left">
  316. <template v-if="!weekObj.orgCode">
  317. 9
  318. </template>
  319. <template v-else>
  320. 7
  321. </template>
  322. </view>
  323. <view class="right">
  324. <view class="r-title">
  325. <text>客户画像触达:</text>
  326. <text class="num value">{{ weekObj.reachSum || 0 }}次</text>
  327. </view>
  328. </view>
  329. </view>
  330. <view class="arrs-items index8" v-if="weekObj.orgCode">
  331. <view class="left">
  332. 8
  333. </view>
  334. <view class="right">
  335. <view class="r-title">
  336. <text>画像一级触达接待前三:</text>
  337. </view>
  338. <view class="ranking">
  339. <block v-for="(rank, rankIndex) in weekObj.level1List" :key="rankIndex">
  340. <view class="ranking-item">
  341. <view class="lside">
  342. {{ rank.name || '--' }}
  343. </view>
  344. <view class="rside value">
  345. ({{ rank.total || 0 }})
  346. </view>
  347. </view>
  348. </block>
  349. <template v-if="!weekObj.level1List || weekObj.level1List.length == 0">
  350. <view class="empty">
  351. 暂无数据
  352. </view>
  353. </template>
  354. </view>
  355. </view>
  356. </view>
  357. <view class="arrs-items index8" v-if="weekObj.orgCode">
  358. <view class="left">
  359. 9
  360. </view>
  361. <view class="right">
  362. <view class="r-title">
  363. <text>画像关键词触达接待前三:</text>
  364. </view>
  365. <view class="ranking">
  366. <block v-for="(rank, rankIndex) in weekObj.level2List" :key="rankIndex">
  367. <view class="ranking-item">
  368. <view class="lside">
  369. {{ rank.name || '--' }}
  370. </view>
  371. <view class="rside value">
  372. ({{ rank.total || 0 }})
  373. </view>
  374. </view>
  375. </block>
  376. <template v-if="!weekObj.level2List || weekObj.level2List.length == 0">
  377. <view class="empty">
  378. 暂无数据
  379. </view>
  380. </template>
  381. </view>
  382. </view>
  383. </view>
  384. <view class="arrs-items index10">
  385. <view class="left">
  386. <template v-if="!weekObj.orgCode">
  387. 12
  388. </template>
  389. <template v-else>
  390. 10
  391. </template>
  392. </view>
  393. <view class="right">
  394. <view class="r-title">
  395. <text>未标记接待数:</text>
  396. <text class="num value down"
  397. style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text>
  398. <text class="down value">条</text>
  399. </view>
  400. </view>
  401. </view>
  402. <view class="arrs-items index11">
  403. <view class="left">
  404. <template v-if="!weekObj.orgCode">
  405. 13
  406. </template>
  407. <template v-else>
  408. 11
  409. </template>
  410. </view>
  411. <view class="right">
  412. <view class="r-title">
  413. <text>设备情况:</text>
  414. </view>
  415. <view class="r-box">
  416. <view class="r-box-item-lang">
  417. <view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text>
  418. </view>
  419. <view style="margin-left: 24rpx;">
  420. 离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text>
  421. </view>
  422. </view>
  423. </view>
  424. </view>
  425. </view>
  426. </view>
  427. </view>
  428. </view>
  429. </view>
  430. <!-- 底部按钮 -->
  431. <view class="nav-footer" v-if="!nodata">
  432. <view class="footer-item" @click="toHome">
  433. 回到管理端
  434. </view>
  435. <view class="footer-item" @click="copy" style="margin-left: 24rpx;">
  436. 复制内容
  437. </view>
  438. <view class="footer-item full" style="margin-left: 24rpx;" @tap="forShare">
  439. <button open-type="share" class="fulls">
  440. 一键转发
  441. </button>
  442. </view>
  443. </view>
  444. </view>
  445. </template>
  446. <script>
  447. export default {
  448. data() {
  449. return {
  450. needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容
  451. carryOutTop: [], //
  452. carryOutLast: [], //
  453. consultant: [], // 置业顾问排名
  454. recording: [], // 录音排名
  455. lowest: [], // 执行率最低的顾问
  456. building: uni.getStorageSync('buildingID'),
  457. id: '', // 消息id
  458. projectName: '', // 项目名称
  459. weekObj: {}, // 日报详情
  460. nodata: false //有无数据
  461. }
  462. },
  463. onLoad(option) {
  464. if (option.id) this.id = option.id
  465. this.getMessage()
  466. },
  467. onShareAppMessage() {
  468. return {
  469. title: `${this.projectName}数智工牌日报`,
  470. path: `/pages/reportExcel/dayReport?id=${this.id}`
  471. }
  472. },
  473. methods: {
  474. tofixed2(time) {
  475. if (time) {
  476. return time.toFixed(2)
  477. } else {
  478. return 0
  479. }
  480. },
  481. // 项目拷贝
  482. copys() {
  483. let str = `
  484. ${this.projectName}数智工牌日报
  485. 生成时间:${this.weekObj.createTime || '--'}
  486. 1、接待量:${this.weekObj.receptionCount || 0 }
  487. 有效接待:${this.weekObj.activeCustomer || 0}
  488. 有效接待率:${this.weekObj.validReceptionRate || 0}%
  489. 对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
  490. 2、平均执行率:${ this.weekObj.fraction || 0 }%
  491. 销讲执行率:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
  492. 3、平均接待时长:${ this.weekObj.avgDuration || 0 }min
  493. 对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
  494. if (this.consultant.length > 0) {
  495. str += `
  496. 4、项目平均执行率排名:`
  497. this.consultant.map((item, index) => {
  498. str += `
  499. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  500. })
  501. }
  502. if (this.recording.length > 0) {
  503. str += `
  504. 5、项目平均接访时长排名:`
  505. this.recording.map((item, index) => {
  506. str += `
  507. top${index+1}.${item.title || '--'}${this.tofixed2(item.value/60)||'0'}m`
  508. })
  509. }
  510. if (this.lowest.length > 0) {
  511. str += `
  512. 6、执行率最低的项目:`
  513. for (let i in this.weekObj.minFraction) {
  514. str += `
  515. ${i || '--'}${this.weekObj.minFraction[i]||'0'}%`
  516. }
  517. }
  518. str += `
  519. 7、客户画像触达:${this.weekObj.reachSum || 0}次`
  520. if (this.weekObj.level1List.length > 0) {
  521. str += `
  522. 8、画像一级触达接待前三
  523. `
  524. this.weekObj.level1List.map((item, index) => {
  525. str += `
  526. top${index+1}.${item.name || '--'}${item.total||'0'}%`
  527. })
  528. }
  529. if (this.weekObj.level1List.length > 0) {
  530. str += `
  531. 9、画像关键词触达接待前三
  532. `
  533. this.weekObj.level1List.map((item, index) => {
  534. str += `
  535. top${index+1}.${item.name || '--'}${item.total||'0'}%`
  536. })
  537. }
  538. str += `
  539. 10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条
  540. 11、设备情况:
  541. 在线:${this.weekObj.equipmentInfo.onlineNum || 0}
  542. 离线:${this.weekObj.equipmentInfo.offlineNum || 0}`
  543. uni.setClipboardData({
  544. data: str
  545. })
  546. },
  547. forShare() {
  548. this.$u.get("/zkMessage/shareMessage", {
  549. id: this.id,
  550. houseId: uni.getStorageSync('buildingID').id
  551. })
  552. },
  553. // 跳转首页
  554. toHome() {
  555. uni.navigateTo({
  556. url: '/pages/index/guide'
  557. })
  558. },
  559. // 获取日报详情
  560. getMessage() {
  561. this.$u.get('/zkMessage/findByProjectId', {
  562. id: this.id,
  563. houseId: uni.getStorageSync('buildingID').id
  564. }).then(res => {
  565. let data = {}
  566. if (res.zkMessage.content) {
  567. data = JSON.parse(res.zkMessage.content)
  568. this.weekObj = {
  569. ...res.zkMessage,
  570. ...data
  571. }
  572. this.nodata = false
  573. } else {
  574. this.nodata = true
  575. this.weekObj = {
  576. ...res.zkMessage
  577. }
  578. }
  579. this.projectName = res.projectName
  580. console.log(this.weekObj)
  581. this.init()
  582. }).catch(e => {
  583. console.log(e)
  584. })
  585. },
  586. copy() {
  587. if (this.weekObj.orgCode) return this.copys()
  588. let str = `
  589. ${this.projectName}数智工牌日报
  590. 生成时间:${this.weekObj.createTime || '--'}
  591. 1、接待量:${this.weekObj.receptionCount || 0 }
  592. 有效接待:${this.weekObj.activeCustomer || 0}
  593. 有效接待率:${this.weekObj.validReceptionRate || 0}%
  594. 对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
  595. 2、平均执行率:${ this.weekObj.fraction || 0 }%
  596. 对比昨天:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
  597. 3、平均接待时长:${ this.weekObj.avgDuration || 0 }min
  598. 对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
  599. if (this.carryOutTop.length > 0) {
  600. str += `
  601. 4、销讲维度执行前三:`
  602. this.carryOutTop.map((item, index) => {
  603. str += `
  604. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  605. })
  606. }
  607. if (this.carryOutLast.length > 0) {
  608. str += `
  609. 5、销讲维度执行弱项前三:`
  610. this.carryOutLast.map((item, index) => {
  611. str += `
  612. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  613. })
  614. }
  615. if (this.consultant.length > 0) {
  616. str += `
  617. 6、置业顾问平均执行率排名:`
  618. this.consultant.map((item, index) => {
  619. str += `
  620. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  621. })
  622. }
  623. if (this.recording.length > 0) {
  624. str += `
  625. 7、置业顾问平均接访时长排名:`
  626. this.recording.map((item, index) => {
  627. str += `
  628. top${index+1}.${item.title || '--'}${item.value||'0'}min`
  629. })
  630. }
  631. if (this.lowest.length > 0) {
  632. str += `
  633. 8、平均执行率最低的顾问:`
  634. this.lowest.map((item, index) => {
  635. str += `
  636. ${item.title || '--'}${item.value||'0'}%`
  637. })
  638. }
  639. str += `
  640. 9、客户画像触达:${this.weekObj.reachSum || 0}次
  641. 10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条
  642. 11、设备情况:
  643. 在线:${this.weekObj.equipmentInfo.onlineNum || 0}
  644. 离线:${this.weekObj.equipmentInfo.offlineNum || 0}`
  645. uni.setClipboardData({
  646. data: str
  647. })
  648. },
  649. // 分割数组排名前三,倒三
  650. getTopThree() {
  651. if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) {
  652. let arr = this.weekObj.XJTopList.slice(0, 3)
  653. arr.forEach(item => {
  654. if (item.value != 100) {
  655. this.carryOutLast.push(item)
  656. }
  657. })
  658. this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3)
  659. console.log(this.weekObj.XJTopList)
  660. }
  661. if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) {
  662. this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3)
  663. if (this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1].value != 100) {
  664. this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1])
  665. }
  666. }
  667. if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) {
  668. this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3)
  669. }
  670. },
  671. init() {
  672. // 把对象转成数组并在后续的步骤方便处理
  673. this.needList.forEach(item => {
  674. if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
  675. this.weekObj[item + 'List'] = [] // 销讲执行
  676. for (let i in this.weekObj[item]) {
  677. this.weekObj[item + 'List'].push({
  678. title: i,
  679. value: this.weekObj[item][i]
  680. })
  681. }
  682. }
  683. })
  684. this.sortInitArr()
  685. },
  686. // 排序对象转换后的数组
  687. sortInitArr() {
  688. this.needList.forEach(item => {
  689. if (this.weekObj[item + 'List']) {
  690. this.bubbleSort(this.weekObj[item + 'List'])
  691. }
  692. })
  693. this.getTopThree()
  694. },
  695. // 冒泡排序
  696. bubbleSort(arr) {
  697. for (let i = 0; i < arr.length - 1; i += 1) {
  698. //通过 arr.length 次把第一位放到最后,完成排序
  699. //-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位
  700. for (let j = 0; j < arr.length - 1 - i; j += 1) {
  701. if (arr[j].value > arr[j + 1].value) {
  702. const temp = arr[j];
  703. arr[j] = arr[j + 1];
  704. arr[j + 1] = temp;
  705. }
  706. }
  707. }
  708. },
  709. },
  710. filters: {
  711. fomatDate(date) {
  712. if (!date) return '--'
  713. let arr = date.split(' ')
  714. let str = arr[0]
  715. let result = str.split('-')
  716. return `${result[1]}-${result[2]}`
  717. }
  718. }
  719. }
  720. </script>
  721. <style lang="scss" scoped>
  722. .pages {
  723. width: 100vw;
  724. min-height: 100vh;
  725. display: flex;
  726. flex-direction: column;
  727. .nav-header {
  728. flex-shrink: 0;
  729. }
  730. .container {
  731. padding: 30rpx 30rpx 0;
  732. flex-grow: 1;
  733. display: flex;
  734. flex-direction: column;
  735. .c-head-card {
  736. padding: 30rpx;
  737. width: 100%;
  738. min-height: 252rpx;
  739. border: 2rpx solid #000000;
  740. border-radius: 12rpx;
  741. box-shadow: 10rpx 10rpx #2671E2;
  742. display: flex;
  743. flex-direction: column;
  744. .c-title-text {
  745. // position: relative;
  746. flex-grow: 1;
  747. font-size: 48rpx;
  748. font-weight: bold;
  749. color: #303030;
  750. }
  751. .date {
  752. // position: absolute;
  753. // right: 0;
  754. // bottom: 6rpx;
  755. font-size: 30rpx;
  756. color: #303030;
  757. }
  758. .creative-time {
  759. margin: 20rpx 0 0 0;
  760. flex-shrink: 0;
  761. }
  762. }
  763. .dateList {
  764. width: 100%;
  765. .arrs {
  766. width: 100%;
  767. .arrs-items {
  768. margin: 40rpx 0 0 0;
  769. display: flex;
  770. min-height: 100rpx;
  771. .left {
  772. flex-shrink: 0;
  773. margin-right: 12rpx;
  774. width: 48rpx;
  775. height: 44rpx;
  776. display: flex;
  777. justify-content: center;
  778. align-items: center;
  779. border-radius: 8rpx;
  780. border: 1rpx solid #999999;
  781. font-size: 32rpx;
  782. }
  783. .right {
  784. flex-grow: 1;
  785. .r-title {
  786. font-size: 32rpx;
  787. height: 44rpx;
  788. display: flex;
  789. align-items: center;
  790. .num {
  791. font-size: 34rpx;
  792. }
  793. }
  794. .r-box {
  795. padding: 21rpx 0 0 0;
  796. display: flex;
  797. flex-wrap: wrap;
  798. .r-box-item {
  799. margin-right: 24rpx;
  800. }
  801. .r-box-item-lang {
  802. margin-top: 19rpx;
  803. width: 100%;
  804. display: flex;
  805. align-items: center;
  806. .contrast {
  807. margin: 0 0 0 24rpx;
  808. display: flex;
  809. align-items: center;
  810. }
  811. .down {
  812. color: #E7483C;
  813. font-size: 34rpx;
  814. }
  815. .up {
  816. font-size: 34rpx;
  817. color: #43CD80;
  818. }
  819. }
  820. }
  821. .ranking {
  822. padding: 21rpx 0 0 0;
  823. display: flex;
  824. flex-direction: column;
  825. .ranking-item {
  826. margin-bottom: 22rpx;
  827. display: flex;
  828. align-items: center;
  829. font-size: 30rpx;
  830. .serial {
  831. flex-shrink: 0;
  832. width: 42rpx;
  833. height: 42rpx;
  834. background: #2671E2;
  835. border-radius: 50%;
  836. display: flex;
  837. justify-content: center;
  838. align-items: center;
  839. color: #fff;
  840. }
  841. .lside {
  842. margin: 0 20rpx;
  843. color: #505050;
  844. }
  845. .rside {
  846. flex-shrink: 0;
  847. font-size: 32rpx;
  848. }
  849. }
  850. }
  851. }
  852. }
  853. }
  854. }
  855. }
  856. .nav-footer {
  857. position: sticky;
  858. bottom: 0;
  859. padding: 32rpx;
  860. width: 100%;
  861. display: flex;
  862. justify-content: center;
  863. background: #fff;
  864. .footer-item {
  865. flex: 1;
  866. height: 88rpx;
  867. display: flex;
  868. justify-content: center;
  869. align-items: center;
  870. color: #2671E2;
  871. border: 2rpx solid #2671E2;
  872. border-radius: 8rpx;
  873. overflow: hidden;
  874. font-size: 32rpx;
  875. &.full {
  876. background: #2671E2;
  877. color: #fff;
  878. .fulls {
  879. box-sizing: border-box;
  880. width: 100%;
  881. height: 100%;
  882. background: transparent;
  883. color: #fff;
  884. font-size: 32rpx;
  885. font-weight: normal;
  886. line-height: 88rpx;
  887. }
  888. }
  889. }
  890. }
  891. .up {
  892. color: #43CD80 !important;
  893. }
  894. .down {
  895. color: #E6273A !important;
  896. }
  897. .empty {
  898. width: 100%;
  899. line-height: 48rpx;
  900. }
  901. .value {
  902. margin-left: 5rpx;
  903. font-size: 30rpx !important;
  904. font-weight: bold !important;
  905. }
  906. .nodata-box {
  907. width: 750rpx;
  908. margin: 20rpx auto 0;
  909. display: flex;
  910. justify-content: center;
  911. align-items: center;
  912. flex-direction: column;
  913. background-color: #fff;
  914. .img {
  915. width: 400rpx;
  916. height: 400rpx;
  917. }
  918. .text {
  919. text-align: center;
  920. font-size: 28rpx;
  921. font-family: PingFangSC-Regular, PingFang SC;
  922. font-weight: 400;
  923. color: #666666;
  924. line-height: 40rpx;
  925. // margin-top: -40rpx;
  926. }
  927. }
  928. }
  929. </style>