index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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" :class="item == curYear ? 'focus': ''" style="width: 100px;margin-right:10px" v-focusable v-for="item in yearArr" :key="item" @click="toPage(item)">
  11. {{item}} 年
  12. </div>
  13. </div>
  14. <ItemWrap class="contetn_left-top contetn_lr-item" :title="'区域销售金额占比'">
  15. <LeftTop :curYear="curYear" />
  16. </ItemWrap>
  17. <ItemWrap class="contetn_left-bottom contetn_lr-bitem" :title="'销售金额TOP15'">
  18. <LeftBottom :curYear="curYear" />
  19. </ItemWrap>
  20. </div>
  21. <div class="contetn_center">
  22. <dv-border-box-8 class="contetn_center-top">
  23. <CenterTop :curYear="curYear" :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
  24. </dv-border-box-8>
  25. <CenterMap :curYear="curYear" @onData="setYearData" class="contetn_center_topMap" />
  26. <ItemWrap class="contetn_center-bottom" :title="'品类销售分布'">
  27. <CenterBottom :curYear="curYear" />
  28. </ItemWrap>
  29. </div>
  30. <div class="contetn_right">
  31. <ItemWrap class="contetn_right-top contetn_lrr-item" :title="'销售趋势分析'">
  32. <RightTop :curYear="curYear" style="height: 94%;" />
  33. </ItemWrap>
  34. <ItemWrap class="contetn_right-bottom contetn_right_bottom" title="本月/周销售">
  35. <RightBottom />
  36. </ItemWrap>
  37. <ItemWrap class="contetn_center-bottom" title="今日销售">
  38. <div class="table-head">
  39. <div class="col-1">加盟商</div>
  40. <div class="col-2">级别</div>
  41. <div class="col-3">销售数量</div>
  42. <div class="col-4">销售金额(元)</div>
  43. </div>
  44. <div style="padding-bottom: 20px;">
  45. <RightToday />
  46. </div>
  47. </ItemWrap>
  48. </div>
  49. </div>
  50. </template>
  51. <script>
  52. import LeftTop from './left-top.vue'
  53. import LeftBottom from './left-bottom.vue'
  54. import CenterTop from './center-top.vue'
  55. import CenterMap from './center-map.vue'
  56. import CenterBottom from './center-bottom.vue'
  57. import RightTop from './right-top.vue'
  58. import RightBottom from './right-bottom.vue'
  59. import RightToday from './right-today.vue'
  60. export default {
  61. components: {
  62. LeftTop,
  63. LeftBottom,
  64. CenterTop,
  65. CenterMap,
  66. RightTop,
  67. RightBottom,
  68. CenterBottom,
  69. RightToday
  70. },
  71. data () {
  72. return {
  73. yearTotalNums: 0,
  74. yearTotalAmount: 0,
  75. curYear: '',
  76. isInnerPage: false,
  77. yearArr: []
  78. }
  79. },
  80. filters: {
  81. numsFilter (msg) {
  82. return msg || 0
  83. }
  84. },
  85. created () {
  86. this.$nextTick(() => {
  87. this.$tv.requestFocus(this.$refs.myDiv)
  88. })
  89. const year = location.href.split('?')[1]
  90. this.curYear = year ? year.split('=')[1] : new Date().getFullYear()
  91. this.isInnerPage = this.$route.path.indexOf("bigStatistics")>=0
  92. },
  93. mounted () {
  94. const toYeay = new Date().getFullYear()
  95. this.yearArr = [toYeay-3,toYeay-2,toYeay-1,toYeay]
  96. },
  97. methods: {
  98. toPage (curYear) {
  99. if(!this.isInnerPage){
  100. this.$router.push({ name: 'fPanalysisReport', query: { year: this.curYear } })
  101. }else{
  102. this.curYear = curYear
  103. this.$router.replace({ name: 'bigRealTimeSalesReport', query: { year: curYear } })
  104. }
  105. },
  106. setYearData (data) {
  107. console.log(data)
  108. this.yearTotalNums = data.totalQty
  109. this.yearTotalAmount = data.totalAmount
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="less" scoped>
  115. // 内容
  116. .contents {
  117. width: 100%;
  118. display: flex;
  119. min-height: calc(100% - 60px);
  120. justify-content: space-between;
  121. .contetn_left,
  122. .contetn_right {
  123. width: 540px;
  124. box-sizing: border-box;
  125. // padding: 16px 0;
  126. }
  127. .contetn_center {
  128. width: 760px;
  129. }
  130. //左右两侧 三个块
  131. .contetn_left-top,
  132. .contetn_right-top {
  133. margin-top: 15px;
  134. }
  135. .contetn_lr-item {
  136. height: 400px;
  137. }
  138. .contetn_lrr-item {
  139. height: 370px;
  140. }
  141. .contetn_lr-bitem {
  142. height: 560px;
  143. }
  144. .contetn_right_bottom {
  145. height: 260px;
  146. }
  147. .contetn_center_top,
  148. .contetn_center_topMap {
  149. width: 100%;
  150. }
  151. // 中间
  152. .contetn_center {
  153. display: flex;
  154. flex-direction: column;
  155. justify-content: space-around;
  156. }
  157. .contetn_center-top {
  158. height: 110px;
  159. margin-top: 10px;
  160. }
  161. .contetn_center-bottom {
  162. height: 310px;
  163. }
  164. //左边 右边 结构一样
  165. .contetn_left,
  166. .contetn_right {
  167. display: flex;
  168. flex-direction: column;
  169. justify-content: space-between;
  170. position: relative;
  171. }
  172. .table-head {
  173. display: flex;
  174. align-items: center;
  175. font-size: 14px;
  176. .col-1 {
  177. width: 35%;
  178. }
  179. .col-2 {
  180. width: 25%;
  181. }
  182. .col-3 {
  183. width: 20%;
  184. }
  185. .col-4 {
  186. width: 20%;
  187. }
  188. >div {
  189. text-align: center;
  190. padding: 5px 0;
  191. color: rgba(0, 170, 255, 0.8);
  192. }
  193. }
  194. .right_center_wrap {
  195. overflow: hidden;
  196. width: 100%;
  197. height: 220px !important;
  198. }
  199. }
  200. @keyframes rotating {
  201. 0% {
  202. -webkit-transform: rotate(0) scale(1);
  203. transform: rotate(0) scale(1);
  204. }
  205. 50% {
  206. -webkit-transform: rotate(180deg) scale(1.1);
  207. transform: rotate(180deg) scale(1.1);
  208. }
  209. 100% {
  210. -webkit-transform: rotate(360deg) scale(1);
  211. transform: rotate(360deg) scale(1);
  212. }
  213. }
  214. </style>