index.vue 5.8 KB

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