3198 lines
99 KiB
Vue
3198 lines
99 KiB
Vue
<template>
|
||
<div class="server-container">
|
||
<!-- 页面标题和状态栏 -->
|
||
<div class="page-header">
|
||
<div class="left">
|
||
<el-button
|
||
type="text"
|
||
@click="goBack"
|
||
:icon="ArrowLeft"
|
||
class="back-btn"
|
||
>
|
||
返回
|
||
</el-button>
|
||
<h2 class="title">服务器详情</h2>
|
||
<el-tag
|
||
:type="serverMessage.state == 0 ? 'danger' : 'success'"
|
||
effect="dark"
|
||
class="status-tag"
|
||
>
|
||
<span class="status-dot" :class="serverMessage.state == 0 ? 'offline' : 'online'"></span>
|
||
{{ serverMessage.state == 0 ? "离线" : "在线" }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="actions">
|
||
<el-button type="primary" @click="initData" :icon="Refresh">
|
||
刷新数据
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务器信息卡片 -->
|
||
<div class="server-info" v-loading="loading">
|
||
<div class="info-card main-info">
|
||
<div class="card-title">
|
||
<el-icon><Monitor /></el-icon>
|
||
<span>基本信息</span>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-item">
|
||
<div class="info-label">服务器名称</div>
|
||
<div class="info-value highlight">{{ serverMessage.name || '未设置' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">服务器ID</div>
|
||
<div class="info-value">{{ serverMessage.server_id || '未知' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">IP地址</div>
|
||
<div class="info-value">{{ serverMessage.server_ip || '未设置' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">创建时间</div>
|
||
<div class="info-value">{{ serverMessage.created_at || '未知' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card resource-info">
|
||
<div class="card-title">
|
||
<el-icon><CpuIcon /></el-icon>
|
||
<span>资源配置</span>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-item">
|
||
<div class="info-label">CPU</div>
|
||
<div class="info-value">{{ serverMessage.cpu || '0' }} 核心</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">内存</div>
|
||
<div class="info-value">{{ serverMessage.memory || '0' }} GB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">硬盘</div>
|
||
<div class="info-value">{{ serverMessage.disk || '0' }} GB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">带宽</div>
|
||
<div class="info-value">{{ serverMessage.bandwidth || '0' }} Mbps</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card location-info">
|
||
<div class="card-title">
|
||
<el-icon><Location /></el-icon>
|
||
<span>位置信息</span>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-item location">
|
||
<div class="info-label">地区</div>
|
||
<div class="info-value">{{ serverMessage.location || '未设置' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 硬件和流量信息卡片 -->
|
||
<div class="server-detail-info" v-loading="loading">
|
||
<div class="info-card hardware-info">
|
||
<div class="card-title">
|
||
<el-icon><Monitor /></el-icon>
|
||
<span>硬件信息</span>
|
||
<span v-if="diskInfo && Array.isArray(diskInfo) && diskInfo.length > 0" class="device-count">
|
||
({{ diskInfo.length }}个设备)
|
||
</span>
|
||
</div>
|
||
|
||
<div class="info-content">
|
||
<!-- 显示所有磁盘设备信息 -->
|
||
<template v-if="diskInfo && Array.isArray(diskInfo) && diskInfo.length > 0">
|
||
<!-- 总览信息 -->
|
||
<div class="hardware-summary">
|
||
<div class="summary-item">
|
||
<div class="info-label">总容量</div>
|
||
<div class="info-value highlight">{{ getTotalCapacity() }} GB</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="info-label">已使用</div>
|
||
<div class="info-value">{{ getTotalUsed() }} GB</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="info-label">平均使用率</div>
|
||
<div class="info-value" :class="getUsageClass(getAverageUsage())">{{ getAverageUsage() }}%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备详情 -->
|
||
<div class="hardware-devices">
|
||
<div v-for="(disk, index) in diskInfo" :key="index" class="device-item">
|
||
<div class="device-header">
|
||
<div class="device-title">
|
||
<el-icon><Files /></el-icon>
|
||
{{ disk.device || `存储设备 ${index + 1}` }}
|
||
</div>
|
||
<el-tag
|
||
:type="getDeviceStatusType(disk.percent)"
|
||
size="small"
|
||
>
|
||
{{ getDeviceStatusText(disk.percent) }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<div class="device-details">
|
||
<div class="detail-row">
|
||
<div class="info-item">
|
||
<div class="info-label">总容量</div>
|
||
<div class="info-value">{{ formatSize(disk.total_gb) }} GB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">已使用</div>
|
||
<div class="info-value">{{ formatSize(disk.used_gb) }} GB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">可用空间</div>
|
||
<div class="info-value">{{ formatSize(disk.free_gb) }} GB</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">使用率</div>
|
||
<div class="info-value" :class="getUsageClass(disk.percent)">
|
||
{{ disk.percent }}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用率进度条 -->
|
||
<div class="usage-progress">
|
||
<el-progress
|
||
:percentage="disk.percent"
|
||
:color="getUsageColor(disk.percent)"
|
||
:stroke-width="6"
|
||
:show-text="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 数据异常时的显示 -->
|
||
<template v-else>
|
||
<div class="info-item">
|
||
<div class="info-label">硬件信息</div>
|
||
<div class="info-value">{{ typeof diskInfo === 'string' ? diskInfo : '暂无数据' }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card real-hardware-info">
|
||
<div class="card-title">
|
||
<el-icon><CpuIcon /></el-icon>
|
||
<span>实际硬件划分</span>
|
||
</div>
|
||
<div class="info-content">
|
||
<template v-if="realDiskInfo && typeof realDiskInfo === 'object'">
|
||
<!-- 主要的磁盘划分信息 -->
|
||
<div class="info-item ">
|
||
<div class="info-label">已分配磁盘空间</div>
|
||
<div class="info-value highlight">
|
||
{{ formatRealDiskValue(realDiskInfo.allocated_disk) }} {{ realDiskInfo.unit || 'GB' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 如果有其他硬件信息也显示 -->
|
||
<template v-if="realDiskInfo.allocated_cpu && realDiskInfo.allocated_cpu !== '暂无数据'">
|
||
<div class="info-item">
|
||
<div class="info-label">已分配CPU</div>
|
||
<div class="info-value">{{ realDiskInfo.allocated_cpu }} 核</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="realDiskInfo.allocated_memory && realDiskInfo.allocated_memory !== '暂无数据'">
|
||
<div class="info-item">
|
||
<div class="info-label">已分配内存</div>
|
||
<div class="info-value">{{ realDiskInfo.allocated_memory }} GB</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="realDiskInfo.remaining_resources && realDiskInfo.remaining_resources !== '暂无数据'">
|
||
<div class="info-item">
|
||
<div class="info-label">剩余资源</div>
|
||
<div class="info-value">{{ realDiskInfo.remaining_resources }}%</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 数据异常时的显示 -->
|
||
<template v-else>
|
||
<div class="info-item">
|
||
<div class="info-label">硬件划分信息</div>
|
||
<div class="info-value">{{ typeof realDiskInfo === 'string' ? realDiskInfo : '暂无数据' }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card traffic-info">
|
||
<div class="card-title">
|
||
<el-icon><Monitor /></el-icon>
|
||
<span>流量信息</span>
|
||
</div>
|
||
<div class="info-content">
|
||
<template v-if="trafficInfo && typeof trafficInfo === 'object'">
|
||
<!-- 容器服务器：实时网络速率 -->
|
||
<template v-if="TypeData === 'dockerContainer'">
|
||
<div class="traffic-section">
|
||
<div class="section-title">
|
||
实时网络速率
|
||
<el-tag type="info" size="small" style="margin-left: 8px;">实时监控</el-tag>
|
||
</div>
|
||
<div class="traffic-speed-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">下行速率</div>
|
||
<div class="info-value highlight">
|
||
{{ trafficInfo.rx_speed_display || trafficInfo.download_traffic || '0 KB/s' }}
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">上行速率</div>
|
||
<div class="info-value highlight">
|
||
{{ trafficInfo.tx_speed_display || trafficInfo.upload_traffic || '0 KB/s' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="traffic-section">
|
||
<div class="section-title">统计说明</div>
|
||
<div class="traffic-note">
|
||
<el-alert
|
||
title="容器服务器说明"
|
||
type="info"
|
||
description="容器服务器提供实时流量速率监控，不支持历史累计流量统计"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 虚拟机服务器：实时速率 + 累计流量 -->
|
||
<template v-else>
|
||
<div class="traffic-section">
|
||
<div class="section-title">实时网络速率</div>
|
||
<div class="traffic-speed-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">下行速率</div>
|
||
<div class="info-value highlight">
|
||
{{ typeof trafficInfo.rx_speed === 'number' ? formatNetworkSpeed(trafficInfo.rx_speed) : trafficInfo.rx_speed }}
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">上行速率</div>
|
||
<div class="info-value highlight">
|
||
{{ typeof trafficInfo.tx_speed === 'number' ? formatNetworkSpeed(trafficInfo.tx_speed) : trafficInfo.tx_speed }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 累计流量统计 -->
|
||
<div class="traffic-section">
|
||
<div class="section-title">累计流量统计</div>
|
||
<div class="traffic-total-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">下行总流量</div>
|
||
<div class="info-value">
|
||
{{ typeof trafficInfo.rx_total === 'number' ? formatTrafficBytes(trafficInfo.rx_total) : trafficInfo.rx_total }}
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">上行总流量</div>
|
||
<div class="info-value">
|
||
{{ typeof trafficInfo.tx_total === 'number' ? formatTrafficBytes(trafficInfo.tx_total) : trafficInfo.tx_total }}
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">总计流量</div>
|
||
<div class="info-value highlight">
|
||
{{ typeof trafficInfo.rx_total === 'number' && typeof trafficInfo.tx_total === 'number' ?
|
||
formatTrafficBytes(trafficInfo.rx_total + trafficInfo.tx_total) : '暂无数据' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 数据异常时的显示 -->
|
||
<template v-else>
|
||
<div class="info-item">
|
||
<div class="info-label">流量信息</div>
|
||
<div class="info-value">{{ typeof trafficInfo === 'string' ? trafficInfo : '暂无数据' }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card total-traffic-info" v-if="!isTotalTrafficError">
|
||
<div class="card-title">
|
||
<el-icon><DataAnalysis /></el-icon>
|
||
<span>历史总流量统计</span>
|
||
<el-tag type="success" size="small" style="margin-left: 8px;">已加载</el-tag>
|
||
</div>
|
||
<div class="info-content">
|
||
<!-- 总体统计 -->
|
||
<div class="traffic-section">
|
||
<div class="section-title">总体统计</div>
|
||
<div class="traffic-total-grid">
|
||
<div class="info-item">
|
||
<div class="info-label">历史总流量</div>
|
||
<div class="info-value highlight">{{ totalTrafficInfo.total_traffic || '0.00 GB' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">平均日流量</div>
|
||
<div class="info-value">{{ totalTrafficInfo.avg_daily_traffic || '0.00 GB' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">流量趋势</div>
|
||
<div class="info-value">{{ totalTrafficInfo.traffic_trend || '稳定' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上下行分布 -->
|
||
<div class="traffic-section">
|
||
<div class="section-title">上下行流量分布</div>
|
||
<div class="traffic-distribution">
|
||
<div class="info-item">
|
||
<div class="info-label">下行总流量</div>
|
||
<div class="info-value">{{ totalTrafficInfo.download_traffic || '0.00 GB' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">上行总流量</div>
|
||
<div class="info-value">{{ totalTrafficInfo.upload_traffic || '0.00 GB' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">峰值单向流量</div>
|
||
<div class="info-value">{{ totalTrafficInfo.peak_traffic || '0.00 GB' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原始数据显示（调试用，可选） -->
|
||
<div class="traffic-section" v-if="totalTrafficInfo.rx_bytes && totalTrafficInfo.tx_bytes">
|
||
<div class="section-title">原始数据 ({{ totalTrafficInfo.unit }})</div>
|
||
<div class="raw-data">
|
||
<div class="info-item">
|
||
<div class="info-label">下行字节数</div>
|
||
<div class="info-value">{{ totalTrafficInfo.rx_bytes?.toLocaleString() || '0' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">上行字节数</div>
|
||
<div class="info-value">{{ totalTrafficInfo.tx_bytes?.toLocaleString() || '0' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误时显示的替代卡片 -->
|
||
<div class="info-card total-traffic-info" v-if="isTotalTrafficError">
|
||
<div class="card-title">
|
||
<el-icon><Monitor /></el-icon>
|
||
<span>历史总流量统计</span>
|
||
<el-tag
|
||
:type="TypeData === 'dockerContainer' ? 'info' : 'warning'"
|
||
size="small"
|
||
style="margin-left: 8px;"
|
||
>
|
||
{{ TypeData === 'dockerContainer' ? '不支持' : '不可用' }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-item">
|
||
<div class="info-label">状态</div>
|
||
<div class="info-value error-status">{{ totalTrafficErrorMessage }}</div>
|
||
</div>
|
||
|
||
<template v-if="TypeData === 'dockerContainer'">
|
||
<div class="info-item">
|
||
<div class="info-label">说明</div>
|
||
<div class="info-value">容器服务器架构特性，不支持历史流量累计统计</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">替代方案</div>
|
||
<div class="info-value">请查看上方的"流量信息"卡片获取实时速率监控</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="info-item">
|
||
<div class="info-label">说明</div>
|
||
<div class="info-value">可能原因：API接口配置问题、CORS策略限制或服务器维护中</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">建议</div>
|
||
<div class="info-value">请联系系统管理员或稍后重试</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表 -->
|
||
<!-- <serverChart v-if="TypeData" :Type="TypeData" class="chart-section" /> -->
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="content-wrapper">
|
||
<el-tabs type="border-card" class="main-tabs">
|
||
<!-- 实例规格列表 -->
|
||
<el-tab-pane label="实例规格列表">
|
||
<div class="tab-header">
|
||
<h3 class="tab-title">实例规格管理</h3>
|
||
<el-button
|
||
type="primary"
|
||
@click="show_spec(); centerDialogVisible = true; addOrChange = true;"
|
||
:icon="Plus"
|
||
>
|
||
添加实例规格
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-table
|
||
v-loading="specLoading"
|
||
:data="spec_list"
|
||
border
|
||
stripe
|
||
style="width: 100%"
|
||
table-layout="auto"
|
||
class="data-table"
|
||
>
|
||
<el-table-column prop="plan_id" label="规格ID" width="80" />
|
||
<el-table-column prop="name" label="规格名称" min-width="120" show-overflow-tooltip />
|
||
<el-table-column prop="memory" label="内存" width="100">
|
||
<template #default="scope">
|
||
<div class="resource-value">{{ scope.row.memory }} <span class="unit">MB</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="disk" label="硬盘" width="100">
|
||
<template #default="scope">
|
||
<div class="resource-value">{{ scope.row.disk }} <span class="unit">GB</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="cpu" label="CPU" width="100">
|
||
<template #default="scope">
|
||
<div class="resource-value">{{ scope.row.cpu }} <span class="unit">{{ TypeData === 'dockerContainer' ? '毫核' : '核' }}</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="TypeData === 'dockerContainer'" prop="bandwidth_tx" label="上行带宽" width="120">
|
||
<template #default="scope">
|
||
<div class="resource-value">{{ scope.row.bandwidth_tx }} <span class="unit">Mbps</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="TypeData === 'dockerContainer'" prop="bandwidth_rx" label="下行带宽" width="120">
|
||
<template #default="scope">
|
||
<div class="resource-value">{{ scope.row.bandwidth_rx }} <span class="unit">Mbps</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="价格" width="100">
|
||
<template #default="scope">
|
||
<div class="price-tag">¥ {{ scope.row.price }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="number" label="剩余数量" width="100">
|
||
<template #default="scope">
|
||
<el-tag :type="scope.row.number > 10 ? 'success' : scope.row.number > 0 ? 'warning' : 'danger'" effect="plain">
|
||
{{ scope.row.number }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||
<el-table-column label="操作" width="160" fixed="right">
|
||
<template #default="scope">
|
||
<div class="table-actions">
|
||
<el-tooltip content="编辑" placement="top" :hide-after="1500">
|
||
<el-button
|
||
type="primary"
|
||
circle
|
||
:icon="Edit"
|
||
@click="show_spec(scope.row); centerDialogVisible = true; addOrChange = false;"
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip content="删除" placement="top" :hide-after="1500">
|
||
<el-button
|
||
type="danger"
|
||
circle
|
||
:icon="Delete"
|
||
@click="deleteSpec(scope.row.plan_id)"
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-empty v-if="spec_list.length === 0" description="暂无实例规格数据" />
|
||
</el-tab-pane>
|
||
|
||
<!-- 容器列表 -->
|
||
<el-tab-pane v-if="TypeData == 'dockerContainer'" label="容器列表">
|
||
<div class="tab-header">
|
||
<h3 class="tab-title">容器管理</h3>
|
||
<div class="header-actions">
|
||
<el-input
|
||
v-model="containerBox.key"
|
||
placeholder="搜索容器..."
|
||
class="search-input"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
<el-button
|
||
type="primary"
|
||
@click="showAddContainerDialog"
|
||
:icon="Plus"
|
||
>
|
||
添加容器
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table
|
||
:data="user_servers"
|
||
stripe
|
||
border
|
||
style="width: 100%"
|
||
class="data-table"
|
||
>
|
||
<el-table-column label="ID" prop="container_id" width="80" />
|
||
<el-table-column label="价格" prop="pay" width="100">
|
||
<template #default="scope">
|
||
<div class="price-tag">¥ {{ scope.row.pay }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="购买时间" min-width="160">
|
||
<template #default="scope">
|
||
<div class="time-info">{{ scope.row.created_at }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="到期时间" min-width="160">
|
||
<template #default="scope">
|
||
<div class="time-info">{{ scope.row.become_time }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="规格" prop="name" width="80" />
|
||
<el-table-column label="用户ID" prop="user_id" width="80" />
|
||
<el-table-column label="状态" width="100" align="center">
|
||
<template #default="scope">
|
||
<el-tag
|
||
:type="scope.row.container_state == 0
|
||
? 'warning'
|
||
: scope.row.container_state == 1
|
||
? 'info'
|
||
: scope.row.container_state == 2
|
||
? 'success'
|
||
: scope.row.container_state == 3
|
||
? 'info'
|
||
: scope.row.container_state == 4
|
||
? 'danger'
|
||
: 'info'"
|
||
effect="light"
|
||
>
|
||
{{
|
||
scope.row.container_state == 0
|
||
? "未支付"
|
||
: scope.row.container_state == 1
|
||
? "未构建"
|
||
: scope.row.container_state == 2
|
||
? "已构建"
|
||
: scope.row.container_state == 3
|
||
? "未知"
|
||
: scope.row.container_state == 4
|
||
? "已删除"
|
||
: "未知状态"
|
||
}}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100" fixed="right">
|
||
<template #default="scope">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
:icon="Setting"
|
||
@click="$router.push('/servers/container?container_id=' + scope.row.container_id)"
|
||
>
|
||
管理
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!--分页-->
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
background
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
:current-page="containerBox.page"
|
||
:page-size="containerBox.count"
|
||
:page-sizes="[5, 10, 20, 50]"
|
||
@update:current-page="handleCurrentPageChange"
|
||
@update:page-size="handlePageSizeChange"
|
||
/>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 虚拟机列表 -->
|
||
<el-tab-pane v-if="TypeData == 'hyperV'" label="虚拟机列表" :lazy="true">
|
||
<VmList :ID="serverMessage.server_id" />
|
||
</el-tab-pane>
|
||
|
||
<!-- 浮动IP池 -->
|
||
<el-tab-pane v-if="TypeData == 'dockerContainer'" label="浮动IP池" :lazy="true">
|
||
<div class="tab-header">
|
||
<h3 class="tab-title">浮动IP管理</h3>
|
||
<div class="action-btns">
|
||
<el-button type="primary" @click="floatVisible = true" :icon="Plus">
|
||
添加浮动IP
|
||
</el-button>
|
||
<el-button type="primary" @click="addMore = true" :icon="Plus">
|
||
批量添加浮动IP
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table
|
||
:data="floatList"
|
||
style="width: 100%"
|
||
border
|
||
stripe
|
||
class="data-table"
|
||
>
|
||
<el-table-column label="ID" prop="id" width="80" />
|
||
<el-table-column label="创建时间" min-width="160">
|
||
<template #default="scope">
|
||
<div class="time-info">{{ scope.row.created_at }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="浮动IP" prop="floating_ip" min-width="150" />
|
||
<el-table-column label="状态" width="100" align="center">
|
||
<template #default="scope">
|
||
<el-tag :type="scope.row.is_used ? 'success' : 'info'" effect="light">
|
||
{{ scope.row.is_used ? "已绑定" : "未绑定" }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100" align="center">
|
||
<template #default="scope">
|
||
<el-tooltip content="删除IP" placement="top" :hide-after="1500">
|
||
<el-button
|
||
type="danger"
|
||
circle
|
||
:icon="Delete"
|
||
@click="delFloating(scope.row.id)"
|
||
/>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-empty v-if="floatList.length === 0" description="暂无浮动IP数据" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
<!-- 添加/编辑实例规格对话框 -->
|
||
<el-dialog
|
||
v-model="centerDialogVisible"
|
||
:title="addOrChange ? '添加实例规格' : '编辑实例规格'"
|
||
width="650px"
|
||
top="5vh"
|
||
destroy-on-close
|
||
class="spec-dialog"
|
||
>
|
||
<el-form :model="spec_form" label-width="140px">
|
||
<div class="form-section">
|
||
<div class="section-title">基本信息</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="规格名称">
|
||
<el-input v-model="spec_form.name" placeholder="请输入实例规格名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="描述">
|
||
<el-input v-model="spec_form.description" placeholder="对实例规格的介绍" type="textarea" :rows="2" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">资源配置</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="内存">
|
||
<el-input v-model="spec_form.memory" placeholder="内存限制" type="number">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="硬盘">
|
||
<el-input v-model="spec_form.disk" placeholder="硬盘限制" type="number">
|
||
<template #append>GB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item :label="TypeData == 'dockerContainer' ? 'CPU(毫核)' : 'CPU(核)'">
|
||
<el-input
|
||
v-model="spec_form.cpu"
|
||
:placeholder="TypeData == 'dockerContainer' ? 'CPU 限制 (1核=1000毫核)' : 'CPU 限制'"
|
||
type="number"
|
||
min="1"
|
||
>
|
||
<template #append>{{ TypeData == 'dockerContainer' ? '毫核' : '核' }}</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="库存数量">
|
||
<el-input v-model="spec_form.number" placeholder="库存数量" type="number">
|
||
<template #append>个</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section" v-if="TypeData == 'dockerContainer'">
|
||
<div class="section-title">网络配置</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="上行带宽">
|
||
<el-input v-model="spec_form.bandwidth_tx" placeholder="上行带宽" type="number">
|
||
<template #append>Mbps</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="下行带宽">
|
||
<el-input v-model="spec_form.bandwidth_rx" placeholder="下行带宽" type="number">
|
||
<template #append>Mbps</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="上行流量阈值">
|
||
<el-input v-model="spec_form.threshold_tx" placeholder="上行流量报警阈值" type="number">
|
||
<template #append>Mbps</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="下行流量阈值">
|
||
<el-input v-model="spec_form.threshold_rx" placeholder="下行流量报警阈值" type="number">
|
||
<template #append>Mbps</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section" v-if="TypeData == 'hyperV'">
|
||
<div class="section-title">虚拟机特性</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="允许开放端口数">
|
||
<el-input v-model="spec_form.port_num" placeholder="默认允许开放端口数" type="number" :value="spec_form.port_num || 5">
|
||
<template #append>个</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="允许快照数">
|
||
<el-input v-model="spec_form.snapshot_num" placeholder="默认允许快照数" type="number" :value="spec_form.snapshot_num || 3">
|
||
<template #append>个</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="读写限制">
|
||
<el-input v-model="spec_form.min_iops" placeholder="读写限制(1iops=8kb/s)" type="number" :value="spec_form.min_iops || 1000">
|
||
<template #append>IOPS</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="读写最大突发">
|
||
<el-input v-model="spec_form.max_iops" placeholder="读写最大突发" type="number" :value="spec_form.max_iops || 5000">
|
||
<template #append>IOPS</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section" v-if="TypeData == 'hyperV'">
|
||
<div class="section-title">GPU配置</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="GPU资源百分比">
|
||
<el-input v-model="spec_form.gpu_percentage" placeholder="GPU资源百分比" type="number">
|
||
<template #append>%</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="最小显存">
|
||
<el-input v-model="spec_form.min_partition_vram" placeholder="最小显存" type="number">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="最大显存">
|
||
<el-input v-model="spec_form.max_partition_vram" placeholder="最大显存" type="number">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="最优显存">
|
||
<el-input v-model="spec_form.optimal_partition_vram" placeholder="最优显存" type="number">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="低内存映射IO空间">
|
||
<el-input v-model="spec_form.low_mmio_space" placeholder="默认128" type="number" :value="spec_form.low_mmio_space || 128">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="高内存映射IO空间">
|
||
<el-input v-model="spec_form.high_mmio_space" placeholder="建议为显存的2倍" type="number">
|
||
<template #append>MB</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">价格与验证</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="价格">
|
||
<el-input v-model="spec_form.price" placeholder="价格" type="number">
|
||
<template #prepend>¥</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="额外硬盘价格">
|
||
<el-input v-model="spec_form.volume_price" placeholder="额外硬盘价格" type="number">
|
||
<template #prepend>¥</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="是否需要实名">
|
||
<el-switch
|
||
v-model="spec_form.must_real_name"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="需要实名"
|
||
inactive-text="不需要实名"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<div class="left-actions">
|
||
<el-tooltip content="粘贴配置" placement="top">
|
||
<el-button @click="getit" :icon="Download">
|
||
粘贴
|
||
</el-button>
|
||
</el-tooltip>
|
||
<el-tooltip content="复制配置" placement="top">
|
||
<el-button @click="copyit" :icon="Upload">
|
||
复制
|
||
</el-button>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="right-actions">
|
||
<el-button @click="centerDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="editSpec">确认</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 添加浮动IP对话框 -->
|
||
<el-dialog
|
||
v-model="floatVisible"
|
||
title="添加浮动IP"
|
||
width="480px"
|
||
destroy-on-close
|
||
class="float-dialog"
|
||
>
|
||
<el-form label-width="120px">
|
||
<el-form-item label="浮动IP地址">
|
||
<el-input
|
||
v-model="newFloatingIp"
|
||
type="textarea"
|
||
:autosize="{ minRows: 3, maxRows: 10 }"
|
||
placeholder="每个IP一行，换行添加下一个"
|
||
/>
|
||
</el-form-item>
|
||
<div class="ip-tips">
|
||
<el-alert
|
||
title="添加提示"
|
||
type="info"
|
||
description="请确保每行一个IP，且格式正确"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="floatVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="ToAddFloatingIp">确认添加</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 批量添加浮动IP对话框 -->
|
||
<el-dialog
|
||
v-model="addMore"
|
||
title="批量添加浮动IP"
|
||
width="480px"
|
||
destroy-on-close
|
||
class="float-dialog"
|
||
>
|
||
<el-form label-width="140px">
|
||
<el-form-item label="起始浮动IP地址">
|
||
<div class="ip-input-group">
|
||
<el-input v-model="addr_floating_ip" placeholder="如：11.11.11" />
|
||
<span class="ip-separator">.</span>
|
||
<el-input v-model="start_ip" placeholder="起始值" class="ip-last-segment" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="结束浮动IP地址">
|
||
<div class="ip-input-group">
|
||
<el-input v-model="addr_floating_ip" placeholder="如：11.11.11" disabled />
|
||
<span class="ip-separator">.</span>
|
||
<el-input v-model="end_ip" placeholder="结束值" class="ip-last-segment" />
|
||
</div>
|
||
</el-form-item>
|
||
<div class="ip-tips">
|
||
<el-alert
|
||
title="批量添加说明"
|
||
type="info"
|
||
description="系统将添加从起始IP到结束IP的所有地址"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="addMore = false">取消</el-button>
|
||
<el-button type="primary" @click="ToAddMore">确认添加</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 添加容器对话框 -->
|
||
<el-dialog
|
||
v-model="addContainerDialogVisible"
|
||
title="添加容器"
|
||
width="750px"
|
||
destroy-on-close
|
||
class="container-dialog"
|
||
>
|
||
<!-- 服务器状态信息 -->
|
||
<div class="server-status-info">
|
||
<el-alert
|
||
:title="`服务器状态: ${serverMessage.state == 0 ? '离线' : '在线'}`"
|
||
:type="serverMessage.state == 0 ? 'warning' : 'success'"
|
||
:closable="false"
|
||
show-icon
|
||
>
|
||
<template #default>
|
||
<div class="status-details">
|
||
<p><strong>服务器名称:</strong> {{ serverMessage.name || '未设置' }}</p>
|
||
<p><strong>服务器IP:</strong> {{ serverMessage.server_ip || '未设置' }}</p>
|
||
<p><strong>服务器ID:</strong> {{ serverMessage.server_id || '未知' }}</p>
|
||
<p v-if="serverMessage.state == 0" class="status-warning">
|
||
<el-icon><WarningFilled /></el-icon>
|
||
注意：服务器离线时创建的容器可能无法正常启动
|
||
</p>
|
||
</div>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
|
||
<el-form
|
||
ref="addContainerFormRef"
|
||
:model="addContainerForm"
|
||
:rules="addContainerRules"
|
||
label-width="140px"
|
||
>
|
||
<div class="form-section">
|
||
<div class="section-title">基本信息</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="用户ID" prop="user_id">
|
||
<el-input
|
||
v-model="addContainerForm.user_id"
|
||
placeholder="请输入用户ID"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="容器套餐" prop="plan_id">
|
||
<el-select
|
||
v-model="addContainerForm.plan_id"
|
||
placeholder="请选择容器套餐"
|
||
style="width: 100%"
|
||
clearable
|
||
:loading="containerPlanLoading"
|
||
@focus="fetchContainerPlanList"
|
||
@change="handlePlanChange"
|
||
>
|
||
<el-option
|
||
v-for="plan in containerPlanList"
|
||
:key="plan.plan_id"
|
||
:label="plan.name"
|
||
:value="plan.plan_id"
|
||
>
|
||
<span style="float: left">{{ plan.name }}</span>
|
||
<span style="float: right; color: #8492a6; font-size: 13px">
|
||
¥{{ plan.price }}/月
|
||
</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">价格与时间</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="购买价格" prop="pay">
|
||
<el-input-number
|
||
v-model="addContainerForm.pay"
|
||
:min="0"
|
||
:max="999999"
|
||
:precision="2"
|
||
placeholder="请输入购买价格"
|
||
style="width: 100%"
|
||
controls-position="right"
|
||
readonly
|
||
>
|
||
<template #prepend>¥</template>
|
||
</el-input-number>
|
||
<div v-if="selectedPlanPrice && addContainerForm.pay_months" class="price-calculation">
|
||
<small class="text-muted">
|
||
{{ selectedPlanPrice }}/月 × {{ addContainerForm.pay_months }}月 = ¥{{ addContainerForm.pay }}
|
||
</small>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="购买时间(月)" prop="pay_months">
|
||
<el-input-number
|
||
v-model="addContainerForm.pay_months"
|
||
:min="1"
|
||
:max="120"
|
||
placeholder="请输入购买月数"
|
||
style="width: 100%"
|
||
controls-position="right"
|
||
@change="calculateExpireTime"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="到期时间" prop="expire_time">
|
||
<el-date-picker
|
||
v-model="addContainerForm.expire_time"
|
||
type="datetime"
|
||
placeholder="请选择到期时间"
|
||
style="width: 100%"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="X"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">镜像与支付</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="镜像" prop="image_id">
|
||
<el-select
|
||
v-model="addContainerForm.image_id"
|
||
placeholder="请选择镜像"
|
||
clearable
|
||
:loading="containerMirrorLoading"
|
||
@focus="fetchContainerMirrorList"
|
||
>
|
||
<el-option
|
||
v-for="mirror in containerMirrorList"
|
||
:key="mirror.id"
|
||
:label="mirror.show_name"
|
||
:value="mirror.image_id"
|
||
>
|
||
<span style="float: left">{{ mirror.show_name }}</span>
|
||
<span style="float: right; color: #8492a6; font-size: 13px">
|
||
{{ mirror.size }}MB
|
||
</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="支付类型" prop="pay_type">
|
||
<el-select
|
||
v-model="addContainerForm.pay_type"
|
||
placeholder="请选择支付类型"
|
||
style="width: 100%"
|
||
clearable
|
||
>
|
||
<el-option label="余额" value="0" />
|
||
<!-- <el-option label="支付宝" value="alipay" />
|
||
<el-option label="微信支付" value="wechat" />
|
||
<el-option label="银行卡" value="bank" /> -->
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">网络配置</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="网络类型" prop="networkType">
|
||
<el-select
|
||
v-model="addContainerForm.networkType"
|
||
placeholder="请选择网络类型"
|
||
style="width: 100%"
|
||
@change="handleNetworkTypeChange"
|
||
>
|
||
<el-option label="无网络配置" value="" />
|
||
<el-option label="端口转发" value="port_forward" />
|
||
<el-option label="反向代理" value="nginx" />
|
||
<el-option label="浮动IP" value="floating_ip" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="addContainerForm.networkType === 'port_forward' || addContainerForm.networkType === 'nginx'">
|
||
<el-form-item label="容器端口" prop="containerPort">
|
||
<el-input
|
||
v-model="addContainerForm.containerPort"
|
||
:min="1"
|
||
:max="65535"
|
||
placeholder="请输入容器端口"
|
||
style="width: 100%"
|
||
controls-position="right"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" v-if="addContainerForm.networkType === 'nginx'">
|
||
<el-form-item label="域名" prop="domain">
|
||
<el-input
|
||
v-model="addContainerForm.domain"
|
||
placeholder="请输入域名"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" v-if="addContainerForm.networkType === 'floating_ip'">
|
||
<el-alert
|
||
title="浮动IP配置"
|
||
type="info"
|
||
description="浮动IP类型无需额外配置参数，系统将自动分配可用的浮动IP"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-title">环境配置</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="环境变量" prop="env">
|
||
<el-input
|
||
v-model="addContainerForm.env"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入环境变量（可选），格式：KEY1=VALUE1,KEY2=VALUE2"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="cancelAddContainer">取消</el-button>
|
||
<el-button type="primary" @click="confirmAddContainer" :loading="addContainerLoading">
|
||
确定
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted, watch, computed } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import {
|
||
selectServer,
|
||
getServerPlan,
|
||
editServerPlan,
|
||
addServerPlan,
|
||
deleteServerPlan,
|
||
getContainer,
|
||
getFloatingIpList,
|
||
addFloatingIp,
|
||
delFloatingIp,
|
||
addFloatingIpBatch,
|
||
selectServerPlan,
|
||
getDiskInfo,
|
||
getRealDisk,
|
||
getTraffic,
|
||
getTotalTraffic,
|
||
addContainer
|
||
} from "@/utils/acs/server";
|
||
import { getMirrorList } from "@/utils/acs/mirror";
|
||
import { ElMessage, ElNotification } from 'element-plus';
|
||
import { copyDomText } from "@/utils/hide";
|
||
import { getUserInfoV1 } from "@/utils/acs/user";
|
||
import {getUserInfo, userLogin} from "@/api/login.js";
|
||
import {
|
||
Plus,
|
||
Edit,
|
||
Delete,
|
||
Download,
|
||
Upload,
|
||
Refresh,
|
||
Monitor,
|
||
Cpu as CpuIcon,
|
||
Location,
|
||
Setting,
|
||
Search,
|
||
ArrowLeft,
|
||
CircleCheckFilled,
|
||
Files,
|
||
Box,
|
||
PieChart,
|
||
FolderOpened,
|
||
DataAnalysis,
|
||
WarningFilled
|
||
} from '@element-plus/icons-vue';
|
||
|
||
// 组件引入
|
||
import serverChart from "./components/serverChart.vue";
|
||
import VmList from "./components/VmList.vue";
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
let serverMessage = ref({});
|
||
const specLoading = ref(false);
|
||
|
||
// 新增的数据状态
|
||
const diskInfo = ref([]); // 修改为数组，因为API返回的是磁盘设备数组
|
||
const realDiskInfo = ref({});
|
||
const trafficInfo = ref({});
|
||
const totalTrafficInfo = ref({});
|
||
const loading = ref(false);
|
||
const isTotalTrafficError = ref(false);
|
||
const totalTrafficErrorMessage = ref('');
|
||
|
||
// 返回按钮功能
|
||
const goBack = () => {
|
||
// 标记返回操作
|
||
sessionStorage.setItem('serverDetailFrom', 'back');
|
||
sessionStorage.setItem('serverDetailTimestamp', Date.now().toString());
|
||
router.back();
|
||
};
|
||
|
||
// 格式化文件大小显示
|
||
const formatSize = (sizeInGB) => {
|
||
if (typeof sizeInGB !== 'number') return '0';
|
||
return sizeInGB.toFixed(2);
|
||
};
|
||
|
||
// 根据使用率获取进度条颜色
|
||
const getUsageColor = (percent) => {
|
||
if (percent >= 90) return '#F56C6C'; // 红色
|
||
if (percent >= 80) return '#E6A23C'; // 橙色
|
||
if (percent >= 60) return '#409EFF'; // 蓝色
|
||
return '#67C23A'; // 绿色
|
||
};
|
||
|
||
// 新增的辅助函数
|
||
const getTotalCapacity = () => {
|
||
if (!diskInfo.value || !Array.isArray(diskInfo.value)) return '0.00';
|
||
const total = diskInfo.value.reduce((sum, disk) => sum + (disk.total_gb || 0), 0);
|
||
return formatSize(total);
|
||
};
|
||
|
||
const getTotalUsed = () => {
|
||
if (!diskInfo.value || !Array.isArray(diskInfo.value)) return '0.00';
|
||
const used = diskInfo.value.reduce((sum, disk) => sum + (disk.used_gb || 0), 0);
|
||
return formatSize(used);
|
||
};
|
||
|
||
const getAverageUsage = () => {
|
||
if (!diskInfo.value || !Array.isArray(diskInfo.value) || diskInfo.value.length === 0) return 0;
|
||
const avgUsage = diskInfo.value.reduce((sum, disk) => sum + (disk.percent || 0), 0) / diskInfo.value.length;
|
||
return parseFloat(avgUsage.toFixed(1));
|
||
};
|
||
|
||
const getDeviceStatusType = (percent) => {
|
||
if (percent >= 90) return 'danger';
|
||
if (percent >= 80) return 'warning';
|
||
if (percent >= 60) return 'info';
|
||
return 'success';
|
||
};
|
||
|
||
const getDeviceStatusText = (percent) => {
|
||
if (percent >= 90) return '严重';
|
||
if (percent >= 80) return '警告';
|
||
if (percent >= 60) return '注意';
|
||
return '正常';
|
||
};
|
||
|
||
const getUsageClass = (percent) => {
|
||
if (percent >= 90) return 'usage-critical';
|
||
if (percent >= 80) return 'usage-warning';
|
||
if (percent >= 60) return 'usage-medium';
|
||
return 'usage-normal';
|
||
};
|
||
|
||
const getUsageIconClass = (percent) => {
|
||
if (percent >= 90) return 'critical';
|
||
if (percent >= 80) return 'warning';
|
||
if (percent >= 60) return 'medium';
|
||
return 'normal';
|
||
};
|
||
|
||
// 格式化实际硬件划分数值
|
||
const formatRealDiskValue = (value) => {
|
||
if (typeof value === 'number') {
|
||
return value.toFixed(0); // 显示整数
|
||
}
|
||
if (typeof value === 'string' && !isNaN(value)) {
|
||
return parseFloat(value).toFixed(0);
|
||
}
|
||
return value || '0';
|
||
};
|
||
|
||
// 格式化流量字节数
|
||
const formatTrafficBytes = (bytes, unit = 'bytes') => {
|
||
if (typeof bytes !== 'number') return '0';
|
||
|
||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||
if (bytes === 0) return '0 B';
|
||
|
||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||
const formattedSize = (bytes / Math.pow(1024, i)).toFixed(2);
|
||
|
||
return `${formattedSize} ${sizes[i]}`;
|
||
};
|
||
|
||
// 格式化网络速率
|
||
const formatNetworkSpeed = (mbps) => {
|
||
if (typeof mbps !== 'number') return '0 Mbps';
|
||
|
||
if (mbps < 1) {
|
||
return `${(mbps * 1000).toFixed(2)} Kbps`;
|
||
} else if (mbps >= 1000) {
|
||
return `${(mbps / 1000).toFixed(2)} Gbps`;
|
||
} else {
|
||
return `${mbps.toFixed(2)} Mbps`;
|
||
}
|
||
};
|
||
|
||
// 格式化流量字节数为GB显示
|
||
const formatTrafficBytesToGB = (bytes) => {
|
||
if (typeof bytes !== 'number' || bytes === 0) return '0.00';
|
||
|
||
const gb = bytes / (1024 * 1024 * 1024);
|
||
if (gb < 0.01) {
|
||
// 小于0.01GB时显示MB
|
||
const mb = bytes / (1024 * 1024);
|
||
return mb < 0.01 ? '< 0.01 MB' : `${mb.toFixed(2)} MB`;
|
||
} else if (gb >= 1024) {
|
||
// 大于1024GB时显示TB
|
||
const tb = gb / 1024;
|
||
return `${tb.toFixed(2)} TB`;
|
||
} else {
|
||
return `${gb.toFixed(2)} GB`;
|
||
}
|
||
};
|
||
|
||
// 计算平均每日流量（这里是一个简化的计算，实际可能需要更复杂的逻辑）
|
||
const calculateAvgDaily = (totalBytes) => {
|
||
if (typeof totalBytes !== 'number' || totalBytes === 0) return '0.00 GB';
|
||
|
||
// 假设按30天计算平均值（实际应该根据服务器运行时间计算）
|
||
const avgDaily = totalBytes / 30;
|
||
return formatTrafficBytesToGB(avgDaily);
|
||
};
|
||
|
||
// 分析流量趋势
|
||
const getTotalTrafficTrend = (rxBytes, txBytes) => {
|
||
if (typeof rxBytes !== 'number' || typeof txBytes !== 'number') return '无数据';
|
||
|
||
const total = rxBytes + txBytes;
|
||
if (total === 0) return '无流量';
|
||
|
||
const rxPercent = (rxBytes / total) * 100;
|
||
const txPercent = (txBytes / total) * 100;
|
||
|
||
if (rxPercent > 70) {
|
||
return '下行为主';
|
||
} else if (txPercent > 70) {
|
||
return '上行为主';
|
||
} else {
|
||
return '均衡使用';
|
||
}
|
||
};
|
||
|
||
// 初始化数据的函数
|
||
const initData = async () => {
|
||
try {
|
||
loading.value = true;
|
||
TypeData.value = route.query.type;
|
||
// 重置数据状态
|
||
serverMessage.value = {};
|
||
spec_list.value = [];
|
||
user_servers.value = [];
|
||
floatList.value = [];
|
||
diskInfo.value = []; // 重置为空数组
|
||
realDiskInfo.value = {};
|
||
trafficInfo.value = {};
|
||
totalTrafficInfo.value = {};
|
||
|
||
// 获取服务器信息
|
||
let res = await selectServer({ server_id: route.query.server_id });
|
||
if (res && res.data && res.data.data) {
|
||
serverMessage.value = res.data.data;
|
||
ElNotification({
|
||
title: '数据刷新成功',
|
||
message: `已成功获取服务器 ${serverMessage.value.name || '未命名'} 的数据`,
|
||
type: 'success',
|
||
duration: 3000
|
||
});
|
||
}
|
||
|
||
// 并行获取服务器硬件和流量信息（不阻塞主要功能）
|
||
Promise.allSettled([
|
||
|
||
getDiskInfoData(),
|
||
getRealDiskData(),
|
||
getTrafficData(),
|
||
getTotalTrafficData()
|
||
]).then(results => {
|
||
const failedRequests = results.filter(result => result.status === 'rejected');
|
||
if (failedRequests.length > 0) {
|
||
console.warn(`${failedRequests.length} 个API请求失败，但不影响主要功能`);
|
||
}
|
||
});
|
||
|
||
// 获取浮动IP列表
|
||
await getFloating();
|
||
|
||
// 获取实例规格
|
||
await GetSpecs();
|
||
|
||
// 获取用户信息并设置用户类型
|
||
try {
|
||
const userInfoRes = await getUserInfo();
|
||
if (userInfoRes && userInfoRes.data ) {
|
||
localStorage.setItem("user_id", userInfoRes.data.user_id);
|
||
}
|
||
} catch (error) {
|
||
console.error("获取用户信息失败:", error);
|
||
}
|
||
|
||
// 获取所有容器
|
||
containerBox.server_id = route.query.server_id;
|
||
containerBox.user_id = localStorage.getItem("user_id");
|
||
let cons = await getContainer(containerBox);
|
||
if (cons && cons.data) {
|
||
user_servers.value = cons.data.data || [];
|
||
total.value = cons.data.count || 0;
|
||
}
|
||
} catch (error) {
|
||
console.error("初始化数据失败:", error);
|
||
ElMessage.error("加载数据失败，请刷新页面重试");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 监听路由参数变化
|
||
watch(
|
||
() => route.query,
|
||
(newQuery) => {
|
||
if (newQuery.server_id) {
|
||
initData();
|
||
}
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
onMounted(() => {
|
||
initData();
|
||
});
|
||
|
||
const TypeData = ref("");
|
||
|
||
// 获取服务器硬件信息
|
||
const getDiskInfoData = async () => {
|
||
try {
|
||
const res = await getDiskInfo(route.query.server_id);
|
||
console.log("获取服务器硬件信息完整响应:", res);
|
||
|
||
if (res && res.data) {
|
||
console.log("响应数据结构:", res.data);
|
||
|
||
// 检查多层嵌套结构
|
||
let diskData = null;
|
||
|
||
if (res.data.code === 200) {
|
||
// 容器服务器：检查 res.data.data (单个对象)
|
||
if (TypeData.value === 'dockerContainer') {
|
||
if (res.data.data && typeof res.data.data === 'object' && !Array.isArray(res.data.data)) {
|
||
// 容器服务器返回单个磁盘对象，转换为数组格式以统一处理
|
||
const containerDisk = res.data.data.data;
|
||
diskData = [{
|
||
device: containerDisk.path || '/var/lib/docker',
|
||
total_gb: (containerDisk.total || 0) / (1024 * 1024 * 1024),
|
||
used_gb: (containerDisk.used || 0) / (1024 * 1024 * 1024),
|
||
free_gb: (containerDisk.free || 0) / (1024 * 1024 * 1024),
|
||
percent: containerDisk.total > 0 ? ((containerDisk.used / containerDisk.total) * 100).toFixed(1) : 0
|
||
}];
|
||
console.log("容器服务器磁盘数据:", diskData);
|
||
}
|
||
}
|
||
// 虚拟机服务器：检查数组结构
|
||
else {
|
||
// 检查 res.data.data.data (双层data嵌套)
|
||
if (res.data.data && res.data.data.data && Array.isArray(res.data.data.data)) {
|
||
diskData = res.data.data.data;
|
||
console.log("虚拟机服务器-双层data嵌套的数组数据:", diskData);
|
||
}
|
||
// 检查 res.data.data (单层data嵌套)
|
||
else if (res.data.data && Array.isArray(res.data.data)) {
|
||
diskData = res.data.data;
|
||
console.log("虚拟机服务器-单层data嵌套的数组数据:", diskData);
|
||
}
|
||
// 检查直接在res.data下的数组
|
||
else if (Array.isArray(res.data)) {
|
||
diskData = res.data;
|
||
console.log("虚拟机服务器-直接数组数据:", diskData);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (diskData && Array.isArray(diskData) && diskData.length > 0) {
|
||
diskInfo.value = diskData;
|
||
console.log("设置硬件信息数据:", diskData);
|
||
} else {
|
||
diskInfo.value = '暂无数据';
|
||
console.log("未找到有效的硬件数据");
|
||
}
|
||
} else {
|
||
diskInfo.value = '响应格式错误';
|
||
console.log("响应格式不正确");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取服务器硬件信息失败:", error);
|
||
diskInfo.value = '接口异常';
|
||
}
|
||
};
|
||
|
||
// 获取服务器实际划分硬件信息
|
||
const getRealDiskData = async () => {
|
||
try {
|
||
const res = await getRealDisk(route.query.server_id);
|
||
|
||
|
||
if (res && res.data && res.data.code === 200) {
|
||
const data = res.data.data;
|
||
|
||
|
||
if (data && typeof data === 'object') {
|
||
// 处理新的数据结构
|
||
realDiskInfo.value = {
|
||
allocated_disk: data.desk || 0,
|
||
unit: data.unit || 'GB',
|
||
// 如果将来有其他字段，可以在这里添加
|
||
allocated_cpu: data.cpu || '暂无数据',
|
||
allocated_memory: data.memory || '暂无数据',
|
||
remaining_resources: data.remaining || '暂无数据'
|
||
};
|
||
} else {
|
||
realDiskInfo.value = {
|
||
allocated_disk: '暂无数据',
|
||
unit: 'GB',
|
||
allocated_cpu: '暂无数据',
|
||
allocated_memory: '暂无数据',
|
||
remaining_resources: '暂无数据'
|
||
};
|
||
}
|
||
} else {
|
||
realDiskInfo.value = {
|
||
allocated_disk: '暂无数据',
|
||
unit: 'GB',
|
||
allocated_cpu: '暂无数据',
|
||
allocated_memory: '暂无数据',
|
||
remaining_resources: '暂无数据'
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error("获取服务器实际硬件信息失败:", error);
|
||
realDiskInfo.value = {
|
||
allocated_disk: '接口异常',
|
||
unit: 'GB',
|
||
allocated_cpu: '接口异常',
|
||
allocated_memory: '接口异常',
|
||
remaining_resources: '接口异常'
|
||
};
|
||
}
|
||
};
|
||
|
||
// 获取服务器流量信息
|
||
const getTrafficData = async () => {
|
||
try {
|
||
const res = await getTraffic(route.query.server_id);
|
||
console.log("获取服务器流量信息完整响应:", res);
|
||
|
||
if (res && res.data && res.data.code === 200) {
|
||
// 处理不同服务器类型的数据结构
|
||
let trafficData = null;
|
||
|
||
if (TypeData.value === 'dockerContainer') {
|
||
// 容器服务器：检查 res.data.data (直接对象)
|
||
if (res.data.data && typeof res.data.data === 'object') {
|
||
trafficData = res.data.data.data;
|
||
console.log("容器服务器流量数据:", trafficData);
|
||
}
|
||
} else {
|
||
// 虚拟机服务器：处理双层嵌套的数据结构
|
||
if (res.data.data && res.data.data.code === 200 && res.data.data.data) {
|
||
trafficData = res.data.data.data;
|
||
} else if (res.data.data) {
|
||
trafficData = res.data.data;
|
||
}
|
||
console.log("虚拟机服务器流量数据:", trafficData);
|
||
}
|
||
|
||
if (trafficData && typeof trafficData === 'object') {
|
||
if (TypeData.value === 'dockerContainer') {
|
||
// 容器服务器数据格式: {recv: "7.15", sent: "1.14", unit: "KB/s"}
|
||
trafficInfo.value = {
|
||
// 实时速率 (容器返回的是速率数据)
|
||
rx_speed: parseFloat(trafficData.recv) || 0, // 下行速率
|
||
tx_speed: parseFloat(trafficData.sent) || 0, // 上行速率
|
||
unit: trafficData.unit || 'KB/s', // 速率单位
|
||
|
||
// 格式化显示
|
||
rx_speed_display: `${trafficData.recv || '0'} ${trafficData.unit || 'KB/s'}`,
|
||
tx_speed_display: `${trafficData.sent || '0'} ${trafficData.unit || 'KB/s'}`,
|
||
|
||
// 容器没有累计流量数据，设为不可用
|
||
rx_total: '不支持',
|
||
tx_total: '不支持',
|
||
today_traffic: '实时监控',
|
||
upload_traffic: `${trafficData.sent || '0'} ${trafficData.unit || 'KB/s'}`,
|
||
download_traffic: `${trafficData.recv || '0'} ${trafficData.unit || 'KB/s'}`
|
||
};
|
||
} else {
|
||
// 虚拟机服务器数据格式 (原有逻辑)
|
||
trafficInfo.value = {
|
||
// 流量总量
|
||
rx_total: trafficData.rx || 0, // 下行总流量 bytes
|
||
tx_total: trafficData.tx || 0, // 上行总流量 bytes
|
||
unit: trafficData.unit || 'bytes', // 单位
|
||
|
||
// 实时速率
|
||
rx_speed: trafficData.mbps?.rx || 0, // 下行速率 Mbps
|
||
tx_speed: trafficData.mbps?.tx || 0, // 上行速率 Mbps
|
||
|
||
// 为兼容性保留原字段
|
||
today_traffic: formatTrafficBytes(trafficData.rx + trafficData.tx, trafficData.unit),
|
||
upload_traffic: formatTrafficBytes(trafficData.tx, trafficData.unit),
|
||
download_traffic: formatTrafficBytes(trafficData.rx, trafficData.unit)
|
||
};
|
||
}
|
||
} else {
|
||
trafficInfo.value = {
|
||
rx_total: '暂无数据',
|
||
tx_total: '暂无数据',
|
||
rx_speed: '暂无数据',
|
||
tx_speed: '暂无数据',
|
||
unit: 'bytes',
|
||
today_traffic: '暂无数据',
|
||
upload_traffic: '暂无数据',
|
||
download_traffic: '暂无数据'
|
||
};
|
||
}
|
||
} else {
|
||
trafficInfo.value = {
|
||
rx_total: '暂无数据',
|
||
tx_total: '暂无数据',
|
||
rx_speed: '暂无数据',
|
||
tx_speed: '暂无数据',
|
||
unit: 'bytes',
|
||
today_traffic: '暂无数据',
|
||
upload_traffic: '暂无数据',
|
||
download_traffic: '暂无数据'
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error("获取服务器流量信息失败:", error);
|
||
trafficInfo.value = {
|
||
rx_total: '接口异常',
|
||
tx_total: '接口异常',
|
||
rx_speed: '接口异常',
|
||
tx_speed: '接口异常',
|
||
unit: 'bytes',
|
||
today_traffic: '接口异常',
|
||
upload_traffic: '接口异常',
|
||
download_traffic: '接口异常'
|
||
};
|
||
}
|
||
};
|
||
|
||
// 获取服务器总流量信息
|
||
const getTotalTrafficData = async () => {
|
||
try {
|
||
isTotalTrafficError.value = false;
|
||
totalTrafficErrorMessage.value = '';
|
||
|
||
// 容器服务器不支持总流量统计
|
||
if (TypeData.value === 'dockerContainer') {
|
||
console.log("容器服务器不支持总流量统计功能");
|
||
isTotalTrafficError.value = true;
|
||
totalTrafficErrorMessage.value = '容器服务器不支持此功能';
|
||
return;
|
||
}
|
||
|
||
const res = await getTotalTraffic(route.query.server_id);
|
||
console.log("获取服务器总流量信息完整响应:", res);
|
||
|
||
if (res && res.data && res.data.code === 200) {
|
||
// 处理嵌套的数据结构：res.data.data.data
|
||
let trafficData = null;
|
||
|
||
if (res.data.data && res.data.data.code === 200 && res.data.data.data) {
|
||
trafficData = res.data.data.data;
|
||
} else if (res.data.data) {
|
||
trafficData = res.data.data;
|
||
}
|
||
|
||
console.log("解析到的总流量数据:", trafficData);
|
||
|
||
if (trafficData && typeof trafficData === 'object') {
|
||
// 根据实际返回的数据结构处理
|
||
const rxBytes = trafficData.rx || 0; // 下行流量 bytes
|
||
const txBytes = trafficData.tx || 0; // 上行流量 bytes
|
||
const totalBytes = rxBytes + txBytes; // 总流量
|
||
const unit = trafficData.unit || 'bytes'; // 单位
|
||
|
||
totalTrafficInfo.value = {
|
||
// 原始数据
|
||
rx_bytes: rxBytes,
|
||
tx_bytes: txBytes,
|
||
total_bytes: totalBytes,
|
||
unit: unit,
|
||
|
||
// 格式化后的显示数据
|
||
total_traffic: formatTrafficBytesToGB(totalBytes),
|
||
download_traffic: formatTrafficBytesToGB(rxBytes),
|
||
upload_traffic: formatTrafficBytesToGB(txBytes),
|
||
|
||
// 计算一些统计数据（这里可以根据需要添加更多计算逻辑）
|
||
avg_daily_traffic: calculateAvgDaily(totalBytes),
|
||
peak_traffic: formatTrafficBytesToGB(Math.max(rxBytes, txBytes)),
|
||
traffic_trend: getTotalTrafficTrend(rxBytes, txBytes)
|
||
};
|
||
} else {
|
||
// 数据格式不正确时的默认值
|
||
totalTrafficInfo.value = {
|
||
total_traffic: '暂无数据',
|
||
download_traffic: '暂无数据',
|
||
upload_traffic: '暂无数据',
|
||
avg_daily_traffic: '暂无数据',
|
||
peak_traffic: '暂无数据',
|
||
traffic_trend: '暂无数据'
|
||
};
|
||
}
|
||
} else {
|
||
// API返回非200状态码，设置默认值
|
||
totalTrafficInfo.value = {
|
||
total_traffic: '暂无数据',
|
||
download_traffic: '暂无数据',
|
||
upload_traffic: '暂无数据',
|
||
avg_daily_traffic: '暂无数据',
|
||
peak_traffic: '暂无数据',
|
||
traffic_trend: '暂无数据'
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error("获取服务器总流量信息失败:", error);
|
||
|
||
// 设置错误状态
|
||
isTotalTrafficError.value = true;
|
||
|
||
// 改进错误类型检测
|
||
if (error.message?.includes('CORS') ||
|
||
error.message?.includes('blocked') ||
|
||
error.name === 'TypeError' ||
|
||
error.code === 'ERR_NETWORK' ||
|
||
(error.response && error.response.status === 0)) {
|
||
console.warn("CORS或网络错误，显示友好提示");
|
||
totalTrafficErrorMessage.value = '接口暂时不可用 (网络限制)';
|
||
} else if (error.response?.status === 404) {
|
||
totalTrafficErrorMessage.value = '总流量接口不存在';
|
||
} else if (error.response?.status >= 500) {
|
||
totalTrafficErrorMessage.value = '服务器内部错误';
|
||
} else if (error.response?.status === 403) {
|
||
totalTrafficErrorMessage.value = '权限不足';
|
||
} else {
|
||
totalTrafficErrorMessage.value = '接口暂不可用';
|
||
}
|
||
|
||
// 不显示错误消息，避免打扰用户
|
||
console.warn(`总流量API请求失败: ${totalTrafficErrorMessage.value}`, error);
|
||
}
|
||
};
|
||
|
||
//获取服务器实例规格
|
||
const GetSpecs = async () => {
|
||
specLoading.value = true;
|
||
try {
|
||
let plans = await getServerPlan({
|
||
server_id: route.query.server_id,
|
||
count: 30
|
||
});
|
||
spec_list.value = plans.data.data;
|
||
} catch (error) {
|
||
console.error("获取实例规格列表失败:", error);
|
||
ElMessage.error("获取实例规格列表失败");
|
||
} finally {
|
||
specLoading.value = false;
|
||
}
|
||
};
|
||
|
||
//获取浮动ip列表
|
||
const getFloating = async () => {
|
||
try {
|
||
let res = await getFloatingIpList({ server_id: route.query.server_id });
|
||
if (res && res.data) {
|
||
floatList.value = res.data.data || [];
|
||
floatTotal.value = res.data.count || 0;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取浮动IP列表失败:", error);
|
||
ElMessage.error("获取浮动IP列表失败");
|
||
floatList.value = [];
|
||
floatTotal.value = 0;
|
||
}
|
||
};
|
||
|
||
const floatTotal = ref(10);
|
||
const floatList = ref([]);
|
||
const floatVisible = ref(false);
|
||
const newFloatingIp = ref("");
|
||
|
||
//新增浮动ip
|
||
const ToAddFloatingIp = async () => {
|
||
if (!newFloatingIp.value.trim()) {
|
||
ElMessage.warning('请输入至少一个IP地址');
|
||
return;
|
||
}
|
||
|
||
let arr = newFloatingIp.value.split("\n").filter(ip => ip.trim().length > 0);
|
||
|
||
if (arr.length === 0) {
|
||
ElMessage.warning('没有有效的IP地址');
|
||
return;
|
||
}
|
||
|
||
let promises = arr.map(item => {
|
||
return addFloatingIp({
|
||
server_id: route.query.server_id,
|
||
floating_ip: item.trim()
|
||
}).then(res => {
|
||
if (res.data.code !== 200) {
|
||
return Promise.reject(new Error(`${res.data.message}`));
|
||
}
|
||
return res;
|
||
});
|
||
});
|
||
|
||
try {
|
||
ElMessage.info(`正在添加 ${arr.length} 个IP地址...`);
|
||
|
||
const results = await Promise.allSettled(promises);
|
||
let successCount = 0;
|
||
let failList = [];
|
||
|
||
results.forEach((result, index) => {
|
||
if (result.status === "fulfilled") {
|
||
successCount++;
|
||
} else {
|
||
failList.push(`IP ${arr[index]}: ${result.reason.message}`);
|
||
ElMessage.error(`IP ${arr[index]} 添加失败: ${result.reason.message}`);
|
||
}
|
||
});
|
||
|
||
if (successCount > 0) {
|
||
ElNotification({
|
||
title: 'IP添加结果',
|
||
message: `${successCount}个IP添加成功，${arr.length - successCount}个失败`,
|
||
type: successCount === arr.length ? 'success' : 'warning',
|
||
duration: 5000
|
||
});
|
||
}
|
||
|
||
getFloating();
|
||
floatVisible.value = false;
|
||
newFloatingIp.value = '';
|
||
} catch (error) {
|
||
ElMessage.error("处理过程中发生未知错误");
|
||
}
|
||
};
|
||
|
||
//删除浮动ip
|
||
const delFloating = async (id) => {
|
||
try {
|
||
let res = await delFloatingIp({ id: id });
|
||
if (res.data.code == 200) {
|
||
ElMessage.success("删除成功");
|
||
getFloating();
|
||
} else {
|
||
ElMessage.error(res.data.message || "删除失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("删除浮动IP失败:", error);
|
||
ElMessage.error("删除失败，请重试");
|
||
}
|
||
};
|
||
|
||
//批量添加浮动IP
|
||
const addMore = ref(false);
|
||
const addr_floating_ip = ref("");
|
||
const start_ip = ref("");
|
||
const end_ip = ref("");
|
||
|
||
const ToAddMore = async () => {
|
||
if (!addr_floating_ip.value || !start_ip.value || !end_ip.value) {
|
||
ElMessage.warning('请填写完整的IP地址信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const startNum = parseInt(start_ip.value);
|
||
const endNum = parseInt(end_ip.value);
|
||
|
||
if (isNaN(startNum) || isNaN(endNum)) {
|
||
ElMessage.error('IP地址的最后一段必须是数字');
|
||
return;
|
||
}
|
||
|
||
if (startNum > endNum) {
|
||
ElMessage.error('起始IP必须小于或等于结束IP');
|
||
return;
|
||
}
|
||
|
||
if (endNum - startNum > 100) {
|
||
const confirmed = await ElMessageBox.confirm(
|
||
`您将添加${endNum - startNum + 1}个IP地址，确定继续吗？`,
|
||
'批量添加确认',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
).catch(() => false);
|
||
|
||
if (!confirmed) return;
|
||
}
|
||
|
||
ElMessage.info(`正在批量添加IP地址...`);
|
||
|
||
const res = await addFloatingIpBatch({
|
||
server_id: route.query.server_id,
|
||
start_floating_ip: `${addr_floating_ip.value}.${start_ip.value}`,
|
||
end_floating_ip: `${addr_floating_ip.value}.${end_ip.value}`
|
||
});
|
||
|
||
if (res.data.code == 200) {
|
||
ElNotification({
|
||
title: '批量添加成功',
|
||
message: `已成功添加从 ${addr_floating_ip.value}.${start_ip.value} 到 ${addr_floating_ip.value}.${end_ip.value} 的IP地址`,
|
||
type: 'success',
|
||
duration: 5000
|
||
});
|
||
addMore.value = false;
|
||
getFloating();
|
||
|
||
// 重置表单
|
||
start_ip.value = '';
|
||
end_ip.value = '';
|
||
} else {
|
||
ElMessage.error(res.data.message || "批量添加失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("批量添加IP失败:", error);
|
||
ElMessage.error("操作失败，请重试");
|
||
}
|
||
};
|
||
|
||
//容器相关数据
|
||
const containerBox = reactive({
|
||
server_id: "",
|
||
page: 1,
|
||
count: 10,
|
||
key: "",
|
||
user_id: ""
|
||
});
|
||
|
||
//修改新增实例规格的弹窗开关变量
|
||
const centerDialogVisible = ref(false);
|
||
//修改或新增实例规格的判断
|
||
const addOrChange = ref(false);
|
||
const editSpec = async () => {
|
||
if (!spec_form.name || !spec_form.memory || !spec_form.disk || !spec_form.cpu || !spec_form.price) {
|
||
ElMessage.warning('请填写必要的规格信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
if (addOrChange.value) {
|
||
const res = await addServerPlan({
|
||
...spec_form,
|
||
server_id: route.query.server_id,
|
||
server_type:TypeData.value
|
||
});
|
||
|
||
|
||
if (res.data.code == 200) {
|
||
ElNotification({
|
||
title: '添加成功',
|
||
message: `已成功添加规格 "${spec_form.name}"`,
|
||
type: 'success',
|
||
duration: 3000
|
||
});
|
||
centerDialogVisible.value = false;
|
||
} else {
|
||
ElMessage.error(res.data.msg || "添加失败");
|
||
return;
|
||
}
|
||
} else {
|
||
const submitData = {
|
||
...spec_form,
|
||
server_id:route.query.server_id,
|
||
server_type:TypeData.value
|
||
}
|
||
|
||
// 处理虚拟机特有字段
|
||
if (TypeData.value === 'hyperV') {
|
||
// 确保数值类型字段有默认值
|
||
submitData.port_num = submitData.port_num || 5;
|
||
submitData.snapshot_num = submitData.snapshot_num || 3;
|
||
submitData.min_iops = submitData.min_iops || 1000;
|
||
submitData.max_iops = submitData.max_iops || 5000;
|
||
|
||
// 容器特有字段设为空
|
||
submitData.bandwidth_rx = '0';
|
||
submitData.bandwidth_tx = '0';
|
||
submitData.threshold_rx = '0';
|
||
submitData.threshold_tx = '0';
|
||
} else {
|
||
// 处理容器特有字段
|
||
submitData.bandwidth_rx = submitData.bandwidth_rx || '100';
|
||
submitData.bandwidth_tx = submitData.bandwidth_tx || '100';
|
||
}
|
||
|
||
const res = await editServerPlan(submitData);
|
||
|
||
if (res.data.code == 200) {
|
||
ElNotification({
|
||
title: '修改成功',
|
||
message: `已成功修改规格 "${spec_form.name}"`,
|
||
type: 'success',
|
||
duration: 3000
|
||
});
|
||
centerDialogVisible.value = false;
|
||
} else {
|
||
ElMessage.error(res.data.message || "修改失败");
|
||
return;
|
||
}
|
||
}
|
||
|
||
//更新服务器实例规格
|
||
await GetSpecs();
|
||
} catch (error) {
|
||
console.error("操作实例规格失败:", error);
|
||
ElMessage.error("操作失败，请重试");
|
||
}
|
||
};
|
||
|
||
//删除实例规格
|
||
const deleteSpec = async (id) => {
|
||
try {
|
||
const confirmed = await ElMessageBox.confirm(
|
||
'删除实例规格将影响使用该规格的用户，确定要删除吗？',
|
||
'删除确认',
|
||
{
|
||
confirmButtonText: '确定删除',
|
||
cancelButtonText: '取消',
|
||
type: 'error'
|
||
}
|
||
).catch(() => false);
|
||
|
||
if (!confirmed) return;
|
||
|
||
const res = await deleteServerPlan({
|
||
plan_id: id,
|
||
server_type: TypeData.value
|
||
});
|
||
|
||
if (res.data.code == 200) {
|
||
ElMessage.success("删除成功！");
|
||
//更新服务器实例规格
|
||
await GetSpecs();
|
||
} else {
|
||
ElMessage.error(res.data.message || "删除失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("删除实例规格失败:", error);
|
||
ElMessage.error("删除失败，请重试");
|
||
}
|
||
};
|
||
|
||
const spec_list = ref([]);
|
||
//容器列表
|
||
const user_servers = ref([]);
|
||
//容器分页
|
||
const total = ref(10);
|
||
const handleCurrentPageChange = async newPage => {
|
||
try {
|
||
containerBox.page = newPage;
|
||
let cons = await getContainer(containerBox);
|
||
if (cons && cons.data) {
|
||
user_servers.value = cons.data.data || [];
|
||
total.value = cons.data.count || 0;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取容器列表失败:", error);
|
||
ElMessage.error("获取容器列表失败");
|
||
}
|
||
};
|
||
|
||
const handlePageSizeChange = async newSize => {
|
||
try {
|
||
containerBox.count = newSize;
|
||
containerBox.page = 1; // 切换每页条数时重置为第一页
|
||
let cons = await getContainer(containerBox);
|
||
if (cons && cons.data) {
|
||
user_servers.value = cons.data.data || [];
|
||
total.value = cons.data.count || 0;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取容器列表失败:", error);
|
||
ElMessage.error("获取容器列表失败");
|
||
}
|
||
};
|
||
|
||
const spec_form = reactive({
|
||
plan_id: "",
|
||
name: "",
|
||
memory: "",
|
||
disk: "",
|
||
cpu: "",
|
||
price: "",
|
||
bandwidth_rx: "",
|
||
bandwidth_tx: "",
|
||
threshold_rx: "",
|
||
threshold_tx: "",
|
||
port_num: 0,
|
||
snapshot_num: "",
|
||
number: "",
|
||
volume_price: "",
|
||
min_iops: "",
|
||
max_iops: "",
|
||
description: "",
|
||
must_real_name: 0,
|
||
gpu_percentage: "",
|
||
min_partition_vram: "",
|
||
max_partition_vram: "",
|
||
optimal_partition_vram: "",
|
||
low_mmio_space: "",
|
||
high_mmio_space: ""
|
||
});
|
||
|
||
function show_spec(data = null) {
|
||
if (!data) {
|
||
// 重置表单时根据服务器类型设置不同默认值
|
||
Object.keys(spec_form).forEach(key => {
|
||
spec_form[key] = key === 'must_real_name' ? 0 : '';
|
||
});
|
||
|
||
// 设置服务器类型和类型相关默认值
|
||
spec_form.server_type = TypeData.value;
|
||
|
||
if (TypeData.value === 'dockerContainer') {
|
||
spec_form.bandwidth_rx = '100';
|
||
spec_form.bandwidth_tx = '100';
|
||
} else {
|
||
// 虚拟机默认值
|
||
spec_form.port_num = '5';
|
||
spec_form.snapshot_num = '3';
|
||
spec_form.min_iops = '1000';
|
||
spec_form.max_iops = '5000';
|
||
spec_form.low_mmio_space = '128';
|
||
}
|
||
} else {
|
||
// 复制传入的数据
|
||
Object.keys(data).forEach(key => {
|
||
if (key in spec_form) {
|
||
spec_form[key] = data[key];
|
||
}
|
||
});
|
||
// 确保服务器类型正确
|
||
spec_form.server_type = TypeData.value;
|
||
}
|
||
}
|
||
|
||
//复制内容
|
||
const copytext = ref({});
|
||
const copyit = async () => {
|
||
try {
|
||
copytext.value = JSON.parse(JSON.stringify(spec_form));
|
||
copyDomText(JSON.stringify(copytext.value, null, 2));
|
||
ElMessage.success("已复制配置到剪贴板");
|
||
} catch (error) {
|
||
console.error("复制失败:", error);
|
||
ElMessage.error("复制失败");
|
||
}
|
||
};
|
||
|
||
const getit = async () => {
|
||
try {
|
||
let text = await navigator.clipboard.readText();
|
||
let objet = JSON.parse(text);
|
||
|
||
// 移除plan_id，避免覆盖原ID
|
||
if (addOrChange.value) {
|
||
Reflect.deleteProperty(objet, "plan_id");
|
||
}
|
||
|
||
Object.keys(spec_form).forEach(key => {
|
||
if (key in objet) {
|
||
spec_form[key] = objet[key];
|
||
}
|
||
});
|
||
|
||
ElMessage.success("配置已从剪贴板导入");
|
||
} catch (err) {
|
||
console.error("读取剪贴板失败:", err);
|
||
ElMessage.error("无法读取剪贴板内容，请检查格式是否正确");
|
||
}
|
||
};
|
||
|
||
// 添加容器相关状态
|
||
const addContainerDialogVisible = ref(false);
|
||
const addContainerLoading = ref(false);
|
||
const addContainerFormRef = ref(null);
|
||
const addContainerForm = ref({
|
||
user_id: '',
|
||
server_id: '',
|
||
plan_id: '',
|
||
pay: null,
|
||
expire_time: null,
|
||
image_id: '',
|
||
pay_months: null,
|
||
proxy: '',
|
||
pay_type: '',
|
||
env: '',
|
||
// 网络配置相关字段
|
||
networkType: '',
|
||
containerPort: null,
|
||
domain: ''
|
||
});
|
||
|
||
// 容器套餐和镜像数据
|
||
const containerPlanList = ref([]);
|
||
const containerMirrorList = ref([]);
|
||
const containerPlanLoading = ref(false);
|
||
const containerMirrorLoading = ref(false);
|
||
|
||
// 获取选中套餐的价格
|
||
const selectedPlanPrice = computed(() => {
|
||
if (!addContainerForm.value.plan_id) return null;
|
||
const selectedPlan = containerPlanList.value.find(plan => plan.plan_id === addContainerForm.value.plan_id);
|
||
return selectedPlan ? parseFloat(selectedPlan.price) : null;
|
||
});
|
||
|
||
// 容器表单验证规则 - 使用computed实现动态验证
|
||
const addContainerRules = computed(() => {
|
||
const rules = {
|
||
user_id: [
|
||
{ required: true, message: '请输入用户ID', trigger: 'blur' }
|
||
],
|
||
plan_id: [
|
||
{ required: true, message: '请选择容器套餐', trigger: 'change' }
|
||
],
|
||
pay: [
|
||
{ required: true, message: '请输入购买价格', trigger: 'blur' }
|
||
],
|
||
expire_time: [
|
||
{ required: true, message: '请选择到期时间', trigger: 'change' }
|
||
]
|
||
};
|
||
|
||
// 根据网络类型动态添加验证规则
|
||
if (addContainerForm.value.networkType === 'port_forward' || addContainerForm.value.networkType === 'nginx') {
|
||
rules.containerPort = [
|
||
{ required: true, message: '请输入容器端口', trigger: 'blur' },
|
||
{ pattern: /^[1-9]\d*$/, message: '请输入有效的正整数端口', trigger: 'blur' }, ];
|
||
}
|
||
|
||
if (addContainerForm.value.networkType === 'nginx') {
|
||
rules.domain = [
|
||
{ required: true, message: '请输入域名', trigger: 'blur' },
|
||
{ pattern: /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/, message: '请输入有效的域名', trigger: 'blur' }
|
||
];
|
||
}
|
||
|
||
return rules;
|
||
});
|
||
|
||
// 获取容器套餐列表
|
||
const fetchContainerPlanList = async () => {
|
||
if (containerPlanList.value.length > 0) return; // 已加载过，不重复加载
|
||
|
||
containerPlanLoading.value = true;
|
||
try {
|
||
const response = await getServerPlan({
|
||
server_id: route.query.server_id,
|
||
count: 100
|
||
});
|
||
console.log("获取容器套餐列表1111：",response);
|
||
|
||
if (response && response.data && response.data.code === 200) {
|
||
containerPlanList.value = response.data.data || [];
|
||
} else {
|
||
ElMessage.error('获取容器套餐列表失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取容器套餐列表出错:', error);
|
||
ElMessage.error('获取容器套餐列表出错');
|
||
} finally {
|
||
containerPlanLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 获取容器镜像列表
|
||
const fetchContainerMirrorList = async () => {
|
||
if (containerMirrorList.value.length > 0) return; // 已加载过，不重复加载
|
||
|
||
containerMirrorLoading.value = true;
|
||
try {
|
||
const response = await getMirrorList({server_id: route.query.server_id, page: 1, count: 999,key: '',class_id: ''});
|
||
console.log("获取镜像列表1111：",response);
|
||
|
||
if (response && response.data && response.data.code === 200) {
|
||
containerMirrorList.value = response.data.data || [];
|
||
} else {
|
||
ElMessage.error('获取镜像列表失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取镜像列表出错:', error);
|
||
ElMessage.error('获取镜像列表出错');
|
||
} finally {
|
||
containerMirrorLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 处理套餐变化
|
||
const handlePlanChange = (planId) => {
|
||
if (!planId) {
|
||
addContainerForm.value.pay = null;
|
||
return;
|
||
}
|
||
|
||
// 计算总价格和到期时间
|
||
calculateTotalPrice();
|
||
if (addContainerForm.value.pay_months) {
|
||
calculateExpireTime();
|
||
}
|
||
};
|
||
|
||
// 计算总价格
|
||
const calculateTotalPrice = () => {
|
||
if (!selectedPlanPrice.value || !addContainerForm.value.pay_months) {
|
||
addContainerForm.value.pay = selectedPlanPrice.value || null;
|
||
return;
|
||
}
|
||
|
||
// 计算总价格 = 套餐价格 × 购买月数
|
||
addContainerForm.value.pay = parseFloat((selectedPlanPrice.value * addContainerForm.value.pay_months).toFixed(2));
|
||
};
|
||
|
||
// 计算到期时间
|
||
const calculateExpireTime = () => {
|
||
if (!addContainerForm.value.pay_months) {
|
||
addContainerForm.value.expire_time = null;
|
||
return;
|
||
}
|
||
|
||
// 获取当前时间
|
||
const now = new Date();
|
||
|
||
// 计算到期时间（当前时间 + 购买月数）
|
||
const expireDate = new Date(now);
|
||
expireDate.setMonth(expireDate.getMonth() + addContainerForm.value.pay_months);
|
||
|
||
// 转换为时间戳（秒）
|
||
addContainerForm.value.expire_time = Math.floor(expireDate.getTime() / 1000);
|
||
|
||
// 同时重新计算总价格
|
||
calculateTotalPrice();
|
||
};
|
||
|
||
// 处理网络类型变化
|
||
const handleNetworkTypeChange = (newType) => {
|
||
// 清空网络配置相关字段
|
||
addContainerForm.value.containerPort = null;
|
||
addContainerForm.value.domain = '';
|
||
|
||
// 清除验证错误
|
||
if (addContainerFormRef.value) {
|
||
addContainerFormRef.value.clearValidate(['containerPort', 'domain']);
|
||
}
|
||
};
|
||
|
||
// 显示添加容器对话框
|
||
const showAddContainerDialog = () => {
|
||
addContainerDialogVisible.value = true;
|
||
// 重置表单
|
||
addContainerForm.value = {
|
||
user_id: '',
|
||
server_id: route.query.server_id,
|
||
plan_id: '',
|
||
pay: null,
|
||
expire_time: null,
|
||
image_id: '',
|
||
pay_months: null,
|
||
proxy: '',
|
||
pay_type: '',
|
||
env: '',
|
||
// 网络配置相关字段
|
||
networkType: '',
|
||
containerPort: null,
|
||
domain: ''
|
||
};
|
||
// 清除验证
|
||
if (addContainerFormRef.value) {
|
||
addContainerFormRef.value.clearValidate();
|
||
}
|
||
// 预加载数据
|
||
fetchContainerPlanList();
|
||
fetchContainerMirrorList();
|
||
};
|
||
|
||
// 取消添加容器
|
||
const cancelAddContainer = () => {
|
||
addContainerDialogVisible.value = false;
|
||
};
|
||
|
||
// 确认添加容器
|
||
const confirmAddContainer = async () => {
|
||
if (!addContainerFormRef.value) return;
|
||
|
||
try {
|
||
// 验证表单
|
||
await addContainerFormRef.value.validate();
|
||
|
||
addContainerLoading.value = true;
|
||
|
||
// 构建网络配置数据
|
||
let proxyData = '';
|
||
if (addContainerForm.value.networkType) {
|
||
let proxy_data = [{
|
||
type: addContainerForm.value.networkType
|
||
}];
|
||
|
||
// 根据类型添加对应参数
|
||
if (addContainerForm.value.networkType === 'port_forward') {
|
||
proxy_data[0].container_port = addContainerForm.value.containerPort;
|
||
} else if (addContainerForm.value.networkType === 'nginx') {
|
||
proxy_data[0].container_port = addContainerForm.value.containerPort;
|
||
proxy_data[0].domain = addContainerForm.value.domain;
|
||
}
|
||
// floating_ip 类型不需要额外参数
|
||
|
||
proxyData = JSON.stringify(proxy_data);
|
||
}
|
||
|
||
// 准备API参数
|
||
const apiParams = {
|
||
user_id: addContainerForm.value.user_id,
|
||
server_id: addContainerForm.value.server_id,
|
||
plan_id: addContainerForm.value.plan_id,
|
||
pay: addContainerForm.value.pay,
|
||
expire_time: addContainerForm.value.expire_time,
|
||
image_id: addContainerForm.value.image_id || '',
|
||
pay_months: addContainerForm.value.pay_months?.toString() || '',
|
||
proxy: proxyData,
|
||
pay_type: addContainerForm.value.pay_type || '',
|
||
env: addContainerForm.value.env || ''
|
||
};
|
||
|
||
console.log('添加容器参数:', apiParams);
|
||
|
||
// 调用API
|
||
const response = await addContainer(apiParams);
|
||
|
||
if (response && response.data && response.data.code === 200) {
|
||
ElMessage.success('容器创建成功');
|
||
addContainerDialogVisible.value = false;
|
||
// 刷新容器列表
|
||
containerBox.page = 1;
|
||
let cons = await getContainer(containerBox);
|
||
if (cons && cons.data) {
|
||
user_servers.value = cons.data.data || [];
|
||
total.value = cons.data.count || 0;
|
||
}
|
||
} else {
|
||
ElMessage.error('创建失败: ' + (response.data?.message || '未知错误'));
|
||
}
|
||
} catch (error) {
|
||
console.error('添加容器出错:', error);
|
||
if (error.message) {
|
||
ElMessage.error('表单验证失败: ' + error.message);
|
||
} else {
|
||
ElMessage.error('添加容器出错');
|
||
}
|
||
} finally {
|
||
addContainerLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 导入其他需要的组件
|
||
import { ElMessageBox } from 'element-plus';
|
||
</script>
|
||
|
||
<style scoped>
|
||
.server-container {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: calc(100vh - 120px);
|
||
}
|
||
|
||
/* 页面标题区域 */
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-header .left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.page-header .title {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.status-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.status-dot.online {
|
||
background-color: #67C23A;
|
||
box-shadow: 0 0 6px rgba(103, 194, 58, 0.8);
|
||
}
|
||
|
||
.status-dot.offline {
|
||
background-color: #F56C6C;
|
||
box-shadow: 0 0 6px rgba(245, 108, 108, 0.8);
|
||
}
|
||
|
||
/* 返回按钮样式 */
|
||
.back-btn {
|
||
font-size: 16px;
|
||
color: #409EFF;
|
||
padding: 8px 0;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
/* 服务器信息卡片 */
|
||
.server-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
/* 服务器详细信息卡片 */
|
||
.server-detail-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.info-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
padding: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
|
||
.info-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-title {
|
||
background-color: #f5f7fa;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-title .el-icon {
|
||
font-size: 18px;
|
||
color: #409EFF;
|
||
}
|
||
|
||
.info-content {
|
||
padding: 16px;
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 15px;
|
||
color: #303133;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.info-value.highlight {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #409EFF;
|
||
}
|
||
|
||
/* 硬件信息样式 - 符合整体设计风格 */
|
||
.device-count {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.hardware-summary {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.summary-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.hardware-devices {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.device-item {
|
||
padding: 16px;
|
||
background-color: #fafbfc;
|
||
border-radius: 6px;
|
||
border: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.device-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.device-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #409EFF;
|
||
}
|
||
|
||
.device-title .el-icon {
|
||
margin-right: 6px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.device-details {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.detail-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.usage-progress {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* 使用率状态颜色类 */
|
||
.info-value.usage-normal {
|
||
color: #67C23A;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-value.usage-medium {
|
||
color: #409EFF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-value.usage-warning {
|
||
color: #E6A23C;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-value.usage-critical {
|
||
color: #F56C6C;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 实际硬件划分样式 */
|
||
.highlight-item {
|
||
padding: 8px;
|
||
background-color: #f0f9ff;
|
||
border-radius: 4px;
|
||
border-left: 3px solid #409EFF;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* 流量信息样式 */
|
||
.traffic-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.traffic-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
|
||
margin-bottom: 12px;
|
||
padding-bottom: 4px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.traffic-speed-grid,
|
||
.traffic-total-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.traffic-total-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
}
|
||
|
||
.traffic-distribution {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.raw-data {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background-color: #fafbfc;
|
||
border-radius: 6px;
|
||
border: 1px solid #e4e7ed;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.raw-data .info-value {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
}
|
||
|
||
.traffic-note {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* 旧样式保持兼容 */
|
||
.usage-high {
|
||
color: #F56C6C;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.usage-medium {
|
||
color: #E6A23C;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 错误状态样式 */
|
||
.error-status {
|
||
color: #F56C6C;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.chart-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.content-wrapper {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.tab-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tab-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.search-input {
|
||
width: 240px;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.action-btns {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.data-table {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.table-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.resource-value {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.unit {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.price-tag {
|
||
font-weight: 600;
|
||
color: #F56C6C;
|
||
}
|
||
|
||
.time-info {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 分页样式 */
|
||
.pagination-container {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 对话框样式 */
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px dashed #ebeef5;
|
||
}
|
||
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.left-actions, .right-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* IP对话框样式 */
|
||
.ip-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.ip-separator {
|
||
margin: 0 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ip-last-segment {
|
||
width: 80px !important;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ip-tips {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 服务器状态信息样式 */
|
||
.server-status-info {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.status-details {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.status-details p {
|
||
margin: 8px 0;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.status-details strong {
|
||
color: #303133;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-warning {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #E6A23C;
|
||
font-weight: 500;
|
||
margin-top: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(230, 162, 60, 0.1);
|
||
border-radius: 4px;
|
||
border-left: 3px solid #E6A23C;
|
||
}
|
||
|
||
.status-warning .el-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 价格计算显示样式 */
|
||
.price-calculation {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.price-calculation .text-muted {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media screen and (max-width: 1200px) {
|
||
.server-info {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.info-card.location-info {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.server-detail-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.page-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.page-header .left {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.back-btn {
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.server-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.server-detail-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.info-card.location-info {
|
||
grid-column: auto;
|
||
}
|
||
|
||
.tab-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.search-input {
|
||
width: 100%;
|
||
}
|
||
|
||
.action-btns {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 硬件信息响应式 */
|
||
.hardware-summary {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.detail-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.device-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.device-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 流量信息响应式 */
|
||
.traffic-speed-grid,
|
||
.traffic-total-grid,
|
||
.traffic-distribution {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.raw-data {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
padding: 8px;
|
||
}
|
||
}
|
||
</style> |