index.vue 5.5 KB

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