storeratio.vue

<template>
    <div class="store-rate-wrapper">
        <div class="download-parent ratio-chart-wrapper">
            <!-- <store-rate-chart id="storeRatio" class="store-rate-chart" :options="historyChart_ops" :chartType="emitData.asis_object == 2 ? 'MultipBar': 'Line'"></store-rate-chart> -->
            <mix-charts chartId="storeRatio" class="store-rate-chart" :chartData="historyChart_ops" :chartType="emitData.asis_object === 2 ? 'Bar': 'Line'" />
            <span class="ehcarts-title">{{ i18n(historyChart_title) }}</span>
            <span class="download-text" @click="exportDataHandle('storeRatio',i18n(historyChart_title),chartKeyObj[emitData.asis_object == 2 ? 'mutipleObj' : emitData.asis_date][0])">{{ $t('allPages.load') }}</span>
        </div>
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18n(historyTab_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domHistoryTab', i18n(historyTab_title))">{{ $t('allPages.load') }}</span>
            </h3>
            <div class="asis-table-content">
                <common-tab v-loading="loading" :tableData="historyTab_data" id="domHistoryTab" :headData="historyTab_head" :tabHeight="''"></common-tab>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
import commonTable from '../../public/tableCommon'
export default {
    props: {
        orgId: [String, Number],
        propparam: Object
    },
    data() {
        return {
            historyTab_title: 'enteringRateTable',
            historyChart_title: 'enteringRateChart',
            loading: true,
            historyChart_ops: {},
            historyTab_head: [],
            historyTab_data: [],
            chartIds: '',
            chartKeyToId: {},
            emitData: {},
            startDate: '',
            endDate: '',
            chartKeyObj: {
                day: ['singleObjectHourChart','singleObjectHourTable'],
                week: ['singleObjectDayChart','singleObjectDayTable'],
                month: ['singleObjectDayChart','singleObjectDayTable'],
                mutipleObj: ['multiObjectDayChart','multiObjectDayTable'],
            },
        }
    },
    components: {
        'store-rate-chart': publicChart,
        'common-tab': commonTable,
        'export-data-dialog': exportData
    },
    watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    mounted() {
    },
    methods: {
        i18n(title){
            let langaugeTitile = 'echartsTitle.' + title
            return this.$t(langaugeTitile)
        },
        refreshHandle(param) {
            if (param.dateType !== '/storerate/storeratio') return;
            this.emitData = param.data;
            if (!param.data.asis_org) {
                this.$message.warning('ID must be selected!')
                return
            }
            // if (this.chartIds && JSON.stringify(this.chartKeyToId) !== '{}') {
            //     this.getChartData(this.chartIds);
            // } else {
                this.getChartId();
            // }
        },
        getChartId() {
            this.chartKeyToId = {};
            this.chartIds = '';
            this.$api.baseReport.reportChart({
                report: 'enteringRate',
                // _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
                    let chartItem = res.data.data;
                    chartItem.forEach((item, index) => {
                        this.chartKeyToId[item.key] = item.id;
                        if(this.chartKeyObj[this.emitData.asis_object == 2 ? 'mutipleObj' : this.emitData.asis_date].indexOf(item.key) != -1){
                            if (index == chartItem.length - 1) {
                                this.chartIds += item.id;
                            } else {
                                this.chartIds += item.id + ','
                            }
                        }
                    });
                    // console.log('chart',this.chartIds);
                    this.getChartData(this.chartIds);
                })
        },
        getChartData(chartIds) {
            if (!chartIds) return;
            this.historyChart_ops = {};
            this.historyTab_data = [];
            this.historyTab_head = [];
            let apiUrl = '', param = {}, rateHeadData = [];
            let formatTime = this.newDateFormat(this.emitData.asis_date,this.emitData.asis_time);
            this.startDate = formatTime.startTime;
            this.endDate = formatTime.endTime;
            // 常规情况赋值
            // apiUrl = '/report/enteringRate/' + this.emitData.asis_level;
            param = {
                orgIds: this.emitData.asis_org,
                chartIds: chartIds,
                startDate: this.startDate,
                endDate: this.endDate,
                option: this.emitData.option,
                // kpiType: this.emitData.asis_kpi,
                // formatIds: this.emitData.asis_format,
                // _t: Date.parse(new Date()) / 1000
            };
            this.$api.analysisReport.enteringRateAnalysis(this.emitData.asis_level, param)
                .then(res => {
                    let result = res.data.data.body;
                    let chartKey = this.chartKeyObj[this.emitData.asis_object == 2 ? 'mutipleObj' : this.emitData.asis_date][0];
                    let tableKey = this.chartKeyObj[this.emitData.asis_object == 2 ? 'mutipleObj' : this.emitData.asis_date][1];
                    let historyChart = result[chartKey];
                    historyChart['seriesText'] = 'rate';
                    if(historyChart.series.length > 0){
                        historyChart.series.forEach(item => {
                            if(item.data.length > 0) {
                                item.data.forEach((num,index) => {
                                    if(num > 100) {
                                        item.data[index] = 100;
                                    }
                                })
                            }
                        })
                    }
                    let isBar = this.emitData.asis_object === 2
                    historyChart['otherConf'] = {
                        _color: isBar
                            ? ['#3BB8FF', '#FFC62E']
                            : ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
                        grid: isBar
                            ? { top: 60, right: 21, bottom: 48, left: 50 }
                            : { top: 60, right: 40, bottom: 60, left: 60 },
                        normalXAxisLabel: true,
                        seriesText: 'bagRate',
                        legendBottom: 14
                    }
                    this.historyChart_ops = historyChart
                    if(result[tableKey].xaxis) {
                        rateHeadData = result[tableKey].xaxis.data;
                    }
                    this.historyTab_head = this.autoComplateHead(null, rateHeadData);
                    let historyTab_series = result[tableKey].series;
                    if(historyTab_series.length) {
                        this.historyTab_data = this.dealData(historyTab_series, this.historyTab_head);
                    }
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                })
                .catch(err => {
                    this.catchErrorHandle(err)
                })
        },
        dealData(data, headData) {
            let obj = {}, arr = [], _prop = '';
            data.forEach(item => {
                for (let i = 0, len = item.data.length; i < len; i++) {
                    _prop = headData[i].prop;
                    item.data[i] = item.data[i] == 'null%' ? null : item.data[i];
                    obj[_prop] = (item.data[i] || item.data[i] == 0) ? item.data[i] : '--';
                }
                arr.push(obj);
                obj = {};
            })
            return arr;
        },
        exportDataHandle(domId, title, chartKey) {
            let chartId = this.chartKeyToId[chartKey];
            let exportNeed = {
                domId: domId,
                title: title,
                data: {
                    url: '/report/enteringRate/' + this.emitData.asis_level + '/' + chartId + '/excel',
                    params: 'orgIds=' + this.emitData.asis_org + '&startDate=' + this.startDate + '&endDate=' + this.endDate + '&option=' + this.emitData.option
                }
            }
            // console.log('storeratio exportNeed', exportNeed)
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
    }
}
</script>

<style scoped>
    .store-rate-wrapper {
        width: 100%;
    }

    .ratio-chart-wrapper {
        padding-bottom: 12px;
    }

    #storeRatio {
        height: 500px;
        background: #fff;
    }
    @media only screen and (max-width: 1366px) {
        #storeRatio {
            height: 300px;
        }
    }
    @media only screen and (max-width: 1280px) {
        #storeRatio {
            height: 300px;
        }
    }
</style>