成功添加哈士奇业务以及白名单功能创建
This commit is contained in:
YueL1331
@ -27,9 +27,9 @@
|
||||
<div class="status-summary">
|
||||
<el-tag color="#409EFF" effect="dark" class="legend-tag">修</el-tag>
|
||||
<el-tag color="#F56C6C" effect="dark" class="legend-tag">离线 / 严重滞后</el-tag>
|
||||
<el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后 (>24h)</el-tag>
|
||||
<el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后 / 流量超标</el-tag>
|
||||
<el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">数据异常 / 昨日</el-tag>
|
||||
<el-tag color="#67C23A" effect="dark" class="legend-tag">正常 (当天)</el-tag>
|
||||
<el-tag color="#67C23A" effect="dark" class="legend-tag">正常</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
@ -122,16 +122,30 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="使用量" width="120" prop="trafficNum" sortable>
|
||||
<el-table-column label="本月流量" width="130" prop="trafficNum" sortable>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.isBound && row.trafficNum >= 0" style="font-weight: 600; color: #409EFF;">{{ row.trafficNum }} M</span>
|
||||
<div v-if="row.isBound">
|
||||
<span :style="{ fontWeight: '600', color: row.trafficWarning ? '#E6A23C' : '#606266' }">
|
||||
{{ row.trafficNum }} M
|
||||
</span>
|
||||
<el-tooltip v-if="row.trafficWarning" content="流量超标 (>=500M)" placement="top">
|
||||
<el-icon color="#E6A23C" style="margin-left: 4px; cursor: help;"><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<span v-else style="color: #ccc;">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="截止时间" width="150">
|
||||
<el-table-column label="服务截止" width="140">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.isBound && row.stopDate" style="font-size: 13px;">{{ row.stopDate }}</span>
|
||||
<div v-if="row.isBound && row.stopDate">
|
||||
<span :style="{ color: row.expireWarning ? '#E6A23C' : '#606266', fontWeight: row.expireWarning ? 'bold' : 'normal' }">
|
||||
{{ row.stopDate }}
|
||||
</span>
|
||||
<el-tooltip v-if="row.expireWarning" content="即将过期 (<30天)" placement="top">
|
||||
<el-icon color="#E6A23C" style="margin-left: 4px; cursor: help;"><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<span v-else style="color: #ccc;">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -139,7 +153,7 @@
|
||||
<el-table-column label="数据时效与质量" width="260" prop="sortWeight" sortable>
|
||||
<template #default="{ row }">
|
||||
<div style="font-size: 13px; display:flex; align-items:center; gap:5px; color: #606266; margin-bottom: 4px;">
|
||||
<el-icon><Clock /></el-icon> {{ row.latest_time || 'N/A' }}
|
||||
<el-icon><Clock /></el-icon> {{ row.latest_time || '尚未同步' }}
|
||||
</div>
|
||||
|
||||
<div v-if="!row.is_maintaining && !row.is_hidden">
|
||||
@ -153,17 +167,17 @@
|
||||
⚠️ {{ row.statusReason }}
|
||||
</div>
|
||||
<div v-else class="status-text success-text">
|
||||
✅ 时效最新
|
||||
✅ 状态正常
|
||||
</div>
|
||||
|
||||
<div v-if="row.statusType !== 'error' && row.statusType !== 'warning'" style="margin-top: 4px;">
|
||||
<div v-if="row.statusType !== 'error'" style="margin-top: 4px;">
|
||||
<el-tag v-if="row.data_quality === 'error'" type="danger" size="small" effect="dark">
|
||||
<el-icon><Warning /></el-icon> 数据严重异常
|
||||
</el-tag>
|
||||
<el-tag v-else-if="row.data_quality === 'warning'" type="warning" size="small" effect="dark">
|
||||
<el-icon><WarningFilled /></el-icon> 数值警告
|
||||
</el-tag>
|
||||
<el-tag v-else type="success" size="small" effect="plain">
|
||||
<el-tag v-else-if="row.statusType !== 'warning' && row.statusType !== 'slight-warning'" type="success" size="small" effect="plain">
|
||||
数值正常
|
||||
</el-tag>
|
||||
</div>
|
||||
@ -275,8 +289,9 @@ const fetchData = async () => {
|
||||
const isHidden = item.is_hidden === true || item.is_hidden === 1
|
||||
const isBound = !!item.isBound
|
||||
const isOrphanIoT = (item.source === 'iot_card')
|
||||
const isWhitelist = !!item.is_whitelist
|
||||
|
||||
// 1. 数据时效
|
||||
// 1. 数据时效处理
|
||||
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
|
||||
let timeStr = item.latest_time
|
||||
|
||||
@ -292,20 +307,51 @@ const fetchData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 状态判定与排序 (sortWeight: 越大越靠前)
|
||||
// 2. [恢复旧逻辑] 解析监测数值 (用于排序，虽然不显示但保留逻辑以免报错)
|
||||
let currentValueNum = 0
|
||||
if (item.current_value) {
|
||||
// 尝试提取数字，例如 "1024.5 M" -> 1024.5
|
||||
const match = String(item.current_value).match(/(\d+(\.\d+)?)/)
|
||||
if (match) {
|
||||
currentValueNum = parseFloat(match[0])
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 流量与过期计算
|
||||
let trafficNum = 0
|
||||
let rawTraffic = item.usedTraffic
|
||||
if ((rawTraffic === undefined || rawTraffic === null) && item.json_data) {
|
||||
try {
|
||||
const j = JSON.parse(item.json_data)
|
||||
rawTraffic = j.usedTraffic
|
||||
} catch(e) {}
|
||||
}
|
||||
if (rawTraffic) {
|
||||
trafficNum = parseFloat(rawTraffic)
|
||||
if (isNaN(trafficNum)) trafficNum = 0
|
||||
}
|
||||
|
||||
const trafficWarning = (trafficNum >= 500 && !isWhitelist)
|
||||
let expireWarning = false
|
||||
if (item.stopDate && item.stopDate !== 'N/A') {
|
||||
const stopD = new Date(item.stopDate.replace(/_/g, '-'))
|
||||
if (!isNaN(stopD.getTime())) {
|
||||
const daysLeft = (stopD - now) / (1000 * 3600 * 24)
|
||||
if (daysLeft < 30) expireWarning = true
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 状态判定与权重排序 (融合逻辑)
|
||||
let statusColor = '#67C23A', statusLabel = '正常', statusType = 'normal', statusLabelColor = '#fff'
|
||||
let statusReason = ''
|
||||
let sortWeight = diffHours
|
||||
let sortWeight = diffHours // 基础权重为滞后小时数
|
||||
|
||||
if (item.is_maintaining) {
|
||||
statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
|
||||
// [修复] 维修中置顶：使用最大安全整数
|
||||
sortWeight = Number.MAX_SAFE_INTEGER;
|
||||
} else if (!validTime) {
|
||||
statusLabel = '未知'; statusColor = '#909399'; statusType = 'slight-warning'; statusReason = '从未同步';
|
||||
sortWeight = 90000000;
|
||||
} else if (item.status === 'offline') {
|
||||
statusLabel = '离线'; statusColor = '#F56C6C'; statusType = 'error'; statusReason = '设备离线';
|
||||
} else if (!validTime || item.status === 'offline') {
|
||||
statusLabel = '离线'; statusColor = '#F56C6C'; statusType = 'error';
|
||||
statusReason = validTime ? '设备离线' : '暂无数据(离线)';
|
||||
sortWeight = 80000000;
|
||||
} else if (diffDays > 7) {
|
||||
statusLabel = '严重滞后'; statusColor = '#F56C6C'; statusType = 'error';
|
||||
@ -313,6 +359,14 @@ const fetchData = async () => {
|
||||
} else if (diffHours > 24) {
|
||||
statusLabel = '滞后'; statusColor = '#E6A23C'; statusType = 'warning';
|
||||
statusReason = `滞后 ${Math.floor(diffDays)} 天`;
|
||||
} else if (trafficWarning) {
|
||||
statusLabel = '流量警告'; statusColor = '#E6A23C'; statusType = 'warning';
|
||||
statusReason = `流量超标`;
|
||||
sortWeight = 500;
|
||||
} else if (expireWarning) {
|
||||
statusLabel = '即将过期'; statusColor = '#E6A23C'; statusType = 'warning';
|
||||
statusReason = `卡片即将过期`;
|
||||
sortWeight = 400;
|
||||
} else if (!isToday) {
|
||||
statusLabel = '昨日数据'; statusColor = '#FAC858'; statusType = 'slight-warning'; statusLabelColor = '#333';
|
||||
statusReason = '非今日数据';
|
||||
@ -320,32 +374,22 @@ const fetchData = async () => {
|
||||
sortWeight = 0;
|
||||
}
|
||||
|
||||
// 3. 流量值解析 (防御性：确保是数字)
|
||||
let trafficNum = 0
|
||||
// 尝试直接取
|
||||
if (item.usedTraffic) {
|
||||
trafficNum = parseFloat(item.usedTraffic)
|
||||
} else if (item.json_data) {
|
||||
// 尝试从 json 中取
|
||||
try {
|
||||
const j = JSON.parse(item.json_data)
|
||||
if (j.usedTraffic) trafficNum = parseFloat(j.usedTraffic)
|
||||
} catch(e) {}
|
||||
}
|
||||
if (isNaN(trafficNum)) trafficNum = 0
|
||||
|
||||
return {
|
||||
...item,
|
||||
is_hidden: isHidden,
|
||||
isOrphanIoT,
|
||||
isBound,
|
||||
isWhitelist,
|
||||
diffDays, diffHours, sortWeight, isToday,
|
||||
statusColor, statusLabel, statusType, statusLabelColor, statusReason,
|
||||
isEditingSite: false, tempSite: '',
|
||||
data_quality: item.data_quality || 'ok',
|
||||
trafficNum
|
||||
currentValueNum,
|
||||
trafficNum,
|
||||
trafficWarning,
|
||||
expireWarning
|
||||
}
|
||||
}).sort((a, b) => b.sortWeight - a.sortWeight) // 按权重降序
|
||||
}).sort((a, b) => b.sortWeight - a.sortWeight)
|
||||
|
||||
lastCheckTime.value = new Date().toLocaleString()
|
||||
} catch (e) {
|
||||
@ -369,20 +413,21 @@ const summary = computed(() => {
|
||||
|
||||
const filteredData = computed(() => {
|
||||
return rawData.value.filter(item => {
|
||||
// 隐藏孤儿卡
|
||||
if (item.isOrphanIoT) return false
|
||||
|
||||
if (filters.status === 'hidden') return item.is_hidden
|
||||
if (item.is_hidden) return false
|
||||
|
||||
if (filters.status === 'abnormal') return ['error', 'warning', 'slight-warning'].includes(item.statusType)
|
||||
if (filters.status === 'data_error') return ['error', 'warning'].includes(item.data_quality)
|
||||
return true
|
||||
}).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||
})
|
||||
|
||||
// === [重要修复] 卡池总用量计算 ===
|
||||
// === 卡池总用量 ===
|
||||
const totalUsageSum = computed(() => {
|
||||
return rawData.value.reduce((sum, item) => {
|
||||
// 1. 只统计 source='iot_card' (代表SIM卡)
|
||||
// 2. 累加 item.trafficNum (这是我们在 fetchData 里解析好的数字)
|
||||
if (item.source === 'iot_card') {
|
||||
return sum + (item.trafficNum || 0)
|
||||
}
|
||||
@ -390,7 +435,7 @@ const totalUsageSum = computed(() => {
|
||||
}, 0)
|
||||
})
|
||||
|
||||
// ... 交互函数保持不变 ...
|
||||
// === 交互函数 ===
|
||||
const handleAddDeviceSubmit = async () => { if (!newDeviceForm.name) return; await axios.post(`${API_BASE}/api/add_device`, newDeviceForm); showAddDialog.value=false; fetchData() }
|
||||
const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value) dataMonitorRef.value.open(row) }
|
||||
const openLogCenter = (row) => { if (maintenanceLogsRef.value) maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null) }
|
||||
@ -402,20 +447,24 @@ const handleMaintenanceBeforeChange = (row) => { return new Promise(r => { axios
|
||||
const toggleHidden = async (row, val) => { await axios.post(`${API_BASE}/api/toggle_hidden`, {name:row.name, is_hidden:val}); row.is_hidden=val; fetchData() }
|
||||
const handleLogout = () => { localStorage.removeItem('token'); router.push('/') }
|
||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||
|
||||
// 行高亮逻辑 (融合了数据异常的高亮)
|
||||
const tableRowClassName = ({ row }) => {
|
||||
if (row.is_hidden) return 'hidden-row'
|
||||
if (row.data_quality === 'error') return 'data-error-row' // 优先显示数值严重错误
|
||||
if (row.statusType === 'error') return 'error-row'
|
||||
if (row.data_quality === 'warning') return 'data-warning-row' // 数值警告
|
||||
if (row.statusType === 'warning') return 'warning-row'
|
||||
if (row.statusType === 'maintenance') return 'maintenance-row'
|
||||
return ''
|
||||
}
|
||||
|
||||
const updateDimensions = () => { windowHeight.value = window.innerHeight; windowWidth.value = window.innerWidth }
|
||||
onMounted(() => { fetchData(); window.addEventListener('resize', updateDimensions) })
|
||||
onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式部分保持原样 */
|
||||
.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
|
||||
.main-card { border-radius: 8px; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
||||
@ -450,8 +499,10 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
||||
:deep(.warning-row) { background-color: #fdf6ec !important; }
|
||||
:deep(.maintenance-row) { background-color: #f0f9ff !important; }
|
||||
:deep(.hidden-row) { background-color: #f4f4f5 !important; color: #909399; }
|
||||
/* 增加原有代码的数据异常背景色 */
|
||||
:deep(.data-error-row) { background-color: #ffe6e6 !important; }
|
||||
:deep(.data-warning-row) { background-color: #fffbe6 !important; }
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.dashboard-container { padding: 5px; }
|
||||
.left-panel, .header-actions { width: 100%; justify-content: space-between; margin-bottom: 5px; }
|
||||
|
||||
Reference in New Issue
Block a user