Leo_Ding/GPU_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Leo_Ding:9e6da059911d626ebee514c60145d96e2ea48f8d
Branches Tags
Leo_Ding:main
..
compare: Leo_Ding:2d0d6eb59b63faa81669e4028218f4bd6b1cc36e
Branches Tags
Leo_Ding:main

No commits in common. "9e6da059911d626ebee514c60145d96e2ea48f8d" and "2d0d6eb59b63faa81669e4028218f4bd6b1cc36e" have entirely different histories.
9e6da05991 ... 2d0d6eb59b

14 changed files with 428 additions and 502 deletions
Show Stats Expand all files Collapse all files

2
.env.dev
View File

@ -2,5 +2,5 @@
NODE_ENV=development
# api
VITE_API_BASIC="http://10.10.1.11:8888"
VITE_API_BASIC="http://10.10.1.30:8888"

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAST亼算云</title>
<title>GxDL算力云</title>
</head>
<body>
<div id="app"></div>

5
src/apis/home.ts
View File

@ -52,8 +52,3 @@ export const exchangePoint=(params:any)=>request.put('/v1/balance/exchange_point
//创建实例
export const createHost=(params:any)=>request.post('/v1/host/host_case',params)
//释放实例
export const releaseCase=(caseId:string)=>request.post(`/v1/host_case/release_case/${caseId}`)
//重置实例
export const reStartCase=(caseId:string)=>request.post(`/v1/host_case/restart_case/${caseId}`)

7
src/utils/debounce.js
View File

@ -1,7 +0,0 @@
export function debounce(func, delay = 500) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}

15
src/utils/dict.ts
View File

@ -1,15 +0,0 @@
export const payTypeDic = new Map([
["PayOnTime", "按量计费"],
["PayOnDay", "包日"],
["PayOnWeek", "包周"],
["PayOnMonth", "包月"],
["PayOnYear", "包年"],
]);
export const instanceStatus = new Map([
["RUNNING", { text: "运行中", color: "#67C23A" }],
["STOPPED", { text: "已停止", color: "#909399" }],
["CREATING", { text: "创建中", color: "#E6A23C" }],
["RESTARTING", { text: "重启中", color: "#E6A23C" }],
["RELEASED", { text: "已释放", color: "#F56C6C" }],
]);

11
src/views/admin/home/index.vue
View File

@ -199,7 +199,6 @@ import {
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { debounce } from '@/utils/debounce.js'
const router = useRouter()
// 实例卡片的开关状态
const switch1 = ref(true)
@ -247,14 +246,10 @@ const fetchUserAssets = () => {
// 生成邀请链接
const generateInviteLink = () => {
// 这里应该是调用API生成邀请链接的逻辑
debouncedSubmit()
message.success('邀请链接生成成功！')
// 实际开发中应该调用API，然后显示生成的链接
// const link = await api.generateInviteLink()
}
const debouncedSubmit = debounce(() => {
message.success('邀请链接生成成功！')
}, 800)
// 新增：跳转到活动规则页面
const goToRules = () => {
@ -410,8 +405,8 @@ const goToInvoice = () => {
}
.invite-actions {
width: 100%;
text-align: center;
width: 100%;
text-align: center;
}
.generate-btn {

111
src/views/admin/instance/index.vue
View File

@ -6,8 +6,8 @@
<div class="header-left">
<span class="page-title">容器实例</span>
<span class="warning-tip">
<!-- <exclamation-circle-outlined class="warning-icon" /> -->
<!-- 实例连续关机15天会释放实例，实例释放会导致数据清空且不可恢复，释放前实例数据仍在。 -->
<exclamation-circle-outlined class="warning-icon" />
实例连续关机15天会释放实例，实例释放会导致数据清空且不可恢复，释放前实例数据仍在。
</span>
</div>
</div>
@ -23,8 +23,10 @@
<div class="header-filter">
<a-select v-model:value="filterStatus" placeholder="筛选状态" style="width: 160px;" size="large"
@change="handleSearch">
<a-select-option value="">全部状态</a-select-option>
<a-select-option v-for="[key, config] in instanceStatus" :value="key">{{ config.text }}</a-select-option>
<a-select-option value="all">全部状态</a-select-option>
<a-select-option value="running">运行中</a-select-option>
<a-select-option value="stopped">已停止</a-select-option>
<a-select-option value="error">异常</a-select-option>
</a-select>
<a-input-search v-model:value="searchKeyword" placeholder="搜索实例名称/ID" style="width: 240px; margin-left: 12px;"
size="large" @search="handleSearch" />
@ -39,8 +41,9 @@
<!-- 状态列 -->
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<span :style="{ color: instanceStatus.get(record.status)?.color }">{{ instanceStatus.get(record.status)?.text
}}</span>
<span :class="`status-${record.status}`">
{{ getStatusText(record.status) }}
</span>
</template>
<!-- 规格详情列 -->
@ -61,11 +64,7 @@
{{ getHealthStatusText(record.health_status) }}
</span>
</template>
<template v-else-if="column.key === 'price_type'">
<span>
{{ payTypeDic.get(record.price_type) }}
</span>
</template>
<!-- 操作列 -->
<template v-else-if="column.key === 'actions'">
<div class="action-buttons">
@ -148,10 +147,14 @@
<p style="color: #666;">• 实例配置和网络设置保持不变</p>
</div>
</div>
<template #okText>
<span style="color: #ff4d4f;">确认重置</span>
</template>
</a-modal>
<!-- 释放确认模态框 -->
<a-modal v-model:open="releaseModalVisible" title="确认释放" @ok="confirmRelease" @cancel="releaseModalVisible = false" >
<a-modal v-model:open="releaseModalVisible" title="确认释放" @ok="confirmRelease" @cancel="releaseModalVisible = false"
:ok-button-props="{ danger: true }">
<div class="modal-content">
<exclamation-circle-outlined class="warning-icon"
style="color: #ff4d4f; font-size: 24px; margin-right: 12px;" />
@ -170,17 +173,15 @@
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ExclamationCircleOutlined, ReloadOutlined, EyeOutlined, DownOutlined, RedoOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import {ExclamationCircleOutlined,ReloadOutlined,EyeOutlined,DownOutlined,RedoOutlined,DeleteOutlined} from '@ant-design/icons-vue'
import type { TableColumnType } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { hostCaseList } from '@/apis/admin'
import { releaseCase, reStartCase } from '@/apis/home'
import { get } from 'http'
import { payTypeDic, instanceStatus } from '@/utils/dict'
const router = useRouter()
// 状态管理
const filterStatus = ref('')
const filterStatus = ref('all')
const searchKeyword = ref('')
const loading = ref(false)
const specModalVisible = ref(false)
@ -216,6 +217,7 @@ const columns = ref<TableColumnType[]>([
{ title: '名称', dataIndex: 'name', key: 'name', width: 180 },
{ title: '状态', dataIndex: 'status', key: 'status', width: 100 },
{ title: '规格详情', dataIndex: 'spec', key: 'spec', width: 200 },
{ title: '本地磁盘', dataIndex: 'system_disk', key: 'system_disk', width: 120 },
{ title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 120 },
{ title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 120 },
{ title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 120 },
@ -230,9 +232,7 @@ const getDataList = async () => {
loading.value = true
const params = {
page_num: paginationState.value.current,
page_size: paginationState.value.pageSize,
status: filterStatus.value,
name: searchKeyword.value
page_size: paginationState.value.pageSize
}
const res = await hostCaseList(params)
mockData.value = res.data
@ -247,11 +247,23 @@ const getDataList = async () => {
getDataList()
// 状态文本映射
const getStatusText = (status: string) => {
const map: Record<string, any> = {
"RUNNING": '运行中',
"STOPPED": '已停止',
"CREATING": '创建中',
"RESTARTING": '重启中',
}
return map[status] || status
}
// 健康状态文本映射
const getHealthStatusText = (status: string) => {
const map: Record<string, string> = {
Normal: '正常',
Abnormal: '异常'
healthy: '健康',
warning: '警告',
error: '异常'
}
return map[status] || status
}
@ -313,32 +325,32 @@ const handleMenuClick = (key: string, record: any) => {
}
// 确认重置
const confirmReset = async () => {
const confirmReset = () => {
if (!currentInstance.value) return
try {
const res = await reStartCase(currentInstance.value.id)
message.loading({ content: '正在重置实例...', key: 'reset', duration: 0 })
setTimeout(() => {
// 模拟重置操作
currentInstance.value.health_status = 'healthy'
message.success({ content: '实例重置成功', key: 'reset' })
resetModalVisible.value = false
getDataList()
} catch (error: any) {
message.error(error)
resetModalVisible.value = false
}
}, 2000)
}
// 确认释放
const confirmRelease = async () => {
const confirmRelease = () => {
if (!currentInstance.value) return
try {
const res = await releaseCase(currentInstance.value.id)
message.loading({ content: '正在释放实例...', key: 'release', duration: 0 })
setTimeout(() => {
// 从数据中移除
const index = mockData.value.findIndex(item => item.id === currentInstance.value.id)
if (index !== -1) {
mockData.value.splice(index, 1)
}
message.success({ content: '实例释放成功', key: 'release' })
releaseModalVisible.value = false
getDataList()
} catch (error: any) {
message.error(error)
releaseModalVisible.value = false
}
}, 2000)
}
// 批量续费
@ -354,7 +366,6 @@ const refreshData = () => {
// 搜索
const handleSearch = () => {
paginationState.value.current = 1
getDataList()
}
// 分页变化
@ -368,7 +379,7 @@ const onTableChange = (pag: any) => {
// 新建实例
const handleRent = () => {
router.push('/layout/market')
router.push('/layout/admin/instanceCreate')
}
onMounted(() => {
@ -561,7 +572,7 @@ onMounted(() => {
}
// 健康状态样式
.health-Normal {
.health-healthy {
color: #52c41a;
background: #f6ffed;
padding: 4px 8px;
@ -570,16 +581,16 @@ onMounted(() => {
display: inline-block;
}
// .health-Abnormal {
// color: #faad14;
// background: #fffbe6;
// padding: 4px 8px;
// border-radius: 4px;
// font-size: 12px;
// display: inline-block;
// }
.health-warning {
color: #faad14;
background: #fffbe6;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
display: inline-block;
}
.health-Abnormal {
.health-error {
color: #ff4d4f;
background: #fff2f0;
padding: 4px 8px;

230
src/views/admin/instanceCreate/index.vue
View File

@ -15,13 +15,12 @@
<a-card class="card" title="计费方式">
<div class="billing-content">
<a-radio-group v-model:value="billingType" button-style="solid" @change="handleBillingTypeChange">
<a-radio-button value="PayOnTime">按量计费</a-radio-button>
<a-radio-button value="PayOnDay">包日</a-radio-button>
<a-radio-button value="PayOnWeek">包周</a-radio-button>
<a-radio-button value="PayOnMonth">包月</a-radio-button>
<a-radio-button value="PayOnYear">包年</a-radio-button>
<a-radio-button value="payg">按量计费</a-radio-button>
<a-radio-button value="daily">包日</a-radio-button>
<a-radio-button value="weekly">包周</a-radio-button>
<a-radio-button value="monthly">包月</a-radio-button>
</a-radio-group>
<!-- <a href="/docs/price/" target="_blank" class="billing-link">计费规则</a> -->
<a href="/docs/price/" target="_blank" class="billing-link">计费规则</a>
</div>
<div class="note">
创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准
@ -39,7 +38,7 @@
<a-radio-button v-for="region in regions" :key="region.value" :value="region.value">
{{ region.label }}
<a-tag v-if="region.tag" :color="region.tag.color" class="region-tag">{{ region.tag.text
}}</a-tag>
}}</a-tag>
</a-radio-button>
</a-radio-group>
</div>
@ -250,7 +249,7 @@
<span class="original-total-price">￥{{ originalTotalPrice }}/{{ billingUnit }}</span>
</div>
</div>
</div>
<div class="action-buttons">
<a-button size="large" @click="handleCancel" class="cancel-btn">取消</a-button>
@ -321,7 +320,7 @@ interface Coupon {
}
// 响应式数据
const billingType = ref('PayOnTime')
const billingType = ref('weekly')
const selectedRegion = ref('beijingDC2')
const selectedZone = ref('')
const selectedGpuModels = ref<string[]>(['RTX 5090'])
@ -1042,174 +1041,173 @@ const showPriceBreakdown = computed(() => {
}
.footer-actions {
position: sticky;
bottom: 0;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
padding: 20px 32px;
border-top: 1px solid #e8e8e8;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0 -24px -24px;
backdrop-filter: blur(8px);
z-index: 100;
position: sticky;
bottom: 0;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
padding: 20px 32px;
border-top: 1px solid #e8e8e8;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0 -24px -24px;
backdrop-filter: blur(8px);
z-index: 100;
}
.price-summary {
display: flex;
align-items: flex-start;
gap: 32px;
display: flex;
align-items: flex-start;
gap: 32px;
}
.price-main {
display: flex;
flex-direction: column;
gap: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.total-label {
font-size: 14px;
color: #666;
font-weight: 500;
font-size: 14px;
color: #666;
font-weight: 500;
}
.price-display {
display: flex;
align-items: baseline;
gap: 4px;
display: flex;
align-items: baseline;
gap: 4px;
}
.total-price {
font-size: 32px;
font-weight: 700;
color: #f7412d;
line-height: 1;
font-size: 32px;
font-weight: 700;
color: #f7412d;
line-height: 1;
}
.price-unit {
font-size: 14px;
color: #999;
font-weight: 500;
font-size: 14px;
color: #999;
font-weight: 500;
}
.original-price-container {
margin-top: 2px;
margin-top: 2px;
}
.original-total-price {
text-decoration: line-through;
color: #999;
font-size: 14px;
font-weight: 500;
text-decoration: line-through;
color: #999;
font-size: 14px;
font-weight: 500;
}
.price-breakdown {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.breakdown-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 12px;
}
.breakdown-label {
color: #666;
white-space: nowrap;
color: #666;
white-space: nowrap;
}
.breakdown-value {
color: #333;
font-weight: 500;
white-space: nowrap;
color: #333;
font-weight: 500;
white-space: nowrap;
}
.breakdown-value.discount {
color: #52c41a;
color: #52c41a;
}
.action-buttons {
display: flex;
gap: 16px;
align-items: center;
display: flex;
gap: 16px;
align-items: center;
}
.cancel-btn {
padding: 0 24px;
height: 48px;
font-weight: 500;
border: 1px solid #d9d9d9;
border-radius: 8px;
padding: 0 24px;
height: 48px;
font-weight: 500;
border: 1px solid #d9d9d9;
border-radius: 8px;
}
.cancel-btn:hover {
border-color: #1890ff;
color: #1890ff;
border-color: #1890ff;
color: #1890ff;
}
.create-btn {
padding: 0 32px;
height: 48px;
font-weight: 600;
border-radius: 8px;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border: none;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
transition: all 0.3s ease;
padding: 0 32px;
height: 48px;
font-weight: 600;
border-radius: 8px;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border: none;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
transition: all 0.3s ease;
}
.create-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}
.create-btn:disabled {
background: #f5f5f5;
color: #d9d9d9;
transform: none;
box-shadow: none;
cursor: not-allowed;
background: #f5f5f5;
color: #d9d9d9;
transform: none;
box-shadow: none;
cursor: not-allowed;
}
/* 响应式设计 */
@media (max-width: 768px) {
.footer-actions {
flex-direction: column;
gap: 20px;
padding: 16px 20px;
}
.price-summary {
width: 100%;
justify-content: space-between;
}
.price-breakdown {
display: none;
/* 移动端隐藏价格明细 */
}
.action-buttons {
width: 100%;
}
.cancel-btn,
.create-btn {
flex: 1;
}
.total-price {
font-size: 28px;
}
.footer-actions {
flex-direction: column;
gap: 20px;
padding: 16px 20px;
}
.price-summary {
width: 100%;
justify-content: space-between;
}
.price-breakdown {
display: none; /* 移动端隐藏价格明细 */
}
.action-buttons {
width: 100%;
}
.cancel-btn,
.create-btn {
flex: 1;
}
.total-price {
font-size: 28px;
}
}
.price-unit {

2
src/views/document/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="gx_layout">
<div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
<div class="logo">FAST亼算云</div>
<div class="logo">GxDL算力云</div>
</div>
<div style="height: 60px;width: 100%;"></div>
<div class="gx_layout_content">

54
src/views/home/index.vue
View File

@ -19,7 +19,7 @@
</div>
<div class="one">
<div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;cursor: pointer;"
@click="router.push(item.link_url)">
@click="router.push(item.path)">
<div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
<div>
<h3>{{ item.title }}</h3>
@ -179,39 +179,39 @@ const fetchBannerList = async () => {
};
// 请求轮播
const getOneList = async () => {
// try {
// const res: any = await getApiOneList();
// // 处理返回的数据
// if (res && Array.isArray(res) && res.length > 0) {
// oneList.value = res;
// } else {
// // API返回空数据或无效数据，使用默认图片
// oneList.value = [{ id: 0, image_url: defaultBanner }];
// }
// } catch (error: any) {
// console.error('轮播图请求失败:', error);
try {
const res: any = await getApiOneList();
// 处理返回的数据
if (res && Array.isArray(res) && res.length > 0) {
oneList.value = res;
} else {
// API返回空数据或无效数据，使用默认图片
oneList.value = [{ id: 0, image_url: defaultBanner }];
}
} catch (error: any) {
console.error('轮播图请求失败:', error);
// 请求失败时使用默认图片
oneList.value = [
{
img: youhuiquan,
title: '算力免费领',
description: '完成认证/问卷获得算力券',
link_url: '/active/newUser'
path: '/active/newUser'
},
{
img: yaoqinghaoyou,
title: '邀约优算友',
description: '邀请好友可获得算力券',
link_url: '/active/invite'
path: '/active/invite'
},
{
img: goumaijilu,
title: '开业重磅福利',
description: '购算力，享豪礼',
link_url: '/active/newUser'
path: '/active/newUser'
}
]
// }
}
};
// 请求GPU列表
const getGPUList = async () => {
@ -231,17 +231,17 @@ const getAdvantageList = async () => {
const res: any = await getAdvantage();
const list = res || [];
// 给每个 item 添加 img 字段
list.forEach((item: any, index: number) => {
if (index === 0) {
item.img = one;
} else if (index === 1) {
item.img = two;
} else if (index === 2) {
item.img = three;
} else {
item.img = firth;
}
});
// list.forEach((item: any, index: number) => {
// if (index === 0) {
// item.img = one;
// } else if (index === 1) {
// item.img = two;
// } else if (index === 2) {
// item.img = three;
// } else {
// item.img = firth;
// }
// });
advantageList.value = list;
} catch (error: any) {

277
src/views/instanceCreate/index.vue
View File

@ -1,122 +1,101 @@
<template>
<div class="container">
<a-spin :spinning="spinning">
<div class="instance-create-container">
<!-- 服务器选择 -->
<a-card class="card select-server" title="服务器选择">
<div class="list-filter">
<div class="filter-item">
<span class="filter-label">实例名称:</span>
<div class="filter-content">
<a-input v-model:value="instanceName"></a-input>
</div>
<div class="instance-create-container">
<!-- 服务器选择 -->
<a-card class="card select-server" title="服务器选择">
<div class="list-filter">
<div class="filter-item">
<span class="filter-label">实例名称:</span>
<div class="filter-content">
<a-input v-model:value="instanceName"></a-input>
</div>
<div class="filter-item">
<span class="filter-label">计费方式<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
<div class="filter-content">
<a-radio-group v-model:value="billingType" button-style="solid">
<a-radio-button value="PayOnTime">按量计费</a-radio-button>
<a-radio-button value="PayOnDay">包日</a-radio-button>
<a-radio-button value="PayOnWeek">包周</a-radio-button>
<a-radio-button value="PayOnMonth">包月</a-radio-button>
<a-radio-button value="PayOnYear">包年</a-radio-button>
</div>
<div class="filter-item">
<span class="filter-label">计费方式<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
<div class="filter-content">
<a-radio-group v-model:value="billingType" button-style="solid">
<a-radio-button value="PayOnTime">按量计费</a-radio-button>
<a-radio-button value="PayOnDay">包日</a-radio-button>
<a-radio-button value="PayOnWeek">包周</a-radio-button>
<a-radio-button value="PayOnMonth">包月</a-radio-button>
<a-radio-button value="PayOnYear">包年</a-radio-button>
</a-radio-group>
</div>
</div>
<!-- GPU数量 -->
<div class="filter-item">
<span class="filter-label">GPU数量<span style="color: #ff4d4f;margin: 0 2px">*</span><span>:</span></span>
<div class="filter-content">
<a-radio-group v-model:value="gpuCount" button-style="solid">
<a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count">
{{ count }}
</a-radio-button>
</a-radio-group>
</div>
</div>
<div class="filter-item">
<span class="filter-label">镜像<span style="color: #ff4d4f;margin: 0 2px;">*</span>:</span>
<a-form layout="vertical">
<a-form-item class="image-type">
<a-radio-group v-model:value="imageType" button-style="solid"
@change="getServiceImages()">
<a-radio-button value="SYSTEM">基础镜像</a-radio-button>
<a-radio-button value="USER">我的镜像</a-radio-button>
</a-radio-group>
</div>
</div>
<div class="filter-item" v-if="billingType != 'PayOnTime'">
<span class="filter-label">租用时长<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
<div class="filter-content">
<a-select ref="select" v-model:value="priceCount" style="width: 300px">
<a-select-option v-for="item in priceCounts" :value="item.id">{{ item.label
}}</a-select-option>
</a-select>
</div>
</div>
<!-- GPU数量 -->
<div class="filter-item">
<span class="filter-label">GPU数量<span
style="color: #ff4d4f;margin: 0 2px">*</span><span>:</span></span>
<div class="filter-content">
<a-radio-group v-model:value="gpuCount" button-style="solid">
<a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count">
{{ count }}
</a-radio-button>
</a-radio-group>
</div>
</div>
<div class="filter-item">
<span class="filter-label">镜像<span style="color: #ff4d4f;margin: 0 2px;">*</span>:</span>
<a-form layout="vertical">
<a-form-item class="image-type">
<a-radio-group v-model:value="imageType" button-style="solid"
@change="getServiceImages()">
<a-radio-button value="SYSTEM">基础镜像</a-radio-button>
<a-radio-button value="USER">我的镜像</a-radio-button>
</a-radio-group>
</a-form-item>
</a-form-item>
<a-form-item>
<div class="basic-image" style="margin-top: 15px;">
<a-select ref="select" v-model:value="selectedImage" style="width: 300px"
@change="handleChange">
<a-select-option v-for="item in imageOptions" :value="item.id">{{ item.label
<a-form-item>
<div class="basic-image" style="margin-top: 15px;">
<a-select ref="select" v-model:value="selectedImage" style="width: 300px"
@change="handleChange">
<a-select-option v-for="item in imageOptions" :value="item.id">{{ item.label
}}</a-select-option>
</a-select>
</div>
</a-form-item>
</a-form>
</div>
</a-select>
</div>
</a-form-item>
</a-form>
</div>
</div>
<!-- 主机表格 -->
<div class="machine-table">
<a-descriptions layout="vertical" bordered :column="8">
<a-descriptions-item label="主机ID">{{ serviceInfo.id }}</a-descriptions-item>
<a-descriptions-item label="算力型号/显存">{{ serviceInfo.gpuType + '/' + serviceInfo.vram + 'GB'
}}</a-descriptions-item>
<a-descriptions-item label="空闲GPU">{{ serviceInfo.gpuAvailableNum }}</a-descriptions-item>
<a-descriptions-item label="每GPU分配">
<span>{{ 'CPU:' + serviceInfo.cpuNum + '核' }}</span><br>
<span>{{ '内存:' + serviceInfo.memory + "GB" }}</span>
</a-descriptions-item>
<a-descriptions-item label="CPU型号">{{ serviceInfo.cpuType }}</a-descriptions-item>
<a-descriptions-item label="硬盘">
<span>{{ '数据盘:' + serviceInfo.dataDisk + 'GB' }}</span><br>
<span>{{ '系统盘:' + serviceInfo.systemDisk + "GB" }}</span>
</a-descriptions-item>
<a-descriptions-item label="驱动/CUDA">{{ serviceInfo.gpuDriver + '/' +
serviceInfo.cudaVersion
}}</a-descriptions-item>
<a-descriptions-item label="消耗算力点(单卡)">{{ serviceInfo.price }}</a-descriptions-item>
</a-descriptions>
</div>
</a-card>
<!-- 优惠券 -->
<a-card class="card coupon-selection">
<div style="display: flex;align-items: center;">
<div>算力券：</div>
<a-select ref="select" v-model:value="voucherId" style="width:300px" @change="handleChange">
<a-select-option :value="''">不使用算力券</a-select-option>
<a-select-option v-for="value in voucherList" :value="value.id">{{ value.name + ' - '+'￥'+value.amount }}</a-select-option>
</a-select>
</div>
</a-card>
<!-- 底部操作栏 -->
</div>
</a-spin>
<!-- 主机表格 -->
<div class="machine-table">
<a-descriptions layout="vertical" bordered :column="8">
<a-descriptions-item label="主机ID">{{ serviceInfo.id }}</a-descriptions-item>
<a-descriptions-item label="算力型号/显存">{{ serviceInfo.gpuType + '/' + serviceInfo.vram + 'GB'
}}</a-descriptions-item>
<a-descriptions-item label="空闲GPU">{{ serviceInfo.gpuAvailableNum }}</a-descriptions-item>
<a-descriptions-item label="每GPU分配">
<span>{{ 'CPU:' + serviceInfo.cpuNum + '核' }}</span><br>
<span>{{ '内存:' + serviceInfo.memory + "GB" }}</span>
</a-descriptions-item>
<a-descriptions-item label="CPU型号">{{ serviceInfo.cpuType }}</a-descriptions-item>
<a-descriptions-item label="硬盘">
<span>{{ '数据盘:' + serviceInfo.dataDisk + 'GB' }}</span><br>
<span>{{ '系统盘:' + serviceInfo.systemDisk + "GB" }}</span>
</a-descriptions-item>
<a-descriptions-item label="驱动/CUDA">{{ serviceInfo.gpuDriver + '/' + serviceInfo.cudaVersion
}}</a-descriptions-item>
<a-descriptions-item label="消耗算力点(单卡)">{{ serviceInfo.price }}</a-descriptions-item>
</a-descriptions>
</div>
</a-card>
<!-- 优惠券 -->
<a-card class="card coupon-selection">
<a-checkbox v-model:checked="checked">是否使用算力券<span style="color:#f34646;">{{ ' ( 可用点数：'+couponTotal+' 点 )' }}</span></a-checkbox>
</a-card>
<!-- 底部操作栏 -->
</div>
<div class="footer-actions">
<div class="price-summary">
<div>消耗算力点：{{ totalMoney }}</div>
<div>消耗算力点：{{totalMoney }}</div>
<!-- 账户余额信息 -->
<div class="account-info" style="display: flex;align-items: center;">
<div class="balance-label" style="margin-right: 10px;">可用算力点：{{ userInfo.computingPowerPoint + ' 点'
}}
</div>
<div class="balance-label" style="margin-right: 10px;">可用算力点：{{ userInfo.computingPowerPoint+' 点' }}</div>
<!-- <div v-if="isShow" style="color: #ff4d4f;font-size: 12px;cursor: pointer;"
@click="router.push('/layout/admin/balance')">
算力点不足去充值</div> -->
@ -136,12 +115,12 @@
取消
</a-button>
<a-button type="primary" size="large" @click="handleCreate" :loading="creating"
:disabled="selectedImage == ''" class="create-btn">
:disabled="selectedImage==''" class="create-btn">
<template #icon>
<PlusOutlined />
</template>
立即创建
</a-button>
</div>
</div>
@ -153,10 +132,10 @@
import { ref, computed, reactive, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import type { TableColumnsType } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { getImages, getRecommendList } from "@/apis/home"
import { getMyCouponTotal, getTotalCost, getHostInfo, createHost } from "@/apis/home"
const router = useRouter()
import { useRoute,useRouter } from 'vue-router'
import { getImages } from "@/apis/home"
import { getMyCouponTotal, getTotalCost, getHostInfo,createHost } from "@/apis/home"
const router=useRouter()
interface GpuModelOption {
value: string
label: string
@ -164,12 +143,10 @@ interface GpuModelOption {
total: number
regions: string[]
}
const voucherList = ref<any[]>([])
const instanceName = ref('')
const instanceName=ref('')
const checked = ref(false)
const totalMoney = ref(0)
const priceCount = ref(1)
const voucherId = ref('')
// 响应式数据
const billingType = ref('PayOnTime')
const gpuCount = ref(5)
@ -179,33 +156,25 @@ const selectedImage = ref<string>("")
const creating = ref(false)
const serviceInfo = ref<any>({})
const userInfo = ref<any>({})
const HostId = ref(0)
const computingPowerPoint = ref(0)
const couponTotal = ref(0)
const spinning = ref(false)
onMounted(async () => {
spinning.value = true
const HostId=ref(0)
const computingPowerPoint=ref(0)
const couponTotal=ref(0)
onMounted(() => {
const userInfoStr = localStorage.getItem("userInfo")
if (userInfoStr) {
userInfo.value = JSON.parse(userInfoStr)
}
serviceInfo.value = useRoute().query
HostId.value = serviceInfo.value.id
instanceName.value = serviceInfo.value.name
HostId.value=serviceInfo.value.id
console.log('1111',serviceInfo.value)
gpuCountOptions.value = Array.from({ length: Number(serviceInfo.value.gpuAvailableNum) }, (_, i) => i + 1)
gpuCount.value = gpuCountOptions.value[0]
await getServiceImages()
await getCoupon()
await fetchTotalCost()
await getVoucherList()
spinning.value = false
getServiceImages()
getCoupon()
fetchTotalCost()
})
async function getVoucherList() {
const res = await getRecommendList()
voucherList.value = res.data
}
async function getCoupon() {
const res: any = await getMyCouponTotal()
const res:any=await getMyCouponTotal()
couponTotal.value = res;
}
// 封装请求
@ -213,26 +182,14 @@ async function fetchTotalCost() {
const res: any = await getTotalCost({
billingMethod: billingType.value,
gpuNum: gpuCount.value,
host_id: HostId.value,
price_count:priceCount.value
host_id: HostId.value
})
totalMoney.value = res.amount
computingPowerPoint.value = res.computingPowerPoint
computingPowerPoint.value=res.computingPowerPoint
}
const dayList = ref([{ id: 1, label: '1日' }, { id: 2, label: '2日' }, { id: 3, label: '3日' }, { id: 4, label: '4日' }, { id: 5, label: '5日' }, { id: 6, label: '6日' }])
const weekList = ref([{ id: 1, label: '1周' }, { id: 2, label: '2周' }, { id: 3, label: '3周' }])
const weekMonth = ref([{ id: 1, label: '1个月' }, { id: 2, label: '2个月' }, { id: 3, label: '3个月' }, { id: 3, label: '4个月' }, { id: 3, label: '5个月' }, { id: 3, label: '6个月' }, { id: 3, label: '7个月' }, { id: 3, label: '8个月' }, { id: 3, label: '9个月' }, { id: 3, label: '10个月' }, { id: 3, label: '11个月' }])
const priceCounts = computed(() => {
if (billingType.value === 'PayOnDay') {
return dayList.value
} else if (billingType.value === 'PayOnWeek') {
return weekList.value
} else if (billingType.value === 'PayOnMonth') {
return weekMonth.value
}
})
// 监听依赖项变化
watch([billingType, gpuCount,priceCount], () => {
watch([billingType, gpuCount], () => {
fetchTotalCost()
getSingleHost()
}) // 组件加载时也执行一次
@ -265,23 +222,23 @@ const handleChange = (e: any) => {
console.log(e)
}
const isShow = computed(() => {
return userInfo.value.balance < computingPowerPoint.value
const isShow=computed(()=>{
return userInfo.value.balance<computingPowerPoint.value
})
const handleCreate = async () => {
creating.value = true
try {
const params = {
host_id: HostId.value,
billingMethod: billingType.value,
gpuNum: gpuCount.value,
case_name: instanceName.value,
image_id: selectedImage.value,
voucher_id: voucherId.value
const params={
host_id:HostId.value,
billingMethod:billingType.value,
gpuNum:gpuCount.value,
case_name:instanceName.value,
image_id:selectedImage.value,
is_use_voucher:checked.value
}
const res = await createHost(params)
const res=await createHost(params)
message.success('实例创建成功！')
creating.value = false
creating.value=false
} catch (error) {
message.error('创建失败，请重试')
} finally {

2
src/views/layout/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="gx_layout">
<div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
<div class="logo">FAST亼算云</div>
<div class="logo">GxDL算力云</div>
<div class="menu">
<a-menu v-model:selectedKeys="current" :class="isHome ? 'custom-menu' : ''" mode="horizontal"
:items="leftRoutes" @click="({ key }) => handleMenuClick(key)" />

210
src/views/market/index.vue
View File

@ -1,121 +1,118 @@
<template>
<div class="instance-create-container">
<a-spin :spinning="spinning">
<div class="header">
<h1>算力中心</h1>
<h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
</div>
<div class="instance-create-body">
<!-- 筛选区域（保持不变） -->
<a-card class="card select-server">
<div class="list-filter">
<div class="filter-item"> <span class="filter-label">计费方式:</span>
<div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
@change="getHostList"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
:value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
</div> <!-- 选择地区 -->
<div class="filter-item"> <span class="filter-label">选择地区:</span>
<div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
@change="getHostList">
<a-radio-button v-for="region in areaList" :key="region.center_id" :value="region.center_id"> {{
region.center_name }}
</a-radio-button> </a-radio-group>
</div>
<div class="header">
<h1>算力中心</h1>
<h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
</div>
<div class="instance-create-body">
<!-- 筛选区域（保持不变） -->
<a-card class="card select-server">
<div class="list-filter">
<div class="filter-item"> <span class="filter-label">计费方式:</span>
<div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
@change="getHostList"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
:value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
</div> <!-- 选择地区 -->
<div class="filter-item"> <span class="filter-label">选择地区:</span>
<div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
@change="getHostList">
<a-radio-button v-for="region in areaList" :key="region.center_id" :value="region.center_id"> {{
region.center_name }}
</a-radio-button> </a-radio-group>
</div>
<div class="filter-item"> <span class="filter-label">GPU型号:</span>
<div class="filter-content">
<a-radio-group v-model:value="selectedGpuModels" button-style="solid" @change="getHostList">
<a-radio-button v-for="gpuItem in gpuList" :key="gpuItem.gpuType" :value="gpuItem.gpuType">
{{ gpuItem.gpuType }}
<span v-if="gpuItem.gpuType !== '全部'">{{ "(" + gpuItem.gpuAvailableNum + "/" + gpuItem.gpuNum + ")"
</div>
<div class="filter-item"> <span class="filter-label">GPU型号:</span>
<div class="filter-content">
<a-radio-group v-model:value="selectedGpuModels" button-style="solid" @change="getHostList">
<a-radio-button v-for="gpuItem in gpuList" :key="gpuItem.gpuType" :value="gpuItem.gpuType">
{{ gpuItem.gpuType }}
<span v-if="gpuItem.gpuType !== '全部'">{{ "(" + gpuItem.gpuAvailableNum + "/" + gpuItem.gpuNum + ")"
}}</span>
</a-radio-button> </a-radio-group>
</div>
</div> <!-- GPU数量 -->
<div class="filter-item"> <span class="filter-label">GPU数量:</span>
<div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
@change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
:value="count"> {{ count }} </a-select-option> </a-select> </div>
</a-radio-button> </a-radio-group>
</div>
</div> <!-- GPU数量 -->
<div class="filter-item"> <span class="filter-label">GPU数量:</span>
<div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
@change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
:value="count"> {{ count }} </a-select-option> </a-select> </div>
</div>
</a-card>
</div>
</a-card>
<!-- 机器列表 -->
<a-card class="card machine-list">
<template v-if="allMachineList.length > 0">
<a-spin :spinning="tableLoading">
<div class="image-card-container" style="min-height:300px;">
<div v-for="record in allMachineList" :key="record.id" class="image-card"
:class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
<!-- 顶部 -->
<div class="image-card-header">
<div class="gpu-title">
{{ record.name }}
</div>
<div class="gpu-availability">
空闲 / 总量
<strong style="font-size: 18px;">{{ record.gpuAvailableNum }}</strong> / {{ record.gpuNum }}
</div>
</div>
<!-- 机器列表 -->
<a-card class="card machine-list">
<template v-if="allMachineList.length > 0">
<div class="image-card-container" style="min-height:300px;">
<!-- 中部信息 -->
<div class="image-card-info">
<div class="info-item">
<span class="info-item-name">CPU</span>
<span class="info-item-account">{{ record.cpuNum }} 核</span>
</div>
<div class="info-item">
<span class="info-item-name">内存</span>
<span class="info-item-account">{{ record.memory }} GB</span>
</div>
<div class="info-item">
<span class="info-item-name">显存</span>
<span class="info-item-account">{{ record.vram }}</span>
</div>
<div class="info-item">
<span class="info-item-name">系统盘</span>
<span class="info-item-account">30 GB</span>
</div>
</div>
<!-- 底部价格 -->
<div class="image-card-footer">
<div class="price">
<span class="price-num">{{ record.price }}</span>
<span class="price-unit">元/卡/小时</span>
</div>
<a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
@click.stop="handleRentMachine(record)">
立即创建
</a-button>
</div>
<div v-for="record in allMachineList" :key="record.id" class="image-card"
:class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
<!-- 顶部 -->
<div class="image-card-header">
<div class="gpu-title">
{{ record.name }}
</div>
<div class="gpu-availability">
空闲 / 总量
<strong style="font-size: 18px;">{{ record.gpuAvailableNum }}</strong> / {{ record.gpuNum }}
</div>
</div>
</a-spin>
</template>
<template v-else>
<a-empty />
</template>
<!-- 分页 -->
<div class="pagination-container">
<a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="hostTotal" show-size-changer
show-quick-jumper />
<!-- 中部信息 -->
<div class="image-card-info">
<div class="info-item">
<span class="info-item-name">CPU</span>
<span class="info-item-account">{{ record.cpuNum }} 核</span>
</div>
<div class="info-item">
<span class="info-item-name">内存</span>
<span class="info-item-account">{{ record.memory }} GB</span>
</div>
<div class="info-item">
<span class="info-item-name">显存</span>
<span class="info-item-account">{{ record.vram }}</span>
</div>
<div class="info-item">
<span class="info-item-name">系统盘</span>
<span class="info-item-account">30 GB</span>
</div>
</div>
<!-- 底部价格 -->
<div class="image-card-footer">
<div class="price">
<span class="price-num">{{ record.price }}</span>
<span class="price-unit">元/卡/小时</span>
</div>
<a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
@click.stop="handleRentMachine(record)">
立即购买
</a-button>
</div>
</div>
</div>
</a-card>
</div>
</a-spin>
</template>
<template v-else>
<a-empty />
</template>
<!-- 分页 -->
<div class="pagination-container">
<a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="hostTotal"
show-size-changer show-quick-jumper />
</div>
</a-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, reactive, watch, onMounted } from 'vue'
import { ref, computed, reactive, watch } from 'vue'
import { hostList, getAreaListApi, getGpuListApi } from '@/apis/market'
import { message } from 'ant-design-vue'
import type { TableColumnsType } from 'ant-design-vue'
import { useRouter } from 'vue-router'
const spinning = ref(false)
const router = useRouter();
// 响应式数据
const hostTotal = ref(0)
@ -130,14 +127,9 @@ const tableLoading = ref(false)
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
onMounted(async () => {
spinning.value = true
await getHostList()
await getAreaList()
await getGpuList()
spinning.value = false
})
getHostList()
getAreaList()
getGpuList()
async function getHostList() {
tableLoading.value = true
try {
@ -195,13 +187,13 @@ const handleSelectMachine = (id: string) => {
}
// 一卡可租
const handleRentMachine = (record: any) => {
router.push({ path: "/layout/create", query: record })
router.push({path:"/layout/create",query:record})
}
const handleGpuCountChange = (e: any) => {
const handleGpuCountChange = (e:any) => {
// console.log(e)
gpuCount.value = e
gpuCount.value=e
getHostList()
selectedMachineId.value = ''
currentPage.value = 1

2
vite.config.ts
View File

@ -21,7 +21,7 @@ export default defineConfig({
open: true, // 可选：启动时自动打开浏览器
proxy: {
'/api': {
target: 'http://10.10.1.11:8888', // 目标服务器的地址
target: 'http://10.10.1.34:8888', // 目标服务器的地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},