更改

pom.xml

@@ -144,6 +144,12 @@
         </dependency>
 
 
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+        </dependency>
+
+
     </dependencies>
 
     <build>

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

@@ -9,6 +9,7 @@ import com.huawei.it.eip.ump.client.listener.MessageListener;
 import com.huawei.it.eip.ump.common.exception.UmpException;
 import com.huawei.it.eip.ump.common.message.Message;
 import com.njcn.roma.pojo.MessageBodyDTO;
+import com.njcn.roma.server.WebSocketServer;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Component;
 import org.springframework.web.bind.annotation.*;
@@ -28,6 +29,8 @@ import java.util.Map;
 @RequiredArgsConstructor
 public class ClientHandler extends Thread {
 
+    private final WebSocketServer webSocketServer;
+
 
 
     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\"}";
@@ -37,8 +40,8 @@ public class ClientHandler extends Thread {
     private Consumer consumer;
 
     @GetMapping("message")
-    private Map<String,String> message() {
+    private JSONObject message() {
-        Map<String,String> map = JSONObject.parseObject(topicMsg, Map.class);
+        JSONObject map = JSONObject.parseObject(topicMsg);
         map.put("customDevId",devId);
         return map;
     }
@@ -62,9 +65,11 @@ public class ClientHandler extends Thread {
                     try {
                         System.out.println("收到新的一轮数据：******************");
                         topicMsg = new String(message.getBody(), "UTF-8");
-                        System.out.println("装置信息：========="+message.getProperties());
+                        devId = message.getProperties().get("deviceIdentifier");
-                        devId = message.getProperties().get("deviceId")+"#"+message.getProperties().get("deviceIdentifier");
                         System.out.println("Receive>>>>>>>>>>>>: " + topicMsg);
+                        JSONObject jsonObject = JSONObject.parseObject(topicMsg);
+                        jsonObject.put("customDevId",devId);
+                        webSocketServer.sendSocketMessageToAll(jsonObject.toJSONString());
                     } catch (Exception e) {
                         System.out.println("帮忙拍个照这个是接收消息的报错------------------------------------------------------------");
                         e.printStackTrace();

src/main/java/com/njcn/roma/config/WebSocketConfig.java

@@ -0,0 +1,17 @@
+package com.njcn.roma.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.socket.server.standard.ServerEndpointExporter;
+
+@Configuration
+public class WebSocketConfig {
+
+    /**
+     * 用于扫描和注册所有携带ServerEndPoint注解的实例。
+     */
+    @Bean
+    public ServerEndpointExporter serverEndpointExporter() {
+        return new ServerEndpointExporter();
+    }
+}

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

@@ -1,15 +1,19 @@
 package com.njcn.roma.controller;
 
+import com.alibaba.fastjson.JSONObject;
 import com.huawei.it.eip.ump.client.producer.Producer;
 import com.huawei.it.eip.ump.client.producer.SendResult;
 import com.huawei.it.eip.ump.common.exception.UmpException;
 import com.huawei.it.eip.ump.common.message.Message;
 import com.njcn.roma.client.ClientHandler;
+import com.njcn.roma.server.WebSocketServer;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.io.UnsupportedEncodingException;
+import java.util.Map;
+import java.util.Random;
 
 /**
  * roma
@@ -23,6 +27,8 @@ public class TestController {
 
     private final ClientHandler clientHandler;
 
+    private final WebSocketServer webSocketServer;
+
 
 
     @GetMapping("send")
@@ -94,4 +100,72 @@ public class TestController {
        return clientHandler.topicMsg +" >>>>>>> "+ clientHandler.devId;
     }
 
+
+    @GetMapping("simulationWebSocket")
+    public String simulationWebSocket() {
+        clientHandler.devId = "NJCN230497";
+        // 浮动范围（比如，我们希望数值在原始值的基础上最多变化10%）
+        double fluctuationRange = 0.10;
+
+        // 创建Random实例
+        Random random = new Random();
+
+
+
+        for(int i=0;i<300;i++){
+            JSONObject map = JSONObject.parseObject(clientHandler.topicMsg);
+            map.put("customDevId",clientHandler.devId);
+            double vA = Double.valueOf(map.get("PhV_phsA").toString());
+            double vB = Double.valueOf(map.get("PhV_phsB").toString());
+            double vC = Double.valueOf(map.get("PhV_phsC").toString());
+            // 生成浮动值
+            // 注意：因为我们要的是百分比，所以我们将fluctuationRange乘以originalValue得到最大浮动的绝对值
+            double fluctuationA = (random.nextDouble() * 2 - 1) * (fluctuationRange * vA);
+            // 计算新的数值
+            double newValueA = vA + fluctuationA;
+
+            double fluctuationB = (random.nextDouble() * 2 - 1) * (fluctuationRange * vB);
+            // 计算新的数值
+            double newValueB = vA + fluctuationB;
+            double fluctuationC = (random.nextDouble() * 2 - 1) * (fluctuationRange * vC);
+            // 计算新的数值
+            double newValueC = vC + fluctuationC;
+            map.put("PhV_phsA",String.valueOf(newValueA));
+            map.put("PhV_phsB",String.valueOf(newValueB));
+            map.put("PhV_phsC",String.valueOf(newValueC));
+
+
+
+            double iA = Double.valueOf(map.get("A_phsA").toString());
+            double iB = Double.valueOf(map.get("A_phsB").toString());
+            double iC = Double.valueOf(map.get("A_phsC").toString());
+            // 生成浮动值
+            // 注意：因为我们要的是百分比，所以我们将fluctuationRange乘以originalValue得到最大浮动的绝对值
+            double fluctuationIA = (random.nextDouble() * 2 - 1) * (fluctuationRange * vA);
+            // 计算新的数值
+            double newValueIA = iA + fluctuationIA;
+
+            double fluctuationIB = (random.nextDouble() * 2 - 1) * (fluctuationRange * iB);
+            // 计算新的数值
+            double newValueIB = iA + fluctuationIB;
+            double fluctuationIC = (random.nextDouble() * 2 - 1) * (fluctuationRange * iC);
+            // 计算新的数值
+            double newValueIC = iC + fluctuationIC;
+            map.put("A_phsA",String.valueOf(newValueIA));
+            map.put("A_phsB",String.valueOf(newValueIB));
+            map.put("A_phsC",String.valueOf(newValueIC));
+
+
+            webSocketServer.sendSocketMessageToAll(map.toJSONString());
+
+            try {
+                Thread.sleep(1000);
+            } catch (InterruptedException e) {
+                throw new RuntimeException(e);
+            }
+        }
+
+        return "推送成功";
+    }
+
 }

src/main/java/com/njcn/roma/pojo/websocket/SocketMessage.java

@@ -0,0 +1,13 @@
+package com.njcn.roma.pojo.websocket;
+
+import lombok.Data;
+
+@Data
+public class SocketMessage {
+
+    private Integer type;
+
+    private Object body;
+
+
+}

src/main/java/com/njcn/roma/server/WebSocketServer.java

@@ -0,0 +1,67 @@
+package com.njcn.roma.server;
+
+
+import org.springframework.stereotype.Component;
+
+import javax.websocket.*;
+import javax.websocket.server.ServerEndpoint;
+import java.io.IOException;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+
+@Component
+@ServerEndpoint("/socket")
+public class WebSocketServer {
+
+    /**
+     * 全部在线会话  PS: 基于场景考虑 这里使用线程安全的Map存储会话对象。
+     */
+    private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();
+    /**
+     * 当客户端打开连接：1.添加会话对象 2.更新在线人数
+     */
+    @OnOpen
+    public void onOpen(Session session) {
+        onlineSessions.put(session.getId(), session);
+        System.out.println("websocket客户端"+session.getId()+"连接");
+    }
+
+    /**
+     * 当客户端发送消息：1.获取它的用户名和消息 2.发送消息给所有人
+     * <p>
+     * PS: 这里约定传递的消息为JSON字符串 方便传递更多参数！
+     */
+    @OnMessage
+    public void onSocketMessage(Session session, String jsonStr) {
+    }
+
+    /**
+     * 当关闭连接：1.移除会话对象 2.更新在线人数
+     */
+    @OnClose
+    public void onClose(Session session) {
+        onlineSessions.remove(session.getId());
+        System.out.println("websocket客户端"+session.getId()+"断开连接");
+    }
+
+    /**
+     * 当通信发生异常：打印错误日志
+     */
+    @OnError
+    public void onError(Session session, Throwable error) {
+        error.printStackTrace();
+    }
+
+    /**
+     * 公共方法：发送信息给所有人
+     */
+    public void sendSocketMessageToAll(String msg) {
+        onlineSessions.forEach((id, session) -> {
+            try {
+                session.getBasicRemote().sendText(msg);
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        });
+    }
+}

src/main/resources/static/harmnicPinPu.html

@@ -0,0 +1,105 @@
+<!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>
+    <script src="./echarts.min.js"></script>
+</head>
+<body>
+<template>
+    <div ref="chart" style="width: 600px; height: 400px;"></div>
+</template>
+<script type="module">
+    import * as echarts from './echarts.min.js';
+    const {createApp,onMounted, ref } = Vue
+    export default {
+        setup() {
+            const chart = ref(null);
+
+
+            onMounted(() => {
+                const myChart = echarts.init(chart.value);
+                const option = {
+                    title: {
+                        text: '简单 ECharts 示例'
+                    },
+                    tooltip: {},
+                    legend: {
+                        data: ['销量']
+                    },
+                    xAxis: {
+                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+                    },
+                    yAxis: {},
+                    series: [
+                        {
+                            name: '销量',
+                            type: 'bar',
+                            data: [5, 20, 36, 10, 10, 20]
+                        }
+                    ]
+                };
+                myChart.setOption(option);
+            });
+
+            return { chart };
+        }
+    };
+
+
+
+
+
+
+
+
+
+
+</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: 6px 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;
+    }
+</style>
+</html>

src/main/resources/static/index.html

@@ -6,7 +6,7 @@
     <title>谐波次 (%)数表格</title>
     <link rel="stylesheet" href="./element.css"/>
     <script src="./vue.js"></script>
-    <script src="./aaa.js" ></script>
+   <!-- <script src="vue2.0.js" ></script>-->
 </head>
 <body>
 <div id="app">
@@ -25,12 +25,25 @@
                     <option :value="1">谐波 电压 含有率(%)</option>
                 </select>
             </div>
+            <div class="div">
+                <label>装置标识:</label>
+                <select v-model="devId" >
+                    <option value="NJCN230497">NJCN230497</option>
+                    <option value="NJCN230447">NJCN230447</option>
+                    <option value="3206010121">3206010121</option>
+                </select>
+            </div>
 
             <button class="el-button" @click="fetchData">读取</button>
 
+            <button class="el-button" ><a href="harmnic.html">跳转趋势图</a></button>
+
         </div>
         <div style="float: left">装置标识:{{data.customDevId}}</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>
@@ -390,15 +403,7 @@
 
 </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'
     const {createApp , ref } = Vue
@@ -411,6 +416,7 @@
 
             const toOtherVal = ref(0)
 
+
             const toOther = (val) => {
                 console.log(val);
                 if (toOtherVal.value == 1) {
@@ -420,8 +426,15 @@
                 }
             };
 
+            const devId = ref('NJCN230497')
+          /*  const devIdChange = (val) => {
+                data.value = null;
 
-            const fetchData = async () => {
+            };*/
+
+
+
+           /* const fetchData = async () => {
                 try {
                     const response = await fetch('/message');
                     if (!response.ok) {
@@ -435,16 +448,59 @@
                     console.error('Fetch error:', error);
                 }
             };
-            fetchData()
+            fetchData()*/
 
-            setInterval(fetchData, 10000);
+
+            /**
+             * 配置 WebSocket
+             * WebSocket客户端 PS：URL开头表示WebSocket协议 中间是域名端口 结尾是服务端映射地址
+             */
+            var webSocket = new WebSocket('ws://localhost:8790/socket');
+            /**
+             * 当服务端打开连接
+             */
+            webSocket.onopen = function (event) {
+                console.log('WebSocket打开连接');
+            };
+            /**
+             * 当服务端发来消息：1.广播消息 2.更新在线人数
+             */
+            webSocket.onmessage = function (event) {
+                console.log('WebSocket收到消息：%c' + event.data, 'color:green');
+                //获取服务端消息
+                var message = JSON.parse(event.data) || {};
+
+                if(devId.value != message.customDevId){
+                    return false;
+                }
+                data.value = message;
+            }
+
+            /**
+             * 关闭连接
+             */
+            webSocket.onclose = function (event) {
+                console.log('WebSocket关闭连接');
+            };
+
+            /**
+             * 通信失败
+             */
+            webSocket.onerror = function (event) {
+                console.log('WebSocket发生异常');
+
+            };
+
+            //setInterval(fetchData, 10000);
 
             return {
-                fetchData,
+                //fetchData,
                 data,
                 changeFlag,
                 toOther,
-                toOtherVal
+                toOtherVal,
+                devId,
+                //devIdChange
             }
         }
     }).mount('#app');
@@ -548,3 +604,62 @@
 
 </style>
 </html>
+<!--
+<div id="table">
+    <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">2次</th>
+            <th class="table-middle">3次</th>
+            <th class="table-middle">4次</th>
+            <th class="table-middle">5次</th>
+
+            <th class="table-middle">6次</th>
+            <th class="table-middle">7次</th>
+            <th class="table-middle">8次</th>
+            <th class="table-middle">9次</th>
+
+            <th class="table-middle">10次</th>
+            <th class="table-middle">11次</th>
+            <th class="table-middle">12次</th>
+            <th class="table-middle">13次</th>
+
+            <th class="table-middle">14次</th>
+            <th class="table-middle">15次</th>
+            <th class="table-middle">16次</th>
+            <th class="table-middle">17次</th>
+
+            <th class="table-middle">18次</th>
+            <th class="table-middle">19次</th>
+            <th class="table-middle">20次</th>
+            <th class="table-middle">21次</th>
+
+            <th class="table-middle">22次</th>
+            <th class="table-middle">23次</th>
+            <th class="table-middle">24次</th>
+            <th class="table-middle">25次</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+            <td>{{((data.HRPhV_H2_phsA+data.HRPhV_H2_phsB+data.HRPhV_H2_phsC)/3).toFixed(3)}}</td>
+        </tr>
+
+        </tbody>
+    </table>
+
+</div>-->