618 lines
16 KiB
HTML
618 lines
16 KiB
HTML
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>水厂大屏展示</title>
|
||
<script
|
||
type="text/javascript"
|
||
src="../../node_modules/jquery/dist/jquery.min.js"
|
||
></script>
|
||
<script type="text/javascript" src="../../JS/echarts3.0.js"></script>
|
||
<style>
|
||
body,
|
||
html {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto; /* Allow scrolling if window is smaller */
|
||
background-color: #030829;
|
||
}
|
||
.screen-container {
|
||
width: 6500px;
|
||
height: 1800px;
|
||
/* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
|
||
background-image: url("../../IMG/screen1.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
}
|
||
/* Specific Position for Data 6040 */
|
||
.slqs {
|
||
position: absolute;
|
||
width: 121px;
|
||
height: 62px;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
|
||
font-weight: 900;
|
||
font-size: 50px;
|
||
z-index: 10;
|
||
text-align: center;
|
||
line-height: 62px;
|
||
}
|
||
.slqs-jinri {
|
||
top: 335px;
|
||
left: 209px;
|
||
}
|
||
.slqs-zuori {
|
||
top: 335px;
|
||
left: 592px;
|
||
}
|
||
.slqs-benyue {
|
||
top: 335px;
|
||
left: 975px;
|
||
}
|
||
|
||
.ncl-val {
|
||
position: absolute;
|
||
width: 76px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: right;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-family: Gilroy;
|
||
font-weight: 500;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
.ncl-val1 {
|
||
top: 1168px;
|
||
left: 318px;
|
||
}
|
||
.ncl-val2 {
|
||
top: 1168px;
|
||
left: 653px;
|
||
}
|
||
.ncl-val3 {
|
||
top: 1168px;
|
||
left: 1023px;
|
||
}
|
||
.ncl2 {
|
||
position: absolute;
|
||
top: 1310px;
|
||
left: 66px;
|
||
width: 1077px;
|
||
height: 440px;
|
||
}
|
||
#ncl-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.seven-days-sl {
|
||
position: absolute;
|
||
top: 591px;
|
||
left: 66px;
|
||
width: 1077px;
|
||
height: 400px;
|
||
}
|
||
#seven-days-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.quality-table {
|
||
position: absolute;
|
||
top: 630px;
|
||
left: 1183px;
|
||
width: 975px;
|
||
}
|
||
.quality-table table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
color: #7ef3ff;
|
||
font-size: 27px;
|
||
text-align: center;
|
||
background: transparent;
|
||
}
|
||
.quality-table th,
|
||
.quality-table td {
|
||
border: 1px solid rgba(0, 163, 255, 0.4);
|
||
padding: 16px 23px;
|
||
}
|
||
.quality-table th {
|
||
color: #ffffff;
|
||
font-size: 27px;
|
||
font-weight: 600;
|
||
}
|
||
.quality-table td:first-child {
|
||
color: #ffffff;
|
||
text-align: left;
|
||
padding-left: 12px;
|
||
}
|
||
.quality-table td:last-child {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.quality-chart {
|
||
position: absolute;
|
||
top: 1380px;
|
||
left: 1183px;
|
||
width: 975px;
|
||
height: 370px;
|
||
}
|
||
#quality-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 药耗 */
|
||
.yaohao {
|
||
position: absolute;
|
||
top: 343px;
|
||
width: 94px;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: right;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-family: Gilroy;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
line-height: 56px;
|
||
}
|
||
.yaohao1 {
|
||
left: 1317px;
|
||
}
|
||
.yaohao2 {
|
||
left: 1652px;
|
||
}
|
||
.yaohao3 {
|
||
left: 2056px;
|
||
}
|
||
|
||
.Middle3 {
|
||
width: 2100px;
|
||
position: absolute;
|
||
top: 300px;
|
||
left: 2700px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="screen-container">
|
||
<div class="left">
|
||
<div>
|
||
<div class="slqs slqs-jinri">6040</div>
|
||
<div class="slqs slqs-zuori">4197</div>
|
||
<div class="slqs slqs-benyue">12356</div>
|
||
</div>
|
||
|
||
<!-- 七日水量 -->
|
||
<div class="seven-days-sl">
|
||
<div id="seven-days-chart"></div>
|
||
</div>
|
||
|
||
<!-- 泥处理指标 -->
|
||
<div class="ncl">
|
||
<div class="ncl1">
|
||
<div class="ncl-val ncl-val1">0</div>
|
||
<div class="ncl-val ncl-val2">200</div>
|
||
<div class="ncl-val ncl-val3">4.89</div>
|
||
</div>
|
||
<div class="ncl2">
|
||
<div id="ncl-chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Middle">
|
||
<div class="Middle1">
|
||
<!-- 药耗 -->
|
||
<div>
|
||
<div class="yaohao yaohao1">300</div>
|
||
<div class="yaohao yaohao2">200</div>
|
||
<div class="yaohao yaohao3">1</div>
|
||
</div>
|
||
|
||
<!-- 质量指标 表格 -->
|
||
<div class="quality-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>当前值</th>
|
||
<th>平均值</th>
|
||
<th>最高</th>
|
||
<th>最低</th>
|
||
<th>指标</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>COD (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>TP (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>NH3–N (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>TN (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PH (mg/L)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SS</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>温度(℃)</td>
|
||
<td>13.186</td>
|
||
<td>12.996</td>
|
||
<td>14.666</td>
|
||
<td>11.92</td>
|
||
<td>0.000–20.000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="quality-chart">
|
||
<div id="quality-chart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="Middle2">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
|
||
<!-- 中间图表 -->
|
||
<div class="Middle3">
|
||
<img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
|
||
</div>
|
||
|
||
<div class="Middle4">
|
||
<!-- 进水 -->
|
||
<div></div>
|
||
|
||
<!-- 出水 -->
|
||
<div></div>
|
||
|
||
<div></div>
|
||
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频 -->
|
||
<div class="right"></div>
|
||
</div>
|
||
<script>
|
||
$(function () {
|
||
var chartDom = document.getElementById("seven-days-chart");
|
||
if (!chartDom) return;
|
||
var myChart = echarts.init(chartDom);
|
||
var dataAxis = [
|
||
"11-10",
|
||
"11-11",
|
||
"11-12",
|
||
"11-13",
|
||
"11-14",
|
||
"11-15",
|
||
"11-16",
|
||
"11-17",
|
||
];
|
||
var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
|
||
var option = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["处理水量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: dataAxis,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 10000,
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 18,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
dataZoom: [{ type: "inside" }],
|
||
series: [
|
||
{
|
||
name: "处理水量",
|
||
type: "bar",
|
||
barWidth: 20,
|
||
data: data,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#46F2FF" },
|
||
{ offset: 1, color: "#0B4DB5" },
|
||
]),
|
||
shadowColor: "rgba(0, 0, 0, 0.3)",
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#6af8ff" },
|
||
{ offset: 1, color: "#1560d6" },
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "bar",
|
||
barGap: "-100%",
|
||
data: (function () {
|
||
var yMax = 10000;
|
||
var shadow = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
shadow.push(yMax);
|
||
}
|
||
return shadow;
|
||
})(),
|
||
itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
|
||
silent: true,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
var zoomSize = 6;
|
||
myChart.on("click", function (params) {
|
||
var startIndex = Math.max(
|
||
params.dataIndex - Math.floor(zoomSize / 2),
|
||
0,
|
||
);
|
||
var endIndex = Math.min(
|
||
params.dataIndex + Math.floor(zoomSize / 2),
|
||
data.length - 1,
|
||
);
|
||
myChart.dispatchAction({
|
||
type: "dataZoom",
|
||
startValue: dataAxis[startIndex],
|
||
endValue: dataAxis[endIndex],
|
||
});
|
||
});
|
||
var nclDom = document.getElementById("ncl-chart");
|
||
if (nclDom) {
|
||
var nclChart = echarts.init(nclDom, "dark");
|
||
var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
|
||
var nclOption = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["实际小时排泥量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [
|
||
"2:00",
|
||
"4:00",
|
||
"6:00",
|
||
"8:00",
|
||
"10:00",
|
||
"12:00",
|
||
"14:00",
|
||
"16:00",
|
||
"18:00",
|
||
"20:00",
|
||
],
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 500,
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "实际小时排泥量",
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
lineStyle: { normal: { width: 2 } },
|
||
itemStyle: { normal: { color: "#46F2FF" } },
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
|
||
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
data: nclData,
|
||
},
|
||
],
|
||
};
|
||
nclChart.setOption(nclOption);
|
||
window.addEventListener("resize", function () {
|
||
nclChart.resize();
|
||
});
|
||
}
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
var qualityDom = document.getElementById("quality-chart");
|
||
if (qualityDom) {
|
||
var qualityChart = echarts.init(qualityDom);
|
||
var qualityData = [8, 13, 9, 14, 21, 14, 18];
|
||
var qualityOption = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: 60,
|
||
right: 40,
|
||
top: 40,
|
||
bottom: 40,
|
||
},
|
||
legend: {
|
||
data: ["水质量"],
|
||
right: 10,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#9BE8FF",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["11", "12", "13", "14", "15", "16", "17"],
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: { color: "#2C3E50" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 25,
|
||
splitNumber: 5,
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: "#B7C9E2",
|
||
fontSize: 25,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.15)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "水质量",
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
lineStyle: { normal: { width: 2 } },
|
||
itemStyle: { normal: { color: "#46F2FF" } },
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
|
||
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
data: qualityData,
|
||
},
|
||
],
|
||
};
|
||
qualityChart.setOption(qualityOption);
|
||
window.addEventListener("resize", function () {
|
||
qualityChart.resize();
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|