trafficdensity.vue

<template>
    <div class="base-analysis">
        <el-header height="70px">
            <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.TrafficDensity')}}</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">{{$t('asis.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>
        <in-heat-option v-show="moreOptVisible" ref="init" @reportTime="reportHandler" @initData="initTab"></in-heat-option>
        <div class="element-main area-heat-main">
            <div class="area-heat-container">
                <div class="asis-table-wrapper">
                    <h3 class="asis-table-header" style="margin-bottom: 0px;">
                        <span class="asis-table-download" @click="exportDataType()">{{$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-tab v-loading="loading" :tableData="trafficTable_ops" id="gateCounting" :headData="trafficTable_head" :tabHeight="tableHeight"></common-tab>
                    </div>
                    <div v-if="!tab['firstTab']">
                        <!-- <common-chart id="gateChart" chartType='BasicLine' :style="{ height: tableHeight + 'px' }" :options="trafficFlow_lineOps"></common-chart> -->
                        <mix-charts chartId="gateChart" :style="{ height: tableHeight + 'px' }" :chartData="trafficFlow_lineOps" chartType='AreaLine' />
                    </div>
                </div>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div> 
</template>

<script>
import exportData from '../../public/exportData'
import inHeatOption from '../common/option/pointHeatMoreOption'
import commonTable from '../common/tableCommon'
import commonChart from '../common/publicChart'
export default {
    data() {
        return {
            moreOptVisible: false,
            asisName: '',
            emitData: {},
            loading: true,
            heatmapInstance: {},
            heatmapImg: '',
            sliderVal: null,
            sliderDisabled: true,
            imgList: [],
            heatInstance: {},
            heatDataObj: {},
            sliderMax: 300,
            divList: [],
            newImgList: [],
            count: null,
            computed: '',
            countArr: [],
            liWidth: null,
            tab:{
                "firstTab": false,
                "seconTab": false,
                "thirdTab": false,
                "fourtTab": false,
            },
            trafficTable_ops: [],
            trafficTable_head: [],
            trafficFlow_lineOps: {},
            tableKeyToId: {},
            tableIds: '',
        }
    },
    components: {
        'in-heat-option': inHeatOption,
        'common-tab': commonTable,
        'common-chart': commonChart,
        'export-data-dialog': exportData,
    },
    watch: {
    },
    created() {
        let winH = $(window).height(),scale = 0.34;
        if(winH <= 720){
            scale = 0.4
        }else if (winH <= 768){
            scale = 0.38
        }else if (winH <= 900){
            scale = 0.36
        }else if (winH <= 1080){
            scale = 0.34
        }
        this.tableHeight = winH - winH * scale;
        window.addEventListener('resize', () => {
            try {
                let timeHeatEChartsUtil = {
                    chart1: $('#gateChart')[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) { }
        })
        this.tab['firstTab'] = window._vionConfig.reportType &&  window._vionConfig.reportType == 'table' ? true : false;
    },
    computed: {
    },
    mounted() {
        this.getMallOpt();
        this.showCollapse();
    },
    updated() {
        //
    },
    methods: {
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height');
            if(this.moreOptVisible) {
                this.moreOptVisible = false;
                mt = headerH + titleH + 8 + 'px';
                $('.area-heat-main').animate({ marginTop: mt })
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.area-heat-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        getGatesFilterMall(mallStatus) {
            let params = {
                accountId: this.$cookie.get('accountId'),
                status: 1,
                type: 4,
            };
            this.gateFilterMall(mallStatus,params).then(resolveData => {
                let {mallData,localMallId,titleName,multiMallId} = resolveData;
                this.asisName = titleName
                this.$refs.init.initAsis(localMallId,mallData);
            })
        },
        getMallOpt() {
            this.$api.base.mall({
                accountId: this.$cookie.get('accountId'),
                status: 1,
                _t: Date.parse(new Date()) / 1000
            }).then(res => {
                let mallList = res.data.data,mallStatus = [];
                mallList.forEach(item => {
                    mallStatus.push(item.id)
                })
                this.getGatesFilterMall(mallStatus);
                // 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);
                // }
            })
        },
        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;
            }
            this.getChartData(this.tableIds);
        },
        initTab(data) {
            this.loading = true;
            this.asisName = data.asis_tit;
            this.emitData = data;
            this.getTableId()
        },
        reportHandler(emitData) {
            this.loading = true;
            this.asisName = emitData.asis_tit;
            this.emitData = emitData;
            if(this.tableIds){
                this.getChartData(this.tableIds)
            }else{
                this.getTableId()
            }
        },
        getTableId() {
            this.tableKeyToId = {};
            this.tableIds = '';
			let chartIds = '';
            this.$api.baseReport.reportChart({
                report: 'heatmapTraffic',
                _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) {
                            chartIds += item.id;
                        } else {
                            chartIds += item.id + ',';
                        }
                });
                this.tableIds = chartIds;
                this.getChartData(chartIds)
            })
        },
        getChartData(chart_Ids){
            if(this.tab['firstTab']){
                this.loading = true;
            }
            this.$api.analysisReport.heatmapTraffic({
                orgIds: this.emitData.asis_org,
                chartIds: chart_Ids,
                startDate: this.emitData.asis_time,
                endDate: this.emitData.asis_time,
                option: this.tab['firstTab'] ? 'TAB_TABLE' : 'TAB_CHART',
            })
            .then(res => {
                let result = res.data.data.body['heatmapTraffic'];
                if(this.tab['firstTab']) {
                    this.trafficTable_head = this.dealHead(result.xaxis.data);
                    if(result.series.length > 0){
                        this.trafficTable_ops = this.dealData(result.series,this.trafficTable_head)
                    }
                    this.loading = false;
                }else{
                    // result.chartKey = 'trafficdensity';
                    result['otherConf'] = {
                        grid: { top: 16, right: 26, bottom: 60, left: 52 },
                        _color: ['#3BB8FF', '#FFC62E', '#4396ec', '#4054af', '#d83965', '#9036aa', '#6041b0', '#4fb9d1', '#3f9488', '#97c05c', '#154bee', '#FF9631', '#f39c38', '#e35241'],
                        isYear: true,
                        chartKey: 'trafficdensity',
                        hasYaxisName: false
                    }
                    this.trafficFlow_lineOps = result;
                }
            })
            .catch(err => {
                this.catchErrorHandle(err)
                this.loading = false;
            })
        },
        dealHead(headData) {
            let resultHead = [];
            headData.forEach((item, index) => {
                resultHead.push({
                    prop: 'defaultOrg' + index,
                    label: item
                })
            })
            return resultHead;
        },
        exportDataType() {
            if(this.tab['firstTab']){
                this.dealExport('gateCounting', this.$t('asis.TrafficDensity'))
            }else{
                this.exportDataHandle(this.$t('asis.TrafficDensity'),'heatmapTraffic')
            }
        },
        exportDataHandle(title, chartKey) {
		    let chartId = this.tableKeyToId[chartKey];
		    let exportNeed = {
		        domId: 'gateChart',
		        title: title,
		        data: {
					url: `/report/heatmapTraffic/${this.emitData.asis_level}/${chartId}/excel`,
					params: `orgIds=${this.emitData.asis_org}&startDate=${this.emitData.asis_time}&endDate=${this.emitData.asis_time}&option=${this.tab['firstTab'] ? 'TAB_TABLE' : 'TAB_CHART'}`
		        }
		    }
		    this.$refs.exportDialog.dialogInit(exportNeed);
		},
    },
}
</script>

<style scoped>
    .track-list {
        background-color: #fff;
        padding-bottom: 20px;
    }

    .area-heat-container {
        position: relative;
        background-color: #fff;
        border: 1px solid transparent;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        padding: 15px;
        /* margin-bottom: 12px; */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

    .asis-table-wrapper {
        padding: 0px !important;
    }

    /* 生成图片栏 */
    .inside-bg-box {
        margin: 0 auto;
    }

    .inside-bg-box:after,
    .inside-bg-box:before {
        content: '';
        display: table;
    }

    .inside-bg-box:after {
        clear: both;
    }

    .inside-bg-item {
        float: left;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
        /* height: 250px; */
    }

    .inside-bg-item+.inside-bg-item {
        margin-left: 1%;
    }

    .inside-bg-item:nth-child(3n-2) {
        margin-left: 0;
    }


    /* .inside-bg-item:nth-child(2n) {
        margin-left: 10px;
        margin-right: 10px;
    } */

    .img-box {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0; 
    }

    .area-img {
        width: 100%;
        vertical-align: top;
        /* height: 786px; */
    }
    .heatmap-div{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0; 
    }
</style>