left-bottom.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <div class="left-bottom">
  3. <div class="loading" v-if="loading"><a-spin /></div>
  4. <dv-capsule-chart :config="config" style="width:98%;height:505px" />
  5. </div>
  6. </template>
  7. <script>
  8. import { queryProvinceSaleAmount } from '@/api/bigScreen.js'
  9. export default {
  10. data () {
  11. return {
  12. gatewayno: '',
  13. config: {
  14. showValue: true,
  15. unit: '万元',
  16. data: []
  17. },
  18. timer: null,
  19. loading: false
  20. }
  21. },
  22. created () {
  23. this.getData()
  24. },
  25. computed: {
  26. },
  27. mounted () { },
  28. beforeDestroy () {
  29. this.clearData()
  30. },
  31. methods: {
  32. clearData () {
  33. if (this.timer) {
  34. clearInterval(this.timer)
  35. this.timer = null
  36. }
  37. },
  38. // 轮询
  39. switper () {
  40. if (this.timer) {
  41. return
  42. }
  43. const looper = (a) => {
  44. this.getData()
  45. }
  46. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  47. },
  48. getData () {
  49. this.loading = true
  50. queryProvinceSaleAmount().then(res => {
  51. if (!this.timer) {
  52. console.log('销售金额top15省份', res)
  53. }
  54. if (res.status == 200) {
  55. const ret = []
  56. res.data.map(item => {
  57. ret.push({
  58. name: item.provinceName,
  59. value: (item.resultAmount / 1000).toFixed(2)
  60. })
  61. })
  62. this.config = {
  63. ...this.config,
  64. data: ret
  65. }
  66. this.switper()
  67. } else {
  68. this.pageflag = false
  69. }
  70. this.loading = false
  71. })
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="less" scoped>
  77. .list_Wrap {
  78. height: 100%;
  79. overflow: hidden;
  80. :deep(.kong) {
  81. width: auto;
  82. }
  83. }
  84. .sbtxSwiperclass {
  85. .img_wrap {
  86. overflow-x: auto;
  87. }
  88. }
  89. .right_bottom {
  90. box-sizing: border-box;
  91. padding: 0 16px;
  92. .searchform {
  93. height: 80px;
  94. display: flex;
  95. align-items: center;
  96. justify-content: center;
  97. .searchform_item {
  98. display: flex;
  99. justify-content: center;
  100. align-items: center;
  101. label {
  102. margin-right: 10px;
  103. color: rgba(255, 255, 255, 0.8);
  104. }
  105. button {
  106. margin-left: 30px;
  107. }
  108. input {}
  109. }
  110. }
  111. .img_wrap {
  112. display: flex;
  113. // justify-content: space-around;
  114. box-sizing: border-box;
  115. padding: 0 0 20px;
  116. // overflow-x: auto;
  117. li {
  118. width: 105px;
  119. height: 137px;
  120. border-radius: 6px;
  121. overflow: hidden;
  122. cursor: pointer;
  123. // background: #84ccc9;
  124. // border: 1px solid #ffffff;
  125. overflow: hidden;
  126. flex-shrink: 0;
  127. margin: 0 10px;
  128. img {
  129. flex-shrink: 0;
  130. }
  131. }
  132. }
  133. .noData {
  134. width: 100%;
  135. line-height: 100px;
  136. text-align: center;
  137. color: rgb(129, 128, 128);
  138. }
  139. }
  140. </style>