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

/**
 * Created 机构订单图表 by zjy on 2023/02/10.
 */
const getDateStr = function(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 defaultDemand = {
    clubID:$('#clubId').val()*1,//  机构id
    dateType:0,//   日期类别 0日 1月 2半年 3全年
    startTime:'',//   开始时间
    endTime:'',//   结束时间
}
// 默认时间
const startDate = getDateStr(new Date(), -365),
      endDate = getDateStr(new Date(), 0);
// 初始化客户需求选择时间控件
const getInfoDemandDate = function () {
    $('#customerDemandData').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;
            $('#demandStart').val(s1);
            $('#demandEnd').val(s2);
            if (defaultParams.startTime && defaultParams.endTime) {
                $('#customerDemand').find('a').removeClass('active');
                getDemandData(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) {
                $('#orderTabs').find('a').removeClass('active');
                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) {
                $('#keyWordTabs').find('a').removeClass('active');
                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) {
                $('#serviceTabs').find('a').removeClass('active');
                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) {
                $('#visitTabs').find('a').removeClass('active');
                getClubEacthsData(3,0)
            }
        }
    });
}
const getDemandData = function (dateType) {
    console.log('客户客户');
    console.log('url', $('#demandUrl').val(),);
    defaultDemand.dateType = dateType;
    $.ajax({
        url: $('#demandUrl').val(),
        type: "GET",
        data: defaultDemand,
        contentType : 'application/json;charset=UTF-8',
        success: function (data) {
            $('#demandStart').val(data.startTime);
            $('#demandEnd').val(data.endTime);
            if (data.demandList.length > 0) {
                $('#demandEnd').val(data.endTime);
                $('#demandStart').val(data.startTime);
                $('#demand').empty();
                data.demandList.forEach((item) => {
                    console.log(item)
                    $('#demand').append('<span class="span_tab">'+ item +'</span>')
                    // $('.span_tab').append(item)
                    // $('#demand').append(text)
                })
            } else {
                $('#demand').html('<div class="empty">暂无数据</div>')
            }
        }
    })
}
// 数据接口请求
const  getClubEacthsData = function (type,dateType) {
    defaultParams.type = type;
    defaultParams.dateType = dateType;
    $.ajax({
        url: $('#eachtsAjaxUrl').val(),
        type: "GET",
        data: defaultParams,
        contentType : 'application/json;charset=UTF-8', //contentType很重要
        success: function (data) {
            if (data.code === 0) {
                switch (type) {
                    case 0:
                        if(!data.order){
                            $('#orderEacthsNone').show();
                            $('#orderEacths').hide();
                            $('.eachts-total').hide();
                            $('#orderTimeEnd').val(data.portrait.endTime);
                            $('#orderTimeStart').val(data.portrait.startTime);
                            $('#orderScopeNum').text('￥0  (0个)');
                        }else{
                            setOrderData(type,data)
                        }
                        break;
                    case 1:
                        if(!data.behavior){
                            $('#keyWordsEacthsNone').show();
                            $('#keyWordsEacths').hide();
                            $('#keyWordsTimeEnd').val(data.portrait.endTime);
                            $('#keyWordsTimeStart').val(data.portrait.startTime);
                            $('#keyWordsScopeNum').text(`0(个)`);
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                    case 2:
                        if(!data.remarks){
                            $('#serviceEacthsNone').show();
                            $('#serviceEacths').hide();
                            $('#serviceTimeEnd').val(data.portrait.endTime);
                            $('#serviceTimeStart').val(data.portrait.startTime);
                            $('#remarksScopeNum').text(`0(个)`);
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                    case 3:
                        if(!data.pageType){
                            $('#visitEacthsNone').show();
                            $('#visitEacths').hide();
                            $('#visitTimeEnd').val(data.portrait.endTime);
                            $('#visitTimeStart').val(data.portrait.startTime);
                            $('#visitNum').text(`0(个)`);
                        }else{
                            setOtherData(type,data)
                        }
                        break;
                }
                defaultParams.startTime = '';
                defaultParams.endTime = '';
            } else {
                console.log('机构订单图表数据异常')
            }
        }
    });
}
// 设置订单数据
const  setOrderData = function (type,data) {
    const orderMap = {
        0:{ // 订单
            fn:function () {
                $('.eachts-total').show();
                $('#orderEacths').show();
                $('#orderEacthsNone').hide();
                $('#orderTimeEnd').val(data.order.endTime);
                $('#orderTimeStart').val(data.order.startTime);
                $('#orderTotalNum').text(`${data.order.orderTotalNum}个`);
                $('#orderScopeNum').text(`￥${data.portrait.orderScopeTotalFee}  (${data.portrait.orderScopeNum}个)`);
            },
            id:'orderEacths',
            series:{
                name:'订单总量',
                color:['#3aa0ff','#36cbcb','#fad337','#4dcb73','#f2637b','#975fe4'],
                seriesData:data.order.orderList
            },
        }
    }
    getOrderEacths(orderMap[type].fn,orderMap[type].id,orderMap[type].series);
}
// 基于准备好的dom，初始化echarts实例
const getOrderEacths = function (handleFn,id,data) {
    // 基于准备好的dom，初始化echarts实例
    handleFn();
    const myChart = echarts.init(document.getElementById(id));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: '2%',
            top:'20%',
            textStyle: {
                fontSize: 14,
                color:'#FFFFFF'
            },
        },
        color:data.color,
        series: [
            {
                name: data.name,
                type: 'pie',
                radius: '55%',
                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.seriesData
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;//移动适配
};
// 其他三个图表
const setOtherData = function (type,data) {
    const dataMap = {
        1:{// 关键词
            fn:function () {
                $('#keyWordsEacths').show();
                $('#keyWordsEacthsNone').hide();
                $('#keyWordsTimeEnd').val(data.behavior.endTime);
                $('#keyWordsTimeStart').val(data.behavior.startTime);
                $('#keyWordsScopeNum').text(`${data.portrait.keyWordsScopeNum}(个)`);
            },
            id:'keyWordsEacths',
            series:{
                name:'搜索关键词',
                yAxisData:data.behavior.name,
                seriesData:data.behavior.value,
                color:new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: "#B0C4DE" // 0% 处的颜色
                }, {
                    offset: 0.6,
                    color: "#9370DB" // 60% 处的颜色
                }, {
                    offset: 1,
                    color: "#7B68EE" // 100% 处的颜色
                }], false)
            },
        },
        2:{// 咨询记录
            fn:function () {
                $('#serviceEacths').show();
                $('#serviceEacthsNone').hide();
                $('#serviceTimeEnd').val(data.remarks.endTime);
                $('#serviceTimeStart').val(data.remarks.startTime);
                $('#remarksScopeNum').text(`${data.portrait.remarksScopeNum}(个)`);
            },
            id:'serviceEacths',
            series:{
                name:'咨询记录',
                yAxisData:data.remarks.name,
                seriesData:data.remarks.value,
                color:new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: "#AFEEEE" // 0% 处的颜色
                }, {
                    offset: 0.6,
                    color: "#48D1CC" // 60% 处的颜色
                }, {
                    offset: 1,
                    color: "#20B2AA" // 100% 处的颜色
                }], false)
            },
        },
        3:{// 访问记录
            fn:function () {
                $('#visitEacths').show();
                $('#visitEacthsNone').hide();
                $('#visitTimeEnd').val(data.pageType.endTime);
                $('#visitTimeStart').val(data.pageType.startTime);
                $('#visitNum').text(`${data.portrait.visitNum}(个)`);
            },
            id:'visitEacths',
            series:{
                name:'访问记录',
                yAxisData:data.pageType.name,
                seriesData:data.pageType.value,
                color:new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: "#B0C4DE" // 0% 处的颜色
                }, {
                    offset: 0.6,
                    color: "#87CEFA" // 60% 处的颜色
                }, {
                    offset: 1,
                    color: "#1E90FF" // 100% 处的颜色
                }], false)
            },
        }
    }
    getOtherEacths(dataMap[type].fn,dataMap[type].id,dataMap[type].series);
}
// 其他三个图表
const getOtherEacths = function (handleFn,id,data) {
    // 基于准备好的dom，初始化echarts实例
    handleFn();
    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',
            splitLine:{
                show: true,
                lineStyle:{
                    opacity:0.2,
                    color:'#DCDCDC',
                }
            },
            boundaryGap: [0, 0.01],
            axisLabel:{
                show: true,
                textStyle:{
                    color: '#DCDCDC',  //更改坐标轴文字颜色
                    fontSize : 12,      //更改坐标轴文字大小
                }
            },
            axisTick: {//轴网格,在xAxis或yAxis根下
                lineStyle:{
                    width:1,
                    color:'#DCDCDC',
                    type:'solid'
                }
            }
        },
        yAxis: {
            type: 'category',
            splitLine:{
                show: false,
            },
            axisLabel:{
                show: true,
                textStyle:{
                    color: '#FFFFFF',  //更改坐标轴文字颜色
                    fontSize : 12      //更改坐标轴文字大小
                }
            },
            axisTick: {//轴网格,在xAxis或yAxis根下
                show:false,
                lineStyle:{
                    width:1,
                    color:'#DCDCDC',
                    type:'solid'
                }
            },
            data: data.yAxisData
        },
        series: [
            {
                type: 'bar',
                name: data.name,
                data: data.seriesData,
                itemStyle:{
                    fontSize: 14,
                    color:data.color
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;//移动适配
};