qimall/backend/modules/mall/views/census/analysis.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('components/my-table', __DIR__);
ComponentHelper::loadComponentView('components/screen-contain', __DIR__);
ComponentHelper::loadComponentView('components/header-time', __DIR__);
?>

<style>
    .screen-container {
        min-width: 100%;
    }
    
    .analysis-table-box {
        width: calc(100% - 140px);
        min-height: 800px;
        margin: 20px 70px;
        padding: 2px 0;
        color: #F8F8F8;
        background: linear-gradient(137deg, #0034E4 0%, #001A72 51%, #0034E4 100%);
        border-radius: 16px;
    }

    .table-content {
        width: 100%;
        min-height: 800px;
        /* border: 2px solid hotpink; */
        border-radius: 16px;
        background: #030317;
        width: calc(100% - 4px);
        margin: 0 2px;
        /* padding: 20px 0; */
    }

    .analysis-table-item {
        padding: 30px 20px 0;
    }

    .lf-item {
        position: relative;
        font-size: 26px;
        color: #CCCFDA;
        padding-bottom: 10px;
        margin-right: 38px;
        cursor: pointer;
    }

    .activeItem {
        color: #F8F8F8;
    }

    .activeItem::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, rgba(0, 52, 228, 0.02) 0%, #0034E4 52%, rgba(0, 52, 228, 0.02) 100%);
    }

    .export-text {
        color: #CCCFDA;
        font-size: 18px;
        cursor: pointer;
    }

    .high-low {
        padding: 32px 0;
    }

    .high-low span {
        font-size: 18px;
        color: #CCCFDA;
    }

    .high-low-line {
        width: 120px;
        height: 24px;
        background: linear-gradient(135deg, #0034E4 0%, #151634 100%);
        margin: 0 12px;
    }

    .table-content-right .el-radio-button__inner {
        background: transparent;
        color: #CCCFDA;
    }

    .table-content-right .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background: #0034E4;
        border-color: #fff;
        box-shadow: -1px 0 0 0 #fff;
    }

    .table-title {
        text-align: center;
        font-size: 22px;
        padding-bottom: 20px;
    }

    .table-headers {
        text-align: center;
    }

    .header-tr,
    .header-bd {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        /* width: 242px; */
        flex: 1;
        height: 81px;
        border: 1px solid #141439;
    }

    .bodys-tags {
        width: 80px;
        height: 24px;
        background: #F8F8F8;
        opacity: 1;
        border-radius: 12px 12px 12px 0px;
        color: #0034E4;
        font-size: 13px;
        text-align: center;
        line-height: 24px;
        margin-left: 5px;
    }
</style>

<div id="app" v-cloak>
    <screen-contain text-left="价值分析">
        <template v-slot:right>
            <header-time></header-time>
        </template>
        <div class="analysis-table-box">
            <div class="table-content">
                <!-- tab切换 -->
                <div class="analysis-table-item" flex="main:justify">
                    <div class="table-content-left" flex="cross:center">
                        <div class="lf-item" :class="{'activeItem': tabIndex == index}" v-for="(item, index) in tabArr" :key="index" @click="tabClick(item, index)">{{ item.value }}</div>
                    </div>
                    <div class="table-content-right">
                        <el-radio-group v-model="typeKey">
                            <el-radio-button v-for="(item, index) in radioTab" :key="index" :label="item.label">{{ item.value }}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <!-- 高 低 -->
                <div class="analysis-table-item" flex="main:justify cross:center">
                    <div class="high-low" flex="cross:center">
                        <span>{{typeText[tabIndex].analysisText[0]}}</span>
                        <div class="high-low-line"></div>
                        <span>{{typeText[tabIndex].analysisText[1]}}</span>
                    </div>
                    <!-- <div class="export-text">
                        <i style="font-size: 22px;" class="iconfont icon-daochu"></i>
                        <span>导出</span>
                    </div> -->
                </div>
                <!-- 表格 -->
                <div class="table-data-box">
                    <div class="table-title">{{typeText[tabIndex].title}}</div>

                    <div style="width: 100%;height: 100%;flex:1">
                        <div class="">
                            <div class="table-headers" flex>
                                <div class="header-tr" v-for="(it, i) in options" :key="i">{{ it.label }}</div>
                            </div>
                            <div flex v-for="(item, index) in tabData" :key="index">
                                <div style="flex: 1;" flex v-for="(it, i) in options" :key="i">
                                    <div v-if="it.props == 'time'" class="header-bd">{{ item[it.props] }}</div>
                                    <div v-else-if="it.props === 'rowSum'" class="header-bd" flex="cross:center">
                                        <span>{{ sumAdd(item) }}{{typeKey == typeText[tabIndex].keys[0]?'人':'元'}}</span>
                                    </div>
                                    <div v-else class="header-bd" :style="{'background': getLightenDarkenColor(it.color,(index*20)*-1)}" flex="cross:center">
                                        <span>{{ item[typeKey+it.num] }} {{typeKey == typeText[tabIndex].keys[0]?'人':'元'}}</span>
                                    </div>
                                </div>
                            </div>
                            <div flex>
                                <div style="flex: 1;" flex v-for="(it, i) in options" :key="i">
                                    <div class="header-bd" flex="cross:center">
                                        <span>{{ totlaData[it.props] }}</span>
                                        <span>{{ totlaData[typeKey+it.num] }}</span>
                                        <span v-if="it.props == 'rowSum'">{{ sumAdd(totlaData,it.num) }}</span>
                                        <span v-if="it.props != 'time'">{{typeKey == typeText[tabIndex].keys[0]?'人':'元'}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 30px;"></div>
    </screen-contain>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                tabIndex: 0,
                typeKey: 'f_users',
                tabArr: [{
                        label: 0,
                        value: 'RF分析'
                    },
                    {
                        label: 1,
                        value: 'RM分析'
                    }
                ],
                radioTab: [{
                        label: 'f_users',
                        value: '客户数占比'
                    },
                    {
                        label: 'f_total_pay_money',
                        value: '累计支付金额'
                    },
                    {
                        label: 'unit_price',
                        value: '客单价'
                    },
                ],
                options: [{
                        props: 'time',
                        label: 'R - 购买间隔时间 (天)'
                    },
                    {
                        props: 'f5',
                        label: 'F≥5',
                        color: '#0034E4',
                        num: '5',
                    },
                    {
                        props: 'f4',
                        label: 'F=4',
                        color: '#062CB5',
                        num: '4',
                    },
                    {
                        props: 'f3',
                        label: 'F=3',
                        color: '#09289B',
                        num: '3',
                    },
                    {
                        props: 'f2',
                        label: 'F=2',
                        color: '#0C237F',
                        num: '2',
                    },
                    {
                        props: 'f1',
                        label: 'F=1',
                        color: '#0F1E63',
                        num: '1',
                    },
                    {
                        props: 'rowSum',
                        label: '行合计'
                    }
                ],
                timeArr: ['R＜30','30≤R＜90','30≤R＜180','180≤R＜365','R≥365',],
                tabData: [],
                typeText: [
                    {
                        analysisText: ['高活跃度','低活跃度'],
                        tabThText: ['R - 购买间隔时间 (天)','F≥5','F=4','F=3','F=2','F=1'],
                        title: "F-购买频率（次）",
                        keys: ['f_users','f_total_pay_money'],
                    },
                    {
                        analysisText: ['高购买力','低购买力'],
                        tabThText: ['R - 购买间隔时间 (天)','M≥2000','1000≤M<2000','500≤M<1000','200≤M<500','M<200'],
                        title: "M-消费金额（元）",
                        keys: ['m_users','m_total_pay_money'],
                    },
                    
                    
                ]
            }
        },
        computed: {
            totlaData() {
                let obj = {}
                this.tabData.forEach((it, i) => {
                    for(var k in it) {
                        if (typeof it[k] === 'number') {
                            if (!obj[k]) obj[k] = 0
                            obj[k] += it[k]
                            if(this.typeKey != 'm_users'){
                                obj[k] = Number(obj[k].toFixed(2));
                            }
                        }
                    }
                })
                console.info(obj);
                return {
                    time: '列合计',
                    ...obj
                }
            }
        },
        created(){
            this.getData();
        },
        methods: {
            getData(){
                let that = this;
                this.tabData = [];
                request({
                    params: {
                        r: 'mall/statistics/car-analysis',
                        type: this.tabIndex+1,
                    },
                    method: 'get'
                }).then(e => {
                    if (e.data.code === 0) {
                        console.info(e.data.data);
                        let arr = e.data.data;
                        arr.forEach((val,index) => {
                            val.time = that.timeArr[index]
                            that.tabData.push(val);
                        }) 
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            tabClick(it, i) {
                this.tabIndex = i;
                this.options.forEach((val,index) => {
                    val.label = this.typeText[this.tabIndex].tabThText[index];
                })
                let index = this.radioTab.findIndex(v => v.label == this.typeKey);
                console.info(index);
                this.radioTab[0].label = this.typeText[this.tabIndex].keys[0];
                this.radioTab[1].label = this.typeText[this.tabIndex].keys[1];
                if(index!=-1){
                    this.typeKey = this.radioTab[index].label;
                }
                
                this.getData();
            },
            sumAdd(item) {
                let total = 0;
                let that = this;
                let index = 1;
                for (const key in item) {
                    let numKey = that.typeKey + index;
                    if (typeof item[numKey] === 'number') {
                        total += item[numKey];
                        index++;
                    }
                }
                let typeIndex = this.radioTab.findIndex(v => v.label == this.typeKey);
                if(typeIndex != 0){
                    total = total.toFixed(2);
                }
                return total
            },
            hexToRgb(hex) {
                var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : null;
            },
            getLightenDarkenColor(col, amt) {
                if(!col.length) return '';
                var result = this.hexToRgb(col);
                return `rgba(${result.r+amt},${result.g+amt},${result.b+amt})`
            },

        }
    })
</script>