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

231 lines
8.8 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>
<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>
<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>
</tr>
<tr>
<td>4次</td>
<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>
</tr>
<tr>
<td>5次</td>
<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>
</tr>
<tr>
<td>6次</td>
<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>
</tr>
<tr>
<td>7次</td>
<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>
</tr>
<tr>
<td>8次</td>
<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>
</tr>
<tr>
<td>9次</td>
<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>
</tr>
<tr>
<td>10次</td>
<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>
</tr>
<tr>
<td>11次</td>
<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>
</tr>
<tr>
<td>12次</td>
<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>
</tr>
<tr>
<td>13次</td>
<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>
</tr>
<tr>
<td>14次</td>
<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>
</tr>
<tr>
<td>15次</td>
<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>
</tr>
<tr>
<td>16次</td>
<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>
</tr>
<tr>
<td>17次</td>
<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>
</tr>
<tr>
<td>18次</td>
<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>
</tr>
<tr>
<td>19次</td>
<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>
</tr>
<tr>
<td>20次</td>
<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>
</tr>
<tr>
<td>21次</td>
<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>
</tr>
<tr>
<td>22次</td>
<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>
</tr>
<tr>
<td>23次</td>
<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>
</tr>
<tr>
<td>24次</td>
<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>
</tr>
<tr>
<td>25次</td>
<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>
</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 18:55:38 +08:00
table {
2024-07-02 17:45:04 +08:00
border-collapse: collapse;
2024-07-02 18:55:38 +08:00
width: 50%;
margin: 0 auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
2024-07-02 17:45:04 +08:00
}
2024-07-02 18:55:38 +08:00
th {
background-color: #f2f2f2;
2024-07-02 17:45:04 +08:00
}
</style>
</html>