index.vue 4.6 KB

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