webapp / GreenwayWeb

<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">
					<el-form ref="formParams" :inline="true" :model="pageIndex">
						<el-form-item label="渠道">
							<el-select placeholder="全部" v-model="pageIndex.ticketChannel"
								style="width: 120px;margin-right: 15px">
								<el-option v-for="(item,index) in type" :label="item==1?'有赞':'其他'" :value="item" />
							</el-select>
						</el-form-item>
						<el-form-item label="票种">
							<el-select placeholder="全部" v-model="pageIndex.ticketType"
								style="width: 120px;margin-right: 15px">
								<el-option v-for="(item,index) in listType" :label="item" :value="item" />
							</el-select>
						</el-form-item>
						<el-form-item label="日期">
							<el-date-picker v-model="pageIndex.list" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" />
						</el-form-item>

						<el-form-item label-width="0">
							<el-button @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
							<el-button @click="clear" class="buttonHover"
								style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<!-- 表格 -->
			<div class="content_table" style="padding: 15px 10px 10px 10px;background-color:#F2F3F5">
				<div style='padding:20px 10px;background-color:#fff;margin-bottom: 10px;'>
					<div style="font-size:14px;justify-content: space-around;display:flex;">
						<div style="display:flex;width:50%;justify-content: space-around;text-align: center;" v-for="(item,index) in titleList">
							<div style="width:45%;border-right:1px solid #F2F3F5" >
								<div style="margin-bottom: 10px;font-weight: 600;">{{item.ticketType}}销售数量(张)</div>
								<div style="font-weight: 600;">{{item.sumNum}}</div>
							</div>
							<div style="width:45%;border-right:1px solid #F2F3F5">
								<div style="margin-bottom: 10px;font-weight: 600;">{{item.ticketType}}销售总额(元)</div>
								<div style="font-weight: 600;">{{item.moyeTwo}}</div>
							</div>
						</div>
					<!-- 	<div style="width:15%;border-right:1px solid #F2F3F5">
							<div style="margin-bottom: 10px;font-weight: 600;">演唱会票销售数量(张)</div>
							<div style="font-weight: 600;">{{numOne}}</div>
						</div>
						<div style="width:15%;">
							<div style="margin-bottom: 10px;font-weight: 600;">演唱会票销售总额(元)</div>
							<div style="font-weight: 600;">{{moyeOne}}</div>
						</div> -->
					</div>
				</div>
				<div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
					<div style="display: flex;margin-bottom: 20px;">
						<div style="width: 100%;padding: 10px 0;">各渠道票种销售数据</div>
						<!-- <el-select  placeholder="全部渠道"
              style="width: 120px;margin-right: 15px">
              <el-option label="1" value="1" />
            </el-select> -->
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="daochu">导出</el-button>
					</div>
					<div class="table">
						<!-- :span-method="objectSpanMethod" -->
						<el-table :summary-method="getSummaries"  show-summary
							:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
							:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
							<el-table-column label="序号" min-width="50">
								<template slot-scope="scope">
									{{scope.$index +1}}
								</template>
							</el-table-column>
							<el-table-column prop="ticketChannel" label="渠道" min-width="60">
								<template slot-scope="scope">
									{{scope.row.ticketChannel == '1'?'有赞':'其他'}}
								</template>
							</el-table-column>
							<el-table-column prop="ticketType" label="票种" min-width="60"/>
							<el-table-column prop="ticketName" label="票名" min-width="160" :show-overflow-tooltip="true"/>
							<el-table-column prop="num" label="销售数量(张)" />
							<el-table-column prop="ticketPrice" label="客单价(元)" />
							<el-table-column prop="price" label="销售金额(元)" />
							<!-- <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">详情</el-button>
                  <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">删除</el-button>
                </template>
              </el-table-column> -->
						</el-table>
					</div>
					<!-- 分页 -->
					<div class="fenye">

						<el-pagination class="pagination" :hide-on-single-page="flag" background 
							:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
							layout="total,prev, pager,next" :total="total " @size-change="handleSizeChange"
							@current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getTicketType,
		excelToTicketTypeSalesSituation
	} from '@/api/piaowu'
	export default {
		data() {
			return {
				flag: false,
				total: 0,
				pageSize: 10,
				currentPage: 1,
				tipsList: [],
				tableData: [],
				pageIndex: {
					list: [],
					page: 1,
					pageSize: 10,
					startTime: "",
					endTime: "",
					ticketChannel: "",
					ticketType: ""
				},
				numOne: 0,
				moyeOne: 0,
				numTwo: 0,
				moyeTwo: 0,
				type: [],
				listType: [],
				titleList:[]
			}
		},
		mounted() {
			this.getAll()
			getTicketType(this.pageIndex).then(res=>{
				this.type = this.extractAndDeduplicateTicketChannels(res.data)
				this.listType = this.listype(res.data)
			})
			
		},
		methods: {
			async getAll() {
				let res = await getTicketType(this.pageIndex)
				this.tableData = res.data
				this.total = res.data.length
				this.titleList = this.processTicketData(res.data)
			},
			processTicketData(data) {
			    const result = {};	
			    // 遍历原始数据
			    data.forEach(item => {
			        const ticketType = item.ticketType;
			        if (!result[ticketType]) {
			            // 如果该 ticketType 还未在结果对象中，初始化它
			            result[ticketType] = {
			                ticketType: ticketType,
			                sumNum: 0,
			                moyeTwo: 0
			            };
			        }
			        // 累加 num 和 price
			        result[ticketType].sumNum += item.num;
			        result[ticketType].moyeTwo += item.price;
			    });
			
			    // 将结果对象转换为数组
			    return Object.values(result);
			},
			search() {
				if (this.pageIndex.list.length != 0) {
					this.pageIndex.startTime = this.pageIndex.list[0]
					this.pageIndex.endTime = this.pageIndex.list[1]
				}
				this.getAll()
			},
			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)];
			},
			clear() {
				this.pageIndex = {
					list: [],
					page: 1,
					pageSize: 10,
					startTime: "",
					endTime: "",
					ticketChannel: "",
					ticketType: ""
				}
				this.getAll()
			},
			changepiao() {
				this.getAll()
			},
			async daochu() {
				let res = await excelToTicketTypeSalesSituation(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'
				})
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总计';
						return;
					}
					if (['销售数量(张)', '客单价(元)', '销售金额(元)'].includes(column.label)) {
						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);
						} else {
							sums[index] = '';
						}
					} else {
						sums[index] = '';
					}
				});

				return sums;
			},

			handleCurrentChange(val) {
				this.currentPage = val
			},
			handleSizeChange(val) {
				this.pageSize = val
			},
			// objectSpanMethod({
			// 	row,
			// 	column,
			// 	rowIndex,
			// 	columnIndex
			// }) {
			// 	if (columnIndex === 0) {
			// 		if (rowIndex % 2 === 0) {
			// 			return {
			// 				rowspan: 2,
			// 				colspan: 1
			// 			};
			// 		} else {
			// 			return {
			// 				rowspan: 0,
			// 				colspan: 0
			// 			};
			// 		}
			// 	}
			// },
		},
	}
</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 .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}
</style>
<style scoped>
	.history /deep/ .el-table .cell.el-tooltip img {
		max-height: 100px;
	}


	.pagination {
		text-align: right;
		line-height: 20px;
	}

	.greens {
		color: #3F9B6A;
	}

	/deep/ .el-table__row {
		font-size: 14px;
		color: #000000e6;
		height: 42px;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}

	::v-deep .el-pagination__total {
		position: absolute;
		left: 60px;
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>
<style>
	.el-tooltip__popper {
		max-width: 50%;
	}
</style>