actday.vue

<template>
	<div class="daily">
		<el-row :gutter="12">
			<el-col :span="24" class="download-parent chart-col asis-table-wrapper">
				<!-- <span class="ehcarts-title">活动近期对比（前5天后5天）</span> -->
				<!-- 活动近期对比（前5天后5天）line bg-->
				<!-- <h3 class="asis-table-header">
					<span class="ehcarts-title">{{ i18nFormatter(HolidayNear_title) }}</span>
					<span class="download-text" @click="exportDataHandle('recentComChart',i18nFormatter(HolidayNear_title),'HolidayNear')">{{$t('allPages.load')}}</span>
					<span class="report-type-box">
						<span :class="tab['firstTab'] ? 'report-item line-report': 'report-item line-report report-item-line'" @click="selReport('firstTabLine')"></span>
						<span :class="tab['firstTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('firstTabTable')"></span>
					</span>
            	</h3> -->
				<h3 class="asis-table-header">
					<span class="asis-table-title">{{ i18nFormatter(HolidayNear_title) }}</span>
					<span class="asis-table-download" @click="exportDataHandle('recentComChart',i18nFormatter(HolidayNear_title),'HolidayNear')">{{$t('allPages.load')}}</span>
					<span class="report-type-box">
						<span :class="tab['firstTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('firstTabLine')"></span>
						<span :class="tab['firstTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('firstTabTable')"></span>
					</span>
            	</h3>
				<div class="table-boxs" v-if="tab['firstTab']">
					<common-tab :tableData="HolidayNearTable" id="domFeaDayCounting" :headData="HolidayNearHead" :tabHeight="''"></common-tab>
				</div>
				<mix-charts v-if="!tab['firstTab']" chartId="recentComChart" class="recent-wrapper" :chartData="HolidayNearChart" chartType="AreaLine" />
				
			</el-col>
		</el-row>
		<el-row :gutter="12">
			<el-col :span="24" class="download-parent chart-col asis-table-wrapper">
				<!-- 活动效果对比图 bar-->
				<h3 class="asis-table-header">
					<span class="asis-table-title">{{$t('echartsTitle.eventEffect')}}</span>
					<span class="asis-table-download" @click="exportDataHandle('actEffChart',$t('echartsTitle.eventEffect'),'HolidayEffect')">{{$t('allPages.load')}}</span>
					<span class="report-type-box">
						<span :class="tab['seconTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('seconTabLine')"></span>
						<span :class="tab['seconTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('seconTabTable')"></span>
					</span>
            	</h3>
				<div class="table-boxs" v-if="tab['seconTab']">
					<common-tab v-if="tab['seconTab']" :tableData="HolidayEffectTable" id="domFeaDayCounting" :headData="HolidayEffectHead" :tabHeight="''"></common-tab>
				</div>
				<mix-charts v-if="!tab['seconTab']" chartId="actEffChart" class="acteff-wrapper" :chartData="HolidayEffectChart" chartType="Cylindrical" />
			</el-col>
		</el-row>
		<el-row :gutter="12">
			<el-col :span="24" class="download-parent chart-col asis-table-wrapper">
				<!-- 活动当日时刻对比图 line-->
				<h3 class="asis-table-header">
					<span class="asis-table-title">{{ i18nFormatter(HolidayHourDetail_title) }}</span>
					<span class="asis-table-download" @click="exportDataHandle('timeActChart',i18nFormatter(HolidayHourDetail_title),'HolidayHourDetail')">{{$t('allPages.load')}}</span>
					<span class="report-type-box">
						<span :class="tab['thirdTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('thirdTabLine')"></span>
						<span :class="tab['thirdTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('thirdTabTable')"></span>
					</span>
            	</h3>
				<div class="table-boxs" v-if="tab['thirdTab']">
					<common-tab v-if="tab['thirdTab']" :tableData="HolidayHourDetailTable" id="domFeaDayCounting" :headData="HolidayHourDetailHead" :tabHeight="''"></common-tab>
				</div>				
				<mix-charts v-if="!tab['thirdTab']" chartId="timeActChart" class="time-act-wrapper" :chartData="HolidayHourDetailChart" chartType="Line" />
			</el-col>
		</el-row>
		<export-data-dialog ref="exportDialog"></export-data-dialog>
	</div>
</template>

<script>
import exportData from '../../../public/exportData'
import publicChart from '../../common/publicChart'
import commonTable from '../../common/tableCommon'
export default {
	props: {
		propparam: Object
	},
	data() {
		return {
			HolidayNearChart: {},	// 活动近期对比（前5天后5天）
			HolidayEffectChart: {},	// 活动效果对比图
			HolidayHourDetailChart: {},	// 活动当日时刻对比图
			tableKeyToId: {},
			tableIds: '',
			emitData: [],
			act_date: '',
			HolidayNear_title: 'holidayObjectHolidayNear',
			HolidayHourDetail_title: 'holidayObjectHolidayHourDetail',
			tab:{
                "firstTab": false,
                "seconTab": false,
                "thirdTab": false,
			},
			tabChartKey: {
				"firstTab": 'HolidayNear',
                "seconTab": 'HolidayEffect',
                "thirdTab": 'HolidayHourDetail',
			},
			HolidayNearTable: [],
			HolidayNearHead: [],
			HolidayEffectTable: [],
			HolidayEffectHead: [],
			HolidayHourDetailTable: [],
			HolidayHourDetailHead: [],
		}
	},
	components: {
		'act-chart': publicChart,
		'export-data-dialog': exportData,
		'common-tab': commonTable,
	},
	watch: {
		propparam: {
			handler: 'refreshHandle',
			immediate: true
		}
	},
	computed: {
	},
	mounted() {
	},
	methods: {
		refreshHandle(param) {
			if (param.dateType !== '/actAsis/actday') return;
			this.emitData = param.data;
			if (param.data.asis_act) {
				if (this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
					this.getChartData(this.tableIds);
				} else {
					this.getChartId();
				}
			} else {
				this.$message({
					showClose: true,
					type: 'warning',
					message: this.$t('message.noEvent')
				})
			}
		},
		getChartId() {
			this.tableKeyToId = {};
			this.tableIds = '';
			this.$api.baseReport.reportChart({
				report: 'holidayObject',
				// _t: Date.parse(new Date()) / 1000
			})
				.then(res => {
					let tableItem = res.data.data;
					tableItem.forEach((item, index) => {
						this.tableKeyToId[item.key] = item.id;
						if (item.key === 'HolidayNear' || item.key === 'HolidayEffect' || item.key === 'HolidayHourDetail') {
							if (index == tableItem.length - 1) {
								this.tableIds += item.id;
							} else {
								this.tableIds += item.id + ',';
							}
						}
					});
					this.getChartData(this.tableIds);
				})
		},
		getChartData(tableIds) {
			if (!tableIds) return;
			this.HolidayNearChart = {};	// 活动近期对比（前5天后5天
			this.HolidayEffectChart = {};	// 活动效果对比图
			this.HolidayHourDetailChart = {};	// 活动当日时刻对比图
			if (this.emitData.asis_time) {
				// if (this.emitData.asis_time.getFullYear() === new Date().getFullYear()) {
				// startTime = dateUnit.dateFormat(new Date(Date.parse(this.emitData.asis_time.getFullYear() + '/01/01')), 'yyyy-MM-dd');
				// } else {
				//     startTime = this.emitData.asis_time;
				// }
				this.act_date = this.emitData.asis_time;
			} else {
				this.act_date = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
			}
			let param = {
				orgIds: this.emitData.asis_org,
				date: this.act_date,
				holidayEventId: this.emitData.asis_act,
				chartIds: tableIds,
				kpiType: this.emitData.asis_kpi,
			}
			let {params,asisLevel} = this.dealFormat(param,this.emitData);
			let options = ['TAB_CHART', 'TAB_TABLE'];
			options.forEach(item => {
				params.option = item;
				this.$api.analysisReport.holidayObjectAnalysis(asisLevel, params)
				.then(res => {
					let result = res.data;
					let report = 'holidayObject'
						, {
							HolidayNear
							, HolidayEffect
							, HolidayHourDetail
						} = result.data.body;
					if(item === 'TAB_CHART') {
						HolidayNear['otherConf'] = {
							_color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
							grid: { top: 16, right: 40, bottom: 66, left: 60 },
							hasYaxisName: false
						}
						this.HolidayNearChart = HolidayNear
						HolidayEffect['otherConf'] = {
							_color: ['#3BB8FF', '#87D14B', '#6784E3'],
							grid: { top: 30, right: 40, bottom: 66, left: 60 },
							legendBottom: 16,
							seriesText: 'traffic',
							yAxisName: this.$t('format.perTime')
						}
						this.HolidayEffectChart = HolidayEffect
						HolidayHourDetail['otherConf'] = {
							grid: { top: 16, right: 40, bottom: 66, left: 60 },
							_color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
							legendBottom: 16
						}
						this.HolidayHourDetailChart = HolidayHourDetail
					}else {
						this.HolidayNearHead = this.autoComplateHead(null, HolidayNear.xaxis.data); 
                    	this.HolidayEffectHead = this.autoComplateHead(null, HolidayEffect.xaxis.data); 
						this.HolidayHourDetailHead = this.autoComplateHead(null, HolidayHourDetail.xaxis.data);
						if(HolidayNear.series.length) {
                        	this.HolidayNearTable = this.dealData(HolidayNear.series, this.HolidayNearHead);
						}
						if(HolidayEffect.series.length) {
							this.HolidayEffectTable = this.dealData(HolidayEffect.series, this.HolidayEffectHead);
						}
						if(HolidayHourDetail.series.length) {
							this.HolidayHourDetailTable = this.dealData(HolidayHourDetail.series, this.HolidayHourDetailHead);
						}
					}
				})
				.catch(err => {
					this.catchErrorHandle(err)
				})
			})
		},
		selReport(type, chartKey){
            let tabPosition = type.slice(0,8);
            let tabType = type.slice(8);
            if(this.tab[tabPosition] && tabType == 'Line'){
                this.tab[tabPosition] = false;
            }else if(!this.tab[tabPosition] && tabType == 'Table'){
                this.tab[tabPosition] = true;
                if(type == 'thirdTabTable'){
                    setTimeout(() => {
                         window.scrollTo(0,document.body.scrollHeight)
                    })
                }
            }
        },
		exportDataHandle(domId, title, chartKey) {
			// 
			let chartId = this.tableKeyToId[chartKey];
			let exportNeed = {
				domId: domId,
				title: title,
				data: {
					url: '/report/holidayObject/' + this.emitData.asis_level + '/' + chartId + '/excel',
					params: 'orgIds=' + this.emitData.asis_org + '&date=' + this.act_date + '&holidayEventId=' + this.emitData.asis_act + '&kpiType=' + this.emitData.asis_kpi
				}
			}
			// console.log('actday exportNeed', exportNeed)
			this.$refs.exportDialog.dialogInit(exportNeed);
		},
	}
}
</script>

<style scoped>
/* .chart-col {
		margin-bottom: 12px;
	} */

.chart-download {
	position: absolute;
	padding-right: 20px;
	font-size: 14px;
	right: 45px;
	top: 25px;
	color: #666;
	font-family: inherit;
	float: right;
	cursor: pointer;
}

.chart-download:after {
	content: "";
	display: block;
	width: 14px;
	height: 15px;
	background: url(~@/assets/img/export.png) no-repeat;
	position: absolute;
	right: 0;
	top: 3px;
}

#recentComChart {
	height: 572px;
	background-color: #fff;
}

#actEffChart {
	height: 583px;
	background-color: #fff;
}

#timeActChart {
	height: 500px;
	background-color: #fff;
}
.asis-table-title {
	margin-left: 26px;
}
.asis-table-download {
	margin-right: 26px;
}
.table-boxs {
	padding: 0 26px 0 26px;
}
@media only screen and (max-width: 1366px) {
	#recentComChart {
		height: 360px;
		background-color: #fff;
	}

	#actEffChart {
		height: 360px;
		background-color: #fff;
	}

	#timeActChart {
		height: 360px;
		background-color: #fff;
	}
}

@media only screen and (max-width: 1280px) {
	#recentComChart {
		height: 360px;
		background-color: #fff;
	}

	#actEffChart {
		height: 360px;
		background-color: #fff;
	}

	#timeActChart {
		height: 360px;
		background-color: #fff;
	}
}
.report-type-box {
    position: absolute;
    padding-right: 20px;
    right: 100px;
    top: 16px;
    float: right;
    cursor: pointer;
}
</style>