right-today.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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. <div class="rowup">
  5. <ul class="right_center">
  6. <li class="right_center_item" v-for="(item, i) in list" :key="i">
  7. <div class="inner_right">
  8. <div class="dibu"></div>
  9. <div class="info col-1">
  10. <span class="ciyao"> {{ item.dealerName }}</span>
  11. </div>
  12. <div class="info col-2">
  13. <span class="ciyao"> {{ item.dealerLevelDictValue }}</span>
  14. </div>
  15. <div class="info col-3">
  16. <span class="zhuyao"> {{ item.resultQty }}</span>
  17. </div>
  18. <div class="info col-4">
  19. <span class="warning"> {{ item.resultAmount | montionFilter }}</span>
  20. </div>
  21. </div>
  22. </li>
  23. </ul>
  24. <ul class="right_center" v-if="list.length>4">
  25. <li class="right_center_item" v-for="(item, i) in list" :key="i">
  26. <div class="inner_right">
  27. <div class="dibu"></div>
  28. <div class="info col-1">
  29. <span class="ciyao"> {{ item.dealerName }}</span>
  30. </div>
  31. <div class="info col-2">
  32. <span class="ciyao"> {{ item.dealerLevelDictValue }}</span>
  33. </div>
  34. <div class="info col-3">
  35. <span class="zhuyao"> {{ item.resultQty }}</span>
  36. </div>
  37. <div class="info col-4">
  38. <span class="warning"> {{ item.resultAmount | montionFilter }}</span>
  39. </div>
  40. </div>
  41. </li>
  42. </ul>
  43. </div>
  44. </div>
  45. <Reacquire v-else @onclick="getData" style="line-height:200px" />
  46. </template>
  47. <script>
  48. import Kong from '@/bigScreenComponents/kong.vue'
  49. import { addKeyFrames } from '@/utils/domUtil.js'
  50. import { querySaleToday } from '@/api/bigScreen.js'
  51. export default {
  52. components: { Kong },
  53. data () {
  54. return {
  55. list: [],
  56. pageflag: true,
  57. timer: null,
  58. loading: false
  59. }
  60. },
  61. created () {
  62. this.getData()
  63. },
  64. mounted () { },
  65. beforeDestroy () {
  66. this.clearData()
  67. },
  68. methods: {
  69. clearData () {
  70. if (this.timer) {
  71. clearInterval(this.timer)
  72. this.timer = null
  73. }
  74. },
  75. // 轮询
  76. switper () {
  77. if (this.timer) {
  78. return
  79. }
  80. const looper = (a) => {
  81. this.getData()
  82. }
  83. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  84. },
  85. getData () {
  86. this.loading = true
  87. querySaleToday().then(res => {
  88. if (res.status == 200) {
  89. this.list = res.data
  90. if (!this.timer) {
  91. console.log('今日销售', res)
  92. // 无缝滚动
  93. const len = this.list.length
  94. if (len > 4) {
  95. const height = len * 48.5
  96. const dur = len * 2
  97. addKeyFrames('rowup', '-' + height + 'px', dur)
  98. }
  99. }
  100. this.switper()
  101. } else {
  102. this.pageflag = false
  103. }
  104. this.loading = false
  105. })
  106. }
  107. }
  108. }
  109. </script>
  110. <style lang="less" scoped>
  111. .right_center {
  112. width: 100%;
  113. height: 100%;
  114. .right_center_item {
  115. padding: 13px 0;
  116. font-size: 14px;
  117. color: #fff;
  118. .inner_right {
  119. display: flex;
  120. align-items: center;
  121. position: relative;
  122. height: 100%;
  123. width: 100%;
  124. flex-shrink: 0;
  125. line-height: 1.5;
  126. .orderNum {
  127. width: 10%;
  128. text-align: center;
  129. color: #fff;
  130. }
  131. .dibu {
  132. position: absolute;
  133. height: 2px;
  134. width: 104%;
  135. background-image: url("../../../assets/img/zuo_xuxian.png");
  136. bottom: -12px;
  137. left: 0;
  138. background-size: cover;
  139. }
  140. }
  141. .col-1 {
  142. width: 35%;
  143. }
  144. .col-2 {
  145. width: 25%;
  146. }
  147. .col-3 {
  148. width: 20%;
  149. }
  150. .col-4 {
  151. width: 20%;
  152. }
  153. .info {
  154. text-align: center;
  155. .zhuyao {
  156. color: #a6e0ff;
  157. font-size: 15px;
  158. font-weight: bold;
  159. }
  160. .ciyao {
  161. color: rgba(255, 255, 255, 0.8);
  162. }
  163. .blue {
  164. color: #00aaff;;
  165. font-size: 15px;
  166. }
  167. .warning {
  168. color: #ffb442;
  169. font-size: 15px;
  170. font-weight: bold;
  171. }
  172. }
  173. }
  174. }
  175. .right_center_wrap {
  176. overflow: hidden;
  177. width: 100%;
  178. height: 390px;
  179. }
  180. .overflow-y-auto {
  181. overflow-y: auto;
  182. }
  183. </style>