123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <!--
- * @Author: daidai
- * @Date: 2022-03-04 09:23:59
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-05-07 11:05:02
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
- -->
- <template>
- <div class="contents">
- <div class="contetn_left">
- <div class="pagetab">
- <div class="item" ref="myDiv" v-focusable @click="toPage">
- ﹤加盟商/产品分析
- </div>
- </div>
- <ItemWrap class="contetn_left-top contetn_lr-item" title="区域销售金额占比">
- <LeftTop />
- </ItemWrap>
- <ItemWrap class="contetn_left-bottom contetn_lr-bitem" title="销售金额TOP15">
- <LeftBottom />
- </ItemWrap>
- </div>
- <div class="contetn_center">
- <dv-border-box-8 class="contetn_center-top">
- <CenterTop :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
- </dv-border-box-8>
- <CenterMap @onData="setYearData" class="contetn_center_topMap" />
- <ItemWrap class="contetn_center-bottom" title="品类销售分布">
- <CenterBottom />
- </ItemWrap>
- </div>
- <div class="contetn_right">
- <ItemWrap class="contetn_right-top contetn_lrr-item" title="销售趋势分析">
- <RightTop style="height: 94%;" />
- </ItemWrap>
- <ItemWrap class="contetn_right-bottom contetn_right_bottom" title="本月/周销售">
- <RightBottom />
- </ItemWrap>
- <ItemWrap class="contetn_center-bottom" title="今日销售">
- <div class="table-head">
- <div class="col-1">加盟商</div>
- <div class="col-2">级别</div>
- <div class="col-3">销售数量</div>
- <div class="col-4">销售金额(元)</div>
- </div>
- <div style="padding-bottom: 20px;">
- <RightToday />
- </div>
- </ItemWrap>
- </div>
- </div>
- </template>
- <script>
- import LeftTop from './left-top.vue'
- import LeftBottom from './left-bottom.vue'
- import CenterTop from './center-top.vue'
- import CenterMap from './center-map.vue'
- import CenterBottom from './center-bottom.vue'
- import RightTop from './right-top.vue'
- import RightBottom from './right-bottom.vue'
- import RightToday from './right-today.vue'
- export default {
- components: {
- LeftTop,
- LeftBottom,
- CenterTop,
- CenterMap,
- RightTop,
- RightBottom,
- CenterBottom,
- RightToday
- },
- data () {
- return {
- yearTotalNums: 0,
- yearTotalAmount: 0
- }
- },
- filters: {
- numsFilter (msg) {
- return msg || 0
- }
- },
- created () {
- this.$nextTick(() => {
- this.$tv.requestFocus(this.$refs.myDiv)
- })
- },
- mounted () { },
- methods: {
- toPage () {
- this.$router.push({ name: 'fPanalysisReport' })
- },
- setYearData (data) {
- console.log(data)
- this.yearTotalNums = data.totalQty
- this.yearTotalAmount = data.totalAmount
- }
- }
- }
- </script>
- <style lang="less" scoped>
- // 内容
- .contents {
- width: 100%;
- display: flex;
- min-height: calc(100% - 60px);
- justify-content: space-between;
- .contetn_left,
- .contetn_right {
- width: 540px;
- box-sizing: border-box;
- // padding: 16px 0;
- }
- .contetn_center {
- width: 760px;
- }
- //左右两侧 三个块
- .contetn_left-top,
- .contetn_right-top {
- margin-top: 15px;
- }
- .contetn_lr-item {
- height: 400px;
- }
- .contetn_lrr-item {
- height: 370px;
- }
- .contetn_lr-bitem {
- height: 560px;
- }
- .contetn_right_bottom {
- height: 260px;
- }
- .contetn_center_top,
- .contetn_center_topMap {
- width: 100%;
- }
- // 中间
- .contetn_center {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- }
- .contetn_center-top {
- height: 110px;
- margin-top: 10px;
- }
- .contetn_center-bottom {
- height: 310px;
- }
- //左边 右边 结构一样
- .contetn_left,
- .contetn_right {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- position: relative;
- }
- .table-head {
- display: flex;
- align-items: center;
- font-size: 14px;
- .col-1 {
- width: 35%;
- }
- .col-2 {
- width: 25%;
- }
- .col-3 {
- width: 20%;
- }
- .col-4 {
- width: 20%;
- }
- >div {
- text-align: center;
- padding: 5px 0;
- color: rgba(0, 170, 255, 0.8);
- }
- }
- .right_center_wrap {
- overflow: hidden;
- width: 100%;
- height: 220px !important;
- }
- }
- @keyframes rotating {
- 0% {
- -webkit-transform: rotate(0) scale(1);
- transform: rotate(0) scale(1);
- }
- 50% {
- -webkit-transform: rotate(180deg) scale(1.1);
- transform: rotate(180deg) scale(1.1);
- }
- 100% {
- -webkit-transform: rotate(360deg) scale(1);
- transform: rotate(360deg) scale(1);
- }
- }
- </style>
|