nocustom.vue

<template>
    <div class="nocustom-wrapper">
        <el-header height="70px">
            <span class="behavior-title">新老顾客分析</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">更多选项</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>
        <nocustom-option v-show="moreOptVisible"></nocustom-option>
        <!-- @emitTitle="getTitle" -->
        <!-- <test-option v-show="moreOptVisible" ref="searchRef"></test-option> -->
        <div class="element-main nocustom-main">
            <el-row class="head-wrapper">
                <el-col :span="8" v-for="(item, index) in headList" :key="index">
                    <div :class="item.className" @click="clickHandler(index)">
                        <span class="head-item-text">{{ item.text }}</span>
                        <span class="head-item-ratio" :style="{ color: item.ratioColor }">{{ item.ratio }}</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="nocustom-content">
                <h3 class="content-title">{{ asisTitle }}属性分析</h3>
                <el-col :span="12">
                    <!-- 性别对比 -->
                    <my-chart id="genderChart" class="gender-chart" :options="genderOps" chartType="Ring"></my-chart> 
                </el-col>
                <el-col :span="12">
                    <!-- 年龄对比 -->
                    <my-chart id="ageChart" class="age-chart" :options="ageOps" chartType="Bar"></my-chart> 
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import nocustomOps from './common/option/noCustomerOps'
import chart from './common/chart'
export default {
    data() {
        return {
            // loadData: false,
            moreOptVisible: false,
            data:{},
            genderOps: {},
            ageOps: {},
            asisTitle: '',
            headList: [{
                id: '1',
                type: 'noCustom',
                text: '新老顾客',
                className: 'head-item',
                ratioColor: '#1b9bd7',
                ratio: '0%'
            }, {
                id: '2',
                type: 'secondCustom',
                text: '二次到店',
                className: 'head-item',
                ratioColor: '#9867fe',
                ratio: '0%'
            }, {
                id: '3',
                type: 'moreCustom',
                text: '多次到店',
                className: 'head-item',
                ratioColor: '#05cd04',
                ratio: '0%'
            }],
        }
    },
    components: {
        'nocustom-option': nocustomOps,
        'my-chart': chart
    },
    mounted() {
        this.init();
    },
    methods: {
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.camera-wrapper .el-header', 'height');
            if(this.moreOptVisible) {
                this.moreOptVisible = false;
                mt = headerH + titleH + 8 + 'px';
                $('.nocustom-main').animate({ marginTop: mt });
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    collapseH = this.getStyleFn('.behavior-more-option', 'height');
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.nocustom-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        clickHandler(index) {
            this.headList.forEach((item) => {
                item.className = 'head-item';
            });
            this.$forceUpdate();
            if(this.headList[index].type === 'noCustom') {
                this.asisTitle = '新老顾客';
                this.genderOps = this.data.bodyData.newOldCustomer.gender;
                this.ageOps = this.data.bodyData.newOldCustomer.age;
                this.$set(this.headList[index], 'className', 'head-item is-active');
            } else if(this.headList[index].type === 'secondCustom') {
                this.asisTitle = '二次到店';
                this.genderOps = this.data.bodyData.secondCustomer.gender;
                this.ageOps = this.data.bodyData.secondCustomer.age;
                this.$set(this.headList[index], 'className', 'head-item is-active');
            } else {
                this.asisTitle = '多次到店';
                this.genderOps = this.data.bodyData.moreCustomer.gender;
                this.ageOps = this.data.bodyData.moreCustomer.age;
                this.$set(this.headList[index], 'className', 'head-item is-active');
            }
        },
        init() {
            $.ajax({
				type: "get",
				url: "./static/json/nocustom.json",
				async: true,
                data: {},
                cache: false,
				dataType: 'json',
				success: (data) => {
                    let result = data.data;
                    this.data = JSON.parse(JSON.stringify(result));
                    for(let k in this.data.headData) {
                        this.headList[0].ratio = this.data.headData['newold_ratio'];
                        this.headList[1].ratio = this.data.headData['second_ratio'];
                        this.headList[2].ratio = this.data.headData['more_ratio'];
                    }
                    this.clickHandler(0);
                },
                error: (error) => {
                    this.catchErrorHandle(error)
                }
            });
        }
    }
}
</script>

<style scoped>
    /* .head-wrapper:after,
    .head-wrapper:before {
        content: '';
        display: table;
    }

    .head-wrapper:after {
        clear: both;
    } */

    .head-item {
        padding-top: .18rem;
        padding-bottom: .18rem;
        background-color: #fff;
        cursor: pointer;
    }

    .head-item:hover {
        background-color: #f9f9f9;
    }

    .head-item.is-active {
        background-color: #f9f9f9;
    }

    .head-item-text {
        display: block;
        padding-bottom: .2rem;
    }

    .head-item-ratio {
        display: block;
        font-size: .28rem;
    }

    /* 报表区 */
    .nocustom-content {
        position: relative;
        background-color: #f9f9f9;
    }

    .content-title {
        position: absolute;
        left: 26px;
        top: 26px;
        font-weight: normal;
        font-size: .18rem;
    }

    .gender-chart,
    .age-chart {
        height: 6rem;
    }

    .download-parent {
        position: relative;
    }

    .download-text {
        display: block;
        position: absolute;
        padding-right: 20px;
        right: 26px;
        top: 26px;
        font-size: .14rem;
        color: #666;
        font-family: inherit;
        cursor: pointer;
    }

    .download-text:after {
        content: "";
        display: block;
        width: 14px;
        height: 15px;
        background: url('~@/assets/img/export.png') no-repeat;
        position: absolute;
        right: 0;
        top: 3px;
    }
</style>