//定制化显示块-安全、公告 var mainPageType_Security='SecurityType'; var mainPageType_Info='InfoType'; var initialProduceGaugeItem =function(id,mPoint){ var myChart = echarts.init(document.getElementById(id)); // 指定图表的配置项和数据 var alarmPersentMin =mPoint.forcemin; var alarmPersentMax =mPoint.forcemax; if(mPoint.alarmmin!=0 && mPoint.forcemax!=0 && mPoint.forcemax!=mPoint.alarmmin){ alarmPersentMin=(mPoint.alarmmin-mPoint.forcemin)/(mPoint.forcemax-mPoint.forcemin) } if(mPoint.alarmmin!=0 && mPoint.forcemax!=0 && mPoint.forcemax!=mPoint.alarmmin){ alarmPersentMax=(mPoint.alarmmax-mPoint.forcemin)/(mPoint.forcemax-mPoint.forcemin) } var option = { title: { text: mPoint.parmname, //标题文本内容 left: 'center', }, toolbox: { //可视化的工具箱 show: false, feature: { restore: { //重置 }, saveAsImage: {//保存图片 } } }, tooltip: { //弹窗组件 formatter: "{a}
{b} : {c}" }, series: [{ type: 'gauge', radius: '90%', center: ["50%", "60%"], min:mPoint.forcemin, max:mPoint.forcemax, axisLine: { lineStyle: { color: [ [alarmPersentMin, '#ddd'], [alarmPersentMax, '#66D99F'], [1, '#F35A4A'] ], width: 15 // 这个是修改宽度的属性 } }, axisTick: { // 坐标轴小标记 length: 15, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto' } }, axisLabel: { // 刻度标签。 show: false, }, splitLine: { // 分隔线 length: 20, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: 'auto' } }, pointer: { // 仪表盘指针。 show: true, // 是否显示指针,默认 true。 length: "70%", // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。 width: 5, // 指针宽度,默认 8。 }, detail: {formatter:'{value}'}, data: [{value: mPoint.parmvalue, name: mPoint.unit}] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } var initialProduceBarItem =function(id,mPoint){ /*
*/ var myChart = echarts.init(document.getElementById(id)); //$.post(ext.contextPath + '/work/mpoint/getHistory.do', {ids:mPoint.mpointcode,sdt:beginTimeStore,edt:endTimeStore,bizId:$("#bizId").val(),timeInterval:60} , function(data) { $.post(ext.contextPath + '/work/mpoint/getHistory.do', {ids:mPoint.mpointcode,sdt:beginTimeStore,edt:endTimeStore,bizId:bizId,timeInterval:60} , function(data) { //var labels=[]; var thisIds=[]; var chartData=[]; $.each(data[0], function(index, obj) { //labels.push("("+obj.measuredt.substring(8,10)+")"+obj.measuredt.substring(11,16)); //thisIds.push(obj.measuredt.substring(10,13)); thisIds.push(obj.measuredt.substring(11,16)); chartData.push(parseFloat(obj.parmvalue)); }); myChart.setOption({ title: { text:mPoint.parmname, left: 'center', }, tooltip: {}, grid:{ show:false, //---是否显示直角坐标系网格 top:40, bottom:20, //---相对位置,top\bottom\left\right containLabel:false, //---grid 区域是否包含坐标轴的刻度标签 }, xAxis: { /* axisLine: { lineStyle: { color: '#FFF',//左边线的颜色 } }, */ data: thisIds, /* axisLabel : {//坐标轴刻度标签的相关设置。 rotate:"-45" }*/ }, yAxis: { /* axisLine: { lineStyle: { color: '#FFF',//左边线的颜色 } }, */ }, series: [{ name: mPoint.unit, type: 'bar', markPoint: { data: [ {type: 'max', name: '最大值', itemStyle: { color: 'red' }}, {type: 'min', name: '最小值', itemStyle: { color: 'green' }} ] }, itemStyle: { normal: { color:'#5FAEE3' } }, data: chartData }] }); },'json'); } var initialProduceLineItem =function(id,mPoint){ var myChart = echarts.init(document.getElementById(id)); //$.post(ext.contextPath + '/work/mpoint/getHistory.do', {ids:mPoint.mpointcode,sdt:beginTimeStore,edt:endTimeStore,bizId:$("#bizId").val(),timeInterval:60} , function(data) { $.post(ext.contextPath + '/work/mpoint/getHistory.do', {ids:mPoint.mpointcode,sdt:beginTimeStore,edt:endTimeStore,bizId:bizId,timeInterval:60} , function(data) { //var labels=[]; var thisIds=[]; var chartData=[]; $.each(data[0], function(index, obj) { //labels.push("("+obj.measuredt.substring(8,10)+")"+obj.measuredt.substring(11,16)); //thisIds.push(obj.measuredt.substring(10,13)); thisIds.push(obj.measuredt.substring(11,16)); chartData.push(parseFloat(obj.parmvalue)); }); console.log("thisIds==========="+thisIds); console.log("chartData==========="+chartData); myChart.setOption({ title: { text:mPoint.parmname, left: 'center', }, tooltip: {}, grid:{ show:false, //---是否显示直角坐标系网格 top:40, bottom:20, //---相对位置,top\bottom\left\right containLabel:false, //---grid 区域是否包含坐标轴的刻度标签 }, xAxis: { /* axisLine: { lineStyle: { color: '#FFF',//左边线的颜色 } }, */ data: thisIds, /* axisLabel : {//坐标轴刻度标签的相关设置。 rotate:"-45" }*/ }, yAxis: { /* axisLine: { lineStyle: { color: '#FFF',//左边线的颜色 } }, */ }, series: [{ name: mPoint.unit, type: 'line', markLine: { data: [ {name: '超限最大', yAxis: mPoint.alarmmax, lineStyle: { color: 'red' }}, {name: '超限最小', yAxis: mPoint.alarmmin, lineStyle: { color: 'orange' }} ] }, itemStyle: { normal: { // 随机显示 color:'#5FAEE3' } }, data: chartData }] }); },'json'); } var initialEfficiencyGaugeItem =function(id,mPoint){ var myChart = echarts.init(document.getElementById(id)); // 指定图表的配置项和数据 var alarmPersentMin =mPoint.forcemin; var alarmPersentMax =mPoint.forcemax; if(mPoint.alarmmin!=0 && mPoint.forcemax!=0 && mPoint.forcemax!=mPoint.alarmmin){ alarmPersentMin=(mPoint.alarmmin-mPoint.forcemin)/(mPoint.forcemax-mPoint.forcemin) } if(mPoint.alarmmin!=0 && mPoint.forcemax!=0 && mPoint.forcemax!=mPoint.alarmmin){ alarmPersentMax=(mPoint.alarmmax-mPoint.forcemin)/(mPoint.forcemax-mPoint.forcemin) } var option = { title: { text: mPoint.parmname, //标题文本内容 left: 'center', }, toolbox: { //可视化的工具箱 show: false, feature: { restore: { //重置 }, saveAsImage: {//保存图片 } } }, tooltip: { //弹窗组件 formatter: "{a}
{b} : {c}" }, series: [{ type: 'gauge', radius: '75%', center: ["50%", "65%"], min:mPoint.forcemin, max:mPoint.forcemax, axisLine: { lineStyle: { color: [ [alarmPersentMin, '#ddd'], [alarmPersentMax, '#66D99F'], [1, '#F35A4A'] ], width: 15 // 这个是修改宽度的属性 } }, axisTick: { // 坐标轴小标记 length: 15, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto' } }, axisLabel: { // 刻度标签。 show: false, }, splitLine: { // 分隔线 length: 20, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: 'auto' } }, pointer: { // 仪表盘指针。 show: true, // 是否显示指针,默认 true。 length: "70%", // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。 width: 5, // 指针宽度,默认 8。 }, detail: {formatter:'{value}'}, data: [{value: mPoint.parmvalue, name: mPoint.unit}] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } var initialSecurityBarItem =function(id,bizId,dateSpan){ $.post(ext.contextPath + '/work/scadaAlarm/getAlarmNumberByDateSpan.do', {companyId:bizId,dateSpan:dateSpan} , function(data) { var dateItems= new Array; var alarmItems= new Array; var alarmUnRecoverItems= new Array; $.each(data,function(i,item){ dateItems.push(item.name); alarmItems.push(item.num+item.num_recover); alarmUnRecoverItems.push(item.num); }); var myChart = echarts.init(document.getElementById(id)); myChart.setOption({ title : { text: '报警统计', }, tooltip : { trigger: 'axis' }, legend: { data:['报警量','未解除报警量'] }, toolbox: { show : false, }, calculable : true, xAxis : [ { type : 'category', data : dateItems } ], yAxis : [ { type : 'value' } ], series : [ { name:'报警量', type:'bar', data:alarmItems, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] }, itemStyle: { normal: { color:'#66D99F' } }, }, { name:'未解除报警量', type:'bar', data:alarmUnRecoverItems, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] }, itemStyle: { normal: { color:'orange' } }, } ] }); },'json'); } var initialProduceBase =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); /* var domItem ='
'+ ''+ '
'+ ''+ '
'+ '
'+ '
'+ '生产'+ '
'+ '
';*/ //$('#'+id).append(domItem); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Base},function(data){ if(data.length>0){ $.each(data,function(index,item){ var domItem ='
'+ ''+ '
'+ ''+item.mPoint.parmvalue+''+ '
'+ '
'+ '
'+ ''+item.mPoint.parmname+''+ '
'+ '
'; $('#'+id).append(domItem); }) } },'json'); } var initialProduceGauge =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Gauge},function(data){ if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ var domItem ='
' +'
' +'
'; $('#'+id).append(domItem); initialProduceGaugeItem('produceGauge'+mainPageTypeId+index+1,item.mPoint); }) } },'json'); } var initialProduceBarAndLine =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Bar+','+ChartType_Line},function(data){ if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ var index_=index+1; var domItem ='
' +'
' +'
'; $('#'+id).append(domItem); switch(item.showWay){ case ChartType_Bar: initialProduceBarItem('produce'+mainPageTypeId+item.showWay+index_,item.mPoint); break; case ChartType_Line: initialProduceLineItem('produce'+mainPageTypeId+item.showWay+index_,item.mPoint); break; } }) } },'json'); } var initialEfficiencyBaseItem =function(id,mPoint){ $('#'+id).empty(); var domItem = '
'+ ''+ '
'+ ''+mPoint.parmvalue+''+ '
'+ '
'+ '
'+ ''+mPoint.parmname+''+ '
'+ '
'; $('#'+id).append(domItem); } var initialEfficiencyBase =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Base},function(data){ if(data.length>0 && data.length<13){ var colspan=parseInt(12/(data.length)); $.each(data,function(index,item){ var index_=index+1; var itemId =item.type+item.showWay+index_; var domItem ='
'+ '
'+ ''+ '
'+ ''+item.mPoint.parmvalue+''+ '
'+ '
'+ '
'+ ''+item.mPoint.parmname+''+ '
'+ '
'+ '
'; $('#'+id).append(domItem); }) } },'json'); } var initialEfficiencyGauge =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Gauge},function(data){ if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ var itemId =item.type+mainPageTypeId+item.showWay+index; var domItem ='
'; $('#'+id).append(domItem); initialEfficiencyGaugeItem(itemId,item.mPoint); }) } },'json'); } /** * 初始化默认块结构 */ var initialVerticalBlock =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); var showWay =ChartType_Base+","+ChartType_Gauge+','+ChartType_Line+','+ChartType_Bar; $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:showWay},function(data){ console.info(data); if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ //var itemId =mainPageTypeId+index; var itemId =item.type+mainPageTypeId+item.showWay+index; var domItem ='
'; $('#'+id).append(domItem); switch(item.showWay){ case ChartType_Gauge: initialProduceGaugeItem(itemId,item.mPoint); break; case ChartType_Line: initialProduceLineItem(itemId,item.mPoint); break; case ChartType_Bar: initialProduceBarItem(itemId,item.mPoint); break; default : initialEfficiencyBaseItem(itemId,item.mPoint); } }) } },'json'); } var initialHorizontalBlock =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); var showWay =ChartType_Base+","+ChartType_Gauge+','+ChartType_Line+','+ChartType_Bar; $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:showWay},function(data){ console.info(data); if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ //var itemId =item.type+mainPageTypeId+item.showWay+index; var itemId =item.type+mainPageTypeId+item.showWay+index; var domItem ='
'; $('#'+id).append(domItem); switch(item.showWay){ case ChartType_Gauge: initialProduceGaugeItem(itemId,item.mPoint); break; case ChartType_Line: initialProduceLineItem(itemId,item.mPoint); break; case ChartType_Bar: initialProduceBarItem(itemId,item.mPoint); break; default : initialEfficiencyBaseItem(itemId,item.mPoint); } }) } },'json'); } var initialEfficiencyBarAndLine =function(id,bizId,mainPageTypeId){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:bizId,type:mainPageTypeId,showWay:ChartType_Bar+','+ChartType_Line},function(data){ if(data.length>0 && data.length<13){ var colspan=parseInt(12/data.length); $.each(data,function(index,item){ var index_=index+1; var itemId =item.type+mainPageTypeId+item.showWay+index_; var domItem ='
' +'
' +'
'; $('#'+id).append(domItem); switch(item.showWay){ case ChartType_Bar: initialProduceBarItem(itemId,item.mPoint); break; case ChartType_Line: initialProduceLineItem(itemId,item.mPoint); break; } }) } },'json'); } var initialSecurityBase =function(id){ $('#'+id).empty(); $.post(ext.contextPath +"/base/mainPage/getAllList.do",{bizId:$("#bizId").val(),type:'${MainPageType_Security}',showWay:'${ChartType_Base}'},function(data){ if(data.length>0 ){//&& data.length<13 var colspan=4;//parseInt(12/(data.length+1)); var domItem ='
'+ '
'+ ''+ '
'+ ''+ '
'+ '
'+ '
'+ '安全'+ '
'+ '
'+ '
'; $('#'+id).append(domItem); $.each(data,function(index,item){ var index_=index+1; var itemId =item.type+item.showWay+index_; var domItem ='
'+ '
'+ ''+ '
'+ ''+item.mPoint.parmvalue+''+ '
'+ '
'+ '
'+ ''+item.mPoint.parmname+''+ '
'+ '
'+ '
'; $('#'+id).append(domItem); }) } },'json'); } var initialSecurityBarAndLine =function(id,bizId,dateSpan){ $('#'+id).empty(); var domItem ='
' +'
' +'
'; $('#'+id).append(domItem); initialSecurityBarItem("securitybar1",bizId,dateSpan); } //生产图表展示div function productShowDiv(containerId,jsonstr,index){ var mainPageType = JSON.parse(jsonstr); var productDom= '
'+ '
'+ '
'+ ' '+ '

'+mainPageType.title+'

'+ '
'+ ' '+ ' '+ '
'+ '
'+ ''+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'; $('#'+containerId).append(productDom); $('#'+mainPageType.id).boxWidget(); $('#'+mainPageType.id).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 initialProduceBase('produceBase'+index,mainPageType.bizId,mainPageType.id); initialProduceGauge('produceGauge'+index,mainPageType.bizId,mainPageType.id); initialProduceBarAndLine('produceBarALine'+index,mainPageType.bizId,mainPageType.id); } //效率图表展示div function efficiencyShowDiv(containerId,jsonstr,index){ var mainPageType = JSON.parse(jsonstr); var efficiencyDom= '
'+ '
'+ '
'+ ' '+ '

'+mainPageType.title+'

'+ '
'+ ' '+ ' '+ '
'+ '
'+ ' '+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'; $('#'+containerId).append(efficiencyDom); $('#'+mainPageType.id).boxWidget(); $('#'+mainPageType.id).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 initialEfficiencyBase('efficiencyBase'+index,mainPageType.bizId,mainPageType.id); initialEfficiencyGauge('efficiencyGauge'+index,mainPageType.bizId,mainPageType.id); initialEfficiencyBarAndLine('efficiencyBarALine'+index,mainPageType.bizId,mainPageType.id) } function verticalBlockShowDiv(containerId,jsonstr,index){ var mainPageType = JSON.parse(jsonstr); var efficiencyDom= '
'+ '
'+ '
'+ ' '+ '

'+mainPageType.title+'

'+ '
'+ ' '+ ' '+ '
'+ '
'+ ' '+ '
'+ '
'+ '
'+ '
'+ '
'; $('#'+containerId).append(efficiencyDom); $('#'+mainPageType.id).boxWidget(); $('#'+mainPageType.id).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 initialVerticalBlock(mainPageType.id+index,mainPageType.bizId,mainPageType.id); } function horizontalBlockShowDiv(containerId,jsonstr,index){ var mainPageType = JSON.parse(jsonstr); var efficiencyDom= '
'+ '
'+ '
'+ ' '+ '

'+mainPageType.title+'

'+ '
'+ ' '+ ' '+ '
'+ '
'+ ' '+ '
'+ '
'+ '
'+ '
'+ '
'; $('#'+containerId).append(efficiencyDom); $('#'+mainPageType.id).boxWidget(); $('#'+mainPageType.id).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 initialHorizontalBlock(mainPageType.id+index,mainPageType.bizId,mainPageType.id); } //安全图表展示div function securityShowDiv(containerId,bizId,index){ var securityDom= '
'+ '
'+ '
'+ ' '+ '

安全

'+ '
'+ ' '+ ' '+ '
'+ '
'+ ' '+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'; $('#'+containerId).append(securityDom); $('#'+mainPageType_Security).boxWidget(); $('#'+mainPageType_Security).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 initialSecurityBarAndLine('securityBarALine',bizId,dateSpan); } //公告展示div function infoShowDiv(containerId,bizId,index){ var infoDom= '
'+ ' '+ '
'; $('#'+containerId).append(infoDom); $('#'+mainPageType_Info).boxWidget(); $('#'+mainPageType_Info).on('removed.boxwidget',function(){setTimeout(function(){refreshMainPagePosition(containerId);}, 200);});//需要延时才能确保box被清除 //获取所有公告数量 $.post(ext.contextPath +"/info/getInfos.do",function(data){ if(data=='' || data.lenth==0){ $('#'+mainPageType_Info).hide(); }else{ $('#'+mainPageType_Info).show(); } $('#infoBoxBody').html(data); }); //初始化slimScroll /* $('#'+mainPageType_Info).slimScroll({ infoBoxBody: '270px' });*/ } /** * 保存布局 * */ var refreshMainPagePosition = function(containerId){ var $mainPageTypeDoms =$("#"+containerId).children(); var mainPageTypeIds=""; console.info($("#"+containerId).children()) $.each($mainPageTypeDoms,function(index,item){ var id=$(item).children('.box:first').attr('id'); console.info(id) if($(item).children('.box:first').attr('id')!=undefined){ if(mainPageTypeIds!=''){ mainPageTypeIds+=","; } mainPageTypeIds+=$(item).children('.box:first').attr('id'); } }); $.post(ext.contextPath +"/base/mainPageTypeUser/saveAndUpdate.do",{mainPageTypeIds:mainPageTypeIds},function(data){ },'json'); } /** * 默认初始化首页块 * */ var initialDefaultMainPageType =function(containerId,bizId,userId){ $.post(ext.contextPath +"/base/mainPageType/getAllList.do",{bizId:bizId},function(data){ $.each(data,function(index,item){ var jsonstr = JSON.stringify(item); switch(item.style){ case 'produce': productShowDiv(containerId,jsonstr,index); break; case 'efficiency': efficiencyShowDiv(containerId,jsonstr,index); break; case 'verticalBlock': verticalBlockShowDiv(containerId,jsonstr,index); break; default: horizontalBlockShowDiv(containerId,jsonstr,index); } }); //securityShowDiv(containerId,bizId); infoShowDiv(containerId,bizId); },'json'); } /** * 初始化首页 */ var initialMainPageType =function(containerId,bizId,userId){ $.post(ext.contextPath +"/base/mainPageTypeUser/getAllList.do",{},function(data){ var mainPageTypeUsers=data; if(mainPageTypeUsers==null || mainPageTypeUsers.length==0){ initialDefaultMainPageType(containerId,bizId,userId); }else{ //按用户自定义顺序显示 $.each(mainPageTypeUsers,function(index,item){ switch(item.type){ case mainPageType_Security: securityShowDiv(containerId,bizId); break; case mainPageType_Info: infoShowDiv(containerId,bizId); break; default: var mainPageType=item.mainPageType; if(mainPageType!=null){ var jsonstr = JSON.stringify(mainPageType); switch(mainPageType.style){ case 'produce': productShowDiv(containerId,jsonstr,index); break; case 'efficiency': efficiencyShowDiv(containerId,jsonstr,index); break; case 'verticalBlock': verticalBlockShowDiv(containerId,jsonstr,index); break; default: horizontalBlockShowDiv(containerId,jsonstr,index); } } } }); } },'json'); }