feat(cockpit): 整合应急资源后端数据，优化UI布局

- 将EmergencyResources组件切换为从/district/statistics API获取动态数据
- 更新属性名（例如，name改为qxmc，stations改为yhzCount）并为表格主体添加滚动条
- 重构BlockEvent统计显示，加入值容器并调整布局
- 更新WeatherWarning徽章样式，使用背景图并注释掉未使用的元素
- 添加/修改公共面板头和天气徽章背景的图片资源

packages/screen/src/views/cockpit/components/BlockEvent.vue

@@ -14,9 +14,12 @@
         <img src="../assets/img/block-stat-icon.png" alt="icon" class="stat-icon" />
         <div class="stat-content">
           <div class="stat-title">{{ stat.title }}</div>
+          <div class="stat-value-container">
             <div class="stat-value">{{ stat.value }}</div>
             <div class="stat-unit">公里</div>
-          <img src="../assets/img/block-stat-decoration.png" alt="decoration" class="stat-decoration" />
+          </div>
+          
+          <!-- <img src="../assets/img/block-stat-decoration.png" alt="decoration" class="stat-decoration" /> -->
         </div>
       </div>
     </div>
@@ -113,13 +116,24 @@ const stats = ref([
     }
 
     .stat-unit {
-      position: absolute;
-      top: vh(50);
-      right: vw(20);
+      // position: absolute;
+      // top: vh(50);
+      // right: vw(20);
       color: rgba(255, 255, 255, 1);
       font-size: fs(15);
     }
 
+
+    .stat-value-container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      background: url(../assets/img/block-stat-decoration.png) no-repeat;
+      background-size: 100% auto;
+      background-position: bottom;
+      padding: 0 vw(40) vh(10) 0;
+    }
+
     .stat-decoration {
       width: vw(154);
       height: vh(29);

packages/screen/src/views/cockpit/components/EmergencyResources.vue

@@ -13,6 +13,7 @@
         <span>应急设备</span>
       </div>
 
+      <div class="table-body">
         <div
           v-for="(resource, index) in resources"
           :key="resource.id"
@@ -20,11 +21,11 @@
           :class="{ 'row-alt': index % 2 === 0 }"
         >
           <div class="row-number">{{ index + 1 }}</div>
-        <span class="district-name">{{ resource.name }}</span>
-        <span class="count green">{{ resource.stations }}</span>
-        <span class="count orange">{{ resource.supplies }}</span>
+          <span class="district-name">{{ resource.qxmc }}</span>
+          <span class="count green">{{ resource.yhzCount }}</span>
+          <span class="count orange">{{ resource.wzCount }}</span>
           <div class="equipment-cell">
-          <span class="count" :class="resource.equipmentClass">{{ resource.equipment }}</span>
+            <span class="count" :class="resource.equipmentClass">{{ resource.sbCount }}</span>
             <img
               v-if="resource.hasAlert"
               src="../assets/img/emergency-alert-icon.png"
@@ -35,10 +36,12 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { request } from '@shared/utils/request'
 
 const resources = ref([
   {
@@ -96,6 +99,25 @@ const resources = ref([
     hasAlert: false
   }
 ])
+
+// 请求后端接口 /district/statistics
+const getDistrictStatistics = async () => {
+  const res = await request({
+    url: '/snow-ops-platform/district/statistics',
+    method: 'GET'
+  })
+  console.log(res)
+  if(res.code === '00000') {
+    resources.value = res.data
+  } else {
+    console.log(res.message)
+  }
+}
+
+onMounted(() => {
+  getDistrictStatistics()
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -106,6 +128,7 @@ const resources = ref([
   background-size: 100% 100%;
   padding: vw(20) vw(30);
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
@@ -131,6 +154,7 @@ const resources = ref([
 
 .resource-table {
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 
@@ -149,6 +173,34 @@ const resources = ref([
     margin-bottom: vh(5);
   }
 
+  .table-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(28, 161, 255, 0.4) transparent;
+
+    &::-webkit-scrollbar {
+      width: vw(4);
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(28, 161, 255, 0.4);
+      border-radius: vw(2);
+
+      &:hover {
+        background: rgba(28, 161, 255, 0.6);
+      }
+    }
+  }
+
   .table-row {
     height: vh(35);
     display: grid;

packages/screen/src/views/cockpit/components/WeatherWarning.vue

@@ -15,16 +15,16 @@
         <div class="badge-container">
           <!-- 六边形徽章 -->
           <div class="level-badge">
-            <img
+            <!-- <img
               src="../assets/img/weather-badge-hexagon.png"
               alt="badge"
               class="badge-bg"
-            />
+            /> -->
             <span class="level-count" :style="{ color: level.color }">{{ level.count }}</span>
           </div>
 
           <!-- 底座光圈（双背景图） -->
-          <div class="glow-base"></div>
+          <!-- <div class="glow-base"></div> -->
         </div>
 
         <!-- 底部文字 -->
@@ -158,7 +158,7 @@ const districts = ref([
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: vh(10);
+  // gap: vh(10);
 
   // 徽章和光圈容器
   .badge-container {
@@ -177,6 +177,7 @@ const districts = ref([
     align-items: center;
     justify-content: center;
     z-index: 2;
+    background: url(../assets/img/weather-badge-bg.png) center center / 100% 100% no-repeat;
 
     .badge-bg {
       position: absolute;
@@ -192,6 +193,7 @@ const districts = ref([
       font-weight: normal;
       z-index: 1;
       line-height: 1;
+      margin-top: vh(-18);
     }
   }