|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-row :gutter="20">
|
|
|
<!-- 左侧设备树 -->
|
|
|
<el-col :span="5" :xs="24">
|
|
|
<div class="head-container">
|
|
|
<el-input
|
|
|
v-model="deviceTreeFilter"
|
|
|
placeholder="请输入设备名称"
|
|
|
clearable
|
|
|
size="small"
|
|
|
prefix-icon="el-icon-search"
|
|
|
style="margin-bottom: 20px"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="head-container">
|
|
|
<el-tree
|
|
|
:data="deviceTreeOptions"
|
|
|
:props="deviceTreeProps"
|
|
|
:expand-on-click-node="false"
|
|
|
:filter-node-method="filterDeviceNode"
|
|
|
ref="deviceTree"
|
|
|
node-key="id"
|
|
|
default-expand-all
|
|
|
highlight-current
|
|
|
@node-click="handleDeviceNodeClick">
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
|
|
|
<!-- 右侧内容区 -->
|
|
|
<el-col :span="19" :xs="24">
|
|
|
<!-- 统计卡片区域 -->
|
|
|
<div class="stats-section">
|
|
|
<div class="stats-grid">
|
|
|
<div
|
|
|
class="stat-card total clickable"
|
|
|
@click="navigateToDeviceList"
|
|
|
v-hasPermi="['ems/base:baseMonitorInfo:list']">
|
|
|
<div class="stat-icon">
|
|
|
<i class="el-icon-monitor"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<div class="stat-number">{{ totalDeviceCount }}</div>
|
|
|
<div class="stat-label">设备总数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="stat-card alarm-rule clickable"
|
|
|
@click="navigateToAlarmRules"
|
|
|
v-hasPermi="['ems/record:recordAlarmRule:list']">
|
|
|
<div class="stat-icon">
|
|
|
<i class="el-icon-warning"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<div class="stat-number">{{ alarmRuleTotalCount }}</div>
|
|
|
<div class="stat-label">异常规则数量</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="stat-card alarm-data clickable"
|
|
|
@click="navigateToAlarmData"
|
|
|
v-hasPermi="['ems/record:recordAlarmData:list']">
|
|
|
<div class="stat-icon">
|
|
|
<i class="el-icon-bell"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<div class="stat-number">{{ alarmDataTotalCount }}</div>
|
|
|
<div class="stat-label">异常数据数量</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备监控数据区域 -->
|
|
|
<div class="monitoring-section">
|
|
|
<div class="section-header">
|
|
|
<h2 class="section-title">设备监控数据</h2>
|
|
|
<div class="section-actions">
|
|
|
<span v-if="selectedNodeName" class="selected-node">
|
|
|
当前节点：{{ selectedNodeName }}
|
|
|
<span v-if="selectedNodeType" class="node-type-info">({{ getNodeTypeText(selectedNodeType) }})</span>
|
|
|
</span>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-refresh"
|
|
|
size="small"
|
|
|
@click="refreshData"
|
|
|
:loading="loading">
|
|
|
刷新数据
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备数据卡片网格 -->
|
|
|
<div class="device-grid" v-loading="loading">
|
|
|
<div
|
|
|
v-for="device in filteredDeviceList"
|
|
|
:key="device.monitorId"
|
|
|
class="device-card"
|
|
|
:class="getDeviceStatus(device)">
|
|
|
|
|
|
<!-- 设备头部信息 -->
|
|
|
<div class="device-header">
|
|
|
<div class="device-info">
|
|
|
<div class="device-title-row">
|
|
|
<h3 class="device-name">{{ device.monitorName || '未知设备' }}</h3>
|
|
|
<span v-if="isCurrentNodeDevice(device)" class="node-type-badge current">当前节点</span>
|
|
|
<span v-else class="node-type-badge child">子节点</span>
|
|
|
</div>
|
|
|
<span class="device-id">{{ device.monitorId }}</span>
|
|
|
</div>
|
|
|
<div class="device-status">
|
|
|
<span class="status-indicator" :class="getDeviceStatus(device)"></span>
|
|
|
<span class="status-text">{{ getStatusText(device) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备数据展示 -->
|
|
|
<div class="device-data">
|
|
|
<!-- type=5: 只显示温度 -->
|
|
|
<template v-if="selectedNodeType === 5">
|
|
|
<div class="data-row" v-if="device.temperature !== null && device.temperature !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-sunny" style="color: #ff6b35;"></i>
|
|
|
<span class="data-label">温度</span>
|
|
|
<span class="data-value">{{ formatValue(device.temperature, '°C') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- type=6: 显示温度和湿度 -->
|
|
|
<template v-else-if="selectedNodeType === 6">
|
|
|
<div class="data-row" v-if="device.temperature !== null && device.temperature !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-sunny" style="color: #ff6b35;"></i>
|
|
|
<span class="data-label">温度</span>
|
|
|
<span class="data-value">{{ formatValue(device.temperature, '°C') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.humidity !== null && device.humidity !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-cloudy"></i>
|
|
|
<span class="data-label">湿度</span>
|
|
|
<span class="data-value">{{ formatValue(device.humidity, '%') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- type=7: 只显示噪声 -->
|
|
|
<template v-else-if="selectedNodeType === 7">
|
|
|
<div class="data-row" v-if="device.noise !== null && device.noise !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-microphone"></i>
|
|
|
<span class="data-label">噪声</span>
|
|
|
<span class="data-value">{{ formatValue(device.noise, 'dB') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- type=10: 显示振动相关数据 -->
|
|
|
<template v-else-if="selectedNodeType === 10">
|
|
|
<div class="data-row" v-if="device.vibrationSpeed !== null && device.vibrationSpeed !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动速度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationSpeed, 'mm/s') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationDisplacement !== null && device.vibrationDisplacement !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动位移</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationDisplacement, 'um') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationAcceleration !== null && device.vibrationAcceleration !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动加速度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationAcceleration, 'g') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationTemp !== null && device.vibrationTemp !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-sunny" style="color: #ff6b35;"></i>
|
|
|
<span class="data-label">振动温度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationTemp, '℃') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- 默认情况：显示所有可用数据 -->
|
|
|
<template v-else>
|
|
|
<div class="data-row" v-if="device.temperature !== null && device.temperature !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-sunny" style="color: #ff6b35;"></i>
|
|
|
<span class="data-label">温度</span>
|
|
|
<span class="data-value">{{ formatValue(device.temperature, '°C') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.humidity !== null && device.humidity !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-cloudy"></i>
|
|
|
<span class="data-label">湿度</span>
|
|
|
<span class="data-value">{{ formatValue(device.humidity, '%') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.noise !== null && device.noise !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-microphone"></i>
|
|
|
<span class="data-label">噪声</span>
|
|
|
<span class="data-value">{{ formatValue(device.noise, 'dB') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationSpeed !== null && device.vibrationSpeed !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动速度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationSpeed, 'mm/s') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationDisplacement !== null && device.vibrationDisplacement !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动位移</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationDisplacement, 'um') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationAcceleration !== null && device.vibrationAcceleration !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-s-operation"></i>
|
|
|
<span class="data-label">振动加速度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationAcceleration, 'g') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row" v-if="device.vibrationTemp !== null && device.vibrationTemp !== undefined">
|
|
|
<div class="data-item">
|
|
|
<i class="data-icon el-icon-sunny" style="color: #ff6b35;"></i>
|
|
|
<span class="data-label">振动温度</span>
|
|
|
<span class="data-value">{{ formatValue(device.vibrationTemp, '℃') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- 无数据提示 -->
|
|
|
<div v-if="!hasDataForType(device, selectedNodeType)" class="no-data">
|
|
|
<i class="el-icon-warning-outline"></i>
|
|
|
<span>当天无最新数据</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备底部信息 -->
|
|
|
<div class="device-footer" v-if="device.recodeTime">
|
|
|
<span class="update-time">
|
|
|
<i class="el-icon-time"></i>
|
|
|
记录时间：{{ formatTime(device.recodeTime) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 空状态 -->
|
|
|
<div v-if="!loading && filteredDeviceList.length === 0 && selectedNodeName" class="empty-state">
|
|
|
<i class="el-icon-box"></i>
|
|
|
<p>{{ getEmptyStateMessage() }}</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 未选择提示 -->
|
|
|
<div v-if="!selectedNodeName && !loading" class="empty-state">
|
|
|
<i class="el-icon-s-grid"></i>
|
|
|
<p>请在设备树中选择节点查看设备数据</p>
|
|
|
<span class="empty-tip">系统将根据节点类型自动显示对应的传感器数据</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getLatestRecords, getLatestRecordsByParentId } from '@/api/ems/record/recordIotenvInstant'
|
|
|
import {getAlarmDataTotalCount, saveWebSocketAlarmData} from "@/api/ems/record/recordAlarmData";
|
|
|
import {getEmsRecordAlarmRuleTotalCount} from "@/api/ems/record/recordAlarmRule";
|
|
|
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
|
|
|
|
|
|
export default {
|
|
|
name: 'Dashboard',
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
deviceList: [],
|
|
|
|
|
|
alarmRuleTotalCount: 0,
|
|
|
alarmDataTotalCount: 0,
|
|
|
totalDeviceCount: 0, // 设备总数
|
|
|
// 设备树相关
|
|
|
deviceTreeOptions: [],
|
|
|
deviceTreeFilter: '',
|
|
|
selectedNodeId: null, // 当前选中的节点ID
|
|
|
selectedNodeName: null, // 当前选中的节点名称
|
|
|
selectedNodeType: null, // 当前选中的节点类型
|
|
|
selectedNodeCode: null, // 当前选中的节点Code
|
|
|
deviceTreeProps: {
|
|
|
children: 'children',
|
|
|
label: 'label'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
// 根据选择的设备树节点过滤设备列表
|
|
|
filteredDeviceList() {
|
|
|
return this.deviceList
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
// 根据名称筛选设备树
|
|
|
deviceTreeFilter(val) {
|
|
|
this.$refs.deviceTree.filter(val)
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.loadDeviceTree()
|
|
|
this.loadStatistics() // 初始加载统计数据
|
|
|
|
|
|
// 监听全局WebSocket事件
|
|
|
this.$bus.$on('websocket-device-data', this.handleDeviceData)
|
|
|
this.$bus.$on('websocket-connected', this.onWebSocketConnected)
|
|
|
this.$bus.$on('websocket-disconnected', this.onWebSocketDisconnected)
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
// 清理事件监听
|
|
|
this.$bus.$off('websocket-device-data', this.handleDeviceData)
|
|
|
this.$bus.$off('websocket-connected', this.onWebSocketConnected)
|
|
|
this.$bus.$off('websocket-disconnected', this.onWebSocketDisconnected)
|
|
|
},
|
|
|
methods: {
|
|
|
async loadStatistics() {
|
|
|
try {
|
|
|
this.alarmDataTotalCount = await getAlarmDataTotalCount();
|
|
|
this.alarmRuleTotalCount = await getEmsRecordAlarmRuleTotalCount();
|
|
|
// 获取所有设备数据用于统计设备总数
|
|
|
const response = await getLatestRecords()
|
|
|
if (response.code === 200) {
|
|
|
const rawData = response.data || []
|
|
|
const allDevices = rawData.filter(device => {
|
|
|
return device.monitorName !== '胶东机场' &&
|
|
|
device.monitorId &&
|
|
|
device.monitorName
|
|
|
})
|
|
|
// 更新设备总数
|
|
|
this.totalDeviceCount = allDevices.length
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取统计数据失败:', error)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async loadDeviceDataByNode(nodeId) {
|
|
|
this.loading = true
|
|
|
try {
|
|
|
console.log('=== 开始加载节点数据 ===')
|
|
|
console.log('节点ID:', nodeId)
|
|
|
|
|
|
// 同时获取当前节点和子节点的数据
|
|
|
const [currentNodeResponse, childNodesResponse] = await Promise.all([
|
|
|
// 获取当前节点自身的数据（通过获取所有数据然后筛选）
|
|
|
getLatestRecords(),
|
|
|
// 获取子节点的数据
|
|
|
getLatestRecordsByParentId(nodeId)
|
|
|
])
|
|
|
|
|
|
let allDeviceData = []
|
|
|
|
|
|
// 处理当前节点自身的数据
|
|
|
if (currentNodeResponse.code === 200) {
|
|
|
const currentNodeData = currentNodeResponse.data || []
|
|
|
console.log('所有设备数据总数:', currentNodeData.length)
|
|
|
console.log('当前节点信息 - ID:', this.selectedNodeId, '名称:', this.selectedNodeName, 'Code:', this.selectedNodeCode)
|
|
|
|
|
|
// 筛选出当前节点对应的设备数据
|
|
|
// 优先通过节点code匹配设备monitorId（叶子节点的正确匹配方式）
|
|
|
const currentDevices = currentNodeData.filter(device => {
|
|
|
const matchByCode = this.selectedNodeCode && device.monitorId === this.selectedNodeCode
|
|
|
const matchById = device.monitorId === nodeId
|
|
|
const matchByName = device.monitorName === this.selectedNodeName
|
|
|
const isValid = device.monitorName !== '胶东机场' &&
|
|
|
device.monitorId &&
|
|
|
device.monitorName
|
|
|
|
|
|
const matches = (matchByCode || matchById || matchByName) && isValid
|
|
|
|
|
|
if (matches) {
|
|
|
console.log('找到当前节点设备:', device.monitorName, device.monitorId,
|
|
|
matchByCode ? '(通过Code匹配)' :
|
|
|
matchById ? '(通过ID匹配)' : '(通过名称匹配)')
|
|
|
}
|
|
|
return matches
|
|
|
})
|
|
|
console.log('当前节点设备数量:', currentDevices.length)
|
|
|
allDeviceData = [...allDeviceData, ...currentDevices]
|
|
|
}
|
|
|
|
|
|
// 处理子节点数据
|
|
|
if (childNodesResponse.code === 200) {
|
|
|
const childNodesData = childNodesResponse.data || []
|
|
|
console.log('子节点原始数据数量:', childNodesData.length)
|
|
|
|
|
|
const childDevices = childNodesData.filter(device => {
|
|
|
const matches = device.monitorName !== '胶东机场' &&
|
|
|
device.monitorId &&
|
|
|
device.monitorName
|
|
|
if (matches) {
|
|
|
console.log('找到子节点设备:', device.monitorName, device.monitorId)
|
|
|
}
|
|
|
return matches
|
|
|
})
|
|
|
console.log('子节点有效设备数量:', childDevices.length)
|
|
|
allDeviceData = [...allDeviceData, ...childDevices]
|
|
|
}
|
|
|
|
|
|
console.log('合并后设备数据总数:', allDeviceData.length)
|
|
|
|
|
|
|
|
|
|
|
|
// 去重处理（基于monitorId）
|
|
|
const uniqueDevices = []
|
|
|
const seenIds = new Set()
|
|
|
|
|
|
for (const device of allDeviceData) {
|
|
|
if (!seenIds.has(device.monitorId)) {
|
|
|
seenIds.add(device.monitorId)
|
|
|
uniqueDevices.push(device)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.deviceList = uniqueDevices
|
|
|
console.log('最终设备列表数量:', this.deviceList.length)
|
|
|
|
|
|
// 统计当前节点和子节点的设备数量
|
|
|
const currentNodeDeviceCount = this.deviceList.filter(d => {
|
|
|
return (this.selectedNodeCode && d.monitorId === this.selectedNodeCode) ||
|
|
|
d.monitorId === nodeId ||
|
|
|
d.monitorName === this.selectedNodeName
|
|
|
}).length
|
|
|
|
|
|
const childNodeDeviceCount = this.deviceList.length - currentNodeDeviceCount
|
|
|
|
|
|
console.log('当前节点数据数量:', currentNodeDeviceCount)
|
|
|
console.log('子节点数据数量:', childNodeDeviceCount)
|
|
|
console.log('=== 数据加载完成 ===')
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('获取设备数据失败:', error)
|
|
|
this.$message.error('获取设备数据失败')
|
|
|
this.deviceList = []
|
|
|
} finally {
|
|
|
this.loading = false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
refreshData() {
|
|
|
if (this.selectedNodeId !== null) {
|
|
|
this.loadDeviceDataByNode(this.selectedNodeId)
|
|
|
}
|
|
|
// 删除统计数据的手动刷新，统计数据现在通过WebSocket实时更新
|
|
|
// this.loadStatistics()
|
|
|
},
|
|
|
|
|
|
// 加载设备树
|
|
|
async loadDeviceTree() {
|
|
|
const response = await getMonitorInfoTree({})
|
|
|
this.deviceTreeOptions = response.data || []
|
|
|
console.log('设备树数据:', this.deviceTreeOptions)
|
|
|
},
|
|
|
|
|
|
// 设备树节点筛选
|
|
|
filterDeviceNode(value, data) {
|
|
|
if (!value) return true
|
|
|
return data.label.indexOf(value) !== -1
|
|
|
},
|
|
|
|
|
|
// 设备树节点点击事件
|
|
|
handleDeviceNodeClick(data) {
|
|
|
console.log('点击设备树节点:', data)
|
|
|
|
|
|
// 设置选中的节点信息
|
|
|
this.selectedNodeId = data.id
|
|
|
this.selectedNodeName = data.label
|
|
|
this.selectedNodeType = data.type
|
|
|
this.selectedNodeCode = data.code // 添加节点code字段
|
|
|
|
|
|
console.log('选中节点ID:', this.selectedNodeId, '节点名称:', this.selectedNodeName, '节点类型:', this.selectedNodeType, '节点Code:', this.selectedNodeCode)
|
|
|
|
|
|
// 根据选中的节点ID加载该节点下的设备数据
|
|
|
this.loadDeviceDataByNode(this.selectedNodeId)
|
|
|
},
|
|
|
|
|
|
hasData(device) {
|
|
|
// 修正判断逻辑：检查是否有任何传感器数据（包括0值）
|
|
|
return (device.temperature !== null && device.temperature !== undefined) ||
|
|
|
(device.humidity !== null && device.humidity !== undefined) ||
|
|
|
(device.noise !== null && device.noise !== undefined) ||
|
|
|
(device.illuminance !== null && device.illuminance !== undefined) ||
|
|
|
(device.concentration !== null && device.concentration !== undefined) ||
|
|
|
(device.vibrationSpeed !== null && device.vibrationSpeed !== undefined) ||
|
|
|
(device.recodeTime !== null && device.recodeTime !== undefined)
|
|
|
},
|
|
|
|
|
|
hasDataForType(device, type) {
|
|
|
// 根据设备类型检查是否有对应的传感器数据
|
|
|
console.log('检查设备数据类型:', device.monitorName, 'type:', type, 'device:', device)
|
|
|
|
|
|
switch (type) {
|
|
|
case 5: // 温度类型
|
|
|
const hasTemp = device.temperature !== null && device.temperature !== undefined
|
|
|
console.log('温度数据检查:', hasTemp, device.temperature)
|
|
|
return hasTemp
|
|
|
case 6: // 温湿度类型
|
|
|
const hasTempOrHumidity = (device.temperature !== null && device.temperature !== undefined) ||
|
|
|
(device.humidity !== null && device.humidity !== undefined)
|
|
|
console.log('温湿度数据检查:', hasTempOrHumidity, 'temp:', device.temperature, 'humidity:', device.humidity)
|
|
|
return hasTempOrHumidity
|
|
|
case 7: // 噪声类型
|
|
|
const hasNoise = device.noise !== null && device.noise !== undefined
|
|
|
console.log('噪声数据检查:', hasNoise, device.noise)
|
|
|
return hasNoise
|
|
|
case 10: // 振动类型
|
|
|
const hasVibration = (device.vibrationSpeed !== null && device.vibrationSpeed !== undefined) ||
|
|
|
(device.vibrationDisplacement !== null && device.vibrationDisplacement !== undefined) ||
|
|
|
(device.vibrationAcceleration !== null && device.vibrationAcceleration !== undefined) ||
|
|
|
(device.vibrationTemp !== null && device.vibrationTemp !== undefined)
|
|
|
console.log('振动数据检查:', hasVibration, 'speed:', device.vibrationSpeed, 'displacement:', device.vibrationDisplacement)
|
|
|
return hasVibration
|
|
|
default: // 默认情况，检查所有传感器数据
|
|
|
const hasAnyData = this.hasData(device)
|
|
|
console.log('默认数据检查:', hasAnyData)
|
|
|
return hasAnyData
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getEmptyStateMessage() {
|
|
|
// 根据设备类型返回合适的空状态提示信息
|
|
|
switch (this.selectedNodeType) {
|
|
|
case 5:
|
|
|
return '该温度监测节点下暂无有效的温度传感器数据'
|
|
|
case 6:
|
|
|
return '该温湿度监测节点下暂无有效的温湿度传感器数据'
|
|
|
case 7:
|
|
|
return '该噪声监测节点下暂无有效的噪声传感器数据'
|
|
|
case 10:
|
|
|
return '该振动监测节点下暂无有效的振动传感器数据'
|
|
|
default:
|
|
|
return '该节点下暂无有效的传感器设备数据，请检查设备连接状态或选择其他节点'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getNodeTypeText(type) {
|
|
|
// 返回节点类型的中文描述
|
|
|
switch (type) {
|
|
|
case 5:
|
|
|
return '温度监测'
|
|
|
case 6:
|
|
|
return '温湿度监测'
|
|
|
case 7:
|
|
|
return '噪声监测'
|
|
|
case 10:
|
|
|
return '振动监测'
|
|
|
default:
|
|
|
return '监测设备'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getDeviceStatus(device) {
|
|
|
if (!this.hasData(device)) {
|
|
|
return 'offline'
|
|
|
}
|
|
|
|
|
|
// 根据数据值判断设备状态
|
|
|
// if (device.temperature && (device.temperature > 40 || device.temperature < -10)) {
|
|
|
// return 'error'
|
|
|
// }
|
|
|
// if (device.humidity && (device.humidity > 90 || device.humidity < 10)) {
|
|
|
// return 'warning'
|
|
|
// }
|
|
|
// if (device.noise && device.noise > 80) {
|
|
|
// return 'warning'
|
|
|
// }
|
|
|
// if (device.concentration && device.concentration > 10) {
|
|
|
// return 'error'
|
|
|
// }
|
|
|
|
|
|
return 'normal'
|
|
|
},
|
|
|
|
|
|
getStatusText(device) {
|
|
|
const status = this.getDeviceStatus(device)
|
|
|
const statusMap = {
|
|
|
'normal': '正常',
|
|
|
// 'warning': '警告',
|
|
|
// 'error': '异常',
|
|
|
'offline': '离线'
|
|
|
}
|
|
|
return statusMap[status] || '未知'
|
|
|
},
|
|
|
|
|
|
formatValue(value, unit) {
|
|
|
if (value === null || value === undefined) {
|
|
|
return `0.0 ${unit}`
|
|
|
}
|
|
|
return `${Number(value).toFixed(1)} ${unit}`
|
|
|
},
|
|
|
|
|
|
formatTime(time) {
|
|
|
if (!time) return '--'
|
|
|
// 使用原生Date对象格式化时间，避免moment.js依赖问题
|
|
|
try {
|
|
|
const date = new Date(time)
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
|
return `${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
} catch (error) {
|
|
|
console.error('时间格式化失败:', error)
|
|
|
return '--'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 保存WebSocket告警数据到数据库
|
|
|
async saveRealtimeAlarmData(alarmData) {
|
|
|
try {
|
|
|
// 构建符合EmsRecordAlarmData实体的数据列表
|
|
|
// 每个触发的告警规则对应一条EmsRecordAlarmData记录
|
|
|
const alarmDataList = []
|
|
|
|
|
|
if (!alarmData.alarmRules || alarmData.alarmRules.length === 0) {
|
|
|
console.warn('告警数据中没有告警规则')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 获取当前时间并格式化为后端期望的格式
|
|
|
const getCurrentTimeForBackend = () => {
|
|
|
const now = new Date()
|
|
|
const year = now.getFullYear()
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
|
const hours = String(now.getHours()).padStart(2, '0')
|
|
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
}
|
|
|
|
|
|
// 为每个触发的告警规则创建一条记录
|
|
|
for (const rule of alarmData.alarmRules) {
|
|
|
// 获取对应字段的实际数值
|
|
|
const actualValue = this.getActualValueFromDeviceParam(alarmData.deviceParam, rule.monitorField)
|
|
|
|
|
|
const alarmRecord = {
|
|
|
// 设备相关信息
|
|
|
monitorId: alarmData.monitorId,
|
|
|
collectTime: getCurrentTimeForBackend(), // 使用当前时间并格式化为后端期望格式
|
|
|
|
|
|
// 告警类型：根据规则的triggerRule设置（0=大于阈值，1=小于阈值）
|
|
|
alarmType: rule.triggerRule || 0,
|
|
|
|
|
|
// 告警状态：1=未处理
|
|
|
alarmStatus: 1,
|
|
|
|
|
|
// 告警数据：实际触发告警的数值
|
|
|
alarmData: actualValue ? String(actualValue) : '',
|
|
|
|
|
|
// 告警原因：使用字段名称
|
|
|
cause: this.getFieldName(rule.monitorField),
|
|
|
|
|
|
// 其他字段可以为空，后端会设置默认值
|
|
|
operationName: null,
|
|
|
operationTime: null,
|
|
|
notifyUser: null
|
|
|
}
|
|
|
|
|
|
alarmDataList.push(alarmRecord)
|
|
|
|
|
|
console.log('构建告警记录:', {
|
|
|
设备ID: alarmRecord.monitorId,
|
|
|
告警字段: alarmRecord.cause,
|
|
|
实际数值: alarmRecord.alarmData,
|
|
|
告警类型: alarmRecord.alarmType === 0 ? '大于阈值' : '小于阈值',
|
|
|
规则阈值: rule.triggerValue,
|
|
|
记录时间: alarmRecord.collectTime
|
|
|
})
|
|
|
}
|
|
|
|
|
|
if (alarmDataList.length === 0) {
|
|
|
console.warn('没有有效的告警记录可保存')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 发送到后端保存
|
|
|
const response = await saveWebSocketAlarmData(alarmDataList)
|
|
|
if (response.code === 200) {
|
|
|
console.log('告警数据保存成功:', response.msg)
|
|
|
// 告警数据保存成功，新的告警记录会通过WebSocket实时推送，无需手动刷新
|
|
|
// this.getAlarmDataList()
|
|
|
} else {
|
|
|
console.error('告警数据保存失败:', response.msg)
|
|
|
this.$message.error('告警数据保存失败: ' + response.msg)
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('保存告警数据异常:', error)
|
|
|
this.$message.error('保存告警数据异常')
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 从设备参数中获取指定字段的实际数值
|
|
|
getActualValueFromDeviceParam(deviceParam, monitorField) {
|
|
|
if (!deviceParam || monitorField === null || monitorField === undefined) {
|
|
|
return null
|
|
|
}
|
|
|
|
|
|
switch (monitorField) {
|
|
|
case 0: // 温度
|
|
|
return deviceParam.temperature
|
|
|
case 1: // 湿度
|
|
|
return deviceParam.humidity
|
|
|
case 2: // 振动-速度(mm/s)
|
|
|
return deviceParam.vibrationSpeed || deviceParam.VibrationSpeed
|
|
|
case 3: // 振动-位移(um)
|
|
|
return deviceParam.vibrationDisplacement || deviceParam.VibrationDisplacement
|
|
|
case 4: // 振动-加速度(g)
|
|
|
return deviceParam.vibrationAcceleration || deviceParam.VibrationAcceleration
|
|
|
case 5: // 振动-温度(℃)
|
|
|
return deviceParam.vibrationTemp || deviceParam.VibrationTemp
|
|
|
case 6: // 噪音
|
|
|
return deviceParam.noise
|
|
|
case 7: // 照度
|
|
|
return deviceParam.illuminance
|
|
|
case 8: // 气体浓度
|
|
|
return deviceParam.concentration
|
|
|
default:
|
|
|
console.warn('未知的监测字段:', monitorField)
|
|
|
return null
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 获取监测字段名称
|
|
|
getFieldName(fieldCode) {
|
|
|
const fieldMap = {
|
|
|
0: '温度',
|
|
|
1: '湿度',
|
|
|
2: '振动-速度(mm/s)',
|
|
|
3: '振动-位移(um)',
|
|
|
4: '振动-加速度(g)',
|
|
|
5: '振动-温度(℃)',
|
|
|
6: '噪音',
|
|
|
7: '照度',
|
|
|
8: '气体浓度'
|
|
|
}
|
|
|
return fieldMap[fieldCode] || '未知字段'
|
|
|
},
|
|
|
|
|
|
// 处理全局WebSocket设备数据
|
|
|
handleDeviceData(data) {
|
|
|
const deviceParam = data.deviceParam
|
|
|
if (!deviceParam || !deviceParam.monitorId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 如果当前选中了节点，只更新该节点下的设备数据
|
|
|
if (this.selectedNodeId !== null) {
|
|
|
this.updateDeviceDataInList(deviceParam)
|
|
|
} else {
|
|
|
// 如果没有选中节点，可以选择是否更新全局设备列表
|
|
|
console.log('收到设备数据但未选中节点:', deviceParam.monitorId)
|
|
|
}
|
|
|
|
|
|
// 如果有告警数据，更新告警统计
|
|
|
if (data.isFlag === 1 && data.alarmRules && data.alarmRules.length > 0) {
|
|
|
this.alarmDataTotalCount += data.alarmRules.length
|
|
|
console.log('实时更新告警统计，新增告警数量:', data.alarmRules.length, '当前总数:', this.alarmDataTotalCount)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 更新设备列表中的数据
|
|
|
updateDeviceDataInList(deviceParam) {
|
|
|
const index = this.deviceList.findIndex(device => device.monitorId === deviceParam.monitorId)
|
|
|
|
|
|
if (index !== -1) {
|
|
|
// 更新现有设备数据
|
|
|
const updatedDevice = {
|
|
|
...this.deviceList[index],
|
|
|
temperature: deviceParam.temperature,
|
|
|
humidity: deviceParam.humidity,
|
|
|
illuminance: deviceParam.illuminance,
|
|
|
noise: deviceParam.noise,
|
|
|
concentration: deviceParam.concentration,
|
|
|
vibrationSpeed: deviceParam.vibrationSpeed || deviceParam.VibrationSpeed,
|
|
|
vibrationDisplacement: deviceParam.vibrationDisplacement || deviceParam.VibrationDisplacement,
|
|
|
vibrationAcceleration: deviceParam.vibrationAcceleration || deviceParam.VibrationAcceleration,
|
|
|
vibrationTemp: deviceParam.vibrationTemp || deviceParam.VibrationTemp,
|
|
|
collectTime: deviceParam.collectTime,
|
|
|
recodeTime: deviceParam.recordTime
|
|
|
}
|
|
|
|
|
|
// 使用Vue.set确保响应式更新
|
|
|
this.$set(this.deviceList, index, updatedDevice)
|
|
|
console.log('更新设备数据:', deviceParam.monitorId)
|
|
|
} else {
|
|
|
console.log('设备不在当前节点列表中:', deviceParam.monitorId)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// WebSocket连接状态变化处理
|
|
|
onWebSocketConnected() {
|
|
|
console.log('Dashboard: WebSocket连接已建立')
|
|
|
this.$message.success('实时数据连接已建立')
|
|
|
},
|
|
|
|
|
|
onWebSocketDisconnected() {
|
|
|
console.log('Dashboard: WebSocket连接已断开')
|
|
|
this.$message.warning('实时数据连接已断开')
|
|
|
},
|
|
|
|
|
|
navigateToDeviceList() {
|
|
|
// 跳转到设备列表页面
|
|
|
this.$router.push('/ems/base/baseMonitorInfoIOTDevice/index')
|
|
|
},
|
|
|
|
|
|
navigateToAlarmRules() {
|
|
|
// 跳转到异常规则列表页面
|
|
|
this.$router.push('/ems/record/recordAlarmRule/index')
|
|
|
},
|
|
|
|
|
|
navigateToAlarmData() {
|
|
|
// 跳转到异常数据列表页面
|
|
|
this.$router.push('/ems/record/recordAlarmData/index')
|
|
|
},
|
|
|
|
|
|
// 判断设备是否属于当前选中的节点
|
|
|
isCurrentNodeDevice(device) {
|
|
|
// 优先通过code匹配（叶子节点的正确方式）
|
|
|
if (this.selectedNodeCode && device.monitorId === this.selectedNodeCode) {
|
|
|
return true
|
|
|
}
|
|
|
// 其次通过ID匹配
|
|
|
if (device.monitorId === this.selectedNodeId) {
|
|
|
return true
|
|
|
}
|
|
|
// 最后通过名称匹配
|
|
|
if (device.monitorName === this.selectedNodeName) {
|
|
|
return true
|
|
|
}
|
|
|
return false
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-container {
|
|
|
padding: 20px;
|
|
|
background-color: #f5f7fa;
|
|
|
//min-height: 100vh;
|
|
|
height: calc(100vh - 134px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
// 左侧设备树样式
|
|
|
.head-container {
|
|
|
background: white;
|
|
|
border-radius: 8px;
|
|
|
padding: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.el-tree {
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
.el-tree-node__content {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 2px;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-tree-node.is-current > .el-tree-node__content {
|
|
|
background-color: #ecf5ff;
|
|
|
color: #409eff;
|
|
|
}
|
|
|
|
|
|
.el-tree-node__expand-icon {
|
|
|
color: #c0c4cc;
|
|
|
|
|
|
&.is-leaf {
|
|
|
color: transparent;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 统计卡片区域
|
|
|
.stats-section {
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.stats-grid {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
min-width: 200px;
|
|
|
flex: 1;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
&.clickable {
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-3px);
|
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.stat-icon {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
border-radius: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 14px;
|
|
|
|
|
|
i {
|
|
|
font-size: 20px;
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.stat-content {
|
|
|
flex: 1;
|
|
|
|
|
|
.stat-number {
|
|
|
font-size: 24px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 14px;
|
|
|
color: #7f8c8d;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.total {
|
|
|
.stat-icon {
|
|
|
background: linear-gradient(135deg, #409eff, #66b1ff);
|
|
|
}
|
|
|
.stat-number {
|
|
|
color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.alarm-rule {
|
|
|
.stat-icon {
|
|
|
background: linear-gradient(135deg, #e6a23c, #f0c040);
|
|
|
}
|
|
|
.stat-number {
|
|
|
color: #e6a23c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.alarm-data {
|
|
|
.stat-icon {
|
|
|
background: linear-gradient(135deg, #f56c6c, #ff8080);
|
|
|
}
|
|
|
.stat-number {
|
|
|
color: #f56c6c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 设备监控数据区域
|
|
|
.monitoring-section {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.section-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
padding-bottom: 16px;
|
|
|
border-bottom: 1px solid #e9ecef;
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.section-actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
|
|
|
.selected-node {
|
|
|
font-size: 14px;
|
|
|
color: #409eff;
|
|
|
background: #ecf5ff;
|
|
|
padding: 4px 12px;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #d9ecff;
|
|
|
|
|
|
.node-type-info {
|
|
|
font-size: 12px;
|
|
|
color: #67c23a;
|
|
|
font-weight: 500;
|
|
|
margin-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.device-card {
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 10px;
|
|
|
padding: 16px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
transition: all 0.3s ease;
|
|
|
border-left: 4px solid #e9ecef;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
&.normal {
|
|
|
border-left-color: #67c23a;
|
|
|
}
|
|
|
|
|
|
&.warning {
|
|
|
border-left-color: #e6a23c;
|
|
|
}
|
|
|
|
|
|
&.error {
|
|
|
border-left-color: #f56c6c;
|
|
|
}
|
|
|
|
|
|
&.offline {
|
|
|
border-left-color: #909399;
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
.device-info {
|
|
|
flex: 1;
|
|
|
|
|
|
.device-title-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.device-name {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin: 0;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.node-type-badge {
|
|
|
font-size: 10px;
|
|
|
padding: 2px 6px;
|
|
|
border-radius: 10px;
|
|
|
font-weight: 500;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
&.current {
|
|
|
background: linear-gradient(135deg, #409eff, #66b1ff);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
&.child {
|
|
|
background: linear-gradient(135deg, #67c23a, #85ce61);
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-id {
|
|
|
font-size: 12px;
|
|
|
color: #7f8c8d;
|
|
|
background: white;
|
|
|
padding: 2px 8px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-status {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.status-indicator {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 6px;
|
|
|
|
|
|
&.normal {
|
|
|
background-color: #67c23a;
|
|
|
}
|
|
|
|
|
|
&.warning {
|
|
|
background-color: #e6a23c;
|
|
|
}
|
|
|
|
|
|
&.error {
|
|
|
background-color: #f56c6c;
|
|
|
}
|
|
|
|
|
|
&.offline {
|
|
|
background-color: #909399;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-text {
|
|
|
font-size: 12px;
|
|
|
color: #7f8c8d;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-data {
|
|
|
.data-row {
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.data-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 6px 0;
|
|
|
|
|
|
.data-icon {
|
|
|
width: 20px;
|
|
|
color: #409eff;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.data-label {
|
|
|
flex: 1;
|
|
|
font-size: 14px;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
.data-value {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.no-data {
|
|
|
text-align: center;
|
|
|
padding: 20px;
|
|
|
color: #909399;
|
|
|
|
|
|
i {
|
|
|
font-size: 24px;
|
|
|
margin-bottom: 8px;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-footer {
|
|
|
margin-top: 12px;
|
|
|
padding-top: 12px;
|
|
|
border-top: 1px solid #e9ecef;
|
|
|
|
|
|
.update-time {
|
|
|
font-size: 11px;
|
|
|
color: #7f8c8d;
|
|
|
|
|
|
i {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
|
|
text-align: center;
|
|
|
padding: 60px 20px;
|
|
|
color: #909399;
|
|
|
|
|
|
i {
|
|
|
font-size: 48px;
|
|
|
margin-bottom: 16px;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
font-size: 16px;
|
|
|
margin: 0 0 8px 0;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
.empty-tip {
|
|
|
font-size: 14px;
|
|
|
color: #909399;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 响应式设计
|
|
|
@media (max-width: 768px) {
|
|
|
.app-container {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
.stats-grid {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.device-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
gap: 12px;
|
|
|
|
|
|
.section-actions {
|
|
|
width: 100%;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|