Skip to content

phsl / admin

Go to a project
Commit 388a3085 by Jony.L
Options

轮播数据调整 轮播数据管理调整

parent 1fe9a380
Showing with 116 additions and 130 deletions
src/views/Home/Home.vue
...@@ -82,17 +82,17 @@ ...@@ -82,17 +82,17 @@
</div> </div>
</div> </div>
<div class="statistical-item"> <div class="statistical-item">
<img src="@/assets/images/statistical-icon3.png" /> <img src="@/assets/images/statistical-icon4.png" />
<div> <div>
<div class="label">模型服务在线率</div> <div class="label">Api调用次数</div>
<div class="value">{{ item.modelOnlineRate }}%</div> <div class="value">{{ item.apiCallTotal }}次</div>
</div> </div>
</div> </div>
<div class="statistical-item"> <div class="statistical-item">
<img src="@/assets/images/statistical-icon4.png" /> <img src="@/assets/images/statistical-icon3.png" />
<div> <div>
<div class="label">Api调用次数</div> <div class="label">模型服务在线率</div>
<div class="value">{{ item.apiCallTotal }}次</div> <div class="value">{{ item.modelOnlineRate }}%</div>
</div> </div>
</div> </div>
</div> </div>
......
src/views/biz/home/index.vue
...@@ -56,6 +56,59 @@ ...@@ -56,6 +56,59 @@
</el-form> </el-form>
</el-card> </el-card>
<!-- 轮播数据 -->
<el-card class="config-card" shadow="never">
<template #header>
<div class="card-header">
<Icon icon="ep:carousel" :size="20" />
<span class="title">轮播数据</span>
<el-button type="primary" size="small" @click="saveCarouselItems">保存</el-button>
</div>
</template>
<div class="table-section">
<el-button type="primary" size="small" @click="addCarouselItem" style="margin-bottom: 10px;">
<Icon icon="ep:plus" class="mr-5px" />添加数据项
</el-button>
<table class="data-table" v-if="carouselItems.length > 0">
<thead>
<tr>
<th>年月</th>
<th>上线应用数</th>
<th>可用API数</th>
<th>API调用次数</th>
<th>模型服务在线率(%)</th>
<th style="width: 80px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in carouselItems" :key="index">
<td>
<el-input v-model="item.yearMonth" placeholder="如：2025-08" size="small" />
</td>
<td>
<el-input-number v-model="item.appOnlineCount" :min="0" :controls="false" size="small" />
</td>
<td>
<el-input-number v-model="item.apiOnline" :min="0" :controls="false" size="small" />
</td>
<td>
<el-input-number v-model="item.apiCallTotal" :min="0" :controls="false" size="small" />
</td>
<td>
<el-input-number v-model="item.modelOnlineRate" :precision="2" :min="0" :max="100" :controls="false" size="small" />
</td>
<td>
<el-button type="danger" size="small" @click="removeCarouselItem(index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
<el-empty v-else description="暂无数据，请添加" :image-size="80" />
</div>
</el-card>
<!-- 第二行：API请求趋势 + 算力资源分布 --> <!-- 第二行：API请求趋势 + 算力资源分布 -->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
...@@ -309,123 +362,6 @@ ...@@ -309,123 +362,6 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<!-- 用户管理 --> <!-- 用户管理 -->
<!-- 算力资源分布 -->
<el-card class="config-card" shadow="never">
<template #header>
<div class="card-header">
<Icon icon="ep:pie-chart" :size="20" />
<span class="title">算力资源分布</span>
<el-button type="primary" size="small" @click="saveComputeDistribution">保存</el-button>
</div>
</template>
<el-tabs v-model="activeTab" type="border-card">
<!-- GPU型号 -->
<el-tab-pane label="GPU型号" name="gpu">
<div class="table-section">
<el-button type="primary" size="small" @click="addComputeItem('gpu')" style="margin-bottom: 10px;">
<Icon icon="ep:plus" class="mr-5px" />添加GPU型号
</el-button>
<table class="data-table" v-if="computeDistribution.gpu && computeDistribution.gpu.length > 0">
<thead>
<tr>
<th>型号名称</th>
<th>占比</th>
<th style="width: 80px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in computeDistribution.gpu" :key="index">
<td>
<el-input v-model="item.name" placeholder="如：4090" size="small" />
</td>
<td>
<el-input-number v-model="item.value" :precision="2" :min="0" :controls="false" size="small" />
</td>
<td>
<el-button type="danger" size="small" @click="removeComputeItem('gpu', index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
<el-empty v-else description="暂无数据，请添加" :image-size="80" />
</div>
</el-tab-pane>
<!-- 算力来源 -->
<el-tab-pane label="算力来源" name="source">
<div class="table-section">
<el-button type="primary" size="small" @click="addComputeItem('source')" style="margin-bottom: 10px;">
<Icon icon="ep:plus" class="mr-5px" />添加来源
</el-button>
<table class="data-table" v-if="computeDistribution.source && computeDistribution.source.length > 0">
<thead>
<tr>
<th>来源名称</th>
<th>占比</th>
<th style="width: 80px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in computeDistribution.source" :key="index">
<td>
<el-input v-model="item.name" placeholder="如：自有" size="small" />
</td>
<td>
<el-input-number v-model="item.value" :precision="2" :min="0" :controls="false" size="small" />
</td>
<td>
<el-button type="danger" size="small" @click="removeComputeItem('source', index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
<el-empty v-else description="暂无数据，请添加" :image-size="80" />
</div>
</el-tab-pane>
<!-- 计算资源 -->
<el-tab-pane label="计算资源" name="resource">
<div class="table-section">
<el-button type="primary" size="small" @click="addComputeItem('resource')" style="margin-bottom: 10px;">
<Icon icon="ep:plus" class="mr-5px" />添加资源类型
</el-button>
<table class="data-table" v-if="computeDistribution.resource && computeDistribution.resource.length > 0">
<thead>
<tr>
<th>资源名称</th>
<th>占比</th>
<th style="width: 80px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in computeDistribution.resource" :key="index">
<td>
<el-input v-model="item.name" placeholder="如：裸金属" size="small" />
</td>
<td>
<el-input-number v-model="item.value" :precision="2" :min="0" :controls="false" size="small" />
</td>
<td>
<el-button type="danger" size="small" @click="removeComputeItem('resource', index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
<el-empty v-else description="暂无数据，请添加" :image-size="80" />
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
<el-col :span="12">
<!-- 用户管理 -->
<el-card class="config-card" shadow="never"> <el-card class="config-card" shadow="never">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
...@@ -577,10 +513,7 @@ ...@@ -577,10 +513,7 @@
</el-tabs> </el-tabs>
</el-card> </el-card>
</el-col> </el-col>
</el-row>
<!-- 第三行：服务能力 + 订单管理 -->
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<!-- 服务能力 --> <!-- 服务能力 -->
<el-card class="config-card" shadow="never"> <el-card class="config-card" shadow="never">
...@@ -627,7 +560,10 @@ ...@@ -627,7 +560,10 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row>
<!-- 第四行：订单管理 + 地图数据 -->
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<!-- 订单管理 --> <!-- 订单管理 -->
<el-card class="config-card" shadow="never"> <el-card class="config-card" shadow="never">
...@@ -793,11 +729,9 @@ ...@@ -793,11 +729,9 @@
</el-tabs> </el-tabs>
</el-card> </el-card>
</el-col> </el-col>
</el-row>
<!-- 地图数据 -->
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<!-- 地图数据 -->
<el-card class="config-card" shadow="never"> <el-card class="config-card" shadow="never">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
...@@ -885,6 +819,9 @@ const usersData = ref({ ...@@ -885,6 +819,9 @@ const usersData = ref({
// 服务能力 // 服务能力
const serviceCapabilityList = ref([]) const serviceCapabilityList = ref([])
// 轮播数据
const carouselItems = ref([])
// 算力资源分布 // 算力资源分布
const activeTab = ref('gpu') const activeTab = ref('gpu')
const computeDistribution = ref({ const computeDistribution = ref({
...@@ -973,6 +910,12 @@ const loadAllMockData = async () => { ...@@ -973,6 +910,12 @@ const loadAllMockData = async () => {
} catch (e) { } catch (e) {
console.error('解析地图数据失败', e) console.error('解析地图数据失败', e)
} }
} else if (item.configKey === 'mock_app_and_model') {
try {
carouselItems.value = JSON.parse(item.configValue)
} catch (e) {
console.error('解析轮播数据失败', e)
}
} }
}) })
} }
...@@ -1167,6 +1110,48 @@ const removeServiceCapabilityItem = (index: number) => { ...@@ -1167,6 +1110,48 @@ const removeServiceCapabilityItem = (index: number) => {
serviceCapabilityList.value.splice(index, 1) serviceCapabilityList.value.splice(index, 1)
} }
// 轮播数据 - 保存
const saveCarouselItems = async () => {
try {
const res = await HomeDashboardMockApi.getHomeDashboardMockPage({ pageNo: 1, pageSize: 100 })
if (res && res.list) {
const config = res.list.find(item => item.configKey === 'mock_app_and_model')
if (config) {
const updateData = { ...config, configValue: JSON.stringify(carouselItems.value) }
await HomeDashboardMockApi.updateHomeDashboardMock(updateData)
} else {
const createData = {
configKey: 'mock_app_and_model',
configType: 'data',
configValue: JSON.stringify(carouselItems.value),
description: '轮播数据模拟数据'
}
await HomeDashboardMockApi.createHomeDashboardMock(createData)
}
message.success('保存成功')
}
} catch (error) {
console.error('保存失败', error)
message.error('保存失败')
}
}
// 轮播数据 - 添加数据项
const addCarouselItem = () => {
carouselItems.value.push({
yearMonth: '',
appOnlineCount: 0,
apiOnline: 0,
modelOnlineRate: 0,
apiCallTotal: 0
})
}
// 轮播数据 - 删除数据项
const removeCarouselItem = (index: number) => {
carouselItems.value.splice(index, 1)
}
// 订单管理 - 保存 // 订单管理 - 保存
const saveOrders = async () => { const saveOrders = async () => {
try { try {
...@@ -1313,4 +1298,4 @@ onMounted(() => { ...@@ -1313,4 +1298,4 @@ onMounted(() => {
} }
} }
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment