Other/hb_roma
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9617f3d975d879aeeea5238a628c577a74cb44c1
hb_roma/src/main/resources/static/harmnic.html

820 lines
23 KiB
HTML
Raw Normal View History

更改
2024-08-09 09:05:41 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>稳态数据</title>
<link rel="stylesheet" href="./element.css"/>
<script src="./vue.js"></script>
<script src="./echarts.min.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<button id="buttonHistory">历史趋势</button>
<button id="buttonPinPu">谐波频谱</button>
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<label>设备标识:</label>
<select id="selectId">
<option value="NJCN230497">NJCN230497</option>
<option value="NJCN230497">NJCN230447</option>
<option value="3206010121">3206010121</option>
</select>
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<button style="margin-left: 100px" id="export">导出历史数据</button>
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<span style="float: right" id="stationId">xxxxxxxxxxxxxx</span>
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<span style="float: right;margin-right: 15px" id="timeId">yyyy-MM-dd HH:mm:ss</span>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="history">
<div id="mainOne" style="width: 100%;height: 800px"></div>
<div id="mainTwo" style="width: 100%;height: 800px"></div>
</div>
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
<div id="pinPu" style="display: none">
<div id="pinPuChar" style="width: 100%;height: 800px"></div>
</div>
更改
2024-08-09 09:05:41 +08:00
</div>
<script type="text/javascript">
var devId;
$(function () {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
$('#mainOne').css('height', window.innerHeight / 2 - 20)
$('#mainTwo').css('height', window.innerHeight / 2 - 20)
更改
2024-08-09 09:05:41 +08:00
devId = $('#selectId').find('option:selected').val()
var webSocket = getWebSocket();
initVEchart()
})
var vEchar;
var vTime = []
var vA = []
var vB = []
var vC = []
var iEchar;
var iA = []
var iB = []
var iC = []
$('#buttonHistory').click(function () {
$('#pinPu').hide()
$('#history').show()
initVEchart()
})
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
$('#export').click(function () {
let str = ``;
if(historyMessage.length > 0){
for(let i in historyMessage[0]){
str+=i+',';
}
str = str.substring(0,str.lastIndexOf(','))+'\n'
}else {
alert("当前无历史数据")
return false
}
download(str, historyMessage)
})
const download = (str, data) => {
// 增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < data.length; i++) {
for (const key in data[i]) {
str += `${data[i][key] + '\t'},`;
}
str += '\n';
}
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
// 通过创建a标签实现
const link = document.createElement("a");
link.href = uri;
// 对下载的文件命名
link.download = "下载数据.csv";
link.click();
}
更改
2024-08-09 09:05:41 +08:00
function initVEchart() {
// 基于准备好的dom，初始化echarts实例
vEchar = echarts.init(document.getElementById('mainOne'));
vEchar.clear()
let options = {
title: {
left: 'center',
text: '监测点-相电压有效值',
textStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
left: '80px',
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
textStyle: {
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [0, 0, 0, 0] //[上、右、下、左]
}
},
xAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: '时间',
更改
2024-08-09 09:05:41 +08:00
type: 'category',
value: vTime,
boundaryGap: true,
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular',
color: '#000000'
}
}
},
yAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: 'V',
更改
2024-08-09 09:05:41 +08:00
type: 'value',
axisLabel: {
interval: 0,
formatter: function (value, index) {
return value.toFixed(3)
},
left: '20px',
color: '#000000'
},
axisLine: {
show: true,
onZero: false, //-----------重点
lineStyle: {
color: '#000000'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#000000'],
type: 'dashed',
opacity: 0.5
}
}
},
series: [
{
data: vA,
type: 'line',
smooth: true,
color: '#CC0000',
name: 'A相',
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
},
{
data: vB,
name: 'B相',
type: 'line',
smooth: true,
color: '#339900',
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
},
{
data: vC,
name: 'C相',
type: 'line',
color: '#CC9900',
smooth: true,
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
}
]
}
vEchar.setOption(options);
iEchar = echarts.init(document.getElementById('mainTwo'));
iEchar.clear()
let optionsI = {
title: {
left: 'center',
text: '监测点-电流有效值',
textStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
left: '80px',
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
textStyle: {
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [0, 0, 0, 0] //[上、右、下、左]
}
},
xAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: '时间',
更改
2024-08-09 09:05:41 +08:00
type: 'category',
value: vTime,
boundaryGap: true,
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular',
color: '#000000'
}
}
},
yAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: 'A',
更改
2024-08-09 09:05:41 +08:00
type: 'value',
axisLabel: {
interval: 0,
formatter: function (value, index) {
return value.toFixed(3)
},
left: '20px',
color: '#000000'
},
axisLine: {
show: true,
onZero: false, //-----------重点
lineStyle: {
color: '#000000'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#000000'],
type: 'dashed',
opacity: 0.5
}
}
},
series: [
{
data: iA,
type: 'line',
smooth: true,
color: '#CC0000',
name: 'A相',
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
},
{
data: iB,
name: 'B相',
type: 'line',
smooth: true,
color: '#339900',
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
},
{
data: iC,
name: 'C相',
type: 'line',
color: '#CC9900',
smooth: true,
symbol: 'none',
lineStyle: {
width: 1.5, // 设置折线的宽度为2（单位：像素）
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
}
]
}
iEchar.setOption(optionsI);
}
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
var historyMessage = []
更改
2024-08-09 09:05:41 +08:00
/**
* WebSocket客户端
*
* 使用说明：
* 1、WebSocket客户端通过回调函数来接收服务端消息。例如：webSocket.onmessage
* 2、WebSocket客户端通过send方法来发送消息给服务端。例如：webSocket.send();
*/
function getWebSocket() {
/**
* 配置 WebSocket
* WebSocket客户端 PS：URL开头表示WebSocket协议 中间是域名端口 结尾是服务端映射地址
*/
var webSocket = new WebSocket('ws://localhost:8790/socket');
/**
* 当服务端打开连接
*/
webSocket.onopen = function (event) {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
historyMessage = []
更改
2024-08-09 09:05:41 +08:00
console.log('WebSocket打开连接');
};
/**
* 当服务端发来消息：1.广播消息 2.更新在线人数
*/
webSocket.onmessage = function (event) {
console.log('WebSocket收到消息：%c' + event.data, 'color:green');
//获取服务端消息
var message = JSON.parse(event.data) || {};
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
historyMessage.push(message)
更改
2024-08-09 09:05:41 +08:00
devId = $('#selectId').find('option:selected').val()
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
if (devId != message.customDevId) {
更改
2024-08-09 09:05:41 +08:00
return false;
}
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
$("#timeId").text(message.time.substring(0, 4) + '-' + message.time.substring(4, 6) + '-' + message.time.substring(6, 8) + ' ' + message.time.substring(9, 11) + ':' + message.time.substring(11, 13) + ':' + message.time.substring(13, 15))
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
if (devId == 'NJCN230447') {
更改
2024-08-09 09:05:41 +08:00
$("#stationId").text("当前位置:保定-满城区-电能质量监测装置-0447")
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
} else if (devId == 'NJCN230497') {
更改
2024-08-09 09:05:41 +08:00
$("#stationId").text("当前位置:保定-满城区-电能质量监测装置-0497")
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
} else if (devId == '3206010121') {
更改
2024-08-09 09:05:41 +08:00
$("#stationId").text("当前位置:xx-xx-电能质量监测装置-0121")
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
} else {
更改
2024-08-09 09:05:41 +08:00
$("#stationId").text("暂无数据")
}
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
if (vTime.length > 50) {
更改
2024-08-09 09:05:41 +08:00
vTime.shift();
vA.shift();
vB.shift();
vC.shift();
iA.shift();
iB.shift();
iC.shift();
}
let temDate = message.time
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
let aaaDate = temDate.substring(0, 4) + '-' + temDate.substring(4, 6) + '-' + temDate.substring(6, 8) + ' ' + temDate.substring(9, 11) + ':' + temDate.substring(11, 13) + ':' + temDate.substring(13, 15)
更改
2024-08-09 09:05:41 +08:00
vTime.push(aaaDate)
vA.push(message.PhV_phsA)
vB.push(message.PhV_phsB)
vC.push(message.PhV_phsC)
iA.push(message.A_phsA)
iB.push(message.A_phsB)
iC.push(message.A_phsC)
vEchar.setOption({
xAxis: [
{
data: vTime
}
],
series: [
{
data: vA
},
{
data: vB
},
{
data: vC
}
]
})
iEchar.setOption({
xAxis: [
{
data: vTime
}
],
series: [
{
data: iA
},
{
data: iB
},
{
data: iC
}
]
})
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
if (pinPuEcharts) {
serviseV = []
for (let i = 2; i < 26; i++) {
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
let temValV = (Number(message['HRPhV_H' + i + '_phsA']) + Number(message['HRPhV_H' + i + '_phsB']) + Number(message['HRPhV_H' + i + '_phsC'])) / 3
serviseV.push(temValV.toFixed(3))
}
更改
2024-08-09 09:05:41 +08:00
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
pinPuEcharts.setOption({
series: [
{
data: serviseV
},
]
})
}
更改
2024-08-09 09:05:41 +08:00
};
/**
* 关闭连接
*/
webSocket.onclose = function (event) {
console.log('WebSocket关闭连接');
};
/**
* 通信失败
*/
webSocket.onerror = function (event) {
console.log('WebSocket发生异常');
};
return webSocket;
}
var serviseV = []
var pinPuEcharts
$('#buttonPinPu').click(function () {
$('#pinPu').show()
$('#history').hide()
var pinPuX = []
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
for (let i = 2; i < 26; i++) {
pinPuX.push(i + '次')
更改
2024-08-09 09:05:41 +08:00
}
// 基于准备好的dom，初始化echarts实例
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
pinPuEcharts = echarts.init(document.getElementById('pinPuChar'));
更改
2024-08-09 09:05:41 +08:00
pinPuEcharts.clear()
// 指定图表的配置项和数据
var option = {
title: {
left: 'center',
text: '2~25次谐波电压含有率',
textStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
left: '80px',
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
textStyle: {
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [0, 0, 0, 0] //[上、右、下、左]
}
},
xAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: '次数',
更改
2024-08-09 09:05:41 +08:00
data: pinPuX,
boundaryGap: true,
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular',
color: '#000000'
}
}
},
yAxis: {
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
name: '%',
更改
2024-08-09 09:05:41 +08:00
boundaryGap: true,
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular',
color: '#000000'
}
}
},
series: [
{
name: '谐波电压含有率',
type: 'bar',
data: serviseV,
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
color: '#339966'
更改
2024-08-09 09:05:41 +08:00
},
{
1.添加安全登录功能 2.调整部分接口
2024-08-13 16:14:45 +08:00
color: '#FF9900',
更改
2024-08-09 09:05:41 +08:00
name: '限值',
type: 'bar',
data: [
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8,
1.6,
0.8
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
pinPuEcharts.setOption(option);
})
$("#selectId").change(function () {
vTime = []
vA = []
vB = []
vC = []
iA = []
iB = []
iC = []
serviseV = []
vEchar.setOption({
xAxis: [
{
data: vTime
}
],
series: [
{
data: vA
},
{
data: vB
},
{
data: vC
}
]
})
iEchar.setOption({
xAxis: [
{
data: vTime
}
],
series: [
{
data: iA
},
{
data: iB
},
{
data: iC
}
]
})
pinPuEcharts.setOption({
series: [
{
data: serviseV
},
]
})
})
</script>
</body>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table caption {
font-size: 2em;
font-weight: bold;
margin: 1em 0;
}
th, td {
border: 1px solid #999;
text-align: center;
padding: 6px 0;
}
table thead tr {
background-color: #008c8c;
color: #fff;
}
table tbody tr:nth-child(odd) {
background-color: #eee;
}
table tbody tr:hover {
background-color: #ccc;
}
table tbody tr td:first-child {
color: #3d34fc;
}
table tfoot tr td {
text-align: right;
padding-right: 20px;
}
</style>
</html>
Reference in New Issue Copy Permalink