jili2/public/static/data/js/total.js

// 各地区名称
var region = [];
province.forEach(function(item){
    region.push(item.NAME);
});

// 各地区用户人数
var users = [];
province.forEach(function(item){
    users.push(item.usercount);
});

// 巡更次数
var patrolCount = province.map(item => ({
        day: item.patrolx,
        '巡查次数': item.patroly,
    })
);

// 各地区近一周订单量
var ordersWeek = [];
province.forEach(function(item){
    ordersWeek.push(item.ordertotalweek);
});

// 各地区近一月订单量
var ordersMonth = [];
province.forEach(function(item){
    ordersMonth.push(item.ordertotalmonth);
});

// 防患数据
var prevent = [];
province.forEach(function(item){
    prevent.push(item.yinhuaorder);
});

// 投诉数据
var complain = [];
province.forEach(function(item){
    complain.push(item.complaincount);
});

// 已转任务比率
var preventionRatio = [];
province.forEach(function(item){
    preventionRatio.push(parseInt(item.yinhuabl * 100));
});

// 总任务量
var taskTotal = [];
province.forEach(function(item){
    taskTotal.push(item.todototalcount);
});

// 已转任务比率
var taskFinishRatio = [];
province.forEach(function(item){
    taskFinishRatio.push(item.todobl * 100);
});

// 设备维护次数
var deviceCount = [];
province.forEach(function(item){
    deviceCount.push(item.devicerecordcount);
});

// 保洁
var cleaningRatio = [];
province.forEach(function(item){
    cleaningRatio.push(item.userbl3 * 100);
});

// 保安
var securityRatio = [];
province.forEach(function(item){
    securityRatio.push(item.userbl4 * 100);
});

// 维修
var repairRatio = [];
province.forEach(function(item){
    repairRatio.push(item.userbl2 * 100);
});

// 运送
var transportRatio = [];
province.forEach(function(item){
    transportRatio.push(item.userbl1 * 100);
});

// 安保数据统计（列表）
var preventDayList = province.map(item => ({
        region: item.NAME,
        date: item.daytext,
        count: item.yinhuanday
    })
);

var preventWeekList = province.map(item => ({
        region: item.NAME,
        date: item.weektext,
        count: item.yinhuanweek
    })
);

var preventMonthList = province.map(item => ({
        region: item.NAME,
        date: item.monthtext,
        count: item.yinhuanmonth
    })
);

// 任务数据统计（列表）
var taskFinishDayList = province.map(item => ({
        region: item.NAME,
        date: item.daytext,
        count: item.todofinishday
    })
);

var taskFinishWeekList = province.map(item => ({
        region: item.NAME,
        date: item.weektext,
        count: item.todofinishweek
    })
);
var taskFinishMonthList = province.map(item => ({
        region: item.NAME,
        date: item.monthtext,
        count: item.todofinishmonth
    })
);

var regionsList = [];
var regionsListIndex = 0;

//初始化
for (var i=0;i<5;i++){
    if(regionsListIndex >= region.length){
        regionsListIndex = 0;
    }
    regionsList.push(region[regionsListIndex]);
    regionsListIndex++;
}

function personnel() {
    if (province.length > 0) {
        var personnelChart = echarts.init(document.getElementById("personnel"));
        personnelOption = null;
        personnelOption = {
            color: ['#50e2cb'],
            legend: {
                data:['用户人数'],
                textStyle: { color: "#FFFDFE" },
                // icon: "circle",
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : region,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color:'#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color:'#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',
                        }
                    }
                }
            ],
            series : [
                {
                    name:'用户人数',
                    type:'bar',
                    barMaxWidth: 30,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        }
                    },
                    data: users
                }
            ]
        };
        if (personnelOption && typeof personnelOption === "object") {
            personnelChart.setOption(personnelOption, true);
        }
    }
}

function orders(type) {
    if (province.length > 0) {
        var list = type === 1 ? ordersWeek : ordersMonth;

        var ordersChart = echarts.init(document.getElementById("orders"));
        ordersOption = null;
        ordersOption = {
            color:['#50e2cb','#137bc4'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    color:'#fff',
                }
            },
            yAxis: {
                type: 'category',
                data : region,
                axisLabel: {
                    color:'#fff',
                }
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    barMaxWidth: 30,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            color: '#fff'
                        }
                    },
                    data: list
                }
            ]
        };
        if (ordersOption && typeof ordersOption === "object") {
            ordersChart.setOption(ordersOption, true);
        }
    }
    $('.orders-selects-total').removeClass('active');
    $('#orders'+type).addClass('active');
}

// 各地安保图表
function prevention() {
    if (province.length > 0) {
        var preventionChart = echarts.init(document.getElementById("prevention"));
        preventionOption = null;
        preventionOption = {
            color:['#50e2cb','#137bc4','#eac304'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['防患数据','投诉意见数据','已转任务比率'],
                textStyle: { color: "#FFFDFE" },
                top: 10
            },
            xAxis: [
                {
                    type: 'category',
                    data : region,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'#fff',
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        color:'#fff',
                    }
                },
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %',
                        color:'#fff',
                    }
                }
            ],
            series: [
                {
                    name:'防患数据',
                    type:'bar',
                    data: prevent
                },
                {
                    name:'投诉意见数据',
                    type:'bar',
                    data: complain
                },
                {
                    name:'已转任务比率',
                    type:'line',
                    yAxisIndex: 1,
                    data: preventionRatio
                }
            ]
        };

        if (preventionOption && typeof preventionOption === "object") {
            preventionChart.setOption(preventionOption, true);
        }
    }
}

// 任务完成比率
function taskRatio() {
    if (province.length > 0) {
        var assignmentsChart = echarts.init(document.getElementById("assignments"));
        assignmentsOption = null;
        assignmentsOption = {
            color:['#50e2cb','#137bc4'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['总任务量','完成任务比率'],
                textStyle: { color: "#FFFDFE" },
                top: 10
            },
            xAxis: [
                {
                    type: 'category',
                    data : region,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'#fff',
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        color:'#fff',
                    }
                },
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %',
                        color:'#fff',
                    }
                }
            ],
            series: [
                {
                    name:'总任务量',
                    type:'bar',
                    barMaxWidth: 30,
                    data: taskTotal
                },
                {
                    name:'完成任务比率',
                    type:'line',
                    yAxisIndex: 1,
                    data: taskFinishRatio
                }
            ]
        };
        if (assignmentsOption && typeof assignmentsOption === "object") {
            assignmentsChart.setOption(assignmentsOption, true);
        }
    }
}

// 员工学习
function learning(i) {
    if (province.length > 0) {
        // var str = '';
        // for (var i in region){
        //     str += '<span class="organization-title">'+region[i]+'</span>';
        // }
        // $('#leaning-title').html(str);

        $('.region').removeClass('active');
        $('#region'+i).addClass('active');

        var cleaning = echarts.init(document.getElementById('cleaning'));
        cleaningOption = {
            color: ['#2b5e8e', '#40edfe'],
            title: {
                text: '保洁',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                y: 'bottom',
                x: 'center',

            },
            series: [{
                name: '保洁',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        textStyle: {
                            fontSize: 18,
                            color: '#eac304',
                        },
                        formatter: '{c}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: parseInt(100 - cleaningRatio[i]),
                        color: '#40edfe',
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    },
                    {
                        value: parseInt(cleaningRatio[i]),
                        color: '#2b5e8e',
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: 18,
                                    color: '#eac304',
                                },
                                formatter: '{c}%'
                            }
                        }
                    }
                ]
            }]
        };
        cleaning.setOption(cleaningOption);

        // 保安
        var security = echarts.init(document.getElementById('security'));
        securityOption = {
            color: ['#2b5e8e', '#40edfe'],
            title: {
                text: '保安',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                y: 'bottom',
                x: 'center',

            },
            series: [{
                name: '保安',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: 18,
                            color: '#eac304',
                        },
                        formatter: '{c}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: parseInt(100 - securityRatio[i]),
                    color: '#40edfe',
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }, {
                    value: parseInt(securityRatio[i]),
                    color: '#2b5e8e',
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: 18,
                                color: '#eac304',
                            },
                            formatter: '{c}%'
                        }
                    }
                },

                ]
            }]
        };
        security.setOption(securityOption);

        // 维修
        var repair = echarts.init(document.getElementById('repair'));
        repairOption = {
            color: ['#2b5e8e', '#40edfe'],
            title: {
                text: '维修',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                y: 'bottom',
                x: 'center',

            },
            series: [{
                name: '维修',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: 18,
                            color: '#eac304',
                        },
                        formatter: '{c}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: parseInt(100 - repairRatio[i]),
                    color: '#40edfe',
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }, {
                    value: parseInt(repairRatio[i]),
                    color: '#2b5e8e',
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: 18,
                                color: '#eac304',
                            },
                            formatter: '{c}%'
                        }
                    }
                }]
            }]
        };
        repair.setOption(repairOption);

        // 运送
        var transport = echarts.init(document.getElementById('transport'));
        transportOption = {
            color: ['#2b5e8e', '#40edfe'],
            title: {
                text: '运送',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                y: 'bottom',
                x: 'center',

            },
            series: [{
                name: '运送',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: 18,
                            color: '#eac304',
                        },
                        formatter: '{c}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: parseInt(100 - transportRatio[i]),
                    color: '#40edfe',
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }, {
                    value: parseInt(transportRatio[i]),
                    color: '#2b5e8e',
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: 18,
                                color: '#eac304',
                            },
                            formatter: '{c}%'
                        }
                    }
                },

                ]
            }]
        };
        transport.setOption(transportOption);
    }
}

// 各地区设备维护
function deviceRecord() {
    if (province.length > 0) {
        var deviceChart = echarts.init(document.getElementById("device"));
        deviceOption = null;
        deviceOption = {
            color: ['#50e2cb'],
            legend: {
                data:['维护次数'],
                textStyle: { color: "#FFFDFE" },
                // icon: "circle",
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : region,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color:'#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color:'#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',
                        }
                    }
                }
            ],
            series : [
                {
                    name:'维护次数',
                    type:'bar',
                    barMaxWidth: 30,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        }
                    },
                    data: deviceCount
                }
            ]
        };
        if (deviceOption && typeof deviceOption === "object") {
            deviceChart.setOption(deviceOption, true);
        }
    }
}

// 各地区任务列表
function taskList(type) {
    if (province.length > 0) {
        if (province.length > 0) {
            var list;
            if (type == 1) {
                list = taskFinishDayList;
            } else if (type == 2) {
                list = taskFinishWeekList;
            } else {
                list = taskFinishMonthList;
            }

            let str = '';
            for (var i in list) {
                str += '<tr>';
                str += '<td>' + list[i]['region'] + '</td>';
                str += '<td>' + list[i]['date'] + '</td>';
                str += '<td>' + list[i]['count'] + '</td>';
                str += '</tr>';
            }
            $('#task').html(str);
        }

        $('.task').removeClass('active');
        $('#tasks' + type).addClass('active');
    }
}

// 各地区隐患列表
function preventionList(type) {
    if (province.length > 0) {
        var list;
        if (type == 1) {
            list = preventDayList;
        } else if (type == 2) {
            list = preventWeekList;
        } else {
            list = preventMonthList;
        }
        let str = '';
        for (var i in list){
            str += '<tr>';
            str += '<td>' + list[i]['region'] + '</td>';
            str += '<td>'+ list[i]['date'] +'</td>';
            str += '<td>'+ list[i]['count'] +'</td>';
            str += '</tr>';
        }
        $('#hiddenDanger').html(str);
    }

    $('.date').removeClass('active');
    $('#date'+type).addClass('active');
}

function patrol(i) {
    if (province.length > 0) {
        // var str = '';
        // for (var o in region){
        //     if(o == 0){
        //         str += '<span class="organization-title regions active">'+region[o]+'</span>';
        //     }else{
        //         str += '<span class="organization-title regions">'+region[o]+'</span>';
        //     }
        // }
        // $('#patrol-title').html(str);

        var patrolChart = echarts.init(document.getElementById("patrol"));
        patrolOption = null;
        patrolOption = {
            color: ['#50e2cb', '#137bc4'],
            legend: {
                data: ['巡查次数'],
                textStyle: {color: "#FFFDFE"},
                // icon: "circle",
            },
            tooltip: {},
            dataset: {
                dimensions: ['day', '巡查次数'],
                source: patrolCount[i]
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#fff',
                }
            },
            yAxis: {
                axisLabel: {
                    color: '#fff',
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 30,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        }
                    },
                }
            ]
        };
        if (patrolOption && typeof patrolOption === "object") {
            patrolChart.setOption(patrolOption, true);
        }
        $('.regions').removeClass('active');
        $('#regions'+i).addClass('active');

        // regionsList.shift();
        // if(regionsListIndex >= region.length){
        //     regionsListIndex = 0;
        // }
        // regionsList.push(region[regionsListIndex]);
        // regionsListIndex++;
    }
}

$(function(){
    var text=$("#task:first");
    var clear;
    text.hover(function(){
        clearInterval(clear);
    },function(){
        clear=setInterval(function(){
            var field=text.find("tr:first");
            var high=field.height();
            text.animate({ marginTop:-high+"px"},600,function(){
                field.css("marginTop",0).appendTo(text);
                text.css("marginTop",0);
            })
        },2000)//滚动间隔时间
    }).trigger("mouseleave");//自动滚动
});

$(function(){
    var text=$("#hiddenDanger:first");
    var clear;
    text.hover(function(){
        clearInterval(clear);
    },function(){
        clear=setInterval(function(){
            var field=text.find("tr:first");
            var high=field.height();
            text.animate({ marginTop:-high+"px"},600,function(){
                field.css("marginTop",0).appendTo(text);
                text.css("marginTop",0);
            })
        },2000)//滚动间隔时间
    }).trigger("mouseleave");//自动滚动
});

personnel();
orders(1);
prevention();
taskRatio();
learning(0);
deviceRecord();
taskList(1);
preventionList(1);
patrol(0);

for (var i=1; i<4; i++) {
    (function (i) {
        setTimeout(() => taskList(i), 10000*i);
        setTimeout(() => preventionList(i), 10000*i);
    })(i)
}
setInterval(function(){
    for (var i=1; i<4; i++) {
        (function (i) {
            setTimeout(() => taskList(i), 10000*i);
            setTimeout(() => preventionList(i), 10000*i);
        })(i)
    }
},30000);

for (var i=1; i<3; i++) {
    (function (i) {
        setTimeout(() => orders(i), 5000*i);
    })(i)
}
setInterval(function(){
    for (var i=1; i<3; i++) {
        (function (i) {
            setTimeout(() => orders(i), 5000*i);
        })(i)
    }
},10000);

var len = region.length;

for (var i = 0; i< len; i++) {
    (function (i) {
        setTimeout(() => learning(i), 5000*i);
        setTimeout(() => patrol(i), 5000*i);
    })(i)
}
setInterval(function(){
    for (var i = 0; i < len; i++) {
        (function (i) {
            setTimeout(() => learning(i), 5000*i);
            setTimeout(() => patrol(i), 5000*i);
        })(i)
    }
},5000 * len);


// setInterval(function(){
//     patrol();
// },5000);