customly.vue

<template>
    <div class="customly">
        <!-- 每日报表 -->
        <div class="asis-table-wrapper single-report-wrapper">
            <h3 class="asis-table-header single-report-header">
                <!-- <el-select v-model="kpiValue" class="select-box" size="mini" @change="changeSel('detailData', kpiValue)" :placeholder="$t('pholder.select')" v-if="emitData.asis_object == 2">
                    <el-option v-for="item in kpiOption" :key="item.value" :label="i18n(item.label)" :value="item.value">
                    </el-option>
                </el-select> -->
                <span class="asis-table-download" @click="downloadData(i18nFormatter(detailData_title))">{{ $t('allPages.load') }}</span>
				<span class="report-type-box">
					<span :class="barLineIcon" @click="selReport('line')"></span>
				    <span :class="isCTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selReport('table')"></span>
				</span>
            </h3>
			<div class="date-radio-wrapper tf-ratio-group single-ratio-group" v-if="emitData.asis_object == 1">
                <el-radio-group v-model="radioDate" size="mini" fill="#0069FF" @change="changeTabSelect(radioDate)">
                    <el-radio-button label="detailData" border>{{$t('button.day')}}</el-radio-button>
                    <el-radio-button label="trafficHourForDates" border>{{$t('button.hour')}}</el-radio-button>
                    <el-radio-button label="trafficMinuteForDates" border>{{$t('button.min')}}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="date-radio-wrapper tf-ratio-group single-ratio-group" v-else>
                <el-radio-group v-model="multipleRadio" size="mini" fill="#0069FF" @change="multipleChangeTabSelect(multipleRadio)">
                    <el-radio-button label="detailData" border>{{$t('button.day')}}</el-radio-button>
                    <el-radio-button label="hourAverageTraffic" border>{{$t('button.hour')}}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="asis-table-content" v-loading="loading">
                <el-table
					v-if="isCTabChart"
					id="domBcTrafficFlow"
                    class="asis-table"
                    :data="tabData"
                    header-row-class-name="asis-table-head"
                    style="width: 100%"
                    :max-height="tableHeight">
                    <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item,index) in tabHeadData" :key="index" min-width="110" :fixed="index == 0">
                    </el-table-column>
                    <el-table-column prop="averageVal" :label="$t('table.average')"  show-overflow-tooltip align="center">
                    </el-table-column>
                    <el-table-column prop="sums" :label="$t('table.total')"  show-overflow-tooltip align="center">
                    </el-table-column>
                </el-table>
				<!-- <basic-chart v-else id="bclineChart" class="basic-line-chart" :style="{ height: tableHeight + 'px' }" :options="chartData" chartType="BasicLine"></basic-chart> -->
                <mix-charts v-else chartId="bclineChart" class="basic-line-chart" :style="{ height: tableHeight + 'px' }" :chartData="chartData" chartType="AreaLine" />
            </div>
        </div>
		<export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
// import commonTable from '../../public/tableCommon'
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
export default {
    props: {
        propparam: Object
    },
	components: {
	    // 'common-tab': commonTable
		'export-data-dialog': exportData,
		'basic-chart': publicChart,
	},
    data() {
        return {
            loading: true,
            kpiValue: 'TRAFFIC',
            kpiOption: [{
                label: 'TRAFFIC',
                value: 'TRAFFIC'
            }, {
                label: 'SALES',
                value: 'SALES'
            }, {
                label: 'DEPTH',
                value: 'DEPTH'
            }, {
                label: 'PREPRICE',
                value: 'PREPRICE'
            }, {
                label: 'PERAREAVALUE',
                value: 'PERAREAVALUE'
            }, {
                label: 'DURATIONTIME',
                value: 'DURATIONTIME'
            }],
            detailData_title: '', //本年每日报表
            tableKeyToId: {},
            tableIds: '',
            emitData: {},
            tableHeight:0,
			isCTabChart: true,
			tabHeadData: [],
			tabOps: [],
			chartData: {},
			startDate: '',
			endDate: '',
            radioDate: 'detailData',
            multipleRadio: 'detailData',
        }
    },
    computed:{
		barLineIcon() {
			if(this.isCTabChart) {
				return 'report-item line-report'
			} else {
				return 'report-item line-report report-item-line'
			}
		},
		tabData() {
			return this.computeData(this.tabOps)
		},
    },
    watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        },
    },
    created() {
        let winH = $(window).height(),scale = 0.34;
        if(winH <= 720){
            scale = 0.4
        }else if (winH <= 768){
            scale = 0.38
        }else if (winH <= 900){
            scale = 0.36
        }else if (winH <= 1080){
            scale = 0.34
        }
        this.tableHeight = winH - winH * scale
        this.isCTabChart = window._vionConfig.reportType &&  window._vionConfig.reportType === 'table'
            ? true : false;
    },
    mounted() {
    },
    methods: {
        i18n(title){
            let languageTitle = 'format.' + title;
            return this.$t(languageTitle)
        },
        refreshHandle(param) {
            if(param.dateType !== '/baseasis/customly') return;
            this.emitData = param.data;
            if(this.emitData.asis_object === 1){
                this.getTableId('BasicDayReport',this.radioDate);
            }else{
                this.getTableId('BasicReport',this.multipleRadio);
            }
		},
		changeTabSelect(val) {
			if(val == 'detailData') {
                this.getTableId('BasicReport',val)
            }else{
                this.getTableId('BasicDayReport',val)
            };
        },
        multipleChangeTabSelect(val) {
            this.getTableId('BasicReport',val)
        },
        getTableId(basicType,keyVal) {
            this.tableKeyToId = {};
            this.tableIds = '';
			// let chartIds = '';
            this.$api.baseReport.reportChart({
                report: basicType ? basicType : 'BasicReport',
            })
                .then(res => {
                    let tableItem = res.data.data;
                    tableItem.forEach((item, index) => {
                        this.tableKeyToId[item.key] = item.id;
                        // if (item.key === 'kpiData' || item.key === 'detailData') {
                            // if (index == tableItem.length - 1) {
                                // chartIds += item.id;
                            // } else {
                                // chartIds += item.id + ',';
                            // }
                        // }
                    });
					this.tableIds = this.tableKeyToId[keyVal || 'detailData'];
					this.getData(this.tableIds,keyVal);
                })
        },
		getData(chartIds,keyVal) {
			this.loading = true;
            this.tabHeadData = [];
            this.tabOps = [];
			this.chartData = {};
			if(!chartIds) return;
			if (this.emitData.asis_time) {
			    this.startDate = this.emitData.asis_time[0];
			    this.endDate = this.emitData.asis_time[1];
			} else {
			    this.startDate = this.dayReduce(new Date(), 15);
			    this.endDate = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
			}
			let param = {
                orgIds: this.emitData.asis_org,
				startDate: this.startDate,
				endDate: this.endDate,
				chartIds: chartIds,
				kpiType: keyVal == 'trafficHourForDates' && this.emitData.asis_object === 1 ? '' : this.kpiValue,
				option: this.isCTabChart ? 'TAB_TABLE' : 'TAB_CHART',
            }
            let {params,asisLevel} = this.dealFormat(param,this.emitData);
			this.$api.analysisReport.baseAnalysis(((keyVal == 'trafficHourForDates' || keyVal == 'trafficMinuteForDates') ? 'day/' : '') + asisLevel, params)
			.then(res => {
				let result = res.data;
				let resData = result.data.body[keyVal ? keyVal : 'detailData'];
				this.detailData_title = 'BasicReportdetailData';
				setTimeout(() => {
					this.loading = false
				}, 500)
				if(resData) {
					// 判断是否是表格还是图
					if(this.isCTabChart) {	// 表格
						let flowBodyData = resData.series;
						let flowHeadData = resData.xaxis.data;
						this.tabHeadData = this.autoComplateHead('detail', flowHeadData);
						this.tabOps = this.dealData(flowBodyData, this.tabHeadData, true, flowHeadData.length);
					} else {	// 图
                        let chartOption = resData;
                        // chartOption.chartKey = keyVal || true;
                            // chartOption.isRadioObject = this.emitData.asis_object === 1 ? true : false;
                            // chartOption['hasYaxisName'] = false
                            // chartOption['color'] = ['#3BB8FF', '#FFC62E', '#4396ec', '#4054af', '#d83965', '#9036aa', '#6041b0', '#4fb9d1', '#3f9488', '#97c05c', '#154bee', '#FF9631', '#f39c38', '#e35241']
                            chartOption['otherConf'] = {
                                _color: ['#3BB8FF', '#FFC62E', '#4396ec', '#4054af', '#d83965', '#9036aa', '#6041b0', '#4fb9d1', '#3f9488', '#97c05c', '#154bee', '#FF9631', '#f39c38', '#e35241'],
                                hasYaxisName: false,
                                chartKey: keyVal || true,
                                isRadioObject: this.emitData.asis_object === 1 ? true : false
                            }
                            if (/\,/.test(this.emitData.asis_org)) {
                                chartOption['otherConf']['selectedLen'] = this.emitData.asis_org.split(',').length
                            }
                        this.chartData = chartOption;
					}
				}
			})
			.catch(err => {
				this.catchErrorHandle(err)
				setTimeout(() => {
					this.loading = false
				}, 500)
			})
		},
		selReport(iconType) {
		    if(iconType === 'line') {
		        if(this.isCTabChart) {
					this.isCTabChart = false;
					this.getData(this.tableIds,this.emitData.asis_object == 1 ? this.radioDate : this.multipleRadio);
		        }
		    } else {
		        if(!this.isCTabChart) {
		            this.isCTabChart = true;
					this.getData(this.tableIds,this.emitData.asis_object == 1 ? this.radioDate : this.multipleRadio);
		        }
		    }
		},
		changeSel(tableKey, kpiVal) {
		    this.getData(this.tableIds);
		},
		downloadData(title) {
			if(this.isCTabChart) {
				this.dealExport('domBcTrafficFlow', title)
			} else {
                let chartKey = this.emitData.asis_object == 1
                    ? this.radioDate
                    : this.multipleRadio
				this.exportDataHandle(title, chartKey)
			}
		},
		exportDataHandle(title, chartKey) {
		    let chartId = this.tableKeyToId[chartKey];
		    let exportNeed = {
		        domId: this.isCTabChart ? 'domBcTrafficFlow' : 'bclineChart',
		        title: title,
		        data: {
					url: `/report/basics/${this.emitData.asis_level}/${chartId}/excel`,
		            params: `orgIds=${this.emitData.asis_org}&startDate=${this.startDate}&endDate=${this.endDate}&kpiType=${this.kpiValue}&option=${this.isCTabChart ? 'TAB_TABLE' : 'TAB_CHART'}`
		        }
		    }
		    this.$refs.exportDialog.dialogInit(exportNeed);
		},
    }
}
</script>

<style scoped>
</style>