330 lines
12 KiB
JavaScript
330 lines
12 KiB
JavaScript
|
//金山项目首页
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取点位实时值
|
||
|
|
* @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);
|
||
|
|
}
|
||
|
|
}
|