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); // 生成唯一客户端 IDconst 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>
