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/monitor.html | 311 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 298 insertions(+), 13 deletions(-) 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