From a032ee1f6c375cbf90543e934c92dbe7b70d2100 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 18 十一月 2020 14:27:51 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/css/monitor.css | 12 +-
src/main/webapp/views/monitor/monitor.html | 311 +++++++++++++++++++++++++++++++++++++++++++++++++--
2 files changed, 304 insertions(+), 19 deletions(-)
diff --git a/src/main/webapp/views/monitor/css/monitor.css b/src/main/webapp/views/monitor/css/monitor.css
index b3dcfbc..7c698b6 100644
--- a/src/main/webapp/views/monitor/css/monitor.css
+++ b/src/main/webapp/views/monitor/css/monitor.css
@@ -193,7 +193,7 @@
float: left;
width: 52%;
height: 100%;
- padding: 2% 1%;
+ padding: 1.2% 1% 1.5% 1%;
box-sizing: border-box;
}
.map-board{
@@ -201,7 +201,7 @@
width: 100%;
border: 1px solid rgba(20, 80, 136, 1);
position: relative;
- background-color: rgba(3, 36, 85, 0.5); /*閽堝鍏朵粬娴忚鍣�*/
+ background-color: rgba(3, 36, 85, 0.4); /*閽堝鍏朵粬娴忚鍣�*/
filter: Alpha(Opacity=50); /* 閽堝IE*/
}
@@ -560,14 +560,14 @@
background-image: url(../img/banner/banner1.jpg);
}
#img-2 {
- background-image: url(../img/banner/test2.jpg);
+ background-image: url(../img/banner/banner1.jpg);
}
#img-3 {
- background-image: url(../img/banner/test3.png);
+ background-image: url(../img/banner/banner1.jpg);
}
#img-4 {
- background-image: url(../img/banner/test1.jpg);
+ background-image: url(../img/banner/banner1.jpg);
}
#img-5 {
- background-image: url(../img/banner/test2.jpg);
+ background-image: url(../img/banner/banner1.jpg);
}
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index a8ead2e..7747c00 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -18,11 +18,13 @@
<style>
.crn-speed {
width: 100%;
- height: 35%;
+ height: 75%;
+ position: absolute;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ top: -15%;
/*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
}
@@ -33,13 +35,20 @@
font-family:'Pacifico',serif
}
.speed-content {
- display: inline-block;
+ height: 100%;
+ }
+ .speed-chart {
+ float: left;
+ width: 100%;
+ height: 100%;
}
.scroll-pane {
+ position: absolute;
+ top: 42%;
width: 100%;
- height: 65%;
+ height: 58%;
}
.scroll-bar {
float: left;
@@ -184,17 +193,19 @@
<!-- 涓笂 -->
<div class="crn-speed">
<div class="speed-content">
- <div>
- <span>鍫嗗灈鏈鸿蛋琛岄�熷害锛�</span><span id="xSpeed" class="counter">5.00</span><span>绫�/绉�</span>
+ <div id="crn-chart" class="speed-chart">
</div>
- <div>
- <span>鍫嗗灈鏈哄崌闄嶉�熷害锛�</span><span id="ySpeed" class="counter">5.00</span><span>绫�/绉�</span>
- </div>
+<!-- <div id="xSpeed-chart" class="speed-chart">-->
+<!--<!– <span>鍫嗗灈鏈鸿蛋琛岄�熷害锛�</span><span id="xSpeed" class="counter">5.00</span><span>绫�/绉�</span>–>-->
+<!-- </div>-->
+<!-- <div id="ySpeed-chart" class="speed-chart">-->
+<!--<!– <span>鍫嗗灈鏈哄崌闄嶉�熷害锛�</span><span id="ySpeed" class="counter">5.00</span><span>绫�/绉�</span>–>-->
+<!-- </div>-->
</div>
</div>
+ <!-- 涓笅 -->
<div class="scroll-pane">
-
<div class="layui-carousel" id="test1">
<div carousel-item>
<div class="item-img" id="img-1" style="background-color: red"></div>
@@ -368,10 +379,284 @@
/************************************ 鍫嗗灈鏈洪�熷害 *************************************/
/***********************************************************************************/
-
-
-
-
+ var crnChart = echarts.init(document.getElementById('crn-chart'));
+ crnChartOption = {
+ // backgroundColor: '#1b1b1b',
+ tooltip: {
+ formatter: '{a} <br/>{c} {b}'
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ mark: {show: true},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ series: [
+ {
+ name: '閫熷害',
+ type: 'gauge',
+ min: 0,
+ max: 220,
+ splitNumber: 11,
+ radius: '50%',
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
+ width: 3,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 25, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: { // 鍒嗛殧绾�
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontSize: 20,
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ detail: {
+ backgroundColor: 'rgba(30,144,255,0.8)',
+ borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ offsetCenter: [0, '50%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
+ },
+ data: [{value: 40, name: 'km/h'}]
+ },
+ {
+ name: '杞��',
+ type: 'gauge',
+ center: ['25%', '55%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 7,
+ endAngle: 45,
+ splitNumber: 7,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 20, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width: 5,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ offsetCenter: [0, '-30%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ detail: {
+ //backgroundColor: 'rgba(30,144,255,0.8)',
+ // borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ width: 80,
+ height: 30,
+ offsetCenter: [25, '20%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
+ },
+ data: [{value: 1.5, name: 'x1000 r/min'}]
+ },
+ {
+ name: '娌硅〃',
+ type: 'gauge',
+ center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 2,
+ startAngle: 135,
+ endAngle: 45,
+ splitNumber: 2,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: {
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10,
+ formatter: function (v){
+ switch (v + '') {
+ case '0': return 'E';
+ case '1': return 'Gas';
+ case '2': return 'F';
+ }
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length:15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width:3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width:2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ show: false
+ },
+ detail: {
+ show: false
+ },
+ data: [{value: 0.5, name: 'gas'}]
+ },
+ {
+ name: '姘磋〃',
+ type: 'gauge',
+ center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 2,
+ startAngle: 315,
+ endAngle: 225,
+ splitNumber: 2,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ show: false
+ },
+ axisLabel: {
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10,
+ formatter: function(v){
+ switch (v + '') {
+ case '0': return 'H';
+ case '1': return 'Water';
+ case '2': return 'C';
+ }
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ show: false
+ },
+ detail: {
+ show: false
+ },
+ data:[{value: 0.5, name: 'gas'}]
+ }
+ ]
+ };
+ setInterval(function (){
+ crnChartOption.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
+ crnChartOption.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
+ crnChartOption.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
+ crnChartOption.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
+ crnChart.setOption(crnChartOption);
+ }, 1000);
/***********************************************************************************/
--
Gitblit v1.9.1