隐患点风险点添加颜色

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);
       }
     });
   });

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);

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);

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);

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);

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;

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);

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"

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"

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"

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"

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"

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"

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"

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"

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"

src/hooks/rain-earthquake/useHiddenPoint.ts

@@ -25,10 +25,10 @@ export const useHiddenPoint = () => {
   };
 
   /**
-   * 颜色
+   * 样式
    */
-  const color = {
+  const style = {
-    probability: 'red',
+    probability: { background: '#888888' },
   };
 
   /**
@@ -59,5 +59,5 @@ export const useHiddenPoint = () => {
     }
   }
 
-  return { field, color, getDisasterIcon };
+  return { field, style, getDisasterIcon };
 };

src/hooks/rain-earthquake/useRiskPoint.ts

@@ -29,10 +29,10 @@ export const useRiskPoint = () => {
   };
 
   /**
-   * 颜色
+   * 样式
    */
-  const color = {
+  const style = {
-    probability: 'red',
+    probability: { background: '#888888' },
   };
 
   /**
@@ -43,5 +43,5 @@ export const useRiskPoint = () => {
     return riskAreaIcon;
   }
 
-  return { informationBoxTitle, field, color, getDisasterIcon };
+  return { informationBoxTitle, field, style, getDisasterIcon };
 };