index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="contents">
  3. <div class="contetn_left">
  4. <div class="pagetab">
  5. <div class="item" ref="myDiv" v-focusable @click="toPage">﹤实时销售看板</div>
  6. </div>
  7. <ItemWrap class="contetn_left-top contetn_lr-aitem" title="加盟商分布">
  8. <LeftBottom />
  9. </ItemWrap>
  10. </div>
  11. <div class="contetn_center">
  12. <ItemWrap class="contetn_center-bottom contetn_lr-item" title="加盟商总数量">
  13. <CenterTop :total="jmsTotal" />
  14. <LeftTop @total="setJmsTotal" style="height: 380px;" />
  15. </ItemWrap>
  16. <ItemWrap class="contetn_center-bottom contetn_lr-bitem" title="产品总数量">
  17. <CenterTop :total="cpTotal"/>
  18. <CenterBottom @total="setCpTotal" style="height: 370px;"/>
  19. </ItemWrap>
  20. </div>
  21. <div class="contetn_right">
  22. <ItemWrap
  23. class="contetn_right-top contetn_lr-item"
  24. :title="'采购金额TOP100加盟商('+curYear+'年)'"
  25. mode="left"
  26. >
  27. <div class="table-head">
  28. <div class="col-1">排名</div>
  29. <div class="col-5">加盟商</div>
  30. <div class="col-6">级别</div>
  31. <div class="col-6">采购金额(万元)</div>
  32. </div>
  33. <RightTop :curYear="curYear"/>
  34. </ItemWrap>
  35. <ItemWrap
  36. class="contetn_right-bottom contetn_lr-bitem"
  37. :title="'销售数量/金额TOP100产品('+curYear+'年)'"
  38. mode="left"
  39. >
  40. <div class="tab-panel">
  41. <span ref="curTab1" :class="curTab==1?'focus':''" v-focusable @onFocus="nextFocus(1)" @click="curTab=1">按数量</span>
  42. <span ref="curTab2" :class="curTab==2?'focus':''" v-focusable @onFocus="nextFocus(2)" @click="curTab=2">按金额</span>
  43. </div>
  44. <div class="table-head">
  45. <div class="col-1">排名</div>
  46. <div class="col-2">产品编码</div>
  47. <div class="col-3">产品分类</div>
  48. <div class="col-4">{{ curTab==1?'销售数量':'销售金额(万元)' }}</div>
  49. </div>
  50. <RightBottom :curYear="curYear" :curTab="curTab"/>
  51. </ItemWrap>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import LeftTop from './left-top.vue'
  57. import LeftBottom from './left-bottom.vue'
  58. import CenterTop from './center-top.vue'
  59. import CenterBottom from './center-bottom.vue'
  60. import RightTop from './right-top.vue'
  61. import RightBottom from './right-bottom.vue'
  62. export default {
  63. components: {
  64. LeftTop,
  65. LeftBottom,
  66. CenterTop,
  67. RightTop,
  68. RightBottom,
  69. CenterBottom
  70. },
  71. data () {
  72. return {
  73. curTab: 1,
  74. jmsTotal: 0,
  75. cpTotal: 0,
  76. curYear: ''
  77. }
  78. },
  79. filters: {
  80. numsFilter (msg) {
  81. return msg || 0
  82. }
  83. },
  84. created () {
  85. this.$nextTick(() => {
  86. this.$tv.requestFocus(this.$refs.curTab2)
  87. })
  88. const year = location.href.split('?')[1]
  89. this.curYear = year ? year.split('=')[1] : new Date().getFullYear()
  90. },
  91. mounted () {},
  92. methods: {
  93. toPage () {
  94. this.$router.push({ name: 'realTimeSalesReport', query: { year: this.curYear } })
  95. },
  96. setJmsTotal (val) {
  97. this.jmsTotal = val
  98. },
  99. setCpTotal (val) {
  100. this.cpTotal = val
  101. },
  102. nextFocus (e) {
  103. console.log(e)
  104. this.curTab = e
  105. }
  106. }
  107. }
  108. </script>
  109. <style lang="less" scoped>
  110. // 内容
  111. .contents {
  112. width: 100%;
  113. display: flex;
  114. min-height: calc(100% - 60px);
  115. justify-content: space-between;
  116. .contetn_left,
  117. .contetn_right {
  118. width: 540px;
  119. box-sizing: border-box;
  120. }
  121. .contetn_center {
  122. width: 760px;
  123. }
  124. //左右两侧 三个块
  125. .contetn_left-top, .contetn_right-top{
  126. margin-top: 15px;
  127. }
  128. .contetn_lr-item {
  129. height: 480px;
  130. }
  131. .contetn_lr-bitem {
  132. height: 480px;
  133. }
  134. .contetn_lr-aitem {
  135. height: 980px;
  136. }
  137. .contetn_center_top {
  138. width: 100%;
  139. }
  140. // 中间
  141. .contetn_center {
  142. display: flex;
  143. flex-direction: column;
  144. justify-content: space-around;
  145. }
  146. .contetn_center-top{
  147. margin-top: 10px;
  148. }
  149. //左边 右边 结构一样
  150. .contetn_left,
  151. .contetn_right {
  152. display: flex;
  153. flex-direction: column;
  154. justify-content: space-between;
  155. position: relative;
  156. }
  157. .tab-panel{
  158. display: flex;
  159. align-items: center;
  160. position: absolute;
  161. right: 0;
  162. top: -28px;
  163. z-index: 1000;
  164. font-size: 16px;
  165. > span{
  166. display: block;
  167. cursor: pointer;
  168. padding: 0 10px;
  169. border-right: 1px solid #999;
  170. &:last-child{
  171. border: 0;
  172. }
  173. color: rgba(255, 255, 255, 0.4);
  174. }
  175. .focus{
  176. color: rgba(255, 255, 255, 0.8);
  177. }
  178. }
  179. .table-head{
  180. display: flex;
  181. align-items: center;
  182. font-size: 14px;
  183. .col-1{
  184. width: 10%;
  185. }
  186. .col-2{
  187. width: 25%;
  188. }
  189. .col-3{
  190. width: 40%;
  191. }
  192. .col-4{
  193. width: 25%;
  194. }
  195. .col-5{
  196. width: 40%;
  197. }
  198. .col-6{
  199. width: 25%;
  200. }
  201. > div{
  202. text-align: center;
  203. padding: 5px 0;
  204. color: rgba(0, 170, 255, 0.8);
  205. }
  206. }
  207. }
  208. </style>