123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- <template>
- <div class="contents">
- <div class="contetn_left">
- <div class="pagetab" v-if="!isInnerPage">
- <div class="item" ref="myDiv" v-focusable @click="toPage">
- ﹤加盟商/产品分析
- </div>
- </div>
- <div class="pagetab" v-else>
- <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)">
- {{item}} 年
- </div>
- </div>
- <ItemWrap class="contetn_left-top contetn_lr-item" :title="'区域销售金额占比'">
- <LeftTop :curYear="curYear" />
- </ItemWrap>
- <ItemWrap class="contetn_left-bottom contetn_lr-bitem" :title="'销售金额TOP15'">
- <LeftBottom :curYear="curYear" />
- </ItemWrap>
- </div>
- <div class="contetn_center">
- <dv-border-box-8 class="contetn_center-top">
- <CenterTop :curYear="curYear" :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
- </dv-border-box-8>
- <CenterMap :curYear="curYear" @onData="setYearData" class="contetn_center_topMap" />
- <ItemWrap class="contetn_center-bottom" :title="'品类销售分布'">
- <CenterBottom :curYear="curYear" />
- </ItemWrap>
- </div>
- <div class="contetn_right">
- <ItemWrap class="contetn_right-top contetn_lrr-item" :title="'销售趋势分析'">
- <RightTop :curYear="curYear" 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,
- curYear: '',
- isInnerPage: false,
- yearArr: []
- }
- },
- filters: {
- numsFilter (msg) {
- return msg || 0
- }
- },
- created () {
- this.$nextTick(() => {
- this.$tv.requestFocus(this.$refs.myDiv)
- })
- const year = location.href.split('?')[1]
- this.curYear = year ? year.split('=')[1] : new Date().getFullYear()
- this.isInnerPage = this.$route.path.indexOf("bigStatistics")>=0
- },
- mounted () {
- const toYeay = new Date().getFullYear()
- this.yearArr = [toYeay-3,toYeay-2,toYeay-1,toYeay]
- },
- methods: {
- toPage (curYear) {
- if(!this.isInnerPage){
- this.$router.push({ name: 'fPanalysisReport', query: { year: this.curYear } })
- }else{
- this.curYear = curYear
- this.$router.replace({ name: 'bigRealTimeSalesReport', query: { year: curYear } })
- }
- },
- 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>
|