From 8d45d00d1453dc8f545c8aae2c387c027c104a0b Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 19 十一月 2020 14:55:32 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 177 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 103 insertions(+), 74 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index 7747c00..9e54756 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -271,7 +271,7 @@
<div class="image-border image-border4"></div>
<div class="line-chart-title">
<div class="order-report">
- <span class="order-report-left" >鍏ュ簱鍗曠粺璁�</span>
+ <span class="order-report-left" >鍏ュ嚭搴撶粺璁�</span>
<span class="order-report-right">31</span>
</div>
<div class="order-report-english english">
@@ -366,12 +366,12 @@
layui.use(['element', 'carousel'], function(){
var carousel = layui.carousel;
var element = layui.element;
- //寤洪�犲疄渚�
+ // 杞挱鍥�
carousel.render({
elem: '#test1'
,width: '100%' //璁剧疆瀹瑰櫒瀹藉害
- ,arrow: 'always' //濮嬬粓鏄剧ず绠ご
- //,anim: 'updown' //鍒囨崲鍔ㄧ敾鏂瑰紡
+ ,arrow: 'hover' // 鍒囨崲绠ご榛樿鏄剧ず鐘舵�侊紝鍙�夊�间负 hover锛堟偓鍋滄樉绀猴級 always锛堝缁堟樉绀猴級 none锛堝缁堜笉鏄剧ず锛�
+ ,interval: '3000' // 鑷姩鍒囨崲鐨勬椂闂撮棿闅旓紝鍗曚綅锛歮s锛堟绉掞級锛屼笉鑳戒綆浜�800
});
});
@@ -395,21 +395,21 @@
},
series: [
{
- name: '閫熷害',
+ name: '璧拌閫熷害',
type: 'gauge',
min: 0,
- max: 220,
+ max: 110,
splitNumber: 11,
radius: '50%',
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
+ color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']],
width: 3,
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10
}
},
- axisLabel: { // 鍧愭爣杞村皬鏍囪
+ axisLabel: { // 鍧愭爣杞存暟瀛�
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //榛樿閫忔槑
@@ -436,7 +436,7 @@
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 5
},
- title: {
+ title: { // 閫熷害鍗曚綅
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
@@ -446,7 +446,7 @@
shadowBlur: 10
}
},
- detail: {
+ detail: { // 閫熷害鍊�
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
@@ -458,20 +458,20 @@
color: '#fff'
}
},
- data: [{value: 40, name: 'km/h'}]
+ data: [{value: 40, name: 'm/min\nx'}]
},
{
- name: '杞��',
+ name: '鍗囬檷閫熷害',
type: 'gauge',
center: ['25%', '55%'], // 榛樿鍏ㄥ眬灞呬腑
radius: '30%',
min: 0,
- max: 7,
- endAngle: 45,
- splitNumber: 7,
+ max: 30,
+ endAngle: 30,
+ splitNumber: 6,
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
+ color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10
@@ -523,31 +523,37 @@
shadowBlur: 5,
width: 80,
height: 30,
- offsetCenter: [25, '20%'], // x, y锛屽崟浣峱x
+ offsetCenter: [35, '20%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
- data: [{value: 1.5, name: 'x1000 r/min'}]
+ data: [{value: 1.5, name: 'y'}]
},
{
- name: '娌硅〃',
+ name: '璐у弶閫熷害',
type: 'gauge',
center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
radius: '30%',
min: 0,
- max: 2,
+ max: 4,
startAngle: 135,
endAngle: 45,
splitNumber: 2,
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10
}
+ },
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
},
axisTick: { // 鍧愭爣杞村皬鏍囪
length: 12, // 灞炴�ength鎺у埗绾块暱
@@ -557,19 +563,19 @@
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';
- }
- }
- },
+ // 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锛夋帶鍒剁嚎鏉℃牱寮�
@@ -585,15 +591,33 @@
shadowBlur: 5
},
title: {
- show: false
+ offsetCenter: [0, '-30%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
},
detail: {
- show: false
+ //backgroundColor: 'rgba(30,144,255,0.8)',
+ // borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ width: 80,
+ height: 30,
+ offsetCenter: [40, '5%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
},
- data: [{value: 0.5, name: 'gas'}]
+ data: [{value: 0.5, name: 'z'}]
},
{
- name: '姘磋〃',
+ name: '璐у弶浣嶇疆',
type: 'gauge',
center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
radius: '30%',
@@ -604,7 +628,7 @@
splitNumber: 2,
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10
@@ -620,9 +644,9 @@
shadowBlur: 10,
formatter: function(v){
switch (v + '') {
- case '0': return 'H';
- case '1': return 'Water';
- case '2': return 'C';
+ case '0': return '鍙�';
+ case '1': return '涓�';
+ case '2': return '宸�';
}
}
},
@@ -650,13 +674,6 @@
}
]
};
- 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);
/***********************************************************************************/
@@ -678,7 +695,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', //鍧愭爣鐨勫瓧浣撻鑹�
@@ -712,45 +729,57 @@
}
},
- 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() {
+ function initlineChart() {
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