groupTime.vue

<template>
    <div class="grouptime-wrapper">
        <el-header height="70px">
            <span class="behavior-title">{{ repTitle }}{{$t('Behavior.groupTime')}}</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">{{$t('Behavior.moreOp')}}</span>
                <i :class="moreOptVisible ? 'el-icon-arrow-down more-option-arrow' : 'el-icon-arrow-down more-option-arrow more-option-up'"></i>
            </span>
        </el-header>
        <!-- <behavior-option v-show="moreOptVisible"></behavior-option> @emitTitle="getTitle" -->
        <test-option v-show="moreOptVisible" @emitParams="getPatams" @startLoading="startLoad" ref="searchRef"></test-option>
        <!-- <el-main>Main</el-main> -->
        <div class="element-main grouptime-main behavior-main">
            <!-- main -->
            <!-- <router-view></router-view> -->
            <!-- 性别统计详情 -->
            <div class="asis-table-wrapper">
                <h3 class="asis-table-header">
                    <span class="asis-table-title">{{ i18nFormatter(gender_title) }}</span>
                    <span class="asis-table-download" @click="tab['firstTab'] ? dealExport('domGender', i18nFormatter(gender_title)) : 
                    exportDataHandle('faceGender', i18nFormatter(gender_title), 'faceGenderDetail')">{{$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="asis-table-content" v-if="!tab['firstTab']">
                    <common-chart v-loading="chartLoad" id="faceGender" chartType="faceGender" style="height:400px" :options="faceGender_lineAndBarOpts"></common-chart>
                </div>
                <div class="asis-table-content" v-else>
                    <el-table
                      id="domGender"
                      class="asis-table"
                      :data="genderData_ops"
                      :summary-method="getSummaries"
                      show-summary
                      header-row-class-name="asis-table-head"
                      v-loading="loading"
                      style="width: 100%">
                        <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="item in genderData_head" :key="item.prop">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 年龄统计详情 -->
            <div class="asis-table-wrapper">
                <h3 class="asis-table-header">
                    <span class="asis-table-title">{{ i18nFormatter(age_title) }}</span>
                    <span class="asis-table-download" @click="tab['seconTab'] ? dealExport('domAge', i18nFormatter(age_title)) : 
                    exportDataHandle('faceAge', i18nFormatter(age_title), 'faceAgeDetail')">{{$t('allPages.load')}}</span>
                    <span class="report-type-box">
                        <span :class="tab['seconTab'] ? 'report-item line-report bar-report' : 'report-item line-report report-item-line bar-report-tab'" @click="selReport('seconTabLine')"></span>
                        <span :class="tab['seconTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('seconTabTable')"></span>
                    </span>
                </h3>
                <div class="asis-table-content" v-if="!tab['seconTab']">
                    <common-chart v-loading="chartLoad"  id="faceAge" chartType="faceAge" style="height:400px" :options="faceAge_barOpts"></common-chart>
                </div>
                <div class="asis-table-content" v-else>
                    <el-table
                      id="domAge"
                      class="asis-table"
                      :data="ageData_ops"
                      :summary-method="getSummaries"
                      show-summary
                      header-row-class-name="asis-table-head"
                      v-loading="loading"
                      style="width: 100%">
                        <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="item in ageData_head" :key="item.prop">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import testOption from './common/option/groupTimeOps'
import commonChart from './common/chart';
export default {
    data() {
        return {
            moreOptVisible: false,
            repTitle: '',
            gender_title: '',
            genderData_head: [],
            genderData_ops: [],
            age_title: '',
            ageData_head: [],
            ageData_ops: [],
            loading: true,
            tableKeyToId: {},
            tableIds: '',
            emitData:{},
            tab:{
                "firstTab": false,
                "seconTab": false,
            },
            faceGender_lineAndBarOpts: {},
            faceAge_barOpts: {},
            chartLoad: true,
        }
    },
    components: {
        'test-option': testOption,
    //     'common-tab': commonTable,
        'common-chart':commonChart
    },
    mounted() {
        this.showCollapse();
    },
    methods: {
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.grouptime-wrapper .el-header', 'height');
            if (this.moreOptVisible) {
                this.moreOptVisible = false;
                mt = headerH + titleH + 8 + 'px';
                $('.grouptime-main').animate({ marginTop: mt });
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    if(document.documentMode) {
                        collapseH = this.getStyleFn('.behavior-more-option', 'height');
                        collapseH = collapseH + this.getStyleFn('.behavior-more-option', 'paddingTop') + this.getStyleFn('.behavior-more-option', 'paddingBottom')
                    }else{
                        collapseH = this.getStyleFn('.behavior-more-option', 'height');
                    }
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.grouptime-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        getTableId() {
            this.tableKeyToId = {};
            this.tableIds = '';
            this.$api.baseReport.reportChart({
                report: 'faceCountAnalyzeSta',
                // _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
                    let tableItem = res.data.data;
                    tableItem.forEach((item, index) => {
                        this.tableKeyToId[item.key] = item.id;
                        if (index == tableItem.length - 1) {
                                this.tableIds += item.id;
                            } else {
                                this.tableIds += item.id + ',';
                            }
                    });
                    this.getTableData(this.tableIds,'');
                    this.getTableData(this.tableIds,'TAB_CHART');
                })
        },
        async getTableData(tableIds, TAB_REPORT) {
            if(!tableIds) return;
            // this.genderData_ops = [];
            // this.ageData_ops = [];
            let apiUrl = '', param = {};
            // apiUrl = this.emitData.level === 'mall' ? '/report/faceCountAnalyzeSta/mall' : '/report/faceCountAnalyzeSta/gate';
            param = {
                orgIds: this.emitData.orgIds,
                startDate: this.emitData.startDate,
                endDate:this.emitData.endDate,
                // startDate:'2018-05-31 00:00:00',
                // endDate:this.emitData.endDate,
                chartIds: tableIds,
                option: TAB_REPORT,
                // kpiType: this.emitData.asis_kpi,
                // _t: Date.parse(new Date()) / 1000
            }
            try {
                await this.$api.flowReport.faceCountAnalyzeSta(this.emitData.level, param)
                    .then(res => {
                        let report = 'faceCountAnalyzeSta';
                        if (res.data.code === 200) {
                            const { body } = res.data.data
                            const {
                                faceGenderDetail,
                                faceAgeDetail
                            } = body
                            // this.gender_title = faceGenderDetail.title;
                            // this.age_title = faceAgeDetail.title;
                            this.gender_title = report + 'faceGenderDetail';
                            this.age_title = report + 'faceAgeDetail';
                            if (faceGenderDetail && faceAgeDetail) {
                                if(!TAB_REPORT) {
                                    let genderHead = faceGenderDetail.xaxis.data;
                                    this.genderData_head = this.autoComplateHead('faceGenderDetail', genderHead);
                                    let ageHead = faceAgeDetail.xaxis.data;
                                    this.ageData_head = this.autoComplateHead('faceAgeDetail', ageHead);
                                    let gender_series = faceGenderDetail.series;
                                    let age_series = faceAgeDetail.series;
                                    this.genderData_ops = this.dealData(gender_series, this.genderData_head);
                                    this.ageData_ops = this.dealData(age_series, this.ageData_head);
                                    setTimeout(() => {
                                        this.loading = false
                                    }, 1000);
                                }else{
                                    this.faceGender_lineAndBarOpts = faceGenderDetail;
                                    this.faceAge_barOpts = faceAgeDetail;
                                    this.chartLoad = false;
                                }
                            }
                        } else {
                            this.$message.warning(res.data.msg)
                        }
                    })
            } catch(err) {
                this.catchErrorHandle(err)
                this.chartLoad = false;
            };
        },
        startLoad(isCurrentPage) {
            if(isCurrentPage === 'groupTime') {
                this.genderData_ops = [];
                this.ageData_ops = [];
                this.loading = true;
            }
        },
        getPatams(param) {
            this.emitData = param;
            this.repTitle = param.title;
            // this.loading = true;
            if(this.tableIds) {
                this.getTableData(this.tableIds,'');
                this.getTableData(this.tableIds,'TAB_CHART');
            } else{
                this.getTableId();
            }
        },
        getTitle(tit) {
            this.repTitle = tit;
        },
        getSummaries(param) {
            let { columns, data } = param;
            let sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                let values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        let value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                } else {
                    let precentVal = data.map(item => {
                        if (/\%/g.test(item[column.property])) {
                            return item[column.property].split('%')[0];
                        }
                    });
                    if (!precentVal.every(value => isNaN(value))) {
                        sums[index] = precentVal.reduce((prev, curr) => {
                            let value = Number(curr);
                            if (!isNaN(value)) {
                                if (value > 0) {
                                    return (prev - 0) + (curr - 0);
                                } else {
                                    return (prev - 0) - (-curr - 0);
                                }
                            } else {
                                return prev;
                            }
                        });
                        try {
                            sums[index] = sums[index].toFixed(2);
                        } catch (error) {
                            //
                        }
                        sums[index] += '%';
                    }
                }
            });
            return sums;
        },
        selReport(type){
            let tabPosition = type.slice(0,8);
            let tabType = type.slice(8);
            // console.log(tabPosition,tabType,this.tab[tabPosition])
            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/faceCountAnalyzeSta/${this.emitData.level}/` + chartId + '/excel',
                    params: 'orgIds=' + this.emitData.orgIds + '&startDate=' + this.emitData.startDate + '&endDate=' + this.emitData.endDate + '&option=TAB_CHART'
                }
            }
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
    }
}
</script>

<style scoped>
    .grouptime-wrapper {
        width: 100%;
    }
    .bar-report {
        background: url('~@/assets/img/asis/bar_icon.svg') no-repeat;
        background-size: 100% 100%;
    }
    .bar-report-tab {
        background: url('~@/assets/img/asis/active_bar_icon.svg') no-repeat;
        background-size: 100% 100%;
    }
</style>