happinessindex.vue

<template>
    <div class="base-analysis">
        <el-header height="70px">
            <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.HappinessIndex')}}</span>
        </el-header>
        <ioflow-option ref="init" :mallData="mallData" @reportTime="reportHandler" @initData="initTab"></ioflow-option>
        <div class="element-main ioflow-main">
            <div class="asis-table-wrapper">
                <h3 class="asis-table-header tf-table-header single-report-header" v-if="isTabChart">
                    <!-- <span class="asis-table-title">{{ i18nFormatter(trafficFlow_title) }}</span> -->
                    <span class="asis-table-download" @click="dealExport('domTrafficFlow', i18nFormatter(trafficFlow_title))">{{$t('allPages.load')}}</span>
                </h3>
                 <div :class="isTabChart ? 'asis-table-content' : 'asis-line-content'">
                    <el-table
                      v-if="isTabChart"
                      class="asis-table"
                      id="domTrafficFlow"
                      :data="trafficFlow_ops"
                      header-row-class-name="asis-table-head"
                      v-loading="trafficFlowLoading"
                      style="width: 100%">
                        <el-table-column :prop="item.prop" :fixed="index == 0 ? true : null" :label="item.label" align="center" v-for="(item, index) in trafficFlow_head" :key="index">
                        </el-table-column>
                    </el-table>
                    <io-chart v-else id="tfChart" class="tf-chart-box" :options="trafficFlow_lineOps" chartType="TfLine"></io-chart>
                    <span class="download-text" v-if="!isTabChart" @click="exportDataHandle('tfChart',i18nFormatter(trafficFlowing_title),'happyIndex')">{{$t('allPages.load')}}</span>
                </div>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div> 
</template>

<script>
import exportData from '../../public/exportData'
import ioFlowOption from '../common/option/happinessIndexOption'
import publicChart from '../common/publicChart'
let lineToTable = require('../common/lineTotable.js');
export default {
    data() {
        return {
            _time:'',
            _tabId:'',
            mallData: [],
            asisName: '',
            asisLevel: '',
            emitData: {},
            tableKeyToId: {},
            tableIds: '',
            trafficFlow_title: '', //今日新增客流报表
            trafficFlowLoading: true,
            trafficFlow_head: [],
            trafficFlow_ops: [],
            trafficFlow_lineOps: {},
            isTabChart: false,
            localLineData: {},
            apiUrl:'',
            searchTime:'',
            val:'',
            trafficFlowing_title: '',
            line: '1',
        }
    },
    components: {
        'ioflow-option': ioFlowOption,
        'io-chart': publicChart,
        'export-data-dialog': exportData
    },
    created(){
        window.addEventListener('resize', () => {
            try {
                let timeHeatEChartsUtil = {
                    chart1: $('#tfChart')[0],
                }
                for(let k in timeHeatEChartsUtil) {
                    if(timeHeatEChartsUtil.hasOwnProperty(k) && timeHeatEChartsUtil[k] != undefined) {
                        timeHeatEChartsUtil[k] = this.$echarts.init(timeHeatEChartsUtil[k]);
                        var element = timeHeatEChartsUtil[k];
                        element.resize();
                    }
                }
            } catch (err) { }
        })
    },
    mounted() {
        this.getMallOpt();
    },
    methods: {
        getMallOpt() {
            this.$api.base.mall({
                accountId: this.$cookie.get('accountId'),
                status: 1,
                // _t: Date.parse(new Date()) / 1000
            }).then(res => {
                let titleName = '', refMallId = null;
                if(res.data.data.length >= 1) {
                    let localMallId = window.sessionStorage.getItem('mallId');
                    localMallId ? Number(localMallId) : false;
                    res.data.data.forEach((item, index) => {
                        this.mallData.push(item);
                        if(localMallId) {
                            if(item.id == localMallId) {
                                titleName = item.name;
                            }
                        }
                    });
                    this.asisName = titleName ? titleName : res.data.data[0].name;
                    refMallId = localMallId ? Number(localMallId) : res.data.data[0].id;
                    this.$refs.init.initAsis(refMallId);
                }
            })
        },
        initTab(data) {
            this.emitData = data;
            this.trafficFlowLoading = true;
            if(this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
				this.getChartData(this.tableIds);
			} else {
                this.tableKeyToId = {};
                this.tableIds = '';
                this.$api.baseReport.reportChart({
                        report: 'happyIndex',
                })
                    .then(res => {
                        let tableItem = res.data.data;
                        tableItem.forEach((item, index) => {
                            this.tableKeyToId[item.key] = item.id;
                            if (item.key === 'happyIndex') {
                                if (index == tableItem.length - 1) {
                                    this.tableIds += item.id;
                                } else {
                                    this.tableIds += item.id + ',';
                                }
                            }
                        });
                        this.getChartData(this.tableIds);
                    })
            }
        },
        getChartData(tableIds) {
            if(!tableIds) return;
            // this.trafficFlow_title = '';
            // this.trafficFlow_head = [];
            // this.trafficFlow_ops = [];
            this.localLineData = {};
            this.isTabChart = false;
            let param = {},hourHeadData = [], minHeadData = [], trafficFlowHeadData = [];
            if (this.emitData.asis_time) {
                this.searchTime = dateUnit.dateFormat(this.emitData.asis_time, 'yyyy-MM');
            } else {
                this.searchTime = dateUnit.dateFormat(new Date(), 'yyyy-MM');
            }
            this._time = this.searchTime;
            this.apiUrl = '/report/happyIndex/' + this.emitData.asis_level;
            param = {
                orgIds: this.emitData.asis_org,              
                startDate: this.searchTime,
                chartIds: tableIds,
            }
            this.$api.customerReport.happyIndexReport(this.emitData.asis_level, param)
                .then(res => {
                    let lineData = res.data.data.body['happyIndex'];
                    this.localLineData = JSON.parse(JSON.stringify(lineData));
                    this.trafficFlow_lineOps = JSON.parse(JSON.stringify(lineData));
                    this.trafficFlowing_title = 'trafficInAndOuttrafficInAndOut'
                })
                .catch(err => {
                    this.catchErrorHandle(err)
                });
                // this.overflowBar(true);
        },
        changeTabSelect(val) {
            this.localLineData = {};
            this.isTabChart = false;
            switch (val) {
                case '小时级':
                    val = 'TAB_HOUR'
                    break;
                case '分钟级':
                    val = 'TAB_MINUTE'
                    break;
                default:
                    break;
            }
            let tabId = this.tableKeyToId['trafficInAndOut'];
            if(!this.tableIds) return;
            let  param = {};
            this.searchTime = this.emitData.asis_time || dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
            this.apiUrl = '/report/trafficInAndOut/' + this.emitData.asis_level + '/' + tabId;
            param = {
                orgIds: this.emitData.asis_org,
                date: this.searchTime,
                chartIds: this.tableIds,
                option: val,
                // kpiType: this.emitData.asis_kpi,
                // _t: Date.parse(new Date()) / 1000
            }
            this.$api.analysisReport.trafficInAndOutAnalysis(`${this.emitData.asis_level}/${tabId}`, param)
                .then(res => {
                    this.line = '1';
                    let result = res.data;
                    let lineData = res.data.data;
                    this.localLineData = JSON.parse(JSON.stringify(lineData));
                    this.trafficFlow_lineOps = JSON.parse(JSON.stringify(lineData));
                    this.trafficFlowing_title = 'trafficInAndOuttrafficInAndOut';
                })
                .catch(err => {
                    this.catchErrorHandle(err)
                })
        },
        reportHandler(emitData) {
            this.emitData = emitData;
            this.asisName = emitData.asis_tit;
            if(this.tableIds) {
                this.getChartData(this.tableIds);
            } else {
                this.tableKeyToId = {};
                this.tableIds = '';
                this.$api.baseReport.reportChart({
                    report: 'trafficInAndOut',
                    // _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 === 'trafficInAndOut') {
                                if (index == tableItem.length - 1) {
                                    this.tableIds += item.id;
                                } else {
                                    this.tableIds += item.id + ',';
                                }
                            }
                        });
                        this.getChartData(this.tableIds);
                    })
            }
        },
        exportDataHandle(domId, title, chartKey) {
            // 
            let chartId = this.tableKeyToId[chartKey];
            let exportNeed = {
                domId: domId,
                title: title,
                data: {
                    url: '/report/' + this.emitData.asis_level + '/' + chartId + '/excel',
                    params: 'orgIds=' + this.emitData.asis_org + '&date=' + (this.searchTime || dateUnit.dateFormat(new Date(), 'yyyy-MM-dd'))
                }
            }
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
    },
}
</script>
<style scoped>
    .report-type-box {
        font-size: 14px;
        float: right;
        color: #666;
        cursor: pointer;
        position: relative;
        padding-right: 20px;
    }

    .line-type-box {
        position: absolute;
        right: 102px;
        top: 20px;
    }

    .report-item {
        display: inline-block;
        width: 20px;
        height: 18px;
        background: url('~@/assets/img/asis/tab_icon.svg') no-repeat;
        background-size: 100% 100%;
    }

    .report-item + .report-item {
        margin-left: 5px;
    }

    .line-report {
        background: url('~@/assets/img/asis/line_icon.svg') no-repeat;
        background-size: 100% 100%;
    }

    .report-item:hover {
        color: #0069ff;
    }

    .report-item-line {
        background: url('~@/assets/img/asis/active_line_icon.svg') no-repeat;
        background-size: 100% 100%;
    }

    .report-item-tab {
        background: url('~@/assets/img/asis/active_tab_icon.svg') no-repeat;
        background-size: 100% 100%;
    }

    /* .report-item-line,
    .report-item-tab {
        color: #0069ff;
    } */

    .tf-chart-box {
        height: 568px;
    }

    .asis-table-content {
        position: relative;
    }

    .download-text {
        top: 20px;
    }
    .ehcarts-title{
        top: 82px;
    }

    @media only screen and (max-width: 1680px) {
        .tf-chart-box {
            height: 374px;
        }
        .download-text,
        .ehcarts-title,
        .line-type-box {
            top: 20px;
        }
        .report-item {
            display: inline-block;
            width: 14px;
            height: 14px;
        }
    }
    @media only screen and (max-width: 1440px) {
        .tf-chart-box {
            height: 374px;
        }
        .download-text,
        .ehcarts-title,
        .line-type-box {
            top: 20px;
        }
        .report-item {
            display: inline-block;
            width: 14px;
            height: 14px;
        }
    }
    @media only screen and (max-width: 1366px) {
        .tf-chart-box {
            height: 374px;
        }
        .download-text,
        .ehcarts-title,
        .line-type-box {
            top: 20px;
        }
        .report-item {
            display: inline-block;
            width: 14px;
            height: 14px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .tf-chart-box {
            height: 374px;
        }
        .download-text,
        .ehcarts-title,
        .line-type-box {
            top: 20px;
        }
        .report-item {
            display: inline-block;
            width: 14px;
            height: 14px;
        }
    }
</style>