first commit
This commit is contained in:
425
WebRoot/JS/main/main_zibo.js
Normal file
425
WebRoot/JS/main/main_zibo.js
Normal file
@ -0,0 +1,425 @@
|
||||
/**
|
||||
* 重庆项目首页
|
||||
*/
|
||||
|
||||
/*function pie1(unitId, mpointCode, echartId) {
|
||||
var unitId = '021THZS';
|
||||
var mpointCode = 'P3flow1_total';
|
||||
echartPie(unitId, mpointCode, echartId);//通用环形图
|
||||
}*/
|
||||
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != '') {
|
||||
var data = eval('(' + data + ')');
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
// var maxvalue = data.alarmmax/0.8;
|
||||
// var minvalue = data.alarmmin/maxvalue;
|
||||
// var acvalue = data.parmvalue/maxvalue*100;
|
||||
$('#' + valueId).html(data.parmvalue);//赋值
|
||||
if (data.unit == undefined) {
|
||||
$('#' + textId).html(data.parmname);//赋值名称
|
||||
} else {
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getfindDATA(unitId, page_nub, spanId) {
|
||||
$.ajax({
|
||||
url: ext.contextPath + '/equipment/findDATA1.do', // 获取测量点数据的url
|
||||
async: true,
|
||||
data: {
|
||||
bizId: unitId,
|
||||
data_number: spanId,
|
||||
page_nub: page_nub
|
||||
|
||||
},
|
||||
success: function (data) {
|
||||
$('#' + spanId).html(data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var data = eval('(' + data + ')');
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
var maxvalue = 100;
|
||||
var minvalue = 0;
|
||||
var acvalue = 0;
|
||||
var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined) {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
|
||||
if (data.alarmmax != undefined) {
|
||||
maxvalue = data.alarmmax / 0.8;
|
||||
}
|
||||
if (data.alarmmin != undefined) {
|
||||
minvalue = data.alarmmin / maxvalue;
|
||||
}
|
||||
if (data.alarmmax != undefined && data.alarmmin != undefined) {
|
||||
acvalue = data.parmvalue / maxvalue * 100;
|
||||
} else {
|
||||
acvalue = data.parmvalue;
|
||||
}
|
||||
// console.log(minvalue);
|
||||
// console.log(maxvalue);
|
||||
// console.log(acvalue);
|
||||
|
||||
// maxvalue = 0.8;
|
||||
// minvalue = 0.2;
|
||||
// acvalue = 10;
|
||||
|
||||
//acvalue/100是为了按百分比计算
|
||||
var colorStr = '#6C6C6C';
|
||||
if ((acvalue / 100) < minvalue) {
|
||||
colorStr = '#6C6C6C';
|
||||
} else if ((acvalue / 100) > maxvalue) {
|
||||
colorStr = '#f35a4a';
|
||||
} else {
|
||||
colorStr = '#66d99f';
|
||||
}
|
||||
|
||||
// console.log('下限：' + minvalue + '------上限：' + maxvalue + '------实际比率：' + acvalue + '------实际值：' + data.parmvalue + '------' + colorStr);
|
||||
|
||||
var option = {
|
||||
toolbox: { //可视化的工具箱
|
||||
show: false,
|
||||
feature: {
|
||||
restore: { //重置
|
||||
show: true
|
||||
},
|
||||
saveAsImage: {//保存图片
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
radius: 70,
|
||||
center: ['50%', '80%'],//设置饼图位置
|
||||
axisLine: {
|
||||
show: true,
|
||||
// 属性lineStyle控制线条样式
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [[minvalue, '#e2e2e2'], [0.8, '#66d99f'], [1, '#f35a4a']]
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
length: '40px',
|
||||
width: '3px',
|
||||
},
|
||||
detail: {
|
||||
offsetCenter: [0, '20%'],
|
||||
fontSize: 14,
|
||||
color: colorStr,
|
||||
//formatter: data.parmname,
|
||||
formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
},
|
||||
data: [
|
||||
// {value: data.parmvalue}
|
||||
{value: acvalue}
|
||||
]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart折线图--通用
|
||||
*/
|
||||
function echartLine(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValueDay.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var data = eval('(' + data + ')');
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: [{
|
||||
left: 'center',
|
||||
text: data.name
|
||||
}],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上限',
|
||||
type: 'line',
|
||||
// stack: '总量',
|
||||
data: data.maxlist
|
||||
},
|
||||
{
|
||||
name: '下限',
|
||||
type: 'line',
|
||||
// stack: '总量',
|
||||
data: data.minlist
|
||||
},
|
||||
{
|
||||
name: '实际值',
|
||||
type: 'line',
|
||||
// stack: '总量',
|
||||
data: data.datalist
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图--单柱通用
|
||||
*/
|
||||
function echartColumnar(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValueDay.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var data = eval('(' + data + ')');
|
||||
var option = {
|
||||
color: '#62AEDF',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
title: [{
|
||||
left: 'center',
|
||||
text: data.name
|
||||
}],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: [{
|
||||
data: data.datalist,
|
||||
type: 'bar',
|
||||
showBackground: true
|
||||
// backgroundStyle: {
|
||||
// //color: '#62AEDF'
|
||||
// }
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图--双柱通用
|
||||
*/
|
||||
function echartColumnar2(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
//var data = eval('(' + data + ')');
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'],
|
||||
legend: {
|
||||
data: ['报警数', '未解除报警数']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '报警数',
|
||||
type: 'bar',
|
||||
data: [3, 4.9, 7.0, 23.2, 25.6, 22.7, 22.6, 22.2, 32.6, 20.0, 6.4, 3.3],
|
||||
},
|
||||
{
|
||||
name: '未解除报警数',
|
||||
type: 'bar',
|
||||
data: [0, 0, 1, 2, 4, 3, 2, 2, 0, 1, 2, 2],
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图
|
||||
*/
|
||||
function echartColumnar12(unitId, page_nub, spanId) {
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue2.do',
|
||||
async: true,
|
||||
data: {
|
||||
bizId: unitId,
|
||||
data_number: spanId,
|
||||
page_nub: page_nub
|
||||
|
||||
},
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (ALLdata) {
|
||||
var data = JSON.parse(ALLdata);
|
||||
var myChart = echarts.init(document.getElementById(spanId));
|
||||
var emphasisStyle = {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
};
|
||||
option = {
|
||||
legend: {
|
||||
data: ['一号车间每日出理水量', '二号车间每日出理水量'],
|
||||
left: '20%'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: data.value,
|
||||
name: '号',
|
||||
axisLine: {onZero: true},
|
||||
splitLine: {show: false},
|
||||
splitArea: {show: false}
|
||||
},
|
||||
yAxis: {},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '一号车间每日出理水量',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data.value0
|
||||
},
|
||||
{
|
||||
name: '二号车间每日出理水量',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data.value1
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getPic(unitId) {
|
||||
$("#mainImg").attr("src", ext.contextPath + "/IMG/main/main_" + unitId + ".jpg");
|
||||
}
|
||||
Reference in New Issue
Block a user