// 各地区名称 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 += ''+region[i]+''; // } // $('#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 += ''; str += '' + list[i]['region'] + ''; str += '' + list[i]['date'] + ''; str += '' + list[i]['count'] + ''; str += ''; } $('#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 += ''; str += '' + list[i]['region'] + ''; str += ''+ list[i]['date'] +''; str += ''+ list[i]['count'] +''; str += ''; } $('#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 += ''+region[o]+''; // }else{ // str += ''+region[o]+''; // } // } // $('#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);