From 30dea6cb47cd52c8a9857ed5be71bac1c86e7225 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 18 十一月 2020 17:27:15 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 373 ++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 341 insertions(+), 32 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index 006c328..22a3fac 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>
@@ -365,6 +376,291 @@
});
/***********************************************************************************/
+ /************************************ 鍫嗗灈鏈洪�熷害 *************************************/
+ /***********************************************************************************/
+
+ 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: 110,
+ 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: 'm/min'}]
+ },
+ {
+ name: '鍗囬檷閫熷害',
+ type: 'gauge',
+ center: ['25%', '55%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 30,
+ endAngle: 30,
+ splitNumber: 6,
+ 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: 'm/min'}]
+ },
+ // 璐у弶鏈�澶ч�熷害锛�3.鍑犵背
+ {
+ name: '璐у弶閫熷害',
+ type: 'gauge',
+ center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 4,
+ 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);
+
+
+ /***********************************************************************************/
/************************************* 鎶樼嚎鍥� ***************************************/
/***********************************************************************************/
@@ -383,7 +679,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['1', '2', '3', '4', '5', '6', '7'],
+ data: ['1', '2', '3', '4', '5', '6', '7'],
axisLabel: {
textStyle:{
color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
@@ -417,45 +713,58 @@
}
},
- series: [{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
- areaStyle: {
- color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ // areaStyle: {
+ // color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
+ // },
+ itemStyle:{
+ normal:{
+ color:'#3590ac', //鎶樼偣棰滆壊
+ lineStyle:{
+ color:'#3590ac' //鎶樼嚎棰滆壊
+ }
+ }
+ }
},
- itemStyle:{
- normal:{
- color:'#3590ac', //鎶樼偣棰滆壊
- lineStyle:{
- color:'#3590ac' //鎶樼嚎棰滆壊
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ // areaStyle: {
+ // color: '#d55b35' // 鎶樼嚎鍖哄煙棰滆壊
+ // },
+ itemStyle:{
+ normal:{
+ color:'#0cbad9', //鎶樼偣棰滆壊
+ lineStyle:{
+ color:'#07a093' //鎶樼嚎棰滆壊
+ }
}
}
}
- }]
+ ]
};
// 璁块棶閲忔姤琛ㄥ姞杞�
function initlinChart() {
var reportView = lineChartOption;
- var xAxisDate = [];
- var seriesDate=[];
$.ajax({
- url: baseUrl+"/monitor/pakin/rep",
+ url: baseUrl+"/monitor/line/charts",
method: 'GET',
success: function (res) {
if (res.code === 200){
- var json = res.data;
- for (var i = 0; i < json.length; i++) {
- xAxisDate[i]=json[i].node;
- seriesDate[i]=json[i].val;
- }
- reportView.xAxis.data=xAxisDate;
- reportView.series[0].data=seriesDate;
+ var json = res.data.rows;
+ reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
+ getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
+ reportView.series[0].data=res.data.rows[0].data;
+ reportView.series[1].data=res.data.rows[1].data;
lineCharts.setOption(reportView)
} else if (res.code === 403){
top.location.href = "/";
} else {
- layer.msg(res.msg);
+ console.log(res.msg);
}
}
});
--
Gitblit v1.9.1