first commit
This commit is contained in:
932
WebRoot/JS/mainPage.js
Normal file
932
WebRoot/JS/mainPage.js
Normal file
@ -0,0 +1,932 @@
|
||||
//定制化显示块-安全、公告
|
||||
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');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user