// JavaScript Documentadmin管理员组文章数量:1629921
// JavaScript Document
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-20px"
},
500,
function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
});
}
$(function(){
var utool={
// baseUrl: baseUrlAjax + "/sys/form",
baseUrl: baseUrlAjax,
ajaxGet:function (url,type,dataType,data,successFn,errFn){
$.ajax({
url:utool.baseUrl+url,
type:type,
data:data,
dataType:dataType,
success:function (result){
successFn && successFn(result)
},
error:function (result){
errFn && errFn(result)
}
})
}
};
var date = new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
month = (month<10 ? "0"+month:month);
/*设置当前日期*/
var mydate = (year.toString()+ '-' +month.toString());
//添加forEach方法
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
//右侧菜单数据
var areaCoordsData = [
{address:'黄浦区',isShow:false,x:121.408675,y:31.255194},
{address:'徐汇区',isShow:false,x:121.408675,y:31.255194},
{address:'长宁区',isShow:false,x:121.408675,y:31.255194},
{address:'静安区',isShow:false,x:121.408675,y:31.255194},
{address:'普陀区',isShow:false,x:121.408675,y:31.255194},
{address:'虹口区',isShow:false,x:121.408675,y:31.255194},
{address:'杨浦区',isShow:false,x:121.435053,y:31.227095},
{address:'闵行区',isShow:false,x:121.435053,y:31.227095},
{address:'宝山区',isShow:false,x:121.435053,y:31.227095},
{address:'嘉定区',isShow:false,x:121.435053,y:31.227095},
{address:'浦东新区',isShow:false,x:121.435053,y:31.227095},
{address:'金山区',isShow:false,x:121.435053,y:31.227095},
{address:'松江区',isShow:false,x:121.435053,y:31.227095},
{address:'青浦区',isShow:false,x:121.435053,y:31.227095},
{address:'奉贤区',isShow:false,x:121.435053,y:31.227095}
];
var addressData ;
/*地圖設置*/
$(document).ready(function(){
var array1=new Array();
array1[0]=0;array1[1]=0;array1[2]=0;array1[3]=1;
var array2=new Array();
array2[0]=0;array2[1]=0;array2[2]=0;array2[3]=0;
var map = new BMap.Map("allmap");
map.centerAndZoom("上海",12); // 初始化地图,用城市名设置地图中心点
//添加地图类型控件
map.removeControl(new BMap.OverviewMapControl());
map.removeControl(new BMap.ScaleControl());
map.removeControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("上海");
map.enableScrollWheelZoom(true);
//去掉专业人数信息
map.addEventListener("click",function(){
$('.mapFix li').find('ul').remove();
});
var marker2 = null;
getData2();
window.setInterval(getData2, 1000*60*2);
var icount=1;//是否第一次进入
function getData2(){
$.ajax({
type:'post',
url: path+"/wo/woLocation/getSuojieStation",
data:"",
dataType:'json',
contentType:"application/json",
success:function(data){
addressData=data;
console.log("addressData =" +addressData);
getMapZDinfo(data);
/* addressData[0]=false;
addressData[1]=false;
addressData[2]=false;
addressData[3]=true;*/
if(icount==1){
setAddressIcon(addressData);
}else{
var flag=false;
if(array2.length>0){
for (var i=0;i<array2.length;i++) {
if(array2[i]==1){
flag=true;
break;
}
}
}
if(array1.length>0){
map.clearOverlays(marker2);
for (var i=0;i<array1.length;i++){
if(array1[i]!=undefined&&array1[i]!=0){
if(i==3){
addressData[0].isOff = false;
addressData[1].isOff = false;
addressData[2].isOff = false;
addressData[3].isOff = true;
setAddressIcon(addressData);
if(flag){
setPop(addressData);
}
}else{
addressData[3].isOff = true;
setAddressIcon(addressData);
addressData[3].isOff = false;
addressData[i].isOff = true;
setAddressIcon(addressData);
if(flag){
setPop(addressData);
}
break;
}
}
}
}
}
icount++;
}
});
/*setAddressIcon(addressData);*/
getRightList(areaCoordsData);
//添加工程师||站点详细信息
function setAddressIcon(data){
data.forEach(function(item,index){
if(item.isOff){
item.coord.forEach(function(item1,index1){
var pt = new BMap.Point(item1.y, item1.x);
//TODO 变量名引入
var urlImg = baseUrlLink +'/images/';
var myIcon = new BMap.Icon(urlImg + item.name +".png", new BMap.Size(36,36)); //定义自己的标注
marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var allOverlay = map.getOverlays();
marker2.addEventListener('click',function(e){
//console.info(allOverlay.length,index1,index);
var titleText;
var content;
var opt;
if(index == 0||index == 1||index == 2){
titleText = "工程师信息";
content = '<p>\n' +
' <span class="name">姓名：<i>'+item1.name+'</i></span>\n' +
' <span class="major">专业：<i>'+item1.major+'</i></span>\n' +
' </p>\n' +
' <p>\n' +
' 电话：\n' +
' <span>'+item1.tel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 邮箱：\n' +
' <span>'+item1.email+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 工单总量：\n' +
' <span><i>'+item1.workAllNum+'</i> ( 巡检 <i>'+item1.pollingWork+'</i>，维护 <i>'+item1.assertWork+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 已完成数量：\n' +
' <span><i>'+item1pleteNum+'</i> ( 巡检 <i>'+item1.pollingComplete+'</i>，维护 <i>'+item1.assertComplete+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 地理位置：\n' +
' <span>'+item1.x+"/"+item1.y+'</span>\n' +
' </p>';
opts = {
width : 280, // 信息窗口宽度
height: 227, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText
};
}else if(index == 3){
titleText = "项目信息";
content = '<p>\n' +
' 项目名称：\n' +
' <span>'+item1.siteName+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目地址：\n' +
' <span>'+item1.siteAddress+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 所属客户：\n' +
' <span>'+item1.customer+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目负责人：\n' +
' <span>'+item1.siteLeader+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人电话：\n' +
' <span>'+item1.leaderTel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人邮箱：\n' +
' <span>'+item1.leaderEmail+'</span>\n' +
' </p>\n';
if(item1.devices !== []){
content += "<p class = 'table-responsive1' ><table class = 'table table-bordered table-width' style='width: 396px'>" +
"<tr><td title = '名称' >名称</td><td title = '类型'>类型</td><td title = '所属客户'>所属客户</td><td title = '固定资产编号'>固定资产编号</td></tr>";
item1.devices.forEach(function(item3,index3){
content += ' <tr>\n' +
' <td title="'+ item3.deviceName +'">'+item3.deviceName +'</td>\n' +
' <td title="'+ item3.type +'">'+item3.type+'</td>\n' +
' <td title="'+ item3.clientName +'">'+item3.clientName+'</td>\n' +
' <td title="'+ item3.assetcode +'">'+item3.assetcode+'</td>\n' +
' </tr>';
})
content += "</table></p>";
}
opts = {
width : 400, // 信息窗口宽度
height: 320, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText,
overflow : scroll
};
}
/*var opts = {
width : 280, // 信息窗口宽度
height: 320, // 信息窗口高度
/!*maxHeight:600,
minWidth:500,*!/
title : titleText,
overflow : scroll
};*/
var point1=new BMap.Point(item1.y,item1.x);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point1);//打开信息窗口
$('.table-width tr td').each(function(){
var _title = $(this).text()
$(this).attr("title", _title);
$(this).css("cursor", 'pointer');
})
//$('p.table-responsive1').parent().parent().css({"overflow-y":"scroll"});
//$('.table-width tr td').css({"width":"112px","overflow":"hidden","text-overflow":"hidden","white-space":"nowrap"});
})
})
}
});
}
function setPop(data){
data.forEach(function(item,index){
if(item.isOff){
var cardpage = "<ul class = 'cardpage'> ";
item.major.forEach(function(item1,index1){
cardpage += "<li class='card-list' majorID="+ item1.id +"><b>"+item1.name+"</b><b> "+item1.value+"</b></li>"
})
cardpage +="</ul>";
$(".mapFix li").find($('ul')).remove();
$(".mapFix li").eq(index).append(cardpage);
$(".mapFix li ").eq(index).css({"position":"relative"});
$(".mapFix li ").eq(index).find($('ul')).css({
"position": "absolute",
"left": "182px",
"width": "170px",
"top": "0px",
"background": "rgba(255,255,255,.8)",
"max-height":"400px",
"overflow-y":"scroll"
});
}
});
}
/*生成对应专业的图标*/
function setMajor(data,majorid){
data.forEach(function(item,index){
if(item.isOff){
if(index!=3){
addressData[3].isOff=true;
setAddressIcon(addressData);
}
item.coord.forEach(function(item1,index1){
if(item1.majorId == majorid){
var pt = new BMap.Point(item1.y, item1.x);
//TODO 变量名引入
var urlImg = baseUrlLink +'/images/';
var myIcon = new BMap.Icon(urlImg + item.name +".png", new BMap.Size(36,36)); //定义自己的标注
marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var allOverlay = map.getOverlays();
marker2.addEventListener('click',function(e){
//console.info(allOverlay.length,index1,index);
var titleText;
var content;
var opt;
if(index == 0||index == 1||index == 2){
titleText = "工程师信息";
content = '<p>\n' +
' <span class="name">姓名：<i>'+item1.name+'</i></span>\n' +
' <span class="major">专业：<i>'+item1.major+'</i></span>\n' +
' </p>\n' +
' <p>\n' +
' 电话：\n' +
' <span>'+item1.tel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 邮箱：\n' +
' <span>'+item1.email+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 工单总量：\n' +
' <span><i>'+item1.workAllNum+'</i> ( 巡检 <i>'+item1.pollingWork+'</i>，维护 <i>'+item1.assertWork+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 已完成数量：\n' +
' <span><i>'+item1pleteNum+'</i> ( 巡检 <i>'+item1.pollingComplete+'</i>，维护 <i>'+item1.assertComplete+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 地理位置：\n' +
' <span>'+item1.addressArea+'</span>\n' +
' </p>';
opts = {
width : 280, // 信息窗口宽度
height: 227, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText
};
}else {
titleText = "项目信息";
content = '<p>\n' +
' 项目名称：\n' +
' <span>' + item1.siteName + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目地址：\n' +
' <span>' + item1.siteAddress + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 所属客户：\n' +
' <span>' + item1.customer + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目负责人：\n' +
' <span>' + item1.siteLeader + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人电话：\n' +
' <span>' + item1.leaderTel + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人邮箱：\n' +
' <span>' + item1.leaderEmail + '</span>\n' +
' </p>\n';
if (item1.devices !== []) {
content += "<p class = 'table-responsive1' ><table class = 'table table-bordered table-width' style='width: 396px'>" +
"<tr><td title = '名称' >名称</td><td title = '类型'>类型</td><td title = '所属客户'>所属客户</td><td title = '固定资产编号'>固定资产编号</td></tr>";
item1.devices.forEach(function (item3, index3) {
content += ' <tr>\n' +
' <td title="'+ item3.deviceName +'">'+item3.deviceName +'</td>\n' +
' <td title="'+ item3.type +'">'+item3.type+'</td>\n' +
' <td title="'+ item3.clientName +'">'+item3.clientName+'</td>\n' +
' <td title="'+ item3.assetcode +'">'+item3.assetcode+'</td>\n' +
' </tr>';
})
content += "</table></p>";
}
opts = {
width: 400, // 信息窗口宽度
height: 320, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title: titleText,
overflow: scroll
};
}
/*var opts = {
width : 280, // 信息窗口宽度
height: 320, // 信息窗口高度
/!*maxHeight:600,
minWidth:500,*!/
title : titleText,
overflow : scroll
};*/
var point1=new BMap.Point(item1.y,item1.x);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point1);//打开信息窗口
$('.table-width tr td').each(function(){
var _title = $(this).text()
$(this).attr("title", _title);
$(this).css("cursor", 'pointer');
})
/* $('p.table-responsive1').parent().parent().css({"overflow-y":"scroll"});
$('.table-width tr td').css({"width":"112px","overflow":"hidden","text-overflow":"hidden","white-space":"nowrap"});*/
})
}
})
}
});
}
//生成地图左上角信息
function getMapZDinfo(data){
$('.mapFix').empty();
data.forEach(function(item){
var $li = $('<li></li>');
$li.addClass('clearFix');
$li.addClass(item.name);
var $span1 = $('<span></span>');
$span1.addClass('mapFix-con');
var $span2 = $('<span></span>');
$span2.html(item.state).addClass('mapFix-text');
var $span3 = $('<span></span>');
var num = item.coord.length;
$span3.html(num).addClass('mapFix-num');
$li.append($span1);
$li.append($span2);
$li.append($span3);
$('.mapFix').append($li);
$('.mapFix li').addClass('isClick');
})
}
map.clearOverlays(marker2);
/*人员状态点击事件*/
$('.mapFix').on("click",'li.clearFix',function (e) {
var _index = $(this).index();
for (var i=0;i<array1.length;i++){
array1[i]=0;
}
array1[_index]=1;
array1[3]=1;
map.clearOverlays(marker2);
/* if(saveProject%2!=0){
addressData[3].isOff = true;
setAddressIcon(addressData);
}*/
addressData.forEach(function(item1,index1){
item1.isOff = false;
});
if(_index!=3&&array1[3]!=0){
addressData[3].isOff=true;
}
addressData[_index].isOff = !addressData[_index].isOff;
setAddressIcon(addressData);
if(_index==3){
setPop(addressData);
}else{
addressData[3].isOff=false;
setPop(addressData);
}
$('.mapFix li').addClass('isClick');
if($(this).hasClass('isClick')){
$(this).removeClass('isClick');
}
});
$('.mapFix').on("click",'li.card-list',function (event) {
var _index = $(this).index();
event.stopPropagation();
event.preventDefault();
map.clearOverlays(marker2);
var myMajor = $(this).attr('majorid');
setMajor(addressData,myMajor);
})
// $('.mapFix').on('click',$('.mapFix li'),function(){
/* $('.mapFix li').addEventListener('click',function () {
var _index = $(this).index();
map.clearOverlays(marker2);
addressData.forEach(function(item1,index1){
item1.isOff = false;
});
addressData[_index].isOff = !addressData[_index].isOff;
setAddressIcon(addressData);
$('.mapFix li').addClass('isClick');
if($(this).hasClass('isClick')){
$(this).removeClass('isClick');
$(".mapFix li").find($('ul')).remove();
}
/!*$('.mapFix li').addClass('isClick');
$(this).toggleClass('isClick');*!/
/!*$(".mapFix li").find($('ul')).remove();*!/
});*/
// });
//生成右侧菜单
function getRightList(data){
if(Array.isArray(data)){
for(var i = 0;i< data.length; i++){
var $li = $('<li></li>').attr('index',i);
var $p = $('<p></p>');
$p.html(data[i].address).addClass('text1');
var $span = $('<span></span>');
$span.addClass('afterLine');
$li.append($p);
$li.append($span);
$('#map-list').append($li);
}
}
}
$('#map-list>li').hover(function(){
var _index = $(this).index();
$('#map-list .afterLine').eq(_index).animate({left:'110%'},50);
},
function(){
$('#map-list .afterLine').animate({left:'-100%'},0);
});
$('#rightMask').mouseenter(function(){
$('#map-list').animate({
right:'20px',
opacity:0.8
});
});
$('#map-list').mouseenter(function(){
$('#map-list').show();
})
$('#map-list').mouseleave(function(){
$('#map-list').animate({
right:'-100px',
opacity:0
});
})
//右侧菜单点击
$('#map-list>li').click(function(){
// map.setCenter(new BMap.Point(data[i][x], data[i][y]));
//map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州
var _index = $(this).attr('index');
if(!areaCoordsData[_index].isShow){
map.panTo(new BMap.Point(areaCoordsData[_index].x, areaCoordsData[_index].y));
map.setZoom(15);
areaCoordsData[_index].isShow = true;
}else{
map.panTo(new BMap.Point(121.408675,31.255194));
map.setZoom(12);
areaCoordsData[_index].isShow = false;
}
});
}
});
function getData(){
$.ajax({
type:'post',
url: path+"/wo/woLocation/getSuojieStation",
data:"",
dataType:'json',
contentType:"application/json",
success:function(data){
addressData=data;
console.log("addressData =" +addressData);
getMapZDinfo(data);
}
});
var map = new BMap.Map("allmap");
map.centerAndZoom("上海",12); // 初始化地图,用城市名设置地图中心点
//添加地图类型控件
map.removeControl(new BMap.OverviewMapControl());
map.removeControl(new BMap.ScaleControl());
map.removeControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("上海");
map.enableScrollWheelZoom(true);
//去掉专业人数信息
map.addEventListener("click",function(){
$('.mapFix li').find('ul').remove();
});
var marker2 = null;
/*setAddressIcon(addressData);*/
getRightList(areaCoordsData);
//添加工程师||站点详细信息
function setAddressIcon(data){
data.forEach(function(item,index){
if(item.isOff){
var cardpage = "<ul class = 'cardpage'> ";
item.major.forEach(function(item1,index1){
cardpage += "<li class='card-list' majorID="+ item1.id +"><b>"+item1.name+"</b><b> "+item1.value+"</b></li>"
})
cardpage +="</ul>";
$(".mapFix li").find($('ul')).remove();
$(".mapFix li").eq(index).append(cardpage);
$(".mapFix li ").eq(index).css({"position":"relative"});
$(".mapFix li ").eq(index).find($('ul')).css({
"position": "absolute",
"left": "182px",
"width": "170px",
"top": "0px",
"background": "rgba(255,255,255,.8)",
"max-height":"400px",
"overflow-y":"scroll"
});
item.coord.forEach(function(item1,index1){
var pt = new BMap.Point(item1.y, item1.x);
//TODO 变量名引入
var urlImg = baseUrlLink +'/images/';
var myIcon = new BMap.Icon(urlImg + item.name +".png", new BMap.Size(36,36)); //定义自己的标注
marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var allOverlay = map.getOverlays();
marker2.addEventListener('click',function(e){
//console.info(allOverlay.length,index1,index);
var titleText;
var content;
var opt;
if(index == 0||index == 1||index == 2){
titleText = "工程师信息";
content = '<p>\n' +
' <span class="name">姓名：<i>'+item1.name+'</i></span>\n' +
' <span class="major">专业：<i>'+item1.major+'</i></span>\n' +
' </p>\n' +
' <p>\n' +
' 电话：\n' +
' <span>'+item1.tel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 邮箱：\n' +
' <span>'+item1.email+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 工单总量：\n' +
' <span><i>'+item1.workAllNum+'</i> ( 巡检 <i>'+item1.pollingWork+'</i>，维护 <i>'+item1.assertWork+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 已完成数量：\n' +
' <span><i>'+item1pleteNum+'</i> ( 巡检 <i>'+item1.pollingComplete+'</i>，维护 <i>'+item1.assertComplete+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 地理位置：\n' +
' <span>'+item1.addressArea+'</span>\n' +
' </p>';
opts = {
width : 280, // 信息窗口宽度
height: 227, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText
};
}else if(index == 3){
titleText = "项目信息";
content = '<p>\n' +
' 项目名称：\n' +
' <span>'+item1.siteName+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目地址：\n' +
' <span>'+item1.siteAddress+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 所属客户：\n' +
' <span>'+item1.customer+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目负责人：\n' +
' <span>'+item1.siteLeader+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人电话：\n' +
' <span>'+item1.leaderTel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人邮箱：\n' +
' <span>'+item1.leaderEmail+'</span>\n' +
' </p>\n';
if(item1.devices !== []){
content += "<p class = 'table-responsive1' ><table class = 'table table-bordered table-width' style='width: 396px'>" +
"<tr><td title = '名称' >名称</td><td title = '类型'>类型</td><td title = '所属客户'>所属客户</td><td title = '固定资产编号'>固定资产编号</td></tr>";
item1.devices.forEach(function(item3,index3){
content += ' <tr>\n' +
' <td title="'+ item3.deviceName +'">'+item3.deviceName +'</td>\n' +
' <td title="'+ item3.type +'">'+item3.type+'</td>\n' +
' <td title="'+ item3.clientName +'">'+item3.clientName+'</td>\n' +
' <td title="'+ item3.assetcode +'">'+item3.assetcode+'</td>\n' +
' </tr>';
})
content += "</table></p>";
}
opts = {
width : 400, // 信息窗口宽度
height: 320, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText,
overflow : scroll
};
}
/*var opts = {
width : 280, // 信息窗口宽度
height: 320, // 信息窗口高度
/!*maxHeight:600,
minWidth:500,*!/
title : titleText,
overflow : scroll
};*/
var point1=new BMap.Point(item1.y,item1.x);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point1);//打开信息窗口
$('.table-width tr td').each(function(){
var _title = $(this).text()
$(this).attr("title", _title);
$(this).css("cursor", 'pointer');
})
//$('p.table-responsive1').parent().parent().css({"overflow-y":"scroll"});
//$('.table-width tr td').css({"width":"112px","overflow":"hidden","text-overflow":"hidden","white-space":"nowrap"});
})
})
}
});
}
/*生成对应专业的图标*/
function setMajor(data,majorid){
data.forEach(function(item,index){
if(item.isOff){
item.coord.forEach(function(item1,index1){
if(item1.majorId == majorid){
var pt = new BMap.Point(item1.y, item1.x);
//TODO 变量名引入
var urlImg = baseUrlLink +'/images/';
var myIcon = new BMap.Icon(urlImg + item.name +".png", new BMap.Size(36,36)); //定义自己的标注
marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var allOverlay = map.getOverlays();
marker2.addEventListener('click',function(e){
//console.info(allOverlay.length,index1,index);
var titleText;
var content;
var opt;
if(index == 0||index == 1||index == 2){
titleText = "工程师信息";
content = '<p>\n' +
' <span class="name">姓名：<i>'+item1.name+'</i></span>\n' +
' <span class="major">专业：<i>'+item1.major+'</i></span>\n' +
' </p>\n' +
' <p>\n' +
' 电话：\n' +
' <span>'+item1.tel+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 邮箱：\n' +
' <span>'+item1.email+'</span>\n' +
' </p>\n' +
' <p>\n' +
' 工单总量：\n' +
' <span><i>'+item1.workAllNum+'</i> ( 巡检 <i>'+item1.pollingWork+'</i>，维护 <i>'+item1.assertWork+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 已完成数量：\n' +
' <span><i>'+item1pleteNum+'</i> ( 巡检 <i>'+item1.pollingComplete+'</i>，维护 <i>'+item1.assertComplete+'</i>)</span>\n' +
' </p>\n' +
' <p>\n' +
' 地理位置：\n' +
' <span>'+item1.addressArea+'</span>\n' +
' </p>';
opts = {
width : 280, // 信息窗口宽度
height: 227, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title : titleText
};
}else {
titleText = "项目信息";
content = '<p>\n' +
' 项目名称：\n' +
' <span>' + item1.siteName + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目地址：\n' +
' <span>' + item1.siteAddress + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 所属客户：\n' +
' <span>' + item1.customer + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 项目负责人：\n' +
' <span>' + item1.siteLeader + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人电话：\n' +
' <span>' + item1.leaderTel + '</span>\n' +
' </p>\n' +
' <p>\n' +
' 负责人邮箱：\n' +
' <span>' + item1.leaderEmail + '</span>\n' +
' </p>\n';
if (item1.devices !== []) {
content += "<p class = 'table-responsive1' ><table class = 'table table-bordered table-width' style='width: 396px'>" +
"<tr><td title = '名称' >名称</td><td title = '类型'>类型</td><td title = '所属客户'>所属客户</td><td title = '固定资产编号'>固定资产编号</td></tr>";
item1.devices.forEach(function (item3, index3) {
content += ' <tr>\n' +
' <td title="'+ item3.deviceName +'">'+item3.deviceName +'</td>\n' +
' <td title="'+ item3.type +'">'+item3.type+'</td>\n' +
' <td title="'+ item3.clientName +'">'+item3.clientName+'</td>\n' +
' <td title="'+ item3.assetcode +'">'+item3.assetcode+'</td>\n' +
' </tr>';
})
content += "</table></p>";
}
opts = {
width: 400, // 信息窗口宽度
height: 320, // 信息窗口高度
/*maxHeight:600,
minWidth:500,*/
title: titleText,
overflow: scroll
};
}
/*var opts = {
width : 280, // 信息窗口宽度
height: 320, // 信息窗口高度
/!*maxHeight:600,
minWidth:500,*!/
title : titleText,
overflow : scroll
};*/
var point1=new BMap.Point(item1.y,item1.x);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point1);//打开信息窗口
$('.table-width tr td').each(function(){
var _title = $(this).text()
$(this).attr("title", _title);
$(this).css("cursor", 'pointer');
})
/* $('p.table-responsive1').parent().parent().css({"overflow-y":"scroll"});
$('.table-width tr td').css({"width":"112px","overflow":"hidden","text-overflow":"hidden","white-space":"nowrap"});*/
})
}
})
}
});
}
//生成地图左上角信息
function getMapZDinfo(data){
$('.mapFix').empty();
data.forEach(function(item){
var $li = $('<li></li>');
$li.addClass('clearFix');
$li.addClass(item.name);
var $span1 = $('<span></span>');
$span1.addClass('mapFix-con');
var $span2 = $('<span></span>');
$span2.html(item.state).addClass('mapFix-text');
var $span3 = $('<span></span>');
var num = item.coord.length;
$span3.html(num).addClass('mapFix-num');
$li.append($span1);
$li.append($span2);
$li.append($span3);
$('.mapFix').append($li);
$('.mapFix li').addClass('isClick');
})
}
map.clearOverlays(marker2);
/*人员状态点击事件*/
var saveProject=0;
$('.mapFix').on("click",'li.clearFix',function (e) {
var _index = $(this).index();
if(_index==3){
saveProject=1;
}
map.clearOverlays(marker2);
/* if(saveProject%2!=0){
setAddressIcon(addressData);
addressData[3].isOff = true;
}*/
addressData.forEach(function(item1,index1){
item1.isOff = false;
});
addressData[_index].isOff = !addressData[_index].isOff;
setAddressIcon(addressData);
$('.mapFix li').addClass('isClick');
if($(this).hasClass('isClick')){
$(this).removeClass('isClick');
}
});
$('.mapFix').on("click",'li.card-list',function (event) {
var _index = $(this).index();
/*if(_index==3){
saveProject=1;
event.stopPropagation();
event.preventDefault();
map.clearOverlays(marker2);
var myMajor = $(this).attr('majorid');
setMajor(addressData,myMajor);
}else{
event.stopPropagation();
event.preventDefault();
map.clearOverlays(marker2);
if(saveProject%2!=0){
addressData[3].isOff = true;
setAddressIcon(addressData);
}
var myMajor = $(this).attr('majorid');
setMajor(addressData,myMajor);
}*/
event.stopPropagation();
event.preventDefault();
map.clearOverlays(marker2);
var myMajor = $(this).attr('majorid');
setMajor(addressData,myMajor);
})
// $('.mapFix').on('click',$('.mapFix li'),function(){
/* $('.mapFix li').addEventListener('click',function () {
var _index = $(this).index();
map.clearOverlays(marker2);
addressData.forEach(function(item1,index1){
item1.isOff = false;
});
addressData[_index].isOff = !addressData[_index].isOff;
setAddressIcon(addressData);
$('.mapFix li').addClass('isClick');
if($(this).hasClass('isClick')){
$(this).removeClass('isClick');
$(".mapFix li").find($('ul')).remove();
}
/!*$('.mapFix li').addClass('isClick');
$(this).toggleClass('isClick');*!/
/!*$(".mapFix li").find($('ul')).remove();*!/
});*/
// });
//生成右侧菜单
function getRightList(data){
if(Array.isArray(data)){
for(var i = 0;i< data.length; i++){
var $li = $('<li></li>').attr('index',i);
var $p = $('<p></p>');
$p.html(data[i].address).addClass('text1');
var $span = $('<span></span>');
$span.addClass('afterLine');
$li.append($p);
$li.append($span);
$('#map-list').append($li);
}
}
}
$('#map-list>li').hover(function(){
var _index = $(this).index();
$('#map-list .afterLine').eq(_index).animate({left:'110%'},50);
},
function(){
$('#map-list .afterLine').animate({left:'-100%'},0);
});
$('#rightMask').mouseenter(function(){
$('#map-list').animate({
right:'20px',
opacity:0.8
});
});
$('#map-list').mouseenter(function(){
$('#map-list').show();
})
$('#map-list').mouseleave(function(){
$('#map-list').animate({
right:'-100px',
opacity:0
});
})
//右侧菜单点击
$('#map-list>li').click(function(){
// map.setCenter(new BMap.Point(data[i][x], data[i][y]));
//map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州
var _index = $(this).attr('index');
if(!areaCoordsData[_index].isShow){
map.panTo(new BMap.Point(areaCoordsData[_index].x, areaCoordsData[_index].y));
map.setZoom(15);
areaCoordsData[_index].isShow = true;
}else{
map.panTo(new BMap.Point(121.408675,31.255194));
map.setZoom(12);
areaCoordsData[_index].isShow = false;
}
});
}
//鼠标经过触发事件
$(document).ready(function(){
$(".mapTab li").mouseover(function(){
});
$("#dropdownMenu1").mouseout(function(){
$(this).click();
});
})
//隔行换背景色
var item = $(".notice li");
for(var i=0;i<item.length;i++){
if(i%2==0){
item[i].style.backgroundColor="#101B3E";
}
}
//自动获取高度
$.each($(".heightAuto"),function(){
var h = $(this).parent('.bg').height()-46;
//console.log(h);
$(this).css({'height':h});
$(".heightAuto").css({'width':'100%','height':h});
})
window.addEventListener("resize",function() {
$.each($(".heightAuto"),function(){
var h = $(this).parent('.bg').height()-46;
//console.log(h);
$(this).css({'height':h});
$(".heightAuto").css({'width':'100%','height':h});
})
});
$.each($("#heightAuto3"),function(){
var h = $(this).parent('.bg').height()-80;
//console.log(h);
$(this).css({'height':h});
$("#heightAuto3").css({'width':'100%','height':h});
})
window.addEventListener("resize",function() {
$.each($("#heightAuto3"),function(){
var h = $(this).parent('.bg').height()-80;
//console.log(h);
$(this).css({'height':h});
$("#heightAuto3").css({'width':'100%','height':h});
})
});
$.each($("#myTabContent"),function(){
var h = $(this).parent('.bg').height()-60;
//console.log(h);
$(this).css({'height':h});
$("#myTabContent").css({'width':'100%','height':h});
})
window.addEventListener("resize",function() {
$.each($("#myTabContent"),function(){
var h = $(this).parent('.bg').height()-60;
//console.log(h);
$(this).css({'height':h});
$("#myTabContent").css({'width':'100%','height':h});
})
});
//工单分布图
var heightAuto1 = echarts.init(document.getElementById('heightAuto1'));
var option1 = {
legend: {
orient: 'vertical',
x: '5%',
y: '10%',
/*data:[],*/
data:[
'动迁基地',
'张江总部园',
'公园管理所',
'消防局',
'教育局'
],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['65%', '43%'],
type:'pie',
radius: ['30%', '50%'],
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:22, name:'动迁基地'},
{value:12, name:'张江总部园'},
{value:32, name:'公园管理所'},
{value:12, name:'消防局'},
{value:22, name:'教育局'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
heightAuto1.setOption(option1);
window.addEventListener("resize",function() {
heightAuto1.resize();
});
/*var url2 = "/sys/form/getWorkSheetDistribution";
var data2 = { typeValue: "2", beginTime: year};
workGetAjax(url2,data2,option1);
$('#second-canvas .title select').eq(1).css({'visibility':'hidden'});
$('#second-canvas .title select').eq(0).change(function () {
var num1 = $('#second-canvas .title select').eq(0).val();
var url1 = "/sys/form/getWorkSheetDistribution";
var data1;
if(num1 ==1){
$('#second-canvas .title select').eq(1).css({'visibility':'hidden'});
data1 = { typeValue: num1, beginTime: year};
}
else if(num1 ==2){
$('#second-canvas .title select').eq(1).css({'visibility':'hidden'});
data1 = { typeValue: num1, beginTime: year};
}
else if(num1 ==3){
$('#second-canvas .title select').eq(1).css({'visibility':'visible'});
data1 = { typeValue: num1,type:"1", beginTime: year};
}
workGetAjax(url1,data1,option1);
});
$('#second-canvas .title select').eq(1).change(function () {
var num1 = $('#second-canvas .title select').eq(0).val();
var num2 =$(this).val();
var url1 = "/sys/form/getWorkSheetDistribution";
var data1 = { typeValue: num1,type:num2, beginTime: year};
workGetAjax(url1,data1,option1);
})
function workGetAjax(url1,data1,par){
utool.ajaxGet(
url1,
"GET",
"json",
data1,
function (msg){
var data = msg.data;
var newNameData = [];
var newValueData = [];
var newAllData = [];
data.forEach(function(item){
for(var attr in item){
//attr=>每一个对象的标题 2018-1-1
if(attr == mydate){
var datas = item[attr];//获取为每个数组的第0个 是一个对象
datas.forEach(function(item1,index){
newNameData.push(item1.name);
if(!item1.value||item1.value == ''){
item1.value = 10;
}
newValueData.push(item1.value);
newAllData.push({name:item1.name,value:item1.value});
});
}
}
})
// console.info('工单分布图成功')
// console.info(newNameData); //名字数组
// console.info(newValueData); //值数组
// console.info(newAllData); // 所有数组（对象）
par.legend.data = newNameData;
par.series[0].data = newAllData;
heightAuto1.setOption( par);
window.addEventListener("resize",function() {
heightAuto1.resize();
});
},
function (msg){
console.info('error');
//console.info(msg)
}
);
}*/
//系统分布图
var heightAuto6 = echarts.init(document.getElementById('heightAuto6'));
var option6 = {
legend: {
orient: 'vertical',
x: '5%',
y: '18%',
/*data:[],*/
data:[
'A区',
'B区',
'C区',
'D区'
],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['62%', '50%'],
type:'pie',
radius: '55%',
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:22, name:'A区'},
{value:12, name:'B区'},
{value:32, name:'C区'},
{value:12, name:'D区'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
heightAuto6.setOption(option6);
window.addEventListener("resize",function() {
heightAuto6.resize();
});
var option6_2 = {
legend: {
orient: 'vertical',
x: '5%',
y: '18%',
/*data:[],*/
data:['智能家居系统','消防系统','节能控制系统','楼宇自控系统'],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['68%', '50%'],
type:'pie',
radius: '55%',
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:26, name:'智能家居系统'},
{value:42, name:'消防系统'},
{value:32, name:'节能控制系统'},
{value:22, name:'楼宇自控系统'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
var option6_3 = {
legend: {
orient: 'vertical',
x: '5%',
y: '18%',
/*data:[],*/
data:['入侵报警系统','视频监控系统',' 有线/无线巡更系统','车辆管理系统','出入口管理系统'],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['68%', '50%'],
type:'pie',
radius: '55%',
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:26, name:'入侵报警系统'},
{value:42, name:'视频监控系统'},
{value:32, name:'有线/无线巡更系统'},
{value:22, name:'车辆管理系统'},
{value:52, name:'出入口管理系统'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
var option6_4 = {
legend: {
orient: 'vertical',
x: '5%',
y: '18%',
/*data:[],*/
data:['建筑设备管理自动化','信息通信','电源与接地','智能化系统集成'],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['68%', '50%'],
type:'pie',
radius: '55%',
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:26, name:'建筑设备管理自动化'},
{value:42, name:'信息通信'},
{value:32, name:'电源与接地'},
{value:52, name:'智能化系统集成'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
var option6_5 = {
legend: {
orient: 'vertical',
x: '5%',
y: '18%',
/*data:[],*/
data:['可视图文系统','扩音系统','可视电话系统',' 光缆CATV系统'],
itemWidth: 13,
itemHeight: 15,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
name:'访问来源',
center : ['68%', '50%'],
type:'pie',
radius: '55%',
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:[
{value:26, name:'可视图文系统'},
{value:42, name:'扩音系统'},
{value:32, name:'可视电话系统'},
{value:52, name:' 光缆CATV系统'}
],
/*data:[],*/
}
],color: ['#2d49a6','#c8ab22','#22a7c8','#5786d8','#2da63e']
};
/*//设备分布统计
var heightAuto6 = echarts.init(document.getElementById('heightAuto6'));
var option6 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '2.5%',
right: '8%',
top: '8%',
bottom: '7%',
containLabel: true
},
xAxis: {
max: 160,
axisTick: {length:300},
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [26,0,0,-16]
},
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
},
yAxis: {
type : 'category',
splitLine: {show:false},
data : ['服务器','交换机','网络设备','程控交换','会议音箱','数字中继台','其他'],
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
},
color:'#09cefe',
series: [
{
name: '',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [ 0, 26, 56, 68, 103, 129, 140]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'right'
}
},
data:[ 26, 30, 12, 35, 26, 11, 20],
barWidth: 14
}
]
};
heightAuto6.setOption(option6);
window.addEventListener("resize",function() {
heightAuto6.resize();
});
var option6_2 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '2.5%',
right: '8%',
top: '8%',
bottom: '7%',
containLabel: true
},
xAxis: {
max: 160,
axisTick: {length:300},
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [26,0,0,-16]
},
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
},
yAxis: {
type : 'category',
splitLine: {show:false},
data : ['科创中心','黄浦区中心医院','月星环球港','张江软件园','浦东机场','张江软件园','金桥社区'],
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
},
color:'#09cefe',
series: [
{
name: '',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [ 0, 26, 56, 68, 103, 129, 140]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'right'
}
},
data:[ 26, 30, 12, 35, 26, 11, 20],
barWidth: 14
}
]
};
var option6_3 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '2.5%',
right: '8%',
top: '8%',
bottom: '7%',
containLabel: true
},
xAxis: {
max: 160,
axisTick: {length:300},
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [26,0,0,-16]
},
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
},
yAxis: {
type : 'category',
splitLine: {show:false},
data : ['浦东新区','普陀区','虹口区','静安区','长宁区','闵行区','松江区'],
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
},
color:'#09cefe',
series: [
{
name: '',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [ 0, 26, 56, 68, 103, 129, 140]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'right'
}
},
data:[ 26, 30, 12, 35, 26, 11, 20],
barWidth: 14
}
]
};*/
var option7 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '2.5%',
right: '8%',
top: '8%',
bottom: '7%',
containLabel: true
},
xAxis: {
max: 160,
axisTick: {length:300},
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [26,0,0,-16]
},
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
},
yAxis: {
type : 'category',
splitLine: {show:false},
data : ['科创中心','黄浦区中心医院','月星环球港','张江软件园','浦东机场','张江软件园','金桥社区'],
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
},
color:'#09cefe',
series: [
{
name: '',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [ 0, 26, 56, 68, 103, 129, 140]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'right'
}
},
data:[ 26, 30, 12, 35, 26, 11, 20],
barWidth: 14
}
]
};
var option8 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '2.5%',
right: '8%',
top: '8%',
bottom: '7%',
containLabel: true
},
xAxis: {
max: 160,
axisTick: {length:300},
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [26,0,0,-16]
},
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
},
yAxis: {
type : 'category',
splitLine: {show:false},
data : ['浦东新区','普陀区','虹口区','静安区','长宁区','闵行区','松江区'],
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: true,
},
},
color:'#09cefe',
series: [
{
name: '',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [ 0, 26, 56, 68, 103, 129, 140]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'right'
}
},
data:[ 26, 30, 12, 35, 26, 11, 20],
barWidth: 14
}
]
};
//对比图
var heightAuto5 = echarts.init(document.getElementById('heightAuto5'));
option5 = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter:function(ds){
//console.log(ds);
if(ds.color =='#213347'){
return '';
}else{
return ds.name+':'+ds.percent+'% ';
}
}
},
color: ['#59667A','#139E8B'],
series: [
{
center: ['35%','47%'],
type:'pie',
radius: ['30%', '35%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#f00']
},*/
label: {
normal: {
show: true,
position: 'left'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:30, name:'已维保数',
itemStyle:{
normal : {
color: '#26D966',
}
}
},
{value:70, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
},
{
center: ['35%','47%'],
type:'pie',
radius: ['50%', '55%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#000']
},*/
label: {
normal: {
show: true,
position: 'top'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:43, name:'报修数',
itemStyle:{
normal : {
color: '#1ACBF1',
}
}
},
{value:57, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
}
],
/*color: ['#23334A','#139E8B']*/
};
heightAuto5.setOption(option5);
window.addEventListener("resize",function() {
heightAuto5.resize();
});
option5_2 = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter:function(ds){
//console.log(ds);
if(ds.color =='#213347'){
return '';
}else{
return ds.name+':'+ds.percent+'% ';
}
}
},
color: ['#59667A','#139E8B'],
series: [
{
center: ['35%','47%'],
type:'pie',
radius: ['30%', '35%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#f00']
},*/
label: {
normal: {
show: true,
position: 'left'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:60, name:'已维保数',
itemStyle:{
normal : {
color: '#26D966',
}
}
},
{value:30, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
},
{
center: ['35%','47%'],
type:'pie',
radius: ['50%', '55%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#000']
},*/
label: {
normal: {
show: true,
position: 'top'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:53, name:'报修数',
itemStyle:{
normal : {
color: '#1ACBF1',
}
}
},
{value:47, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
}
]
};
option5_3 = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter:function(ds){
//console.log(ds);
if(ds.color =='#213347'){
return '';
}else{
return ds.name+':'+ds.percent+'% ';
}
}
},
color: ['#59667A','#139E8B'],
series: [
{
center: ['35%','47%'],
type:'pie',
radius: ['30%', '35%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#f00']
},*/
label: {
normal: {
show: true,
position: 'left'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:50, name:'已维保数',
itemStyle:{
normal : {
color: '#26D966',
}
}
},
{value:50, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
},
{
center: ['35%','47%'],
type:'pie',
radius: ['50%', '55%'],
avoidLabelOverlap: false,
hoverAnimation:false,
/*itemStyle:{
color:['#000']
},*/
label: {
normal: {
show: true,
position: 'top'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:83, name:'报修数',
itemStyle:{
normal : {
color: '#1ACBF1',
}
}
},
{value:17, name:' ',
itemStyle:{
normal : {
color: '#222A4B',
}
}
}
]
}
]
};
//巡检、维护完成比例
var heightAuto3 = echarts.init(document.getElementById('heightAuto3'));
option3 = {
tooltip: {
trigger: 'item',
formatter: "{b}:{d}%"
},
graphic:[{
type:'text',
left:'15%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['65%'+'\n'+'巡检完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
},{
type:'text',
left:'64%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['55%'+'\n'+'维护完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
}],
series: [
{
name:' ',
center : ['26%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:35, name:''},
{value:65, name:'巡检完成比例'},
],
color:['#101B3E','#ECE950']
},
{
name:' ',
center : ['75%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:45, name:''},
{value:55, name:'维护完成比例'},
],
color:['#101B3E','#6ca7fe']
}
]
};
heightAuto3.setOption(option3);
window.addEventListener("resize",function() {
heightAuto3.resize();
});
option3_2 = {
tooltip: {
trigger: 'item',
formatter: "{b}:{d}%"
},
graphic:[{
type:'text',
left:'15%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['45%'+'\n'+'巡检完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
},{
type:'text',
left:'64%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['55%'+'\n'+'维护完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
}],
series: [
{
name:' ',
center : ['26%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:55, name:''},
{value:45, name:'巡检完成比例'},
],
color:['#101B3E','#ECE950']
},
{
name:' ',
center : ['75%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:45, name:''},
{value:55, name:'维护完成比例'},
],
color:['#101B3E','#6ca7fe']
}
]
};
option3_3 = {
tooltip: {
trigger: 'item',
formatter: "{b}:{d}%"
},
graphic:[{
type:'text',
left:'15%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['65%'+'\n'+'巡检完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
},{
type:'text',
left:'64%',
top:'center',
z:2,
zlevel:100,
style:{
text: ['75%'+'\n'+'维护完成比例'],
x:100,
y:100,
textAlign:'center',
fill:'#6ba2c2',
width:30,
height:30
}
}],
series: [
{
name:' ',
center : ['26%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:35, name:''},
{value:65, name:'巡检完成比例'},
],
color:['#101B3E','#ECE950']
},
{
name:' ',
center : ['75%', '50%'],
type:'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:25, name:''},
{value:75, name:'维护完成比例'},
],
color:['#101B3E','#6ca7fe']
}
]
};
//工单平均耗时
var heightAuto11 = echarts.init(document.getElementById('heightAuto11'));
option11 = {
title: {
text: ' '
},
backgroundColor:'',
tooltip: {
trigger: 'axis'
},
grid: {
left: '2.5%',
right: '5%',
top: '13%',
bottom: '12%',
containLabel: true
},
xAxis: [{
type: 'category',
show:true,
// data: ['客户1','客户2','客户3','客户4','客户5','客户6','客户7'],
data: [],
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color:'#819DB7'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
}],
yAxis: [{
name: '(h)',
min:0,
max: 50,
show:true,
nameTextStyle:{
padding: [0,35,-5,0]
},
type: 'value',
axisLine:{
lineStyle:{
color:'#819DB7'
},
show: false,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283255'
}
},
splitArea: {
show: false,
}
}
],
color:'#5BB0FF',
series: [{
type: 'line',
smooth: true,
label: {
normal: {
show: true,
position: 'top'
}
},
barWidth: '16%',
data: [],
// data: [10, 13, 12, 9, 14, 10,15],
}]
};
/*var url3 = '/sys/form/getAvgValueOfEngineer';
var data3 = {typeValue:"2",type:"2",beginTime:year,isTop:"1"};
sel1GetAjax(url3,data3,option11);*/
/*$('#five-canvas .title .selectwai select').eq(1).change(function(){
var num2 = $('#five-canvas .title .selectwai select').eq(0).val();
if(!num2||num2 == ''){
alert('请选择查询大类');
return;
}
});*/
/*$('#five-canvas .title .selectwai select').eq(0).change(function(){
var num1 = $('#five-canvas .title .selectwai select').eq(0).val();
option11.xAxis[0].data = [];
option11.series[0].data = [];*/
/*if(num1 == 1){
var url1 = '/sys/form/getDeviceTypeList';
var data1 = {type:"1"};
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {typeValue:"1",type:"2",beginTime:year,isTop:"1",typeId:""};
utool.ajaxGet(
url1,
"GET",
"json",
data1,
function (msg){
var data = msg.data;
var $par = $('#five-canvas .title .selectwai select').eq(1);
getOption(data,$par);
//console.info('设备chengg ')
},
function (msg){
('error');
// console.info(msg)console.info
}
);
sel1GetAjax(url2,data2,option11);
// option11.series[0].data = [8,15,15,20,8];
// heightAuto11.setOption(option11);
// window.addEventListener("resize",function() {
// heightAuto11.resize();
// });
/!*!//生成设备分类下拉框
utool.ajaxGet(
url1,
"GET",
"json",
data1,
function (msg){
var data = msg.data;
var $par = $('#five-canvas .title .selectwai select').eq(1);
getOption(data,$par);
console.info(1)
},
function (msg){
console.info('error');
console.info(msg)
}
);
//设备分类第一级
utool.ajaxGet(
url2,
"GET",
"json",
data2,
function (msg){
var data = msg.data;
console.info(data);
var newNameData = [];
var newValueData = [];
var newAllData = [];
data.forEach(function(item){
for(var attr in item){
//attr=>每一个对象的标题 2018-1-1
if(attr == mydate){
var datas = item[attr];//获取为每个数组的第0个 是一个对象
console.info(datas);
datas.forEach(function(item1,index){
newNameData.push(item1.name);
if(item1.value == ''){
item1.value = 10;
}
newValueData.push(item1.value);
newAllData.push({name:item1.name,value:item1.value});
});
console.info(newNameData);
console.info(newValueData);
console.info(newAllData);
option11.xAxis[0].data = newNameData;
option11.series[0].data = newValueData;
}
}
})
console.info(newNameData); //名字数组
console.info(newValueData); //值数组
console.info(newAllData); // 所有数组（对象）
heightAuto11.setOption(option11);
window.addEventListener("resize",function() {
heightAuto11.resize();
});
},
function (msg){
console.info('error');
console.info(msg)
}
);
*!/
}*/
/*else if(num1 ==2){
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {typeValue:"2",type:"2",beginTime:year,isTop:"1"};
//组织机构分类下拉框
var $par = $('#five-canvas .title .selectwai select').eq(1);
var $sel = $('<option>请选择</option>');
$par.empty();
$par.append($sel);
var $opt = $('<option value=1> 一级机构 </option><option value=2> 二级机构 </option><option value=3> 三级机构 </option><option value=4> 四级机构 </option>');
$par.append($opt);
//组织机构第一级
sel1GetAjax(url2,data2,option11);
// option11.series[0].data = [10,20,15,14,8];
// heightAuto11.setOption(option11);
// window.addEventListener("resize",function() {
// heightAuto11.resize();
// });
}*/
/*else if(num1 ==3){
var url1 = '/wo/woClient/tableSelectJson';
var data1 = {};
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {typeValue:"3",beginTime:year,isTop:"1"};
//客户分类下拉框
utool.ajaxGet(
url1,
"GET",
"json",
data1,
function (msg){
var data = msg.data;
var $par = $('#five-canvas .title .selectwai select').eq(1);
// console.info(data)
getOption(data,$par);
// console.info('客户下 ')
},
function (msg){
console.info('error');
// console.info(msg)
}
);
//客户第一级
sel1GetAjax(url2,data2,option11);*/
// option11.series[0].data = [18,20,15,14,18];
// heightAuto11.setOption(option11);
// window.addEventListener("resize",function() {
// heightAuto11.resize();
// });
/*}
});*/
/*$('#five-canvas .title .selectwai select').eq(1).change(function(){
var num1 = $('#five-canvas .title .selectwai select').eq(0).val();
var num2 = $('#five-canvas .title .selectwai select').eq(1).val();
var wcId = $('#five-canvas .title .selectwai select').eq(1).find('option:selected').attr('uniid');
if(num1 ==1){
var url2 = '/sys/form/getAvgValueOfEngineer';
console.info(wcId);
var data2 = {typeValue:"1",type:"2",beginTime:year,isTop:"1",typeId:wcId};
sel1GetAjax(url2,data2,option11);
}
else if(num1 ==2){
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {typeValue:"2",type:num2,beginTime:year,isTop:"1"};
//组织机构第一级
sel1GetAjax(url2,data2,option11);
}
else if(num1 ==3){
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {beginTime:year,typeValue:"3",type:wcId,isTop:"1"};
sel1GetAjax(url2,data2,option11);
}
})*/
/*function getOption(data,par){
var $sel = $('<option>请选择</option>');
par.empty();
par.append($sel);
data.forEach(function(item,index){
var $opt = $('<option value='+ (index+1) + ' uniid = '+item.uniid+'> '+item.name+' </option>');
par.append($opt);
})
}*/
option11.xAxis[0].data = [];
option11.series[0].data = [];
var url1 = '/wo/woClient/tableSelectJson';
var data1 = {};
var url2 = '/sys/form/getAvgValueOfEngineer';
var data2 = {typeValue:"3",beginTime:year,isTop:"1"};
//客户分类下拉框
utool.ajaxGet(
url1,
"GET",
"json",
data1,
function (msg){
var data = msg.data;
var $par = $('#five-canvas .title .selectwai select').eq(1);
// console.info(data)
getOption(data,$par);
// console.info('客户下 ')
},
function (msg){
console.info('error');
// console.info(msg)
}
);
//客户第一级
sel1GetAjax(url2,data2,option11);
function sel1GetAjax(url2,data2,par){
utool.ajaxGet(
url2,
"GET",
"json",
data2,
function (msg){
var data = msg.data;
console.info(data);
var newNameData = [];
var newValueData = [];
var newAllData = [];
data.forEach(function(item){
for(var attr in item){
//attr=>每一个对象的标题 2018-1-1
if(attr == mydate){
var datas = item[attr];//获取为每个数组的第0个 是一个对象
// console.info(datas);
datas.forEach(function(item1,index){
console.info('item1',item1)
newNameData.push(item1.name);
if(!item1.value||item1.value == ''){
item1.value = 0;
}
newValueData.push(item1.value);
newAllData.push({name:item1.name,value:item1.value});
});
}
}
});
par.xAxis[0].data = newNameData;
par.series[0].data = newValueData;
heightAuto11.setOption(option11);
window.addEventListener("resize",function() {
heightAuto11.resize();
});
console.info(newNameData); //名字数组
// console.info(newValueData); //值数组
// console.info(newAllData); // 所有数组（对象）
},
function (msg){
console.info('error');
// console.info(msg)
}
);
}
//成交订单数交易额对比----每月
var heightAuto10 = echarts.init(document.getElementById('heightAuto10'));
option10 = {
/*legend: {
data:['订单数','交易额'],
itemWidth: 13,
itemHeight: 10,
itemGap: 50,
padding: [5,0,0,0],
textStyle: {
fontSize: 14,
color: '#8291AB'
},
borderWidth: 0 // 图例边框线宽，单位px，默认为0（无边框）
},*/
tooltip: {
trigger: 'axis'
},
/*保存图形按钮*/
/*toolbox: {
feature: {
saveAsImage: {}
}
},*/
grid: {
top: '17%',
left: '3%',
right: '6%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
/*axisPointer: {
type: 'shadow'
},*/
axisLine:{
lineStyle:{
color:'#8291AB'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
},
yAxis: {
max: 100,
type: 'value',
name: '(个)',
nameTextStyle:{
padding: [0,45,-5,0]
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#8291AB'
},
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283659'
}
},
},
color:['#FFDD75','#168DC0'],
series: [
{
/*name:'订单数',*/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [52, 63, 40, 73 ,65 ,63 ,55 ,34 ,25 ,38 ,56 ,80 ],
type: 'line',
areaStyle: {
normal: {
color: '#4591A1'
}
}
}/*,
{
/!*name:'交易额',*!/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [620, 632, 801, 634, 666, 577, 488,366,907,600,490,660],
type: 'line',
areaStyle: {
normal: {
color: '#168DC0'
}
}
}*/
]
};
heightAuto10.setOption(option10);
window.addEventListener("resize",function() {
heightAuto10.resize();
});
//成交订单数交易额对比----每周
option16 = {
/*legend: {
data:['订单数','交易额'],
itemWidth: 13,
itemHeight: 10,
itemGap: 50,
padding: [5,0,0,0],
textStyle: {
fontSize: 14,
color: '#8291AB'
},
borderWidth: 0 // 图例边框线宽，单位px，默认为0（无边框）
},*/
tooltip: {
trigger: 'axis'
},
/*保存图形按钮*/
/*toolbox: {
feature: {
saveAsImage: {}
}
},*/
grid: {
top: '17%',
left: '3%',
right: '6%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['第一周', '第二周', '第三周', '第四周'],
/*axisPointer: {
type: 'shadow'
},*/
axisLine:{
lineStyle:{
color:'#8291AB'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
},
yAxis: {
type: 'value',
name: '(个)',
nameTextStyle:{
padding: [0,45,-5,0]
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#8291AB'
},
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283659'
}
},
},
color:['#FFDD75','#168DC0'],
series: [
{
/*name:'订单数',*/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [52, 33, 60, 53],
type: 'line',
areaStyle: {
normal: {
color: '#4591A1'
}
}
}/*,
{
/!*name:'交易额',*!/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [920, 532, 401, 834],
type: 'line',
areaStyle: {
normal: {
color: '#168DC0'
}
}
}*/
]
};
//成交订单数交易额对比----每天
option17 = {
/*legend: {
data:['订单数','交易额'],
itemWidth: 13,
itemHeight: 10,
itemGap: 50,
padding: [5,0,0,0],
textStyle: {
fontSize: 14,
color: '#8291AB'
},
borderWidth: 0 // 图例边框线宽，单位px，默认为0（无边框）
},*/
tooltip: {
trigger: 'axis'
},
/*保存图形按钮*/
/*toolbox: {
feature: {
saveAsImage: {}
}
},*/
grid: {
top: '17%',
left: '3%',
right: '6%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4','5', '6', '7', '8','9', '10', '11', '12','13', '14', '15', '16','17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
/*axisPointer: {
type: 'shadow'
},*/
axisLine:{
lineStyle:{
color:'#8291AB'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
},
yAxis: {
type: 'value',
name: '(个)',
nameTextStyle:{
padding: [0,45,-5,0]
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#8291AB'
},
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#283659'
}
},
},
color:['#FFDD75','#168DC0'],
series: [
{
/*name:'订单数',*/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [52, 63, 80, 93,62, 63, 80, 63, 66, 57, 48,36,90,60,49,66,62, 63, 80, 63, 66, 57, 48,36, 40, 45, 49, 52, 58,60, 68],
type: 'line',
areaStyle: {
normal: {
color: '#4591A1'
}
}
}/*,
{
/!*name:'交易额',*!/
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平
max: 1000,
itemStyle:{
normal:{
lineStyle:{
width:1
}
}
},
data: [620, 632, 801, 634,620, 632, 801,366, 632, 801, 634, 666, 577, 488,366,907,600,490,660,985,654,907,600,490,660,620, 634, 666, 577, 488],
type: 'line',
areaStyle: {
normal: {
color: '#168DC0'
}
}
}*/
]
};
$(".nav-tabs:eq(1) li").click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
var id = $(this).attr('data-option');
if( !id ) return '';
var option = '';
if( 10 == id){
option = option10;
}else if( 16 == id){
option = option16;
}else if( 17 == id){
option = option17;
}
//console.log(option)
heightAuto10.setOption(option);
});
//工作效率
var heightAuto8 = echarts.init(document.getElementById('heightAuto8'));
option8 = {
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : '15px',
data:['响应率','完成率','等待率','滿意度'],
itemWidth: 9,
itemHeight: 9,
itemGap: 10,
textStyle: {
fontSize: 13,
color: '#96A8BF'
}
},
calculable : true,
series : [
{
name:'',
type:'pie',
radius : [30, 50],
center : ['50%', '66%'],
roseType : 'radius',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{value:10, name:'响应率'},
{value:5, name:'完成率'},
{value:15, name:'等待率'},
{value:15, name:'滿意度'}
]
}
],
color:['#2a85ec','#c5a90c','#0be0ce']
};
heightAuto8.setOption(option8);
window.addEventListener("resize",function() {
heightAuto8.resize();
});
$(".selectwai:eq(2) option").click(function(){
var id = $(this).attr('value');
if( !id ) return '';
var option = '';
if( 6 == id){
option = option10;
}else if( 7 == id){
option = option16;
}else if( 9 == id){
option = option17;
}
//console.log(option)
heightAuto10.setOption(option);
});
$(".selecty[data-type]").change(function(){
var type = $(this).attr('data-type'),val = $(this).val(),option = '';
if('shebei' == type){
if( 1== val){
option = option6;
}else if(2 == val){
option = option6_2;
}else if(3 == val){
option = option6_3;
}else if(4 == val){
option = option6_4;
}else if(5 == val){
option = option6_5;
}
heightAuto6.setOption(option);
}else if('weibao' == type){
if( 1== val){
option = option5;
}else if(2 == val){
option = option5_2;
}else if(3 == val){
option = option5_3;
}
heightAuto5.setOption(option);
}else if('xunjian' == type){
if( 1== val){
option = option3;
}else if(2 == val){
option = option3_2;
}else if(3 == val){
option = option3_3;
}
heightAuto3.setOption(option);
}
//console.log($(this).val())
});
//年度点击
$(".xuze span").click(function () {
$(this).find('abbr').addClass('aColor').parent('span').siblings('span').find('abbr').removeClass('aColor');
//选中框
var t = $(this).parents('.bg').find('.selecty[data-type=xunjian]').val();
//年度月度
var z = $(this).index();
if(0 == z){
if(1 == t){
option = option3;
}else if(2 == t){
option = option3_2;
}else if(3== t){
option = option3;
}
}else if(1 == z){
if(1 == t){
option = option3_2;
}else if(2 == t){
option = option3;
}else if(3== t){
option = option3_3;
}
}else if(2== z){
if(1 == t){
option = option3_3;
}else if(2 == t){
option = option3;
}else if(3== t){
option = option3_2;
}
}
heightAuto3.setOption(option);
/*console.log(t);
console.log(z)*/
})
//AutoScroll("#myTabContent");
setInterval('AutoScroll("#myTabContent")', 2000);
$(".nav-tabs:eq(0) li").click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
var id = $(this).attr('data-option');
if( !id ) return '';
var data = '',html = '';
if( 0 == id){
/* data = [
{'date':'2018-3-26','time':'9:00','name':'刘经理','msg':'售后服务标准'},
{'date':'2018-3-26','time':'15:00','name':'王经理','msg':'采购流程'},
{'date':'2018-3-27','time':'10:00','name':'李经理','msg':'销售培训'},
{'date':'2018-3-27','time':'14:00','name':'张经理','msg':'季度总结'},
{'date':'2018-3-30','time':'11:00','name':'陈经理','msg':'渠道培训'},
{'date':'2018-3-30','time':'15:00','name':'赵经理','msg':'招聘计划'}
];*/
data = [
{'msg':'张江小学','time':'2018.11.10','name':'熊成朋'},
{'msg':'南汇公园','time':'2018.10.16','name':'熊成朋'},
{'msg':'丁香国际','time':'2018.12.06','name':'秦性强'},
{'msg':'世纪大厦','time':'2018.12.23','name':'熊成朋'},
{'msg':'高桥公园','time':'2018.10.13','name':'谭刘明'},
{'msg':'蔓趣公园','time':'2018.12.12','name':'秦性强'},
{'msg':'金桥公园','time':'2018.12.03','name':'谭刘明'},
{'msg':'川沙公园','time':'2018.11.21','name':'熊成朋'},
{'msg':'泾南公园','time':'2018.10.07','name':'熊成朋'},
{'msg':'梅园','time':'2018.10.08 ','name':'熊成朋'},
{'msg':'川沙公园','time':'2018.11.02','name':'谭刘明'},
{'msg':'希望大厦','time':'2018.12.05','name':'谭刘明'},
{'msg':'张江小学','time':'2019.01.11','name':'熊成朋'},
{'msg':'南汇公园','time':'2018.12.17','name':'熊成朋'},
{'msg':'丁香国际','time':'2019.02.06','name':'秦性强'},
{'msg':'世纪大厦','time':'2019.02.07','name':'熊成朋'},
{'msg':'高桥公园','time':'2019.01.14','name':'谭刘明'},
{'msg':'蔓趣公园','time':'2019.02.13','name':'秦性强'},
{'msg':'金桥公园','time':'2019.02.15','name':'谭刘明'},
{'msg':'川沙公园','time':'2019.01.21','name':'熊成朋'},
{'msg':'泾南公园','time':'2019.03.11','name':'熊成朋'},
{'msg':'梅园','time':'2019.02.10 ','name':'熊成朋'},
{'msg':'川沙公园','time':'2019.01.03','name':'谭刘明'},
{'msg':'希望大厦','time':'2019.02.24','name':'谭刘明'}
];
$.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row"> ';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.msg+'</span>';
html +='<span class="col-lg-6 col-md-6 col-sm-6 listCent">'+val.time+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.name+'</span>';
html +='</p></li>';
})
/* $.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row"> ';
html +='<span class="col-lg-4 col-md-4 col-sm-4 huione">'+val.date+'</span>';
html +='<span class="col-lg-2 col-md-2 col-sm-2 huitwo">'+val.time+'</span>';
html +='<span class="col-lg-2 col-md-2 col-sm-2 huithree">'+val.name+'</span>';
html +='<span class="col-lg-4 col-md-4 col-sm-4 huifour">'+val.msg+'</span>';
html +='</p></li>';
})*/
}else if( 1 == id){
data = [
{'time':'2018-04-21 18:21','name':'CNP00167-HVAC-AHU-2004','msg':'昆山支行'},
{'time':'2018-04-12 10:32','name':'CNP00188-FIRE-FLA-1920','msg':'城西支行'},
{'time':'2018-04-15 17:15','name':'CNP00167-HVAC-FCU-2207','msg':'昆山支行'},
{'time':'2018-04-20 12:09','name':'CNP00269-HVAC-VRV-IN-11','msg':'漕河泾'},
{'time':'2018-04-20 15:49','name':'CNP00188-ELEC-EDC-1721','msg':'昆山支行'},
{'time':'2018-04-20 08:11','name':'CNP00073-HVAC-EAF-02','msg':'漕河泾'}
];
$.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row titilelength"> ';
html +='<span class="col-lg-3 col-md-3 col-sm-3" title='+val.name+'>'+val.name+'</span>';
html +='<span class="col-lg-4 col-md-4 col-sm-4">'+val.msg+'</span>';
html +='<span class="col-lg-5 col-md-5 col-sm-5">'+val.time+'</span>';
html +='</p></li>';
})
}else if( 2 == id){
/*data = [
{'time':'2018-04-20 15:49','name':'王经理','msg':'用户调研'},
{'time':'2018-04-20 08:11','name':'李经理','msg':'客户跟进'},
{'time':'2018-04-21 18:21','name':'陈经理','msg':'销售考核'},
{'time':'2018-04-12 10:32','name':'赵经理','msg':'人员招聘'},
{'time':'2018-04-15 17:15','name':'刘经理','msg':'项目评审'},
{'time':'2018-04-20 12:09','name':'王经理','msg':'工程建设'}
];*/
$.ajax({
type:'get',
url: path+"/wo/woWorksheet/findListByStatus",
data:{ "woStatus": "4,5" },
dataType:'json',
contentType:"application/json",
success:function(data){
if (data.success) {
$.each(data.data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row titilelength"> ';
html +='<span class="col-lg-2 col-md-2 col-sm-2" title='+val.name+'>'+val.name+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3" title='+val.woNo+'>'+val.woNo+'</span>';
html +='<span class="col-lg-5 col-md-5 col-sm-5">'+val.time+'</span>';
html +='<span class="col-lg-2 col-md-2 col-sm-2">'+val.woStatus+'</span>';
html +='</p></li>';
})
$("#notice").html(html);
}
}
})
/*$.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row"> ';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.msg+'</span>';
html +='<span class="col-lg-6 col-md-6 col-sm-6 listCent">'+val.time+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.name+'</span>';
html +='</p></li>';
})*/
}else if( 3 == id){
/* data = [
{'time':'2018-04-12 10:32','name':'张经理','msg':'科创中心机房巡检'},
{'time':'2018-04-15 17:15','name':'陈经理','msg':'黄浦区中心医院设备巡检'},
{'time':'2018-04-20 12:09','name':'赵经理','msg':'月星环球港安防巡检'},
{'time':'2018-04-20 15:49','name':'刘经理','msg':'张江软件园机房巡检'},
{'time':'2018-04-20 08:11','name':'王经理','msg':'金桥社区机房巡检'},
{'time':'2018-04-21 18:21','name':'李经理','msg':'久光百货监控巡检'}
];
$.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row titilelength"> ';
html +='<span class="col-lg-3 col-md-3 col-sm-3" title='+val.msg+'>'+val.msg+'</span>';
html +='<span class="col-lg-6 col-md-6 col-sm-6 listCent">'+val.time+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.name+'</span>';
html +='</p></li>';
})*/
$.ajax({
type:'get',
url: path+"/wo/woWorksheet/findListByStatus",
data:{ "woStatus": "1,2","emGrade":"3" },
dataType:'json',
contentType:"application/json",
success:function(data){
if (data.success) {
$.each(data.data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row titilelength"> ';
html +='<span class="col-lg-2 col-md-2 col-sm-2" title='+val.name+'>'+val.name+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3" title='+val.woNo+'>'+val.woNo+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.woGrade+'</span>';
html +='<span class="col-lg-4 col-md-4 col-sm-4">'+val.woStatus+'</span>';
html +='</p></li>';
})
$("#notice").html(html);
}
}
})
}else if( 4 == id){
data = [
{'cate':'服务器','name':'戴尔R430刀片机','msg':'三林分仓','num':'5'},
{'cate':'交换机','name':'Tplink交换机','msg':'上海总仓','num':'3'},
{'cate':'网络设备','name':'小米路由器','msg':'三林分仓','num':'5'},
{'cate':'程控交换','name':'爱立信MG-BKSU','msg':'上海总仓','num':'4'},
{'cate':'会议音箱','name':'WK DP-10','msg':'三林分仓','num':'1'},
{'cate':'数字中继台','name':'摩托罗拉XIR-R8200','msg':'三林分仓','num':'2'}
];
$.each(data,function(key,val){
style = (key%2 == 0) ? 'style="background-color:#101B3E"' : '' ;
html +='<li '+style+'><p class="list row titilelength"> ';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.cate+'</span>';
html +='<span class="col-lg-4 col-md-4 col-sm-4 listCent">'+val.name+'</span>';
html +='<span class="col-lg-3 col-md-3 col-sm-3">'+val.msg+'</span>';
html +='<span class="col-lg-2 col-md-2 col-sm-2">'+val.num+'</span>';
html +='</p></li>';
})
}
$("#notice").html(html);
});
$(".nav-tabs:eq(0) li:eq(0)").trigger('click');
});
版权声明：本文标题：最近写的js文件，处理了一些麻烦的数据 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729028083a1183476.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论