index.js

import {
    getAccountCard,
    getAccountTrafficTrend,
    getAccountMallRank
} from '../api/shop'
import moment from 'moment'
Component({
    pageLifetimes: {
        show() {
            this.loadData()
            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
                this.getTabBar().setData({
                    // 当前页面的 tabBar 索引
                    curClick:1
                })
            }
        }
    },
    data: {
        selectName: '',//集团名称
        openMllNum:0,//开业门店数
        exposure:0,//路过客流量
        traffic:0,//客流量
        customer:0,//顾客人数
        entryRate:0,//进店率
        currentTime: moment().format("YYYY-MM-DD"),
        types: 1, //选中的时间类型
        trendtypes: 'PassengerFlow', //选中的客流趋势类型
        chartData: {}, //客流趋势分析数据
        show: false, //显示日期自定义选择
        minDate: new Date(2022, 0, 1).getTime(), //自定义时间的开始日期
        maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期
        rankData: [],
        indexVal: 'PassengerFlow',
        indexList: [{
            name: '客流量',
            val: 'PassengerFlow'
        }, {
            name: '过店人次',
            val: 'Exposure'
        }, {
            name: '进店率',
            val: 'IntoStoreRate'
        }, {
            name: '顾客人数',
            val: 'CustomerNum'
        }, {
            name: '平均停留时间',
            val: 'AvgResidenceTime'
        }, {
            name: '深逛人数',
            val: 'DeepShoppingNum'
        }, {
            name: '深逛率',
            val: 'DeepShoppingRate'
        }, {
            name: '集客力',
            val: 'PerAreaValue'
        }],
    },
    methods: {
        // 关闭自定义日期选择
        onClose() {
            this.setData({
                show: false
            });
        },
        // 点击指标
        clickIndex(event) {
            this.setData({
                indexVal: event.target.dataset.val
            },()=>{
                this.getMallRank()
            });
        },
        // 点击自定义日期选择器的确定
        onConfirm(event) {
            const [start, end] = event.detail;
            let startDate = moment(start).format("YYYY-MM-DD")
            let endDate = moment(end).format("YYYY-MM-DD")
            this.setData({
                show: false,
                currentTime: startDate + '至' + endDate
            }, () => {
                this.loadData()
            });
        },
        // 点击时间选择类型触发
        ClickTab(e) {
            let dateType = e.target.dataset.type,
                time
            switch (dateType) {
                case '1':
                    time = moment().format("YYYY-MM-DD")
                    break;
                case '2':
                    time = moment().subtract(1, "days").format("YYYY-MM-DD")
                    break;
                case '3':
                    time = moment().subtract(6, "days").format("YYYY-MM-DD") + '至' + moment().format("YYYY-MM-DD")
                    break;
                case '4':
                    time = moment().subtract(29, "days").format("YYYY-MM-DD") + '至' + moment().format("YYYY-MM-DD")
                    break;

                default:
                    this.setData({
                        show: true,
                        types: e.target.dataset.type,
                    })
                    break;
            }
            if (dateType != 5) {
                this.setData({
                    types: e.target.dataset.type,
                    currentTime: time
                }, () => {
                    this.loadData()
                })
            }

        },
        // 获取卡片数据
        getCardList() {
            let startTime = this.data.currentTime,
                endTime = this.data.currentTime
            if (this.data.currentTime.includes('至')) {
                let timeArr = this.data.currentTime.split('至')
                startTime = timeArr[0]
                endTime = timeArr[1]
            }
            getAccountCard({
                accountId:wx.getStorageSync('accountId'),
                startDate:startTime,
                endDate:endTime,
            }).then(res => {
                this.setData({
                    selectName:res.data.name,
                    openMllNum:res.data.openMllNum,
                    exposure:res.data.exposure,
                    traffic:res.data.traffic,
                    customer:res.data.customer,
                    entryRate:res.data.entryRate,
                })
            })
        },
        // 获取客流趋势分析
        getTrendList() {
            // wx.showLoading();
            let startTime = this.data.currentTime,
                endTime = this.data.currentTime
            if (this.data.currentTime.includes('至')) {
                let timeArr = this.data.currentTime.split('至')
                startTime = timeArr[0]
                endTime = timeArr[1]
            }
            getAccountTrafficTrend({
                accountId:wx.getStorageSync('accountId'),
                startDate:startTime,
                endDate:endTime,
                dataLevel:'hour',
                dataIndex:this.data.trendtypes
            }).then(res => {
                setTimeout(()=>{
                    this.setData({
                        chartData:this.getLineConfig(res.data)
                    },()=>{
                        // wx.hideLoading();
                    })
                },1000)
            })
        },
        // 获取门店排行
        getMallRank(){
            let startTime = this.data.currentTime,
                endTime = this.data.currentTime
            if (this.data.currentTime.includes('至')) {
                let timeArr = this.data.currentTime.split('至')
                startTime = timeArr[0]
                endTime = timeArr[1]
            }
            getAccountMallRank({
                accountId:wx.getStorageSync('accountId'),
                startDate:startTime,
                endDate:endTime,
                dataIndex:this.data.indexVal
            }).then(res => {
                let rankData = res.data;
                let maxVal = Math.max.apply(Math,rankData.map((o)=>{
                    return o.value
                }))
                rankData.forEach(item=>{
                    item.percentage = parseInt(item.value*100/maxVal);
                })
                this.setData({
                    rankData
                })
            })
        },
        // 获取所有数据
        loadData() {
            this.getCardList()
            this.getTrendList()
            this.getMallRank()
        },
        //点击客流趋势tab触发
        ClickPassageFlow(e) {
            this.setData({
                trendtypes: e.target.dataset.type
            }, () => {
                this.getTrendList()
            })
        },
        // 返回趋势图配置项
        getLineConfig(res) {
            let xasix = res.xaxis.data || []
            let seriesList = res.series || []
            if (seriesList.length < 1) {
              return {
                title: {
                  text: '暂无数据',
                  x: 'center',
                  y: 'center',
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                  }
                }
              }
            }
            return {
                grid: {
                    top: 30,
                    right: 20,
                    bottom: 20,
                    left: 5,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "#444",
                        },
                    },
                    formatter: function (params) {
                        let html = ''
                        params.forEach(item => {
                            html += item.axisValue+ ': ' + item.value
                        })
                        return html
                    }
                },
                xAxis: {
                    axisLabel: {
                        color: '#8C8D95'
                    },
                    boundaryGap: false,
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(140,141,149,0.35)',
                            width: 1
                        }
                    },
                    data: xasix
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#8C8D95',
                        formatter: function (value, index) {
                            if (value >= 10000 && value < 1000000) {
                                value = value / 10000 + "万";
                            } else if (value >= 1000000) {
                                value = value / 1000000 + "百万";
                            }
                            return value;
                        },
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'],
                // series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,}))
                series: [{
                    smooth: true,
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#6384FF' // 0% 处的颜色
                            }, {
                             offset: 1, color: '#34BFFF' // 100% 处的颜色
                            }],
                            globalCoord: false
                        }
                    },
                    areaStyle: {
                        // 区域颜色
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [{
                                    offset: 0.1,
                                    color: '#EAF3FF' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#FFFFFF' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                    data: seriesList[0].data,
                    type: "line",
                    symbol: "none",
                    showSymbol: false,
                    symbolSize: 20,
                }]
            }
        },
    }
})