<!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="vue2.0.js" ></script>-->
</head>
<body>
<div id="app">

    <div>

        <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>
            <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}}</div>



        <table v-if="!changeFlag">
            <thead>
            <tr>
                <th>谐波次数</th>
                <th>A/AB</th>
                <th>B/BC</th>
                <th>C/CA</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>基波 (%)</td>
                <td>100.000</td>
                <td>100.000</td>
                <td>100.000</td>
            </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>
            </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>
            </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>


        <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>

</div>


<script type="module">
    // 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 devId = ref('NJCN230497')
          /*  const devIdChange = (val) => {
                data.value = null;

            };*/



           /* 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();
                    //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);
                }
            };
            fetchData()*/


            /**
             * 配置 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,
                data,
                changeFlag,
                toOther,
                toOtherVal,
                devId,
                //devIdChange
            }
        }
    }).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: 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;
    }

    #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>
<!--
<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>-->
