right-bottom.vue 4.5 KB

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