632 lines
27 KiB
Plaintext
632 lines
27 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||
<%String contextPath = request.getContextPath();%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<style type="text/css">
|
||
.triangle {
|
||
width: 0px;
|
||
height: 0px;
|
||
border-left: 4px solid transparent;
|
||
border-right: 4px solid transparent;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
border-top-color: #FFFFFF;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
|
||
let FJType = '0';
|
||
|
||
$(function () {
|
||
if ('${param.unitId}' != '') {
|
||
bizid = '${param.unitId}';
|
||
} else {
|
||
bizid = unitId;
|
||
}
|
||
|
||
getData();
|
||
|
||
})
|
||
|
||
function getData() {
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getSDKJspData.do",
|
||
dataType: 'json',
|
||
data: {
|
||
unitId: bizid,
|
||
jspId: 'primaryFanSysESDK',
|
||
modelType: FJType,
|
||
// time:""
|
||
},
|
||
async: true,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
if (data.length > 0) {
|
||
console.log(data)
|
||
|
||
let endCode = "";
|
||
if (FJType == '0') {
|
||
endCode = "_A";
|
||
} else if (FJType == '1') {
|
||
endCode = "_B";
|
||
} else if (FJType == '2') {
|
||
endCode = "_C";
|
||
}
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
let content = data[i];
|
||
if (content.getValueType == 'getRedisData') {
|
||
if (content.value != null) {
|
||
let redisValue = eval("(" + content.value + ")");
|
||
// console.log(redisValue)
|
||
let outValue = redisValue.mpvalue;
|
||
if (isNumber(outValue)) {
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.numtail != null) {
|
||
outValue = Number(outValue).toFixed(Number(content.visualCacheData.numtail));
|
||
}
|
||
}
|
||
}
|
||
if (content.elementCode.indexOf("_triangleMove1") != -1) {
|
||
outValue = toThousands(outValue);
|
||
$('#triangleMove1').css("margin-left", outValue + "%");
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.unit != null) {
|
||
outValue += content.visualCacheData.unit;
|
||
}
|
||
}
|
||
$('.' + content.elementCode.replace(endCode + "_triangleMove1", "")).text(outValue);
|
||
|
||
} else if (content.elementCode.indexOf("_triangleMove2") != -1) {
|
||
outValue = toThousands(outValue);
|
||
$('#triangleMove2').css("margin-left", outValue + "%");
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.unit != null) {
|
||
outValue += content.visualCacheData.unit;
|
||
}
|
||
}
|
||
$('.' + content.elementCode.replace(endCode + "_triangleMove2", "")).text(outValue);
|
||
} else {
|
||
outValue = toThousands(outValue);
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.unit != null) {
|
||
outValue += content.visualCacheData.unit;
|
||
}
|
||
}
|
||
$('.' + content.elementCode.replace(endCode, "")).text(outValue);
|
||
}
|
||
} else {
|
||
$('.' + content.elementCode).text('-');
|
||
}
|
||
|
||
} else if (content.getValueType == 'getMpMainValue') {
|
||
let outValue = content.mPoint.parmvalue;
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.numtail != null) {
|
||
outValue = Number(outValue).toFixed(Number(content.visualCacheData.numtail));
|
||
}
|
||
}
|
||
if (content.elementCode == 'chart1') {
|
||
getChart1(outValue);
|
||
} else if (content.elementCode == 'chart2') {
|
||
getChart2(outValue);
|
||
} else if (content.elementCode == 'chart3') {
|
||
getChart3(outValue);
|
||
} else if (content.elementCode == 'chart4') {
|
||
getChart4(outValue);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
function getChart1(value) {
|
||
let myChart = echarts.init(document.getElementById("chart1"));
|
||
let option = {
|
||
series: [{
|
||
name: '',
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 50000,
|
||
center: ['50%', '85%'],
|
||
radius: 70,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
shadowBlur: 0,
|
||
color: [
|
||
// [0.1, '#FF0000'],
|
||
// [0.12, '#FFF700'],
|
||
[0.2, '#FF0000'],
|
||
[0.5, '#00FF33'],
|
||
[0.6, '#FFF700'],
|
||
[1, '#FF0000']
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
splitNumber: 100,
|
||
axisLabel: { // 刻度值
|
||
show: true,
|
||
// splitNumber: 5,
|
||
formatter: function (value, index) {
|
||
const arr = [0, 10000, 25000, 30000, 50000];
|
||
if (arr.includes(value)) {
|
||
return (Number(value) / 10000)
|
||
}
|
||
},
|
||
fontSize: 12,
|
||
distance: -38,//刻度位置
|
||
color: '#fff'
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
offsetCenter: [0, -40],
|
||
width: 8,
|
||
length: '15%',
|
||
icon: 'triangle',
|
||
itemStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
detail: {
|
||
offsetCenter: [0, 0],
|
||
textStyle: {
|
||
color: "#00FF33",
|
||
fontSize: 26
|
||
},
|
||
},
|
||
data: [{
|
||
name: "",
|
||
value: value,
|
||
detail: {
|
||
formatter: function (value) {
|
||
return (value / 10000).toFixed(3);
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart2(value) {
|
||
let myChart = echarts.init(document.getElementById("chart2"));
|
||
let option = {
|
||
series: [{
|
||
name: '',
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 100,
|
||
center: ['50%', '85%'],
|
||
radius: 70,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.53, '#00FF33'],
|
||
[1, '#FF0000']
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
splitNumber: 100,
|
||
axisLabel: { // 刻度值
|
||
show: true,
|
||
// splitNumber: 5,
|
||
formatter: function (value, index) {
|
||
const arr = [0, 53, 100];
|
||
if (arr.includes(value)) {
|
||
return value
|
||
}
|
||
},
|
||
fontSize: 12,
|
||
distance: -38,//刻度位置
|
||
color: '#fff'
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
offsetCenter: [0, -40],
|
||
width: 8,
|
||
length: '15%',
|
||
icon: 'triangle',
|
||
itemStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
detail: {
|
||
offsetCenter: [0, 0],
|
||
textStyle: {
|
||
color: "#00FF33",
|
||
fontSize: 26
|
||
},
|
||
},
|
||
data: [{
|
||
name: "",
|
||
value: value
|
||
}]
|
||
}]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart3(value) {
|
||
let myChart = echarts.init(document.getElementById("chart3"));
|
||
let option = {
|
||
series: [{
|
||
name: '',
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 50,
|
||
center: ['50%', '85%'],
|
||
radius: 70,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.6, '#FF0000'],
|
||
[0.7, '#FFF700'],
|
||
[0.9, '#00FF33'],
|
||
[1, '#FF0000']
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
splitNumber: 100,
|
||
axisLabel: { // 刻度值
|
||
show: true,
|
||
// splitNumber: 5,
|
||
formatter: function (value, index) {
|
||
const arr = [0, 30, 35, 45, 50];
|
||
if (arr.includes(value)) {
|
||
return value
|
||
}
|
||
},
|
||
fontSize: 12,
|
||
distance: -38,//刻度位置
|
||
color: '#fff'
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
offsetCenter: [0, -40],
|
||
width: 8,
|
||
length: '15%',
|
||
icon: 'triangle',
|
||
itemStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
detail: {
|
||
offsetCenter: [0, 0],
|
||
textStyle: {
|
||
color: "#00FF33",
|
||
fontSize: 26
|
||
},
|
||
},
|
||
data: [{
|
||
name: "",
|
||
value: value
|
||
}]
|
||
}]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart4(value) {
|
||
let myChart = echarts.init(document.getElementById("chart4"));
|
||
let option = {
|
||
series: [{
|
||
name: '',
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 50,
|
||
center: ['50%', '85%'],
|
||
radius: 70,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.2, '#FF0000'],
|
||
[0.3, '#FFF700'],
|
||
[0.6, '#00FF33'],
|
||
[0.7, '#FFF700'],
|
||
[1, '#FF0000']
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
splitNumber: 100,
|
||
axisLabel: { // 刻度值
|
||
show: true,
|
||
// splitNumber: 5,
|
||
formatter: function (value, index) {
|
||
const arr = [0, 10, 15, 30, 35, 50];
|
||
if (arr.includes(value)) {
|
||
return value
|
||
}
|
||
},
|
||
fontSize: 12,
|
||
distance: -38,//刻度位置
|
||
color: '#fff'
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
offsetCenter: [0, -40],
|
||
width: 8,
|
||
length: '15%',
|
||
icon: 'triangle',
|
||
itemStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
detail: {
|
||
offsetCenter: [0, 0],
|
||
textStyle: {
|
||
color: "#00FF33",
|
||
fontSize: 26
|
||
},
|
||
},
|
||
data: [{
|
||
name: "",
|
||
value: value
|
||
}]
|
||
}]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function changeFJType() {
|
||
let nowType = $('#FJ_Type').val();
|
||
FJType = nowType;
|
||
getData();
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
|
||
<div id="main"
|
||
style="width: 538px;height: 822px;background:rgba(0,17,33,0.80);">
|
||
|
||
<div style="float:left;width: 100%;height:100%;padding-left: 15px;padding-right: 15px;">
|
||
<div style="float:left;width: 100%;height: 60px;line-height: 60px;border-bottom: 1px solid #ffffff;">
|
||
<div style="float:left;width: 200px;height: 100%;font-size: 20px;color: #ffffff;font-weight: 700;">
|
||
风机系统效率
|
||
</div>
|
||
<div style="float:right;width: 120px;height: 100%;">
|
||
<select id="FJ_Type" onchange="changeFJType();"
|
||
style="width: 120px;height: 36px;padding-left: 15px;background-color: #1869AE;color: #FFFFFF;border: 1px solid #00cbff;">
|
||
<option value='0'>一次风机A</option>
|
||
<option value='1'>一次风机B</option>
|
||
<option value='2'>一次风机C</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 60px;padding-top: 20px;">
|
||
<div style="float:left;width: 86px;height: 32px;background: rgba(42,122,255,0.00);color: #ffffff;line-height: 32px;padding-left:15px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle2.png);background-size: 100% 100%;">
|
||
健康评估
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 25px;text-align: center;line-height: 30px;color: #FFFFFF;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
效率
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
特性曲线偏差率
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 20px;text-align: center;line-height: 20px;color: #B8BEBE;font-size: 12px;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（%）
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（%）
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 60px;text-align: center;line-height: 60px;color: #01FFFF;font-size: 36px;">
|
||
<div class="FJXL" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
<div class="FJPCL" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 55px;padding-top: 0px;">
|
||
<div style="float:left;width: 50%;height: 12px;padding-left: 31px;padding-right: 39px;">
|
||
<div style="float:left;width:100%;">
|
||
<div id="triangleMove1" class="triangle" style="float:left;margin-left: 0%;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 12px;padding-left: 31px;padding-right: 39px;">
|
||
<div style="float:left;width:100%;">
|
||
<div id="triangleMove2" class="triangle" style="float:left;margin-left: 0%;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 24px;padding-left: 35px;padding-right: 35px;">
|
||
<div style="float:left;width: 100%;height: 15px;background: #fff700;border-radius: 4px;">
|
||
<div style="float:left;width: 20%;height: 15px;margin-left:60%;background: #00FF33;border-radius: 4px;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 24px;padding-left: 35px;padding-right: 35px;">
|
||
<div style="float:left;width: 100%;height: 15px;background: #fff700;border-radius: 4px;">
|
||
<div style="float:left;width: 10%;height: 15px;margin-left:0%;background: #00FF33;border-radius: 4px;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 12px;padding-left: 35px;padding-right: 35px;">
|
||
<div style="float:left;width: 95%;height: 100%;position: relative;">
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 0%;">
|
||
0
|
||
</div>
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 60%;">
|
||
60
|
||
</div>
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 80%;">
|
||
80
|
||
</div>
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 100%;">
|
||
100
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 12px;padding-left: 35px;padding-right: 35px;">
|
||
<div style="float:left;width: 95%;height: 100%;position: relative;">
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 0%;">
|
||
0
|
||
</div>
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 10%;">
|
||
10
|
||
</div>
|
||
<div style="float:left;position: absolute;height: 100%;color: #FFFFFF;margin-left: 100%;">
|
||
100
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="alarmSt1"
|
||
style="display: block;float:left;width: 100%;height: 160px;padding-top: 30px;padding-left: 10px;padding-right: 10px;">
|
||
<div style="float:left;width: 100%;height: 130px;background: #11283d;border-radius: 2px;">
|
||
<div style="float:left;width: 100%;height: 36px;background: linear-gradient(0deg,#124574 0%, #2d74b2 100%);border-radius: 2px;padding-left: 15px;padding-top: 4px;">
|
||
<div style="float:left;width:28px;height: 28px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/pass.png);background-size: 100% 100%;"></div>
|
||
<div style="float:left;margin-left:10px;width:150px;height: 28px;line-height: 28px;font-weight: 700;color: #ffffff;">
|
||
实时报警
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 94px;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="alarmSt2"
|
||
style="display: none;float:left;width: 100%;height: 160px;padding-top: 30px;padding-left: 10px;padding-right: 10px;">
|
||
<div style="float:left;width: 100%;height: 130px;background: #410707;border-radius: 2px;">
|
||
<div style="float:left;width: 100%;height: 36px;background: #C51616;border-radius: 2px;padding-left: 15px;padding-top: 4px;">
|
||
<div style="float:left;width:28px;height: 28px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/alarm.png);background-size: 100% 100%;"></div>
|
||
<div style="float:left;margin-left:10px;width:150px;height: 28px;line-height: 28px;font-weight: 700;color: #ffffff;">
|
||
风量异常
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 94px;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 60px;padding-top: 20px;">
|
||
<div style="float:left;width: 114px;height: 32px;background: rgba(42,122,255,0.00);color: #ffffff;line-height: 32px;padding-left:10px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle2.png);background-size: 100% 100%;">
|
||
运行参数一览
|
||
</div>
|
||
<div style="float:right;width: 100px;height: 36px;background: rgba(24,105,174,0.70);border: 1px solid #00cbff;border-radius: 2px;color: #ffffff;line-height: 36px;text-align: center;">
|
||
查看曲线 >>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 25px;text-align: center;line-height: 30px;color: #FFFFFF;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
风机流量
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
电流
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 20px;text-align: center;line-height: 20px;color: #B8BEBE;font-size: 12px;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（万m3/min）
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（A）
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 110px;">
|
||
<div id="chart1" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
<div id="chart2" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 25px;text-align: center;line-height: 30px;color: #FFFFFF;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
频率
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
出口压力
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 20px;text-align: center;line-height: 20px;color: #B8BEBE;font-size: 12px;">
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（Hz）
|
||
</div>
|
||
<div style="float:left;width: 50%;height: 100%;">
|
||
（KPaG）
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 110px;">
|
||
<div id="chart3" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
<div id="chart4" style="float:left;width: 50%;height: 100%;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
</html> |