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

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; // 商品简介

src/views/Home/Home.vue

@@ -34,20 +34,18 @@
                 <div class="statistical-item">
                   <i></i>
                   <div>
-                    <div class="label">算力利用率</div>
-                    <div class="value">{{ dashboardData.overallSituation.computeUtilizationRate }}%</div>
-<!--                    42.37%-->
+                    <div class="label">闲置算力</div>
+                    <div class="value">
+                      {{ dashboardData.overallSituation.idleCompute }} TOPS
+                    </div>
                   </div>
                 </div>
                 <div class="statistical-item">
                   <i></i>
                   <div>
-                    <div class="label">运行中任务数</div>
-                    <div class="value">
-                      {{ dashboardData.overallSituation.runningTaskCount }}
-<!--                      29
-                      <animation-count :end-val="0.83" decimals :range-min="40" :range-max="42" />-->
-                    </div>
+                    <div class="label">算力利用率</div>
+                    <div class="value">{{ dashboardData.overallSituation.computeUtilizationRate }}%</div>
+<!--                    42.37%-->
                   </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)

src/views/compute/resourcespu/form/index.vue

@@ -130,15 +130,30 @@
 
       <!-- 5. 服务器信息 -->
       <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="选择地区" prop="areaId" style="margin-bottom: 0;">
+          <el-cascader
+            v-if="areaList.length > 0"
+            v-model="formData.areaId"
+            :options="areaList"
+            :props="{
+              value: 'id',
+              label: 'name',
+              children: 'children',
+              expandTrigger: 'click'
+            }"
+            placeholder="请选择省市区"
+            clearable
+            filterable
+            style="width: 300px;"
+            :disabled="isDetailMode"
+            @change="handleAreaChange"
+          />
+          <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-select v-model="formData.location" placeholder="请选择服务器所在地" clearable style="width: 180px;" :disabled="isDetailMode">
-            <el-option
-              v-for="option in resourceConfigStore.getOptionsByType('location')"
-              :key="option.id"
-              :label="option.configOption"
-              :value="option.configOption"
-            />
-          </el-select>
+          <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) {