|
|
食用方法：
1在数据接口->数据模板里添加HTML展示，将HTML代码粘贴，修改api地址、数据刷新时间、样式布局等
2数据接口->接口管理添加接口 接口类型为api服务 数据类型为HTML 选择刚刚添加的模板 填写你想要的展示地址
3后端构建 将代码保存为go文件 放于ism程序的sys_script文件夹下 修改你实际系统里的数据 和前端代码对应上就行
4访问2里添加的接口 即可显示数据 也可通过网址组件嵌入组态页面
前端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>三相电流实时数据</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 1px solid #333;
padding: 10px;
}
th {
background-color: #f0f0f0;
}
.update-time {
text-align: center;
margin-top: 10px;
color: #666;
}
</style>
</head>
<body>
<h2 style="text-align: center;">三相电流实时数据</h2>
<table id="currentTable">
<thead>
<tr>
<th>设备名称</th>
<th>A相电流 (A)</th>
<th>B相电流 (A)</th>
<th>C相电流 (A)</th>
<th>采集时间</th>
</tr>
</thead>
<tbody>
<!-- 动态数据填充区域 -->
</tbody>
</table>
<div class="update-time" id="updateTime"></div>
<script>
// 从后端API获取数据并更新表格
function fetchAndUpdateTable() {
fetch('http://192.168.1.1:8081/phase')
.then(response => {
if (!response.ok) {
throw new Error("API请求失败");
}
return response.json();
})
.then(data => {
const tbody = document.querySelector('#currentTable tbody');
tbody.innerHTML = ''; // 清空原有数据
// 遍历数据生成表格行
data.forEach(device => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${device.device_id}</td>
<td>${device.phase_a}</td>
<td>${device.phase_b}</td>
<td>${device.phase_c}</td>
<td>${device.time}</td>
`;
tbody.appendChild(tr);
});
// 更新最后刷新时间
document.getElementById('updateTime').innerText = `最后更新时间: ${new Date().toLocaleString()}`;
})
.catch(error => {
console.error("数据获取失败:", error);
});
}
// 页面加载后立即执行一次，之后每2秒执行一次
window.onload = function() {
fetchAndUpdateTable();
setInterval(fetchAndUpdateTable, 2000);
};
</script>
</body>
</html>
后端：
var time = import("time")
var fmt = import("fmt")
var http = import("net/http")
var json = import("encoding/json")
var io = import("io")
var ioutil = import("io/ioutil")
func openky(w, r){
origin = r.Header.Get("Origin")
w.Header().Set("Content-Type", "application/json")
w.Header().Set("Access-Control-Allow-Origin", origin)
w.Header().Set("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "content-type")
w.Header().Set("Access-Control-Expose-Headers", "Access-Control-Allow-Headers, Token")
w.Header().Set("Access-Control-Allow-Credentials", "true")
}
http.HandleFunc("/ApiDemo", func(w, r) {
openky(w, r);
ResponseData = []map[string]interface{}
ResponseData[0] = {"device_id":"设备1","phase_a":GetDeviceData("设备1->A相电流"),"phase_b":GetDeviceData("设备1->B相电流"),"phase_c":GetDeviceData("设备1->C相电流"),"time":"2025-12-30 08:32:40"}
ResponseData[1] = {"device_id":"设备2","phase_a":GetDeviceData("设备2->A相电流"),"phase_b":GetDeviceData("设备2->B相电流"),"phase_c":GetDeviceData("设备2->C相电流"),"time":"2025-12-30 08:32:40"}
responseJsonData,err = json.Marshal(ResponseData)
w.Write(toString(responseJsonData))
})
//监听的端口，可以根据需要更改
fmt.Println("API接口服务已经启动,提供了ApiDemo")
http.ListenAndServe(":18089", nil) |
|
发表于 2025-12-30 11:09:01