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

1. 设备model增加地址字段, 用于保存硬件地址

Browse Source 
2. 优化前端界面
This commit is contained in:
huang
2025-09-08 20:28:26 +08:00
parent 9d36ae6b00
commit bbda4f4fca
18 changed files with 16039 additions and 1115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,8 +13,74 @@
<button class="btn btn-primary" @click="openAddDeviceModal">添加设备</button>
</div>
<div class="device-tree" id="deviceTree">
<!-- 设备树将通过JavaScript动态生成 -->
<div class="device-tree">
<div v-if="devices.length === 0" class="no-devices">
暂无设备数据
</div>
<div v-else>
<!-- 中继设备 -->
<div
v-for="relay in relayDevices"
:key="relay.id"
class="tree-node relay-node"
>
<div class="node-header" @click="toggleNode(relay.id)">
<div class="node-info">
<span class="toggle-icon">{{ expandedNodes.has(relay.id) ? '▼' : '►' }}</span>
<span class="node-title">{{ relay.name }}</span>
<span class="node-type relay-type">{{ getDeviceTypeText(relay.type) }}</span>
<span v-if="relay.address" class="node-address">[{{ relay.address }}]</span>
</div>
<div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(relay)">编辑</button>
<button class="action-btn delete-btn" @click.stop="deleteDevice(relay.id)">删除</button>
</div>
</div>
<!-- 控制器设备 -->
<div v-show="expandedNodes.has(relay.id)" class="children-container">
<div
v-for="controller in getControllerDevices(relay.id)"
:key="controller.id"
class="tree-node controller-node"
>
<div class="node-header" @click="toggleNode(controller.id)">
<div class="node-info">
<span class="toggle-icon">{{ expandedNodes.has(controller.id) ? '▼' : '►' }}</span>
<span class="node-title">{{ controller.name }}</span>
<span class="node-type controller-type">{{ getDeviceTypeText(controller.type) }}</span>
<span v-if="controller.address" class="node-address">[{{ controller.address }}]</span>
</div>
<div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(controller)">编辑</button>
<button class="action-btn delete-btn" @click.stop="deleteDevice(controller.id)">删除</button>
</div>
</div>
<!-- 叶子设备 -->
<div v-show="expandedNodes.has(controller.id)" class="children-container">
<div
v-for="leaf in getLeafDevices(controller.id)"
:key="leaf.id"
class="tree-node device-node"
>
<div class="node-header">
<div class="node-info">
<span class="node-title">{{ leaf.name }}</span>
<span class="node-type device-type">{{ getDeviceTypeText(leaf.type) }}</span>
<span v-if="leaf.address" class="node-address">[{{ leaf.address }}]</span>
</div>
<div class="node-actions">
<button class="action-btn edit-btn" @click.stop="editDevice(leaf)">编辑</button>
<button class="action-btn delete-btn" @click.stop="deleteDevice(leaf.id)">删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
@@ -43,6 +109,23 @@
<option value="water_curtain">水帘</option>
</select>
</div>
<!-- 485总线设备地址字段 -->
<div class="form-group" v-if="(deviceForm.type === 'fan' || deviceForm.type === 'water_curtain') && deviceForm.type !== ''">
<label for="busNumber">485总线号</label>
<input type="number" id="busNumber" v-model.number="deviceForm.bus_number" placeholder="请输入485总线号">
</div>
<div class="form-group" v-if="(deviceForm.type === 'fan' || deviceForm.type === 'water_curtain') && deviceForm.type !== ''">
<label for="device485Address">485设备地址</label>
<input type="text" id="device485Address" v-model="deviceForm.device_address" placeholder="请输入485设备地址">
</div>
<!-- 非485总线设备地址字段 -->
<div class="form-group" v-if="deviceForm.type !== 'relay' && deviceForm.type !== '' && deviceForm.type !== 'fan' && deviceForm.type !== 'water_curtain'">
<label for="deviceAddress">设备地址</label>
<input type="text" id="deviceAddress" v-model="deviceForm.address" placeholder="请输入设备地址">
</div>
<div class="form-group" v-if="deviceForm.type !== 'relay' && deviceForm.type !== ''">
<label for="parentId">上级设备</label>
<select id="parentId" v-model="deviceForm.parent_id">
@@ -80,8 +163,12 @@ export default {
id: null,
name: '',
type: '',
parent_id: null
}
parent_id: null,
address: null,
bus_number: null,
device_address: null
},
expandedNodes: new Set()
}
},
computed: {
@@ -104,6 +191,15 @@ export default {
this.$router.push('/')
},
// 切换节点展开/折叠状态
toggleNode(nodeId) {
if (this.expandedNodes.has(nodeId)) {
this.expandedNodes.delete(nodeId)
} else {
this.expandedNodes.add(nodeId)
}
},
// 获取控制器设备（区域主控）
getControllerDevices(parentId) {
return this.devices.filter(device =>
@@ -173,7 +269,10 @@ export default {
id: null,
name: '',
type: '',
parent_id: null
parent_id: null,
address: null,
bus_number: null,
device_address: null
}
this.showModal = true
},
@@ -182,8 +281,31 @@ export default {
editDevice(device) {
this.editingDevice = device
this.deviceForm = { ...device }
// 如果是485总线设备，尝试解析总线号和设备地址
if ((device.type === 'fan' || device.type === 'water_curtain') && device.address) {
const parts = device.address.split(':');
if (parts.length === 2) {
this.deviceForm.bus_number = parseInt(parts[0]);
this.deviceForm.device_address = parts[1];
} else {
this.deviceForm.device_address = device.address;
}
}
this.showModal = true
},
// 初始化设备表单数据
initializeDeviceForm() {
return {
id: null,
name: '',
type: '',
parent_id: null,
address: null
}
},
// 关闭模态框
closeDeviceModal() {
@@ -207,7 +329,10 @@ export default {
const deviceData = {
name: this.deviceForm.name,
type: this.deviceForm.type,
parent_id: this.deviceForm.parent_id
parent_id: this.deviceForm.parent_id,
address: this.deviceForm.address,
bus_number: this.deviceForm.bus_number,
device_address: this.deviceForm.device_address
}
if (this.editingDevice) {
@@ -280,6 +405,15 @@ export default {
if (this.deviceForm.type === 'relay') {
this.deviceForm.parent_id = null
}
},
// 切换节点展开/折叠
toggleNode(nodeId) {
if (this.expandedNodes.has(nodeId)) {
this.expandedNodes.delete(nodeId)
} else {
this.expandedNodes.add(nodeId)
}
}
}
}
@@ -290,20 +424,25 @@ export default {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f7fa;
}
.header {
background: #2c3e50;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header h1 {
margin: 0;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.user-info {
@@ -313,114 +452,160 @@ export default {
}
.logout-btn {
background: #e74c3c;
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.logout-btn:hover {
background: #c0392b;
background: rgba(255, 255, 255, 0.3);
}
.main-content {
flex: 1;
padding: 1rem;
padding: 1.5rem;
overflow-y: auto;
}
.toolbar {
margin-bottom: 1rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: flex-end;
}
.btn {
padding: 0.5rem 1rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: #3498db;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.btn-secondary {
background: #95a5a6;
color: white;
background: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}
.btn-secondary:hover {
background: #7f8c8d;
background: #e0e0e0;
}
.device-tree {
background: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 1rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
overflow: hidden;
}
.tree-node {
margin-bottom: 0.5rem;
padding: 0.5rem;
border-radius: 4px;
border-left: 3px solid #3498db;
margin-bottom: 0.75rem;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.tree-node:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tree-node.relay-node {
background: #ecf0f1;
border-left-color: #e74c3c;
background: #fff3e0;
border-left: 4px solid #ff9800;
}
.tree-node.controller-node {
background: #f8f9fa;
border-left-color: #f39c12;
margin-left: 1rem;
background: #e3f2fd;
border-left: 4px solid #2196f3;
margin-left: 1.5rem;
}
.tree-node.device-node {
background: #fff;
border-left-color: #2ecc71;
margin-left: 2rem;
background: #e8f5e9;
border-left: 4px solid #4caf50;
margin-left: 3rem;
}
.node-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
cursor: pointer;
}
.node-header:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.node-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.toggle-icon {
width: 20px;
text-align: center;
font-size: 0.8rem;
color: #666;
}
.node-title {
font-weight: bold;
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
.node-address {
font-size: 0.9rem;
color: #666;
background: rgba(0, 0, 0, 0.05);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.node-type {
font-size: 0.8rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
margin: 0 0.5rem;
padding: 0.3rem 0.6rem;
border-radius: 12px;
font-weight: 500;
text-transform: uppercase;
}
.relay-type {
background: #e74c3c;
background: #ff9800;
color: white;
}
.controller-type {
background: #f39c12;
background: #2196f3;
color: white;
}
.device-type {
background: #2ecc71;
background: #4caf50;
color: white;
}
@@ -430,29 +615,38 @@ export default {
}
.action-btn {
padding: 0.2rem 0.5rem;
padding: 0.4rem 0.8rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.edit-btn {
background: #3498db;
background: #1976d2;
color: white;
}
.edit-btn:hover {
background: #2980b9;
background: #1565c0;
transform: translateY(-1px);
}
.delete-btn {
background: #e74c3c;
background: #d32f2f;
color: white;
}
.delete-btn:hover {
background: #c0392b;
background: #c62828;
transform: translateY(-1px);
}
.children-container {
padding: 0.5rem 0 0.5rem 1rem;
border-left: 2px dashed rgba(0, 0, 0, 0.1);
margin-left: 1rem;
}
.modal {
@@ -461,37 +655,57 @@ export default {
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background: white;
border-radius: 4px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
padding: 1.5rem;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
color: #333;
font-size: 1.3rem;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
font-size: 1.8rem;
cursor: pointer;
padding: 0;
width: 30px;
@@ -499,42 +713,85 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: color 0.2s ease;
}
.close-btn:hover {
background: #f5f5f5;
border-radius: 50%;
color: #333;
}
.modal-body {
padding: 1rem;
padding: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
font-weight: 500;
color: #333;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.5rem;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
border-radius: 6px;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.modal-footer {
padding: 1rem;
padding: 1.5rem;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
gap: 0.75rem;
}
</style>
.no-devices {
text-align: center;
color: #7f8c8d;
padding: 3rem;
font-style: italic;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.main-content {
padding: 1rem;
}
.header {
padding: 1rem;
}
.node-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.node-actions {
align-self: flex-end;
}
.tree-node.controller-node,
.tree-node.device-node {
margin-left: 1rem;
}
}
</style>