first commit
This commit is contained in:
433
WebRoot/JS/main/main_cq.js
Normal file
433
WebRoot/JS/main/main_cq.js
Normal file
@ -0,0 +1,433 @@
|
||||
/**
|
||||
* 重庆项目首页
|
||||
*/
|
||||
|
||||
/*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/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != '') {
|
||||
var data = eval('(' + data + ')');
|
||||
console.log(data);
|
||||
$('#' + valueId).html(data.parmvalue);//赋值
|
||||
if (data.unit == undefined) {
|
||||
$('#' + textId).html(data.parmname);//赋值名称
|
||||
} else {
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
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 && data.unit!=null && data.unit!='') {
|
||||
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;
|
||||
}
|
||||
|
||||
//acvalue/100是为了按百分比计算
|
||||
var colorStr = '#6C6C6C';
|
||||
if (data.parmvalue < data.alarmmin) {
|
||||
colorStr = '#6C6C6C';
|
||||
} else if (data.parmvalue > data.alarmmax) {
|
||||
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.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 echartColumnar_10days(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Days.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var datastr = eval('(' + data + ')');
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
var data3 = datastr.legendJson;
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'],
|
||||
legend: {
|
||||
data: data3
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
},
|
||||
data: data2
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart折线图 -- 多点
|
||||
*/
|
||||
function echart_Line_Ids(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Month.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var datastr = eval('(' + data + ')');
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
var data3 = datastr.legendJson;
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'],
|
||||
legend: {
|
||||
data: data3
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
},
|
||||
data: data2
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getPic(unitId) {
|
||||
$("#mainImg").attr("src", ext.contextPath + "/IMG/main/main_" + unitId + ".jpg");
|
||||
}
|
||||
330
WebRoot/JS/main/main_js.js
Normal file
330
WebRoot/JS/main/main_js.js
Normal file
@ -0,0 +1,330 @@
|
||||
//金山项目首页
|
||||
|
||||
|
||||
/**
|
||||
* 获取点位实时值
|
||||
* @param unitId
|
||||
* @param mpointCode
|
||||
* @param valueId
|
||||
* @param textId
|
||||
*/
|
||||
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 + ')');//赋值名称+单位
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.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 echart_minvalue = 0.2;
|
||||
var echart_maxvalue = 0.8;
|
||||
|
||||
var data = eval('(' + data + ')');
|
||||
//180度的上限
|
||||
var maxvalue_20 = data.alarmmax * 1.2;
|
||||
//0度的下限
|
||||
var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
var maxvalue = data.alarmmax;
|
||||
var minvalue = data.alarmmin;
|
||||
|
||||
//判断是否需要下限
|
||||
if (data.alarmmin == null || data.alarmmin == '') {
|
||||
minvalue_20 = 0;
|
||||
minvalue = 0;
|
||||
echart_minvalue = 0;
|
||||
}
|
||||
|
||||
var parmvalue = data.parmvalue;
|
||||
var rate = 0;
|
||||
var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
|
||||
//计算实际值比例
|
||||
if (maxvalue_20 <= 1) {
|
||||
minvalue_20 = minvalue_20 * 100;
|
||||
maxvalue_20 = maxvalue_20 * 100;
|
||||
parmvalue = parmvalue * 100;
|
||||
minvalue = minvalue * 100;
|
||||
maxvalue = maxvalue * 100;
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
|
||||
rate += 20;
|
||||
} else {
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / maxvalue_20 * 100;
|
||||
rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
}
|
||||
|
||||
//计算颜色
|
||||
var colorStr = '#6C6C6C';
|
||||
if (parmvalue < minvalue) {
|
||||
colorStr = '#6C6C6C';
|
||||
} else if (parmvalue > maxvalue) {
|
||||
colorStr = '#f35a4a';
|
||||
} else {
|
||||
colorStr = '#66d99f';
|
||||
}
|
||||
|
||||
console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
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: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
color: [[echart_minvalue, '#f35a4a'], [echart_maxvalue, '#66d99f'], [maxvalue_20, '#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: rate}]
|
||||
}]
|
||||
};
|
||||
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/getValueMonth.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: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||
}, 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/getValueMonth.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: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||
}, 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/getValueWeekS.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var datastr = eval('(' + data + ')');
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
type: 'category', axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
}, data: data2
|
||||
}], yAxis: [{
|
||||
type: 'value'
|
||||
}], grid: {
|
||||
left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
}, series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图片
|
||||
* @param unitId
|
||||
*/
|
||||
function getPic(unitId) {
|
||||
$("#mainImg").attr("src", ext.contextPath + "/IMG/main/main_" + unitId + ".jpg");
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图片
|
||||
* @param unitId
|
||||
*/
|
||||
function getPic(unitId, unit, proDatavisualFrame) {
|
||||
//$("#mainImg").attr("src", ext.contextPath + "/IMG/main/main_" + unitId + ".jpg");
|
||||
var unitIds = JSON.parse(unit);
|
||||
var proDatavisualFrames = JSON.parse(proDatavisualFrame);
|
||||
var active = '';
|
||||
var item = '';
|
||||
var proDatavisualFrames_i = 0;
|
||||
if (unitIds != null && unitIds.length > 0) {
|
||||
for (var i = 0; i < unitIds.length; i++) {
|
||||
if (unitIds[i].type == 'B' || unitIds[i].type == 'C') {
|
||||
var proDatavisualFrameId = proDatavisualFrames[proDatavisualFrames_i];
|
||||
proDatavisualFrames_i++;
|
||||
if (unitId == unitIds[i].id) {
|
||||
active = 'active';
|
||||
} else {
|
||||
active = '';
|
||||
}
|
||||
var src = ext.contextPath + "/IMG/main/main_" + unitIds[i].id + ".jpg";
|
||||
item += '<div class="item ' + active + ' ">' + '<img src="' + src + '" class="mainImg">' + '<div class="carousel-caption" onclick="proDatavisualFrame(\'' + unitIds[i].id + '\',\'' + proDatavisualFrameId + '\')">' + '<h4>' + unitIds[i].text + '</h4>' + '</div>' + '</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#carousel-items").html(item);
|
||||
}
|
||||
|
||||
function getUnitsByUnitId4Select(id, funname, proDatavisualFrame) {
|
||||
$.post(ext.contextPath + "/user/getUnitsByUnitId4Select.do", {id: id}, function (data) {
|
||||
//console.log(data);
|
||||
var unitIds = data;
|
||||
eval(funname + "('" + id + "','" + unitIds + "','" + proDatavisualFrame + "')")
|
||||
});
|
||||
}
|
||||
|
||||
function proDatavisualFrame(unitId, proDatavisualFrameId) {
|
||||
if (proDatavisualFrameId != null && proDatavisualFrameId != undefined && proDatavisualFrameId != '') {
|
||||
parent.addTab(proDatavisualFrameId, '工艺可视化', 'process/dataVisualFrame/view.do?frameId=' + proDatavisualFrameId + '&unitId=' + unitId);
|
||||
}
|
||||
}
|
||||
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