Other/hb_roma
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
hzj
2024-07-02 17:45:04 +08:00
parent 59f47a0c35
commit 4e15d707b1
9 changed files with 74425 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/main/resources/static/index.html Normal file
View File

@@ -0,0 +1,211 @@
<!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" colspan="3">电压有效值(kV)</th>
<th class="table-middle" colspan="3">电流有效值(A)</th>
<th class="table-middle" colspan="3">基波电压幅值(kV)</th>
<th class="table-middle" colspan="3">基波电压相位(°)</th>
<th class="table-middle" colspan="3">基波电流幅值(A)</th>
<th class="table-middle" colspan="3">基波电流相位(°)</th>
</tr>
<tr>
<th id="title1" class="table-middle">A相</th>
<th id="title2" class="table-middle">B相</th>
<th id="title3" class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
</tr>
</thead>
<tbody><tr>
<td id="data1">{{data.PhV_phsA}}</td>
<td id="data2">{{data.PhV_phsB}}</td>
<td id="data3">{{data.PhV_phsC}}</td>
<td id="data4">{{data.A_phsA}}</td>
<td id="data5">{{data.A_phsB}}</td>
<td id="data6">{{data.A_phsC}}</td>
<td id="data7">\</td>
<td id="data8">\</td>
<td id="data9">\</td>
<td id="data10">\</td>
<td id="data11">\</td>
<td id="data12">\</td>
<td id="data13">\</td>
<td id="data14">\</td>
<td id="data15">\</td>
<td id="data16">\</td>
<td id="data17">\</td>
<td id="data18">\</td>
</tr>
</tbody></table>
</div>
<div id="table2" class="col-sm-12">
<table id="areaTable2" 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" colspan="3">电压偏差(%)</th>
<th class="table-middle" colspan="3">电压总谐波畸变率(%)</th>
<th class="table-middle" colspan="3">电流总谐波畸变率(%)</th>
<th class="table-middle" rowspan="2">电压不平<br>衡度(%)</th>
<th class="table-middle" rowspan="2">电流不平<br>衡度(%)</th>
<th class="table-middle" rowspan="2">频率(Hz)</th>
</tr>
<tr>
<th id="title4" class="table-middle">A相</th>
<th id="title5" class="table-middle">B相</th>
<th id="title6" class="table-middle">C相</th>
<th id="title7" class="table-middle">A相</th>
<th id="title8" class="table-middle">B相</th>
<th id="title9" class="table-middle">C相</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
</tr>
</thead>
<tbody><tr>
<td id="sdata1">{{data.PhVDev_phsA}}</td>
<td id="sdata2">{{data.PhVDev_phsB}}</td>
<td id="sdata3">{{data.PhVDev_phsC}}</td>
<td id="sdata4">{{data.ThdPhV_phsA}}</td>
<td id="sdata5">{{data.ThdPhV_phsB}}</td>
<td id="sdata6">{{data.ThdPhV_phsC}}</td>
<td id="sdata7">\</td>
<td id="sdata8">\</td>
<td id="sdata9">\</td>
<td id="sdata10">{{data.ImbNgV}}</td>
<td id="sdata11">\</td>
<td id="sdata12">{{data.Freq}}</td>
</tr>
</tbody></table>
</div>
<div id="table3" class="col-sm-12">
<table id="areaTable3" 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" colspan="4">有功功率(kW)</th>
<th class="table-middle" colspan="4">无功功率(kVar)</th>
<th class="table-middle" colspan="4">视在功率(kVA)</th>
<th class="table-middle" colspan="4">功率因数</th>
<th class="table-middle" colspan="4">基波功率因数</th>
</tr>
<tr>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">总有功功率</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">总无功功率</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">总视在功率</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">总功率因数</th>
<th class="table-middle">A相</th>
<th class="table-middle">B相</th>
<th class="table-middle">C相</th>
<th class="table-middle">总基波功率因数</th>
</tr>
</thead>
<tbody><tr>
<td id="gdata1">\</td>
<td id="gdata2">\</td>
<td id="gdata3">\</td>
<td id="gdata4">{{data.TotW}}</td>
<td id="gdata5">\</td>
<td id="gdata6">\</td>
<td id="gdata7">\</td>
<td id="gdata8">{{data.TotVar}}</td>
<td id="gdata9">\</td>
<td id="gdata10">\</td>
<td id="gdata11">\</td>
<td id="gdata12">{{data.TotVA}}</td>
<td id="gdata13">\</td>
<td id="gdata14">\</td>
<td id="gdata15">\</td>
<td id="gdata16">{{data.TotPF}}</td>
<td id="gdata17">\</td>
<td id="gdata18">\</td>
<td id="gdata19">\</td>
<td id="gdata20">\</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, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#app {
padding: 10px;
}
</style>
</html>