qimall/backend/modules/mall/views/census/transaction-data.php

<?php

use common\helpers\ComponentHelper;

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

<style>
    .screen-container {
        min-width: 100%;
    }
    
    .bgCom {
        border: 2px solid #0061CC;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #0034E4 0%, #14141A 13%, rgba(7, 7, 9, 0.89) 81%, rgba(20, 101, 255, 0.11) 100%);
        border-radius: 16px;
        padding: 30px;
    }

    .titleCom {
        height: 37px;
        font-size: 30px;
        font-family: DIN;
        font-weight: bold;
        line-height: 37px;
        color: #F8F8F8;
        margin-bottom: 30px;
    }

    .subTitle {
        line-height: 37px;
        text-align: center;
    }

    .transaction-data-box {
        padding: 30px 60px;
    }
    .transaction-data-header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        color: #F8F8F8;
        padding-right: 460px;
    }
    .count-symbool {
        height: 100%;
        padding-left: 7px;
        font-size: 18px;
        /* font-weight: 700; */
    }
    .count-to {
        font-size: 60px;
    }

    /* left */
    .transaction-data-left{
        margin: 0 16px;
    }

    .transaction-item {
        width: 100%;
        height: 192px;
    }
    .transaction-item-child {
        position: relative;
        width: 20%;
    }
    .child-count {
        padding: 10px 0 2px;
        font-size: 20px;
    }
    .child-tag {
        position: absolute;
        top: 0;
        right: 20px;
        /* width: 30px; */
        padding: 2px 5px;
        background: #0034E4;
        opacity: 1;
        border-radius: 8px 8px 8px 0px;
        font-size: 12px;
        text-align: center;
    }
    .transaction-item-kids {
        width: 152px;
        height: 152px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.08) 100%);
        opacity: 1;
        border-radius: 12px;
        overflow: hidden;
    }
    .transaction-item-kids .child-count {
        padding-top: 0;
    }

    .transaction-category-left{
        width: 55%;
        height: 400px;
        margin-right: 28px;
        padding: 74px 36px;
        position: relative;
    }

    .transaction-category-right{
        width: 45%;
        height: 400px;
    }

    #echartsTrend {
        width: 100%;
        height: 300px;
    }

    /* right */
    .transaction-data-right {
        padding: 0 16px;
    }

    .transaction-block {
        width: 100%;
    }

    .block-items {
        position: relative;
        flex: 1;
        height: 498px;
    }
    .block-map-tips {
        position: absolute;
        bottom: 20px;
        left: 30px;
    }
    .map-tips-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    .map-tips-name {
        padding-left: 5px;
    }

    .transaction-sales {
        width: 100%;
        height: 302px;
    }

    .table-goods {
        cursor: pointer;
    }

    .goods-name {
        color: #F8F8F8;
        padding-left: 6px;
    }

    #echartsMap {
        width: 100%;
        height: 388px;
    }

    .category-left-model{
        height: 85px;
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 26px;
        color: #FFF;
        position: relative;
        width: 70%;
    }

    .category-left-bak{
        width: 90%;
        padding: 18px 20px;
    }

    .left-text{
        width: 33%;
    }

    .right-text{
        position: absolute;
        right: 0;
        height: 100%;
        z-index: 2;
        width: 121px;
        /* 实现梯形 */
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
    }

    .right-text-model{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }

    .right-text-model-center{
        top: 50%;
        transform: translate(-50%,-50%);
    }

    .right-border{
        transform: skewX(342deg);
        position: absolute;
        border: 1px solid #303363;
        border-left: 0;
        right: -70px;
        bottom: -42px;
        height: 80px;
        width: 25%;
        z-index: 1;
    }

    .big-right-border{
        transform: skewX(342deg);
        position: absolute;
        border: 1px solid #303363;
        border-left: 0;
        right: 66px;
        top: 94px;
        height: 56%;
        width: 30%;
        z-index: 1;
    }

    .right-border-text{
        position: absolute;
        right: -90px;
        top: 50%;
        transform: translateY(-50%) skewX(18deg);
    }


    .el-carousel--vertical{
        width: 200px;
        height: 30px;
    }

    .el-carousel__indicators--vertical{
        display: none;
    }
</style>

<div id="app" v-cloak>
    <screen-contain text-left="交易数据" :is-fix="false">
        <template v-slot:right>
            <header-time></header-time>
        </template>
        <div class="transaction-data-header">
            <div style="font-size: 45px;margin-right: 18px;">平台累计成交金额</div>
            <count-to :end-val="totalNum" :duration="10000" class="count-to"></count-to>
            <div class="count-symbool" flex="cross:bottom"><span>元</span></div>
        </div>
        <div class="transaction-data-box">
            <div class="transaction-data-left" flex="cross:center">
                <div class="bgCom transaction-category-left">
                    <div  class="category-left-model" flex
                        v-for="(item,index) in orderModelArr" :key="index"
                        >
                        <div class="category-left-bak" flex :style="{'background': item.color + '1c',}">
                            <div v-for="(data,dIndex) in item.data" :key="dIndex" class="left-text">
                                <div>{{data.text}}</div>
                                <div>{{echartsData.from[data.key]}}</div>
                            </div>
                        </div>
                        <div class="right-text">
                            <div class="right-text-model right-text"
                                :style="{
                                         'width': orderModelMaxWidth - (index*40) + 'px',
                                         'border-top': '85px solid ' + item.color,
                                        }"
                            ></div>
                            <div class="right-text-model right-text-model-center">{{item.text}}</div>
                        </div>
                        <!-- 线条 -->
                        <div class="right-border" v-if="index != orderModelArr.length - 1">
                            <div class="right-border-text" :style="{'right': -100 - (index * 30) + 'px'}">
                                <div>{{item.borderInfo.text}}</div>
                                <div>{{echartsData.from[item.borderInfo.key]}}%</div>
                            </div>
                        </div>
                    </div>
                    <div class="big-right-border"></div>
                </div>
                <div class="bgCom transaction-category-right">
                    <div flex="main:justify">
                        <div class="titleCom" style="margin-bottom: 0;">实时成交趋势</div>
                        <div class="subTitle">单位：元 </div>
                    </div>
                    <div id="echartsTrend"></div>
                </div>
            </div>
            <div class="transaction-data-right" flex="dir:top cross:center">
                <div class="transaction-block" flex="main:around">
                    <div class="bgCom block-items">
                        <div flex="main:justify">
                            <div class="titleCom">交易地图热点</div>
                            <el-carousel height="50px" direction="vertical">
                                <el-carousel-item v-for="(item,index) in echartsData.scroll" :key="index">
                                    <div class="subTitle">{{item}}</div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div id="echartsMap"></div>
                        <div class="block-map-tips">
                            <div v-for="(it, i) in mapTips" :key="i" flex="cross:center" style="padding-bottom: 5px;">
                                <div class="map-tips-color" :style="{background: it.color}"></div>
                                <div class="map-tips-name">{{ it.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bgCom block-items" flex="dir:top" style="margin: 0 38px">
                        <div class="titleCom">加购情况</div>
                        <div style="flex:1;height:0">
                            <my-table :data="echartsData.cart" :options="options">
                                <template v-slot:sort="{ item,index }">
                                    <div>{{index+1}}</div>
                                </template>
                            </my-table>
                        </div>
                    </div>
                    <div class="bgCom block-items" flex="dir:top">
                        <div class="titleCom">销售排行榜</div>
                        <div style="flex:1;height:0">
                            <my-table :data="echartsData.rank" :options="goodsFlowOptions">
                                <template v-slot:sort="{ item,index }">
                                    <div>{{index+1}}</div>
                                </template>
                            </my-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </screen-contain>
</div>

<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> -->
<script src="/resources/unpkg/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="/resources/js/china.js"></script>
<script>
    function randomData() {
    return Math.round(Math.random() * 500);
}
    const app = new Vue({
        el: '#app',
        data() {
            return {
                orderModelArr: [
                    {
                        text: '访客',
                        color: '#0034E4',
                        borderInfo: {
                            text: '下单转化率',
                            key: 'order_proportion'
                        },
                        data: [
                            {
                                text: '访客数',
                                key: 'total_visitors',
                            },
                        ],
                    },
                    {
                        text: '下单',
                        color: '#1F9E34',
                        borderInfo: {
                            text: '下单支付转化率',
                            key: 'pay_proportion'
                        },
                        data: [
                            {
                                text: '下单人数',
                                key: 'number_of_orders',
                            },
                            {
                                text: '下单金额',
                                key: 'total_order_money',
                            },
                        ],
                    },
                    {
                        text: '支付',
                        color: '#ED7453',
                        data: [
                            {
                                text: '支付人数',
                                key: 'total_pay_people',
                            },
                            {
                                text: '支付金额',
                                key: 'total_pay_money',
                            },
                            {
                                text: '客单价',
                                key: 'unit_price',
                            },
                        ],
                    },
                ],
                orderModelMaxWidth: 180,
                options: [{
                        props: "sort",
                        label: '排行',
                        width: '50',
                        slot: true,
                        textAlign: 'left',
                    },{
                        props: 'goods_name',
                        label: '商品名称',
                        textAlign: 'left',
                        width: '190'
                    },{
                        props: 'num',
                        label: '加购数量',
                        textAlign: 'right',
                    }, 
                ],
                goodsFlowOptions: [{
                        props: "sort",
                        label: '排行',
                        width: '50',
                        slot: true,
                        textAlign: 'left',
                    },
                    {
                        props: 'goods_name',
                        label: '商品名称',
                        textAlign: 'left',
                        width: '280',
                    },
                    {
                        props: 'num',
                        label: '销售金额',
                        textAlign: 'right',
                    },
                ],
                mapTips: [
                    {
                        color: '#ED7453',
                        name: '≥100'
                    },
                    {
                        color: '#A2E157',
                        name: '>90-100'
                    },
                    {
                        color: '#0034E4',
                        name: '>80-90'
                    },
                    {
                        color: '#002390',
                        name: '<80'
                    }
                ],
                echartsData: {
                    from: {},
                    scroll: [],
                },
                totalNum: 0,
            }
        },
        mounted() {
            this.getEchartsData();
        },
        methods: {
            getEchartsData(){
                let that = this;
                request({
                    params: {
                        r: 'mall/statistics/car-user-trad-data',
                    },
                    method: 'get'
                }).then(e => {
                    if (e.data.code === 0) {
                        console.info(e.data.data);
                        this.echartsData = e.data.data;
                        this.totalNum = this.echartsData.total_num;

                        // this.totalCount = e.data.data.flow_datas.total_users;
                        // this.orderSort.push(...e.data.data.region_datas.sort((a,b) => { return b.total_orders-a.total_orders}).slice(0,10));
                        
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.echartsTrendInit()
                    this.echartsMapInit()
                });
            },
            echartsTrendInit() {
                var chartDom = document.getElementById('echartsTrend');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: this.echartsData.trad_trend.map(v => v.hour)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    series: [
                        {
                            data: this.echartsData.trad_trend.map(v => v.num),
                            type: 'line',
                            color: "#0034E4",
                            areaStyle: {
                                opacity: 0.5
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },

            echartsMapInit() {
                // var china_map = echarts.init(document.getElementById("echartsMap"),'infographic');
                var china_map = echarts.init(document.getElementById("echartsMap"));
                let newArr = [];
                // 地图数据
                this.echartsData.trad_map.forEach(item => {
                    let name = item.province_name;
                    name = name.split('省')[0];
                    name = name.split('市')[0];
                    name = name.split('特别行政区')[0];
                    name = name.split('壮族自治区')[0];
                    name = name.split('回族自治区')[0];
                    name = name.split('维吾尔自治区')[0];
                    name = name.split('自治区')[0];
                    let obj = {
                        name,
                        value: item.order_num
                    };
                    newArr.push(obj);
                })
                console.info(newArr);
                var option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,
                        x: 'left',
                        y: 'bottom',
                        splitList: [
                            {
                                start: 0,
                                end: 80
                            }, {
                                start: 80,
                                end: 90
                            },
                            {
                                start: 90,
                                end: 100
                            }, {
                                start: 100
                            },
                        ],
                        color: ['#ED7453', '#A2E157', '#0034E4', '#002390']
                    },
                    series: [{
                        type: 'map',
                        mapType: 'china',
                        // roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            areaColor: '#002390',
                            borderColor: '#4478F5'
                        },
                        data: newArr
                    },]
                };
                china_map.setOption(option);
            }
        }
    })
</script>