yearly.vue 4.49 KB
<template>
    <div class="yearly">
        <div class="asis-table-wrapper heatmap-wrapper single-report-wrapper">
            <div class="heatmap-content download-parent">
                <!-- 时间热力图 -->
                <heatmap-chart id="yearHeatmap" class="year-heatmap-chart" :options="yearHeatmap_ops" chartType="YearHeatmap"></heatmap-chart>
                <!-- <span class="chart-title">{{$t('asis.TimeHeat')}}</span> -->
                <span class="download-text" @click="exportDataHandle($t('asis.TimeHeat'),'TimeThermodynamic')">{{$t('allPages.load')}}</span>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
export default {
    props: {
        propparam: Object
    },
    data() {
        return {
            yearHeatmap_ops: {},
            chartKeyToId: {},
            chartIds: '',
            emitData: [],
            startDate: '',
            endDate: '',
        }
    },
    components: {
        'heatmap-chart': publicChart,
        'export-data-dialog': exportData,
    },
    watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    mounted() {
    },
    methods: {
        refreshHandle(param) {
            if (param.dateType !== '/timeheat/yearly') return;
            this.emitData = param.data;
            if (this.chartIds && JSON.stringify(this.chartKeyToId) !== '{}') {
                this.getChartData(this.chartIds);
            } else {
                this.getChartId();
            }
        },
        getChartId() {
            this.chartKeyToId = {};
            this.chartIds = '';
            this.$api.baseReport.reportChart({
                report: 'TimeThermodynamic',
                // _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
                    let chartItem = res.data.data;
                    chartItem.forEach((item, index) => {
                        this.chartKeyToId[item.key] = item.id;
                        if (item.key === 'TimeThermodynamic') {
                            if (index == chartItem.length - 1) {
                                this.chartIds += item.id;
                            } else {
                                this.chartIds += item.id + ','
                            }
                        }
                    });
                    this.getChartData(this.chartIds);
                })
        },
        getChartData(chartIds) {
            if (!chartIds) return;
            this.yearHeatmap_ops = {};
            let apiUrl = '', param = {};
            let formatTime = this.newDateFormat('year',this.emitData.asis_time);
            this.startDate = formatTime.startTime;
            this.endDate = formatTime.endTime;
            // 常规赋值
            // apiUrl = '/report/thermodynamic/' + this.emitData.asis_level;
            param = {
                orgIds: this.emitData.asis_org,
                chartIds: chartIds,
                startDate: this.startDate,
                endDate: this.endDate,
                // kpiType: this.emitData.asis_kpi,
                // formatIds: this.emitData.asis_format,
                // _t: Date.parse(new Date()) / 1000
            };
            this.$api.analysisReport.thermodynamicAnalysis(this.emitData.asis_level, param)
                .then(res => {
                    this.yearHeatmap_ops = res.data.data.body.TimeThermodynamic;
                })
                .catch(err => { })
        },
        exportDataHandle(title, chartKey) {
            let chartId = this.chartIds;
		    let exportNeed = {
		        domId: 'yearHeatmap',
		        title: title,
		        data: {
					url: `/report/thermodynamic/${this.emitData.asis_level}/${chartId}/excel`,
					params: `orgIds=${this.emitData.asis_org}&chartIds=${chartId}&startDate=${this.startDate}&endDate=${this.endDate}`
		        }
		    }
		    this.$refs.exportDialog.dialogInit(exportNeed);
		},
    }
}
</script>

<style scoped>
/* #weekHeatmap, */
.year-heatmap-chart {
    height: 722px;
}

.download-text {
    right: 30px;
    top: 5px;
    padding-right: 0;
}

.download-text:after {
    content: none;
}
    @media only screen and (max-width: 1366px) {
        .year-heatmap-chart {
            height: 520px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .year-heatmap-chart {
            height: 520px;
        }
    }
</style>