duxingchen/ZDXX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加哈士奇sim卡业务

Browse Source
This commit is contained in:
YueL1331
2026-01-13 14:50:23 +08:00
parent e2333ea9b8
commit fe21532741
7 changed files with 1153 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
zhandianxinxi/光谱数据监控/src/App.vue
View File

@ -5,7 +5,7 @@
</main>
<footer class="version-footer">
2.1版本 © 2026 Device Monitor
2.2版本 © 2026 Device Monitor
</footer>
</div>
</template>

281
zhandianxinxi/光谱数据监控/src/views/Dashboard.vue
View File

@ -14,7 +14,7 @@
<div class="header-actions">
<el-button type="primary" plain icon="Plus" @click="showAddDialog = true">新增</el-button>
<el-button type="primary" plain icon="Link" @click="openIoTBinder">卡绑定</el-button>
<el-button type="info" plain icon="Document" @click="openLogCenter(null)">日志</el-button>
<el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">检测</el-button>
<el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
@ -26,17 +26,16 @@
<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="#F56C6C" effect="dark" class="legend-tag">离线 / 严重滞后</el-tag>
<el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后 (>24h)</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="#FAC858" effect="dark" class="legend-tag" style="color: #333">数据异常 / 昨日</el-tag>
<el-tag color="#67C23A" effect="dark" class="legend-tag">正常 (当天)</el-tag>
</div>
<div class="toolbar">
<div class="filter-section">
<el-radio-group v-model="filters.status" size="default">
<el-radio-button label="all">全部({{ summary.totalCount }})</el-radio-button>
<el-radio-button label="abnormal" class="red-radio">
状态异常({{ summary.errorCount + summary.warningCount }})
</el-radio-button>
@ -55,6 +54,12 @@
prefix-icon="Search"
clearable
/>
<div class="total-usage-tag">
<el-icon><Odometer /></el-icon>
<span class="label">卡池总用量:</span>
<span class="value">{{ totalUsageSum.toFixed(2) }} M</span>
</div>
</div>
</div>
@ -62,10 +67,10 @@
:data="filteredData"
border
v-loading="loading"
style="width: 100%; min-width: 950px;"
style="width: 100%; min-width: 1250px;"
:row-class-name="tableRowClassName"
:height="tableHeight"
:default-sort="{ prop: 'sortHours', order: 'descending' }"
:default-sort="{ prop: 'sortWeight', order: 'descending' }"
>
<el-table-column label="状态" width="100" align="center" fixed="left">
<template #default="{ row }">
@ -82,7 +87,7 @@
</template>
</el-table-column>
<el-table-column label="设备名称 (点击看图)" min-width="200" show-overflow-tooltip>
<el-table-column label="设备名称" min-width="180" show-overflow-tooltip>
<template #default="{ row }">
<div
class="device-name-wrapper"
@ -93,11 +98,12 @@
{{ formatDisplayName(row.name) }}
</span>
<el-icon v-if="!row.is_hidden" class="link-icon"><DataLine /></el-icon>
<el-tag v-if="row.isBound" size="small" type="info" effect="plain" style="margin-left:5px; height: 18px; line-height: 16px; padding:0 4px;">卡</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="安装地点" min-width="160">
<el-table-column label="安装地点" min-width="140">
<template #default="{ row }">
<div v-if="row.isEditingSite" class="editing-cell">
<el-input
@ -116,35 +122,41 @@
</template>
</el-table-column>
<el-table-column label="数据时效与质量" width="240" prop="sortHours" sortable>
<el-table-column label="使用量" width="120" prop="trafficNum" sortable>
<template #default="{ row }">
<div style="font-size: 13px; display:flex; align-items:center; gap:5px;">
<el-icon><Clock /></el-icon> {{ row.latest_time || '--' }}
<span v-if="row.isBound && row.trafficNum >= 0" style="font-weight: 600; color: #409EFF;">{{ row.trafficNum }} M</span>
<span v-else style="color: #ccc;">--</span>
</template>
</el-table-column>
<el-table-column label="截止时间" width="150">
<template #default="{ row }">
<span v-if="row.isBound && row.stopDate" style="font-size: 13px;">{{ row.stopDate }}</span>
<span v-else style="color: #ccc;">--</span>
</template>
</el-table-column>
<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' }}
</div>
<div v-if="!row.is_maintaining && !row.is_hidden">
<div v-if="row.status === 'offline' || row.status === '已离线'" class="status-text error-text">
⚠️ 设备已离线
<div v-if="row.statusType === 'error'" class="status-text error-text">
⚠️ {{ row.statusReason }}
</div>
<div v-else-if="row.diffDays > 7" class="status-text error-text">
⚠️ 严重滞后 {{ Math.floor(row.diffDays) }} 天
<div v-else-if="row.statusType === 'warning'" class="status-text warning-text">
⚠️ {{ row.statusReason }}
</div>
<div v-else-if="row.diffHours > 24" class="status-text warning-text">
⚠️ 滞后 {{ Math.floor(row.diffDays) }} 天
<div v-else-if="row.statusType === 'slight-warning'" class="status-text slight-warning-text">
⚠️ {{ row.statusReason }}
</div>
<div v-else-if="!row.isToday" class="status-text slight-warning-text">
⚠️ 昨日数据
</div>
<div v-else class="status-text success-text">
✅ 时效最新
</div>
<div v-if="row.status !== 'offline' && row.status !== '已离线'" style="margin-top: 4px;">
<div v-if="row.statusType !== 'error' && row.statusType !== 'warning'" 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>
@ -155,7 +167,6 @@
数值正常
</el-tag>
</div>
</div>
<div v-else-if="row.is_maintaining" class="status-text maintenance-text">🛠️ 维护中</div>
@ -192,6 +203,7 @@
<DataMonitor ref="dataMonitorRef" />
<MaintenanceLogs ref="maintenanceLogsRef" />
<IoTDeviceBinder ref="iotBinderRef" @update-success="fetchData" />
<el-dialog v-model="showAddDialog" title="手动添加设备" width="400px" align-center>
<el-form :model="newDeviceForm" label-width="80px">
@ -220,10 +232,11 @@ import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'v
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton, Warning, WarningFilled, Plus } from '@element-plus/icons-vue'
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton, Warning, WarningFilled, Plus, Odometer, Link } from '@element-plus/icons-vue'
import DataMonitor from './DataMonitor.vue'
import MaintenanceLogs from './MaintenanceLogs.vue'
import IoTDeviceBinder from './IoTDeviceBinder.vue'
const router = useRouter()
const loading = ref(false)
@ -241,27 +254,16 @@ const tableHeight = computed(() => {
const filters = reactive({ status: 'all', keyword: '' })
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
const dataMonitorRef = ref(null)
const maintenanceLogsRef = ref(null)
const iotBinderRef = ref(null)
// === 添加设备相关变量 ===
const showAddDialog = ref(false)
const isAdding = ref(false)
const newDeviceForm = reactive({ name: '', site: '' })
// === 统计逻辑 (修改：增加了 totalCount) ===
const summary = computed(() => {
const active = rawData.value.filter(r => !r.is_hidden)
return {
totalCount: active.length, // [新增] 统计所有非隐藏设备数量
errorCount: active.filter(r => r.statusType === 'error').length,
warningCount: active.filter(r => r.statusType === 'warning').length,
hiddenCount: rawData.value.filter(r => r.is_hidden).length,
dataErrorCount: active.filter(r => r.data_quality === 'error' || r.data_quality === 'warning').length
}
})
// === 数据获取逻辑 ===
// === 核心数据处理逻辑 ===
const fetchData = async () => {
loading.value = true
try {
@ -271,12 +273,16 @@ const fetchData = async () => {
rawData.value = backendList.map(item => {
const isHidden = item.is_hidden === true || item.is_hidden === 1
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
const isBound = !!item.isBound
const isOrphanIoT = (item.source === 'iot_card')
// === 1. 时间计算逻辑 ===
if (item.latest_time && item.latest_time !== 'N/A') {
const cleanDateStr = item.latest_time.toString().replace(/_/g, '-')
const d = new Date(cleanDateStr)
// 1. 数据时效
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
let timeStr = item.latest_time
if (timeStr && timeStr !== 'N/A') {
const cleanTime = timeStr.toString().replace(/_/g, '-')
const d = new Date(cleanTime)
if (!isNaN(d.getTime())) {
validTime = true
isToday = d.toDateString() === now.toDateString()
@ -286,137 +292,119 @@ const fetchData = async () => {
}
}
// === 2. 排序权重计算 ===
let sortHours = diffHours
if (item.is_maintaining) sortHours = Number.MAX_SAFE_INTEGER
else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000
else if (!validTime) sortHours = 500000000
// === 3. 状态分类逻辑 ===
// 2. 状态判定与排序 (sortWeight: 越大越靠前)
let statusColor = '#67C23A', statusLabel = '正常', statusType = 'normal', statusLabelColor = '#fff'
let statusReason = ''
let sortWeight = diffHours
if (item.is_maintaining) {
statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
} else if ((item.status === 'offline' || item.status === '已离线')) {
statusLabel = '离线'; statusColor = '#F56C6C'; statusType = 'error';
} else if (!validTime || diffDays > 7) {
// [修复] 维修中置顶：使用最大安全整数
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 = '设备离线';
sortWeight = 80000000;
} else if (diffDays > 7) {
statusLabel = '严重滞后'; statusColor = '#F56C6C'; statusType = 'error';
statusReason = `严重滞后 ${Math.floor(diffDays)} 天`;
} else if (diffHours > 24) {
statusLabel = '滞后'; statusColor = '#E6A23C'; statusType = 'warning';
statusReason = `滞后 ${Math.floor(diffDays)} 天`;
} else if (!isToday) {
statusLabel = '昨日数据'; statusColor = '#FAC858'; statusType = 'slight-warning'; statusLabelColor = '#333';
statusReason = '非今日数据';
} else {
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,
diffDays, diffHours, sortHours, isToday,
statusColor, statusLabel, statusType, statusLabelColor,
isOrphanIoT,
isBound,
diffDays, diffHours, sortWeight, isToday,
statusColor, statusLabel, statusType, statusLabelColor, statusReason,
isEditingSite: false, tempSite: '',
data_quality: item.data_quality || 'ok'
data_quality: item.data_quality || 'ok',
trafficNum
}
}).sort((a, b) => b.sortHours - a.sortHours)
}).sort((a, b) => b.sortWeight - a.sortWeight) // 按权重降序
lastCheckTime.value = new Date().toLocaleString()
} catch (e) {
ElMessage.error('获取数据失败')
console.error(e)
} finally {
loading.value = false
}
}
// === 筛选逻辑 ===
const summary = computed(() => {
const active = rawData.value.filter(r => !r.is_hidden && !r.isOrphanIoT)
return {
totalCount: active.length,
errorCount: active.filter(r => r.statusType === 'error').length,
warningCount: active.filter(r => r.statusType === 'warning').length,
hiddenCount: rawData.value.filter(r => r.is_hidden).length,
dataErrorCount: active.filter(r => r.data_quality === 'error' || r.data_quality === 'warning').length
}
})
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 (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
}
if (filters.status === 'data_error') {
return (item.data_quality === 'error' || item.data_quality === 'warning')
}
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 handleAddDeviceSubmit = async () => {
if (!newDeviceForm.name) {
ElMessage.warning('请填写设备名称')
return
}
isAdding.value = true
try {
const res = await axios.post(`${API_BASE}/api/add_device`, {
name: newDeviceForm.name,
site: newDeviceForm.site
})
ElMessage.success(res.data.message)
showAddDialog.value = false
// === [重要修复] 卡池总用量计算 ===
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)
}
return sum
}, 0)
})
// 清空表单
newDeviceForm.name = ''
newDeviceForm.site = ''
// 刷新列表
fetchData()
} catch (error) {
const msg = error.response?.data?.message || '添加失败'
ElMessage.error(msg)
} finally {
isAdding.value = false
}
}
// === 辅助功能函数 ===
// ... 交互函数保持不变 ...
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) }
const runManualMonitor = async () => {
runningTask.value = true
try {
const res = await axios.post(`${API_BASE}/api/run_monitor`)
ElMessage.success(res.data.message || '任务启动')
setTimeout(() => fetchData(), 3000)
} catch (e) { ElMessage.warning('请求频繁') }
finally { setTimeout(() => { runningTask.value = false }, 1000) }
}
const handleEditSite = (row) => {
row.tempSite = row.install_site; row.isEditingSite = true
nextTick(() => { const inputs = document.querySelectorAll('.site-input-inner input'); if(inputs.length) inputs[inputs.length-1].focus() })
}
const saveSite = async (row) => {
if (!row.isEditingSite) return
const oldVal = row.install_site; row.install_site = row.tempSite; row.isEditingSite = false
if (oldVal === row.tempSite) return
try { await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite }); ElMessage.success('已更新') }
catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
}
const handleMaintenanceBeforeChange = (row) => {
return new Promise((resolve) => {
const newVal = !row.is_maintaining
axios.post(`${API_BASE}/api/toggle_maintenance`, { name: row.name, is_maintaining: newVal })
.then(() => { row.is_maintaining = newVal; fetchData(); resolve(true) })
.catch(() => { resolve(false) })
})
}
const toggleHidden = async (row, val) => {
try { await axios.post(`${API_BASE}/api/toggle_hidden`, { name: row.name, is_hidden: val }); row.is_hidden = val; fetchData(); }
catch (e) { ElMessage.error('操作失败') }
}
const handleLogout = () => {
ElMessageBox.confirm('确定退出?', '提示', { type: 'warning' }).then(() => { localStorage.removeItem('token'); router.push('/'); }).catch(() => {})
}
const openIoTBinder = () => { if (iotBinderRef.value) iotBinderRef.value.open() }
const runManualMonitor = async () => { runningTask.value=true; await axios.post(`${API_BASE}/api/run_monitor`); setTimeout(()=>fetchData(), 3000); setTimeout(()=>runningTask.value=false, 1000) }
const handleEditSite = (row) => { row.tempSite = row.install_site; row.isEditingSite = true; nextTick(() => document.querySelector('.site-input-inner input')?.focus()) }
const saveSite = async (row) => { if(!row.isEditingSite)return; row.isEditingSite=false; await axios.post(`${API_BASE}/api/update_site`, {name:row.name, site:row.tempSite}); row.install_site=row.tempSite }
const handleMaintenanceBeforeChange = (row) => { return new Promise(r => { axios.post(`${API_BASE}/api/toggle_maintenance`, {name:row.name, is_maintaining:!row.is_maintaining}).then(() => {row.is_maintaining=!row.is_maintaining; fetchData(); r(true)}).catch(()=>r(false)) }) }
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 ''
@ -427,6 +415,7 @@ 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; }
@ -438,38 +427,31 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
.toolbar { background: #fff; padding: 10px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #e4e7ed; }
.filter-section { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-input { width: 220px; }
/* Radio 颜色 */
:deep(.red-radio.is-active .el-radio-button__inner) { background-color: #F56C6C; border-color: #F56C6C; box-shadow: -1px 0 0 0 #F56C6C; }
:deep(.yellow-radio.is-active .el-radio-button__inner) { background-color: #E6A23C; border-color: #E6A23C; box-shadow: -1px 0 0 0 #E6A23C; }
:deep(.gray-radio.is-active .el-radio-button__inner) { background-color: #909399; border-color: #909399; box-shadow: -1px 0 0 0 #909399; }
:deep(.red-radio .el-radio-button__inner),
:deep(.yellow-radio .el-radio-button__inner),
:deep(.gray-radio .el-radio-button__inner) { color: #606266; }
:deep(.red-radio .el-radio-button__inner), :deep(.yellow-radio .el-radio-button__inner), :deep(.gray-radio .el-radio-button__inner) { color: #606266; }
.total-usage-tag { display: flex; align-items: center; gap: 5px; background: #f0f9ff; border: 1px solid #cce9ff; padding: 5px 12px; border-radius: 4px; color: #409EFF; margin-left: 5px; }
.total-usage-tag .label { font-size: 13px; font-weight: bold; }
.total-usage-tag .value { font-size: 14px; font-weight: 800; }
.device-name-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.device-name { font-weight: bold; font-size: 14px; color: #303133; }
.device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
.text-deleted { text-decoration: line-through; color: #999; }
.status-text { font-size: 12px; margin-top: 4px; font-weight: bold; }
.error-text { color: #F56C6C; }
.warning-text { color: #E6A23C; }
.success-text { color: #67C23A; }
.slight-warning-text { color: #E6A23C; }
.maintenance-text { color: #409EFF; }
.display-cell { cursor: pointer; padding: 4px 0; display: flex; justify-content: space-between; }
.edit-icon { color: #409EFF; }
/* 表格行背景色 */
:deep(.error-row) { background-color: #fef0f0 !important; }
: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; }
@ -478,5 +460,6 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
.el-radio-group { width: 100%; display: flex; }
.el-radio-button { flex: 1; }
.search-input { width: 100%; margin-top: 5px; }
.total-usage-tag { width: 100%; justify-content: center; margin: 5px 0 0 0; }
}
</style>

389
zhandianxinxi/光谱数据监控/src/views/IoTDeviceBinder.vue Normal file
View File

@ -0,0 +1,389 @@
<template>
<el-config-provider :locale="zhCn">
<el-dialog
v-model="visible"
title="🔗 IoT 卡片管理与绑定"
width="950px"
top="8vh"
destroy-on-close
append-to-body
@close="handleClose"
>
<div class="binder-container">
<div class="tips-alert">
<el-alert
title="功能说明"
type="info"
show-icon
:closable="false"
>
<template #default>
<div>1. 此处展示所有 IoT 卡片 (包括已绑定和未绑定的)。</div>
<div>2. <b>绑定要求：</b> 目标设备必须是系统中已存在的设备，不能随意输入不存在的名称。</div>
<div>3. 绑定后，该设备的流量数据将由对应的 ICCID 卡片提供。</div>
</template>
</el-alert>
</div>
<div class="toolbar">
<el-radio-group v-model="filterStatus" @change="filterList" style="margin-right: 15px;">
<el-radio-button label="all">全部卡片</el-radio-button>
<el-radio-button label="unbound">待绑定 (孤儿卡)</el-radio-button>
<el-radio-button label="bound">已绑定</el-radio-button>
</el-radio-group>
<el-input
v-model="keyword"
placeholder="搜索 ICCID 或 设备名..."
style="width: 250px"
clearable
@input="filterList"
>
<template #prefix><el-icon><Search /></el-icon></template>
</el-input>
<el-button type="primary" plain icon="Refresh" @click="fetchIoTDevices" style="margin-left: auto;">刷新数据</el-button>
</div>
<el-table
:data="displayList"
border
stripe
v-loading="loading"
height="500"
style="width: 100%;"
>
<el-table-column label="ICCID (卡号)" prop="iccid" width="240" sortable>
<template #default="{ row }">
<span class="iccid-text">{{ row.iccid }}</span>
<el-tag v-if="row.tag" size="small" type="info" style="margin-left:5px">{{ row.tag }}</el-tag>
</template>
</el-table-column>
<el-table-column label="关联设备状态" min-width="320">
<template #default="{ row }">
<div v-if="row.isEditing" class="edit-cell">
<el-autocomplete
v-model="row.targetDeviceName"
:fetch-suggestions="querySearchDevice"
placeholder="请输入并选择设备..."
size="small"
style="width: 200px;"
@select="handleSelectDevice"
@keyup.enter="saveBinding(row)"
ref="nameInputRef"
:trigger-on-focus="true"
clearable
>
<template #default="{ item }">
<div class="suggestion-item">
<span class="device-name-highlight">{{ item.value }}</span>
<span class="suggestion-site">{{ item.site }}</span>
</div>
</template>
</el-autocomplete>
<el-button type="success" size="small" icon="Check" circle @click="saveBinding(row)" :loading="row.saving" title="确认绑定" />
<el-button type="info" size="small" icon="Close" circle @click="cancelEdit(row)" title="取消" />
</div>
<div v-else-if="row.boundDeviceName" class="bound-cell">
<el-tag type="success" effect="plain" class="bound-tag">
<el-icon><Link /></el-icon> 已关联: {{ row.boundDeviceName }}
</el-tag>
<el-button type="primary" link size="small" icon="Edit" @click="startEdit(row)">修改</el-button>
</div>
<div v-else class="unbound-cell" @click="startEdit(row)">
<span class="placeholder-text">🔴 尚未关联设备，点击绑定...</span>
<el-icon class="edit-icon"><EditPen /></el-icon>
</div>
</template>
</el-table-column>
<el-table-column label="卡状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 'online' ? 'success' : 'info'" effect="dark" size="small">
{{ row.status === 'online' ? '在线' : '离线' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="当月用量" width="120" align="right">
<template #default="{ row }">
<span>{{ row.usedTraffic }} M</span>
</template>
</el-table-column>
</el-table>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">关 闭</el-button>
</span>
</template>
</el-dialog>
</el-config-provider>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import axios from 'axios'
import { ElMessage, ElConfigProvider } from 'element-plus'
import { Search, Refresh, EditPen, Check, Close, Link } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
const visible = ref(false)
const loading = ref(false)
// 数据源
const fullSimList = ref([]) // 所有的 SIM 卡列表
const displayList = ref([]) // 表格展示列表
const allDeviceNames = ref([]) // 所有的真实设备 (用于自动补全和验证)
// 筛选条件
const keyword = ref('')
const filterStatus = ref('unbound') // 默认看未绑定的
const emit = defineEmits(['update-success'])
// 1. 打开弹窗
const open = () => {
visible.value = true
filterStatus.value = 'unbound' // 每次打开默认只看未绑定的，方便操作
fetchIoTDevices()
}
// 2. 获取数据 (逻辑升级：聚合所有卡片信息)
const fetchIoTDevices = async () => {
loading.value = true
try {
const res = await axios.get(`${API_BASE}/api/devices_overview`)
const allData = res.data.data || []
// 1. 构建 [ICCID -> 设备名] 的查找表 (核心修复点)
const iccidToDeviceMap = {}
// 提取真实设备用于下拉建议
const realDevices = []
allData.forEach(d => {
// 如果是真实设备
if (d.source !== 'iot_card') {
realDevices.push({
value: d.name,
site: d.install_site || '未填地点'
})
// 如果它绑定了卡，记录到映射表
if (d.bound_iccid) {
iccidToDeviceMap[d.bound_iccid] = d.name
}
}
})
allDeviceNames.value = realDevices
// 2. 提取所有 SIM 卡记录 (source='iot_card')
// 这些就是所有的物理卡片
const cards = allData.filter(d => d.source === 'iot_card')
const tempList = cards.map(c => {
const iccid = c.name // 这里的 name 就是 ICCID
// 尝试解析 JSON
let j = {}
try { j = JSON.parse(c.json_data || '{}') } catch(e){}
// **核心修复**：直接从映射表里查，这张卡被谁绑定了
// 如果 iccidToDeviceMap[iccid] 有值，说明它被绑定了
const ownerDevice = iccidToDeviceMap[iccid] || ''
// 流量解析
let traffic = c.usedTraffic || j.usedTraffic || '0'
return {
iccid: iccid,
tag: j.tag || '',
usedTraffic: traffic,
boundDeviceName: ownerDevice, // 这样刷新后绑定关系绝对不会丢
targetDeviceName: ownerDevice,
status: c.status || 'offline',
isEditing: false,
saving: false
}
})
fullSimList.value = tempList
filterList()
} catch (e) {
ElMessage.error('加载列表失败')
console.error(e)
} finally {
loading.value = false
}
}
// 3. 列表筛选
const filterList = () => {
let list = fullSimList.value
// 状态筛选
if (filterStatus.value === 'bound') {
list = list.filter(item => item.boundDeviceName)
} else if (filterStatus.value === 'unbound') {
list = list.filter(item => !item.boundDeviceName)
}
// 关键词筛选
if (keyword.value) {
const k = keyword.value.toLowerCase()
list = list.filter(item =>
item.iccid.toLowerCase().includes(k) ||
(item.boundDeviceName && item.boundDeviceName.toLowerCase().includes(k))
)
}
displayList.value = list
}
// 4. 开始编辑/绑定
const startEdit = (row) => {
// 取消其他行的编辑状态
displayList.value.forEach(item => { if(item !== row) cancelEdit(item) })
// 设置输入框初始值：如果是修改，填入旧名字；如果是新绑定，为空
row.targetDeviceName = row.boundDeviceName || ''
row.isEditing = true
nextTick(() => {
// 自动聚焦
const el = document.querySelector('.edit-cell input')
if (el) el.focus()
})
}
const cancelEdit = (row) => {
row.isEditing = false
// 恢复原值 (如果没保存)
row.targetDeviceName = row.boundDeviceName
}
// 5. 自动补全逻辑 (支持模糊搜索)
const querySearchDevice = (queryString, cb) => {
const results = queryString
? allDeviceNames.value.filter(createFilter(queryString))
: allDeviceNames.value
cb(results)
}
// 模糊匹配逻辑：包含即可
const createFilter = (queryString) => {
return (item) => {
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
}
}
const handleSelectDevice = (item) => {
// 选中后自动触发保存逻辑可以在这里写，但为了安全，还是让用户按回车或点对号
}
// 6. 保存绑定 (核心逻辑 + 强制验证)
const saveBinding = async (row) => {
const targetName = row.targetDeviceName
if (!targetName) return ElMessage.warning('请输入目标设备名称')
// [新增] 强制验证：输入的名字必须存在于 allDeviceNames 列表中
const isValidDevice = allDeviceNames.value.some(d => d.value === targetName)
if (!isValidDevice) {
ElMessage.error(`设备 "${targetName}" 不存在！请先在主界面新增该设备。`)
return
}
row.saving = true
try {
// 调用后端绑定接口
await axios.post(`${API_BASE}/api/bind_device_card`, {
iccid: row.iccid,
device_name: targetName
})
ElMessage.success(`绑定成功: ${row.iccid} -> ${targetName}`)
// 更新本地状态，避免必须刷新全量
row.boundDeviceName = targetName
row.isEditing = false
// 重新触发筛选逻辑 (因为绑定状态变了)
filterList()
// 通知父组件刷新主列表
emit('update-success')
} catch (e) {
const msg = e.response?.data?.message || '绑定失败'
ElMessage.error(msg)
} finally {
row.saving = false
}
}
const handleClose = () => {
visible.value = false
}
defineExpose({ open })
</script>
<style scoped>
.binder-container { padding: 5px; }
.tips-alert { margin-bottom: 15px; }
.toolbar { display: flex; align-items: center; margin-bottom: 15px; }
.iccid-text { font-family: monospace; font-weight: bold; color: #606266; font-size: 13px; }
/* 绑定状态单元格 */
.bound-cell { display: flex; align-items: center; justify-content: space-between; }
.bound-tag { font-size: 13px; padding: 0 10px; height: 28px; line-height: 26px; }
.unbound-cell {
cursor: pointer;
color: #909399;
font-style: italic;
font-size: 13px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
border: 1px dashed transparent;
border-radius: 4px;
}
.unbound-cell:hover {
background-color: #f0f9ff;
border-color: #a0cfff;
color: #409EFF;
}
.edit-cell { display: flex; align-items: center; gap: 5px; }
/* 自动补全下拉项样式 */
.suggestion-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.device-name-highlight { font-weight: bold; color: #333; }
.suggestion-site { color: #999; font-size: 12px; margin-left: 10px; }
.empty-tip {
text-align: center;
color: #909399;
padding: 40px;
}
</style>