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

成功添加哈士奇业务以及白名单功能创建

Browse Source
This commit is contained in:
YueL1331
2026-01-13 16:43:34 +08:00
parent fe21532741
commit 9ebfd79414
3 changed files with 553 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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; }

303
zhandianxinxi/光谱数据监控/src/views/IoTDeviceBinder.vue
View File

@ -3,7 +3,7 @@
<el-dialog
v-model="visible"
title="🔗 IoT 卡片管理与绑定"
width="950px"
width="1000px"
top="8vh"
destroy-on-close
append-to-body
@ -12,16 +12,11 @@
<div class="binder-container">
<div class="tips-alert">
<el-alert
title="功能说明"
type="info"
show-icon
:closable="false"
>
<el-alert title="功能说明" type="info" show-icon :closable="false">
<template #default>
<div>1. 此处展示所有 IoT 卡片 (包括已绑定和未绑定的)。</div>
<div>2. <b>绑定要求：</b> 目标设备必须是系统中已存在的设备，不能随意输入不存在的名称。</div>
<div>3. 绑定后，该设备的流量数据将由对应的 ICCID 卡片提供。</div>
<div>1. <b>白名单置顶：</b> 开启白名单的卡片会自动排在列表最上方。</div>
<div>2. <b>绑定要求：</b> 目标设备必须是系统中已存在的设备。</div>
<div>3. <b>流量警告：</b> 白名单卡片即使流量超过 500M 也不会触发黄色警告。</div>
</template>
</el-alert>
</div>
@ -61,16 +56,15 @@
</template>
</el-table-column>
<el-table-column label="关联设备状态" min-width="320">
<el-table-column label="关联设备状态" min-width="300">
<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;"
style="width: 180px;"
@select="handleSelectDevice"
@keyup.enter="saveBinding(row)"
ref="nameInputRef"
@ -84,9 +78,8 @@
</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="取消" />
<el-button type="success" size="small" icon="Check" circle @click="saveBinding(row)" :loading="row.saving" />
<el-button type="info" size="small" icon="Close" circle @click="cancelEdit(row)" />
</div>
<div v-else-if="row.boundDeviceName" class="bound-cell">
@ -97,24 +90,30 @@
</div>
<div v-else class="unbound-cell" @click="startEdit(row)">
<span class="placeholder-text">🔴 尚未关联设备，点击绑定...</span>
<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">
<el-table-column label="当月用量" width="120" align="right" sortable prop="usedTrafficNum">
<template #default="{ row }">
<el-tag :type="row.status === 'online' ? 'success' : 'info'" effect="dark" size="small">
{{ row.status === 'online' ? '在线' : '离线' }}
</el-tag>
<span :style="{ fontWeight: row.usedTrafficNum >= 500 && !row.isWhitelist ? 'bold' : 'normal', color: row.usedTrafficNum >= 500 && !row.isWhitelist ? '#E6A23C' : '#606266' }">
{{ row.usedTraffic }} M
</span>
</template>
</el-table-column>
<el-table-column label="当月用量" width="120" align="right">
<el-table-column label="白名单" width="100" align="center">
<template #default="{ row }">
<span>{{ row.usedTraffic }} M</span>
<el-switch
v-model="row.isWhitelist"
active-text="是"
inactive-text="否"
inline-prompt
:loading="row.whitelistLoading"
:before-change="() => toggleWhitelist(row)"
/>
</template>
</el-table-column>
@ -141,46 +140,52 @@ 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 fullSimList = ref([])
const displayList = ref([])
const allDeviceNames = ref([])
const keyword = ref('')
const filterStatus = ref('unbound') // 默认看未绑定的
const filterStatus = ref('all')
const emit = defineEmits(['update-success'])
// 1. 打开弹窗
const open = () => {
visible.value = true
filterStatus.value = 'unbound' // 每次打开默认只看未绑定的，方便操作
filterStatus.value = 'all'
fetchIoTDevices()
}
// 2. 获取数据 (逻辑升级：聚合所有卡片信息)
// 本地排序逻辑
const applySort = () => {
fullSimList.value.sort((a, b) => {
// 1. 白名单 (True 在前)
if (a.isWhitelist !== b.isWhitelist) {
return a.isWhitelist ? -1 : 1
}
// 2. 绑定状态
const aBound = !!a.boundDeviceName
const bBound = !!b.boundDeviceName
if (aBound !== bBound) {
return aBound ? -1 : 1
}
// 3. 默认顺序
return a.iccid.localeCompare(b.iccid)
})
// 重新执行过滤以应用排序到显示列表
filterList()
}
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 || '未填地点'
})
// 如果它绑定了卡，记录到映射表
realDevices.push({ value: d.name, site: d.install_site || '未填地点' })
if (d.bound_iccid) {
iccidToDeviceMap[d.bound_iccid] = d.name
}
@ -188,202 +193,154 @@ const fetchIoTDevices = async () => {
})
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
const iccid = c.name
let j = {}
try { j = JSON.parse(c.json_data || '{}') } catch(e){}
// **核心修复**：直接从映射表里查，这张卡被谁绑定了
// 如果 iccidToDeviceMap[iccid] 有值，说明它被绑定了
const ownerDevice = iccidToDeviceMap[iccid] || ''
// 流量解析
let traffic = c.usedTraffic || j.usedTraffic || '0'
let trafficNum = parseFloat(traffic) || 0
let isW = false
if (j.is_whitelist !== undefined) isW = j.is_whitelist
if (c.is_whitelist !== undefined) isW = c.is_whitelist
return {
iccid: iccid,
tag: j.tag || '',
usedTraffic: traffic,
boundDeviceName: ownerDevice, // 这样刷新后绑定关系绝对不会丢
usedTrafficNum: trafficNum,
boundDeviceName: ownerDevice,
targetDeviceName: ownerDevice,
status: c.status || 'offline',
isWhitelist: !!isW,
isEditing: false,
saving: false
saving: false,
whitelistLoading: false
}
})
fullSimList.value = tempList
filterList()
applySort()
} catch (e) {
ElMessage.error('加载列表失败')
console.error(e)
ElMessage.error('加载失败')
} 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 (filterStatus.value === 'bound') list = list.filter(i => i.boundDeviceName)
if (filterStatus.value === 'unbound') list = list.filter(i => !i.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))
)
list = list.filter(i => i.iccid.toLowerCase().includes(k) || (i.boundDeviceName && i.boundDeviceName.toLowerCase().includes(k)))
}
displayList.value = list
}
// 4. 开始编辑/绑定
const startEdit = (row) => {
// 取消其他行的编辑状态
displayList.value.forEach(item => { if(item !== row) cancelEdit(item) })
// 设置输入框初始值：如果是修改，填入旧名字；如果是新绑定，为空
displayList.value.forEach(i => i.isEditing = false)
row.targetDeviceName = row.boundDeviceName || ''
row.isEditing = true
nextTick(() => {
// 自动聚焦
const el = document.querySelector('.edit-cell input')
if (el) el.focus()
})
nextTick(() => document.querySelector('.edit-cell input')?.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 querySearchDevice = (qs, cb) => {
const res = qs ? allDeviceNames.value.filter(i => i.value.toLowerCase().indexOf(qs.toLowerCase()) > -1) : allDeviceNames.value
cb(res)
}
const handleSelectDevice = (item) => {}
// 模糊匹配逻辑：包含即可
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
}
const target = row.targetDeviceName
if (!target) return ElMessage.warning('请输入设备名')
const exists = allDeviceNames.value.some(d => d.value === target)
if (!exists) return ElMessage.error('设备不存在，请先新建设备')
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
await axios.post(`${API_BASE}/api/bind_device_card`, { iccid: row.iccid, device_name: target })
ElMessage.success('绑定成功')
row.boundDeviceName = target
row.isEditing = false
// 重新触发筛选逻辑 (因为绑定状态变了)
filterList()
// 通知父组件刷新主列表
emit('update-success')
fetchIoTDevices()
} catch (e) {
const msg = e.response?.data?.message || '绑定失败'
ElMessage.error(msg)
ElMessage.error(e.response?.data?.message || '失败')
} finally {
row.saving = false
}
}
const handleClose = () => {
visible.value = false
// ---------------------------------------------------------
// [核心修复] 白名单切换逻辑
// ---------------------------------------------------------
const toggleWhitelist = (row) => {
// 设置 Loading，防止重复点击
row.whitelistLoading = true
return new Promise((resolve, reject) => {
// 预期的新状态 (当前状态取反)
const targetVal = !row.isWhitelist
axios.post(`${API_BASE}/api/toggle_whitelist`, {
iccid: row.iccid,
is_whitelist: targetVal
}).then(() => {
// 1. API 成功
ElMessage.success(targetVal ? '已加入白名单' : '已移出白名单')
// 2. 触发父组件更新 (Dashboard 计数等)
emit('update-success')
// 3. 关键：resolve(true) 会告诉 el-switch 组件可以切换视觉状态了
// 此时 Vue 会自动更新 v-model (即 row.isWhitelist) 的值
// 我们不需要在这里手动写 row.isWhitelist = targetVal
resolve(true)
row.whitelistLoading = false
// 4. 延迟触发排序
// 为什么要延迟？
// A. 等待 el-switch 动画播放
// B. 确保 v-model 的值已经确实更新到了 row 对象上
setTimeout(() => {
applySort()
}, 300)
}).catch(() => {
// 失败：El-switch 保持原状
ElMessage.error('操作失败')
row.whitelistLoading = false
reject(new Error('Failed'))
})
})
}
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; }
/* 绑定状态单元格 */
.iccid-text { font-family: monospace; font-weight: bold; color: #606266; }
.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;
}
.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;
}
.suggestion-item { display: flex; justify-content: space-between; width: 100%; }
.suggestion-site { color: #999; font-size: 12px; }
.empty-tip { text-align: center; color: #909399; padding: 40px; }
</style>