app.vue
6.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<template>
<div id="businessIndex">
<div class="overViewTitle">
<h3>经营指标</h3>
<span>展示当日经营指标数据（15:30更新）</span>
</div>
<div class="overViewContent" style="margin-left: 200px">
<div class="dataModle1">
<p>有效订单的商品件数</p>
<h2>{{buyNumbers}}</h2>
</div>
<div class="dataModle1">
<p>有效订单的商品金额（元）</p>
<h2>{{orderAmount}}</h2>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="brandRanking">
<div class="overViewTitle">
<h3>品牌排名</h3>
<span>{{rankDate}}品牌排名</span>
</div>
<div class="overViewContent" style="margin-left: 125px">
<div class="triangleShape">
<b>当前层级</b>
<div class="shape triangle-up {{rankLevel==1?'activeShape':''}}">
<span>前5%</span><i class="triangle-right"></i>
</div>
<div class="shape trapezoid-1 {{rankLevel==2?'activeShape':''}}">
<span>5%~20%</span><i class="triangle-right"></i>
</div>
<div class="shape trapezoid-2 {{rankLevel==3?'activeShape':''}}">
<span>20%~40%</span><i class="triangle-right"></i>
</div>
<div class="shape trapezoid-3 {{rankLevel==4?'activeShape':''}}">
<span>40%~65%</span><i class="triangle-right"></i>
</div>
<div class="shape trapezoid-4 {{rankLevel==5?'activeShape':''}}">
<span>65%~100%</span><i class="triangle-right"></i>
</div>
</div>
<div class="rankData">
<div class="dataModle2">
<p>同品类中<br>品牌排名为</p>
<h2>第<b>{{rankNow}}</b>名</h2>
</div>
<div class="dataModle2">
<p>较上周同期</p>
<h2 class="middle" v-show="rankChange == 0"><i>↑</i><b>{{rankChange}}</b>个名次</h2>
<h2 class="up" v-show="rankChange > 0"><i>↑</i><b>{{rankChange}}</b>个名次</h2>
<h2 class="down" v-show="rankChange < 0"><i>↓</i><b>{{-rankChange}}</b>个名次</h2>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="businessDetail">
<div class="overViewTitle">
<h3>交易明细</h3>
<span>展示当日商品交易情况（15:30更新）</span>
</div>
<div class="detailList">
<com-grid :columns="grid.columns" :url="grid.url"></com-grid>
</div>
</div>
</template>
<script>
import grid from '../../../../components/grid/index';
export default {
components:{
comGrid: grid
},
data() {
return {
buyNumbers: '1',
orderAmount: '2',
rankDate: '5月24日',
rankNow: '3',
rankChange: '-5',
rankLevel: 4,
grid:{
url:'/report/getOrdersGoodsRptList',
columns:[
{display:'图片',render(item){
return item.imageUrl?'<img src="'+item.imageUrl+'">':"";
}},
{display:'SKN/SKC/SKU',render(item){
return '<p>SKN:'+item.productSkn+'</p>' +
'<p>SKC:'+item.productSkc+'</p>' +
'<p>SKU:'+item.productSku+'</p>';
}},
{display:'厂家编号',name:'factoryCode'},
{display:'商品名称',name:'goodsName'},
{display:'价格',render(item){
return '<p>吊牌价:'+item.retailPrice+'</p>' +
'<p>销售价:'+item.salePrice+'</p>';
}},
{display:'颜色/尺码',render(item){
return [item.colorName,item.sizeName].join('/');
}},
{display:'商品分类',render(item){
return [item.maxSortName,item.middleSortName,item.smallSortName].join('-');
}},
{display:'数量',name:'buyNumber'},
{display:'金额',name:''}
]
}
}
},
ready() {
//this.fetchData2();
},
methods:{
//获取店铺的经营指标：一个自然日内有效订单商品件数、有效订单商品金额
fetchData1: function() {
$.ajax({
type:"post",
url:"/report/getShopBusinessOverview",
dataType: 'json',
success: function(rs) {
this.buyNumbers = rs.data.buyNumbers;
this.orderAmount = rs.data.orderAmount;
},
error: function(error) {
console.log(error)
}
})
},
//获取店铺的品牌排名，当前等级、排名、上升名词
fetchData2: function() {
$.ajax({
type:"post",
url:"/report/getShopBrandRank",
dataType: 'json',
success: function(rs) {
this.rankNow = rs.data.rankNow;
this.rankChange = rs.data.rankChange;
this.rankLevel = rs.data.rankLevel;
this.rankDate = rs.data.dateId;
},
error: function(error) {
console.log(error)
}
})
}
}
}
</script>