1

Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web
实例创建
2026-01-16 18:25:56 +08:00 · 2026-01-16 17:41:28 +08:00 · 2026-01-16 17:40:19 +08:00
12 changed files with 234 additions and 764 deletions
--- a/.env.dev
+++ b/.env.dev
@ -2,5 +2,5 @@
 NODE_ENV=development

 # api
-VITE_API_BASIC="http://10.10.1.33:8888"
+VITE_API_BASIC="http://10.10.1.30:8888"

--- a/src/apis/home.ts
+++ b/src/apis/home.ts
@ -32,7 +32,23 @@ export const tixian=(params:any)=>request.put("/v1/balance/withdraw",params)
 //充值记录
 export const getUpList=(params:any)=>request.get("/v1/balance/top_up_list",{params})

+//充值
+export const postTopUp=(params:any)=>request.get("/v1/balance/top_up",{params})
+
 //提现记录
 export const getWithdrawList=(params:any)=>request.get("/v1/balance/withdraw_list",{params})

+//获取镜像
+export const getImages=(params:any)=>request.get('/v1/image/images',{params})
+
+//获取总费用
+export const getTotalCost=(params:any)=>request.get('/v1/host/host_amount',{params})
+//获取服务器信息
+export const getHostInfo=(params:any)=>request.get('/v1/host/info',{params})
+
+//兑换算力点
+export const exchangePoint=(params:any)=>request.put('/v1/balance/exchange_point',params)
+
+//创建实例
+export const createHost=(params:any)=>request.post('/v1/host/host_case',params)

--- a/src/views/admin/account/cost/balance/index.vue
+++ b/src/views/admin/account/cost/balance/index.vue
@ -183,7 +183,7 @@ import {
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import { getUpList } from "@/apis/home"
+import { getUpList,postTopUp } from "@/apis/home"

 // 用户余额
 const balance = ref(0)
@ -327,7 +327,16 @@ const handleRecharge = () => {
 // 确认充值
 const handleRechargeConfirm = () => {
  modalLoading.value = true
+  try {
+    const params={
+      amount:selectedRechargeAmount.value,
+      payMethod:selectedPaymentMethod.value,
+      payThirdNumber:'11111'
+    }
+    // const res=await postTopUp()
+  } catch (error) {
    
+  }
  setTimeout(() => {
    balance.value += selectedRechargeAmount.value
    const now = new Date()
--- a/src/views/admin/account/cost/deposit/index.vue
+++ b/src/views/admin/account/cost/deposit/index.vue
@ -223,6 +223,11 @@ const dateFormat = 'YYYY-MM-DD'

 // 生命周期
 onMounted(() => {
+  const userInfoStr=localStorage.getItem("userInfo")
+  if(userInfoStr){
+    const userInfo = JSON.parse(userInfoStr);
+    accountInfo.availableBalance=userInfo.balance
+  }
  fetchWithdrawalRecords()
 })

--- a/src/views/admin/account/cost/exchange/index.vue
+++ b/src/views/admin/account/cost/exchange/index.vue
@ -9,7 +9,7 @@
    </a-breadcrumb>

    <!-- 余额卡片 -->
-    <a-card class="balance-card" :bordered="false">
+    <a-card class="balance-card" >
      <div class="balance-info">
        <div class="balance-item">
          <div class="balance-label">
@ -426,8 +426,8 @@ onMounted(() => {
 /* 样式保持不变，同上 */
 .points-exchange-page {
  padding: 20px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
+  background-color: #ffffff;
+  /* min-height: 100vh; */
 }

 .breadcrumb {
@ -437,7 +437,7 @@ onMounted(() => {
 .balance-card {
  margin-bottom: 20px;
  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
 }

 .balance-info {
@ -481,7 +481,7 @@ onMounted(() => {
 .exchange-card {
  margin-bottom: 20px;
  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
 }

 .exchange-content {
@ -609,7 +609,7 @@ onMounted(() => {

 .history-card {
  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
 }

 .agreement-content {
--- a/src/views/admin/account/cost/myMoney/index.vue
+++ b/src/views/admin/account/cost/myMoney/index.vue
@ -21,7 +21,7 @@
                <a-card title="算力点"  class="card computing-card">
                    <div class="computing-content">
                        <div class="computing-amount">
-                            <span class="amount-value">{{ '¥' + formatAmount(userInfo.computingPowerPoint || 0)
+                            <span class="amount-value">{{formatAmount(userInfo.computingPowerPoint || 0)
                            }}</span>
                            <!-- <span class="amount-unit">点</span> -->
                        </div>
--- a/src/views/admin/account/cost/myOrder/index.vue
+++ b/src/views/admin/account/cost/myOrder/index.vue
@ -56,7 +56,6 @@
                    :columns="columns" 
                    bordered 
                    :pagination="paginationState"
-                    :rowSelection="rowSelection"
                    @change="onTableChange"
                    :rowKey="record => record.id || record.order_number"
                >
@ -91,9 +90,7 @@
                        </template>
                        <!-- 支付状态列 -->
                        <template v-if="column.key === 'pay_status'">
-                            <a-tag :color="getPayStatusColor(record.pay_status)">
-                                {{ getPayStatusText(record.pay_status) }}
-                            </a-tag>
+                            <a-tag> {{ record.pay_status }}</a-tag>
                        </template>
                        <!-- <template v-if="column.key === 'action'">
                            <a-space>
--- a/src/views/admin/account/myCertificate/index.vue
+++ b/src/views/admin/account/myCertificate/index.vue
@ -37,7 +37,7 @@ const columns = [
    width: 200,
  },
  {
-    title: '金额',
+    title: '算力点',
    dataIndex: 'amount',
    key: 'amount',
    width: 200,
--- a/src/views/admin/fileStore/index.vue
+++ b/src/views/admin/fileStore/index.vue
@ -3,20 +3,17 @@
    <div class="page-header">
      <h2 class="page-title">文件存储</h2>
      <a-button type="primary" @click="showModal" class="create-btn">
-        <template #icon><PlusOutlined /></template>
+        <template #icon>
+          <PlusOutlined />
+        </template>
        新建存储
      </a-button>
    </div>

    <!-- 表格 -->
    <div class="table-container">
-      <a-table
-        :columns="columns"
-        :data-source="storageList"
-        :row-key="record => record.id"
-        :pagination="{ pageSize: 8 }"
-        class="storage-table"
-      >
+      <a-table :columns="columns" :data-source="storageList" bordered :row-key="record => record.id"
+        :pagination="{ pageSize: 8 }" class="storage-table">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'size'">
            <span class="data-cell">{{ record.size }} GB</span>
@ -38,57 +35,24 @@
    </div>

    <!-- 创建弹窗 -->
-    <a-modal
-      v-model:open="modalVisible"
-      title="创建存储空间"
-      @ok="handleCreate"
-      @cancel="modalVisible = false"
-      :width="520"
-      class="create-modal"
-    >
-      <a-form
-        :model="createForm"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
-        ref="createFormRef"
-        class="create-form"
-      >
+    <a-modal v-model:open="modalVisible" title="创建存储空间" @ok="handleCreate" @cancel="modalVisible = false" :width="520"
+      class="create-modal">
+      <a-form :model="createForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" ref="createFormRef"
+        class="create-form">
        <a-form-item label="存储名称" name="name" :rules="[{ required: true, message: '请输入存储名称' }]">
-          <a-input 
-            v-model:value="createForm.name" 
-            placeholder="请输入存储空间名称"
-            size="large"
-          />
+          <a-input v-model:value="createForm.name" placeholder="请输入存储空间名称" size="large" />
        </a-form-item>

-        <a-form-item
-          label="存储大小"
-          name="size"
-          :rules="[{ required: true, message: '请输入存储大小' }, { type: 'number', min: 1, message: '至少1GB' }]"
-        >
-          <a-input-number
-            v-model:value="createForm.size"
-            :min="1"
-            :max="10000"
-            style="width: 100%"
-            size="large"
-            addon-after="GB"
-          />
+        <a-form-item label="存储大小" name="size"
+          :rules="[{ required: true, message: '请输入存储大小' }, { type: 'number', min: 1, message: '至少1GB' }]">
+          <a-input-number v-model:value="createForm.size" :min="1" :max="10000" style="width: 100%" size="large"
+            addon-after="GB" />
        </a-form-item>

-        <a-form-item
-          label="购买时长"
-          name="duration"
-          :rules="[{ required: true, message: '请输入购买时长' }, { type: 'number', min: 1, message: '至少1天' }]"
-        >
-          <a-input-number
-            v-model:value="createForm.duration"
-            :min="1"
-            :max="365"
-            style="width: 100%"
-            size="large"
-            addon-after="天"
-          />
+        <a-form-item label="购买时长" name="duration"
+          :rules="[{ required: true, message: '请输入购买时长' }, { type: 'number', min: 1, message: '至少1天' }]">
+          <a-input-number v-model:value="createForm.duration" :min="1" :max="365" style="width: 100%" size="large"
+            addon-after="天" />
        </a-form-item>

        <div class="cost-summary">
@ -206,8 +170,7 @@ const handleCreate = async () => {
 <style scoped>
 .file-storage-page {
  padding: 24px;
-  background: #f5f7fa;
-  min-height: 100vh;
+  background: #ffffff;
 }

 .page-header {
@ -235,7 +198,7 @@ const handleCreate = async () => {
 .table-container {
  background: white;
  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); */
  overflow: hidden;
 }

--- a/src/views/admin/instance/index.vue
+++ b/src/views/admin/instance/index.vue
@ -15,7 +15,7 @@
      <div class="header-bottom">
        <div class="header-actions">
          <a-button type="primary" @click="handleRent" class="action-btn">新建实例</a-button>
-          <a-button @click="handleBatchRenew" class="action-btn">批量续费</a-button>
+          <!-- <a-button @click="handleBatchRenew" class="action-btn">批量续费</a-button> -->
          <a-button class="refresh-btn" @click="refreshData">
            <reload-outlined />
          </a-button>
--- a/src/views/instanceCreate/index.vue
+++ b/src/views/instanceCreate/index.vue
@ -5,26 +5,30 @@
            <a-card class="card select-server" title="服务器选择">
                <div class="list-filter">
                    <div class="filter-item">
-                        <span class="filter-label">计费方式:</span>
+                        <span class="filter-label">实例名称:</span>
                        <div class="filter-content">
-                            <a-radio-group v-model:value="billingType" button-style="solid"
-                                @change="handleBillingTypeChange">
-                                <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-button value="year">包年</a-radio-button>
+                           <a-input v-model:value="instanceName"></a-input>
+                        </div>
+                    </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>
+                        <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" @change="handleGpuCountChange">
-                                <a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count"
-                                    :disabled="isGpuCountDisabled(count)">
+                            <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>
@ -32,25 +36,25 @@
                    </div>

                    <div class="filter-item">
-                        <span class="filter-label">镜像:</span>
+                        <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">
-                                    <a-radio-button value="platformImage">基础镜像</a-radio-button>
-
-                                    <a-radio-button value="customImage">我的镜像</a-radio-button>
+                                <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 v-if="imageType === 'platformImage'">
+                            <a-form-item>
                                <div class="basic-image" style="margin-top: 15px;">
-
-                                    <a-cascader v-model:value="selectedImage" :options="imageOptions"
-                                        placeholder="请选择框架名称/框架版本/Python版本/CUDA版本" style="width: 400px"
-                                        :show-search="{ filter }" />
+                                    <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>
@ -58,120 +62,43 @@

                <!-- 主机表格 -->
                <div class="machine-table">
-                    <div class="table-header">
-                        <span class="label">选择主机:</span>
-                        <span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
-                    </div>
-                    <a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
-                        :row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }"
-                        @row-click="handleRowClick" :row-class-name="getRowClassName" :loading="tableLoading"
-                        size="middle">
-                        <template #bodyCell="{ column, record }">
-                            <template v-if="column.key === 'action'">
-                                <a-radio :checked="selectedMachineId === record.id"
-                                    @change="() => handleSelectMachine(record.id)" />
-                            </template>
-                            <template v-else-if="column.key === 'gpuModel'">
-                                <div class="gpu-info">
-                                    <div class="gpu-name">{{ record.gpuModel }}</div>
-                                    <div class="gpu-memory">{{ record.gpuMemory }}</div>
-                                </div>
-                            </template>
-                            <template v-else-if="column.key === 'gpuInfo'">
-                                <div class="gpu-availability">
-                                    <span class="free-count">{{ record.freeGpu }}</span>
-                                    <span class="separator">/</span>
-                                    <span class="total-count">{{ record.totalGpu }}</span>
-                                </div>
-                            </template>
-                            <template v-else-if="column.key === 'cpuInfo'">
-                                <div class="cpu-memory-info">
-                                    <div>CPU：{{ record.cpuCores }}核</div>
-                                    <div>内存：{{ record.memory }}GB</div>
-                                </div>
-                            </template>
-                            <template v-else-if="column.key === 'disk'">
-                                <div class="disk-info">
-                                    <div>数据盘：{{ record.dataDisk }}GB</div>
-                                    <div>可扩容：{{ record.expandableDisk }}GB</div>
-                                </div>
-                            </template>
-                            <template v-else-if="column.key === 'driver'">
-                                <div class="driver-info">
-                                    <div>驱动：{{ record.driver }}</div>
-                                    <div>CUDA：{{ record.cuda }}</div>
-                                </div>
-                            </template>
-                            <template v-else-if="column.key === 'price'">
-                                <div class="price-info">
-                                    <div class="current-price">
-                                        ￥{{ getPrice(record) }}/{{ billingUnit }}
-                                    </div>
-                                    <div v-if="record.originalPrice" class="original-price">
-                                        ￥{{ getOriginalPrice(record) }}/{{ billingUnit }}
-                                    </div>
-                                </div>
-                            </template>
-                        </template>
-                    </a-table>
+                    <a-descriptions layout="vertical" bordered :column="8">
                        
-                    <!-- 空状态 -->
-                    <div v-if="filteredMachineList.length === 0" class="empty-state">
-                        <a-empty description="暂无可用主机，请调整筛选条件" />
-                    </div>
+                        <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" title="算力券">
-                <div class="coupon-content">
-                    <a-select v-model:value="selectedCoupon" placeholder="请选择算力券" style="width: 200px" allow-clear>
-                        <a-select-option value="">不使用算力券</a-select-option>
-                        <a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
-                            {{ coupon.name }} - ￥{{ coupon.amount }}
-                        </a-select-option>
-                    </a-select>
-                    <div class="coupon-balance">
-                        可用算力券：{{ availableCoupons.length }} 张
-                    </div>
-                </div>
+            <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 class="account-info">
-                    <div class="balance-label">账户余额</div>
-                    <div class="balance-amount">
-                        <span class="amount">¥11</span>
-                        <a href="#" class="recharge-link">算力点不足去充值</a>
-                    </div>
-                </div>
-
-                <!-- 费用明细 -->
-                <div class="price-details">
-                    <div class="price-item">
-                        <span class="price-label">日常费用：</span>
-                        <span class="price-value">¥{{ totalPrice }}</span>
-                        <span class="price-unit">/{{ billingUnit }}</span>
-                    </div>
-
-                    <div class="price-item">
-                        <span class="price-label">配置费用：</span>
-                        <span class="price-value">¥{{ totalPrice }}</span>
-                        <span class="price-unit">/{{ billingUnit }}</span>
-                    </div>
-
-                    <!-- 原价显示（如果有优惠） -->
-                    <div v-if="originalTotalPrice" class="original-price-item">
-                        <span class="original-price-label">原价：</span>
-                        <span class="original-price-value">¥{{ originalTotalPrice }}/{{ billingUnit }}</span>
-                        <span class="discount-badge">-{{ calculateDiscount() }}%</span>
-                    </div>
+                <div class="account-info" style="display: flex;align-items: center;">
+                    <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> -->
                </div>
            </div>

@ -188,14 +115,12 @@
                        取消
                    </a-button>
                    <a-button type="primary" size="large" @click="handleCreate" :loading="creating"
-                        :disabled="!canCreate" class="create-btn">
+                        :disabled="selectedImage==''" class="create-btn">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        立即创建
-                        <span v-if="totalPrice !== '0.00'" class="create-price">
-                            ¥{{ totalPrice }}/{{ billingUnit }}
-                        </span>
+                       
                    </a-button>
                </div>
            </div>
@ -204,32 +129,13 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, reactive, watch } from 'vue'
+import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import type { TableColumnsType } from 'ant-design-vue'
-
-// 类型定义
-interface Machine {
-    id: string
-    machineName: string
-    gpuModel: string
-    gpuMemory: string
-    freeGpu: number
-    totalGpu: number
-    cpuCores: number
-    memory: number
-    cpuModel: string
-    dataDisk: number
-    expandableDisk: number
-    driver: string
-    cuda: string
-    basePrice: number
-    originalPrice?: number
-    region: string
-    zone: string
-    availableGpuCount: number
-}
-
+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
@ -238,459 +144,101 @@ interface GpuModelOption {
    regions: string[]
 }

-interface RegionOption {
-    value: string
-    label: string
-    tag?: { color: string; text: string }
-}
-
-interface ZoneOption {
-    value: string
-    label: string
-    regions: string[]
-}
-
-interface Coupon {
-    id: string
-    name: string
-    amount: number
-    type: string
-}
-
+const instanceName=ref('')
+const checked = ref(false)
+const totalMoney = ref(0)
 // 响应式数据
-const billingType = ref('weekly')
-const selectedRegion = ref('beijingDC2')
-const selectedZone = ref('')
-const selectedGpuModels = ref<string[]>(['RTX 5090'])
+const billingType = ref('PayOnTime')
 const gpuCount = ref(5)
 const selectedMachineId = ref('')
-const needExpand = ref(false)
-const expandSize = ref(100)
-const imageType = ref('platformImage')
-const selectedImage = ref<string[]>([])
-const selectedCoupon = ref('')
-const tableLoading = ref(false)
+const imageType = ref('SYSTEM')
+const selectedImage = ref<string>("")
 const creating = ref(false)
-
-// 所有机器数据
-const allMachineList = ref<Machine[]>([
-    {
-        id: '1b0d49b68a',
-        machineName: '494机',
-        gpuModel: 'RTX 5090',
-        gpuMemory: '32GB',
-        freeGpu: 6,
-        totalGpu: 8,
-        cpuCores: 25,
-        memory: 90,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 50,
-        expandableDisk: 7500,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 437.00,
-        originalPrice: 460.00,
-        region: 'beijingDC2',
-        zone: 'beijingDC3',
-        availableGpuCount: 8
-    },
-    {
-        id: '63af4ab7db',
-        machineName: '518机',
-        gpuModel: 'RTX 5090',
-        gpuMemory: '32GB',
-        freeGpu: 6,
-        totalGpu: 8,
-        cpuCores: 25,
-        memory: 90,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 50,
-        expandableDisk: 7105,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 437.00,
-        originalPrice: 460.00,
-        region: 'beijingDC2',
-        zone: 'beijingDC4',
-        availableGpuCount: 8
-    },
-    {
-        id: 'ff5d489b4f',
-        machineName: '495机',
-        gpuModel: 'RTX 5090',
-        gpuMemory: '32GB',
-        freeGpu: 6,
-        totalGpu: 8,
-        cpuCores: 25,
-        memory: 90,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 50,
-        expandableDisk: 6700,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 437.00,
-        originalPrice: 460.00,
-        region: 'beijingDC2',
-        zone: 'beijingDC3',
-        availableGpuCount: 8
-    },
-    {
-        id: 'a1b2c3d4e5',
-        machineName: '600机',
-        gpuModel: 'RTX PRO 6000',
-        gpuMemory: '48GB',
-        freeGpu: 4,
-        totalGpu: 8,
-        cpuCores: 32,
-        memory: 128,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 100,
-        expandableDisk: 8000,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 589.00,
-        region: 'westDC3',
-        zone: 'beijingDC4',
-        availableGpuCount: 8
-    },
-    {
-        id: 'f6g7h8i9j0',
-        machineName: '601机',
-        gpuModel: 'vGPU-48GB',
-        gpuMemory: '48GB',
-        freeGpu: 8,
-        totalGpu: 12,
-        cpuCores: 48,
-        memory: 192,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 150,
-        expandableDisk: 10000,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 689.00,
-        region: 'chongqingDC1',
-        zone: 'neimengDC2',
-        availableGpuCount: 12
-    },
-    {
-        id: 'k1l2m3n4o5',
-        machineName: '602机',
-        gpuModel: 'RTX 4090',
-        gpuMemory: '24GB',
-        freeGpu: 3,
-        totalGpu: 8,
-        cpuCores: 20,
-        memory: 80,
-        cpuModel: 'Xeon(R) Platinum 8470Q',
-        dataDisk: 50,
-        expandableDisk: 5000,
-        driver: '580.76.05',
-        cuda: '13.0',
-        basePrice: 389.00,
-        originalPrice: 410.00,
-        region: 'beijingDC1',
-        zone: 'shanghaiDC1',
-        availableGpuCount: 8
+const serviceInfo = ref<any>({})
+const userInfo = ref<any>({})
+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
+    console.log('1111',serviceInfo.value)
+    gpuCountOptions.value = Array.from({ length: Number(serviceInfo.value.gpuAvailableNum) }, (_, i) => i + 1)
+    gpuCount.value = gpuCountOptions.value[0]
+    getServiceImages()
+    getCoupon()
+    fetchTotalCost()
+})
+async function getCoupon() {
+    const res:any=await getMyCouponTotal()
+    couponTotal.value = res;
+}
+// 封装请求
+async function fetchTotalCost() {
+    const res: any = await getTotalCost({
+        billingMethod: billingType.value,
+        gpuNum: gpuCount.value,
+        host_id: HostId.value
+    })
+    totalMoney.value = res.amount
+    computingPowerPoint.value=res.computingPowerPoint
 }
-])

-// GPU型号配置
-const gpuModelConfig = ref<GpuModelOption[]>([
-    { value: 'RTX 5090', label: 'RTX 5090', available: 685, total: 3280, regions: ['beijingDC2', 'beijingDC1', 'chongqingDC1'] },
-    { value: 'RTX PRO 6000', label: 'RTX PRO 6000', available: 0, total: 8, regions: ['westDC3'] },
-    { value: 'vGPU-48GB', label: 'vGPU-48GB', available: 31, total: 250, regions: ['chongqingDC1', 'neimengDC3'] },
-    { value: 'vGPU-48GB-425W', label: 'vGPU-48GB-425W', available: 58, total: 160, regions: ['neimengDC3'] },
-    { value: 'RTX 5090 D', label: 'RTX 5090 D', available: 1, total: 11, regions: ['beijingDC2'] },
-    { value: 'RTX 4090', label: 'RTX 4090', available: 3, total: 1000, regions: ['beijingDC1', 'foshanDC1'] },
-    { value: 'CPU', label: 'CPU', available: 0, total: 44, regions: ['beijingDC2', 'beijingDC1'] }
-])
+// 监听依赖项变化
+watch([billingType, gpuCount], () => {
+    fetchTotalCost()
+    getSingleHost()
+}) // 组件加载时也执行一次
+const getSingleHost = async () => {
+    const res: any = await getHostInfo({
+        billingMethod: billingType.value,
+        gpuNum: gpuCount.value,
+        host_id: HostId.value
+    })
+    serviceInfo.value = res
+}

-// 配置数据
-const regions = ref<RegionOption[]>([
-    { value: 'beijingDC2', label: '北京B区' },
-    { value: 'westDC3', label: '西北B区', tag: { color: 'red', text: 'PRO6000' } },
-    { value: 'chongqingDC1', label: '重庆A区' },
-    { value: 'neimengDC3', label: '内蒙B区' },
-    { value: 'beijingDC1', label: '北京A区' },
-    { value: 'foshanDC1', label: '佛山区' }
-])
+const getServiceImages = async () => {
+    try {
+        selectedImage.value = ''
+        const res = await getImages({ image_type: imageType.value })
+        console.log(res.data)
+        imageOptions.value = res.data.map((item: any) => ({ id: item.id, label: item.image_name }))
+    } catch (error) {

-const zones = ref<ZoneOption[]>([
-    { value: 'beijingDC4', label: 'L20专区', regions: ['beijingDC2'] },
-    { value: 'beijingDC3', label: 'V100专区', regions: ['beijingDC2'] },
-    { value: 'neimengDC2', label: 'A800专区', regions: ['neimengDC3'] },
-    { value: 'shanghaiDC1', label: '摩尔线程专区', regions: ['beijingDC1'] },
-    { value: 'guangdongDC1', label: '华为昇腾专区', regions: ['foshanDC1'] }
-])
+    }
+}

-const gpuCountOptions = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12]
-
-// 优惠券数据
-const availableCoupons = ref<Coupon[]>([
-    { id: 'coupon1', name: '新用户优惠券', amount: 50, type: 'discount' },
-    { id: 'coupon2', name: '周年庆优惠', amount: 100, type: 'discount' }
-])
+const gpuCountOptions = ref<number[]>([])

 // 镜像选项
-const imageOptions = ref([
-    {
-        value: 'pytorch',
-        label: 'PyTorch',
-        children: [
-            {
-                value: '1.12.0',
-                label: '1.12.0',
-                children: [
-                    {
-                        value: 'python3.8',
-                        label: 'Python 3.8',
-                        children: [
-                            { value: 'cuda11.6', label: 'CUDA 11.6' },
-                            { value: 'cuda11.7', label: 'CUDA 11.7' }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-])
+const imageOptions = ref<any>([])

-// 表格列定义
-const columns: TableColumnsType = [
-    {
-        title: '',
-        key: 'action',
-        width: 50
-    },
-    {
-        title: '主机ID',
-        dataIndex: 'id',
-        key: 'id',
-        width: 100
-    },
-    {
-        title: '算力型号/显存',
-        key: 'gpuModel',
-        width: 150
-    },
-    {
-        title: '空闲GPU',
-        key: 'gpuInfo',
-        width: 100,
-        sorter: (a: Machine, b: Machine) => a.freeGpu - b.freeGpu
-    },
-    {
-        title: '每GPU分配',
-        key: 'cpuInfo',
-        width: 120
-    },
-    {
-        title: 'CPU型号',
-        dataIndex: 'cpuModel',
-        key: 'cpuModel',
-        width: 150
-    },
-    {
-        title: '硬盘',
-        key: 'disk',
-        width: 140,
-        sorter: (a: Machine, b: Machine) => a.dataDisk - b.dataDisk
-    },
-    {
-        title: '驱动/CUDA',
-        key: 'driver',
-        width: 140
-    },
-    {
-        title: '价格(单卡)',
-        key: 'price',
-        width: 140
+const handleChange = (e: any) => {
+    console.log(e)
 }
-]

-// 计算属性
-const cpuCores = computed(() => 25 * gpuCount.value)
-const memory = computed(() => 90 * gpuCount.value)
-
-// 计费单位
-const billingUnit = computed(() => {
-    switch (billingType.value) {
-        case 'payg': return '小时'
-        case 'daily': return '天'
-        case 'weekly': return '周'
-        case 'monthly': return '月'
-        default: return '周'
-    }
+const isShow=computed(()=>{
+    return userInfo.value.balance<computingPowerPoint.value
 })
-
-// 可用的GPU型号（根据地区筛选）
-const availableGpuModels = computed(() => {
-    return gpuModelConfig.value.filter(model =>
-        model.regions.includes(selectedRegion.value)
-    )
-})
-
-// 选中的GPU型号标签
-const selectedGpuModelLabel = computed(() => {
-    if (selectedGpuModels.value.length === 0) return '未选择'
-    const model = gpuModelConfig.value.find(m => m.value === selectedGpuModels.value[0])
-    return model ? model.label : selectedGpuModels.value[0]
-})
-
-// 过滤后的机器列表
-const filteredMachineList = computed(() => {
-    let filtered = allMachineList.value.filter(machine => {
-        // 按地区筛选
-        if (machine.region !== selectedRegion.value) return false
-
-        // 按专区筛选（如果有选择专区）
-        if (selectedZone.value && machine.zone !== selectedZone.value) return false
-
-        // 按GPU型号筛选
-        if (selectedGpuModels.value.length > 0 && !selectedGpuModels.value.includes('all')) {
-            if (!selectedGpuModels.value.includes(machine.gpuModel)) return false
-        }
-
-        // 按GPU数量筛选：机器的可用GPU数量要大于等于选择的GPU数量
-        if (machine.availableGpuCount < gpuCount.value) return false
-
-        // 确保有足够的空闲GPU
-        if (machine.freeGpu < gpuCount.value) return false
-
-        return true
-    })
-
-    return filtered
-})
-
-const showZones = computed(() => {
-    return availableZones.value.length > 0
-})
-
-const availableZones = computed(() => {
-    return zones.value.filter(zone => zone.regions.includes(selectedRegion.value))
-})
-
-const totalDiskSize = computed(() => {
-    return needExpand.value ? 50 + expandSize.value : 50
-})
-
-const maxExpandSize = computed(() => {
-    const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
-    return machine ? machine.expandableDisk : 0
-})
-
-const totalPrice = computed(() => {
-    const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
-    if (!machine) return '0.00'
-
-    let price = machine.basePrice * gpuCount.value
-    if (billingType.value === 'payg') price = price / (7 * 24)
-    else if (billingType.value === 'daily') price = price / 7
-    else if (billingType.value === 'monthly') price = price * 4
-
-    return price.toFixed(2)
-})
-
-const originalTotalPrice = computed(() => {
-    const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
-    if (!machine || !machine.originalPrice) return ''
-
-    let price = machine.originalPrice * gpuCount.value
-    if (billingType.value === 'payg') price = price / (7 * 24)
-    else if (billingType.value === 'daily') price = price / 7
-    else if (billingType.value === 'monthly') price = price * 4
-
-    return price.toFixed(2)
-})
-
-const canCreate = computed(() => {
-    return selectedMachineId.value && selectedImage.value.length > 0
-})
-
-// 价格计算方法
-const getPrice = (record: Machine) => {
-    const basePrice = record.basePrice * gpuCount.value
-    switch (billingType.value) {
-        case 'payg': return (basePrice / (7 * 24)).toFixed(2)
-        case 'daily': return (basePrice / 7).toFixed(2)
-        case 'weekly': return basePrice.toFixed(2)
-        case 'monthly': return (basePrice * 4).toFixed(2)
-        default: return basePrice.toFixed(2)
-    }
-}
-
-const getOriginalPrice = (record: Machine) => {
-    if (!record.originalPrice) return ''
-    const originalPrice = record.originalPrice * gpuCount.value
-    switch (billingType.value) {
-        case 'payg': return (originalPrice / (7 * 24)).toFixed(2)
-        case 'daily': return (originalPrice / 7).toFixed(2)
-        case 'weekly': return originalPrice.toFixed(2)
-        case 'monthly': return (originalPrice * 4).toFixed(2)
-        default: return originalPrice.toFixed(2)
-    }
-}
-
-// 方法
-const handleRowClick = (record: Machine) => {
-    selectedMachineId.value = record.id
-}
-
-const handleSelectMachine = (id: string) => {
-    selectedMachineId.value = id
-}
-
-const getRowClassName = (record: Machine) => {
-    return selectedMachineId.value === record.id ? 'selected-row' : ''
-}
-
-const handleBillingTypeChange = () => {
-    console.log('计费方式改变:', billingType.value)
-}
-
-const handleRegionChange = () => {
-    console.log('地区改变:', selectedRegion.value)
-    if (availableGpuModels.value.length > 0) {
-        selectedGpuModels.value = [availableGpuModels.value[0].value]
-    } else {
-        selectedGpuModels.value = []
-    }
-    selectedZone.value = ''
-    selectedMachineId.value = ''
-}
-
-const handleZoneChange = () => {
-    console.log('专区改变:', selectedZone.value)
-    selectedMachineId.value = ''
-}
-
-const handleGpuModelChange = () => {
-    console.log('GPU型号改变:', selectedGpuModels.value)
-    selectedMachineId.value = ''
-}
-
-const handleGpuCountChange = () => {
-    console.log('GPU数量改变:', gpuCount.value)
-    selectedMachineId.value = ''
-}
-
-const isGpuCountDisabled = (count: number) => {
-    const machine = filteredMachineList.value.find(m => m.id === selectedMachineId.value)
-    return machine ? count > machine.availableGpuCount : false
-}
-
-const filter = (inputValue: string, path: any[]) => {
-    return path.some(option =>
-        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
-    )
-}
-
 const handleCreate = async () => {
    creating.value = true
    try {
-        await new Promise(resolve => setTimeout(resolve, 2000))
+        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)
        message.success('实例创建成功！')
+        creating.value=false
    } catch (error) {
        message.error('创建失败，请重试')
    } finally {
@ -702,77 +250,7 @@ const handleCancel = () => {
    window.history.back()
 }

-// 监听选中的机器列表，自动选择第一个可用的机器
-watch(filteredMachineList, (newList) => {
-    if (newList.length > 0 && !selectedMachineId.value) {
-        selectedMachineId.value = newList[0].id
-    } else if (newList.length === 0) {
-        selectedMachineId.value = ''
-    }
-}, { immediate: true })

-// 监听器
-watch(needExpand, (newVal) => {
-    if (!newVal) {
-        expandSize.value = 100
-    }
-})
-
-watch(selectedMachineId, (newId) => {
-    if (newId && needExpand.value) {
-        const machine = allMachineList.value.find(m => m.id === newId)
-        if (machine && expandSize.value > machine.expandableDisk) {
-            expandSize.value = machine.expandableDisk
-        }
-    }
-})
-
-// 初始化时设置默认的GPU型号
-if (availableGpuModels.value.length > 0) {
-    selectedGpuModels.value = [availableGpuModels.value[0].value]
-}
-
-// 价格明细计算
-const gpuPrice = computed(() => {
-    const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
-    if (!machine) return '0.00'
-
-    let price = machine.basePrice * gpuCount.value
-    if (billingType.value === 'payg') price = price / (7 * 24)
-    else if (billingType.value === 'daily') price = price / 7
-    else if (billingType.value === 'monthly') price = price * 4
-
-    return price.toFixed(2)
-})
-
-const diskPrice = computed(() => {
-    if (!needExpand.value || expandSize.value <= 0) return '0.00'
-    // 假设每GB硬盘费用为0.1元/周
-    const pricePerGB = 0.1
-    let price = pricePerGB * expandSize.value
-    if (billingType.value === 'payg') price = price / (7 * 24)
-    else if (billingType.value === 'daily') price = price / 7
-    else if (billingType.value === 'monthly') price = price * 4
-
-    return price.toFixed(2)
-})
-
-const couponDiscount = computed(() => {
-    if (!selectedCoupon.value) return '0.00'
-    const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
-    return coupon ? coupon.amount.toFixed(2) : '0.00'
-})
-
-const showPriceBreakdown = computed(() => {
-    return diskPrice !== '0.00' || couponDiscount !== '0.00'
-})
-
-const calculateDiscount = () => {
-    if (!originalTotalPrice.value || totalPrice.value === '0.00') return 0
-    const original = parseFloat(originalTotalPrice.value)
-    const current = parseFloat(totalPrice.value)
-    return Math.round((original - current) / original * 100)
-}
 </script>

 <style scoped>
@ -781,7 +259,6 @@ const calculateDiscount = () => {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
-    min-height: 100vh;
    background: url('@/assets/bgImg.png') no-repeat center / 100% 100%;
 }

@ -1007,7 +484,7 @@ const calculateDiscount = () => {
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
    align-items: flex-start;
    backdrop-filter: blur(10px);
    z-index: 100;
@ -1026,7 +503,8 @@ const calculateDiscount = () => {
 /* 左侧：费用汇总 */
 .price-summary {
    display: flex;
-    gap: 40px;
+    flex-direction: column;
+    gap: 20px;
    flex: 1;
 }

@ -1038,7 +516,7 @@ const calculateDiscount = () => {
 .balance-label {
    font-size: 14px;
    color: #666;
-    margin-bottom: 8px;
+    /* margin-bottom: 8px; */
    font-weight: 500;
 }

--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@ -84,22 +84,22 @@
                  <span class="price-unit">元/卡/小时</span>
                </div>
                <a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
-                  @click.stop="handleRentMachine(record.id)">
+                  @click.stop="handleRentMachine(record)">
                  立即购买
                </a-button>
              </div>
            </div>
-            <div class="pagination-container">
-              <a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="hostTotal"
-                show-size-changer show-quick-jumper />
-            </div>
+
          </div>
        </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>
@ -186,13 +186,15 @@ const handleSelectMachine = (id: string) => {
  selectedMachineId.value = id
 }
 // 一卡可租
-const handleRentMachine = (id: string) => {
-  router.push("/layout/create")
+const handleRentMachine = (record: any) => {
+  router.push({path:"/layout/create",query:record})

 }

-const handleGpuCountChange = () => {
-  console.log('GPU数量改变:', gpuCount.value)
+const handleGpuCountChange = (e:any) => {
+  // console.log(e)
+  gpuCount.value=e
+  getHostList()
  selectedMachineId.value = ''
  currentPage.value = 1
 }
Author	SHA1	Message	Date
Leo_Ding	2d0d6eb59b	1	2026-01-16 18:25:56 +08:00
Leo_Ding	2712949a96	Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web	2026-01-16 17:41:28 +08:00
Leo_Ding	88a7c61e4c	实例创建	2026-01-16 17:40:19 +08:00