Commit 84548daa by Jony.L

平台总体态势 真实数据; 后台添加算力资源spu中的算力来源:合作、自有、社会

parent bc35ed9d
......@@ -33,4 +33,9 @@ export const getTopBarData = async () => {
})
}
export const getOverallSituation = async () => {
return await request.get({
url:`/index/count/getOverallSituation`,
})
}
......@@ -20,6 +20,7 @@ export interface ResourceSpu {
initPassword?: string; // 初始密码
intro?: string; // 商品简介
categoryId?: number; // 算力资源分类编号
source?: string; // 算力来源
picUrl?: string; // 商品封面图
sliderPicUrls?: string; // 商品轮播图地址,以逗号分隔,最多15张
stock?: number; // 总库存数量
......
......@@ -181,6 +181,7 @@ export enum DICT_TYPE {
COMPUTE_RESOURCE_DURATION = 'compute_resource_duration',
COMPUTE_RESOURCE_ORDER_STATUS = 'compute_resource_order_status',
COMPUTE_RESOURCE_REFUND_STATUS = 'compute_resource_refund_status',
COMPUTE_RESOURCE_SOURCE = 'compute_resource_source',
// ========== MALL - 商品模块 ==========
PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
......
......@@ -13,19 +13,19 @@
<div class="header-title">平台总体态势</div>
<div class="cumulative-delivery">
<img src="@/assets/images/cumulative-delivery-icon.png" alt="" />
<span class="label" style="margin-left: 20px">算力总规模(PTOPS)</span>
<span class="label" style="margin-left: 20px">算力总规模(TOPS)</span>
<span class="value">
{{ dashboardData.overallSituation.allCompute }}
PTOPS</span>
TOPS</span>
</div>
<div class="statistical">
<div class="statistical-item">
<i></i>
<div>
<div class="label">已租赁算力(PTOPS)</div>
<div class="label">已租赁算力(TOPS)</div>
<div class="value">
{{ dashboardData.overallSituation.leaseCompute }} PTOPS
{{ dashboardData.overallSituation.leaseCompute }} TOPS
<!-- 139.94
<animation-count :end-val="53632" decimals :range-min="0.01" :range-max="0.02" />-->
</div>
......@@ -231,15 +231,15 @@ const fetchAllMockData = async () => {
const fetchRealData = async () => {
try {
// 并行调用所有真实数据接口
const [topBarRes, apiCallsRes, usersRes] = await Promise.all([
IndexCountApi.getTopBarData(),
const [overallRes, apiCallsRes, usersRes] = await Promise.all([
IndexCountApi.getOverallSituation(),
IndexCountApi.getApiCallsData('m'),
IndexCountApi.getUsersData('d')
])
// 总体态势数据
if (topBarRes) {
dashboardData.value.overallSituation = topBarRes
if (overallRes) {
dashboardData.value.overallSituation = overallRes
}
// API 调用趋势
......
......@@ -121,13 +121,15 @@ const outerPadding = ref('0px')
// 从 dashboardData 获取图表数据
const getChartData = () => {
const data = dashboardData.value.apiCalls || []
const apiCalls = dashboardData.value.apiCalls || {}
const data = apiCalls[rangeType.value] || []
if (!Array.isArray(data)) {
return { x: [], y: [] }
}
// 根据数据格式转换为图表数据
// apiCalls 格式: [{countDate: "2025-01-01", callsCount: 1202}, ...]
// apiCalls[d/m/y] 格式: [{countDate: "2025-01-01", callsCount: 1202}, ...]
const x = data.map(item => {
const date = new Date(item.countDate)
const m = String(date.getMonth() + 1).padStart(2, '0')
......@@ -254,6 +256,11 @@ watch(() => dashboardData.value.apiCalls, () => {
render()
}, { deep: true })
// 监听维度切换
watch(rangeType, () => {
render()
})
onBeforeUnmount(() => {
window.removeEventListener('resize', onResize)
document.removeEventListener('fullscreenchange', onFsChange)
......
......@@ -90,8 +90,9 @@ function getOption(xData: string[], growth: number[], active: number[]): ECharts
}
async function render() {
// 直接从 dashboardData 获取数据
const arr = dashboardData.value.users || []
// 从 dashboardData 获取对应维度的数据
const users = dashboardData.value.users || {}
const arr = users[dateType.value] || []
const x = arr.map((item: any) => t(item.countDate))
const growth = arr.map((item: any) => item.growthUsersCount ?? item.usersCount ?? 0)
......@@ -120,6 +121,11 @@ watch(() => dashboardData.value.users, () => {
render()
}, { deep: true })
// 监听维度切换
watch(dateType, () => {
render()
})
onMounted(() => {
render()
window.addEventListener('resize', onResize)
......
......@@ -30,6 +30,18 @@
</el-select>
</el-form-item>
<!-- 3.1 算力来源 -->
<el-form-item label="算力来源" prop="source">
<el-select v-model="formData.source" placeholder="请选择算力来源" clearable style="width: 200px;" :disabled="isDetailMode">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SOURCE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- 4. 硬件配置 - inline布局 -->
<div style="display: flex; margin-bottom: 16px;">
<el-form-item label="CPU配置" prop="cpu" style="margin-right: 20px; margin-bottom: 0;">
......@@ -200,7 +212,7 @@
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { UploadImg } from '@/components/UploadFile'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
......@@ -250,6 +262,7 @@ const formData = ref<ResourceSpu>({
initPassword: undefined,
intro: undefined,
categoryId: undefined,
source: undefined,
picUrl: undefined,
sliderPicUrls: undefined,
compute: undefined,
......
......@@ -128,6 +128,21 @@
/>
</el-select>
</el-form-item>
<el-form-item label="算力来源" prop="source">
<el-select
v-model="queryParams.source"
placeholder="请选择算力来源"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SOURCE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="服务器所在地" prop="location">
<el-select
v-model="queryParams.location"
......@@ -270,6 +285,11 @@
<!-- 硬件配置字段已隐藏 -->
<!-- <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />-->
<el-table-column label="算力资源分类" align="center" prop="categoryName" min-width="150" />
<el-table-column label="算力来源" align="center" prop="source" min-width="120">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SOURCE" :value="scope.row.source" />
</template>
</el-table-column>
<el-table-column label="服务器所在地" align="center" prop="location" min-width="120" />
<el-table-column label="商品简介" align="center" prop="intro" min-width="200" />
......@@ -333,7 +353,7 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { createImageViewer } from '@/components/ImageViewer'
import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
import { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
const { push } = useRouter()
......@@ -362,6 +382,7 @@ const queryParams = reactive({
initPassword: undefined,
intro: undefined,
categoryId: undefined,
source: undefined,
location: undefined,
picUrl: undefined,
sliderPicUrls: undefined,
......
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