ioflow.vue

<template>
    <div class="base-analysis">
        <el-header>
            <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.IoFlow')}}</span>
        </el-header>
        <ioflow-option ref="init" @reportTime="reportHandler" @initData="initTab" @childByValue="childByValue"></ioflow-option>
        <div class="element-main ioflow-main">
            <router-view :propparam="propParams"></router-view>
        </div>
    </div> 
</template>

<script>
import ioFlowOption from '../common/option/ioFlowOption'
export default {
    data() {
        return {
            asisName: '',
            propParams: {}
        }
    },
    components: {
        'ioflow-option': ioFlowOption,
    },
    computed: {
    },
    created(){
    },
    mounted() {
        this.getMallOpt();
    },
    methods: {
        childByValue(childValue) {
            this.animate('.ioflow-main')
        },
        getMallOpt() {
            this.getCommonMalls().then(resolveData => {
                let {mallData,localMallId,titleName,multiMallId} = resolveData;
                this.mallData = mallData
                this.$refs.init.initAsis(multiMallId,mallData);
            },(rejectData) => {
            })
        },
        initTab(data) {
            this.asisName = data.asis_tit;
            this.receiveParam(data)
        },
        reportHandler(emitData) {
            this.asisName = emitData.asis_tit;
            this.receiveParam(emitData)
        },
        receiveParam(emitData) {
            let result = this.routerJump('analysis','ioflow',emitData);
            this.$router.push(result.router);
            this.propParams = result.params;
        },
    },
}
</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: 20px;
            height: 18px;
        }
    }
    @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: 16px;
            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: 16px;
            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: 16px;
            height: 14px;
        }
    }
</style>