first

src/main/java/com/njcn/roma/client/ClientHandler.java

@@ -27,12 +27,17 @@ import java.util.Map;
 @RestController
 @RequiredArgsConstructor
 public class ClientHandler extends Thread {
-    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\"}";;
+
+
+
+    public String topicMsg = "{\"HRPhV_H14_phsC\":\"0.0000\",\"HRPhV_H14_phsB\":\"0.0000\",\"HRPhV_H14_phsA\":\"0.0000\",\"HRPhV_H2_phsB\":\"0.0100\",\"HRPhV_H2_phsA\":\"0.0100\",\"HRPhV_H2_phsC\":\"0.0100\",\"HRPhV_H15_phsA\":\"0.0120\",\"TotW\":\"19771.1367\",\"HRPhV_H15_phsB\":\"0.0120\",\"HRPhV_H15_phsC\":\"0.0120\",\"FreqDev\":\"0.0000\",\"PPV_phsAB\":\"384.0318\",\"A_phsC\":\"60.7116\",\"TotPF\":\"0.4946\",\"A_phsA\":\"60.7123\",\"A_phsB\":\"60.7111\",\"PPV_phsBC\":\"383.3656\",\"HRPhV_H25_phsB\":\"0.0080\",\"HRPhV_H25_phsC\":\"0.0080\",\"HRPhV_H25_phsA\":\"0.0080\",\"DataTag\":\"0\",\"HRPhV_H20_phsA\":\"0.0000\",\"HRPhV_H20_phsB\":\"0.0000\",\"HRPhV_H20_phsC\":\"0.0000\",\"PPV_phsCA\":\"383.3637\",\"HRPhV_H3_phsB\":\"0.0640\",\"HRPhV_H3_phsC\":\"0.0640\",\"HRPhV_H9_phsC\":\"0.0220\",\"ThdPhV_phsA\":\"0.0913\",\"HRPhV_H9_phsB\":\"0.0220\",\"HRPhV_H9_phsA\":\"0.0220\",\"ThdPhV_phsB\":\"0.0913\",\"ThdPhV_phsC\":\"0.0913\",\"HRPhV_H19_phsC\":\"0.0100\",\"HRPhV_H19_phsB\":\"0.0100\",\"HRPhV_H19_phsA\":\"0.0100\",\"HRPhV_H16_phsA\":\"0.0000\",\"HRPhV_H13_phsA\":\"0.0140\",\"HRPhV_H16_phsC\":\"0.0000\",\"HRPhV_H13_phsB\":\"0.0140\",\"HRPhV_H16_phsB\":\"0.0000\",\"TotVA\":\"39977.2305\",\"HRPhV_H13_phsC\":\"0.0140\",\"HRPhV_H6_phsB\":\"0.0026\",\"HRPhV_H3_phsA\":\"0.0640\",\"HRPhV_H6_phsA\":\"0.0026\",\"HRPhV_H10_phsA\":\"0.0026\",\"HRPhV_H10_phsB\":\"0.0026\",\"HRPhV_H6_phsC\":\"0.0026\",\"HRPhV_H10_phsC\":\"0.0026\",\"ImbNgV\":\"0.0012\",\"TotVar\":\"34745.9492\",\"HRPhV_H7_phsC\":\"0.0280\",\"HRPhV_H7_phsB\":\"0.0280\",\"HRPhV_H22_phsC\":\"0.0000\",\"HRPhV_H22_phsB\":\"0.0000\",\"ImbZroV\":\"0.0012\",\"HRPhV_H22_phsA\":\"0.0000\",\"HRPhV_H7_phsA\":\"0.0280\",\"HRPhV_H8_phsA\":\"0.0026\",\"HRPhV_H23_phsB\":\"0.0080\",\"PhV_phsA\":\"221.9935\",\"HRPhV_H8_phsB\":\"0.0026\",\"HRPhV_H23_phsC\":\"0.0080\",\"HRPhV_H8_phsC\":\"0.0026\",\"PhV_phsB\":\"221.9947\",\"PhV_phsC\":\"221.9979\",\"HRPhV_H23_phsA\":\"0.0080\",\"PstPhV_phsC\":\"3.2942\",\"PstPhV_phsA\":\"3.3086\",\"PstPhV_phsB\":\"3.2987\",\"Freq\":\"50.0000\",\"HRPhV_H11_phsA\":\"0.0180\",\"HRPhV_H11_phsB\":\"0.0180\",\"HRPhV_H17_phsC\":\"0.0100\",\"HRPhV_H11_phsC\":\"0.0180\",\"HRPhV_H17_phsB\":\"0.0100\",\"HRPhV_H17_phsA\":\"0.0100\",\"SeqV_C2\":\"0.0715\",\"HRPhV_H4_phsB\":\"0.0050\",\"SeqV_C1\":\"60.4601\",\"HRPhV_H4_phsA\":\"0.0050\",\"SeqV_C0\":\"0.0714\",\"PhVDev_phsC\":\"0.0119\",\"HRPhV_H5_phsA\":\"0.0400\",\"HRPhV_H5_phsB\":\"0.0400\",\"HRPhV_H5_phsC\":\"0.0400\",\"PhVDev_phsB\":\"0.0119\",\"HRPhV_H12_phsC\":\"0.0010\",\"PltPhV_phsA\":\"0.0000\",\"PhVDev_phsA\":\"0.0119\",\"HRPhV_H12_phsB\":\"0.0010\",\"HRPhV_H4_phsC\":\"0.0050\",\"HRPhV_H18_phsB\":\"0.0000\",\"HRPhV_H18_phsC\":\"0.0000\",\"HRPhV_H12_phsA\":\"0.0010\",\"HRPhV_H18_phsA\":\"0.0000\",\"HFundPhV_phsC\":\"220.8052\",\"HRPhV_H21_phsC\":\"0.0080\",\"HRPhV_H21_phsB\":\"0.0080\",\"HRPhV_H24_phsC\":\"0.0000\",\"HFundPhV_phsA\":\"220.8056\",\"HRPhV_H21_phsA\":\"0.0080\",\"HFundPhV_phsB\":\"220.8055\",\"HRPhV_H24_phsB\":\"0.0000\",\"PltPhV_phsC\":\"0.0000\",\"HRPhV_H24_phsA\":\"0.0000\",\"PltPhV_phsB\":\"0.0000\",\"time\":\"20240704T152745Z\"}";
+
+    public String devId;
+
     private Consumer consumer;
 
     @GetMapping("message")
     private Map<String,String> message() {
-        MessageBodyDTO messageBodyDTO = new MessageBodyDTO();
         Map<String,String> map = JSONObject.parseObject(topicMsg, Map.class);
         return map;
     }
@@ -54,11 +59,13 @@ public class ClientHandler extends Thread {
                 public ConsumeStatus consume(Message message) {
                     // 消费消息的业务逻辑
                     try {
-                        String msg = new String(message.getBody(), "UTF-8");
+                        System.out.println("收到新的一轮数据：******************");
-                        topicMsg = msg;
+                        topicMsg = new String(message.getBody(), "UTF-8");
-                        System.out.println("Receive: " + msg);
+                        System.out.println("装置信息：========="+message.getProperties());
-
+                        devId = message.getProperties().get("deviceId")+"#"+message.getProperties().get("deviceIdentifier");
-                    } catch (UnsupportedEncodingException e) {
+                        System.out.println("Receive>>>>>>>>>>>>: " + topicMsg);
+                    } catch (Exception e) {
+                        System.out.println("帮忙拍个照这个是接收消息的报错------------------------------------------------------------");
                         e.printStackTrace();
                     }
                     // 正常接收到消息后，请务必返回 CONSUME_SUCCESS，只有在业务处理失败才返回RECONSUME_LATER

src/main/java/com/njcn/roma/controller/TestController.java

@@ -91,7 +91,7 @@ public class TestController {
 
     @GetMapping("show")
     public String show() {
-       return clientHandler.topicMsg;
+       return clientHandler.topicMsg +" >>>>>>> "+ clientHandler.devId;
     }
 
 }

src/main/java/com/njcn/roma/listener/ClientListener.java

@@ -26,5 +26,6 @@ public class ClientListener {
         log.info("启动时自动执行  @EventListener 注解方法");
 
         clientHandler.start();
+
     }
 }

src/main/resources/static/index.html

@@ -3,14 +3,34 @@
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>谐波次数表格</title>
+    <title>谐波次 (%)数表格</title>
     <link rel="stylesheet" href="./element.css"/>
     <script src="./vue.js"></script>
+    <script src="./aaa.js" ></script>
 </head>
 <body>
 <div id="app">
+
     <div>
-        <table>
+
+        <div style="display: flex">
+            <div class="div">
+                <select>
+                    <option>实时数据</option>
+                </select>
+            </div>
+            <div class="div">
+                <select v-model="toOtherVal" @change="toOther">
+                    <option :value="0">基本电能质量数据</option>
+                    <option :value="1">谐波 电压 含有率(%)</option>
+                </select>
+            </div>
+
+            <button class="el-button" @click="fetchData">读取</button>
+
+        </div>
+        <div v-if="data.time" style="float: right">{{data.time.substring(0,4)+'-'+data.time.substring(4,6)+'-'+data.time.substring(6,8)+' '+data.time.substring(9,11)+':'+data.time.substring(11,13)+':'+data.time.substring(13,15)}}</div>
+        <table v-if="!changeFlag">
             <thead>
             <tr>
                 <th>谐波次数</th>
@@ -21,174 +41,385 @@
             </thead>
             <tbody>
             <tr>
-                <td>基波</td>
+                <td>基波 (%)</td>
                 <td>100.000</td>
                 <td>100.000</td>
                 <td>100.000</td>
             </tr>
             <tr>
-                <td>2次</td>
+                <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>
             </tr>
             <tr>
-                <td>3次</td>
+                <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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>
-    </div>
+
+
+        <table v-if="changeFlag" 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>
 
-<script type="importmap">
+</div>
-  {
+
-    "imports": {
+<!--<script type="importmap">-->
-      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+<!--  {-->
-    }
+<!--    "imports": {-->
-  }
+<!--      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"-->
-</script>
+<!--    }-->
+<!--  }-->
+
+
+<!--</script>-->
 <script type="module">
-    import {createApp, onMounted, ref} from 'vue'
+    // import {createApp, onMounted, ref} from 'vue'
-
+    const {createApp , ref } = Vue
     createApp({
         setup() {
 
             const data = ref([]);
+
+            let changeFlag = ref(true);
+
+            const toOtherVal = ref(0)
+
+            const toOther = (val) => {
+                console.log(val);
+                if (toOtherVal.value == 1) {
+                    changeFlag.value = false
+                } else {
+                    changeFlag.value = true
+                }
+            };
+
+
             const fetchData = async () => {
                 try {
                     const response = await fetch('/message');
@@ -196,17 +427,23 @@
                         throw new Error('Network response was not ok');
                     }
                     data.value = await response.json();
+                    //data.value = {"HRPhV_H14_phsC":"0.0000","HRPhV_H14_phsB":"0.0000","HRPhV_H17_phsC":"0.0100","HRPhV_H14_phsA":"0.0000","HRPhV_H25_phsB":"0.0080","HRPhV_H25_phsC":"0.0080","HRPhV_H17_phsB":"0.0100","HRPhV_H17_phsA":"0.0100","HRPhV_H25_phsA":"0.0080","HRPhV_H22_phsC":"0.0000","HRPhV_H22_phsB":"0.0000","HRPhV_H22_phsA":"0.0000","DataTag":"0","HRPhV_H20_phsA":"0.0000","HRPhV_H23_phsB":"0.0080","HRPhV_H20_phsB":"0.0000","HRPhV_H23_phsC":"0.0080","PltPhV_phsA":"3.3091","HRPhV_H20_phsC":"0.0000","HRPhV_H15_phsA":"0.0120","HRPhV_H18_phsB":"0.0000","HRPhV_H15_phsB":"0.0120","HRPhV_H18_phsC":"0.0000","HRPhV_H15_phsC":"0.0120","HRPhV_H18_phsA":"0.0000","HRPhV_H23_phsA":"0.0080","HRPhV_H21_phsC":"0.0080","HRPhV_H21_phsB":"0.0080","HRPhV_H24_phsC":"0.0000","HRPhV_H21_phsA":"0.0080","HRPhV_H24_phsB":"0.0000","PltPhV_phsC":"3.2948","HRPhV_H24_phsA":"0.0000","PltPhV_phsB":"3.2992","HRPhV_H19_phsC":"0.0100","HRPhV_H19_phsB":"0.0100","HRPhV_H19_phsA":"0.0100","HRPhV_H16_phsA":"0.0000","HRPhV_H16_phsC":"0.0000","PstPhV_phsC":"3.2942","HRPhV_H16_phsB":"0.0000","PstPhV_phsA":"3.3086","PstPhV_phsB":"3.2987","HRPhV_H13_phsC":"0.0140","time":"20240703T171400Z"}
 
                     console.log(111111111, data.value)
                 } catch (error) {
                     console.error('Fetch error:', error);
                 }
             };
-       setInterval(fetchData, 1000);
+            fetchData()
+
+            setInterval(fetchData, 10000);
 
             return {
                 fetchData,
-        data
+                data,
+                changeFlag,
+                toOther,
+                toOtherVal
             }
         }
     }).mount('#app');
@@ -227,7 +464,7 @@
     th, td {
         border: 1px solid #999;
         text-align: center;
-        padding: 10px 0;
+        padding: 6px 0;
     }
 
     table thead tr {
@@ -255,5 +492,58 @@
     #app {
         padding: 10px;
     }
+
+    .el-button {
+        float: right;
+        margin-right: 50px;
+        height: 40px;
+        width: 80px;
+        line-height: 40px;
+        border-radius: 5px;
+        box-shadow: 0 0 5px #ccc;
+    }
+
+
+    .div {
+
+        width: 200px;
+        height: 40px;
+        border-radius: 5px;
+        margin: 0 10px 10px;
+        box-shadow: 0 0 5px #ccc;
+        position: relative;
+    }
+
+    select {
+
+        border: none;
+
+        outline: none;
+
+
+        height: 40px;
+        line-height: 40px;
+
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+
+        padding-left: 10px;
+    }
+
+    .div:after {
+        content: "";
+        width: 14px;
+        height: 8px;
+        background: url(aaa.png) no-repeat center;
+
+        position: absolute;
+        right: 20px;
+        top: 45%;
+
+        pointer-events: none;
+    }
+
+
 </style>
 </html>