大屏数据：大地图真实数据管理端调整

1fe9a380 · Jony.L · 4ffe89c8 · 1fe9a380 · 1fe9a380 · 1fe9a380
Commit 1fe9a380 authored Mar 05, 2026 by Jony.L
Expand all Show whitespace changes
Inline Side-by-side

Showing with 76 additions and 21 deletions

src/api/compute/resourcespu/index.ts
+1 -0

src/views/Home/Home.vue
+12 -9

src/views/biz/home/index.vue
+0 -0

src/views/compute/resourcespu/form/index.vue
+63 -12

No files found.
--- a/src/api/compute/resourcespu/index.ts
+++ b/src/api/compute/resourcespu/index.ts
@@ -16,6 +16,7 @@ export interface ResourceSpu {
          nic?: string; // 网卡配置
          ip?: string; // 服务器ip
          location?: string; // 位置
+          areaId?: number; // 地区ID
          initUsername?: string; // 初始用户名
          initPassword?: string; // 初始密码
          intro?: string; // 商品简介

--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -34,20 +34,18 @@
                <div class="statistical-item">
                  <i></i>
                  <div>
-                    <div class="label">算力利用率</div>
+                    <div class="label">闲置算力</div>
-                    <div class="value">{{ dashboardData.overallSituation.computeUtilizationRate }}%</div>
+                    <div class="value">
-<!--                    42.37%-->
+                      {{ dashboardData.overallSituation.idleCompute }} TOPS
+                    </div>
                  </div>
                </div>
                <div class="statistical-item">
                  <i></i>
                  <div>
-                    <div class="label">运行中任务数</div>
+                    <div class="label">算力利用率</div>
-                    <div class="value">
+                    <div class="value">{{ dashboardData.overallSituation.computeUtilizationRate }}%</div>
-                      {{ dashboardData.overallSituation.runningTaskCount }}
+<!--                    42.37%-->
-<!--                      29
-                      <animation-count :end-val="0.83" decimals :range-min="40" :range-max="42" />-->
-                    </div>
                  </div>
                </div>
              </div>
@@ -268,6 +266,11 @@ const fetchRealData = async () => {
      if (res.carouselItems) {
        dashboardData.value.carouselItems = res.carouselItems
      }
+      // 地图数据
+      if (res.mapData) {
+        dashboardData.value.mapData = res.mapData
+      }
    }
  } catch (error) {
    console.error('获取真实数据失败:', error)

--- a/src/views/biz/home/index.vue
+++ b/src/views/biz/home/index.vue
--- a/src/views/compute/resourcespu/form/index.vue
+++ b/src/views/compute/resourcespu/form/index.vue
@@ -130,15 +130,30 @@
      <!-- 5. 服务器信息 -->
      <div style="display: flex; margin-bottom: 24px;">
-        <el-form-item label="服务器所在地" prop="location" style="margin-right: 20px; margin-bottom: 0;">
+        <el-form-item label="选择地区" prop="areaId" style="margin-bottom: 0;">
-          <el-select v-model="formData.location" placeholder="请选择服务器所在地" clearable style="width: 180px;" :disabled="isDetailMode">
+          <el-cascader
-            <el-option
+            v-if="areaList.length > 0"
-              v-for="option in resourceConfigStore.getOptionsByType('location')"
+            v-model="formData.areaId"
-              :key="option.id"
+            :options="areaList"
-              :label="option.configOption"
+            :props="{
-              :value="option.configOption"
+              value: 'id',
+              label: 'name',
+              children: 'children',
+              expandTrigger: 'click'
+            }"
+            placeholder="请选择省市区"
+            clearable
+            filterable
+            style="width: 300px;"
+            :disabled="isDetailMode"
+            @change="handleAreaChange"
          />
-          </el-select>
+          <el-text v-else type="info">加载中...</el-text>
+        </el-form-item>
+      </div>
+      <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="服务器所在地" prop="location" style="margin-right: 20px; margin-bottom: 0;">
+          <el-input v-model="formData.location" placeholder="选择地区后自动显示" style="width: 180px;" disabled />
        </el-form-item>
        <el-form-item label="服务器IP" prop="ip" style="margin-bottom: 0;">
          <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 180px;" :disabled="isDetailMode" />
@@ -217,6 +232,7 @@ import { UploadImg } from '@/components/UploadFile'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
 import { ResourceSpu, ResourceSpuApi } from '@/api/compute/resourcespu'
+import * as AreaApi from '@/api/system/area'
 defineOptions({ name: 'ResourceSpuAdd' })
@@ -239,6 +255,7 @@ const resourceConfigStore = useResourceConfigStore() // 资源配置store
 const formLoading = ref(false) // 表单的加载中
 const formRef = ref() // 表单 Ref
 const categoryList = ref<any[]>([])
+const areaList = ref<any[]>([]) // 地区树数据
 // 从store获取硬件配置选项
 const cpuOptions = computed(() => resourceConfigStore.getOptionsByType('cpu'))
@@ -271,6 +288,7 @@ const formData = ref<ResourceSpu>({
  memoryCapacity: undefined,
  sales: undefined,
  location: undefined,
+  areaId: undefined,
  status: undefined
 })
@@ -292,10 +310,41 @@ const formRules = reactive({
  categoryId: [{ required: true, message: '算力资源分类编号不能为空', trigger: 'blur' }],
  picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
  sales: [{ required: true, message: '商品销量不能为空', trigger: 'blur' }],
-  location: [{ required: true, message: '服务器所在地不能为空', trigger: 'blur' }],
+  areaId: [{ required: true, message: '服务器所在地不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
+/** 地区选择变化时，自动设置 location 为市级名称（第二级） */
+const handleAreaChange = (value: number[]) => {
+  if (!value || value.length === 0) {
+    formData.value.location = undefined
+    formData.value.areaId = undefined
+    return
+  }
+  // el-cascader 返回的是数组 [省级id, 市级id, 区县级id]
+  // 取区县级id（最后一个元素）作为 areaId 的值
+  const districtId = value[value.length - 1]
+  formData.value.areaId = districtId
+  // 获取市级id（第二个元素）
+  const cityId = value[1]
+  // 查找市级名称
+  const findCityName = (list: any[], cityId: number): string | null => {
+    for (const item of list) {
+      if (item.children) {
+        for (const city of item.children) {
+          if (city.id === cityId) {
+            return city.name
+          }
+        }
+      }
+    }
+    return null
+  }
+  formData.value.location = findCityName(areaList.value, cityId) || undefined
+}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -330,12 +379,14 @@ const close = () => {
 /** 初始化 */
 onMounted(async () => {
  try {
-    // 并行加载分类列表和硬件配置选项
+    // 并行加载分类列表、硬件配置选项和地区树
-    const [categoryResponse] = await Promise.all([
+    const [categoryResponse, _, areaResponse] = await Promise.all([
      ResourceSpuApi.listSimpleCategory(),
-      resourceConfigStore.loadConfigOptions()
+      resourceConfigStore.loadConfigOptions(),
+      AreaApi.getAreaTree()
    ])
    categoryList.value = categoryResponse
+    areaList.value = areaResponse
    // 编辑模式或详情模式需要获取数据
    if (isEditMode.value || isDetailMode.value) {