diff --git a/src/main/java/com/njcn/roma/client/ClientHandler.java b/src/main/java/com/njcn/roma/client/ClientHandler.java
index c5b9049..58c7050 100644
--- a/src/main/java/com/njcn/roma/client/ClientHandler.java
+++ b/src/main/java/com/njcn/roma/client/ClientHandler.java
@@ -15,6 +15,7 @@ import org.springframework.web.bind.annotation.*;
 
 import java.io.*;
 import java.nio.charset.StandardCharsets;
+import java.util.Map;
 
 /**
  * roma
@@ -26,17 +27,14 @@ import java.nio.charset.StandardCharsets;
 @RestController
 @RequiredArgsConstructor
 public class ClientHandler extends Thread {
-    public String topicMsg = "暂无数据";
+    public String topicMsg = "{\"HRPhV_H14_phsC\":\"0\",\"HRPhV_H14_phsB\":\"0.000\",\"HRPhV_H14_phsA\":\"0.000\",\"HRPhV_H2_phsB\":\"0.000\",\"HRPhV_H2_phsA\":\"0.000\",\"HRPhV_H2_phsC\":\"0.000\",\"HRPhV_H15_phsA\":\"0.000\",\"TotW\":\"0.000\",\"HRPhV_H15_phsB\":\"0.000\",\"HRPhV_H15_phsC\":\"0\",\"FreqDev\":\"0.000\",\"PPV_phsAB\":\"0.000\",\"A_phsC\":\"0.006\",\"TotPF\":\"1.000\",\"A_phsA\":\"0.005\",\"A_phsB\":\"0.005\",\"PPV_phsBC\":\"0.000\",\"HRPhV_H25_phsB\":\"0.000\",\"HRPhV_H25_phsC\":\"0\",\"HRPhV_H25_phsA\":\"0.000\",\"DataTag\":\"1.000\",\"HRPhV_H20_phsA\":\"0.000\",\"HRPhV_H20_phsB\":\"0.000\",\"HRPhV_H20_phsC\":\"0\",\"PPV_phsCA\":\"0.000\",\"HRPhV_H3_phsB\":\"0.000\",\"HRPhV_H3_phsC\":\"0.000\",\"HRPhV_H9_phsC\":\"0\",\"ThdPhV_phsA\":\"0.000\",\"HRPhV_H9_phsB\":\"0.000\",\"HRPhV_H9_phsA\":\"0.000\",\"ThdPhV_phsB\":\"0.000\",\"ThdPhV_phsC\":\"0.000\",\"HRPhV_H19_phsC\":\"0\",\"HRPhV_H19_phsB\":\"0.000\",\"HRPhV_H19_phsA\":\"0.000\",\"HRPhV_H16_phsA\":\"0.000\",\"HRPhV_H13_phsA\":\"0.000\",\"HRPhV_H16_phsC\":\"0\",\"HRPhV_H13_phsB\":\"0.000\",\"HRPhV_H16_phsB\":\"0.000\",\"TotVA\":\"0.000\",\"HRPhV_H13_phsC\":\"0\",\"HRPhV_H6_phsB\":\"0.000\",\"HRPhV_H3_phsA\":\"0.000\",\"HRPhV_H6_phsA\":\"0.000\",\"HRPhV_H10_phsA\":\"0.000\",\"HRPhV_H10_phsB\":\"0.000\",\"HRPhV_H6_phsC\":\"0.000\",\"HRPhV_H10_phsC\":\"0\",\"ImbNgV\":\"0.000\",\"TotVar\":\"0.000\",\"HRPhV_H7_phsC\":\"0.000\",\"HRPhV_H7_phsB\":\"0.000\",\"HRPhV_H22_phsC\":\"0\",\"HRPhV_H22_phsB\":\"0.000\",\"ImbZroV\":\"0.000\",\"HRPhV_H22_phsA\":\"0.000\",\"HRPhV_H7_phsA\":\"0.000\",\"HRPhV_H8_phsA\":\"0.000\",\"HRPhV_H23_phsB\":\"0.000\",\"PhV_phsA\":\"0.002\",\"HRPhV_H8_phsB\":\"0.000\",\"HRPhV_H23_phsC\":\"0\",\"HRPhV_H8_phsC\":\"0\",\"PhV_phsB\":\"0.360\",\"PhV_phsC\":\"0.001\",\"HRPhV_H23_phsA\":\"0.000\",\"PstPhV_phsC\":\"0.000\",\"PstPhV_phsA\":\"0.000\",\"PstPhV_phsB\":\"0.000\",\"Freq\":\"50.000\",\"HRPhV_H11_phsA\":\"0.000\",\"HRPhV_H11_phsB\":\"0.000\",\"HRPhV_H17_phsC\":\"0\",\"HRPhV_H11_phsC\":\"0\",\"HRPhV_H17_phsB\":\"0.000\",\"HRPhV_H17_phsA\":\"0.000\",\"SeqV_C2\":\"0.001\",\"HRPhV_H4_phsB\":\"0.000\",\"SeqV_C1\":\"0.001\",\"HRPhV_H4_phsA\":\"0.000\",\"SeqV_C0\":\"0.006\",\"PhVDev_phsC\":\"0.000\",\"HRPhV_H5_phsA\":\"0.000\",\"HRPhV_H5_phsB\":\"0.000\",\"HRPhV_H5_phsC\":\"0.000\",\"PhVDev_phsB\":\"0.000\",\"HRPhV_H12_phsC\":\"0\",\"PltPhV_phsA\":\"0.000\",\"PhVDev_phsA\":\"0.000\",\"HRPhV_H12_phsB\":\"0.000\",\"HRPhV_H4_phsC\":\"0.000\",\"HRPhV_H18_phsB\":\"0.000\",\"HRPhV_H18_phsC\":\"0\",\"HRPhV_H12_phsA\":\"0.000\",\"HRPhV_H18_phsA\":\"0.000\",\"HFundPhV_phsC\":\"0.008\",\"HRPhV_H21_phsC\":\"0\",\"HRPhV_H21_phsB\":\"0.000\",\"HRPhV_H24_phsC\":\"0\",\"HFundPhV_phsA\":\"0.007\",\"HRPhV_H21_phsA\":\"0.000\",\"HFundPhV_phsB\":\"0.007\",\"HRPhV_H24_phsB\":\"0.000\",\"PltPhV_phsC\":\"0.000\",\"HRPhV_H24_phsA\":\"0.000\",\"PltPhV_phsB\":\"0.000\",\"time\":\"20240702T160000Z\"}";;
     private Consumer consumer;
 
     @GetMapping("message")
-    private MessageBodyDTO message() {
-        String jsonString = "{\"HRPhV_H14_phsC\":\"0\",\"HRPhV_H14_phsB\":\"0.000\",\"HRPhV_H14_phsA\":\"0.000\",\"HRPhV_H2_phsB\":\"0.000\",\"HRPhV_H2_phsA\":\"0.000\",\"HRPhV_H2_phsC\":\"0.000\",\"HRPhV_H15_phsA\":\"0.000\",\"TotW\":\"0.000\",\"HRPhV_H15_phsB\":\"0.000\",\"HRPhV_H15_phsC\":\"0\",\"FreqDev\":\"0.000\",\"PPV_phsAB\":\"0.000\",\"A_phsC\":\"0.006\",\"TotPF\":\"1.000\",\"A_phsA\":\"0.005\",\"A_phsB\":\"0.005\",\"PPV_phsBC\":\"0.000\",\"HRPhV_H25_phsB\":\"0.000\",\"HRPhV_H25_phsC\":\"0\",\"HRPhV_H25_phsA\":\"0.000\",\"DataTag\":\"1.000\",\"HRPhV_H20_phsA\":\"0.000\",\"HRPhV_H20_phsB\":\"0.000\",\"HRPhV_H20_phsC\":\"0\",\"PPV_phsCA\":\"0.000\",\"HRPhV_H3_phsB\":\"0.000\",\"HRPhV_H3_phsC\":\"0.000\",\"HRPhV_H9_phsC\":\"0\",\"ThdPhV_phsA\":\"0.000\",\"HRPhV_H9_phsB\":\"0.000\",\"HRPhV_H9_phsA\":\"0.000\",\"ThdPhV_phsB\":\"0.000\",\"ThdPhV_phsC\":\"0.000\",\"HRPhV_H19_phsC\":\"0\",\"HRPhV_H19_phsB\":\"0.000\",\"HRPhV_H19_phsA\":\"0.000\",\"HRPhV_H16_phsA\":\"0.000\",\"HRPhV_H13_phsA\":\"0.000\",\"HRPhV_H16_phsC\":\"0\",\"HRPhV_H13_phsB\":\"0.000\",\"HRPhV_H16_phsB\":\"0.000\",\"TotVA\":\"0.000\",\"HRPhV_H13_phsC\":\"0\",\"HRPhV_H6_phsB\":\"0.000\",\"HRPhV_H3_phsA\":\"0.000\",\"HRPhV_H6_phsA\":\"0.000\",\"HRPhV_H10_phsA\":\"0.000\",\"HRPhV_H10_phsB\":\"0.000\",\"HRPhV_H6_phsC\":\"0.000\",\"HRPhV_H10_phsC\":\"0\",\"ImbNgV\":\"0.000\",\"TotVar\":\"0.000\",\"HRPhV_H7_phsC\":\"0.000\",\"HRPhV_H7_phsB\":\"0.000\",\"HRPhV_H22_phsC\":\"0\",\"HRPhV_H22_phsB\":\"0.000\",\"ImbZroV\":\"0.000\",\"HRPhV_H22_phsA\":\"0.000\",\"HRPhV_H7_phsA\":\"0.000\",\"HRPhV_H8_phsA\":\"0.000\",\"HRPhV_H23_phsB\":\"0.000\",\"PhV_phsA\":\"0.002\",\"HRPhV_H8_phsB\":\"0.000\",\"HRPhV_H23_phsC\":\"0\",\"HRPhV_H8_phsC\":\"0\",\"PhV_phsB\":\"0.360\",\"PhV_phsC\":\"0.001\",\"HRPhV_H23_phsA\":\"0.000\",\"PstPhV_phsC\":\"0.000\",\"PstPhV_phsA\":\"0.000\",\"PstPhV_phsB\":\"0.000\",\"Freq\":\"50.000\",\"HRPhV_H11_phsA\":\"0.000\",\"HRPhV_H11_phsB\":\"0.000\",\"HRPhV_H17_phsC\":\"0\",\"HRPhV_H11_phsC\":\"0\",\"HRPhV_H17_phsB\":\"0.000\",\"HRPhV_H17_phsA\":\"0.000\",\"SeqV_C2\":\"0.001\",\"HRPhV_H4_phsB\":\"0.000\",\"SeqV_C1\":\"0.001\",\"HRPhV_H4_phsA\":\"0.000\",\"SeqV_C0\":\"0.006\",\"PhVDev_phsC\":\"0.000\",\"HRPhV_H5_phsA\":\"0.000\",\"HRPhV_H5_phsB\":\"0.000\",\"HRPhV_H5_phsC\":\"0.000\",\"PhVDev_phsB\":\"0.000\",\"HRPhV_H12_phsC\":\"0\",\"PltPhV_phsA\":\"0.000\",\"PhVDev_phsA\":\"0.000\",\"HRPhV_H12_phsB\":\"0.000\",\"HRPhV_H4_phsC\":\"0.000\",\"HRPhV_H18_phsB\":\"0.000\",\"HRPhV_H18_phsC\":\"0\",\"HRPhV_H12_phsA\":\"0.000\",\"HRPhV_H18_phsA\":\"0.000\",\"HFundPhV_phsC\":\"0.008\",\"HRPhV_H21_phsC\":\"0\",\"HRPhV_H21_phsB\":\"0.000\",\"HRPhV_H24_phsC\":\"0\",\"HFundPhV_phsA\":\"0.007\",\"HRPhV_H21_phsA\":\"0.000\",\"HFundPhV_phsB\":\"0.007\",\"HRPhV_H24_phsB\":\"0.000\",\"PltPhV_phsC\":\"0.000\",\"HRPhV_H24_phsA\":\"0.000\",\"PltPhV_phsB\":\"0.000\",\"time\":\"20240702T160000Z\"}";
+    private Map<String,String> message() {
         MessageBodyDTO messageBodyDTO = new MessageBodyDTO();
-
-
-        messageBodyDTO = JSONObject.parseObject(jsonString, MessageBodyDTO.class);
-        return messageBodyDTO;
+        Map<String,String> map = JSONObject.parseObject(topicMsg, Map.class);
+        return map;
     }
 
     @Override
diff --git a/src/main/resources/static/harmnic.html b/src/main/resources/static/harmnic.html
new file mode 100644
index 0000000..28fe78b
--- /dev/null
+++ b/src/main/resources/static/harmnic.html
@@ -0,0 +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>
+
+            </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>
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 401ec27..496d1cc 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -28,147 +28,147 @@
             </tr>
             <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>
+                <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>
             </tr>
             <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
@@ -213,18 +213,47 @@
  </script>
 </body>
 <style>
-         table {
-            border-collapse: collapse;
-            width: 50%;
-            margin: 0 auto;
-        }
-        th, td {
-            border: 1px solid black;
-            padding: 8px;
-            text-align: center;
-        }
-        th {
-            background-color: #f2f2f2;
-        }
+    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>