right-top.vue 4.1 KB

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