123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <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-aitem" title="加盟商分布">
- <LeftBottom />
- </ItemWrap>
- </div>
- <div class="contetn_center">
- <ItemWrap class="contetn_center-bottom contetn_lr-item" title="加盟商总数量">
- <CenterTop :total="jmsTotal" />
- <LeftTop @total="setJmsTotal" style="height: 380px;" />
- </ItemWrap>
- <ItemWrap class="contetn_center-bottom contetn_lr-bitem" title="产品总数量">
- <CenterTop :total="cpTotal"/>
- <CenterBottom @total="setCpTotal" style="height: 370px;"/>
- </ItemWrap>
- </div>
- <div class="contetn_right">
- <ItemWrap
- class="contetn_right-top contetn_lr-item"
- :title="'采购金额TOP100加盟商('+curYear+'年)'"
- mode="left"
- >
- <div class="table-head">
- <div class="col-1">排名</div>
- <div class="col-5">加盟商</div>
- <div class="col-6">级别</div>
- <div class="col-6">采购金额(万元)</div>
- </div>
- <RightTop :curYear="curYear"/>
- </ItemWrap>
- <ItemWrap
- class="contetn_right-bottom contetn_lr-bitem"
- :title="'销售数量/金额TOP100产品('+curYear+'年)'"
- mode="left"
- >
- <div class="tab-panel">
- <span ref="curTab1" :class="curTab==1?'focus':''" v-focusable @onFocus="nextFocus(1)" @click="curTab=1">按数量</span>
- <span ref="curTab2" :class="curTab==2?'focus':''" v-focusable @onFocus="nextFocus(2)" @click="curTab=2">按金额</span>
- </div>
- <div class="table-head">
- <div class="col-1">排名</div>
- <div class="col-2">产品编码</div>
- <div class="col-3">产品分类</div>
- <div class="col-4">{{ curTab==1?'销售数量':'销售金额(万元)' }}</div>
- </div>
- <RightBottom :curYear="curYear" :curTab="curTab"/>
- </ItemWrap>
- </div>
- </div>
- </template>
- <script>
- import LeftTop from './left-top.vue'
- import LeftBottom from './left-bottom.vue'
- import CenterTop from './center-top.vue'
- import CenterBottom from './center-bottom.vue'
- import RightTop from './right-top.vue'
- import RightBottom from './right-bottom.vue'
- export default {
- components: {
- LeftTop,
- LeftBottom,
- CenterTop,
- RightTop,
- RightBottom,
- CenterBottom
- },
- data () {
- return {
- curTab: 1,
- jmsTotal: 0,
- cpTotal: 0,
- curYear: ''
- }
- },
- filters: {
- numsFilter (msg) {
- return msg || 0
- }
- },
- created () {
- this.$nextTick(() => {
- this.$tv.requestFocus(this.$refs.curTab2)
- })
- const year = location.href.split('?')[1]
- this.curYear = year ? year.split('=')[1] : new Date().getFullYear()
- },
- mounted () {},
- methods: {
- toPage () {
- this.$router.push({ name: 'realTimeSalesReport', query: { year: this.curYear } })
- },
- setJmsTotal (val) {
- this.jmsTotal = val
- },
- setCpTotal (val) {
- this.cpTotal = val
- },
- nextFocus (e) {
- console.log(e)
- this.curTab = e
- }
- }
- }
- </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;
- }
- .contetn_center {
- width: 760px;
- }
- //左右两侧 三个块
- .contetn_left-top, .contetn_right-top{
- margin-top: 15px;
- }
- .contetn_lr-item {
- height: 480px;
- }
- .contetn_lr-bitem {
- height: 480px;
- }
- .contetn_lr-aitem {
- height: 980px;
- }
- .contetn_center_top {
- width: 100%;
- }
- // 中间
- .contetn_center {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- }
- .contetn_center-top{
- margin-top: 10px;
- }
- //左边 右边 结构一样
- .contetn_left,
- .contetn_right {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- position: relative;
- }
- .tab-panel{
- display: flex;
- align-items: center;
- position: absolute;
- right: 0;
- top: -28px;
- z-index: 1000;
- font-size: 16px;
- > span{
- display: block;
- cursor: pointer;
- padding: 0 10px;
- border-right: 1px solid #999;
- &:last-child{
- border: 0;
- }
- color: rgba(255, 255, 255, 0.4);
- }
- .focus{
- color: rgba(255, 255, 255, 0.8);
- }
- }
- .table-head{
- display: flex;
- align-items: center;
- font-size: 14px;
- .col-1{
- width: 10%;
- }
- .col-2{
- width: 25%;
- }
- .col-3{
- width: 40%;
- }
- .col-4{
- width: 25%;
- }
- .col-5{
- width: 40%;
- }
- .col-6{
- width: 25%;
- }
- > div{
- text-align: center;
- padding: 5px 0;
- color: rgba(0, 170, 255, 0.8);
- }
- }
- }
- </style>
|