去掉设备信息中的status字段
This commit is contained in:
6
TODO-List
Normal file
6
TODO-List
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// TODO 列表
|
||||||
|
|
||||||
|
1. websocket不是安全的wss
|
||||||
|
2. 添加设备时应该激活一下设备状态采集
|
||||||
|
3. 设备Model缺少硬件地址
|
||||||
|
|
||||||
@@ -292,15 +292,6 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-active {
|
|
||||||
color: #28a745;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-inactive {
|
|
||||||
color: #dc3545;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.dashboard-grid {
|
.dashboard-grid {
|
||||||
@@ -378,13 +369,6 @@
|
|||||||
<option value="">请选择上级设备</option>
|
<option value="">请选择上级设备</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="deviceStatus">设备状态</label>
|
|
||||||
<select id="deviceStatus" required>
|
|
||||||
<option value="active">启用</option>
|
|
||||||
<option value="inactive">停用</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
@@ -450,7 +434,6 @@
|
|||||||
name: "一号中继器",
|
name: "一号中继器",
|
||||||
type: "relay",
|
type: "relay",
|
||||||
parent_id: null,
|
parent_id: null,
|
||||||
status: "active",
|
|
||||||
created_at: "2023-01-01T00:00:00Z"
|
created_at: "2023-01-01T00:00:00Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -458,7 +441,6 @@
|
|||||||
name: "A区主控",
|
name: "A区主控",
|
||||||
type: "pig_pen_controller",
|
type: "pig_pen_controller",
|
||||||
parent_id: 1,
|
parent_id: 1,
|
||||||
status: "active",
|
|
||||||
created_at: "2023-01-02T00:00:00Z"
|
created_at: "2023-01-02T00:00:00Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -466,7 +448,6 @@
|
|||||||
name: "A区1号风机",
|
name: "A区1号风机",
|
||||||
type: "fan",
|
type: "fan",
|
||||||
parent_id: 2,
|
parent_id: 2,
|
||||||
status: "active",
|
|
||||||
created_at: "2023-01-03T00:00:00Z"
|
created_at: "2023-01-03T00:00:00Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -474,7 +455,6 @@
|
|||||||
name: "A区2号风机",
|
name: "A区2号风机",
|
||||||
type: "fan",
|
type: "fan",
|
||||||
parent_id: 2,
|
parent_id: 2,
|
||||||
status: "inactive",
|
|
||||||
created_at: "2023-01-03T00:00:00Z"
|
created_at: "2023-01-03T00:00:00Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -482,7 +462,6 @@
|
|||||||
name: "B区主控",
|
name: "B区主控",
|
||||||
type: "pig_pen_controller",
|
type: "pig_pen_controller",
|
||||||
parent_id: 1,
|
parent_id: 1,
|
||||||
status: "active",
|
|
||||||
created_at: "2023-01-02T00:00:00Z"
|
created_at: "2023-01-02T00:00:00Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -490,7 +469,6 @@
|
|||||||
name: "B区水帘",
|
name: "B区水帘",
|
||||||
type: "water_curtain",
|
type: "water_curtain",
|
||||||
parent_id: 5,
|
parent_id: 5,
|
||||||
status: "active",
|
|
||||||
created_at: "2023-01-04T00:00:00Z"
|
created_at: "2023-01-04T00:00:00Z"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
@@ -522,7 +500,6 @@
|
|||||||
<div class="node-title">
|
<div class="node-title">
|
||||||
<span>${relay.name}</span>
|
<span>${relay.name}</span>
|
||||||
<span class="node-type relay-type">中继</span>
|
<span class="node-type relay-type">中继</span>
|
||||||
<span class="status-${relay.status}">${relay.status === 'active' ? '启用' : '停用'}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="node-actions">
|
<div class="node-actions">
|
||||||
<button class="action-btn edit-btn" onclick="editDevice(${relay.id})">编辑</button>
|
<button class="action-btn edit-btn" onclick="editDevice(${relay.id})">编辑</button>
|
||||||
@@ -565,7 +542,6 @@
|
|||||||
<div class="node-title">
|
<div class="node-title">
|
||||||
<span>${controller.name}</span>
|
<span>${controller.name}</span>
|
||||||
<span class="node-type controller-type">${typeText}</span>
|
<span class="node-type controller-type">${typeText}</span>
|
||||||
<span class="status-${controller.status}">${controller.status === 'active' ? '启用' : '停用'}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="node-actions">
|
<div class="node-actions">
|
||||||
<button class="action-btn edit-btn" onclick="editDevice(${controller.id})">编辑</button>
|
<button class="action-btn edit-btn" onclick="editDevice(${controller.id})">编辑</button>
|
||||||
@@ -606,7 +582,6 @@
|
|||||||
<div class="node-title">
|
<div class="node-title">
|
||||||
<span>${device.name}</span>
|
<span>${device.name}</span>
|
||||||
<span class="node-type device-type">${typeText}</span>
|
<span class="node-type device-type">${typeText}</span>
|
||||||
<span class="status-${device.status}">${device.status === 'active' ? '启用' : '停用'}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="node-actions">
|
<div class="node-actions">
|
||||||
<button class="action-btn edit-btn" onclick="editDevice(${device.id})">编辑</button>
|
<button class="action-btn edit-btn" onclick="editDevice(${device.id})">编辑</button>
|
||||||
@@ -697,8 +672,6 @@
|
|||||||
const name = document.getElementById('deviceName').value;
|
const name = document.getElementById('deviceName').value;
|
||||||
const type = document.getElementById('deviceType').value;
|
const type = document.getElementById('deviceType').value;
|
||||||
const parentId = document.getElementById('parentId').value;
|
const parentId = document.getElementById('parentId').value;
|
||||||
const status = document.getElementById('deviceStatus').value;
|
|
||||||
|
|
||||||
if (!name || !type) {
|
if (!name || !type) {
|
||||||
alert('请填写必填字段');
|
alert('请填写必填字段');
|
||||||
return;
|
return;
|
||||||
@@ -707,7 +680,6 @@
|
|||||||
const deviceData = {
|
const deviceData = {
|
||||||
name: name,
|
name: name,
|
||||||
type: type,
|
type: type,
|
||||||
status: status,
|
|
||||||
parent_id: parentId ? parseInt(parentId) : null
|
parent_id: parentId ? parseInt(parentId) : null
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,89 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-management">
|
||||||
<div class="header">
|
<header class="header">
|
||||||
<h1>🐷 猪场管理系统</h1>
|
<h1>设备管理</h1>
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<span>{{ username }}</span>
|
<span>欢迎, {{ username }}</span>
|
||||||
<button class="logout-btn" @click="logout">退出登录</button>
|
<button class="logout-btn" @click="logout">退出</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<div class="nav">
|
<main class="main-content">
|
||||||
<ul>
|
<div class="toolbar">
|
||||||
<li><router-link to="/dashboard">控制台</router-link></li>
|
|
||||||
<li><router-link to="/device" class="active">设备管理</router-link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="page-header">
|
|
||||||
<h2>设备管理</h2>
|
|
||||||
<button class="btn btn-primary" @click="openAddDeviceModal">添加设备</button>
|
<button class="btn btn-primary" @click="openAddDeviceModal">添加设备</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="device-tree" id="deviceTree">
|
<div class="device-tree" id="deviceTree">
|
||||||
<!-- 设备树将通过JavaScript动态生成 -->
|
<!-- 设备树将通过JavaScript动态生成 -->
|
||||||
<div v-if="devices.length === 0">
|
|
||||||
暂无设备数据
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-for="relay in relayDevices" :key="relay.id" class="tree-node relay-node">
|
|
||||||
<div class="node-header">
|
|
||||||
<div class="node-title">
|
|
||||||
<span>{{ relay.name }}</span>
|
|
||||||
<span class="node-type relay-type">中继</span>
|
|
||||||
<span :class="'status-' + relay.status">{{ relay.status === 'active' ? '启用' : '停用' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="node-actions">
|
|
||||||
<button class="action-btn edit-btn" @click="editDevice(relay)">编辑</button>
|
|
||||||
<button class="action-btn delete-btn" @click="deleteDevice(relay.id)">删除</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="children" v-if="getControllerDevices(relay.id).length > 0">
|
|
||||||
<div
|
|
||||||
v-for="controller in getControllerDevices(relay.id)"
|
|
||||||
:key="controller.id"
|
|
||||||
class="tree-node controller-node"
|
|
||||||
>
|
|
||||||
<div class="node-header">
|
|
||||||
<div class="node-title">
|
|
||||||
<span>{{ controller.name }}</span>
|
|
||||||
<span class="node-type controller-type">
|
|
||||||
{{ getDeviceTypeText(controller.type) }}
|
|
||||||
</span>
|
|
||||||
<span :class="'status-' + controller.status">{{ controller.status === 'active' ? '启用' : '停用' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="node-actions">
|
|
||||||
<button class="action-btn edit-btn" @click="editDevice(controller)">编辑</button>
|
|
||||||
<button class="action-btn delete-btn" @click="deleteDevice(controller.id)">删除</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="children" v-if="getLeafDevices(controller.id).length > 0">
|
|
||||||
<div
|
|
||||||
v-for="device in getLeafDevices(controller.id)"
|
|
||||||
:key="device.id"
|
|
||||||
class="tree-node device-node"
|
|
||||||
>
|
|
||||||
<div class="node-header">
|
|
||||||
<div class="node-title">
|
|
||||||
<span>{{ device.name }}</span>
|
|
||||||
<span class="node-type device-type">{{ getDeviceTypeText(device.type) }}</span>
|
|
||||||
<span :class="'status-' + device.status">{{ device.status === 'active' ? '启用' : '停用' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="node-actions">
|
|
||||||
<button class="action-btn edit-btn" @click="editDevice(device)">编辑</button>
|
|
||||||
<button class="action-btn delete-btn" @click="deleteDevice(device.id)">删除</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<!-- 添加/编辑设备模态框 -->
|
<!-- 添加/编辑设备模态框 -->
|
||||||
<div class="modal" v-if="showModal">
|
<div class="modal" v-if="showModal">
|
||||||
@@ -119,7 +52,7 @@
|
|||||||
:key="parent.id"
|
:key="parent.id"
|
||||||
:value="parent.id"
|
:value="parent.id"
|
||||||
>
|
>
|
||||||
{{ parent.display_name }}
|
{{ parent.name }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
@@ -204,26 +137,12 @@ export default {
|
|||||||
if (currentType === 'pig_pen_controller' || currentType === 'feed_mill_controller') {
|
if (currentType === 'pig_pen_controller' || currentType === 'feed_mill_controller') {
|
||||||
// 控制器的上级是中继设备
|
// 控制器的上级是中继设备
|
||||||
return this.devices.filter(device => device.type === 'relay')
|
return this.devices.filter(device => device.type === 'relay')
|
||||||
.map(relay => ({
|
|
||||||
...relay,
|
|
||||||
display_name: relay.name
|
|
||||||
}));
|
|
||||||
} else if (currentType === 'fan' || currentType === 'water_curtain') {
|
} else if (currentType === 'fan' || currentType === 'water_curtain') {
|
||||||
// 设备的上级是控制器
|
// 设备的上级是控制器
|
||||||
// 找到所有控制器设备,并添加其上级中继设备的名称作为前缀
|
return this.devices.filter(device =>
|
||||||
const controllers = this.devices.filter(device =>
|
device.type === 'pig_pen_controller' || device.type === 'feed_mill_controller')
|
||||||
device.type === 'pig_pen_controller' || device.type === 'feed_mill_controller');
|
|
||||||
|
|
||||||
return controllers.map(controller => {
|
|
||||||
// 查找控制器的上级中继设备
|
|
||||||
const relay = this.devices.find(device => device.id === controller.parent_id);
|
|
||||||
return {
|
|
||||||
...controller,
|
|
||||||
display_name: relay ? `${relay.name} - ${controller.name}` : controller.name
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
return [];
|
return []
|
||||||
},
|
},
|
||||||
|
|
||||||
// 加载设备列表
|
// 加载设备列表
|
||||||
@@ -263,7 +182,6 @@ export default {
|
|||||||
editDevice(device) {
|
editDevice(device) {
|
||||||
this.editingDevice = device
|
this.editingDevice = device
|
||||||
this.deviceForm = { ...device }
|
this.deviceForm = { ...device }
|
||||||
delete this.deviceForm.status
|
|
||||||
this.showModal = true
|
this.showModal = true
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -285,49 +203,45 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let response
|
let url, method
|
||||||
|
const deviceData = {
|
||||||
|
name: this.deviceForm.name,
|
||||||
|
type: this.deviceForm.type,
|
||||||
|
parent_id: this.deviceForm.parent_id
|
||||||
|
}
|
||||||
|
|
||||||
if (this.editingDevice) {
|
if (this.editingDevice) {
|
||||||
// 更新设备
|
// 更新设备
|
||||||
response = await fetch('/api/v1/device/update', {
|
url = '/api/v1/device/update'
|
||||||
method: 'POST',
|
method = 'POST'
|
||||||
headers: {
|
deviceData.id = this.deviceForm.id
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
id: this.deviceForm.id,
|
|
||||||
name: this.deviceForm.name,
|
|
||||||
type: this.deviceForm.type,
|
|
||||||
parent_id: this.deviceForm.parent_id
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
// 创建设备
|
// 创建设备
|
||||||
response = await fetch('/api/v1/device/create', {
|
url = '/api/v1/device/create'
|
||||||
method: 'POST',
|
method = 'POST'
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
name: this.deviceForm.name,
|
|
||||||
type: this.deviceForm.type,
|
|
||||||
parent_id: this.deviceForm.parent_id
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||||
|
},
|
||||||
|
body: JSON.stringify(deviceData)
|
||||||
|
})
|
||||||
|
|
||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
|
|
||||||
if (response.ok && data.code === 0) {
|
if (response.ok && data.code === 0) {
|
||||||
|
// 保存成功,重新加载设备列表
|
||||||
|
await this.loadDevices()
|
||||||
this.closeDeviceModal()
|
this.closeDeviceModal()
|
||||||
this.loadDevices() // 重新加载设备列表
|
|
||||||
} else {
|
} else {
|
||||||
alert('操作失败: ' + data.message)
|
alert('保存失败: ' + data.message)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('操作失败:', error)
|
console.error('保存设备失败:', error)
|
||||||
alert('操作失败,请查看控制台了解详情')
|
alert('保存设备失败: ' + error.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -350,13 +264,21 @@ export default {
|
|||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
|
|
||||||
if (response.ok && data.code === 0) {
|
if (response.ok && data.code === 0) {
|
||||||
this.loadDevices() // 重新加载设备列表
|
// 删除成功,重新加载设备列表
|
||||||
|
await this.loadDevices()
|
||||||
} else {
|
} else {
|
||||||
alert('删除失败: ' + data.message)
|
alert('删除失败: ' + data.message)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('删除失败:', error)
|
console.error('删除设备失败:', error)
|
||||||
alert('删除失败,请查看控制台了解详情')
|
alert('删除设备失败: ' + error.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据设备类型切换上级设备字段显示
|
||||||
|
toggleParentField() {
|
||||||
|
if (this.deviceForm.type === 'relay') {
|
||||||
|
this.deviceForm.parent_id = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -364,202 +286,173 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.device-management {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: #2c3e50;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 20px;
|
padding: 1rem;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 24px;
|
margin: 0;
|
||||||
display: flex;
|
font-size: 1.5rem;
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: #e74c3c;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
color: white;
|
color: white;
|
||||||
padding: 8px 15px;
|
border: none;
|
||||||
border-radius: 5px;
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn:hover {
|
.logout-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: #c0392b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.main-content {
|
||||||
background: white;
|
flex: 1;
|
||||||
padding: 15px 20px;
|
padding: 1rem;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul {
|
.toolbar {
|
||||||
display: flex;
|
margin-bottom: 1rem;
|
||||||
list-style: none;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #666;
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav a:hover, .nav a.active {
|
|
||||||
background: #667eea;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 30px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header h2 {
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 10px 20px;
|
padding: 0.5rem 1rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 1rem;
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: #667eea;
|
background: #3498db;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background: #5a6fd8;
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #95a5a6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #7f8c8d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-tree {
|
.device-tree {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 15px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
padding: 25px;
|
padding: 1rem;
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-node {
|
.tree-node {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 0.5rem;
|
||||||
border-left: 2px solid #e1e1e1;
|
padding: 0.5rem;
|
||||||
padding-left: 20px;
|
border-radius: 4px;
|
||||||
|
border-left: 3px solid #3498db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relay-node {
|
.tree-node.relay-node {
|
||||||
border-left-color: #667eea;
|
background: #ecf0f1;
|
||||||
|
border-left-color: #e74c3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controller-node {
|
.tree-node.controller-node {
|
||||||
border-left-color: #764ba2;
|
background: #f8f9fa;
|
||||||
|
border-left-color: #f39c12;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-node {
|
.tree-node.device-node {
|
||||||
border-left-color: #ffa500;
|
background: #fff;
|
||||||
|
border-left-color: #2ecc71;
|
||||||
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-header {
|
.node-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-node > .node-header {
|
|
||||||
background: rgba(102, 126, 234, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.controller-node > .node-header {
|
|
||||||
background: rgba(118, 75, 162, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.device-node > .node-header {
|
|
||||||
background: rgba(255, 165, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-title {
|
.node-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-type {
|
.node-type {
|
||||||
font-size: 12px;
|
font-size: 0.8rem;
|
||||||
padding: 2px 8px;
|
padding: 0.2rem 0.5rem;
|
||||||
border-radius: 10px;
|
border-radius: 4px;
|
||||||
color: white;
|
margin: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relay-type {
|
.relay-type {
|
||||||
background: #667eea;
|
background: #e74c3c;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controller-type {
|
.controller-type {
|
||||||
background: #764ba2;
|
background: #f39c12;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-type {
|
.device-type {
|
||||||
background: #ffa500;
|
background: #2ecc71;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-actions {
|
.node-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
.action-btn {
|
||||||
padding: 5px 10px;
|
padding: 0.2rem 0.5rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-btn {
|
.edit-btn {
|
||||||
background: #ffc107;
|
background: #3498db;
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn {
|
|
||||||
background: #dc3545;
|
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.children {
|
.edit-btn:hover {
|
||||||
margin-left: 20px;
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
background: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn:hover {
|
||||||
|
background: #c0392b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
@@ -568,27 +461,27 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0,0,0,0.5);
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 15px;
|
border-radius: 4px;
|
||||||
width: 100%;
|
width: 90%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header h3 {
|
.modal-header h3 {
|
||||||
@@ -598,71 +491,50 @@ export default {
|
|||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 24px;
|
font-size: 1.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #999;
|
padding: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
padding: 20px;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input, .form-group select {
|
.form-group input,
|
||||||
|
.form-group select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 0.5rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 5px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
padding: 20px;
|
padding: 1rem;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 10px;
|
gap: 0.5rem;
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: #6c757d;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-active {
|
|
||||||
color: #28a745;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-inactive {
|
|
||||||
color: #dc3545;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.dashboard-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -119,7 +119,6 @@ func (c *Controller) Create(ctx *gin.Context) {
|
|||||||
Name: req.Name,
|
Name: req.Name,
|
||||||
Type: req.Type,
|
Type: req.Type,
|
||||||
ParentID: req.ParentID,
|
ParentID: req.ParentID,
|
||||||
Status: "active", // 默认设置为active状态
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if err := c.deviceRepo.Create(device); err != nil {
|
if err := c.deviceRepo.Create(device); err != nil {
|
||||||
@@ -176,9 +175,7 @@ func (c *Controller) Update(ctx *gin.Context) {
|
|||||||
device.Name = req.Name
|
device.Name = req.Name
|
||||||
device.Type = req.Type
|
device.Type = req.Type
|
||||||
device.ParentID = req.ParentID
|
device.ParentID = req.ParentID
|
||||||
// TODO: 设备状态应该由系统自动获取,而不是由用户指定
|
// 设备状态现在只在内存中维护,不持久化到数据库
|
||||||
// 这里保持设备原有状态,后续需要实现自动状态检测
|
|
||||||
// device.Status = req.Status
|
|
||||||
|
|
||||||
if err := c.deviceRepo.Update(device); err != nil {
|
if err := c.deviceRepo.Update(device); err != nil {
|
||||||
c.logger.Error("更新设备失败: " + err.Error())
|
c.logger.Error("更新设备失败: " + err.Error())
|
||||||
|
|||||||
@@ -42,9 +42,6 @@ type Device struct {
|
|||||||
// ParentID 上级设备ID(用于设备层级关系,指向区域主控设备)
|
// ParentID 上级设备ID(用于设备层级关系,指向区域主控设备)
|
||||||
ParentID *uint `gorm:"column:parent_id;index" json:"parent_id"`
|
ParentID *uint `gorm:"column:parent_id;index" json:"parent_id"`
|
||||||
|
|
||||||
// Status 设备状态
|
|
||||||
Status string `gorm:"not null;column:status" json:"status"`
|
|
||||||
|
|
||||||
// CreatedAt 创建时间
|
// CreatedAt 创建时间
|
||||||
CreatedAt time.Time `gorm:"column:created_at" json:"created_at"`
|
CreatedAt time.Time `gorm:"column:created_at" json:"created_at"`
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user