481 lines
17 KiB
Plaintext
481 lines
17 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">
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
let TypeSt = '0';
|
|
|
|
$(function () {
|
|
if ('${param.unitId}' != '') {
|
|
bizid = '${param.unitId}';
|
|
} else {
|
|
bizid = unitId;
|
|
}
|
|
getData();
|
|
})
|
|
|
|
let chart1Series = [];
|
|
chart1Series.push({
|
|
name: '45Hz',
|
|
data: [
|
|
[12500, 29.86350247],
|
|
[13000, 29.80376419],
|
|
[13500, 29.73451166],
|
|
[14000, 29.65574487],
|
|
[14500, 29.56746383],
|
|
[15000, 29.46966853],
|
|
[15500, 29.36235898],
|
|
[16000, 29.24553517],
|
|
[16500, 29.1191971],
|
|
[17000, 28.98334478],
|
|
[17500, 28.83797821],
|
|
[18000, 28.68309738],
|
|
[18500, 28.51870229],
|
|
[19000, 28.34479295],
|
|
[19500, 28.16136935],
|
|
[20000, 27.9684315],
|
|
[20500, 27.76597939],
|
|
[21000, 27.55401303],
|
|
[21500, 27.33253241],
|
|
[22000, 27.10153754],
|
|
[22500, 26.86102841],
|
|
[23000, 26.61100503],
|
|
[23500, 26.35146739],
|
|
[24000, 26.0824155],
|
|
[24500, 25.80384935]
|
|
],
|
|
type: 'line',
|
|
endLabel: {
|
|
show: true,
|
|
color: '#FFFFFF',
|
|
formatter: '{a}'
|
|
}
|
|
})
|
|
chart1Series.push({
|
|
name: '40Hz',
|
|
data: [
|
|
[11000, 23.60647936],
|
|
[11500, 23.55496438],
|
|
[12000, 23.49393514],
|
|
[12500, 23.42339165],
|
|
[13000, 23.3433339],
|
|
[13500, 23.25376189],
|
|
[14000, 23.15467564],
|
|
[14500, 23.04607512],
|
|
[15000, 22.92796035],
|
|
[15500, 22.80033133],
|
|
[16000, 22.66318805],
|
|
[16500, 22.51653051],
|
|
[17000, 22.36035872],
|
|
[17500, 22.19467268],
|
|
[18000, 22.01947238],
|
|
[18500, 21.83475782],
|
|
[19000, 21.64052901],
|
|
[19500, 21.43678594],
|
|
[20000, 21.22352862],
|
|
[20500, 21.00075704],
|
|
[21000, 20.76847121],
|
|
[21500, 20.52667112]
|
|
],
|
|
type: 'line',
|
|
endLabel: {
|
|
show: true,
|
|
color: '#FFFFFF',
|
|
formatter: '{a}'
|
|
}
|
|
})
|
|
chart1Series.push({
|
|
name: '35Hz',
|
|
data: [
|
|
[9000, 18.11741915],
|
|
[9500, 18.08364172],
|
|
[10000, 18.04035003],
|
|
[10500, 17.98754409],
|
|
[11000, 17.92522389],
|
|
[11500, 17.85338944],
|
|
[12000, 17.77204073],
|
|
[12500, 17.68117777],
|
|
[13000, 17.58080055],
|
|
[13500, 17.47090908],
|
|
[14000, 17.35150335],
|
|
[14500, 17.22258337],
|
|
[15000, 17.08414913],
|
|
[15500, 16.93620063],
|
|
[16000, 16.77873788],
|
|
[16500, 16.61176088],
|
|
[17000, 16.43526962],
|
|
[17500, 16.2492641],
|
|
[18000, 16.05374433]
|
|
],
|
|
type: 'line',
|
|
endLabel: {
|
|
show: true,
|
|
color: '#FFFFFF',
|
|
formatter: '{a}'
|
|
}
|
|
})
|
|
|
|
let chart2Series = [];
|
|
|
|
|
|
function getData() {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getSDKJspData.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: bizid,
|
|
jspId: 'primaryFanSysECurveSDK',
|
|
modelType: '0',
|
|
// time: $('#dateTime').val()
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
console.log(data)
|
|
let chart1Series_scatter = [];
|
|
chart2Series = [];
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let content = data[i];
|
|
if (content.getValueType == 'getRedisData') {
|
|
let redisValue = eval("(" + content.value + ")");
|
|
// console.log(redisValue)
|
|
let outValue = redisValue.mpvalue;
|
|
if (content.visualCacheData != null) {
|
|
if (content.visualCacheData.numtail != null) {
|
|
outValue = Number(outValue).toFixed(Number(content.visualCacheData.numtail));
|
|
}
|
|
}
|
|
if (content.elementCode == 'chart1') {
|
|
chart1Series_scatter.push(Number(outValue));
|
|
}
|
|
} else if (content.getValueType == 'getDayHistory') {
|
|
|
|
// chart2Series.push({
|
|
// name: content.name,
|
|
// type: 'line',
|
|
// symbol: 'none',
|
|
// data: content.jsonArray
|
|
// })
|
|
}
|
|
}
|
|
|
|
let chart1SeriesData = [];
|
|
chart1SeriesData.push(chart1Series_scatter)
|
|
chart1Series.push({
|
|
data: chart1SeriesData,
|
|
type: 'scatter',
|
|
name: ''
|
|
})
|
|
}
|
|
getChart1();
|
|
getChart2('SDKWN_MODEL1_HZ_A', 'SDKWN_MODEL1_EFF_A');
|
|
}
|
|
});
|
|
}
|
|
|
|
function getChart1() {
|
|
let myChart = echarts.init(document.getElementById("chart1"));
|
|
let option = {
|
|
backgroundColor: "#0C0C0C",
|
|
title: {
|
|
text: "频率",
|
|
left: 'center',
|
|
top: 10,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
fontWeight: 'normal'
|
|
|
|
}
|
|
},
|
|
// legend: {
|
|
// data: ['45Hz', '40Hz', '35Hz'],
|
|
// left: 'right'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '10px', // 与容器左侧的距离
|
|
right: '40px', // 与容器右侧的距离
|
|
top: '40px', // 与容器顶部的距离
|
|
bottom: '15px', // 与容器底部的距离
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
name: 'm³/\nmin',
|
|
type: 'value',
|
|
min: 5000,
|
|
max: 35000,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: 'kPa',
|
|
type: 'value',
|
|
min: 0,
|
|
max: 40,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: chart1Series
|
|
};
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
function getChart2(mpid1, mpid2) {
|
|
let edt = getNowTime().substring(0, 10) + " 23:59";
|
|
let sdt = edt.substring(0, 10) + " 00:00";
|
|
|
|
let series = [];
|
|
let legendName = [];
|
|
let yUnit1 = "";
|
|
let yUnit2 = "";
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/data/getDetailData.do",
|
|
dataType: 'json',
|
|
data: {
|
|
mpcode: mpid1, sdt: sdt, edt: edt
|
|
},
|
|
async: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (result) {
|
|
if (result.length > 0) {
|
|
legendName.push(result[0].name);
|
|
yUnit1 = result[0].unit;
|
|
series.push({
|
|
name: result[0].name,
|
|
data: result[0].data,
|
|
type: 'scatter'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/data/getDetailData.do",
|
|
dataType: 'json',
|
|
data: {
|
|
mpcode: mpid2, sdt: sdt, edt: edt
|
|
},
|
|
async: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (result) {
|
|
if (result.length > 0) {
|
|
legendName.push(result[0].name);
|
|
yUnit2 = result[0].unit;
|
|
series.push({
|
|
name: result[0].name,
|
|
data: result[0].data,
|
|
type: 'scatter'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById("chart2").removeAttribute("_echarts_instance_");
|
|
let myChart = echarts.init(document.getElementById("chart2"));
|
|
let option = {
|
|
backgroundColor: "#0C0C0C",
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: legendName,
|
|
top: '5px',
|
|
right: '0px',
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#FFFFFF'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '10px', // 与容器左侧的距离
|
|
right: '30px', // 与容器右侧的距离
|
|
top: '40px', // 与容器顶部的距离
|
|
bottom: '15px', // 与容器底部的距离
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
name: yUnit1,
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: yUnit2,
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
position: 'right'
|
|
}
|
|
],
|
|
series: series
|
|
};
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
function changeType(st) {
|
|
TypeSt = st;
|
|
if (st == '0') {
|
|
$('#Type0').css("border-bottom", "2px solid #00CBFF");
|
|
$('#Type0').css("color", "#00CBFF");
|
|
|
|
$('#Type1').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type1').css("color", "#ffffff");
|
|
$('#Type2').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type2').css("color", "#ffffff");
|
|
getChart2('SDKWN_MODEL1_HZ_A', 'SDKWN_MODEL1_EFF_A');
|
|
} else if (st == '1') {
|
|
$('#Type1').css("border-bottom", "2px solid #00CBFF");
|
|
$('#Type1').css("color", "#00CBFF");
|
|
|
|
$('#Type0').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type0').css("color", "#ffffff");
|
|
$('#Type2').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type2').css("color", "#ffffff");
|
|
getChart2('V401A_HZ', 'V401A_Current');
|
|
} else if (st == '2') {
|
|
$('#Type2').css("border-bottom", "2px solid #00CBFF");
|
|
$('#Type2').css("color", "#00CBFF");
|
|
|
|
$('#Type0').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type0').css("color", "#ffffff");
|
|
$('#Type1').css("border-bottom", "0px solid #00CBFF");
|
|
$('#Type1').css("color", "#ffffff");
|
|
getChart2('V401A_HZ', 'FT_V401A_PV');
|
|
}
|
|
|
|
}
|
|
|
|
</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: 978px;height: 339px;background:rgba(0,17,33,0.80);">
|
|
<div style="float: left;width: 50%;height: 100%;">
|
|
<div style="float:left;width: 100%;height: 60px;padding-top: 20px;">
|
|
<div style="float:left;width: 120px;height: 32px;background: rgba(42,122,255,0.00);color: #ffffff;line-height: 32px;padding-left:20px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle2.png);background-size: 100% 100%;">
|
|
风机特性曲线
|
|
</div>
|
|
</div>
|
|
<div style="float:left;width: 100%;height: calc(100% - 60px);padding: 10px;">
|
|
<div id="chart1" style="float:left;width: 100%;height:100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 50%;height: 100%;">
|
|
<div style="float:left;width: 100%;height: 60px;padding-top: 20px;">
|
|
<div style="float: left;height: 100%;">
|
|
<div id="Type0"
|
|
style="float: left;border-bottom: 2px solid #00CBFF;width:75px;height: 30px;font-size: 13px;text-align: center;color: #00CBFF;cursor: pointer;"
|
|
onclick="changeType('0');">频率与效率
|
|
</div>
|
|
<div id="Type1"
|
|
style="float: left;width:75px;height: 30px;font-size: 13px;text-align: center;color: #ffffff;margin-left: 20px;cursor: pointer;"
|
|
onclick="changeType('1');">频率与电流
|
|
</div>
|
|
<div id="Type2"
|
|
style="float: left;width:75px;height: 30px;font-size: 13px;text-align: center;color: #ffffff;margin-left: 20px;cursor: pointer;"
|
|
onclick="changeType('2');">频率与风量
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="float:left;width: 100%;height: calc(100% - 60px);padding: 10px;">
|
|
<div id="chart2" style="float:left;width: 100%;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> |