933 lines
37 KiB
JavaScript
933 lines
37 KiB
JavaScript
//定制化显示块-安全、公告
|
||
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} <br/>{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){
|
||
/* <div id="bar1" style="height:240px;"> </div> */
|
||
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} <br/>{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 ='<div class="info-box bg-green" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-ribbon-a"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">优<i class="ion ion-arrow-up-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">生产</span>'+
|
||
'</div>'+
|
||
'</div>';*/
|
||
//$('#'+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 ='<div class="info-box bg-light-blue" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-waterdrop"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">'+item.mPoint.parmvalue+'<i class="ion ion-arrow-up-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">'+item.mPoint.parmname+'</span>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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 ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'
|
||
+'<div id="produceGauge'+mainPageTypeId+index+1+'" style="height:200px;"></div>'
|
||
+'</div>';
|
||
$('#'+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 ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'
|
||
+'<div id="produce'+mainPageTypeId+item.showWay+index_+'" style="height:200px;"></div>'
|
||
+'</div>';
|
||
$('#'+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 =
|
||
'<div class="info-box bg-light-blue" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-waterdrop"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">'+mPoint.parmvalue+'<i class="ion ion-arrow-up-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">'+mPoint.parmname+'</span>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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 ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'+
|
||
'<div class="info-box bg-light-blue" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-waterdrop"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">'+item.mPoint.parmvalue+'<i class="ion ion-arrow-up-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">'+item.mPoint.parmname+'</span>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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 ='<div id='+itemId+' style="height:200px;"></div>';
|
||
$('#'+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 ='<div id='+itemId+' " style="height:200px;"></div>';
|
||
$('#'+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 ='<div id='+itemId+' class="col-lg-'+colspan+' col-md-'+colspan+'" style="height:200px;"></div>';
|
||
$('#'+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 ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'
|
||
+'<div id="'+itemId+'" style="height:200px;"></div>'
|
||
+'</div>';
|
||
$('#'+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 ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'+
|
||
'<div class="info-box bg-orange" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-ribbon-a"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">良<i class="ion ion-arrow-down-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">安全</span>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+id).append(domItem);
|
||
$.each(data,function(index,item){
|
||
var index_=index+1;
|
||
var itemId =item.type+item.showWay+index_;
|
||
var domItem ='<div class="col-lg-'+colspan+' col-md-'+colspan+'">'+
|
||
'<div class="info-box bg-light-blue" style="height: 50px">'+
|
||
'<span class="info-box-icon" ><i class="ion ion-waterdrop"></i></span>'+
|
||
'<div class="info-box-content">'+
|
||
'<span class="info-box-number" style="margin-top:10px;">'+item.mPoint.parmvalue+'<i class="ion ion-arrow-up-a pull-right"></i></span>'+
|
||
'<div class="progress">'+
|
||
'<div class="progress-bar" style="width: 100%"></div>'+
|
||
'</div> '+
|
||
'<span class="progress-description" style="text-align:right;">'+item.mPoint.parmname+'</span>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+id).append(domItem);
|
||
|
||
})
|
||
}
|
||
},'json');
|
||
}
|
||
var initialSecurityBarAndLine =function(id,bizId,dateSpan){
|
||
$('#'+id).empty();
|
||
var domItem ='<div class="col-lg-12 col-md-12">'
|
||
+'<div id="securitybar1" style="height:400px;"></div>'
|
||
+'</div>';
|
||
$('#'+id).append(domItem);
|
||
initialSecurityBarItem("securitybar1",bizId,dateSpan);
|
||
|
||
}
|
||
//生产图表展示div
|
||
function productShowDiv(containerId,jsonstr,index){
|
||
var mainPageType = JSON.parse(jsonstr);
|
||
var productDom=
|
||
'<div class="col-lg-'+mainPageType.classlg+' col-xs-12">'+
|
||
'<div class="box box-primary" style="padding-bottom:10px" id="'+mainPageType.id+'">'+
|
||
'<div class="box-header ui-sortable-handle">'+
|
||
' <i class="fa fa-industry"></i>'+
|
||
' <h3 class="box-title">'+mainPageType.title+'</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'<!-- /.box-header -->'+
|
||
'<div class="box-body">'+
|
||
' <div class="col-lg-3 col-md-3" id="produceBase'+index+'"></div>'+
|
||
' <div class="col-lg-9 col-md-9">'+
|
||
' <div id="produceGauge'+index+'"></div>'+
|
||
' <div id="produceBarALine'+index+'"></div>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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=
|
||
'<div class="col-lg-'+mainPageType.classlg+' col-xs-12">'+
|
||
'<div class="box box-primary" style="padding-bottom:10px" id="'+mainPageType.id+'">'+
|
||
' <div class="box-header ui-sortable-handle">'+
|
||
' <i class="fa fa-dashboard"></i>'+
|
||
' <h3 class="box-title">'+mainPageType.title+'</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse" ><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove" ><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
' <!-- /.box-header -->'+
|
||
' <div class="box-body">'+
|
||
' <div id="efficiencyBase'+index+'"></div>'+
|
||
' <div>'+
|
||
' <div class="col-lg-3 col-md-3" id="efficiencyGauge'+index+'"></div>'+
|
||
' <div class="col-lg-9 col-md-9" id="efficiencyBarALine'+index+'"></div>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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=
|
||
'<div class="col-lg-'+mainPageType.classlg+' col-xs-12">'+
|
||
'<div class="box box-primary" style="padding-bottom:10px" id="'+mainPageType.id+'">'+
|
||
' <div class="box-header ui-sortable-handle">'+
|
||
' <i class="fa fa-area-chart"></i>'+
|
||
' <h3 class="box-title">'+mainPageType.title+'</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
' <!-- /.box-header -->'+
|
||
' <div class="box-body">'+
|
||
' <div id="'+mainPageType.id+index+'"></div>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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=
|
||
'<div class="col-lg-'+mainPageType.classlg+' col-xs-12">'+
|
||
'<div class="box box-primary" style="padding-bottom:10px" id="'+mainPageType.id+'">'+
|
||
' <div class="box-header ui-sortable-handle">'+
|
||
' <i class="fa fa-area-chart"></i>'+
|
||
' <h3 class="box-title">'+mainPageType.title+'</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
' <!-- /.box-header -->'+
|
||
' <div class="box-body">'+
|
||
' <div id="'+mainPageType.id+index+'"></div>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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=
|
||
'<div class="col-lg-8 col-xs-12">'+
|
||
'<div class="box box-primary" style="padding-bottom:10px" id="'+mainPageType_Security+'">'+
|
||
' <div class="box-header ui-sortable-handle">'+
|
||
' <i class="fa fa-shield"></i>'+
|
||
' <h3 class="box-title">安全</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
' <!-- /.box-header -->'+
|
||
' <div class="box-body" style="overflow: hidden; width: auto;">'+
|
||
' <div id="securityBase"></div>'+
|
||
' <div>'+
|
||
' <div class="col-lg-12 col-md-12" id="securityBarALine"></div>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
'</div>'+
|
||
'</div>';
|
||
$('#'+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=
|
||
'<div class="col-lg-4 col-xs-12">'+
|
||
' <div class="box box-primary" style="padding-bottom:10px;display:none" id="'+mainPageType_Info+'">'+
|
||
' <div class="box-header ui-sortable-handle">'+
|
||
' <i class="ion ion-clipboard"></i>'+
|
||
' <h3 class="box-title">公告</h3>'+
|
||
' <div class="box-tools pull-right">'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>'+
|
||
' </button>'+
|
||
' <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>'+
|
||
' </button>'+
|
||
' </div> '+
|
||
' </div>'+
|
||
' <!-- /.box-header -->'+
|
||
' <div class="box-body" id="infoBoxBody"'+
|
||
' style="overflow: hidden; width: auto;">'+
|
||
' </div>'+
|
||
' <div class="box-footer">'+
|
||
' <a class="pull-right " onclick="goToLocation(\'info/showViewList.do\')" style="cursor:pointer ">查看更多'+
|
||
' <i class="fa fa-arrow-circle-right"></i></a>'+
|
||
' </div>'+
|
||
' </div>'+
|
||
'</div>';
|
||
$('#'+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');
|
||
}
|
||
|