fix: 优化界面以及更新接口
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m27s

This commit is contained in:
sexygoat
2026-04-15 11:54:43 +08:00
parent 0d0b5ec14a
commit 91d7d4c21f
30 changed files with 1863 additions and 1742 deletions

View File

@@ -5,8 +5,7 @@ import type { UserInfo } from '@/api/auth'
import { getEnterpriseCards, getEnterpriseDevices } from '@/api/enterprise'
import { getCarriers } from '@/api/carrier'
import type { CarrierInfo } from '@/api/carrier'
import { stopDeviceAsset, startDeviceAsset, stopCardByIccid, startCardByIccid } from '@/api/assets'
import type { DeviceStopResponse } from '@/api/assets'
import { stopAsset, startAsset } from '@/api/assets'
import Skeleton from '@/components/Skeleton.vue'
import SimplePicker from '@/components/SimplePicker.vue'
import { formatTime, formatDataSize } from '@/utils/format'
@@ -404,10 +403,9 @@ async function handleStopDevice(asset: AssetItem, event: Event) {
event.stopPropagation()
const device = asset.raw as DeviceInfo
const deviceId = device.id || device.device_id
if (!deviceId) {
uni.$u.toast('设备ID不存在')
if (!device.virtual_no) {
uni.$u.toast('设备虚拟号不存在')
return
}
@@ -418,14 +416,13 @@ async function handleStopDevice(asset: AssetItem, event: Event) {
if (res.confirm) {
uni.showLoading({ title: '停机中...' })
try {
const result = await stopDeviceAsset(Number(deviceId))
const result = await stopAsset(device.virtual_no)
uni.hideLoading()
// 显示停机结果
const msg = `停机完成\n成功: ${result.success_count}\n失败: ${result.fail_count}\n跳过: ${result.skip_count}`
// 显示停机结果 (统一接口不返回详情,仅提示成功)
uni.showModal({
title: '停机结果',
content: msg,
title: '停机成功',
content: '设备已停机',
showCancel: false,
success: () => {
// 刷新列表
@@ -447,10 +444,9 @@ async function handleStartDevice(asset: AssetItem, event: Event) {
event.stopPropagation()
const device = asset.raw as DeviceInfo
const deviceId = device.id || device.device_id
if (!deviceId) {
uni.$u.toast('设备ID不存在')
if (!device.virtual_no) {
uni.$u.toast('设备虚拟号不存在')
return
}
@@ -461,7 +457,7 @@ async function handleStartDevice(asset: AssetItem, event: Event) {
if (res.confirm) {
uni.showLoading({ title: '复机中...' })
try {
await startDeviceAsset(Number(deviceId))
await startAsset(device.virtual_no)
uni.hideLoading()
uni.$u.toast('复机成功')
// 刷新列表
@@ -494,7 +490,7 @@ async function handleStopCard(asset: AssetItem, event: Event) {
if (res.confirm) {
uni.showLoading({ title: '停机中...' })
try {
await stopCardByIccid(card.iccid)
await stopAsset(card.iccid)
uni.hideLoading()
uni.$u.toast('停机成功')
// 刷新列表
@@ -527,7 +523,7 @@ async function handleStartCard(asset: AssetItem, event: Event) {
if (res.confirm) {
uni.showLoading({ title: '复机中...' })
try {
await startCardByIccid(card.iccid)
await startAsset(card.iccid)
uni.hideLoading()
uni.$u.toast('复机成功')
// 刷新列表
@@ -682,135 +678,124 @@ onMounted(async () => {
@scroll="onScroll"
>
<view v-if="assetList.length > 0" class="px-4 pb-4">
<view
v-for="asset in assetList"
:key="`${asset.type}-${asset.id}`"
class="card shadow-sm mb-3 cursor-pointer transition-fast hover:shadow-md active:scale-98"
@click="viewAssetDetail(asset)"
>
<!-- 部区域 -->
<view class="flex items-start justify-between mb-3">
<!-- 左侧信息 -->
<view class="flex items-start gap-2 flex-1 min-w-0">
<!-- 状态指示点 -->
<view
class="w-2 h-2 rounded-full mt-1 flex-shrink-0"
:style="{ backgroundColor: asset.statusColor }"
/>
<!-- 资产名称 -->
<view class="flex-1 min-w-0">
<text class="text-base font-600 text-primary block truncate">
<view
v-for="asset in assetList"
:key="`${asset.type}-${asset.id}`"
class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3 cursor-pointer"
@click="viewAssetDetail(asset)"
>
<!-- 部区域左侧状态+名称右侧类型标签 -->
<view class="flex items-start justify-between mb-3">
<view class="flex items-center gap-2 flex-1 min-w-0">
<view
class="w-2 h-2 rounded-full mt-1 flex-shrink-0"
:style="{ backgroundColor: asset.statusColor }"
/>
<text class="text-15px font-600 text-[#212121] truncate">
{{ asset.name }}
</text>
<text class="text-xs text-tertiary mt-1 block">
{{ asset.detail }}
</text>
</view>
<view
class="px-2 py-1 rounded-6px text-11px font-500 flex-shrink-0 ml-2"
:style="{
backgroundColor: asset.type === 'card' ? '#e6f4ff' : '#f5f5f5',
color: asset.type === 'card' ? 'var(--brand-primary)' : '#666',
}"
>
{{ asset.type === 'card' ? 'IoT卡' : '设备' }}
</view>
</view>
<!-- 类型徽章 -->
<view
class="px-2 py-1 radius-sm text-xs font-500 ml-2 flex-shrink-0"
:style="{
backgroundColor: asset.type === 'card' ? 'rgba(255, 103, 0, 0.1)' : 'rgba(51, 51, 51, 0.1)',
color: asset.type === 'card' ? 'var(--brand-primary)' : 'var(--brand-secondary)',
}"
>
{{ asset.type === 'card' ? 'IoT卡' : '设备' }}
</view>
</view>
<!-- 底部状态栏 -->
<view class="flex items-center justify-between pt-3 border-t border-border-secondary">
<!-- 状态标签 -->
<view class="flex items-center gap-1">
<view
class="w-1.5 h-1.5 rounded-full"
:style="{ backgroundColor: asset.statusColor }"
/>
<text class="text-sm font-500" :style="{ color: asset.statusColor }">
{{ asset.status }}
<!-- 详情信息 -->
<view class="mb-3">
<text class="text-12px text-[#999]">
{{ asset.detail }}
</text>
</view>
<!-- 操作按钮 -->
<view class="flex items-center gap-2">
<!-- IoT卡操作按钮 -->
<template v-if="asset.type === 'card'">
<!-- 根据网络状态显示对应按钮 -->
<template v-if="(asset.raw as CardInfo).network_status === 0">
<!-- 已停机,只显示复机按钮 -->
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
style="background: #52c41a; color: white;"
@click="handleStartCard(asset, $event)"
>
<text class="text-xs font-500">复机</text>
</view>
</template>
<template v-else-if="(asset.raw as CardInfo).network_status === 1">
<!-- 正常运行,只显示停机按钮 -->
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
style="background: #ff4d4f; color: white;"
@click="handleStopCard(asset, $event)"
>
<text class="text-xs font-500">停机</text>
</view>
<!-- 底部区域状态标签 + 操作按钮 -->
<view class="flex items-center justify-between pt-3 border-t border-[#f5f5f5]">
<view class="flex items-center gap-1">
<view
class="w-1.5 h-1.5 rounded-full"
:style="{ backgroundColor: asset.statusColor }"
/>
<text class="text-13px font-500" :style="{ color: asset.statusColor }">
{{ asset.status }}
</text>
</view>
<view class="flex items-center gap-2">
<!-- IoT卡操作按钮 -->
<template v-if="asset.type === 'card'">
<template v-if="(asset.raw as CardInfo).network_status === 0">
<view
class="px-3 py-1 rounded-lg"
style="background: #52c41a; color: white;"
@click="handleStartCard(asset, $event)"
>
<text class="text-12px font-500">复机</text>
</view>
</template>
<template v-else-if="(asset.raw as CardInfo).network_status === 1">
<view
class="px-3 py-1 rounded-lg"
style="background: #ff4d4f; color: white;"
@click="handleStopCard(asset, $event)"
>
<text class="text-12px font-500">停机</text>
</view>
</template>
<template v-else>
<view
class="px-3 py-1 rounded-lg"
style="background: #ff4d4f; color: white;"
@click="handleStopCard(asset, $event)"
>
<text class="text-12px font-500">停机</text>
</view>
<view
class="px-3 py-1 rounded-lg"
style="background: #52c41a; color: white;"
@click="handleStartCard(asset, $event)"
>
<text class="text-12px font-500">复机</text>
</view>
</template>
</template>
<!-- 设备操作按钮 -->
<template v-else>
<!-- 其他状态,显示两个按钮 -->
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
class="px-3 py-1 rounded-lg"
style="background: #ff4d4f; color: white;"
@click="handleStopCard(asset, $event)"
@click="handleStopDevice(asset, $event)"
>
<text class="text-xs font-500">停机</text>
<text class="text-12px font-500">停机</text>
</view>
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
class="px-3 py-1 rounded-lg"
style="background: #52c41a; color: white;"
@click="handleStartCard(asset, $event)"
@click="handleStartDevice(asset, $event)"
>
<text class="text-xs font-500">复机</text>
<text class="text-12px font-500">复机</text>
</view>
</template>
</template>
<!-- 设备操作按钮 - 始终显示两个按钮 -->
<template v-else>
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
style="background: #ff4d4f; color: white;"
@click="handleStopDevice(asset, $event)"
>
<text class="text-xs font-500">停机</text>
</view>
<view
class="px-3 py-1 rounded-lg flex items-center justify-center"
style="background: #52c41a; color: white;"
@click="handleStartDevice(asset, $event)"
>
<text class="text-xs font-500">复机</text>
</view>
</template>
<!-- 箭头 -->
<i class="i-mdi-chevron-right text-xl text-quaternary" />
<i class="i-mdi-chevron-right text-20px text-[#cbd5e1]" />
</view>
</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="py-4 text-center">
<i class="i-mdi-loading animate-spin text-xl text-brand mr-2" />
<text class="text-sm text-[#64748b]">加载中...</text>
<!-- 加载更多提示 -->
<view v-if="loading" class="py-4 text-center">
<i class="i-mdi-loading animate-spin text-xl text-brand mr-2" />
<text class="text-sm text-[#64748b]">加载中...</text>
</view>
<view v-else-if="!((activeTab === 'card' && cardHasMore) || (activeTab === 'device' && deviceHasMore))" class="py-4 text-center">
<text class="text-sm text-[#94a3b8]">没有更多了</text>
</view>
</view>
<view v-else-if="!((activeTab === 'card' && cardHasMore) || (activeTab === 'device' && deviceHasMore))" class="py-4 text-center">
<text class="text-sm text-[#94a3b8]">没有更多了</text>
</view>
</view>
<!-- 空状态 -->
<view v-else class="px-4">