Other/hb_roma
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改

Browse Source
This commit is contained in:
chendaofei
2024-08-09 09:05:41 +08:00
parent 41f8c873a4
commit 7449efc6a3
12 changed files with 1170 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/main/resources/static/index.html
View File

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