500 lines
23 KiB
Plaintext
500 lines
23 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" %>
|
|
|
|
<!DOCTYPE html>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
<head>
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
<!-- 引入daterangepicker-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
|
|
<style type="text/css">
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
let nowUnitId = "";
|
|
|
|
$(function () {
|
|
let windowwidth = $(window).width();
|
|
let windowhight = $(window).height();
|
|
|
|
$('#main').css("width", windowwidth + "px");
|
|
$('#main').css("height", windowhight + "px");
|
|
|
|
if ('${param.unitId}' != '') {
|
|
nowUnitId = '${param.unitId}';
|
|
} else {
|
|
nowUnitId = unitId;
|
|
}
|
|
|
|
getData1();
|
|
getData2();
|
|
});
|
|
|
|
function getData1() {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getDataByJspCode_TY.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: nowUnitId,
|
|
jspId: 'bim_overviewOfWaterPlants',
|
|
dataType: "0",
|
|
// sdt: '2022-06-01',
|
|
// edt: '2022-06-01'
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
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));
|
|
}
|
|
}
|
|
outValue = toThousands(outValue);
|
|
}
|
|
if (content.visualCacheData != null) {
|
|
if (content.visualCacheData.unit != null) {
|
|
outValue += content.visualCacheData.unit;
|
|
}
|
|
}
|
|
$('.' + content.elementCode).text(outValue);
|
|
} else {
|
|
$('.' + content.elementCode).text('-');
|
|
}
|
|
} else if (content.getValueType == 'getMpMainValue') {
|
|
if (content.mPoint != null) {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
getChart1();
|
|
getChart2();
|
|
}
|
|
|
|
function getData2() {
|
|
let edt = getNowTime();
|
|
let sdt = getPlusTime(edt, "-30", "day");
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getDataByJspCode_TY.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: nowUnitId,
|
|
jspId: 'bim_overviewOfWaterPlants',
|
|
dataType: "1",
|
|
sdt: edt,
|
|
edt: sdt
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let content = data[i];
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function getChart1() {
|
|
let value = 85;
|
|
let myChart = echarts.init(document.getElementById("chart1"));
|
|
let option = {
|
|
title: [
|
|
{
|
|
text: '运行负荷',
|
|
x: 'center',
|
|
top: '55%',
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
fontWeight: '100',
|
|
},
|
|
},
|
|
{
|
|
text: value + '%',
|
|
x: 'center',
|
|
top: '30%',
|
|
textStyle: {
|
|
fontSize: '26',
|
|
color: '#FFFFFF',
|
|
fontFamily: 'DINAlternate-Bold, DINAlternate',
|
|
foontWeight: '600',
|
|
},
|
|
},
|
|
],
|
|
polar: {
|
|
radius: ['80%', '90%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
show: false,
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true,
|
|
barWidth: 30,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: 'rgba(66, 66, 66, .3)',
|
|
},
|
|
data: [value],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: '#16CEB9',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#21FFE5',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
startAngle: 80,
|
|
radius: ['75%', '95%'],
|
|
hoverAnimation: false,
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
color: 'rgba(66, 66, 66, .1)',
|
|
borderWidth: 1,
|
|
borderColor: '#5269EE',
|
|
},
|
|
data: [100],
|
|
},
|
|
]
|
|
};
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
function getChart2() {
|
|
let myChart = echarts.init(document.getElementById("chart2"));
|
|
let option = {
|
|
color: ['#1BFFDB', '#40B5FF'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '10px', // 与容器左侧的距离
|
|
right: '10px', // 与容器右侧的距离
|
|
top: '30px', // 与容器顶部的距离
|
|
bottom: '30px', // 与容器底部的距离
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: 5,
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
icon: 'circle',
|
|
padding: 0,
|
|
right: 20,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
padding: [2, 0, 0, 0],
|
|
},
|
|
data: ['处理水量', '计划水量']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
position: 'bottom',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitArea: {
|
|
// show: true,
|
|
color: '#f00',
|
|
lineStyle: {
|
|
color: '#f00',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
margin: 15
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
boundaryGap: false,
|
|
data: ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '万吨',
|
|
nameTextStyle: {
|
|
color: '#fff'
|
|
},
|
|
type: 'value',
|
|
splitNumber: 5,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.3)',
|
|
width: 1,
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
margin: 20,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '处理水量',
|
|
type: 'line',
|
|
smooth: true, //是否平滑
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#00E39A',
|
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
|
shadowBlur: 0,
|
|
shadowOffsetY: 1,
|
|
shadowOffsetX: 1
|
|
},
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(27,255,219,0.5)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(27,255,219,0)'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
}
|
|
},
|
|
data: [60, 50, 70, 50, 40, 90, 40, 80, 60, 50, 80, 60]
|
|
},
|
|
{
|
|
name: '计划水量',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
color: '#40B5FF',
|
|
shadowColor: '#40B5FF',
|
|
shadowBlur: 5
|
|
},
|
|
data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini" style="background-color: transparent;">
|
|
<div id="main" style="float: left;background-color: transparent;">
|
|
<div id="leftContent"
|
|
style="float: left;width: 530px;height: 100%;background:url(<%=request.getContextPath()%>/IMG/bim/渐变背景.png);background-size: 100% 100%;">
|
|
<div style="float: left;width: 100%;height: 38px;margin-left: 20px;margin-top: 104px;">
|
|
<div style="float: left;width: 412px;height: 38px;background:url(<%=request.getContextPath()%>/IMG/bim/水厂概览标题.png);background-size: 100% 100%;"></div>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 200px;">
|
|
<div id="chart1" style="float: left;width: 120px;height: 120px;margin-left: 33px;margin-top: 47.5px;">
|
|
|
|
</div>
|
|
<div style="float: left;width: 240px;height: 100%;margin-left: 30px;">
|
|
<div style="float: left;width: 100%;height: 24px;margin-top: 15px;">
|
|
<div style="float: left;width: 5px;height: 5px;margin-top: 9.5px;background: #51b8ff;box-shadow: -1px 0px 2px 1px rgba(81,184,255,0.4);"></div>
|
|
<div style="float: left;width: 60px;height: 100%;color: #e8f7ff;font-size: 14px;font-family: Adobe Heiti Std, Adobe Heiti Std-R;margin-left: 10px;">
|
|
计划水量
|
|
</div>
|
|
<div style="float: right;width: 60px;height: 100%;text-align:right;color: #51B8FF;font-size: 14px;font-weight: 700;font-family: Adobe Heiti Std, Adobe Heiti Std-R;">
|
|
700
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 18px;background: rgba(64,181,255,0.10);border: 1px solid rgba(64,181,255,0.70);padding: 4px;">
|
|
<div style="float: left;width: 100%;height: 8px;background: rgba(64,181,255,0.30);border: 1px solid rgba(64,181,255,0.70);"></div>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;height: 24px;margin-top: 15px;">
|
|
<div style="float: left;width: 5px;height: 5px;margin-top: 9.5px;background: #21FFE5;box-shadow: -1px 0px 2px 1px rgba(33,255,229,0.4);"></div>
|
|
<div style="float: left;width: 60px;height: 100%;font-size: 14px;font-family: Adobe Heiti Std, Adobe Heiti Std-R;margin-left: 10px;">
|
|
处理水量
|
|
</div>
|
|
<div style="float: right;width: 60px;height: 100%;text-align:right;color: #20FFFB;font-size: 14px;font-weight: 700;font-family: Adobe Heiti Std, Adobe Heiti Std-R;">
|
|
150
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 18px;background: rgba(27,255,219,0.10);border: 1px solid rgba(27,255,219,0.70);padding: 4px;">
|
|
<div style="float: left;width: 30%;height: 8px;background: rgba(27,255,219,0.30);border: 1px solid rgba(27,255,219,0.70);"></div>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;height: 24px;margin-top: 15px;">
|
|
<div style="float: left;width: 5px;height: 5px;margin-top: 9.5px;background: #FFB65F;box-shadow: -1px 0px 2px 1px rgba(255,182,95,0.4);"></div>
|
|
<div style="float: left;width: 60px;height: 100%;font-size: 14px;font-family: Adobe Heiti Std, Adobe Heiti Std-R;margin-left: 10px;">
|
|
设计水量
|
|
</div>
|
|
<div style="float: right;width: 60px;height: 100%;text-align:right;color: #FFB65F;font-size: 14px;font-weight: 700;font-family: Adobe Heiti Std, Adobe Heiti Std-R;">
|
|
550
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 18px;background: rgba(255,182,95,0.10);border: 1px solid rgba(255,182,95,0.70);padding: 4px;">
|
|
<div style="float: left;width: 80%;height: 8px;background: rgba(255,182,95,0.30);border: 1px solid rgba(255,182,95,0.70);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 412px;height: 251px;margin-left: 20px;margin-top: 10px;background:rgba(37,63,110,0.5);padding: 10px;">
|
|
<div style="float:left;width: 100%;height: 100%;text-align: center;">
|
|
<div style="float:left;width:100%;height: 16.6%;background: rgba(62,162,219,0.2);color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;"></div>
|
|
<div style="float:left;width: 20%;height: 100%;">实时值</div>
|
|
<div style="float:left;width: 20%;height: 100%;">最大值</div>
|
|
<div style="float:left;width: 20%;height: 100%;">最小值</div>
|
|
<div style="float:left;width: 20%;height: 100%;">平均值</div>
|
|
</div>
|
|
<div style="float:left;width:100%;height: 16.6%;color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;">COD</div>
|
|
<div style="float:left;width: 20%;height: 100%;">
|
|
<div style="float: left;width: 17px;height: 15px;margin-top: 3px;">
|
|
<svg t="1712035981534" class="icon" viewBox="0 0 1024 1024" width="17" height="15">
|
|
<path d="M954.395224 834.790684L553.317523 140.104945a47.725978 47.725978 0 0 0-82.660628 0L68.783061 836.170101a47.724954 47.724954 0 0 0 41.330314 71.586408h803.772227c26.357298 0 47.723931-21.366633 47.723931-47.724954 0-9.269108-2.641153-17.920138-7.214309-25.240871z m-401.463488-72.672136c0 22.606881-18.326391 40.932248-40.932248 40.932248-22.606881 0-40.932248-18.325367-40.932248-40.932248v-1.312902c0-22.606881 18.325367-40.932248 40.932248-40.932248 22.605857 0 40.932248 18.325367 40.932248 40.932248v1.312902z m0-149.564388c0 22.606881-18.325367 40.932248-40.932248 40.932248-22.605857 0-40.932248-18.325367-40.932248-40.932248V394.911258c0-22.606881 18.326391-40.932248 40.932248-40.932248 22.606881 0 40.932248 18.325367 40.932248 40.932248V612.55416z"
|
|
fill="#FF0000" p-id="14094"></path>
|
|
</svg>
|
|
</div>
|
|
<div style="float: left;width: 44px;height: 22px;margin-left: 0px;margin-top: 8.15px;line-height: 21px;background: rgba(255,0,0,0.54);border: 1px solid #ff0000;">
|
|
5.66
|
|
</div>
|
|
</div>
|
|
<div class="max_cod" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="min_cod" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="avg_cod" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:100%;height: 16.6%;color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;">PH</div>
|
|
<div style="float:left;width: 20%;height: 100%;">
|
|
5.66
|
|
</div>
|
|
<div class="max_ph" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="min_ph" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="avg_ph" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:100%;height: 16.6%;color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;">氨氮</div>
|
|
<div style="float:left;width: 20%;height: 100%;">
|
|
5.66
|
|
</div>
|
|
<div class="max_nh" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="min_nh" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="avg_nh" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:100%;height: 16.6%;color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;">TN</div>
|
|
<div style="float:left;width: 20%;height: 100%;">
|
|
5.66
|
|
</div>
|
|
<div class="max_tn" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="min_tn" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="avg_tn" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:100%;height: 16.6%;color: #FFFFFF;line-height: 38px;">
|
|
<div style="float:left;width: 20%;height: 100%;">TP</div>
|
|
<div style="float:left;width: 20%;height: 100%;">
|
|
5.66
|
|
</div>
|
|
<div class="max_tp" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="min_tp" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
<div class="avg_tp" style="float:left;width: 20%;height: 100%;">5.66</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;height: 38px;margin-left: 20px;margin-top: 20px;">
|
|
<div style="float: left;width: 412px;height: 38px;background:url(<%=request.getContextPath()%>/IMG/bim/水量趋势标题.png);background-size: 100% 100%;"></div>
|
|
</div>
|
|
<div style="float: left;width: 412px;height: 264px;margin-left: 20px;margin-top: -4px;background:rgba(37,63,110,0.5);padding: 10px;">
|
|
<div id="chart2" style="float: left;width: 100%;height: 100%;">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|