right-bottom.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
  3. <div class="loading" v-if="loading"><a-spin /></div>
  4. <ul class="right_center ">
  5. <li class="right_center_item" v-for="(item, i) in list" :key="i">
  6. <div class="dibu" v-if="i < 1"></div>
  7. <span class="orderNum">{{ item.name }}</span>
  8. <div class="inner_right">
  9. <div class="flex">
  10. <div class="info">
  11. <span class="nums zhuyao"> {{ item.saleNums }}</span>
  12. <span class="labels">销售数量</span>
  13. </div>
  14. <div class="info">
  15. <span class="nums warning"> {{ item.salesAmount | montionFilter }}</span>
  16. <span class="labels">销售金额</span>
  17. </div>
  18. </div>
  19. </div>
  20. </li>
  21. </ul>
  22. </div>
  23. <Reacquire v-else @onclick="getData" style="line-height:200px" />
  24. </template>
  25. <script>
  26. import { querySaleMonthWeek } from '@/api/bigScreen.js'
  27. import { formatThousands } from '@/utils/util.js'
  28. export default {
  29. data () {
  30. return {
  31. list: [],
  32. pageflag: true,
  33. timer: null,
  34. loading: false
  35. }
  36. },
  37. computed: {
  38. },
  39. created () {
  40. this.getData()
  41. },
  42. mounted () { },
  43. beforeDestroy () {
  44. this.clearData()
  45. },
  46. methods: {
  47. clearData () {
  48. if (this.timer) {
  49. clearInterval(this.timer)
  50. this.timer = null
  51. }
  52. },
  53. // 轮询
  54. switper () {
  55. if (this.timer) {
  56. return
  57. }
  58. const looper = (a) => {
  59. this.getData()
  60. }
  61. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  62. },
  63. getData () {
  64. this.loading = true
  65. querySaleMonthWeek().then(res => {
  66. if (!this.timer) {
  67. console.log('本月/周销售', res)
  68. }
  69. if (res.status == 200) {
  70. const data = res.data
  71. this.list = [
  72. { 'salesAmount': data.monthAmount, 'saleNums': formatThousands(data.monthQty), 'name': '月' },
  73. { 'salesAmount': data.weekAmount, 'saleNums': formatThousands(data.weekQty), 'name': '周' }
  74. ]
  75. this.switper()
  76. } else {
  77. this.pageflag = false
  78. }
  79. this.loading = false
  80. })
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="less" scoped>
  86. .right_center {
  87. width: 100%;
  88. height: 100%;
  89. .right_center_item {
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. height: auto;
  94. padding: 13px 15px;
  95. font-size: 14px;
  96. color: #fff;
  97. position: relative;
  98. .dibu {
  99. position: absolute;
  100. height: 2px;
  101. width: 104%;
  102. background-image: url("../../../assets/img/zuo_xuxian.png");
  103. bottom: 0;
  104. left: -2%;
  105. background-size: cover;
  106. }
  107. .orderNum {
  108. font-size: 25px;
  109. border: 3px solid rgba(0, 170, 255, 0.5);
  110. border-radius: 200px;
  111. color: rgba(0, 170, 255, 0.5);
  112. display: inline-block;
  113. text-align: center;
  114. height: 70px;
  115. width: 70px;
  116. display: flex;
  117. align-items: center;
  118. justify-content: center;
  119. }
  120. .inner_right {
  121. height: 100%;
  122. width: 400px;
  123. flex-shrink: 0;
  124. line-height: 1.5;
  125. .flex{
  126. display:flex;
  127. }
  128. }
  129. .info {
  130. width: 45%;
  131. margin-right: 10px;
  132. display: flex;
  133. align-items: center;
  134. flex-direction: column;
  135. justify-content: center;
  136. .labels {
  137. flex-shrink: 0;
  138. font-size: 16px;
  139. color: rgba(255, 255, 255, 0.6);
  140. }
  141. .nums {
  142. font-size: 32px;
  143. }
  144. .zhuyao {
  145. color: #00aaff;
  146. }
  147. .ciyao {
  148. color: rgba(255, 255, 255, 0.8);
  149. }
  150. .warning {
  151. color: #E6A23C;
  152. }
  153. }
  154. }
  155. .tit{
  156. align-items: center;
  157. justify-content: center;
  158. color: #31abe3;
  159. font-weight: 900;
  160. letter-spacing: 2px;
  161. margin-top:10px;
  162. span{
  163. display: inline-block;
  164. padding:10px 16px;
  165. }
  166. }
  167. .day_box{
  168. margin-bottom: 10px;
  169. }
  170. }
  171. .right_center_wrap {
  172. overflow: hidden;
  173. width: 100%;
  174. height: 485px;
  175. }
  176. .overflow-y-auto {
  177. overflow-y: auto;
  178. }
  179. </style>