index2.js

import moment from 'moment'
import {
    getMalls,
} from "../api/login";
import {
    getCardData,
    getShopDetailData,
    getStopTimeData,
    getTrendData,
    getAgeSexData,
    getAgeData
} from "../api/shop";
const App = getApp();
Component({
    pageLifetimes: {
        show() {
            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
                this.getTabBar().setData({
                    // 当前页面的 tabBar 索引
                    curClick: 2
                })
            }
            if (wx.getStorageSync('shopName') && this.data.shopList.length > 0) {
                let selectId = this.data.shopList.find(item => item.name == wx.getStorageSync('shopName')).id
                this.setData({
                    selectName: wx.getStorageSync('shopName'),
                    selectId
                }, () => {
                    this.loadData()
                    getShopDetailData({
                        id: this.data.selectId
                    }).then(res => {
                        if (res.code == 200) {
                            let startTime = res.data.startTime.split(' ')[1].slice(0, 5)
                            let endTime = res.data.endTime.split(' ')[1].slice(0, 5)
                            this.setData({
                                info: {
                                    ...res.data,
                                    startTime,
                                    endTime
                                }
                            })
                        }
                    })
                })
            } else {
                
            }
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        navHeight: getApp().globalData.navHeight,
        currentTime: moment().format("YYYY-MM-DD"),
        types: 1, //选中的时间类型
        trendtypes: 1, //选中的业态趋势类型
        chartData: {}, //客流趋势分析数据
        chartDatastop: {}, //停留时长统计
        chartDataSex: {}, //客群性别占比
        chartDataAge: {}, //客群年龄占比
        show: false, //显示日期自定义选择
        minDate: new Date(2022, 0, 1).getTime(), //自定义时间的开始日期
        // maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期
        maxDate: new Date(2025, 11, 31).getTime(), //自定义时间的结束日期
        shopList: [], //店铺列表数据
        selectId: '', //选中的店铺id
        selectName: '', //选中店铺名字
        columnsListName: [], //店铺的名字下拉列表
        exposure: 0,
        traffic: 0,
        customer: 0,
        entryRate: 0,
        info: {}
    },
    ready(){
        getMalls({
            url: '/report/malls',
            accountId: wx.getStorageSync('accountId')
        }).then((res) => {
            this.setData({
                shopList: res.data,
                selectName: res.data[0] && res.data[0].name,
                selectId: res.data[0] && res.data[0].id,
                columnsListName: res.data && res.data.map(item => item.name)
            }, () => {
                wx.setStorageSync('shopName', res.data[0] && res.data[0].name)
                this.loadData()
                getShopDetailData({
                    id: this.data.selectId
                }).then(res => {
                    if (res.code == 200) {
                        let startTime = res.data.startTime.split(' ')[1].slice(0, 5)
                        let endTime = res.data.endTime.split(' ')[1].slice(0, 5)
                        this.setData({
                            info: {
                                ...res.data,
                                startTime,
                                endTime
                            }
                        })
                    }
                })
            })
        })
        
    },
    methods: {
        // 关闭自定义日期选择
        onClose() {
            this.getTabBar().setData({
                show: true
            });
            this.setData({
                show: false
            });
        },
        // 跳转到店铺选择
        selectContent() {
            wx.navigateTo({
                url: '/pages/shopSelect/index?current=' + JSON.stringify(this.data.columnsListName),
            })
        },
        // 点击自定义日期选择器的确定
        onConfirm(event) {
            this.getTabBar().setData({
                show: true
            });
            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,
                    })
                    this.getTabBar().setData({
                        show: false,
                    });
                    break;
            }
            if (dateType != 5) {
                this.setData({
                    types: e.target.dataset.type,
                    currentTime: time
                }, () => {
                    this.loadData()
                })
            }

        },
        // 获取卡片数据
        getCardList() {
            // console.log(this.data.currentTime,this.data.selectId,this.data.selectName)
            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]
            }
            getCardData({
                mallId: this.data.selectId,
                // mallId: 9300,
                startDate: startTime,
                endDate: endTime
            }).then(res => {
                if (res.code == 200) {
                    let data = res.data
                    this.setData({
                        exposure: data.exposure,
                        traffic: data.traffic,
                        customer: data.customer,
                        entryRate: data.entryRate && data.entryRate.toFixed(2)
                    })
                }
            })
        },
        // 获取业态客流趋势
        getTrendList() {
            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]
            }
            let dataIndex, dataLevel = 'day'
            if (this.data.trendtypes == 1) {
                dataIndex = 'Exposure'
            } else if (this.data.trendtypes == 2) {
                dataIndex = 'PassengerFlow'
            } else if (this.data.trendtypes == 3) {
                dataIndex = 'CustomerNum'
            } else if (this.data.trendtypes == 4) {
                dataIndex = 'IntoStoreRate'
            }
            if (startTime == endTime) {
                dataLevel = 'hour'
            }
            getTrendData({
                // mallId: 9300,
                mallId: this.data.selectId,
                startDate: startTime,
                endDate: endTime,
                dataIndex,
                dataLevel
            }).then(res => {
                if (res.code == 200) {
                    this.setData({
                        chartData: this.getLineConfig(res.data), //客流趋势分析数据
                    })
                }
            })
        },
        // 获取停留时长统计
        getStopTimeList() {
            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]
            }
            getStopTimeData({
                mallId: this.data.selectId,
                // mallId: 9300,
                startDate: startTime,
                endDate: endTime
            }).then(res => {
                if (res.code == 200) {
                    this.setData({
                        chartDatastop: this.getStopTimeConfig(res.data),
                    })
                }
            })
        },
        // 获取性别和年龄
        getAgeSexList() {
            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]
            }
            getAgeSexData({
                mallId: this.data.selectId,
                // mallId: 9300,
                startDate: startTime,
                endDate: endTime
            }).then(res => {
                if (res.code == 200) {
                    this.setData({
                        chartDataSex: this.getGroupSexConfig(res.data),
                    })
                }
            })
            getAgeData({
                mallId: this.data.selectId,
                // mallId: 9300,
                startDate: startTime,
                endDate: endTime
            }).then(res => {
                if (res.code == 200) {
                    this.setData({
                        chartDataAge: this.getAgeConfig(res.data)
                    })
                }
            })
        },
        // 获取性别和年龄
        getShopDetailList() {
            // getShopDetailData().then(res => {})
        },
        // 获取所有数据
        loadData() {
            this.getCardList()
            this.getTrendList()
            this.getStopTimeList()
            this.getAgeSexList()
            this.getShopDetailList()
        },
        //点击业态客流趋势top5中的tab触发
        ClickPassageFlow(e) {
            this.setData({
                trendtypes: e.target.dataset.type
            }, () => {
                this.getTrendList()
            })
        },
        // 返回趋势图配置项
        getLineConfig(res) {
            let xasix = res.xaxis.data
            // let legendList = res.series.map(item => item.name)
            let seriesList = res.series || []
            if (seriesList[0].data.every(item => !item)) {
                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: [{
                    name: res.series[0] && res.series[0].name,
                    smooth: true,
                    lineStyle: {
                        color: '#34BFFF'
                    },
                    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: res.series[0] && res.series[0].data,
                    type: "line",
                    symbol: "none",
                    showSymbol: false,
                    symbolSize: 20,
                }]
            }
        },
        // 返回停留时长配置
        getStopTimeConfig(confingData) {
            if (confingData.series.length <= 0) {
                return {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                        }
                    }
                }
            }
            let data_sample = [];
            confingData.xaxis.data.forEach((item, i) => {
                let arr = [];
                arr[0] = item;
                arr[1] = confingData.series[0].data[i];
                arr[2] = 100;
                data_sample.push(arr);
            });
            data_sample.reverse()
            data_sample.unshift(["type", confingData.title, ""]);
            return {
                color: ["#33CCFF", "#CCEEFF"],
                legend: {
                    show: false
                },
                grid: {
                    left: "0",
                    right: "2%",
                    bottom: "3%",
                    top: "10px",
                    containLabel: true
                },
                xAxis: {
                    type: "value",
                    //   boundaryGap: [0, 0.01],
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: {
                    type: "category",
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                dataset: {
                    source: data_sample
                },
                series: [{
                        name: "停留时长",
                        type: "bar",
                        barWidth: "40%",
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.data[1] + "%";
                            },
                            position: ["102%", "0%"]
                        },
                        itemStyle: {
                            color: "#679BFF"
                        },
                        z: 3 //让实时在总计上面
                    },
                    {
                        name: "",
                        type: "bar",
                        barWidth: "40%",
                        itemStyle: {
                            color: "#F5F7F9"
                        },
                        barGap: "-100%"
                    }
                ]
            };

        },
        // 返回客群性别占比配置
        getGroupSexConfig(faceGender) {
            console.log(faceGender.series[0] && faceGender.series[0].data)
            if (!(faceGender.series[0] && faceGender.series[0].data)) {
                return {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                        }
                    }
                }
            }
            let seriesData = faceGender.series[0].data;
            let sexLabel = faceGender.series[0].data.map(item => item.name);
            let number = faceGender.series[0].data.map(item => item.value);
            let sum = number[0] * 1 + number[1] * 1;
            let rate = faceGender.series[0].data.map(item =>
                ((item.value / sum) * 100).toFixed(2)
            );
            if (rate[0] == "NaN" || rate[1] == "NaN") {
                rate = [0, 0];
            }
            return {
                color: ["#FF8383", "#70AAFB"],
                grid: {
                    top: "15%",
                    left: 20,
                    right: "1%",
                    bottom: 5
                },
                legend: [{
                    orient: "vertical",
                    top: "center",
                    icon: "circle",
                    right: 10,
                    textStyle: {
                        color: "#000",
                        fontSize: 14
                    },
                    data: sexLabel,
                    formatter: function (name) {
                        for (var i = 0; i < sexLabel.length; i++) {
                            if (sexLabel[i] == name) {
                                return name + "   " + "   " + rate[i] + "%";
                            }
                        }
                    }
                }],
                series: [{
                    name: "需求类型占比",
                    type: "pie",
                    center: ["30%", "50%"],
                    radius: ["36%", "70%"],
                    showEmptyCircle: true,
                    label: {
                        normal: {
                            show: false,
                            position: "inside",
                            color: "#000",
                            formatter: function (params) {
                                return params.name + "\n" + params.percent + "%";
                            }
                        }
                    },
                    labelLine: {
                        show: false,
                        length: 0,
                        length2: 0
                    },
                    data: seriesData
                }]
            };
        },
        // 返回客群年龄占比
        getAgeConfig(faceAge) {
            if (faceAge.series.length <= 0) {
                return {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                        }
                    }
                }
            }
            let xdata = faceAge.series.map(item => item.name);
            let ydatas = faceAge.series.map(item => {
                return item.data[0] * 1 + item.data[1] * 1;
            });
            let sums = ydatas.reduce((pre, item) => pre + item, 0);
            let ydata = ydatas.map(item => ((item / sums) * 100).toFixed(2));
            return {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    },
                    formatter: function (params) {
                        let html = ''
                        params.forEach(item => {
                            html += item.axisValue + '\n' + ' ' + item.value
                        })
                        return html
                    },
                    transitionDuration: 0
                },
                grid: {
                    top: "8%",
                    right: "5%",
                    left: "10%",
                    bottom: "15%"
                },

                xAxis: [{
                    type: "category",
                    axisLabel: {
                        color: "#8C8D95",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#0a3e98"
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#195384",
                            type: "dotted"
                        }
                    },
                    // data: ["小西关村", "谢家井社区", "石家庄村", "大东关社区"],
                    data: xdata
                }],
                yAxis: [{
                    type: "value",
                    name: "",
                    min: 0,
                    position: "left",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 11
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0a3e98"
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#0a3e98",
                            type: "dotted"
                        }
                    },
                    axisLabel: {
                        formatter: "{value}",
                        textStyle: {
                            color: "#8C8D95"
                        }
                    }
                }],

                series: [{
                    name: "",
                    type: "bar",
                    barWidth: 25, //柱子宽度
                    barGap: 0.3, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#70AAFB',
                            opacity: 1,
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "top",
                            formatter: "{c}%",
                            color: "#8C8D95"
                        }
                    },
                    // data: ["104", "60", "145", "328"],
                    data: ydata
                    // animationDuration: function (idx) {
                    //     return idx * 1500 + 1000;
                    // }
                }]
            };
        },
    }
})