更改
This commit is contained in:
@@ -1,292 +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>
|
||||
<!--<!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>-->
|
||||
|
||||
<tr>
|
||||
<td>电流总有效值(A)</td>
|
||||
<td>{{data.A_phsA}}</td>
|
||||
<td>{{data.A_phsB}}</td>
|
||||
<td>{{data.A_phsC}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电流总有效值(A)</td>-->
|
||||
<!-- <td>{{data.A_phsA}}</td>-->
|
||||
<!-- <td>{{data.A_phsB}}</td>-->
|
||||
<!-- <td>{{data.A_phsC}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>线电压总有效值(V)</td>
|
||||
<td>{{data.PPV_phsAB}}</td>
|
||||
<td>{{data.PPV_phsBC}}</td>
|
||||
<td>{{data.PPV_phsCA}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>线电压总有效值(V)</td>-->
|
||||
<!-- <td>{{data.PPV_phsAB}}</td>-->
|
||||
<!-- <td>{{data.PPV_phsBC}}</td>-->
|
||||
<!-- <td>{{data.PPV_phsCA}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>相电压偏差(%)</td>
|
||||
<td>{{data.PhVDev_phsA}}</td>
|
||||
<td>{{data.PhVDev_phsB}}</td>
|
||||
<td>{{data.PhVDev_phsC}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>相电压偏差(%)</td>-->
|
||||
<!-- <td>{{data.PhVDev_phsA}}</td>-->
|
||||
<!-- <td>{{data.PhVDev_phsB}}</td>-->
|
||||
<!-- <td>{{data.PhVDev_phsC}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>线电压偏差(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>线电压偏差(%)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>频率(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{data.Freq}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>频率(Hz)</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>{{data.Freq}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>频率偏差(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{data.FreqDev}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>频率偏差(Hz)</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
<!-- <td>{{data.FreqDev}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>电压序分量(V)</td>
|
||||
<td>{{data.SeqV_C0}}</td>
|
||||
<td>{{data.SeqV_C1}}</td>
|
||||
<td>{{data.SeqV_C2}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电压序分量(V)</td>-->
|
||||
<!-- <td>{{data.SeqV_C0}}</td>-->
|
||||
<!-- <td>{{data.SeqV_C1}}</td>-->
|
||||
<!-- <td>{{data.SeqV_C2}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>电流序分量(A)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电流序分量(A)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>总有功功率(W)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotW}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>总有功功率(W)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>{{data.TotW}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>总无功功率(Var)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotVar}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>总无功功率(Var)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>{{data.TotVar}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>总视在功率(VA)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotVA}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>总视在功率(VA)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>{{data.TotVA}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>视在功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{data.TotPF}}</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>视在功率因数</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>{{data.TotPF}}</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>位移功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>位移功率因数</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>电压波动</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电压波动</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>短时闪变</td>
|
||||
<td>{{data.PstPhV_phsA}}</td>
|
||||
<td>{{data.PstPhV_phsB}}</td>
|
||||
<td>{{data.PstPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>短时闪变</td>-->
|
||||
<!-- <td>{{data.PstPhV_phsA}}</td>-->
|
||||
<!-- <td>{{data.PstPhV_phsB}}</td>-->
|
||||
<!-- <td>{{data.PstPhV_phsC}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>长时闪变</td>
|
||||
<td>{{data.PltPhV_phsA}}</td>
|
||||
<td>{{data.PltPhV_phsB}}</td>
|
||||
<td>{{data.PltPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>长时闪变</td>-->
|
||||
<!-- <td>{{data.PltPhV_phsA}}</td>-->
|
||||
<!-- <td>{{data.PltPhV_phsB}}</td>-->
|
||||
<!-- <td>{{data.PltPhV_phsC}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
|
||||
<tr>
|
||||
<td>电压谐波畸变率(%)</td>
|
||||
<td>{{data.ThdPhV_phsA}}</td>
|
||||
<td>{{data.ThdPhV_phsB}}</td>
|
||||
<td>{{data.ThdPhV_phsC}}</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电压谐波畸变率(%)</td>-->
|
||||
<!-- <td>{{data.ThdPhV_phsA}}</td>-->
|
||||
<!-- <td>{{data.ThdPhV_phsB}}</td>-->
|
||||
<!-- <td>{{data.ThdPhV_phsC}}</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
<tr>
|
||||
<td>电流谐波畸变率(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>-</td>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>电流谐波畸变率(%)</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>/</td>-->
|
||||
<!-- <td>-</td>-->
|
||||
|
||||
</tr>
|
||||
<!-- </tr>-->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- </tbody>-->
|
||||
<!-- </table>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
</div>
|
||||
<!--</div>-->
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
||||
}
|
||||
}
|
||||
<!--<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'
|
||||
<!--</script>-->
|
||||
<!--<script type="module">-->
|
||||
<!-- import {createApp, onMounted, ref} from 'vue'-->
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
<!-- 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();
|
||||
<!-- 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);
|
||||
<!-- 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;
|
||||
}
|
||||
<!-- 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;
|
||||
}
|
||||
<!-- table caption {-->
|
||||
<!-- font-size: 2em;-->
|
||||
<!-- font-weight: bold;-->
|
||||
<!-- margin: 1em 0;-->
|
||||
<!-- }-->
|
||||
|
||||
th, td {
|
||||
border: 1px solid #999;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
<!-- th, td {-->
|
||||
<!-- border: 1px solid #999;-->
|
||||
<!-- text-align: center;-->
|
||||
<!-- padding: 10px 0;-->
|
||||
<!-- }-->
|
||||
|
||||
table thead tr {
|
||||
background-color: #008c8c;
|
||||
color: #fff;
|
||||
}
|
||||
<!-- table thead tr {-->
|
||||
<!-- background-color: #008c8c;-->
|
||||
<!-- color: #fff;-->
|
||||
<!-- }-->
|
||||
|
||||
table tbody tr:nth-child(odd) {
|
||||
background-color: #eee;
|
||||
}
|
||||
<!-- table tbody tr:nth-child(odd) {-->
|
||||
<!-- background-color: #eee;-->
|
||||
<!-- }-->
|
||||
|
||||
table tbody tr:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
<!-- table tbody tr:hover {-->
|
||||
<!-- background-color: #ccc;-->
|
||||
<!-- }-->
|
||||
|
||||
table tbody tr td:first-child {
|
||||
color: #3d34fc;
|
||||
}
|
||||
<!-- table tbody tr td:first-child {-->
|
||||
<!-- color: #3d34fc;-->
|
||||
<!-- }-->
|
||||
|
||||
table tfoot tr td {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
<!-- table tfoot tr td {-->
|
||||
<!-- text-align: right;-->
|
||||
<!-- padding-right: 20px;-->
|
||||
<!-- }-->
|
||||
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
<!-- #app {-->
|
||||
<!-- padding: 10px;-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
<!--</html>-->
|
||||
|
||||
Reference in New Issue
Block a user