3f535f30
 杨鑫
'初始'
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<template>
<div style="background-color:#f7f7f7;padding:10px 10px;">
<div class="history">
<div style="height:58px;line-height:58px;">
<div style="color:#0006"> <span>渠道额统计分析</span> <span style="padding:0 5px;">></span> <span
style="color:#000000e6">销售总额统计</span></div>
</div>
<div >
<!-- 顶部搜索 -->
<div class="toolbar">
|
|
52fc03a8
杨鑫
'最新'
|
13
|
<el-form :inline="true" :model="pageIndex">
|
|
cc748250
杨鑫
'2'
|
14
15
16
17
|
<el-form-item label="渠道">
<el-select placeholder="全部"
v-model="pageIndex.ticketChannel"
style="width: 120px;margin-right: 15px">
|
|
52fc03a8
杨鑫
'最新'
|
18
|
<el-option v-for="(item,index) in type" :label="item==1?'有赞':'其他'" :value="item" />
|
|
cc748250
杨鑫
'2'
|
19
20
21
22
23
|
</el-select>
</el-form-item>
<el-form-item label="票种">
<el-select placeholder="全部" v-model="pageIndex.ticketType"
style="width: 120px;margin-right: 15px">
|
|
52fc03a8
杨鑫
'最新'
|
24
|
<el-option v-for="(item,index) in listType" :label="item" :value="item" />
|
|
cc748250
杨鑫
'2'
|
25
26
|
</el-select>
</el-form-item>
|
|
3f535f30
杨鑫
'初始'
|
27
28
|
<el-form-item label="日期">
<el-date-picker
|
|
cc748250
杨鑫
'2'
|
29
|
v-model="pageIndex.list"
|
|
3f535f30
杨鑫
'初始'
|
30
31
32
33
34
35
36
37
38
39
|
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item label-width="0">
|
|
52fc03a8
杨鑫
'最新'
|
40
41
|
<el-button @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
<el-button @click="clear" class="buttonHover"
|
|
3f535f30
杨鑫
'初始'
|
42
43
44
45
|
style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
</el-form-item>
</el-form>
</div>
|
|
e7a2677d
杨鑫
'更新'
|
46
|
<div style="margin-bottom: 20px;">
|
|
cc748250
杨鑫
'2'
|
47
48
|
<el-button style="background-color: #3F9B6A;color: #fff" @click="daochu">导出</el-button>
</div>
|
|
3f535f30
杨鑫
'初始'
|
49
50
51
|
</div>
<!-- 表格 -->
<div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#F2F3F5">
|
|
52fc03a8
杨鑫
'最新'
|
52
|
<div style="background-color: #fff;padding: 10px;margin-bottom: 20px;text-algin:center">
|
|
3f535f30
杨鑫
'初始'
|
53
|
<div style='padding:20px 10px;background-color:#fff;'>
|
|
52fc03a8
杨鑫
'最新'
|
54
|
<div style="display:flex;font-size:14px;justify-content: space-evenly">
|
|
3f535f30
杨鑫
'初始'
|
55
56
|
<div style="width:10%;border-right:1px solid #F2F2F2">
<div style="margin-bottom: 10px;font-weight: 600;">总销售额(元)</div>
|
|
cc748250
杨鑫
'2'
|
57
|
<div style="font-weight: 600;">{{moyeOne}}</div>
|
|
3f535f30
杨鑫
'初始'
|
58
|
</div>
|
|
52fc03a8
杨鑫
'最新'
|
59
60
|
<div style="width:10%;border-right:1px solid #F2F2F2" v-for="(item,index) in tongList">
<div style="margin-bottom: 10px;font-weight: 600;">{{item.ticketChannel==1?'有赞':''}}销售总额(元)</div>
|
|
a4aeeb1e
杨鑫
'最新'
|
61
|
<div style="font-weight: 600;">{{item.sum.toFixed(2)}}</div>
|
|
3f535f30
杨鑫
'初始'
|
62
|
</div>
|
|
52fc03a8
杨鑫
'最新'
|
63
|
|
|
3f535f30
杨鑫
'初始'
|
64
65
66
67
68
69
|
</div>
</div>
</div>
<!-- 图表 -->
<div style="display: flex;">
<div style="background-color: #fff;padding: 10px;margin-right: 10px;width: 32%;">
|
|
52fc03a8
杨鑫
'最新'
|
70
|
<div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0;text-align: center;">
|
|
3f535f30
杨鑫
'初始'
|
71
|
<div style="line-height: 200%;">总销售额趋势表</div>
|
|
cc748250
杨鑫
'2'
|
72
|
<!-- <el-button style="background-color: #3F9B6A;color: #fff">导出</el-button> -->
|
|
3f535f30
杨鑫
'初始'
|
73
|
</div>
|
|
52fc03a8
杨鑫
'最新'
|
74
75
|
<!-- <div style="margin:10px 0 15px 0">
<el-date-picker
|
|
3f535f30
杨鑫
'初始'
|
76
77
78
79
80
81
82
|
v-model="value1"
value-format="yyyy-mm-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
|
|
52fc03a8
杨鑫
'最新'
|
83
84
85
|
</el-date-picker>
</div> -->
<div style="color:#000;padding: 5px;">单位：张</div>
|
|
3f535f30
杨鑫
'初始'
|
86
|
<!-- 折线图-->
|
|
3c4666ce
杨鑫
'最新'
|
87
|
<div ref="container1" style="width: 100%; height: 400px;"></div>
|
|
3f535f30
杨鑫
'初始'
|
88
89
90
91
92
|
</div>
<div style="background-color: #fff;padding: 10px;margin-right: 10px;width: 32%;">
<div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0">
<div style="line-height: 200%;">渠道销售情况表</div>
|
|
cc748250
杨鑫
'2'
|
93
|
<!-- <el-button style="background-color: #3F9B6A;color: #fff">导出</el-button> -->
|
|
3f535f30
杨鑫
'初始'
|
94
|
</div>
|
|
cc748250
杨鑫
'2'
|
95
|
<!-- <div style="margin:10px 0 15px 0">
|
|
3f535f30
杨鑫
'初始'
|
96
97
98
99
100
101
|
<el-radio-group v-model="radio1">
<el-radio-button label="全部"></el-radio-button>
<el-radio-button label="美团"></el-radio-button>
<el-radio-button label="大麦"></el-radio-button>
<el-radio-button label="携程"></el-radio-button>
</el-radio-group>
|
|
cc748250
杨鑫
'2'
|
102
|
</div> -->
|
|
52fc03a8
杨鑫
'最新'
|
103
|
<div style="color:#000;padding: 5px;">单位：元</div>
|
|
3f535f30
杨鑫
'初始'
|
104
|
<!-- 柱状图-->
|
|
3c4666ce
杨鑫
'最新'
|
105
|
<div ref="container2" style="width: 100%; height: 400px;"></div>
|
|
3f535f30
杨鑫
'初始'
|
106
107
108
109
110
|
</div>
<div style="background-color: #fff;padding: 10px;width: 32%;">
<div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0">
<div style="line-height: 200%;">票种销售额情况表</div>
|
|
cc748250
杨鑫
'2'
|
111
|
<!-- <el-button style="background-color: #3F9B6A;color: #fff">导出</el-button> -->
|
|
3f535f30
杨鑫
'初始'
|
112
|
</div>
|
|
cc748250
杨鑫
'2'
|
113
|
<!-- <div style="margin:10px 0 15px 0">
|
|
3f535f30
杨鑫
'初始'
|
114
115
116
117
118
119
|
<el-radio-group v-model="radio2">
<el-radio-button label="全部"></el-radio-button>
<el-radio-button label="票种1"></el-radio-button>
<el-radio-button label="票种2"></el-radio-button>
<el-radio-button label="票种3"></el-radio-button>
</el-radio-group>
|
|
cc748250
杨鑫
'2'
|
120
|
</div> -->
|
|
52fc03a8
杨鑫
'最新'
|
121
|
<div style="color:#000;padding: 5px;">单位：元</div>
|
|
3f535f30
杨鑫
'初始'
|
122
|
<!-- 柱状图-->
|
|
3c4666ce
杨鑫
'最新'
|
123
|
<div ref="container3" style="width: 100%; height: 400px;"></div>
|
|
3f535f30
杨鑫
'初始'
|
124
125
126
127
128
129
130
131
132
133
134
|
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
|
|
cc748250
杨鑫
'2'
|
135
|
import {getTotalSales,excelToTotalSales} from '@/api/piaowu'
|
|
3f535f30
杨鑫
'初始'
|
136
137
138
139
140
141
|
export default {
data() {
return {
value1:'',
radio1:'',
radio2:'',
|
|
52fc03a8
杨鑫
'最新'
|
142
|
total: 0,
|
|
3f535f30
杨鑫
'初始'
|
143
144
|
pageSize: 10,
currentPage: 1,
|
|
cc748250
杨鑫
'2'
|
145
146
|
tipsList: [],
tableData: [],
|
|
3f535f30
杨鑫
'初始'
|
147
148
149
|
chart1:null,
chart2:null,
chart3:null,
|
|
cc748250
杨鑫
'2'
|
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
pageIndex:{
list: [],
page: 1,
pageSize: 10,
startTime:"",
endTime:"",
ticketChannel:"",
ticketType:""
},
numOne:0,
moyeOne:0,
numTwo:0,
moyeTwo:0,
meimoye:0,
numthree:0,
moyethree:0,
|
|
52fc03a8
杨鑫
'最新'
|
166
167
168
|
type:[],
listType:[],
tongList:[]
|
|
3f535f30
杨鑫
'初始'
|
169
170
171
|
}
},
mounted() {
|
|
cc748250
杨鑫
'2'
|
172
|
this.getAll()
|
|
52fc03a8
杨鑫
'最新'
|
173
174
175
176
|
getTotalSales(this.pageIndex).then(res=>{
this.type = this.extractAndDeduplicateTicketChannels(res.data)
this.listType = this.listype(res.data)
})
|
|
3f535f30
杨鑫
'初始'
|
177
|
|
|
3f535f30
杨鑫
'初始'
|
178
179
180
|
},
methods: {
|
|
cc748250
杨鑫
'2'
|
181
182
|
async getAll(){
let res = await getTotalSales(this.pageIndex)
|
|
52fc03a8
杨鑫
'最新'
|
183
184
185
|
this.tableData = res.data
this.total = res.data.length
this.tongList = this.calculatePriceByTicketType(res.data)
|
|
cc748250
杨鑫
'2'
|
186
|
// this.echar(res.data.list)
|
|
cc748250
杨鑫
'2'
|
187
|
let moyeOne =0
|
|
cc748250
杨鑫
'2'
|
188
189
190
|
this.tableData.map(item=>{
moyeOne += Number(item.price)
|
|
cc748250
杨鑫
'2'
|
191
|
|
|
cc748250
杨鑫
'2'
|
192
|
})
|
|
a4aeeb1e
杨鑫
'最新'
|
193
|
this.moyeOne = moyeOne.toFixed(2)
|
|
52fc03a8
杨鑫
'最新'
|
194
|
|
|
cc748250
杨鑫
'2'
|
195
196
197
198
|
this.echar2(this.tableData)
this.echar3( this.tableData)
this.echar( this.tableData)
},
|
|
52fc03a8
杨鑫
'最新'
|
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
|
extractAndDeduplicateTicketChannels(arr) {
const ticketChannels = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].hasOwnProperty('ticketChannel')) {
ticketChannels.push(arr[i].ticketChannel);
}
}
return [...new Set(ticketChannels)];
},
listype(arr) {
const ticketChannels = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].hasOwnProperty('ticketType')) {
ticketChannels.push(arr[i].ticketType);
}
}
return [...new Set(ticketChannels)];
},
calculatePriceByTicketType(data) {
const result = {};
// 遍历数组中的每个对象
data.forEach(item => {
const ticketChannel = item.ticketChannel;
if (!result[ticketChannel]) {
// 如果 result 对象中还没有该 ticketChannel 的记录，初始化 sum 为 0
result[ticketChannel] = {
ticketChannel: ticketChannel,
sum: 0
};
}
// 累加当前对象的 price 到对应的 ticketChannel 的 sum 中
result[ticketChannel].sum += item.price;
});
// 将 result 对象的属性值转换为数组并返回
return Object.values(result);
},
|
|
cc748250
杨鑫
'2'
|
235
236
237
238
239
|
search(){
if(this.pageIndex.list.length !=0){
this.pageIndex.startTime = this.pageIndex.list[0]
this.pageIndex.endTime = this.pageIndex.list[1]
}
|
|
0e7a57c2
杨鑫
'最新'
|
240
|
this.currentPage = 1
|
|
cc748250
杨鑫
'2'
|
241
242
243
244
245
246
247
248
249
250
251
252
|
this.getAll()
},
clear(){
this.pageIndex = {
list: [],
page: 1,
pageSize: 10,
startTime:"",
endTime:"",
ticketChannel:"",
ticketType:""
}
|
|
0e7a57c2
杨鑫
'最新'
|
253
|
this.currentPage = 1
|
|
cc748250
杨鑫
'2'
|
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
this.getAll()
},
echar(datas) {
let Dom = this.$refs.container1
let myChart = echarts.init(Dom)
// let processedData = datas.map(item => ({
// name: item.ticketChannel,
// value: item.num
// }))
let processedData = datas.reduce((accumulator, item) => {
// 查找当前名称是否已经存在于累加器中
let existingItemIndex = accumulator.findIndex(i => i.name === item.time);
// 如果存在，则累加值
if (existingItemIndex !== -1) {
accumulator[existingItemIndex].value += item.num;
} else {
// 如果不存在，则添加新项
accumulator.push({ name: item.time, value: item.num });
}
return accumulator;
}, []); // 初始值为空数组
|
|
cc748250
杨鑫
'2'
|
277
|
// this.chart1 = echarts.init(diameter);
|
|
3f535f30
杨鑫
'初始'
|
278
|
// 指定图表的配置项和数据
|
|
cc748250
杨鑫
'2'
|
279
|
let option = {
|
|
3c4666ce
杨鑫
'最新'
|
280
281
282
283
284
285
286
|
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
|
|
3f535f30
杨鑫
'初始'
|
287
288
|
xAxis: {
type: 'category',
|
|
cc748250
杨鑫
'2'
|
289
290
|
data:processedData.map(item => item.name),
},
|
|
3f535f30
杨鑫
'初始'
|
291
292
293
294
295
|
yAxis: {
type: 'value'
},
series: [
{
|
|
cc748250
杨鑫
'2'
|
296
297
|
data:processedData.map(item => item.value),
type: 'line',
|
|
e7a2677d
杨鑫
'更新'
|
298
299
300
|
itemStyle: {
color: '#3f9b6a',
},
|
|
3f535f30
杨鑫
'初始'
|
301
302
|
}
]
|
|
cc748250
杨鑫
'2'
|
303
|
}
|
|
3f535f30
杨鑫
'初始'
|
304
305
|
// 使用刚指定的配置项和数据显示图表。
|
|
cc748250
杨鑫
'2'
|
306
|
option && myChart.setOption(option);
|
|
3c4666ce
杨鑫
'最新'
|
307
308
309
|
window.addEventListener('resize', function () {
myChart.resize();
})
|
|
3f535f30
杨鑫
'初始'
|
310
|
},
|
|
52fc03a8
杨鑫
'最新'
|
311
312
313
314
315
316
317
318
319
320
321
322
|
weiqi(val) {
switch (val) {
case '1':
return '有赞';
case 2:
return '';
case 3:
return '';
default:
return '';
}
},
|
|
cc748250
杨鑫
'2'
|
323
324
325
326
327
328
329
330
331
332
333
334
|
echar2(datas) {
let Dom = this.$refs.container2
let myChart = echarts.init(Dom)
let processedData = datas.reduce((accumulator, item) => {
// 查找当前名称是否已经存在于累加器中
let existingItemIndex = accumulator.findIndex(i => i.name === item.ticketChannel);
// 如果存在，则累加值
if (existingItemIndex !== -1) {
accumulator[existingItemIndex].value += Number(item.price);
} else {
// 如果不存在，则添加新项
|
|
52fc03a8
杨鑫
'最新'
|
335
336
|
accumulator.push({ name: item.ticketChannel , value:Number(item.price)});
|
|
cc748250
杨鑫
'2'
|
337
338
339
340
341
|
}
return accumulator;
}, []); // 初始值为空数组
// this.chart2= echarts.init(diameter);
|
|
3f535f30
杨鑫
'初始'
|
342
|
let option = {
|
|
3c4666ce
杨鑫
'最新'
|
343
344
345
346
347
348
349
350
351
352
353
354
355
356
|
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 网格配置，设置 left 为 50px 使图表右移
grid: {
left: '50px',
right: '10%',
bottom: '3%',
containLabel: true
},
|
|
3f535f30
杨鑫
'初始'
|
357
358
|
xAxis: {
type: 'category',
|
|
52fc03a8
杨鑫
'最新'
|
359
|
data:processedData.map(item => this.weiqi(item.name)),
|
|
3f535f30
杨鑫
'初始'
|
360
361
362
363
364
365
|
},
yAxis: {
type: 'value'
},
series: [
{
|
|
cc748250
杨鑫
'2'
|
366
|
data:processedData.map(item => item.value),
|
|
e7a2677d
杨鑫
'更新'
|
367
368
369
370
|
type: 'bar',
itemStyle: {
color: '#3f9b6a',
},
|
|
cc748250
杨鑫
'2'
|
371
|
},
|
|
3f535f30
杨鑫
'初始'
|
372
|
|
|
cc748250
杨鑫
'2'
|
373
374
375
376
|
],
};
option && myChart.setOption(option);
|
|
3c4666ce
杨鑫
'最新'
|
377
378
379
|
window.addEventListener('resize', function () {
myChart.resize();
})
|
|
3f535f30
杨鑫
'初始'
|
380
|
},
|
|
cc748250
杨鑫
'2'
|
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
|
echar3(datas) {
let Dom = this.$refs.container3
let myChart = echarts.init(Dom)
let processedData = datas.reduce((accumulator, item) => {
// 查找当前名称是否已经存在于累加器中
let existingItemIndex = accumulator.findIndex(i => i.name === item.ticketType);
// 如果存在，则累加值
if (existingItemIndex !== -1) {
accumulator[existingItemIndex].value +=Number(item.price);
} else {
// 如果不存在，则添加新项
accumulator.push({ name: item.ticketType, value: Number(item.price) });
}
return accumulator;
}, []); // 初始值为空数组
// this.chart3 = echarts.init(diameter);
|
|
3f535f30
杨鑫
'初始'
|
400
401
|
// 指定图表的配置项和数据
let option = {
|
|
3c4666ce
杨鑫
'最新'
|
402
403
404
405
406
407
408
409
410
411
412
413
414
415
|
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 网格配置，设置 left 为 50px 使图表右移
grid: {
left: '50px',
right: '10%',
bottom: '3%',
containLabel: true
},
|
|
3f535f30
杨鑫
'初始'
|
416
417
|
xAxis: {
type: 'category',
|
|
cc748250
杨鑫
'2'
|
418
|
data:processedData.map(item => item.name),
|
|
3f535f30
杨鑫
'初始'
|
419
420
421
422
423
424
|
},
yAxis: {
type: 'value'
},
series: [
{
|
|
cc748250
杨鑫
'2'
|
425
|
data:processedData.map(item => item.value),
|
|
e7a2677d
杨鑫
'更新'
|
426
427
428
429
|
type: 'bar',
itemStyle: {
color: '#3f9b6a',
},
|
|
3f535f30
杨鑫
'初始'
|
430
431
432
433
|
}
]
};
// 使用刚指定的配置项和数据显示图表。
|
|
cc748250
杨鑫
'2'
|
434
|
option && myChart.setOption(option)
|
|
3c4666ce
杨鑫
'最新'
|
435
436
437
|
window.addEventListener('resize', function () {
myChart.resize();
})
|
|
3f535f30
杨鑫
'初始'
|
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
|
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
|
|
cc748250
杨鑫
'2'
|
464
465
|
},
|
|
3f535f30
杨鑫
'初始'
|
466
467
468
469
470
471
|
handleCurrentChange(val) {
this.currentPage = val
},
handleSizeChange(val) {
this.pageSize = val
},
|
|
cc748250
杨鑫
'2'
|
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
|
async daochu(){
let res = await excelToTotalSales(this.pageIndex)
if(!res){
return
}
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
const fileName = '总销售额明细表.xls'
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
this.$message({
message: '导出成功',
type: 'success'
})
|
|
3f535f30
杨鑫
'初始'
|
498
|
|
|
cc748250
杨鑫
'2'
|
499
500
|
},
}
|
|
3f535f30
杨鑫
'初始'
|
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
|
}
</script>
<style lang='scss' scoped>
.history{
padding: 0 20px 20px 20px;
min-height: calc(100vh - 50px - 20px);
background-color: #Fff;
}
::v-deep .el-form-item__label{
font-weight: normal;
font-size: 14px;
}
::v-deep .buttonHover:hover{
color:#3f9b6a !important;
border-color: #c5e1d2 !important;
background-color: #ecf5f0 !important;
outline: none;
}
</style>
<style scoped>
</style>
<style>
.el-tooltip__popper {
max-width: 50%;
}
</style>
|
