first
This commit is contained in:
292
src/main/resources/static/harmnic.html
Normal file
292
src/main/resources/static/harmnic.html
Normal file
@@ -0,0 +1,292 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="table" class="col-sm-12">
|
||||
<table id="areaTable" class="table table-striped table-bordered dataTable no-footer"
|
||||
style="width:100%;cellspacing:0;margin-bottom: 0px;" role="grid" aria-describedby="example_info">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th class="table-middle">数据名称</th>
|
||||
<th class="table-middle">A/AB/0</th>
|
||||
<th class="table-middle">B/BC/+</th>
|
||||
<th class="table-middle">C/CA/-</th>
|
||||
<th class="table-middle">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>相电压总有效值(V)</td>
|
||||
<td>{{data.PhV_phsA}}</td>
|
||||
<td>{{data.PhV_phsB}}</td>
|
||||
<td>{{data.PhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流总有效值(A)</td>
|
||||
<td>{{data.A_phsA}}</td>
|
||||
<td>{{data.A_phsB}}</td>
|
||||
<td>{{data.A_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>线电压总有效值(V)</td>
|
||||
<td>{{data.PPV_phsAB}}</td>
|
||||
<td>{{data.PPV_phsBC}}</td>
|
||||
<td>{{data.PPV_phsCA}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>相电压偏差(%)</td>
|
||||
<td>{{data.PhVDev_phsA}}</td>
|
||||
<td>{{data.PhVDev_phsB}}</td>
|
||||
<td>{{data.PhVDev_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>线电压偏差(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>频率(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{data.Freq}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>频率偏差(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{data.FreqDev}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电压序分量(V)</td>
|
||||
<td>{{data.SeqV_C0}}</td>
|
||||
<td>{{data.SeqV_C1}}</td>
|
||||
<td>{{data.SeqV_C2}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流序分量(A)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总有功功率(W)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotW}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总无功功率(Var)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotVar}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总视在功率(VA)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotVA}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>视在功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotPF}}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>位移功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>电压波动</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>短时闪变</td>
|
||||
<td>{{data.PstPhV_phsA}}</td>
|
||||
<td>{{data.PstPhV_phsB}}</td>
|
||||
<td>{{data.PstPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>长时闪变</td>
|
||||
<td>{{data.PltPhV_phsA}}</td>
|
||||
<td>{{data.PltPhV_phsB}}</td>
|
||||
<td>{{data.PltPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>电压谐波畸变率(%)</td>
|
||||
<td>{{data.ThdPhV_phsA}}</td>
|
||||
<td>{{data.ThdPhV_phsB}}</td>
|
||||
<td>{{data.ThdPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流谐波畸变率(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>-</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script type="module">
|
||||
import {createApp, onMounted, ref} from 'vue'
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
|
||||
const data = ref([]);
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch('/message');
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
data.value = await response.json();
|
||||
|
||||
console.log(111111111, data.value)
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
}
|
||||
};
|
||||
setInterval(fetchData, 1000);
|
||||
|
||||
return {
|
||||
fetchData,
|
||||
data
|
||||
}
|
||||
}
|
||||
}).mount('#app');
|
||||
</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: 10px 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;
|
||||
}
|
||||
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
Reference in New Issue
Block a user