PLC连接状态修改

src/views/plcConnectionStatus/index.vue

@@ -14,35 +14,52 @@
 					<div class="table-row" v-for="(line, index) in allLines" :key="index">
 						<div class="cell">{{ line.plcName }}</div>
 						<div class="cell">{{ line.ip }}</div>
-						<div class="cell">{{ line.connectSuccess }}</div>
-						<div class="cell">{{ line.connectMessage }}</div>
-						<!-- <div class="cell">
-							<span class="rate-tag" :class="getRateClass(line.rate)">{{ line.rate.toFixed(2) }}%</span>
-						</div> -->
+						<div class="cell">
+							<span :class="line.connectSuccess ? 'status-success' : 'status-error'">
+								{{ line.connectSuccess ? '已连接' : '未连接' }}
+							</span>
+						</div>
+						<div class="cell">{{ line.connectMessage || '-' }}</div>
 					</div>
 				</vue3-seamless-scroll>
 			</div>
-			<div v-else class="empty-tip">暂无有派工的产线数据</div>
+			<div v-else-if="!dataLoaded" class="empty-tip">正在加载数据...</div>
+			<div v-else class="empty-tip">暂无PLC连接数据</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { getPLCStatus } from "@/api/plcConnectionStatus/index"
 
 const dataLoaded = ref(false)
 const allLines = ref([])
-const getList = () => {
-	getPLCStatus().then((res) => {
-		if (res.code == 200) {
-			allLines.value = res.data
-		}
-	});
-}
-getList()
 
+const getList = async () => {
+	try {
+		const res = await getPLCStatus()
+		if (res.code === 200) {
+			console.log(res.data, 'PLC连接状态')
+			allLines.value = res.data
+			dataLoaded.value = true
+		} else {
+			console.error('获取数据失败:', res.msg)
+			dataLoaded.value = true 
+		}
+	} catch (error) {
+		console.error('请求错误:', error)
+		dataLoaded.value = true 
+	}
+}
+
+onMounted(() => {
+	getList()
+	setInterval(() => {
+		getList()
+	}, 5000)
+})
 </script>
 
 <style scoped>
@@ -116,7 +133,7 @@ h2 {
 /* 单元格通用样式 - 核心修改：平均分布+居中对齐 */
 .cell {
 	flex: 1;
-	/* 平均分配宽度，4列各占25% */
+	/* 平均分配宽度，6列各占约16.67% */
 	padding: 12px;
 	text-align: center;
 	/* 文字居中对齐 */
@@ -131,6 +148,25 @@ h2 {
 	/* 垂直居中 */
 }
 
+/* 状态标签样式 */
+.status-success {
+	color: #059669;
+	background-color: #d1fae5;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.status-error {
+	color: #991b1b;
+	background-color: #fee2e2;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	font-weight: 600;
+}
+
 /* 移除之前的列宽固定，改为纯平均分布 */
 
 /* 滚动区域 */