1149 lines
39 KiB
Vue
1149 lines
39 KiB
Vue
<template>
|
|
<ElCard shadow="never" class="info-card basic-info">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<span>{{ cardInfo?.asset_type === 'card' ? '卡信息' : '设备信息' }}</span>
|
|
<ElTag :type="cardInfo?.asset_type === 'card' ? 'success' : 'primary'" size="small">
|
|
{{ cardInfo?.asset_type === 'card' ? 'IoT卡' : '设备' }}
|
|
</ElTag>
|
|
</div>
|
|
<div class="card-header-right">
|
|
<ElButton v-if="auditTarget" type="primary" link @click="openAssetAudit">
|
|
{{ isSubjectActivityView ? '活动记录' : '审计记录' }}
|
|
</ElButton>
|
|
<ElButton
|
|
v-if="
|
|
cardInfo?.asset_type === 'card' &&
|
|
hasAuth(JULY_PERMISSIONS.speedTier.view) &&
|
|
hasAuth(JULY_PERMISSIONS.speedTier.update)
|
|
"
|
|
type="primary"
|
|
link
|
|
@click="emit('showSpeedLimit')"
|
|
>
|
|
设置限速
|
|
</ElButton>
|
|
<ElTooltip content="开启后系统将自动轮询更新资产状态" placement="top">
|
|
<div v-if="canShowPolling" class="polling-switch-wrapper">
|
|
<span class="polling-label">自动轮询</span>
|
|
<ElSwitch
|
|
:model-value="pollingEnabled"
|
|
@update:model-value="handlePollingChange"
|
|
active-text="开"
|
|
inactive-text="关"
|
|
inline-prompt
|
|
size="default"
|
|
/>
|
|
</div>
|
|
</ElTooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<ElDescriptions :column="descriptionsColumn" border>
|
|
<!-- 卡专属字段 -->
|
|
<template v-if="cardInfo?.asset_type === 'card'">
|
|
<ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="IMEI">{{
|
|
cardInfo?.gateway_card_imei || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="运营商账户">{{ carrierAccountDisplay }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名状态">
|
|
<ElTag :type="getRealNameStatusType(cardInfo?.real_name_status)" size="small">
|
|
{{ getRealNameStatusName(cardInfo?.real_name_status) }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
|
|
{{ getRealnamePolicyName(cardInfo?.realname_policy) }}
|
|
</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="套餐系列">{{ cardInfo?.series_name || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="网络状态">
|
|
<ElTag :type="cardInfo?.network_status === 1 ? 'success' : 'danger'" size="small">
|
|
{{ cardInfo?.network_status === 1 ? '正常' : '停机' }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem v-if="canShowCardMonthUsage" label="本月已用流量">{{
|
|
formatDataSize(cardInfo?.current_month_usage_mb || 0)
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem v-if="canShowCardMonthUsage" label="运营商周期月内已用流量">{{
|
|
formatDataSize(cardInfo?.last_gateway_reading_mb || 0)
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名时间">{{
|
|
cardInfo?.real_name_at ? formatDateTime(cardInfo.real_name_at) : '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名同步时间">{{
|
|
formatDateTime(cardInfo?.last_real_name_check_at) || '-'
|
|
}}</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="MSISDN">{{ cardInfo?.msisdn || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="资产状态">
|
|
<ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
|
|
{{ getAssetStatusName(cardInfo?.status) }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="卡状态同步时间">{{
|
|
formatDateTime(cardInfo?.last_card_status_check_at) || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="流量同步时间">{{
|
|
formatDateTime(cardInfo?.last_data_check_at) || '-'
|
|
}}</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="运营商状态" :span="1">
|
|
<span class="gateway-extend-text">{{ cardInfo?.gateway_extend || '-' }}</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="所有套餐已用量">
|
|
{{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="所有套餐剩余量">
|
|
{{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="预计套餐到期时间">
|
|
<span
|
|
:class="getExpiryEstimateClass(cardInfo)"
|
|
:title="getExpiryEstimateTooltip(cardInfo)"
|
|
>
|
|
{{ getExpiryEstimateText(cardInfo) }}
|
|
</span>
|
|
</ElDescriptionsItem>
|
|
|
|
<template v-if="cardInfo?.bound_device_id">
|
|
<ElDescriptionsItem label="绑定设备号">
|
|
<ElButton
|
|
type="primary"
|
|
link
|
|
@click="emit('navigateToDevice', cardInfo!.bound_device_no!)"
|
|
>
|
|
{{ cardInfo?.bound_device_no || '-' }}
|
|
</ElButton>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="绑定设备名称">
|
|
{{ cardInfo?.bound_device_name || '-' }}
|
|
</ElDescriptionsItem>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- 设备专属字段 -->
|
|
<template v-if="cardInfo?.asset_type === 'device'">
|
|
<ElDescriptionsItem label="IMEI">{{ cardInfo?.imei || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="设备名称">{{ cardInfo?.device_name || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="设备状态">
|
|
<ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
|
|
{{ getAssetStatusName(cardInfo?.status) }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名状态">
|
|
<ElTag
|
|
v-if="selectedDeviceStatusCard"
|
|
:type="getRealNameStatusType(selectedDeviceStatusCard.real_name_status)"
|
|
size="small"
|
|
>
|
|
{{ getRealNameStatusName(selectedDeviceStatusCard.real_name_status) }}
|
|
</ElTag>
|
|
<span v-else>-</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="激活状态">
|
|
{{ cardInfo?.activation_status_name || '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="设备型号">{{
|
|
cardInfo?.device_model || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名时间">{{
|
|
selectedDeviceStatusCard?.real_name_at
|
|
? formatDateTime(selectedDeviceStatusCard.real_name_at)
|
|
: '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="在线状态">
|
|
<ElTag
|
|
v-if="cardInfo?.online_status !== undefined"
|
|
:type="getOnlineStatusType(cardInfo?.online_status)"
|
|
size="small"
|
|
>
|
|
{{ getOnlineStatusName(cardInfo?.online_status) }}
|
|
</ElTag>
|
|
<span v-else>-</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="切卡模式">{{
|
|
getSwitchModeName(cardInfo?.switch_mode)
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="已绑定卡数">{{
|
|
cardInfo?.bound_card_count || 0
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="最大卡槽数">{{
|
|
cardInfo?.max_sim_slots || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
|
|
{{ getRealnamePolicyName(cardInfo?.realname_policy) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="设备类型">{{ cardInfo?.device_type || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem v-if="canShowSensitiveFields" label="制造商">{{
|
|
cardInfo?.manufacturer || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="最后在线时间">{{
|
|
formatDateTime(cardInfo?.last_online_time) || '-'
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="SN">{{ cardInfo?.sn || '-' }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="所有套餐已用量">
|
|
{{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="所有套餐剩余量">
|
|
{{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="预计套餐到期时间">
|
|
<span
|
|
:class="getExpiryEstimateClass(cardInfo)"
|
|
:title="getExpiryEstimateTooltip(cardInfo)"
|
|
>
|
|
{{ getExpiryEstimateText(cardInfo) }}
|
|
</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="最后同步时间">{{
|
|
formatDateTime(deviceRealtime?.last_sync_time) || '-'
|
|
}}</ElDescriptionsItem>
|
|
</template>
|
|
</ElDescriptions>
|
|
|
|
<template v-if="previousExchangeAsset || nextExchangeAsset">
|
|
<ElDivider content-position="left">换货链路</ElDivider>
|
|
<ElDescriptions :column="descriptionsColumn" border>
|
|
<ElDescriptionsItem v-if="previousExchangeAsset" label="前代资产">
|
|
<div class="exchange-asset">
|
|
<ElTag type="success" size="small">换货新资产</ElTag>
|
|
<ElButton
|
|
v-if="previousExchangeAsset.can_view"
|
|
type="primary"
|
|
link
|
|
@click="handleNavigateToExchangeAsset(previousExchangeAsset)"
|
|
>
|
|
{{ previousExchangeAsset.identifier }}
|
|
</ElButton>
|
|
<span v-else>{{ previousExchangeAsset.identifier }}</span>
|
|
<span v-if="previousExchangeAsset.exchange_no" class="exchange-no">
|
|
换货单：{{ previousExchangeAsset.exchange_no }}
|
|
</span>
|
|
</div>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem v-if="nextExchangeAsset" label="后代资产">
|
|
<div class="exchange-asset">
|
|
<ElTag type="warning" size="small">已换出旧资产</ElTag>
|
|
<ElButton
|
|
v-if="nextExchangeAsset.can_view"
|
|
type="primary"
|
|
link
|
|
@click="handleNavigateToExchangeAsset(nextExchangeAsset)"
|
|
>
|
|
{{ nextExchangeAsset.identifier }}
|
|
</ElButton>
|
|
<span v-else>{{ nextExchangeAsset.identifier }}</span>
|
|
<span v-if="nextExchangeAsset.exchange_no" class="exchange-no">
|
|
换货单：{{ nextExchangeAsset.exchange_no }}
|
|
</span>
|
|
</div>
|
|
</ElDescriptionsItem>
|
|
</ElDescriptions>
|
|
</template>
|
|
|
|
<!-- 设备绑定卡列表 -->
|
|
<template v-if="cardInfo?.asset_type === 'device'">
|
|
<ElDivider content-position="left">绑定卡列表</ElDivider>
|
|
<ElTable
|
|
v-if="cardInfo.cards && cardInfo.cards.length > 0"
|
|
:data="sortedDeviceCards"
|
|
border
|
|
style="width: 100%; margin-top: 16px"
|
|
>
|
|
<ElTableColumn label="ICCID" width="220" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
|
<ElButton type="primary" link @click="handleNavigateToCardInfo(scope.row.iccid)">
|
|
{{ scope.row.iccid }}
|
|
</ElButton>
|
|
<el-icon
|
|
class="copy-icon"
|
|
@click="handleCopyICCID(scope.row.iccid)"
|
|
style="color: var(--el-color-primary); cursor: pointer"
|
|
>
|
|
<CopyDocument />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip />
|
|
|
|
<ElTableColumn prop="carrier_name" label="运营商" min-width="120" showOverflowTooltip />
|
|
<ElTableColumn prop="slot_position" label="卡槽位置" width="130">
|
|
<template #default="scope">
|
|
<div style="display: flex; gap: 10px">
|
|
<span>SIM-{{ scope.row.slot_position }}</span>
|
|
<ElTag v-if="scope.row.is_current" type="primary" size="small">当前</ElTag>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="网络状态" width="100">
|
|
<template #default="scope">
|
|
<ElTag :type="scope.row.network_status === 1 ? 'success' : 'danger'" size="small">
|
|
{{ scope.row.network_status === 1 ? '正常' : '停机' }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="实名状态" width="100">
|
|
<template #default="scope">
|
|
<ElTag :type="getRealNameStatusType(scope.row.real_name_status)" size="small">
|
|
{{ getRealNameStatusName(scope.row.real_name_status) }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="实名认证策略" width="120" showOverflowTooltip>
|
|
<template #default="scope">
|
|
{{ getRealnamePolicyName(scope.row.realname_policy) }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="实名时间" width="170">
|
|
<template #default="scope">
|
|
{{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="运营商停机原因" min-width="220" showOverflowTooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.gateway_extend || '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="操作" width="260" fixed="right">
|
|
<template #default="scope">
|
|
<!-- 根据网络状态显示启用或停用按钮 -->
|
|
<ElButton
|
|
v-if="scope.row.network_status === 0"
|
|
type="success"
|
|
size="small"
|
|
link
|
|
:disabled="isBindingStartDisabled(scope.row)"
|
|
@click="handleEnableBindingCard(scope.row)"
|
|
v-permission="'iot_info:start'"
|
|
>
|
|
{{ getBindingStartButtonText(scope.row) }}
|
|
</ElButton>
|
|
<ElButton
|
|
v-if="scope.row.network_status === 1"
|
|
type="warning"
|
|
size="small"
|
|
link
|
|
:disabled="isBindingStopDisabled(scope.row)"
|
|
@click="handleDisableBindingCard(scope.row)"
|
|
v-permission="'iot_info:stop'"
|
|
>
|
|
{{ getBindingStopButtonText(scope.row) }}
|
|
</ElButton>
|
|
<ElButton
|
|
type="primary"
|
|
size="small"
|
|
link
|
|
@click="handleUpdateBindingCardRealnameStatus(scope.row)"
|
|
v-permission="'bound_card:update_realname_status'"
|
|
>
|
|
更新实名状态
|
|
</ElButton>
|
|
<ElButton
|
|
v-if="getBindingCardAuditTarget(scope.row)"
|
|
type="primary"
|
|
size="small"
|
|
link
|
|
@click="openBindingCardAudit(scope.row)"
|
|
>
|
|
卡审计
|
|
</ElButton>
|
|
</template>
|
|
</ElTableColumn>
|
|
</ElTable>
|
|
<ElEmpty v-else description="暂无绑定卡" :image-size="80" style="margin-top: 16px" />
|
|
|
|
<!-- 设备实时信息 -->
|
|
<ElDivider content-position="left">设备实时信息</ElDivider>
|
|
<div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" style="margin-top: 16px">
|
|
<ElDescriptions :column="descriptionsColumn" border>
|
|
<!-- 基本状态 -->
|
|
<ElDescriptionsItem label="在线状态">
|
|
<ElTag :type="getOnlineStatusType(deviceRealtime?.online_status)" size="small">
|
|
{{ getOnlineStatusName(deviceRealtime?.online_status) }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="电量">
|
|
{{
|
|
deviceRealtime?.battery_level !== null && deviceRealtime?.battery_level !== undefined
|
|
? `${deviceRealtime?.battery_level}%`
|
|
: '-'
|
|
}}
|
|
</ElDescriptionsItem>
|
|
|
|
<!-- 时间信息 -->
|
|
<ElDescriptionsItem label="本次开机时长">
|
|
{{ formatDuration(deviceRealtime?.run_time) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="本次联网时长">
|
|
{{ formatDuration(deviceRealtime?.connect_time) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="最后在线时间">
|
|
{{ formatDateTime(deviceRealtime?.last_online_time) || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="实名同步时间">
|
|
{{ formatDateTime(cardInfo?.last_real_name_check_at) || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="卡状态同步时间">
|
|
{{ formatDateTime(cardInfo?.last_card_status_check_at) || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="流量同步时间">
|
|
{{ formatDateTime(cardInfo?.last_data_check_at) || '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<!-- 信号信息 -->
|
|
<ElDescriptionsItem label="信号综合判断">
|
|
<ElTag :type="getSignalQualityType(deviceRealtime?.signal_quality)" size="small">
|
|
{{ getSignalQualityText(deviceRealtime?.signal_quality) }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="信号较弱原因" :span="3">
|
|
{{ getSignalBadReasonText(deviceRealtime?.signal_bad_reason) }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="已连接设备数">
|
|
{{ deviceRealtime?.client_number ?? '-' }} / {{ deviceRealtime?.max_clients ?? '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<!-- WiFi 信息 -->
|
|
<ElDescriptionsItem label="WiFi 状态">
|
|
<ElTag :type="deviceRealtime?.wifi_enabled ? 'success' : 'info'" size="small">
|
|
{{
|
|
deviceRealtime?.wifi_enabled === undefined
|
|
? '-'
|
|
: deviceRealtime.wifi_enabled
|
|
? '已开启'
|
|
: '已关闭'
|
|
}}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="WiFi 名称">
|
|
{{ deviceRealtime?.ssid || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="WiFi 密码">
|
|
{{ deviceRealtime?.wifi_password || '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<!-- 网络信息 -->
|
|
<ElDescriptionsItem label="WAN IP">
|
|
{{ deviceRealtime?.wan_ip || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="LAN IP">
|
|
{{ deviceRealtime?.lan_ip || '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="MAC 地址">
|
|
{{ deviceRealtime?.mac_address || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="IMSI">
|
|
{{ deviceRealtime?.imsi || '-' }}
|
|
</ElDescriptionsItem>
|
|
|
|
<!-- 设备配置 -->
|
|
<ElDescriptionsItem label="限速">
|
|
{{
|
|
deviceRealtime?.limit_speed === undefined
|
|
? '-'
|
|
: deviceRealtime.limit_speed
|
|
? `${deviceRealtime.limit_speed} KB/s`
|
|
: '不限速'
|
|
}}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="固件版本">
|
|
{{ deviceRealtime?.software_version || '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="切卡模式">
|
|
{{
|
|
deviceRealtime?.switch_mode === '0'
|
|
? '自动'
|
|
: deviceRealtime?.switch_mode === '1'
|
|
? '手动'
|
|
: '-'
|
|
}}
|
|
</ElDescriptionsItem>
|
|
|
|
<ElDescriptionsItem label="上报周期">
|
|
{{ deviceRealtime?.sync_interval ? `${deviceRealtime.sync_interval} 秒` : '-' }}
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="信息更新时间">
|
|
{{ formatDateTime(deviceRealtime?.last_update_time) || '-' }}
|
|
</ElDescriptionsItem>
|
|
</ElDescriptions>
|
|
</div>
|
|
<ElEmpty v-else description="暂无实时信息" :image-size="80" style="margin-top: 16px" />
|
|
</template>
|
|
|
|
<!-- IoT卡操作按钮 -->
|
|
<ElAlert
|
|
v-if="startErrorMessage"
|
|
:title="startErrorMessage"
|
|
type="error"
|
|
:closable="false"
|
|
show-icon
|
|
style="margin-top: 16px"
|
|
/>
|
|
<div
|
|
v-if="cardInfo?.asset_type === 'card'"
|
|
class="card-operations"
|
|
style="margin-top: 16px; text-align: right"
|
|
>
|
|
<ElButton
|
|
v-if="cardInfo?.network_status === 0"
|
|
v-permission="'iot_info:start'"
|
|
type="success"
|
|
:disabled="startDisabled"
|
|
@click="handleEnableCard"
|
|
>
|
|
{{ startRemainingText ? `启用此卡(${startRemainingText})` : '启用此卡' }}
|
|
</ElButton>
|
|
<ElButton
|
|
v-if="cardInfo?.network_status === 1"
|
|
v-permission="'iot_info:stop'"
|
|
type="warning"
|
|
:disabled="stopDisabled"
|
|
@click="handleDisableCard"
|
|
>
|
|
{{ stopRemainingText ? `停用此卡(${stopRemainingText})` : '停用此卡' }}
|
|
</ElButton>
|
|
<!--<ElButton type="danger" v-permission="'iot_info:handler_stop'" @click="handleManualDeactivate"> 手动停用 </ElButton>-->
|
|
<!-- 手动停用暂时不开放 -->
|
|
<ElButton
|
|
v-if="canShowRealnamePolicy"
|
|
v-permission="'asset:card_realname_policy'"
|
|
type="primary"
|
|
@click="handleShowRealnamePolicy"
|
|
>
|
|
实名认证策略
|
|
</ElButton>
|
|
<ElButton
|
|
v-permission="'iot_info:update_realname_status'"
|
|
type="primary"
|
|
@click="handleShowUpdateRealnameStatus"
|
|
>
|
|
更新实名状态
|
|
</ElButton>
|
|
</div>
|
|
|
|
<!-- 设备操作按钮 -->
|
|
<div v-else class="device-operations" style="margin-top: 16px; text-align: right">
|
|
<ElButton v-permission="'device_info:switch_mode'" type="info" @click="handleShowSwitchMode"
|
|
>设置切卡模式</ElButton
|
|
>
|
|
<ElButton v-permission="'device_info:reboot'" type="primary" @click="handleRebootDevice">
|
|
重启设备
|
|
</ElButton>
|
|
<ElButton v-permission="'device_info:reset'" type="warning" @click="handleResetDevice">
|
|
恢复出厂
|
|
</ElButton>
|
|
<ElButton
|
|
v-permission="'device_info:switch_card'"
|
|
type="success"
|
|
@click="handleShowSwitchCard"
|
|
>
|
|
切换SIM卡
|
|
</ElButton>
|
|
<ElButton v-permission="'device_info:set_wifi'" type="primary" @click="handleShowSetWiFi">
|
|
设置WiFi
|
|
</ElButton>
|
|
<ElButton
|
|
v-if="canShowRealnamePolicy"
|
|
v-permission="'asset_info:device_realname_policy'"
|
|
type="primary"
|
|
@click="handleShowRealnamePolicy"
|
|
>
|
|
实名认证策略
|
|
</ElButton>
|
|
</div>
|
|
</ElCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useWindowSize } from '@vueuse/core'
|
|
import {
|
|
ElCard,
|
|
ElDescriptions,
|
|
ElDescriptionsItem,
|
|
ElTag,
|
|
ElTooltip,
|
|
ElSwitch,
|
|
ElDivider,
|
|
ElTable,
|
|
ElTableColumn,
|
|
ElButton,
|
|
ElAlert,
|
|
ElEmpty,
|
|
ElMessageBox,
|
|
ElMessage
|
|
} from 'element-plus'
|
|
import { CopyDocument } from '@element-plus/icons-vue'
|
|
import type {
|
|
AssetExchangeTrace,
|
|
AssetExchangeTraceAsset,
|
|
AssetPollingStatus,
|
|
ExpiryEstimateStatus
|
|
} from '@/types/api'
|
|
import { useAssetFormatters } from '../composables/useAssetFormatters'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import { JULY_PERMISSIONS } from '@/config/constants'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
import {
|
|
getExpiryEstimateText,
|
|
getExpiryEstimateTooltip,
|
|
getExpiryEstimateClass
|
|
} from '@/utils/business/expiryEstimate'
|
|
import { AUDIT_PERMISSIONS } from '@/config/constants/audit'
|
|
import { resolveAuditResourceTarget } from '@/utils/business/auditNavigation'
|
|
import { openAuditInvestigation } from '@/components/business/audit/investigationController'
|
|
|
|
// Props
|
|
interface BindingCard {
|
|
card_id?: number
|
|
iccid: string
|
|
msisdn?: string
|
|
carrier_name?: string
|
|
slot_position?: number
|
|
is_current: boolean
|
|
network_status?: number
|
|
real_name_status?: number
|
|
real_name_at?: string | null
|
|
realname_policy?: string
|
|
gateway_extend?: string
|
|
last_data_check_at?: string | null
|
|
last_real_name_check_at?: string | null
|
|
last_card_status_check_at?: string | null
|
|
}
|
|
|
|
interface AssetInfo {
|
|
asset_id: number
|
|
asset_type: 'card' | 'device'
|
|
identifier: string
|
|
iccid?: string
|
|
imei?: string
|
|
msisdn?: string
|
|
carrier_type?: string
|
|
carrier_name?: string
|
|
real_name_status?: number
|
|
activation_status_name?: string
|
|
realname_policy?: string
|
|
network_status?: number
|
|
current_month_usage_mb?: number
|
|
last_gateway_reading_mb?: number
|
|
device_type?: string
|
|
device_name?: string
|
|
device_model?: string
|
|
virtual_no?: string
|
|
sn?: string
|
|
cards?: BindingCard[]
|
|
status?: number
|
|
shop_name?: string
|
|
series_name?: string
|
|
real_name_at?: string | null
|
|
supplier?: string
|
|
gateway_card_imei?: string
|
|
gateway_extend?: string
|
|
total_virtual_used_mb?: number | null
|
|
total_virtual_remaining_mb?: number | null
|
|
estimated_final_expires_at?: string | null
|
|
days_until_final_expiry?: number | null
|
|
expiry_estimate_status?: ExpiryEstimateStatus
|
|
expiry_estimate_status_name?: string | null
|
|
is_expiring?: boolean
|
|
last_sync_time?: string | null
|
|
last_data_check_at?: string | null
|
|
last_real_name_check_at?: string | null
|
|
last_card_status_check_at?: string | null
|
|
polling?: AssetPollingStatus | null
|
|
exchange_trace?: AssetExchangeTrace | null
|
|
bound_device_id?: number
|
|
bound_device_no?: string
|
|
bound_device_name?: string
|
|
bound_card_count?: number
|
|
max_sim_slots?: number
|
|
activated_at?: string
|
|
online_status?: number
|
|
software_version?: string
|
|
switch_mode?: string
|
|
last_online_time?: string
|
|
manufacturer?: string
|
|
}
|
|
|
|
interface DeviceRealtimeInfo {
|
|
online_status?: number
|
|
status?: number
|
|
battery_level?: number | null
|
|
run_time?: string
|
|
connect_time?: string
|
|
last_online_time?: string | null
|
|
client_number?: number
|
|
max_clients?: number
|
|
current_iccid?: string
|
|
signal_quality?: string
|
|
signal_bad_reason?: string
|
|
wifi_enabled?: boolean | number
|
|
ssid?: string
|
|
wifi_password?: string
|
|
ip_address?: string
|
|
wan_ip?: string
|
|
lan_ip?: string
|
|
mac_address?: string
|
|
imei?: string
|
|
imsi?: string
|
|
limit_speed?: number
|
|
software_version?: string
|
|
switch_mode?: string
|
|
sync_interval?: number
|
|
device_id?: string
|
|
last_sync_time?: string | null
|
|
last_update_time?: string | null
|
|
}
|
|
|
|
interface Props {
|
|
cardInfo: AssetInfo
|
|
deviceRealtime: DeviceRealtimeInfo | null
|
|
pollingEnabled: boolean
|
|
realtimeLoading?: boolean
|
|
startDisabled?: boolean
|
|
startErrorMessage?: string
|
|
stopDisabled?: boolean
|
|
startRemainingText?: string
|
|
stopRemainingText?: string
|
|
getStartRemainingText?: (identifier: string) => string
|
|
getStopRemainingText?: (identifier: string) => string
|
|
isStartDisabled?: (identifier: string) => boolean
|
|
isStopDisabled?: (identifier: string) => boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
realtimeLoading: false,
|
|
startDisabled: false,
|
|
startErrorMessage: '',
|
|
stopDisabled: false,
|
|
startRemainingText: '',
|
|
stopRemainingText: ''
|
|
})
|
|
|
|
const { hasAuth } = useAuth()
|
|
const userStore = useUserStore()
|
|
const isSubjectActivityView = computed(() => [3, 4].includes(Number(userStore.info.user_type)))
|
|
const auditTarget = computed(() => {
|
|
const userType = Number(userStore.info.user_type)
|
|
const isCard = props.cardInfo.asset_type === 'card'
|
|
const permission =
|
|
userType === 3
|
|
? isCard
|
|
? AUDIT_PERMISSIONS.agentAssetInfoCardActivity
|
|
: AUDIT_PERMISSIONS.agentAssetInfoDeviceActivity
|
|
: userType === 4
|
|
? isCard
|
|
? AUDIT_PERMISSIONS.enterpriseAssetInfoCardActivity
|
|
: AUDIT_PERMISSIONS.enterpriseAssetInfoDeviceActivity
|
|
: AUDIT_PERMISSIONS.assetInfoEntry
|
|
if (!hasAuth(permission)) return null
|
|
return resolveAuditResourceTarget({
|
|
userType,
|
|
resourceType: props.cardInfo.asset_type === 'card' ? 'iot_card' : 'device',
|
|
internalId: props.cardInfo.asset_id,
|
|
businessIdentifier:
|
|
props.cardInfo.asset_type === 'card' ? props.cardInfo.iccid : props.cardInfo.virtual_no
|
|
})
|
|
})
|
|
const openAssetAudit = () => {
|
|
if (auditTarget.value) openAuditInvestigation(auditTarget.value)
|
|
}
|
|
const getBindingCardAuditTarget = (card: BindingCard) => {
|
|
const userType = Number(userStore.info.user_type)
|
|
const permission =
|
|
userType === 3
|
|
? AUDIT_PERMISSIONS.agentAssetInfoBindingCardActivity
|
|
: userType === 4
|
|
? AUDIT_PERMISSIONS.enterpriseAssetInfoBindingCardActivity
|
|
: AUDIT_PERMISSIONS.assetInfoBindingCardEntry
|
|
if (!hasAuth(permission)) return null
|
|
return resolveAuditResourceTarget({
|
|
userType,
|
|
resourceType: 'iot_card',
|
|
internalId: card.card_id,
|
|
businessIdentifier: card.iccid
|
|
})
|
|
}
|
|
const openBindingCardAudit = (card: BindingCard) => {
|
|
const target = getBindingCardAuditTarget(card)
|
|
if (target) openAuditInvestigation(target)
|
|
}
|
|
const { width } = useWindowSize()
|
|
|
|
const CARD_MONTH_USAGE_PERMISSION = 'asset_info:view_card_month_usage'
|
|
|
|
const realnamePolicyPermission = computed(() => {
|
|
return props.cardInfo?.asset_type === 'card'
|
|
? 'asset:card_realname_policy'
|
|
: 'asset:device_realname_policy'
|
|
})
|
|
|
|
const canShowRealnamePolicy = computed(() => hasAuth(realnamePolicyPermission.value))
|
|
|
|
const pollingPermission = computed(() => {
|
|
return props.cardInfo?.asset_type === 'card'
|
|
? 'iot_info:auto_polling'
|
|
: 'device_info:auto_polling'
|
|
})
|
|
|
|
const canShowPolling = computed(() => hasAuth(pollingPermission.value))
|
|
|
|
const canShowCardMonthUsage = computed(() => {
|
|
const userType = Number(userStore.info.user_type ?? 0)
|
|
return ![3, 4].includes(userType) && hasAuth(CARD_MONTH_USAGE_PERMISSION)
|
|
})
|
|
|
|
const isAgentOrEnterpriseAccount = computed(() => {
|
|
const userType = Number(userStore.info.user_type ?? 0)
|
|
return [3, 4].includes(userType)
|
|
})
|
|
|
|
const canShowSensitiveFields = computed(() => {
|
|
return !isAgentOrEnterpriseAccount.value
|
|
})
|
|
|
|
const carrierAccountDisplay = computed(() => {
|
|
if (isAgentOrEnterpriseAccount.value) {
|
|
return getCarrierTypeName(props.cardInfo?.carrier_type)
|
|
}
|
|
return props.cardInfo?.carrier_name || '-'
|
|
})
|
|
|
|
const descriptionsColumn = computed(() => {
|
|
if (width.value <= 640) return 1
|
|
if (width.value <= 1024) return 2
|
|
return 4
|
|
})
|
|
|
|
// Emits
|
|
interface Emits {
|
|
(e: 'update:pollingEnabled', value: boolean): void
|
|
(e: 'enableCard'): void
|
|
(e: 'disableCard'): void
|
|
(e: 'manualDeactivate'): void
|
|
(e: 'rebootDevice'): void
|
|
(e: 'resetDevice'): void
|
|
(e: 'showSpeedLimit'): void
|
|
(e: 'showSwitchCard'): void
|
|
(e: 'showSwitchMode'): void
|
|
(e: 'show-set-wifi'): void
|
|
(e: 'showRealnamePolicy'): void
|
|
(e: 'showUpdateRealnameStatus'): void
|
|
(e: 'enableBindingCard', payload: { card: BindingCard }): void
|
|
(e: 'disableBindingCard', payload: { card: BindingCard }): void
|
|
(e: 'updateBindingCardRealnameStatus', payload: { card: BindingCard }): void
|
|
(e: 'navigateToCard', iccid: string): void
|
|
(e: 'navigateToDevice', deviceNo: string): void
|
|
(e: 'navigateToAsset', identifier: string): void
|
|
}
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
// 使用格式化工具
|
|
const {
|
|
formatDataSize,
|
|
formatDuration,
|
|
getRealNameStatusName,
|
|
getRealNameStatusType,
|
|
getRealnamePolicyName,
|
|
getCarrierTypeName,
|
|
getAssetStatusName,
|
|
getAssetStatusType,
|
|
getOnlineStatusName,
|
|
getOnlineStatusType,
|
|
getSignalQualityText,
|
|
getSignalQualityType,
|
|
getSignalBadReasonText,
|
|
getSwitchModeName
|
|
} = useAssetFormatters()
|
|
|
|
// 排序后的设备卡列表（按卡槽位置排序，当前卡排在最前面）
|
|
const sortedDeviceCards = computed(() => {
|
|
if (!props.cardInfo?.cards || props.cardInfo.cards.length === 0) {
|
|
return []
|
|
}
|
|
const cards = [...props.cardInfo.cards]
|
|
return cards.sort((a, b) => {
|
|
if (a.is_current && !b.is_current) return -1
|
|
if (!a.is_current && b.is_current) return 1
|
|
return (a.slot_position ?? 0) - (b.slot_position ?? 0)
|
|
})
|
|
})
|
|
|
|
const previousExchangeAsset = computed(
|
|
() => props.cardInfo.exchange_trace?.previous_asset ?? null
|
|
)
|
|
const nextExchangeAsset = computed(() => props.cardInfo.exchange_trace?.next_asset ?? null)
|
|
|
|
// 设备详情里的实名状态和实名时间从选中的绑定卡取值：
|
|
// 只有一张卡时直接取该卡，多张卡时仅取 is_current=true 的卡。
|
|
const selectedDeviceStatusCard = computed(() => {
|
|
if (!props.cardInfo?.cards || props.cardInfo.cards.length === 0) {
|
|
return null
|
|
}
|
|
|
|
if (props.cardInfo.cards.length === 1) {
|
|
return props.cardInfo.cards[0]
|
|
}
|
|
|
|
return props.cardInfo.cards.find((card: BindingCard) => card.is_current) || null
|
|
})
|
|
|
|
const hasDeviceRealtimeSection = computed(
|
|
() =>
|
|
Boolean(props.deviceRealtime) ||
|
|
props.cardInfo?.last_data_check_at !== undefined ||
|
|
props.cardInfo?.last_real_name_check_at !== undefined ||
|
|
props.cardInfo?.last_card_status_check_at !== undefined
|
|
)
|
|
|
|
const formatUsageSummaryMb = (value?: number | null) => {
|
|
if (value === undefined || value === null) return '-'
|
|
return formatDataSize(value)
|
|
}
|
|
|
|
// 处理轮询开关变化
|
|
const handlePollingChange = (value: string | number | boolean) => {
|
|
emit('update:pollingEnabled', Boolean(value))
|
|
}
|
|
|
|
// 跳转到卡片信息
|
|
const handleNavigateToCardInfo = (iccid: string) => {
|
|
// 触发搜索事件，让父组件处理
|
|
emit('navigateToCard', iccid)
|
|
}
|
|
|
|
const handleNavigateToExchangeAsset = (asset: AssetExchangeTraceAsset) => {
|
|
if (!asset.can_view) return
|
|
emit('navigateToAsset', asset.identifier)
|
|
}
|
|
|
|
// 复制ICCID
|
|
const handleCopyICCID = async (iccid: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(iccid)
|
|
ElMessage.success('ICCID已复制')
|
|
} catch {
|
|
ElMessage.error('复制失败')
|
|
}
|
|
}
|
|
|
|
// 卡操作
|
|
const handleEnableCard = () => {
|
|
if (props.startDisabled) return
|
|
emit('enableCard')
|
|
}
|
|
|
|
const handleDisableCard = () => {
|
|
if (props.stopDisabled) return
|
|
emit('disableCard')
|
|
}
|
|
|
|
// 设备操作
|
|
const handleRebootDevice = () => {
|
|
emit('rebootDevice')
|
|
}
|
|
|
|
const handleResetDevice = () => {
|
|
emit('resetDevice')
|
|
}
|
|
|
|
const handleShowSwitchCard = () => {
|
|
emit('showSwitchCard')
|
|
}
|
|
|
|
const handleShowSwitchMode = () => {
|
|
emit('showSwitchMode')
|
|
}
|
|
|
|
const handleShowSetWiFi = () => {
|
|
emit('show-set-wifi')
|
|
}
|
|
|
|
const handleShowRealnamePolicy = () => {
|
|
emit('showRealnamePolicy')
|
|
}
|
|
|
|
const handleShowUpdateRealnameStatus = () => {
|
|
emit('showUpdateRealnameStatus')
|
|
}
|
|
|
|
// 绑定卡操作
|
|
const getBindingStartRemainingText = (card: BindingCard) =>
|
|
props.getStartRemainingText?.(card.iccid) || ''
|
|
|
|
const getBindingStopRemainingText = (card: BindingCard) =>
|
|
props.getStopRemainingText?.(card.iccid) || ''
|
|
|
|
const isBindingStartDisabled = (card: BindingCard) => props.isStartDisabled?.(card.iccid) || false
|
|
|
|
const isBindingStopDisabled = (card: BindingCard) => props.isStopDisabled?.(card.iccid) || false
|
|
|
|
const getBindingStartButtonText = (card: BindingCard) => {
|
|
const remainingText = getBindingStartRemainingText(card)
|
|
return remainingText ? `启用此卡(${remainingText})` : '启用此卡'
|
|
}
|
|
|
|
const getBindingStopButtonText = (card: BindingCard) => {
|
|
const remainingText = getBindingStopRemainingText(card)
|
|
return remainingText ? `停用此卡(${remainingText})` : '停用此卡'
|
|
}
|
|
|
|
const handleEnableBindingCard = (card: BindingCard) => {
|
|
if (isBindingStartDisabled(card)) return
|
|
ElMessageBox.confirm(`确定要启用此卡（${card.iccid}）吗？`, '启用确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
emit('enableBindingCard', { card })
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const handleDisableBindingCard = (card: BindingCard) => {
|
|
if (isBindingStopDisabled(card)) return
|
|
ElMessageBox.confirm(`确定要停用此卡（${card.iccid}）吗？`, '停用确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
emit('disableBindingCard', { card })
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const handleUpdateBindingCardRealnameStatus = (card: BindingCard) => {
|
|
emit('updateBindingCardRealnameStatus', { card })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.info-card {
|
|
&.basic-info {
|
|
.gateway-extend-text {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.expiry-estimate--critical,
|
|
.expiry-estimate--warning,
|
|
.expiry-estimate--notice {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.expiry-estimate--critical {
|
|
color: var(--el-color-danger);
|
|
}
|
|
|
|
.expiry-estimate--warning {
|
|
color: #8e44ad;
|
|
}
|
|
|
|
.expiry-estimate--notice {
|
|
color: #e83e8c;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.card-header-left {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-header-right {
|
|
.polling-switch-wrapper {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
|
|
.polling-label {
|
|
font-size: 14px;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-descriptions__body) {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
:deep(.el-descriptions__cell) {
|
|
word-break: break-word;
|
|
}
|
|
|
|
:deep(.el-table) {
|
|
min-width: 760px;
|
|
}
|
|
|
|
.card-operations,
|
|
.device-operations {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
|
|
.el-button {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.exchange-asset {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
|
|
.exchange-no {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.card-header-left,
|
|
.card-header-right {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-header-right {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.card-operations,
|
|
.device-operations {
|
|
justify-content: stretch;
|
|
|
|
.el-button {
|
|
flex: 1 1 120px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|