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

防抖

Browse Source
This commit is contained in:
Leo_Ding 2026-01-30 14:05:07 +08:00
parent f6ece66b1a
commit 9e6da05991
9 changed files with 72 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

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

2
index.html
View File

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

7
src/utils/debounce.js Normal file
View File

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

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

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

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

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

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

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

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

@ -23,7 +23,15 @@
</a-radio-group> </a-radio-group>
</div> </div>
</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数量 --> <!-- GPU数量 -->
<div class="filter-item"> <div class="filter-item">
<span class="filter-label">GPU数量<span <span class="filter-label">GPU数量<span
@ -160,6 +168,7 @@ const voucherList = ref<any[]>([])
const instanceName = ref('') const instanceName = ref('')
const checked = ref(false) const checked = ref(false)
const totalMoney = ref(0) const totalMoney = ref(0)
const priceCount = ref(1)
const voucherId = ref('') const voucherId = ref('')
// 响应式数据 // 响应式数据
const billingType = ref('PayOnTime') const billingType = ref('PayOnTime')
@ -204,14 +213,26 @@ async function fetchTotalCost() {
const res: any = await getTotalCost({ const res: any = await getTotalCost({
billingMethod: billingType.value, billingMethod: billingType.value,
gpuNum: gpuCount.value, gpuNum: gpuCount.value,
host_id: HostId.value host_id: HostId.value,
price_count:priceCount.value
}) })
totalMoney.value = res.amount 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], () => { watch([billingType, gpuCount,priceCount], () => {
fetchTotalCost() fetchTotalCost()
getSingleHost() getSingleHost()
}) // 组件加载时也执行一次 }) // 组件加载时也执行一次

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

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

2
vite.config.ts
View File

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