dashboard.js 6.6 KB
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Datatable, Table, Echarts) {

    var Controller = {
        index: function () {
            var corpChart = Echarts.init(document.getElementById('corp-chart'), 'walden');
            var corpOption = {
                title: {
                    text: '企业数据分布',
                    subtext: '企业客户、成员、群组分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Config.corp.name
                },
                series: [
                    {
                        name: '客户',
                        type: 'pie',
                        radius: "60%",
                        center: ['20%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: Config.corp.contacts,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '成员',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: Config.corp.follow,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '客户群',
                        type: 'pie',
                        radius: '60%',
                        center: ['80%', '60%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: Config.corp.chats,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            corpChart.setOption(corpOption);
            $(window).resize(corpChart.resize);


            var bucket = "week";
            var contactType = "new_contact_cnt";
            var messageType = "chat_cnt";

            var setCount = function (bucket) {
                $.each(Config.behavior[bucket].count, function(key, val) {
                    $("#count_"+key).html(val);
                });
            };

            var setOption = function (bucket, type) {
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: Config.behavior[bucket].x
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1
                    },
                    series: [{
                        data: Config.behavior[bucket][type],
                        type: 'line',
                        smooth: true,
                        areaStyle: {}
                    }]
                };

                var chart = Echarts.init(document.getElementById(type), 'walden');
                chart.setOption(option);

                $(window).resize(chart.resize);
            };

            var initialize = function () {
                setCount(bucket);
                setOption(bucket, contactType);
                setOption(bucket, messageType);
                $(window).resize(corpChart.resize);
            }

            initialize();

            $(document).on("click", "#sync", function () {
                Fast.api.ajax({
                    url: "qywx/dashboard/sync",
                    type: 'post',
                    data: {},
                    dataType: 'json',
                    success: function (ret) {
                        layer.msg("同步成功,页面将重新加载...");
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                });
            });

            $(document).on("click", "#bucket li a[data-toggle=\"tab\"]", function () {
                bucket = $("#bucket li.active a").data("type");
                setCount(bucket);
                setOption(bucket, contactType);
                setOption(bucket, messageType);
            });

            $(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
                var that = this;
                var id = $(that).attr("href");
                var type = id.substr(1);

                contactType = $("#contact .chart.active").attr("id");
                messageType = $("#message .chart.active").attr("id");

                setOption(bucket, type);

                setTimeout(function () {
                    var chart = Echarts.getInstanceByDom($(id)[0]);
                    $(window).resize(chart.resize);
                }, 0);
            });

            $(document).on("click", ".btn-refresh", function () {
                var that = this;
                $(that).find(".fa").addClass("fa-spin");
                setTimeout(function () {
                    initialize()
                    $(window).resize(corpChart.resize);
                    $(that).find(".fa").removeClass("fa-spin");
                }, 1000);
            });
        }
    };

    return Controller;
});