app.vue
7.65 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<template>
<com-pageheader :title="'报表管理'" :sub-title="'经营总览'"></com-pageheader>
<div id="businessIndex">
<div class="overViewTitle">
<h3>经营指标</h3>
<span>展示当日经营指标数据（{{overViewUpdateTime}} 更新）</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" style="margin-bottom: 20px">
<p>同品类中<br>品牌排名为</p>
<h2>第<b>{{rankNow}}</b>名</h2>
</div>
<div class="dataModle2">
<p>较上周同期</p>
<h2 class="up" v-show="rankChange > 0"><i>↑</i><b>{{rankChange}}</b> 个名次</h2>
<h2 class="middle" v-show="rankChange == 0"><i>--</i><b>{{rankChange}}</b> 个名次</h2>
<h2 class="down" v-show="rankChange < 0"><i>↓</i><b>{{-rankChange}}</b> 个名次</h2>
<h2 v-show="rankChange=='--'"><b>--</b>个名次</h2>
<div class="rankTip" v-show="rankChange > 0"><b class="_red">今天业绩不错，继续加油哦!</b></div>
<div class="rankTip" v-show="rankChange == 0"><b class="_blue">继续加油哦!</b></div>
<div class="rankTip" v-show="rankChange < 0"><b class="_green">还需再接再厉哦！</b></div>
<div class="rankTip" v-show="rankChange=='--'"><b class="_red">没数据也要加油哦！</b></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="businessDetail">
<div class="overViewTitle">
<h3>交易明细</h3>
<span>展示当日商品交易情况（{{listUpdateTime}} 更新）</span>
</div>
<div class="detailList">
<com-grid :columns="grid.columns" :url="grid.url"></com-grid>
</div>
</div>
</template>
<script>
import util from 'util';
import pageheader from '../../../../components/pageheader/index';
import grid from '../../../../components/grid/index';
export default {
components:{
comPageheader: pageheader,
comGrid: grid
},
data() {
return {
buyNumbers: '--',
orderAmount: '--',
rankNow: '--',
rankChange: '--',
rankLevel: '',
rankDate: '',
listUpdateTime: '--:--',
overViewUpdateTime: '--:--',
grid:{
url:'/report/getOrdersGoodsRptList',
columns:[
{display:'图片',render(item){
return item.imageUrl?'<img src="'+item.imageUrl+'?imageView/0/w/78/h/78">':"";
}},
{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.salesPrice+'</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:'orderAmount'}
]
}
}
},
ready() {
this.fetchData1();
this.fetchData2();
this.$broadcast('grid-reload',{
type: 1,
reqTime: util.dateFormat(new Date(),"YYYYMMdd")
});
},
methods:{
//获取店铺的经营指标：一个自然日内有效订单商品件数、有效订单商品金额
fetchData1: function() {
var self = this;
this.$http.post("/report/getShopBusinessOverview", {
dateId: util.dateFormat(new Date(),"YYYYMMdd")
}).then(function (response) {
var rs = response.data;
self.buyNumbers = rs.data.buyNumbers?rs.data.buyNumbers:'--';
self.orderAmount = rs.data.orderAmount?rs.data.orderAmount:'--';
self.overViewUpdateTime = rs.data.hour?rs.data.hour.substring(0,5):'--:--';
});
},
//获取店铺的品牌排名，当前等级、排名、上升名词
fetchData2: function() {
var self = this;
var day = new Date();
day.setDate(day.getDate()-1); //前一天
self.rankDate = util.dateFormat(day, "MM月dd日");
this.$http.post("/report/getShopBrandRank", {
dateId: util.dateFormat(day,"YYYYMMdd")
}).then(function (response) {
var rs = response.data;
self.rankNow = rs.data.rankNow?rs.data.rankNow:'--';
self.rankChange = rs.data.rankChange?rs.data.rankChange:'--';
self.rankLevel = rs.data.rankLevel?rs.data.rankLevel:'';
});
}
},
events:{
complete(data){
if(data && data.list.length > 0){
this.listUpdateTime = data.list[0].hour? data.list[0].hour+":00":'--:--';
}else{
this.listUpdateTime = '--';
}
}
}
}
</script>