433 lines
14 KiB
JavaScript
433 lines
14 KiB
JavaScript
|
/**
|
||
|
|
* 重庆项目首页
|
||
|
|
*/
|
||
|
|
|
||
|
|
/*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");
|
||
|
|
}
|