fix: 接入瑞都看板设备使用状态接口

- 移除设备使用状态假数据
- 调用设备状态统计接口并固定传入 deptId
- 增加图表加载状态展示

src/views/pms/stat/rdkb/rd-use-status.vue

@@ -1,33 +1,26 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
 import { ANIMATION, CHART_RENDERER, createTooltip, FONT_FAMILY, THEME } from '@/utils/kb'
+import { IotDeviceApi } from '@/api/pms/device'
 
 interface UseStatusItem {
   name: string
   value: number
 }
 
-const statusData: UseStatusItem[] = [
-  { name: '动迁', value: 0 },
-  { name: '施工', value: 162 },
-  { name: '维修中', value: 4 },
-  { name: '完工', value: 4 },
-  { name: '待维修', value: 2 },
-  { name: '封存', value: 61 },
-  { name: '驻地待命', value: 6 },
-  { name: '待命', value: 16 },
-  { name: '准备', value: 0 },
-  { name: '现场待命', value: 1 },
-  { name: '待保养', value: 0 },
-  { name: '闲置', value: 19 },
-  { name: '观察使用', value: 1 },
-  { name: '报废', value: 0 }
-]
+interface DeviceStatusResponseItem {
+  name?: string
+  category?: string
+  value?: number | string
+}
 
+const RD_DEPT_ID = 163
 const chartRef = ref<HTMLDivElement>()
+const loading = ref(false)
+const statusData = ref<UseStatusItem[]>([])
 let chart: echarts.ECharts | null = null
 
-const chartData = computed(() => statusData.filter((item) => item.value > 0))
+const chartData = computed(() => statusData.value.filter((item) => item.value > 0))
 
 function getChartLayout() {
   const { clientWidth = 0, clientHeight = 0 } = chartRef.value ?? {}
@@ -126,8 +119,30 @@ function destroyChart() {
   chart = null
 }
 
+async function getDeviceStatus() {
+  loading.value = true
+
+  try {
+    const res = await IotDeviceApi.getIotDeviceStatus({ deptId: RD_DEPT_ID })
+    statusData.value = Array.isArray(res)
+      ? res.map((item: DeviceStatusResponseItem) => ({
+          name: item.name || item.category || '未知',
+          value: Number(item.value ?? 0)
+        }))
+      : []
+    renderChart()
+  } catch (error) {
+    console.error('获取瑞都设备使用状态失败:', error)
+    statusData.value = []
+    renderChart()
+  } finally {
+    loading.value = false
+  }
+}
+
 onMounted(() => {
   initChart()
+  getDeviceStatus()
   window.addEventListener('resize', resizeChart)
   window.addEventListener('rdkb:resize', resizeChart)
 })
@@ -148,7 +163,11 @@ onUnmounted(() => {
       </div>
       设备使用状态
     </div>
-    <div class="use-status-body">
+    <div
+      v-loading="loading"
+      element-loading-text="加载中..."
+      element-loading-background="rgb(222 236 252 / 72%)"
+      class="use-status-body">
       <div ref="chartRef" class="use-status-chart"></div>
     </div>
   </div>