caimei365-manager/src/main/webapp/static/modules/cmClubPortrait/cmClubEacths.js

/**
 * Created 机构订单图表 by zjy on 2023/02/10.
 */
function getDateStr(dd, addCount) {
    dd.setDate(dd.getDate() + addCount);//获取addCount天后的日期
    var y = dd.getFullYear();
    var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0
    var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
    return y + "/" + m + "/" + d;
}
// PC
const isPC = ($(window).width() > 768);
//默认参数
const defaultParams = {
    clubID:$('#clubId').val()*1,//  机构id
    dateType:0,//   日期类别 0日 1月 2半年 3全年
    startTime:'',//   开始时间
    endTime:'',//   结束时间
    type:0//  统计类别 0订单 1搜索关键词 2咨询记录 3访问记录 4初始状态
}
// 默认时间
const startDate = getDateStr(new Date(), -365),
      endDate = getDateStr(new Date(), 0);
// 初始化订单选择时间控件
const getInfoOrderDate = function () {
    $('#orderDate').dateRangePicker({
        language: 'cn',
        startDate: startDate,
        endDate: endDate,
        format: 'YYYY-MM-DD',
        showShortcuts: false,
        autoClose: isPC,
        isNowrap: false,
        getValue: function () {
            if (defaultParams.startTime && defaultParams.endTime) {
                return defaultParams.startTime + ' to ' + defaultParams.endTime;
            } else {
                return '';
            }
        },
        setValue: function (s, s1, s2) {
            defaultParams.startTime = s1;
            defaultParams.endTime = s2;
            $('#orderTimeStart').val(s1);
            $('#orderTimeEnd').val(s2);
            if (defaultParams.startTime && defaultParams.endTime) {
                getClubEacthsData(0,0)
            }
        }
    });
}
// 初始化关键词选择时间控件
const getInfoKeyWordsDate = function () {
    $('#keyWordsDate').dateRangePicker({
        language: 'cn',
        startDate: startDate,
        endDate: endDate,
        format: 'YYYY-MM-DD',
        showShortcuts: false,
        autoClose: isPC,
        isNowrap: false,
        getValue: function () {
            if (defaultParams.startTime && defaultParams.endTime) {
                return defaultParams.startTime + ' to ' + defaultParams.endTime;
            } else {
                return '';
            }
        },
        setValue: function (s, s1, s2) {
            defaultParams.startTime = s1;
            defaultParams.endTime = s2;
            $('#keyWordsTimeStart').val(s1);
            $('#keyWordsTimeEnd').val(s2);
            if (defaultParams.startTime && defaultParams.endTime) {
                getClubEacthsData(1,0)
            }
        }
    });
}
// 初始化咨询选择时间控件
const getInfoServiceDate = function () {
    $('#serviceDate').dateRangePicker({
        language: 'cn',
        startDate: startDate,
        endDate: endDate,
        format: 'YYYY-MM-DD',
        showShortcuts: false,
        autoClose: isPC,
        isNowrap: false,
        getValue: function () {
            if (defaultParams.startTime && defaultParams.endTime) {
                return defaultParams.startTime + ' to ' + defaultParams.endTime;
            } else {
                return '';
            }
        },
        setValue: function (s, s1, s2) {
            defaultParams.startTime = s1;
            defaultParams.endTime = s2;
            $('#serviceTimeStart').val(s1);
            $('#serviceTimeEnd').val(s2);
            if (defaultParams.startTime && defaultParams.endTime) {
                getClubEacthsData(2,0)
            }
        }
    });
}
// 初始化访问记录选择时间控件
const getInfoVisitDate = function () {
    $('#visitDate').dateRangePicker({
        language: 'cn',
        startDate: startDate,
        endDate: endDate,
        format: 'YYYY-MM-DD',
        showShortcuts: false,
        autoClose: isPC,
        isNowrap: false,
        getValue: function () {
            if (defaultParams.startTime && defaultParams.endTime) {
                return defaultParams.startTime + ' to ' + defaultParams.endTime;
            } else {
                return '';
            }
        },
        setValue: function (s, s1, s2) {
            defaultParams.startTime = s1;
            defaultParams.endTime = s2;
            $('#visitTimeStart').val(s1);
            $('#visitTimeEnd').val(s2);
            if (defaultParams.startTime && defaultParams.endTime) {
                getClubEacthsData(3,0)
            }
        }
    });
}
// 数据接口请求
const  getClubEacthsData = function (type,dateType) {
    defaultParams.type = type;
    defaultParams.dateType = dateType;
    console.log('数据接口请求参数',defaultParams)
    $.ajax({
        url: $('#eachtsAjaxUrl').val(),
        type: "GET",
        data: defaultParams,
        contentType : 'application/json;charset=UTF-8', //contentType很重要
        success: function (data) {
            console.log('res',data)
            if (data.code === 0) {
                switch (type) {
                    case 0:
                        if(!data.order){
                            $('#orderEacthsNone').show();
                            $('#orderEacths').hide();
                            $('.eachts-total').hide();
                        }else{
                            getOrderEacths(data.order.orderList);
                            $('#orderTotalNum').text(`${data.order.orderTotalNum}个`);
                        }
                        break;
                    case 1:
                        if(!data.behavior){
                            $('#keyWordsEacthsNone').show();
                            $('#keyWordsEacths').hide();
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                    case 2:
                        if(!data.remarks){
                            $('#serviceEacthsNone').show();
                            $('#serviceEacths').hide();
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                    case 3:
                        if(!data.pageType){
                            $('#visitEacthsNone').show();
                            $('#visitEacths').hide();
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                }
            } else {
                console.log('机构订单图表数据异常')
            }
        }
    });
}
// 基于准备好的dom，初始化echarts实例
const getOrderEacths = function (data) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('orderEacths'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: '10%',
            top:'20%',
            textStyle: {
                fontSize: 14,
            },
        },
        color:['#3aa0ff','#36cbcb','#fad337','#4dcb73','#f2637b','#975fe4'],
        series: [
            {
                name: '订单总量',
                type: 'pie',
                radius: '70%',
                center: ['25%', '50%'],
                avoidLabelOverlap: false,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: false,
                    position: 'center'
                },
                data:data
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;//移动适配
};
// 其他三个图表
const setOtherData = function (type,data) {
    const dataMap = {
        1:{
            id:'keyWordsEacths',
            color:'#e15616',
            series:{
                yAxisData:data.behavior.name,
                seriesData:data.behavior.value
            },
        },
        2:{
            id:'serviceEacths',
            color:'#36cbcb',
            series:{
                yAxisData:data.remarks.name,
                seriesData:data.remarks.value
            },
        },
        3:{
            id:'visitEacths',
            color:'#3aa0ff',
            series:{
                yAxisData:data.pageType.name,
                seriesData:data.pageType.value
            },
        }
    }
    getOtherEacths(dataMap[type].id,dataMap[type].series,dataMap[type].color);
}
// 其他三个图表
const getOtherEacths = function (id,data,color) {
    // 基于准备好的dom，初始化echarts实例
    console.log('id',id)
    const myChart = echarts.init(document.getElementById(id));
    const option = {
        title: {
            show:false
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show:false,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: data.yAxisData
        },
        series: [
            {
                type: 'bar',
                name: '2023',
                data: data.seriesData,
                itemStyle:{
                    color:color,
                    fontSize: 14,
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;//移动适配
};