mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复了传感器管理页面的显示问题

Browse Source
This commit is contained in:
wzclm 2025-03-11 13:49:08 +08:00
parent 61dd6f86a9
commit 3d00b93830
1 changed files with 84 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/AIPatrol/sensor/index.vue
View File

@ -78,21 +78,21 @@ const handleDelete = async (id) => {
// 获取传感器状态样式
const getStatusStyle = (status) => {
if (!status) return { color: '#909399', text: '未知' }
return {
1: {
color: '#67C23A',
text: '在线'
},
const statusMap = {
0: {
color: '#909399',
text: '离线'
},
1: {
color: '#67C23A',
text: '在线'
},
2: {
color: '#F56C6C',
text: '异常'
}
}[status.code] || { color: '#909399', text: status.text || '未知' }
}
return statusMap[status] || { color: '#909399', text: '未知' }
}
// 获取传感器类型信息
@ -116,6 +116,41 @@ const formatValue = (value, unit = '') => {
return `${value}${unit}`
}
// 获取传感器类型名称
const getSensorTypeName = (type, name) => {
if (name.includes('CS616')) return '土壤传感器'
if (name.includes('RK500-13')) return '水质传感器'
return '环境传感器'
}
// 获取传感器数据项
const getSensorDataItems = (sensor) => {
if (sensor.device_name.includes('CS616')) {
// 土壤传感器数据项
return [
{ label: '温度', value: sensor.data?.temp, unit: '°C' },
{ label: '湿度', value: sensor.data?.humi, unit: '%' },
{ label: '土壤湿度', value: sensor.data?.soil_adc, unit: '' },
{ label: '光照强度', value: sensor.data?.light_adc, unit: '' }
]
} else if (sensor.device_name.includes('RK500-13')) {
// 水质传感器数据项
return [
{ label: '温度', value: sensor.data?.temp, unit: '°C' },
{ label: '湿度', value: sensor.data?.humi, unit: '%' },
{ label: '水质电导率', value: sensor.data?.soil_adc, unit: 'μS/cm' },
{ label: '光照强度', value: sensor.data?.light_adc, unit: '' }
]
}
// 默认数据项
return [
{ label: '温度', value: sensor.data?.temp, unit: '°C' },
{ label: '湿度', value: sensor.data?.humi, unit: '%' },
{ label: '光照强度', value: sensor.data?.light_adc, unit: '' },
{ label: '传感器值', value: sensor.data?.soil_adc, unit: '' }
]
}
// 页面加载时获取数据
onMounted(() => {
getSensorList()
@ -137,18 +172,18 @@ onMounted(() => {
v-for="sensor in sensorList"
:key="sensor.id"
class="sensor-card"
:class="{ 'offline': sensor.status?.code === 0 }"
:class="{ 'offline': sensor.status === 0 }"
>
<div class="card-header">
<div class="sensor-info">
<el-icon :class="sensor.device_type">
<component :is="getTypeInfo(sensor.device_type).icon" />
<Monitor />
</el-icon>
<span class="sensor-name">{{ sensor.device_name }}</span>
</div>
<el-tag
size="small"
:type="sensor.status?.code === 1 ? 'success' : sensor.status?.code === 2 ? 'danger' : 'info'"
:type="sensor.status === 1 ? 'success' : sensor.status === 2 ? 'danger' : 'info'"
>
{{ getStatusStyle(sensor.status).text }}
</el-tag>
@ -159,6 +194,10 @@ onMounted(() => {
<span class="label">设备编号</span>
<span class="value">{{ sensor.device_code }}</span>
</div>
<div class="info-item">
<span class="label">设备类型</span>
<span class="value">{{ getSensorTypeName(sensor.device_type, sensor.device_name) }}</span>
</div>
<div class="info-item">
<span class="label">安装位置</span>
<span class="value">{{ sensor.install_location || '暂无数据' }}</span>
@ -166,28 +205,20 @@ onMounted(() => {
</div>
<div class="data-section">
<div class="data-grid">
<div class="data-item">
<div class="data-value">{{ formatValue(sensor.data?.temp, '°C') }}</div>
<div class="data-label">温度</div>
</div>
<div class="data-item">
<div class="data-value">{{ formatValue(sensor.data?.humi, '%') }}</div>
<div class="data-label">湿度</div>
</div>
<div class="data-item">
<div class="data-value">{{ formatValue(sensor.data?.light_adc) }}</div>
<div class="data-label">光照强度</div>
</div>
<div class="data-item">
<div class="data-value">{{ formatValue(sensor.data?.soil_adc) }}</div>
<div class="data-label">土壤湿度</div>
<div
v-for="(item, index) in getSensorDataItems(sensor)"
:key="index"
class="data-item"
>
<div class="data-value">{{ formatValue(item.value, item.unit) }}</div>
<div class="data-label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="update-time">
<el-icon><Timer /></el-icon>
{{ sensor.last_update_time ? new Date(sensor.last_update_time).toLocaleString() : '暂无数据' }}
{{ sensor.updated_at ? new Date(sensor.updated_at).toLocaleString() : '暂无数据' }}
</div>
<div class="actions">
<el-button type="primary" link>编辑</el-button>
@ -306,9 +337,9 @@ onMounted(() => {
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
align-items: flex-start;
margin-bottom: 12px;
min-width: 0;
&:last-child {
margin-bottom: 0;
@ -316,13 +347,33 @@ onMounted(() => {
.label {
color: #909399;
font-size: 13px;
font-size: 14px;
flex-shrink: 0;
width: 70px;
margin-top: 2px;
}
.value {
color: #606266;
font-size: 13px;
font-family: monospace;
color: #303133;
font-size: 15px;
font-weight: 500;
font-family: 'DIN Alternate', sans-serif;
flex: 1;
text-align: right;
word-break: break-all;
margin-left: 10px;
line-height: 1.4;
}
// 设备编号和设备类型特殊样式
&:nth-child(1),
&:nth-child(2) {
.value {
font-size: 16px;
font-weight: 600;
color: #1890ff;
opacity: 0.85;
}
}
}
}