pig/pig-farm-controller
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

前端设备列表展示设备状态

Browse Source
This commit is contained in:
huang
2025-09-09 00:03:23 +08:00
parent 75f9e07fcc
commit 8b22514aad
4 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/dist/assets/index.a5284bc3.js → frontend/dist/assets/index.2015effd.js vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/assets/index.af933240.css → frontend/dist/assets/index.7f062720.css vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猪场管理系统</title> <title>猪场管理系统</title>
<script type="module" crossorigin src="/assets/index.a5284bc3.js"></script> <script type="module" crossorigin src="/assets/index.2015effd.js"></script>
<link rel="stylesheet" href="/assets/index.af933240.css"> <link rel="stylesheet" href="/assets/index.7f062720.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

25
frontend/src/pages/Device.vue
View File

@@ -30,6 +30,7 @@
<span class="node-title">{{ relay.name }}</span> <span class="node-title">{{ relay.name }}</span>
<span class="node-type relay-type">{{ getDeviceTypeText(relay.type) }}</span> <span class="node-type relay-type">{{ getDeviceTypeText(relay.type) }}</span>
<span v-if="relay.address" class="node-address">[{{ relay.address }}]</span> <span v-if="relay.address" class="node-address">[{{ relay.address }}]</span>
<span class="node-status" :class="{ 'status-active': relay.active, 'status-inactive': !relay.active }">{{ relay.active ? '在线' : '离线' }}</span>
</div> </div>
<div class="node-actions"> <div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(relay)">编辑</button> <button class="action-btn edit-btn" @click.stop="editDevice(relay)">编辑</button>
@@ -50,6 +51,7 @@
<span class="node-title">{{ controller.name }}</span> <span class="node-title">{{ controller.name }}</span>
<span class="node-type controller-type">{{ getDeviceTypeText(controller.type) }}</span> <span class="node-type controller-type">{{ getDeviceTypeText(controller.type) }}</span>
<span v-if="controller.address" class="node-address">[{{ controller.address }}]</span> <span v-if="controller.address" class="node-address">[{{ controller.address }}]</span>
<span class="node-status" :class="{ 'status-active': controller.active, 'status-inactive': !controller.active }">{{ controller.active ? '在线' : '离线' }}</span>
</div> </div>
<div class="node-actions"> <div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(controller)">编辑</button> <button class="action-btn edit-btn" @click.stop="editDevice(controller)">编辑</button>
@@ -69,6 +71,7 @@
<span class="node-title">{{ leaf.name }}</span> <span class="node-title">{{ leaf.name }}</span>
<span class="node-type device-type">{{ getDeviceTypeText(leaf.type) }}</span> <span class="node-type device-type">{{ getDeviceTypeText(leaf.type) }}</span>
<span v-if="leaf.address" class="node-address">[{{ leaf.address }}]</span> <span v-if="leaf.address" class="node-address">[{{ leaf.address }}]</span>
<span class="node-status" :class="{ 'status-active': leaf.active, 'status-inactive': !leaf.active }">{{ leaf.active ? '在线' : '离线' }}</span>
</div> </div>
<div class="node-actions"> <div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(leaf)">编辑</button> <button class="action-btn edit-btn" @click.stop="editDevice(leaf)">编辑</button>
@@ -225,6 +228,11 @@ export default {
'fan': '风机', 'fan': '风机',
'water_curtain': '水帘' 'water_curtain': '水帘'
} }
const statusMap = {
'online': '在线',
'offline': '离线',
'error': '故障'
}
return typeMap[type] || type return typeMap[type] || type
}, },
@@ -621,6 +629,23 @@ export default {
text-transform: uppercase; text-transform: uppercase;
} }
.node-status {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
border-radius: 12px;
font-weight: 500;
}
.status-active {
background: #4caf50;
color: white;
}
.status-inactive {
background: #9e9e9e;
color: white;
}
.relay-type { .relay-type {
background: #ff9800; background: #ff9800;
color: white; color: white;