mixin.js

import module from './module';
import _ from 'underscore';
import moduleConfig from '../module.config';
const dayHideCharts = ['period_passenger_distribution', 'zone_passenger_distribution', 'format_period_passenger_flow_heat', 'floor_period_passenger_flow_heat', 'mall_period_passenger_flow_heat'];
/*节流阀函数*/
function throttle(fn, wait) {
    let pre = Date.now();
    return function() {
        let context = this;
        let args = arguments;
        let now = Date.now();
        if (now - pre >= wait) {
            fn.apply(context, args);
            pre = Date.now();
        }
    }
}
export default {
    props: {
        emitData: {
            type: Object,
            default: () => {}
        }
    },
    provide() {
        return {
            addModule: this.addModule,
            getChartId: this.getChartId,
            getChartName: this.getChartName,
            getCardIds: this.getCardIds,
            getCardList: this.getCardList,
            getChartList: this.getChartList,
            evtReport: this.evtReport
        }
    },
    watch: {
        emitData: {
            handler(newVal, val) {
                if (Object.keys(newVal).length == 0) return;
                this.checkReload(newVal);
            },
            immediate: true,
            deep: true
        }
    },
    components: {
        module
    },
    data() {
        return {
            params: {},
            chartIdsList: [], //图表chard_id集合
            moduleList: [], //当前页面下的报表集合
            cardList: [], //卡片列表
            chartList: [], //报表列表
        }
    },
    methods: {
        /**
         * 查询条件改变时候，检测是否触发当前页面刷新
         * */
        checkReload(emitData) {
            let isSet = false;
            Object.keys(emitData).forEach(key => {
                if (emitData[key] != this.params[key]) {
                    if (emitData.radio == 'count' && key == 'floorIds') {

                    } else {
                        isSet = true;
                    }
                }
            })

            if (true || isSet || emitData.force) {
                let isGetChart = false;
                if (emitData.mallIds != this.params.mallIds) {
                    isGetChart = true;
                }
                this.params = emitData;
                this.resetLoaded(isGetChart);
            }
        },
        pageScroll: _.throttle(function(evt) {
            this.loadView();
        }, 200),
        /**
         * 滚动事件触发时调用，是否需要加载指定图表
         * */
        loadView() {
            let modules = this.getInToView();
            modules.forEach(module => {
                module.loadModuleData && module.loadModuleData(this.params);
            })
        },
        /**
         * 添加图表实例到当前页面
         * */
        addModule(module) {
            this.moduleList.push(module);
        },
        /**
         * 获取chart对应的 id
         * */
        getChartId(mkey) {
            if (!mkey) return false;
            let curChart = this.chartIdsList.find(item => {
                return item.chartKey == mkey
            });
            if (!curChart) {
                curChart = this.cardList.find(item => {
                    return item.chartKey == mkey
                });
            }
            return curChart && curChart.id || false;
        },
        /**
         * 获取chart对应的 title
         * */
        getChartName(mkey) {
            if (!mkey) return false;
            let curChart = this.chartIdsList.find(item => {
                return item.chartKey == mkey
            });
            if (localStorage.lang.includes('en')) {
                return curChart && curChart.titleEn || false;
            }
            return curChart && curChart.title || false;
        },
        /**
         * 获取卡片对应的 [id]集合
         * */
        getCardIds() {
            let orgType = this.params.orgType;
            let radio = this.params.radio;
            return this.chartIdsList.filter(item => {
                return item.type == 'card' && (orgType == 'zone' ? (radio == 'count' ? item.style == 'front' : item.style != 'front') : true)
            }).reduce((cards, card) => {
                cards.push(card.id);
                return cards;
            }, []);
        },
        getCardList() {
            return this.cardList;
        },
        getChartList() {
            return this.chartList;
        },
        /**
         * 检测图表是否滚动到可视区域
         * */
        getInToView() {
            return this.moduleList.filter(module => {
                if (module.loaded) return false;
                let position = module.$el.getBoundingClientRect();

                if ((0 < position.top && position.top < window.innerHeight) || (0 < position.bottom && position.top < 0)) {
                    return true;
                }
            })
        },
        /**
         * 重置图表的加载状态
         * */
        resetLoaded(reset) {
            this.moduleList.forEach(module => {
                module.resetLoaded();
            });
            if (this.chartIdsList.length > 0 && !reset) {
                this.loadView();
            } else {
                let title = localStorage.getItem('lang').toLowerCase() == 'en_us' ? 'titleEn' : 'title';
                let mallId = this.params.mallIds || this.$cookie.get('mallId');
                let accountId = this.$cookie.get('accountId');
                this.$api.ipageReport.getCharts({ belongTo: this.reportType, showIndex: this.params.radio == 'detail' ? 2 : 1, mallId, accountId }).then(res => {
                        this.cardList = (res.data.data.cards || []).sort((it1, it2) => {
                            return it1.sort - it2.sort
                        });
                        let chartList = _.map((res.data.data.charts || []).sort((it1, it2) => {
                            return it1.sort - it2.sort
                        }), item => {
                            let otherConf = moduleConfig[item.chartKey] || {};
                            item.mallId = mallId;
                            Object.assign(item, otherConf, { title: item[title] });
                            return item;
                        });
                        if (this.cardList.length) {
                            chartList.unshift({
                                chartKey: 'card',
                                mkey: 'card',
                                mallId: mallId,
                                columnNum: 1
                            })
                        }
                        if (this.params.dateType == 'day') {
                            chartList = _.filter(chartList, item => {
                                return !dayHideCharts.includes(item.chartKey);
                            })
                        }
                        this.chartList = _.filter(chartList, item => {
                            return moduleConfig[item.chartKey] ? true : false;
                        });
                        this.chartIdsList = res.data.data.allCharts || [];
                        this.$nextTick(() => {
                            this.loadView();
                        })
                    })
                    // this.$api.baseReport.reportChart({ report: this.reportType }).then(res => {
                    //     let { data } = res.data;
                    //     this.chartIdsList = data;
                    //     this.loadView();
                    // })
            }

        },
        /**
         * 图表逐层上报事件
         * */
        evtReport(data) {
          debugger
            this.$emit('reportEvt', data);
        }
    },
    created: function() {

    },
    mounted() {

    }
};