From 3c87fcb2a93d595ff19500a9603a9bf0e191e2ed Mon Sep 17 00:00:00 2001
From: wzy-warehouse <18135009705@163.com>
Date: Wed, 17 Jun 2026 15:41:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E6=82=A3=E7=82=B9=E9=A3=8E=E9=99=A9?=
 =?UTF-8?q?=E7=82=B9=E6=B7=BB=E5=8A=A0=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/common/InformationBox.vue       | 19 ++++++++++++++-----
 .../basic/CollapseComponent.vue               |  4 ++--
 .../basic/DebrisFlowComponent.vue             |  4 ++--
 .../basic/FlashFloodComponent.vue             |  4 ++--
 .../basic/LandslideComponent.vue              |  4 ++--
 .../basic/RiskPointComponent.vue              |  4 ++--
 .../basic/WaterLoggingComponent.vue           |  4 ++--
 .../detail-panels/BridgeComponent.vue         |  1 +
 .../DangerousSourceComponent.vue              |  1 +
 .../EmergencyShelterComponent.vue             |  1 +
 .../detail-panels/FireStationComponent.vue    |  1 +
 .../detail-panels/HospitalComponent.vue       |  1 +
 .../detail-panels/ReservoirComponent.vue      |  1 +
 .../detail-panels/SchoolComponent.vue         |  1 +
 .../detail-panels/StorePointsComponent.vue    |  1 +
 .../detail-panels/SubwayStationComponent.vue  |  1 +
 src/hooks/rain-earthquake/useHiddenPoint.ts   |  8 ++++----
 src/hooks/rain-earthquake/useRiskPoint.ts     |  8 ++++----
 18 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/component/common/InformationBox.vue b/src/component/common/InformationBox.vue
index 9eee1ff..28f4a37 100644
--- a/src/component/common/InformationBox.vue
+++ b/src/component/common/InformationBox.vue
@@ -16,7 +16,11 @@
     </header>
     <div class="content">
       <table class="table">
-        <tr v-for="(tableData, index) in tableDatas" :key="index">
+        <tr
+          v-for="(tableData, index) in tableDatas"
+          :key="index"
+          :style="tableData.styles || {}"
+        >
           <td class="label">{{ tableData.title }}</td>
           <td>{{ tableData.content }}</td>
         </tr>
@@ -33,7 +37,7 @@
     title: string;
     data: Record<string, string>;
     field: Record<string, string>;
-    color: Record<string, string> | null;
+    style?: Record<string, Record<string, string>>;
     offsetX: number;
     offsetY: number;
   }>();
@@ -44,7 +48,8 @@
   const newOffsetX = ref(props.offsetX);
   const newOffsetY = ref(props.offsetY);
 
-  const tableDatas: Ref<{ title: string; content: string }[]> = ref([]);
+  const tableDatas: Ref<{ title: string; content: string; styles?: Record<string, string> }[]> =
+    ref([]);
 
   onMounted(() => {
     // 判断是否超出屏幕，超出就重新定位
@@ -59,10 +64,14 @@
     Object.entries(props.data).forEach(([key, value]) => {
       // 判断key是不是存在field中，存在就添加到表格数据，不存在则不添加
       if (Object.hasOwn(props.field, key) && value) {
-        tableDatas.value.push({
+        const rowData: { title: string; content: string; styles?: Record<string, string> } = {
           title: props.field[key],
           content: value,
-        });
+        };
+        if (props.style && Object.hasOwn(props.style, key)) {
+          rowData.styles = props.style[key];
+        }
+        tableDatas.value.push(rowData);
       }
     });
   });
diff --git a/src/component/rain-earthquake/basic/CollapseComponent.vue b/src/component/rain-earthquake/basic/CollapseComponent.vue
index 63b3a50..95b205a 100644
--- a/src/component/rain-earthquake/basic/CollapseComponent.vue
+++ b/src/component/rain-earthquake/basic/CollapseComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="collapsePointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.collapseHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -51,7 +51,7 @@
   const loadingResourceStore = useLoadingResourceStore();
   const simulationIdStore = useSimulationIdStore();
 
-  const { field, color, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
diff --git a/src/component/rain-earthquake/basic/DebrisFlowComponent.vue b/src/component/rain-earthquake/basic/DebrisFlowComponent.vue
index be36534..6f51155 100644
--- a/src/component/rain-earthquake/basic/DebrisFlowComponent.vue
+++ b/src/component/rain-earthquake/basic/DebrisFlowComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="debrisFlowPointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.debrisFlowHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -51,7 +51,7 @@
   const loadingResourceStore = useLoadingResourceStore();
   const simulationIdStore = useSimulationIdStore();
 
-  const { field, color, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
diff --git a/src/component/rain-earthquake/basic/FlashFloodComponent.vue b/src/component/rain-earthquake/basic/FlashFloodComponent.vue
index 057d339..0f20c37 100644
--- a/src/component/rain-earthquake/basic/FlashFloodComponent.vue
+++ b/src/component/rain-earthquake/basic/FlashFloodComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="flashFloodPointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.flashFloodHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -51,7 +51,7 @@
   const loadingResourceStore = useLoadingResourceStore();
   const simulationIdStore = useSimulationIdStore();
 
-  const { field, color, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
diff --git a/src/component/rain-earthquake/basic/LandslideComponent.vue b/src/component/rain-earthquake/basic/LandslideComponent.vue
index 31d63f7..4a00b51 100644
--- a/src/component/rain-earthquake/basic/LandslideComponent.vue
+++ b/src/component/rain-earthquake/basic/LandslideComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="landslidePointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.landslideHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -51,7 +51,7 @@
   const loadingResourceStore = useLoadingResourceStore();
   const simulationIdStore = useSimulationIdStore();
 
-  const { field, color, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
diff --git a/src/component/rain-earthquake/basic/RiskPointComponent.vue b/src/component/rain-earthquake/basic/RiskPointComponent.vue
index c80792b..95c2e17 100644
--- a/src/component/rain-earthquake/basic/RiskPointComponent.vue
+++ b/src/component/rain-earthquake/basic/RiskPointComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="riskPointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.riskPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -53,7 +53,7 @@
   const riskPointDetail = ref<Point>();
 
   // 获取钩子函数
-  const { informationBoxTitle, field, color, getDisasterIcon } = useRiskPoint();
+  const { informationBoxTitle, field, style, getDisasterIcon } = useRiskPoint();
 
   $api.riskSpots.getBasePoints().then((res) => {
     riskPoints.value = res.data;
diff --git a/src/component/rain-earthquake/basic/WaterLoggingComponent.vue b/src/component/rain-earthquake/basic/WaterLoggingComponent.vue
index 6d0ce71..c6f0874 100644
--- a/src/component/rain-earthquake/basic/WaterLoggingComponent.vue
+++ b/src/component/rain-earthquake/basic/WaterLoggingComponent.vue
@@ -15,7 +15,7 @@
     <InformationBox
       :data="waterLoggingPointDetail as Record<string, any>"
       :field="field"
-      :color="color"
+      :style="style"
       v-if="loadingInformationStore.waterLoggingHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -51,7 +51,7 @@
   const loadingResourceStore = useLoadingResourceStore();
   const simulationIdStore = useSimulationIdStore();
 
-  const { field, color, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
diff --git a/src/component/rain-earthquake/detail-panels/BridgeComponent.vue b/src/component/rain-earthquake/detail-panels/BridgeComponent.vue
index 76b756f..74daf8e 100644
--- a/src/component/rain-earthquake/detail-panels/BridgeComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/BridgeComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.bridge.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue b/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
index 2ec4682..d6724de 100644
--- a/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="dangerousSourcePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.dangerousSource.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue b/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
index 0b19d80..98765d1 100644
--- a/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="emergencyShelterPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.emergencyShelter.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/FireStationComponent.vue b/src/component/rain-earthquake/detail-panels/FireStationComponent.vue
index ef2de24..2214b34 100644
--- a/src/component/rain-earthquake/detail-panels/FireStationComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/FireStationComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="fireStationPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.fireStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/HospitalComponent.vue b/src/component/rain-earthquake/detail-panels/HospitalComponent.vue
index 0adadc0..04be879 100644
--- a/src/component/rain-earthquake/detail-panels/HospitalComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/HospitalComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="hospitalPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.hospital.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/ReservoirComponent.vue b/src/component/rain-earthquake/detail-panels/ReservoirComponent.vue
index 5008a00..19ee784 100644
--- a/src/component/rain-earthquake/detail-panels/ReservoirComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/ReservoirComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="reservoirDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.reservoir.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/SchoolComponent.vue b/src/component/rain-earthquake/detail-panels/SchoolComponent.vue
index 8b6633e..c69a34c 100644
--- a/src/component/rain-earthquake/detail-panels/SchoolComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/SchoolComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="schoolDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.school.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue b/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
index ced344c..a398d41 100644
--- a/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.storePoints.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue b/src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue
index 6cea559..9459d8a 100644
--- a/src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue
@@ -15,6 +15,7 @@
     <InformationBox
       :data="subwayStationDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.subwayStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
diff --git a/src/hooks/rain-earthquake/useHiddenPoint.ts b/src/hooks/rain-earthquake/useHiddenPoint.ts
index dd825b8..677c376 100644
--- a/src/hooks/rain-earthquake/useHiddenPoint.ts
+++ b/src/hooks/rain-earthquake/useHiddenPoint.ts
@@ -25,10 +25,10 @@ export const useHiddenPoint = () => {
   };
 
   /**
-   * 颜色
+   * 样式
    */
-  const color = {
-    probability: 'red',
+  const style = {
+    probability: { background: '#888888' },
   };
 
   /**
@@ -59,5 +59,5 @@ export const useHiddenPoint = () => {
     }
   }
 
-  return { field, color, getDisasterIcon };
+  return { field, style, getDisasterIcon };
 };
diff --git a/src/hooks/rain-earthquake/useRiskPoint.ts b/src/hooks/rain-earthquake/useRiskPoint.ts
index 4aac6b2..63aca20 100644
--- a/src/hooks/rain-earthquake/useRiskPoint.ts
+++ b/src/hooks/rain-earthquake/useRiskPoint.ts
@@ -29,10 +29,10 @@ export const useRiskPoint = () => {
   };
 
   /**
-   * 颜色
+   * 样式
    */
-  const color = {
-    probability: 'red',
+  const style = {
+    probability: { background: '#888888' },
   };
 
   /**
@@ -43,5 +43,5 @@ export const useRiskPoint = () => {
     return riskAreaIcon;
   }
 
-  return { informationBoxTitle, field, color, getDisasterIcon };
+  return { informationBoxTitle, field, style, getDisasterIcon };
 };