293 lines
6.6 KiB
HTML
293 lines
6.6 KiB
HTML
|
<!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>
|