Files
hb_roma/src/main/resources/static/index.html

260 lines
8.9 KiB
HTML
Raw Normal View History

2024-07-02 17:45:04 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2024-07-02 18:55:38 +08:00
<title>谐波次数表格</title>
2024-07-02 17:45:04 +08:00
<link rel="stylesheet" href="./element.css" />
<script src="./vue.js"></script>
</head>
<body>
<div id="app" >
2024-07-02 18:55:38 +08:00
<div>
<table>
2024-07-02 17:45:04 +08:00
<thead>
2024-07-02 18:55:38 +08:00
<tr>
<th>谐波次数</th>
<th>A/AB</th>
<th>B/BC</th>
<th>C/CA</th>
2024-07-02 17:45:04 +08:00
</tr>
</thead>
2024-07-02 18:55:38 +08:00
<tbody>
<tr>
<td>基波</td>
<td>100.000</td>
<td>100.000</td>
<td>100.000</td>
2024-07-02 17:45:04 +08:00
</tr>
2024-07-02 18:55:38 +08:00
<tr>
<td>2次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H2_phsA?data.HRPhV_H2_phsA:'/'}}</td>
<td>{{data.HRPhV_H2_phsB?data.HRPhV_H2_phsB:'/'}}</td>
<td>{{data.HRPhV_H2_phsC?data.HRPhV_H2_phsC:'/'}}</td>
2024-07-02 17:45:04 +08:00
</tr>
2024-07-02 18:55:38 +08:00
<tr>
<td>3次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H3_phsA?data.HRPhV_H3_phsA:'/'}}</td>
<td>{{data.HRPhV_H3_phsB?data.HRPhV_H3_phsB:'/'}}</td>
<td>{{data.HRPhV_H3_phsC?data.HRPhV_H3_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>4次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H4_phsA?data.HRPhV_H4_phsA:'/'}}</td>
<td>{{data.HRPhV_H4_phsB?data.HRPhV_H4_phsB:'/'}}</td>
<td>{{data.HRPhV_H4_phsC?data.HRPhV_H4_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>5次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H5_phsA?data.HRPhV_H5_phsA:'/'}}</td>
<td>{{data.HRPhV_H5_phsB?data.HRPhV_H5_phsB:'/'}}</td>
<td>{{data.HRPhV_H5_phsC?data.HRPhV_H5_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>6次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H6_phsA?data.HRPhV_H6_phsA:'/'}}</td>
<td>{{data.HRPhV_H6_phsB?data.HRPhV_H6_phsB:'/'}}</td>
<td>{{data.HRPhV_H6_phsC?data.HRPhV_H6_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>7次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H7_phsA?data.HRPhV_H7_phsA:'/'}}</td>
<td>{{data.HRPhV_H7_phsB?data.HRPhV_H7_phsB:'/'}}</td>
<td>{{data.HRPhV_H7_phsC?data.HRPhV_H7_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>8次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H8_phsA?data.HRPhV_H8_phsA:'/'}}</td>
<td>{{data.HRPhV_H8_phsB?data.HRPhV_H8_phsB:'/'}}</td>
<td>{{data.HRPhV_H8_phsC?data.HRPhV_H8_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>9次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H9_phsA?data.HRPhV_H9_phsA:'/'}}</td>
<td>{{data.HRPhV_H9_phsB?data.HRPhV_H9_phsB:'/'}}</td>
<td>{{data.HRPhV_H9_phsC?data.HRPhV_H9_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>10次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H10_phsA?data.HRPhV_H10_phsA:'/'}}</td>
<td>{{data.HRPhV_H10_phsB?data.HRPhV_H10_phsB:'/'}}</td>
<td>{{data.HRPhV_H10_phsC?data.HRPhV_H10_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>11次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H11_phsA?data.HRPhV_H11_phsA:'/'}}</td>
<td>{{data.HRPhV_H11_phsB?data.HRPhV_H11_phsB:'/'}}</td>
<td>{{data.HRPhV_H11_phsC?data.HRPhV_H11_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>12次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H12_phsA?data.HRPhV_H12_phsA:'/'}}</td>
<td>{{data.HRPhV_H12_phsB?data.HRPhV_H12_phsB:'/'}}</td>
<td>{{data.HRPhV_H12_phsC?data.HRPhV_H12_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>13次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H13_phsA?data.HRPhV_H13_phsA:'/'}}</td>
<td>{{data.HRPhV_H13_phsB?data.HRPhV_H13_phsB:'/'}}</td>
<td>{{data.HRPhV_H13_phsC?data.HRPhV_H13_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>14次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H14_phsA?data.HRPhV_H14_phsA:'/'}}</td>
<td>{{data.HRPhV_H14_phsB?data.HRPhV_H14_phsB:'/'}}</td>
<td>{{data.HRPhV_H14_phsC?data.HRPhV_H14_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>15次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H15_phsA?data.HRPhV_H15_phsA:'/'}}</td>
<td>{{data.HRPhV_H15_phsB?data.HRPhV_H15_phsB:'/'}}</td>
<td>{{data.HRPhV_H15_phsC?data.HRPhV_H15_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>16次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H16_phsA?data.HRPhV_H16_phsA:'/'}}</td>
<td>{{data.HRPhV_H16_phsB?data.HRPhV_H16_phsB:'/'}}</td>
<td>{{data.HRPhV_H16_phsC?data.HRPhV_H16_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>17次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H17_phsA?data.HRPhV_H17_phsA:'/'}}</td>
<td>{{data.HRPhV_H17_phsB?data.HRPhV_H17_phsB:'/'}}</td>
<td>{{data.HRPhV_H17_phsC?data.HRPhV_H17_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>18次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H18_phsA?data.HRPhV_H18_phsA:'/'}}</td>
<td>{{data.HRPhV_H18_phsB?data.HRPhV_H18_phsB:'/'}}</td>
<td>{{data.HRPhV_H18_phsC?data.HRPhV_H18_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>19次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H19_phsA?data.HRPhV_H19_phsA:'/'}}</td>
<td>{{data.HRPhV_H19_phsB?data.HRPhV_H19_phsB:'/'}}</td>
<td>{{data.HRPhV_H19_phsC?data.HRPhV_H19_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>20次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H20_phsA?data.HRPhV_H20_phsA:'/'}}</td>
<td>{{data.HRPhV_H20_phsB?data.HRPhV_H20_phsB:'/'}}</td>
<td>{{data.HRPhV_H20_phsC?data.HRPhV_H20_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>21次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H21_phsA?data.HRPhV_H21_phsA:'/'}}</td>
<td>{{data.HRPhV_H21_phsB?data.HRPhV_H21_phsB:'/'}}</td>
<td>{{data.HRPhV_H21_phsC?data.HRPhV_H21_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>22次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H22_phsA?data.HRPhV_H22_phsA:'/'}}</td>
<td>{{data.HRPhV_H22_phsB?data.HRPhV_H22_phsB:'/'}}</td>
<td>{{data.HRPhV_H22_phsC?data.HRPhV_H22_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>23次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H23_phsA?data.HRPhV_H23_phsA:'/'}}</td>
<td>{{data.HRPhV_H23_phsB?data.HRPhV_H23_phsB:'/'}}</td>
<td>{{data.HRPhV_H23_phsC?data.HRPhV_H23_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>24次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H24_phsA?data.HRPhV_H24_phsA:'/'}}</td>
<td>{{data.HRPhV_H24_phsB?data.HRPhV_H24_phsB:'/'}}</td>
<td>{{data.HRPhV_H24_phsC?data.HRPhV_H24_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
<tr>
<td>25次</td>
2024-07-02 19:02:29 +08:00
<td>{{data.HRPhV_H25_phsA?data.HRPhV_H25_phsA:'/'}}</td>
<td>{{data.HRPhV_H25_phsB?data.HRPhV_H25_phsB:'/'}}</td>
<td>{{data.HRPhV_H25_phsC?data.HRPhV_H25_phsC:'/'}}</td>
2024-07-02 18:55:38 +08:00
</tr>
</tbody>
</table>
2024-07-02 17:45:04 +08:00
</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>
2024-07-02 19:02:29 +08:00
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;
}
2024-07-02 17:45:04 +08:00
</style>
</html>