1. 通过get/post获取设备列表信息
2. websocket连接mqtt服务器，接收json报文信息
3. 通过Alpine进行数据联动
4. 封装svg对象，更新属性值
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组态数据联动</title>
</head>
<body x-data="mqttApp()" x-init="initDevices()">
<ul>
<li><span>Web组态数据联动</span></li>
<li><span>1. 通过get/post获取设备列表信息</span></li>
<li><span>2. websocket连接mqtt服务器，接收json报文信息</span></li>
<li><span>3. 通过Alpine进行数据联动</span></li>
<li><span>4. 封装svg对象，更新属性值</span></li>
<li><span>MQTT测试指令</span></li>
<li><span>{ "id": "ZP710", "value": "running" } </span></li>
<li><span>{ "id": "ZP711", "value": "warning" } </span></li>
<li><span>{ "id": "ZP712", "value": "error" } </span></li>
</ul>
<button @click="fetchGet">Http Get测试</button>
<button @click="fetchPost">Http Post测试</button>
<br/>
<svg-component id="workshop1" svg-url="svg/workshop1.svg"></svg-component>
<br/>
<!-- 设备列表 -->
<ul>
<template x-for="device in devices" :key="device.id">
<li>ID: <span x-text="device.id"></span>, 名称: <span x-text="device.name"></span>, 状态: <span x-text="device.status"></span></li>
</template>
</ul>
<script src="./js/jquery.min.js"></script>
<script src="./js/alpine.min.js" defer></script>
<script src="./js/mqtt.min.js"></script>
<script src="./js/svg-component.js"></script>
<script>
function mqttApp() {
return {
ZP710: { value: '无数据' },
devices: [], // 设备列表数据模型
mqttClient: null,
workshop1: null,
async fetchGet() {
fetch('http://localhost:8081/api/version/info', {
method: 'GET', // 默认就是 GET，其实可以省略这一行
headers: {
'Authorization': 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiIyIiwiVXNlckFjY291bnQiOiJhZG1pbiIsIm5iZiI6MTcyOTA0MTY0NiwiZXhwIjoxNzI5MTI4MDQ2LCJpc3MiOiJsSkVsdFJ1ayIsImF1ZCI6ImxKRWx0UnVrIn0.q7GfL15a0N6YEEQ6aNfPr4O5YnyZ2wMzs3UVT8CjqoA'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json(); // 或者 response.text()、response.blob() 等，取决于你期望的响应类型
})
.then(data => {
alert(JSON.stringify(data)); // 处理响应数据
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
},
async fetchPost() {
// 创建一个 FormData 对象
const formData = new FormData();
formData.append('account', 'admin');
formData.append('password', 'admin');
// const jsonData = JSON.stringify({
// account: 'admin',
// password: 'admin'
// });
fetch('http://localhost:8081/api/user/login', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiIyIiwiVXNlckFjY291bnQiOiJhZG1pbiIsIm5iZiI6MTcyOTA0MTY0NiwiZXhwIjoxNzI5MTI4MDQ2LCJpc3MiOiJsSkVsdFJ1ayIsImF1ZCI6ImxKRWx0UnVrIn0.q7GfL15a0N6YEEQ6aNfPr4O5YnyZ2wMzs3UVT8CjqoA'
},
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json(); // 处理响应
})
.then(data => {
alert(JSON.stringify(data));
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
},
initDevices() {
// 使用模拟数据初始化设备列表
this.devices = [
{ id: 'ZP710', name: '设备1', status: '' },
{ id: 'ZP711', name: '设备2', status: '' },
{ id: 'ZP712', name: '设备3', status: '' }
];
// 初始化 MQTT 客户端（保持原样）
const url = 'ws://127.0.0.1:5001/mqtt';
const clientId = 'mqweb_' + Math.random().toString(16).substr(2, 8); // 生成唯一客户端 ID
const options = {
clientId: clientId,
username: 'admin',
password: '123456',
clean: true, // 设置为 true 以便在断开时清除会话
keepalive: 60, // 将 KeepAlive 设置为 60秒
reconnectPeriod: 1000, // 如果连接丢失，1秒后重连
connackWaitTimeout: 60 * 1000 ,// 连接确认等待超时，设置为 60秒
};
this.mqttClient = mqtt.connect(url, options);
this.mqttClient.on('connect', () => {
console.log('MQTT 连接成功');
this.mqttClient.subscribe('iot/data');
});
this.mqttClient.on('error', (err) => {
console.error('连接错误:', err);
});
this.mqttClient.on('close', () => {
console.log('连接关闭');
});
this.mqttClient.on('disconnect', (packet) => {
console.log('断开连接:', packet);
});
this.mqttClient.on('message', (topic, message) => {
const data = JSON.parse(message.toString());
if (data.id && data.value) {
// 更新文本信息
let device = this.devices.find(d => d.id === data.id);
if (device) {
device.status = data.value;
}
// 更新svg动画
var color;
switch (data.value) {
case 'running': color = 'green'; break;
case 'warning': color = 'yellow'; break;
case 'error': color = 'red'; break;
default: color = 'gray'; break;
}
this.workshop1.setAttribute(data.id, 'fill', color);
}
});
this.workshop1 = document.getElementById('workshop1');
},
};
}
</script>
</body>
</html>
