Simon
1025 lines
34 KiB
Vue
1025 lines
34 KiB
Vue
<!--
|
||
=============================================================================
|
||
企微IT智能服务台 — 终端安全管理页
|
||
=============================================================================
|
||
说明：从火绒API获取终端安全数据，提供管理员全局安全视图
|
||
1. 顶部：4个统计卡片（终端总数/在线终端/高危漏洞/病毒事件）
|
||
2. 中部：终端列表表格（支持搜索、分页、状态筛选）
|
||
3. 右侧抽屉：终端详细信息
|
||
4. 标签页切换：全部终端 / 高危漏洞 / 病毒事件
|
||
-->
|
||
<template>
|
||
<div class="terminal-security-page">
|
||
<!-- 页面标题 -->
|
||
<div class="page-title">终端安全</div>
|
||
<div class="page-desc">火绒企业版终端安全数据，实时查看终端状态、漏洞和病毒事件</div>
|
||
|
||
<!-- 连接状态提示 -->
|
||
<div v-if="connectionError" class="connection-warning">
|
||
<el-icon :size="16"><WarningFilled /></el-icon>
|
||
<span>{{ connectionError }}</span>
|
||
<el-button size="small" text type="primary" @click="$router.push('/integrations')">
|
||
去配置
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 统计卡片行 -->
|
||
<div class="stats-grid">
|
||
<StatCard
|
||
label="终端总数"
|
||
:value="stats.total_terminals"
|
||
valueColor="var(--accent)"
|
||
icon="Monitor"
|
||
iconColor="var(--accent)"
|
||
/>
|
||
<StatCard
|
||
label="在线终端"
|
||
:value="stats.online_terminals"
|
||
valueColor="var(--success)"
|
||
icon="CircleCheckFilled"
|
||
iconColor="var(--success)"
|
||
/>
|
||
<StatCard
|
||
label="高危漏洞终端"
|
||
:value="stats.high_risk_terminals"
|
||
valueColor="var(--danger)"
|
||
icon="WarningFilled"
|
||
iconColor="var(--danger)"
|
||
/>
|
||
<StatCard
|
||
label="今日病毒事件"
|
||
:value="stats.virus_events_today"
|
||
valueColor="var(--warning)"
|
||
icon="Virus"
|
||
iconColor="var(--warning)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 标签页 + 搜索栏 -->
|
||
<div class="table-wrapper">
|
||
<div class="table-header-row">
|
||
<!-- 标签页切换 -->
|
||
<div class="tab-group">
|
||
<el-button
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
:type="activeTab === tab.key ? 'primary' : 'default'"
|
||
size="small"
|
||
@click="switchTab(tab.key)"
|
||
>
|
||
{{ tab.label }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 搜索 -->
|
||
<div class="search-bar">
|
||
<el-input
|
||
v-model="searchQuery"
|
||
placeholder="搜索计算机名或IP"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
size="small"
|
||
style="width: 220px"
|
||
@clear="loadData"
|
||
@keyup.enter="loadData"
|
||
/>
|
||
<el-button size="small" type="primary" @click="loadData">
|
||
<el-icon><Search /></el-icon>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- 全部终端 表格 -->
|
||
<!-- ================================================================ -->
|
||
<el-table
|
||
v-if="activeTab === 'terminals'"
|
||
:data="filteredTerminals"
|
||
style="width: 100%"
|
||
:header-cell-style="tableHeaderStyle"
|
||
:cell-style="tableCellStyle"
|
||
row-class-name="terminal-table-row"
|
||
v-loading="loading"
|
||
element-loading-text="正在加载终端数据..."
|
||
@row-click="showTerminalDetail"
|
||
>
|
||
<el-table-column label="计算机名" min-width="140">
|
||
<template #default="{ row }">
|
||
<span class="terminal-name">{{ row.computer_name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="IP地址" width="130">
|
||
<template #default="{ row }">
|
||
{{ row.local_ip }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="分组" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" effect="plain">{{ row.group_id || '—' }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作系统" width="110">
|
||
<template #default="{ row }">
|
||
<span class="os-text">{{ truncateOs(row.os_version) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="80" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.is_online ? 'success' : 'info'" size="small" effect="dark">
|
||
{{ row.is_online ? '在线' : '离线' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="风险" width="80" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
v-if="row.risk_level"
|
||
:type="getRiskTagType(row.risk_level)"
|
||
size="small"
|
||
>
|
||
{{ getRiskText(row.risk_level) }}
|
||
</el-tag>
|
||
<span v-else class="text-muted">—</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="最后活跃" width="110">
|
||
<template #default="{ row }">
|
||
<span class="time-text">{{ formatTimestamp(row.last_connect_time) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- 高危漏洞 表格 -->
|
||
<!-- ================================================================ -->
|
||
<el-table
|
||
v-else-if="activeTab === 'leaks'"
|
||
:data="filteredLeaks"
|
||
style="width: 100%"
|
||
:header-cell-style="tableHeaderStyle"
|
||
:cell-style="tableCellStyle"
|
||
row-class-name="terminal-table-row"
|
||
v-loading="loading"
|
||
element-loading-text="正在加载漏洞数据..."
|
||
>
|
||
<el-table-column label="计算机名" min-width="140">
|
||
<template #default="{ row }">
|
||
<span class="terminal-name">{{ row.hostname }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="IP地址" width="130">
|
||
<template #default="{ row }">
|
||
{{ row.ip_addr }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="分组" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" effect="plain">{{ row.group_name || row.group_id || '—' }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作系统" width="110">
|
||
<template #default="{ row }">
|
||
<span class="os-text">{{ truncateOs(row.osver) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="80" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.stat === 2 ? 'success' : 'info'" size="small" effect="dark">
|
||
{{ row.stat === 2 ? '在线' : row.stat === 3 ? '异常' : '离线' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="客户端版本" width="110">
|
||
<template #default="{ row }">
|
||
<span class="os-text">{{ row.prodver || '—' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- 病毒事件 表格 -->
|
||
<!-- ================================================================ -->
|
||
<el-table
|
||
v-else-if="activeTab === 'virus'"
|
||
:data="filteredVirusEvents"
|
||
style="width: 100%"
|
||
:header-cell-style="tableHeaderStyle"
|
||
:cell-style="tableCellStyle"
|
||
row-class-name="terminal-table-row"
|
||
v-loading="loading"
|
||
element-loading-text="正在加载病毒事件..."
|
||
>
|
||
<el-table-column label="计算机名" min-width="140">
|
||
<template #default="{ row }">
|
||
<span class="terminal-name">{{ row.computer_name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="IP地址" width="130">
|
||
<template #default="{ row }">
|
||
{{ row.local_ip }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="病毒日志数" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<span :class="{ 'text-danger': row.count > 0 }">{{ row.count }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="处理结果" min-width="200">
|
||
<template #default="{ row }">
|
||
<div v-if="row.result" class="virus-result-tags">
|
||
<el-tag v-if="row.result.success > 0" type="success" size="small" effect="plain" style="margin: 2px">
|
||
成功 {{ row.result.success }}
|
||
</el-tag>
|
||
<el-tag v-if="row.result.fail > 0" type="danger" size="small" effect="plain" style="margin: 2px">
|
||
失败 {{ row.result.fail }}
|
||
</el-tag>
|
||
<el-tag v-if="row.result.ignored > 0" type="warning" size="small" effect="plain" style="margin: 2px">
|
||
忽略 {{ row.result.ignored }}
|
||
</el-tag>
|
||
<el-tag v-if="row.result.trusted > 0" type="info" size="small" effect="plain" style="margin: 2px">
|
||
信任 {{ row.result.trusted }}
|
||
</el-tag>
|
||
</div>
|
||
<span v-else class="text-muted">—</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination-wrapper">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[20, 50, 100]"
|
||
:total="totalItems"
|
||
layout="total, sizes, prev, pager, next"
|
||
small
|
||
@size-change="loadData"
|
||
@current-change="loadData"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- 终端详情抽屉 -->
|
||
<!-- ================================================================ -->
|
||
<el-drawer
|
||
v-model="detailVisible"
|
||
:title="detailData?.computer_name || '终端详情'"
|
||
direction="rtl"
|
||
size="420px"
|
||
destroy-on-close
|
||
>
|
||
<div v-if="detailLoading" style="text-align: center; padding: 40px">
|
||
<el-icon :size="24" class="is-loading"><Loading /></el-icon>
|
||
<div style="margin-top: 8px; color: var(--text-secondary)">加载中...</div>
|
||
</div>
|
||
|
||
<div v-else-if="detailData" class="detail-content">
|
||
<!-- 基本信息 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title">基本信息</div>
|
||
<div class="detail-grid">
|
||
<div class="detail-item">
|
||
<span class="detail-label">计算机名</span>
|
||
<span class="detail-value">{{ detailData.computer_name }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">IP地址</span>
|
||
<span class="detail-value">{{ detailData.local_ip }}</span>
|
||
</div>
|
||
<div class="detail-item" v-if="detailData.mac">
|
||
<span class="detail-label">MAC地址</span>
|
||
<span class="detail-value mono">{{ detailData.mac }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">操作系统</span>
|
||
<span class="detail-value">{{ detailData.os_version }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">状态</span>
|
||
<el-tag :type="detailData.is_online ? 'success' : 'info'" size="small" effect="dark">
|
||
{{ detailData.is_online ? '在线' : '离线' }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">客户端版本</span>
|
||
<span class="detail-value">{{ detailData.version || '—' }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">分组</span>
|
||
<span class="detail-value">{{ detailData.group_id || '—' }}</span>
|
||
</div>
|
||
<div class="detail-item" v-if="detailData.last_connect_time">
|
||
<span class="detail-label">最后活跃</span>
|
||
<span class="detail-value">{{ formatTimestampFull(detailData.last_connect_time) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 硬件信息 -->
|
||
<div v-if="detailData.cpu || detailData.memory" class="detail-section">
|
||
<div class="detail-section-title">硬件信息</div>
|
||
<div class="detail-grid">
|
||
<div v-if="detailData.cpu" class="detail-item">
|
||
<span class="detail-label">CPU</span>
|
||
<span class="detail-value">{{ detailData.cpu }}</span>
|
||
</div>
|
||
<div v-if="detailData.memory" class="detail-item">
|
||
<span class="detail-label">内存</span>
|
||
<span class="detail-value">{{ detailData.memory }}</span>
|
||
</div>
|
||
<div v-if="detailData.disk" class="detail-item">
|
||
<span class="detail-label">硬盘</span>
|
||
<span class="detail-value">{{ detailData.disk }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全状态 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title">安全状态</div>
|
||
<div class="security-status-grid">
|
||
<div class="security-item" :class="detailData.virus_count > 0 ? 'danger' : 'safe'">
|
||
<div class="security-value">{{ detailData.virus_count }}</div>
|
||
<div class="security-label">病毒检测</div>
|
||
</div>
|
||
<div class="security-item" :class="detailData.leak_count > 0 ? 'danger' : 'safe'">
|
||
<div class="security-value">{{ detailData.leak_count }}</div>
|
||
<div class="security-label">高危漏洞</div>
|
||
</div>
|
||
<div class="security-item" :class="detailData.is_isolated ? 'warning' : 'safe'">
|
||
<div class="security-value">{{ detailData.is_isolated ? '是' : '否' }}</div>
|
||
<div class="security-label">网络隔离</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮（P1功能，阶段一灰化） -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title">安全操作</div>
|
||
<div class="action-buttons">
|
||
<el-button size="small" disabled>
|
||
<el-icon><Refresh /></el-icon>
|
||
触发全盘扫描
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
:type="detailData.is_isolated ? 'success' : 'danger'"
|
||
disabled
|
||
>
|
||
<el-icon><Connection /></el-icon>
|
||
{{ detailData.is_isolated ? '解除隔离' : '网络隔离' }}
|
||
</el-button>
|
||
<el-button size="small" disabled>
|
||
<el-icon><Bell /></el-icon>
|
||
推送消息
|
||
</el-button>
|
||
</div>
|
||
<div class="action-hint">安全操作需火绒 API 配置完成后启用</div>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// ==========================================================================
|
||
// 依赖导入
|
||
// ==========================================================================
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import StatCard from '@/components/StatCard.vue'
|
||
import {
|
||
getHuorongTerminals,
|
||
getHuorongTerminalDetail,
|
||
getHuorongLeaks,
|
||
getHuorongVirusEvents,
|
||
} from '@/api/admin'
|
||
import type {
|
||
HuorongTerminal,
|
||
HuorongTerminalDetail,
|
||
HuorongLeakInfo,
|
||
HuorongVirusEvent,
|
||
TerminalSecurityStats,
|
||
} from '@/types'
|
||
|
||
// ==========================================================================
|
||
// 标签页定义
|
||
// ==========================================================================
|
||
const tabs = [
|
||
{ key: 'terminals', label: '全部终端' },
|
||
{ key: 'leaks', label: '高危漏洞' },
|
||
{ key: 'virus', label: '病毒事件' },
|
||
]
|
||
|
||
// ==========================================================================
|
||
// 状态
|
||
// ==========================================================================
|
||
const activeTab = ref<string>('terminals')
|
||
const loading = ref(false)
|
||
const connectionError = ref('')
|
||
|
||
// 统计概览
|
||
const stats = reactive<TerminalSecurityStats>({
|
||
total_terminals: 0,
|
||
online_terminals: 0,
|
||
high_risk_terminals: 0,
|
||
virus_events_today: 0,
|
||
isolated_terminals: 0,
|
||
})
|
||
|
||
// 终端列表
|
||
const terminals = ref<HuorongTerminal[]>([])
|
||
const leaks = ref<HuorongLeakInfo[]>([])
|
||
const virusEvents = ref<HuorongVirusEvent[]>([])
|
||
|
||
// 分页
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(20)
|
||
const totalItems = ref(0)
|
||
|
||
// 搜索
|
||
const searchQuery = ref('')
|
||
|
||
// 终端详情抽屉
|
||
const detailVisible = ref(false)
|
||
const detailLoading = ref(false)
|
||
const detailData = ref<HuorongTerminalDetail | null>(null)
|
||
|
||
// 表格样式
|
||
const tableHeaderStyle = {
|
||
background: 'var(--bg-tertiary)',
|
||
color: 'var(--text-secondary)',
|
||
fontSize: '12px',
|
||
}
|
||
const tableCellStyle = {
|
||
color: 'var(--text-primary)',
|
||
fontSize: '13px',
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 计算属性：搜索过滤
|
||
// ==========================================================================
|
||
const filteredTerminals = computed(() => {
|
||
if (!searchQuery.value) return terminals.value
|
||
const q = searchQuery.value.toLowerCase()
|
||
return terminals.value.filter(
|
||
(t) => t.computer_name.toLowerCase().includes(q) || t.local_ip.toLowerCase().includes(q)
|
||
)
|
||
})
|
||
|
||
const filteredLeaks = computed(() => {
|
||
if (!searchQuery.value) return leaks.value
|
||
const q = searchQuery.value.toLowerCase()
|
||
return leaks.value.filter(
|
||
(l) => l.hostname.toLowerCase().includes(q) || l.ip_addr.toLowerCase().includes(q)
|
||
)
|
||
})
|
||
|
||
const filteredVirusEvents = computed(() => {
|
||
if (!searchQuery.value) return virusEvents.value
|
||
const q = searchQuery.value.toLowerCase()
|
||
return virusEvents.value.filter(
|
||
(v) => v.computer_name.toLowerCase().includes(q) || v.local_ip.toLowerCase().includes(q)
|
||
)
|
||
})
|
||
|
||
// ==========================================================================
|
||
// 初始化
|
||
// ==========================================================================
|
||
onMounted(() => {
|
||
loadData()
|
||
loadStats() // 异步加载全局统计数据（不影响页面主内容加载）
|
||
})
|
||
|
||
// ==========================================================================
|
||
// 综合统计加载（异步，不阻塞主内容）
|
||
// ==========================================================================
|
||
|
||
/** 异步加载全局统计数据，填充顶部4个统计卡片 */
|
||
async function loadStats(): Promise<void> {
|
||
try {
|
||
// 1. 从 _leak 接口获取高危终端数和终端总数
|
||
const leakResp = await getHuorongLeaks({ page: 1, per_page: 1 })
|
||
const leakData = leakResp.data.data
|
||
if (!leakData.error) {
|
||
stats.high_risk_terminals = leakData.risk_client || 0
|
||
if (leakData.all_client) {
|
||
stats.total_terminals = leakData.all_client
|
||
}
|
||
}
|
||
|
||
// 2. 从 _virus_events 接口获取病毒事件统计（type=2=全部）
|
||
const virusResp = await getHuorongVirusEvents({ page: 1, per_page: 200 })
|
||
const virusData = virusResp.data.data
|
||
if (!virusData.error) {
|
||
const items: HuorongVirusEvent[] = virusData.items || []
|
||
// 统计有处理失败病毒事件的终端数
|
||
stats.virus_events_today = items.reduce(
|
||
(sum: number, v: HuorongVirusEvent) => sum + (v.result?.fail || 0), 0
|
||
)
|
||
}
|
||
} catch {
|
||
// 统计加载失败不影响主页面，静默忽略
|
||
}
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 数据加载
|
||
// ==========================================================================
|
||
async function loadData(): Promise<void> {
|
||
loading.value = true
|
||
connectionError.value = ''
|
||
|
||
try {
|
||
if (activeTab.value === 'terminals') {
|
||
await loadTerminals()
|
||
} else if (activeTab.value === 'leaks') {
|
||
await loadLeaks()
|
||
} else if (activeTab.value === 'virus') {
|
||
await loadVirusEvents()
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 加载终端列表 */
|
||
async function loadTerminals(): Promise<void> {
|
||
try {
|
||
const response = await getHuorongTerminals({
|
||
page: currentPage.value,
|
||
per_page: pageSize.value,
|
||
})
|
||
const data = response.data.data
|
||
|
||
// 检查是否有错误（API未配置等）
|
||
if (data.error) {
|
||
connectionError.value = data.error
|
||
// 使用 Demo 数据
|
||
loadDemoTerminals()
|
||
return
|
||
}
|
||
|
||
terminals.value = data.items || []
|
||
totalItems.value = data.total || 0
|
||
|
||
// 计算统计
|
||
stats.total_terminals = data.total || terminals.value.length
|
||
// 在线终端数：从当前页数据估算（精确统计需遍历所有分页）
|
||
const onlineInPage = terminals.value.filter((t) => t.is_online).length
|
||
const pageSize_ = terminals.value.length || 1
|
||
// 按当前页在线比例估算总数
|
||
stats.online_terminals = Math.round(
|
||
(onlineInPage / pageSize_) * stats.total_terminals
|
||
)
|
||
} catch {
|
||
connectionError.value = '无法连接火绒API，请检查集成配置'
|
||
loadDemoTerminals()
|
||
}
|
||
}
|
||
|
||
/** 加载漏洞信息 */
|
||
async function loadLeaks(): Promise<void> {
|
||
try {
|
||
const response = await getHuorongLeaks({
|
||
page: currentPage.value,
|
||
per_page: pageSize.value,
|
||
})
|
||
const data = response.data.data
|
||
|
||
if (data.error) {
|
||
connectionError.value = data.error
|
||
loadDemoLeaks()
|
||
return
|
||
}
|
||
|
||
leaks.value = data.items || []
|
||
// _leak 接口返回 risk_client(高危终端数) 和 all_client(终端总数)
|
||
totalItems.value = data.risk_client || data.total || leaks.value.length
|
||
stats.high_risk_terminals = data.risk_client || 0
|
||
// 同步更新终端总数统计
|
||
if (data.all_client) {
|
||
stats.total_terminals = data.all_client
|
||
}
|
||
} catch {
|
||
loadDemoLeaks()
|
||
}
|
||
}
|
||
|
||
/** 加载病毒事件 */
|
||
async function loadVirusEvents(): Promise<void> {
|
||
try {
|
||
const response = await getHuorongVirusEvents({
|
||
page: currentPage.value,
|
||
per_page: pageSize.value,
|
||
})
|
||
const data = response.data.data
|
||
|
||
if (data.error) {
|
||
connectionError.value = data.error
|
||
loadDemoVirusEvents()
|
||
return
|
||
}
|
||
|
||
virusEvents.value = data.items || []
|
||
totalItems.value = data.total || 0
|
||
// 计算今日病毒事件：有病毒日志的终端中，未处理(fail)的数量
|
||
stats.virus_events_today = virusEvents.value.reduce(
|
||
(sum, v) => sum + (v.result?.fail || 0), 0
|
||
)
|
||
} catch {
|
||
loadDemoVirusEvents()
|
||
}
|
||
}
|
||
|
||
// ==========================================================================
|
||
// Demo 数据（API未配置时使用）
|
||
// ==========================================================================
|
||
function loadDemoTerminals(): void {
|
||
terminals.value = [
|
||
{ client_id: 'd1', client_name: 'IT-SONGXIAN', computer_name: 'IT-SONGXIAN', local_ip: '192.168.3.101', connect_ip: '192.168.3.101', mac: 'AA-BB-CC-DD-EE-01', group_id: 1, os_version: 'Windows 11 Pro', version: '2.0.18.3', definitions: '2026-06-12', is_online: true, last_connect_time: Math.floor(Date.now() / 1000), risk_level: 'safe', virus_count: 0, leak_count: 0 },
|
||
{ client_id: 'd2', client_name: 'IT-WANGLI', computer_name: 'IT-WANGLI', local_ip: '192.168.3.102', connect_ip: '192.168.3.102', mac: 'AA-BB-CC-DD-EE-02', group_id: 1, os_version: 'Windows 10 Pro', version: '2.0.18.3', definitions: '2026-06-11', is_online: false, last_connect_time: Math.floor((Date.now() - 3600000) / 1000), risk_level: 'low', virus_count: 0, leak_count: 2 },
|
||
{ client_id: 'd3', client_name: 'FIN-ZHAOGANG', computer_name: 'FIN-ZHAOGANG', local_ip: '192.168.3.201', connect_ip: '192.168.3.201', mac: 'AA-BB-CC-DD-EE-03', group_id: 2, os_version: 'Windows 11 Pro', version: '2.0.18.2', definitions: '2026-06-10', is_online: true, last_connect_time: Math.floor(Date.now() / 1000), risk_level: 'high', virus_count: 1, leak_count: 5 },
|
||
{ client_id: 'd4', client_name: 'HR-SUNFANG', computer_name: 'HR-SUNFANG', local_ip: '192.168.3.301', connect_ip: '192.168.3.301', mac: 'AA-BB-CC-DD-EE-04', group_id: 3, os_version: 'Windows 10 Pro', version: '2.0.18.3', definitions: '2026-06-12', is_online: true, last_connect_time: Math.floor(Date.now() / 1000), risk_level: 'medium', virus_count: 0, leak_count: 3 },
|
||
{ client_id: 'd5', client_name: 'MKT-ZHOULEI', computer_name: 'MKT-ZHOULEI', local_ip: '192.168.3.401', connect_ip: '192.168.3.401', mac: 'AA-BB-CC-DD-EE-05', group_id: 4, os_version: 'macOS 14.5', version: '2.0.18.3', definitions: '2026-06-12', is_online: true, last_connect_time: Math.floor(Date.now() / 1000), risk_level: 'safe', virus_count: 0, leak_count: 0 },
|
||
{ client_id: 'd6', client_name: 'RD-WUTING', computer_name: 'RD-WUTING', local_ip: '192.168.3.501', connect_ip: '192.168.3.501', mac: 'AA-BB-CC-DD-EE-06', group_id: 5, os_version: 'Windows 11 Pro', version: '2.0.18.3', definitions: '2026-06-12', is_online: true, last_connect_time: Math.floor(Date.now() / 1000), risk_level: 'low', virus_count: 0, leak_count: 1 },
|
||
]
|
||
totalItems.value = terminals.value.length
|
||
stats.total_terminals = 6
|
||
stats.online_terminals = 5
|
||
stats.high_risk_terminals = 1
|
||
stats.virus_events_today = 1
|
||
}
|
||
|
||
function loadDemoLeaks(): void {
|
||
leaks.value = [
|
||
{ cid: 'd3', hostname: 'FIN-ZHAOGANG', client_name: 'FIN-ZHAOGANG', group_name: '财务部', group_id: 2, ip_addr: '192.168.3.201', call_ip: '192.168.3.201', mac: 'AA-BB-CC-DD-EE-03', osver: 'Windows 11 Pro', os_type: 'Windows', prodver: '2.0.18.2', virdb: 1718000000, stat: 2 },
|
||
{ cid: 'd4', hostname: 'HR-SUNFANG', client_name: 'HR-SUNFANG', group_name: '人力资源部', group_id: 3, ip_addr: '192.168.3.301', call_ip: '192.168.3.301', mac: 'AA-BB-CC-DD-EE-04', osver: 'Windows 10 Pro', os_type: 'Windows', prodver: '2.0.18.3', virdb: 1718000000, stat: 2 },
|
||
{ cid: 'd2', hostname: 'IT-WANGLI', client_name: 'IT-WANGLI', group_name: 'IT部', group_id: 1, ip_addr: '192.168.3.102', call_ip: '192.168.3.102', mac: 'AA-BB-CC-DD-EE-02', osver: 'Windows 10 Pro', os_type: 'Windows', prodver: '2.0.18.3', virdb: 1717900000, stat: 1 },
|
||
]
|
||
totalItems.value = leaks.value.length
|
||
stats.high_risk_terminals = 3
|
||
}
|
||
|
||
function loadDemoVirusEvents(): void {
|
||
virusEvents.value = [
|
||
{ group_id: 2, client_id: 'd3', client_name: 'FIN-ZHAOGANG', computer_name: 'FIN-ZHAOGANG', local_ip: '192.168.3.201', connect_ip: '192.168.3.201', mac: 'AA-BB-CC-DD-EE-03', count: 3, result: { success: 2, fail: 1, ignored: 0, trusted: 0 } },
|
||
]
|
||
totalItems.value = virusEvents.value.length
|
||
stats.virus_events_today = 1
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 标签页切换
|
||
// ==========================================================================
|
||
function switchTab(tab: string): void {
|
||
activeTab.value = tab
|
||
currentPage.value = 1
|
||
searchQuery.value = ''
|
||
loadData()
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 终端详情
|
||
// ==========================================================================
|
||
async function showTerminalDetail(row: HuorongTerminal): Promise<void> {
|
||
detailVisible.value = true
|
||
detailLoading.value = true
|
||
detailData.value = null
|
||
|
||
try {
|
||
const response = await getHuorongTerminalDetail(row.client_id)
|
||
const data = response.data.data
|
||
|
||
if (data.error) {
|
||
// API错误，用基本数据展示
|
||
detailData.value = {
|
||
client_id: row.client_id,
|
||
computer_name: row.computer_name,
|
||
local_ip: row.local_ip,
|
||
mac: row.mac,
|
||
os_version: row.os_version,
|
||
version: row.version,
|
||
is_online: row.is_online,
|
||
last_connect_time: row.last_connect_time,
|
||
risk_level: row.risk_level || 'safe',
|
||
virus_count: row.virus_count || 0,
|
||
leak_count: row.leak_count || 0,
|
||
is_isolated: false,
|
||
}
|
||
} else {
|
||
detailData.value = data
|
||
}
|
||
} catch {
|
||
// 回退到基本数据
|
||
detailData.value = {
|
||
client_id: row.client_id,
|
||
computer_name: row.computer_name,
|
||
local_ip: row.local_ip,
|
||
mac: row.mac,
|
||
os_version: row.os_version,
|
||
version: row.version,
|
||
is_online: row.is_online,
|
||
last_connect_time: row.last_connect_time,
|
||
risk_level: row.risk_level || 'safe',
|
||
virus_count: row.virus_count || 0,
|
||
leak_count: row.leak_count || 0,
|
||
is_isolated: false,
|
||
}
|
||
} finally {
|
||
detailLoading.value = false
|
||
}
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 辅助方法
|
||
// ==========================================================================
|
||
|
||
/** 截断操作系统名称 */
|
||
function truncateOs(os: string): string {
|
||
if (!os) return '—'
|
||
if (os.length > 16) return os.substring(0, 15) + '...'
|
||
return os
|
||
}
|
||
|
||
/** 格式化Unix时间戳（简短） */
|
||
function formatTimestamp(ts?: number): string {
|
||
if (!ts) return '—'
|
||
try {
|
||
const d = new Date(ts * 1000) // Unix时间戳转毫秒
|
||
const now = new Date()
|
||
const diffMs = now.getTime() - d.getTime()
|
||
const diffMin = Math.floor(diffMs / 60000)
|
||
|
||
if (diffMin < 1) return '刚刚'
|
||
if (diffMin < 60) return `${diffMin}分钟前`
|
||
const diffHour = Math.floor(diffMin / 60)
|
||
if (diffHour < 24) return `${diffHour}小时前`
|
||
return `${Math.floor(diffHour / 24)}天前`
|
||
} catch {
|
||
return '—'
|
||
}
|
||
}
|
||
|
||
/** 格式化Unix时间戳（完整） */
|
||
function formatTimestampFull(ts?: number): string {
|
||
if (!ts) return '—'
|
||
try {
|
||
const d = new Date(ts * 1000)
|
||
return d.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
} catch {
|
||
return '—'
|
||
}
|
||
}
|
||
|
||
/** 格式化时间（简短） — 兼容ISO字符串格式 */
|
||
function formatTime(timeStr: string): string {
|
||
if (!timeStr) return '—'
|
||
try {
|
||
const d = new Date(timeStr)
|
||
const now = new Date()
|
||
const diffMs = now.getTime() - d.getTime()
|
||
const diffMin = Math.floor(diffMs / 60000)
|
||
|
||
if (diffMin < 1) return '刚刚'
|
||
if (diffMin < 60) return `${diffMin}分钟前`
|
||
const diffHour = Math.floor(diffMin / 60)
|
||
if (diffHour < 24) return `${diffHour}小时前`
|
||
return `${Math.floor(diffHour / 24)}天前`
|
||
} catch {
|
||
return '—'
|
||
}
|
||
}
|
||
|
||
/** 格式化时间（完整） */
|
||
function formatTimeFull(timeStr: string): string {
|
||
if (!timeStr) return '—'
|
||
try {
|
||
const d = new Date(timeStr)
|
||
return d.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
} catch {
|
||
return '—'
|
||
}
|
||
}
|
||
|
||
/** 风险等级标签类型 */
|
||
function getRiskTagType(level: string): string {
|
||
switch (level) {
|
||
case 'high': return 'danger'
|
||
case 'medium': return 'warning'
|
||
case 'low': return 'info'
|
||
case 'safe': return 'success'
|
||
default: return 'info'
|
||
}
|
||
}
|
||
|
||
/** 风险等级文本 */
|
||
function getRiskText(level: string): string {
|
||
switch (level) {
|
||
case 'high': return '高危'
|
||
case 'medium': return '中危'
|
||
case 'low': return '低危'
|
||
case 'safe': return '安全'
|
||
default: return level
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 连接警告 */
|
||
.connection-warning {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
background: rgba(234, 179, 8, 0.1);
|
||
border: 1px solid rgba(234, 179, 8, 0.3);
|
||
border-radius: var(--radius);
|
||
margin-bottom: 16px;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 标签页组 */
|
||
.tab-group {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 搜索栏 */
|
||
.search-bar {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 分页 */
|
||
.pagination-wrapper {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 终端名称 */
|
||
.terminal-name {
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
.terminal-name:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 操作系统文本 */
|
||
.os-text {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 时间文本 */
|
||
.time-text {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* 危险文本 */
|
||
.text-danger {
|
||
color: var(--danger);
|
||
font-weight: 600;
|
||
}
|
||
.text-muted {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ========== 终端详情抽屉样式 ========== */
|
||
|
||
/* 详情内容 */
|
||
.detail-content {
|
||
padding: 0 4px;
|
||
}
|
||
|
||
/* 详情区块 */
|
||
.detail-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.detail-section-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 12px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
/* 详情网格 */
|
||
.detail-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 13px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.mono {
|
||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 安全状态网格 */
|
||
.security-status-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.security-item {
|
||
text-align: center;
|
||
padding: 12px 8px;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.security-item.safe {
|
||
background: rgba(34, 197, 94, 0.08);
|
||
border-color: rgba(34, 197, 94, 0.2);
|
||
}
|
||
.security-item.danger {
|
||
background: rgba(239, 68, 68, 0.08);
|
||
border-color: rgba(239, 68, 68, 0.2);
|
||
}
|
||
.security-item.warning {
|
||
background: rgba(234, 179, 8, 0.08);
|
||
border-color: rgba(234, 179, 8, 0.2);
|
||
}
|
||
|
||
.security-value {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
.security-item.danger .security-value {
|
||
color: var(--danger);
|
||
}
|
||
.security-item.warning .security-value {
|
||
color: var(--warning);
|
||
}
|
||
|
||
.security-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-hint {
|
||
margin-top: 8px;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 终端表格行悬停 */
|
||
.terminal-table-row:hover td {
|
||
background-color: var(--bg-tertiary) !important;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|