大屏
This commit is contained in:
Rue Ji
@ -4,6 +4,8 @@
|
||||
<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;
|
||||
@ -17,16 +19,14 @@
|
||||
width: 6500px;
|
||||
height: 1800px;
|
||||
/* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
|
||||
background-image: url('../../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 */
|
||||
.val-6040 {
|
||||
position: absolute;
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
.slqs {
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
height: 62px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -36,35 +36,546 @@
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
}
|
||||
.slqs-jinri {
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
}
|
||||
.val-4197 {
|
||||
.slqs-zuori {
|
||||
top: 335px;
|
||||
left: 592px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.val-12356 {
|
||||
.slqs-benyue {
|
||||
top: 335px;
|
||||
left: 975px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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="val-6040">6040</div>
|
||||
<div class="val-4197">4197</div>
|
||||
<div class="val-12356">12356</div> -->
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user