From f14a5a16f225386c6db72a84352854fa5d4bc141 Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期五, 21 三月 2025 17:13:00 +0800
Subject: [PATCH] 修改看板大屏页面
---
UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue | 78 ++++++++++++++++----------------------
1 files changed, 33 insertions(+), 45 deletions(-)
diff --git a/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue b/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
index 02524a4..515e2d8 100644
--- a/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
+++ b/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
@@ -1,45 +1,25 @@
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
-import axios from 'axios';
+import request from '@/utils/request';
const devices = ref([]);
-const ws = ref(null);
const activeTab = ref('line1');
-const initWebSocket = () => {
- const wsUrl = `ws://${window.location.host}/api/talk/mechanicalMonitor`;
- ws.value = new WebSocket(wsUrl);
-
- ws.value.onmessage = (event) => {
- const data = JSON.parse(event.data);
- if (data.type === 'status_change') {
- updateDeviceStatus(data.data);
+const getMechanicalStatus = () => {
+ return request({
+ url: '/deviceInteraction/mechanicalMonitor/getMechanicalStatus',
+ method: 'post',
+ headers: {
+ 'Content-Type': 'application/json'
}
- };
-
- ws.value.onclose = () => {
- console.log('WebSocket杩炴帴鍏抽棴');
- setTimeout(initWebSocket, 5000);
- };
-};
-
-const updateDeviceStatus = (newStatus) => {
- const device = devices.value.find(d => d.deviceId === newStatus.deviceId);
- if (device) {
- Object.assign(device, {
- ...newStatus,
- showAlarmInfo: device.showAlarmInfo,
- alarmTime: newStatus.alarmTime ? new Date(newStatus.alarmTime).toLocaleString() : null,
- disconnectTime: newStatus.disconnectTime ? new Date(newStatus.disconnectTime).toLocaleString() : null
- });
- }
+ });
};
const fetchDeviceStatus = async () => {
try {
- const response = await axios.post('/api/deviceInteraction/mechanicalMonitor/getMechanicalStatus');
- if (response.data.code === 200) {
- const statusData = response.data.data.mechanicalStatus;
+ const response = await getMechanicalStatus();
+ if (response.code === 200) {
+ const statusData = response.data.mechanicalStatus;
devices.value = statusData.map(device => ({
...device,
showAlarmInfo: false,
@@ -48,7 +28,7 @@
}));
}
} catch (error) {
- console.error('鑾峰彇璁惧鐘舵�佸け璐�:', error);
+ console.error('鑾峰彇璁惧鐘舵�佸け璐�:', error.message || error);
}
};
@@ -84,21 +64,17 @@
onMounted(() => {
fetchDeviceStatus();
- initWebSocket();
-});
-
-onUnmounted(() => {
- if (ws.value) {
- ws.value.close();
- }
+ const timer = setInterval(fetchDeviceStatus, 30000);
+
+ onUnmounted(() => {
+ clearInterval(timer);
+ });
});
</script>
<template>
<div class="monitoring-container">
<h1>涔濈墽璁惧杩炴帴鍙婃晠闅滄姤璀︾洃鎺�</h1>
-
- <!-- 娣诲姞鏍囩鍒囨崲缁勪欢 -->
<div class="tab-container">
<div
class="tab-item"
@@ -115,12 +91,23 @@
浜岀嚎
</div>
</div>
+
+ <!-- 娣诲姞璋冭瘯淇℃伅 -->
+ <div v-if="devices.length === 0">鏆傛棤璁惧鏁版嵁</div>
+ <div v-else>
+ <p>鎬昏澶囨暟閲�: {{ devices.length }}</p>
+ <p>涓�绾胯澶囨暟閲�: {{ groupedDevices.line1.length }}</p>
+ <p>浜岀嚎璁惧鏁伴噺: {{ groupedDevices.line2.length }}</p>
+ </div>
- <!-- 淇敼鐢熶骇绾挎樉绀洪�昏緫 -->
+ <!-- 涓�绾胯澶� -->
<div v-show="activeTab === 'line1'" class="line-section">
<h2 class="line-title">涓�绾�</h2>
<div class="device-grid">
- <div v-for="device in groupedDevices.line1" :key="device.id" class="device-panel" @click="toggleAlarmInfo(device)">
+ <div v-for="device in groupedDevices.line1"
+ :key="device.deviceId"
+ class="device-panel"
+ @click="toggleAlarmInfo(device)">
<div class="device-image">
<img :src="deviceIcon(device)" alt="璁惧鍥炬爣">
<p v-if="device.status === 1" class="status-text normal-status">姝ｅ父</p>
@@ -148,6 +135,7 @@
</div>
</div>
+ <!-- 浜岀嚎璁惧 -->
<div v-show="activeTab === 'line2'" class="line-section">
<h2 class="line-title">浜岀嚎</h2>
<div class="device-grid">
@@ -186,7 +174,7 @@
.monitoring-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
- max-width: 1200px;
+ max-width: 1600px;
margin: 0 auto;
margin-bottom: 60px;
}
@@ -212,7 +200,7 @@
.device-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
--
Gitblit v1.8.0